Libro Js

javascriptDescripción completa...
Author:  Jehú Guillén
119 downloads 693 Views 7MB Size
Report
DOWNLOAD .PDF

Recommend Documents

Node JSFull description
novel tamil
hs-jsFull description
Full description
Full description
bastaFull description
Cheat sheet for the fastest javascript framework in modern web developmentFull description
jaisakthi novel
closing remarksFull description
Documentary notesDescripción completa
Angular JS Cheat Sheet
Full description
js novel
DAFTAR SPOFull description
asuransi
tamil novel
React js tutorialsFull description
Descrição completa
dg
A presentation on the setting-up and use of Mocha JS Testing FrameworkDescrição completa
5')">


De esta forma al recargar el sitio y al hacerle click a la primera caja veremos algo como:

Desafío Ahora intenta cambiar el color de una caja al hacerle click.

No avances hasta resolver el ejercicio, más abajo aparece la respuesta.

Don’t repeat yourselve Es bastante posible que hayas planteado una solución de este tipo.

1 2 3 4 5


id="caja-1" id="caja-2" id="caja-3" id="caja-4" id="caja-5"

onclick="pintarRojo(1)">
onclick="pintarRojo(2)">
onclick="pintarRojo(3)">
onclick="pintarRojo(4)">
onclick="pintarRojo(5)">


Y luego en nuestro archivo main.js

1 2 3

var pintarRojo = function(id){ document.getElementById("caja-" + id).style.backgroundColor }

Esta solución es bastante mejor si queremos luego cambiar el color o el comportamiento después de un click pero todavía es innecesariamente complicada, requiere del id de la caja y concatenar el parámetro pasado dentro de la función. Existe una mejor forma de pasar el contenido a la función y es con el operador this.

Versión 3.0 Dentro del onclick el operador this es el mismo div, (ya no es window, hay un contexto y ese contexto es la respectiva marca), y podemos ocupar este operador para pasarle el div a la función en lugar de tener que buscarlo de nuevo con getElementById. La solución en el index sería la siguiente:

1 2 3


class="caja" class="caja" class="caja" class="caja"

onclick="pintarRojo(this)">
onclick="pintarRojo(this)"> onclick="pintarRojo(this)"> onclick="pintarRojo(this)">

4 5



y en el archivo main.js

1 2 3

var pintarRojo = function(div){ div.style.backgroundColor = "red" }

versión 4.0 Todavía podemos mejorar la solución aprendiendo un truco nuevo, el método onclick también lo podemos modificar y/o crear desde javascript manipulando directamente el DOM. De la misma forma que anteriormente obtuvimos todos los párrafos de clase párrafo, este vez obtendremos todas la cajas de clase caja y sobre cada una de ellas agregaremos el método onclick.

1 2 3 4 5 6

var cajas = document.getElementsByClassName("caja") for (i = 0; i < cajas.length; i++){ cajas[i].onclick = function(){ pintarRojo(this) } }

De esta forma el index.html nos queda:

1 2 3 4 5


class="caja">
class="caja"> class="caja"> class="caja"> class="caja">

A este buena práctica se le llama programar de forma no obstrusiva, o sea no combinar javascript con el HTML y ayuda a limpiar.

Revisando los eventos registrados

Un dato interesante, podemos revisar los eventos que un elemento tiene registrado haciendo con el inspector de elementos en el tab de elements y a la derecha en Event Listeners

Contando los segundos. Obteniendo la fecha Hasta el momento no hemos trabajado con fechas, pero obviamente que en javascript si se puede. Podemos obtener la fecha y hora actual con del sistema con:

1

new Date();

además el constructor puede ser llamado con otros parámetros obteniendo distintos resultados. Fecha actual más la cantidad de milisegundo especificada en number.

1

new Date(number);

También es posible crear la fecha utilizando múltiples parámetros

1

new Date(year, month, day, hours, minutes, seconds, milliseconds);

O con un string. y con un objeto del tipo date también podemos mostrar la hora, minutos y segundos.

Métodos para el manejo de fecha: A modo de repaso y para aprender sobre el manejo de fechas vamos a construir un contador de segundos en la página. Para eso necesitamos un HTML básico.

1 2 3 4 5 6 7 8 9 10 11 12 13

<meta charset="utf-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge">
<script src="main.js">

Y luego escribimos el javascript, lo primero que necesitamos es obtener y guardar la fecha, luego cada segundo obtenemos el tiempo nuevamente y cambiamos el HTML.

1 2 3 4 5 6 7 8

var start = new Date(); div = document.getElementById('time'); setInterval(function(){ var now = new Date(); time = now - start div.innerHTML = time }, 1000)

Esto nos mostrará los resultados en milisegundos, pero podemos mostrarla en segundos diviendo por mil y

redondeando hacia abajo con la librería Math

1 2 3 4 5 6 7 8

var start = new Date() div = document.getElementById('time') setInterval(function(){ var now = new Date() time = Math.floor((now - start) / 1000) div.innerHTML = time }, 1000)

Para construir la cuenta regresiva vamos a ocupar parse que devuelve la cantidad de milisegundos que han pasado desde el primero de enero de 1970, (fecha conocida como Unix Time) Si queremos un contador de 5 minutos, lo que haremos será obtener la fecha de ese momento y luego restaremos de 1 segundo en un segundo. Si un minuto tiene 60 segundos, 5 minutos tienes 3000 segundos y como el parámetro es en milisegundos, tendremos que agregar 000 más.

1 2 3

time_left = 3000000 d = new Date(3000000); time_left = getTime()

Creando una cuenta regresiva. Utilizando la misma lógica podemos crear una cuenta regresiva de 5 minutos, pero en esta ocasión necesitamos mover la fecha, eso lo podemos hacer utilizando los getters y setters del objeto date, con getMinutes podemos obtener la cantidad de minutos actuales y con setMinutes podemos cambiarlo, entonces si los obtenemos y le sumamos 5 minutos podemos mover la fecha 5 minutos al futuro.

1 2 3 4 5 6 7 8 9 10

var end = new Date() end.setMinutes(end.getMinutes() + 5); div = document.getElementById('time') setInterval(function(){ var now = new Date() console.log(end) time = Math.floor((end - now) / 1000) div.innerHTML = time }, 1000)

Nos quedan algunas mejoras aplicables, la primera es evitar que el tiempo sea negativo para eso basta con un if mayor que cero, pero la segunda es más interesante, vamos a hacer que en lugar de mostrarnos los segundos restantes nos muestre los minutos y segundos restantes.

1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17

var end = new Date() end.setMinutes(end.getMinutes() + 5); div = document.getElementById('time') setInterval(function(){ var now = new Date() time_left = (end - now) / 1000 if (time_left > 0) { minutes = Math.floor(time_left / 60) seconds = Math.floor(time_left % 60) div.innerHTML = minutes + ":" + seconds } }, 1000)

La función setIntreval ahora empieza calculando el tiempo restante, si ese tiempo es mayor que cero, entonces se calculan los minutos restantes, como un minuto tiene 60 segundos entonces simplemente dividimos por 60, los segundos son lo que resta de la división, para eso existe el módulo. y finalmente unimos todo en un string para mostrarlo en pantalla. I Se deja de tarea hacer un cuenta hacia atrás en días, horas minutos y segundos.

Ventanas modales En esta sección vamos a construir una ventana modal básica, a pesar de que es muy sencillo implementarlas con Bootstrap u otros frameworks de diseño, la idea es aprender a crearlas ocupando únicamente javascript. Sin diseño una ventana modal se ve así, la caja (modal) abierto está por sobre el texto.

Para hacer una ventana modal necesitamos un HTML con el div modal y un link para abrirlo. El HTML

1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17

<meta charset="utf-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge"> Abrir modal <script src="js/main.js">

18 19 20



Desde el CSS lo importante es tener dos clases, una para esconder la ventana modal y otra para mostrarla.

1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26

.modal{ width:400px; height:300px; margin:auto; top:50px; left: auto; position: fixed; background-color: white; border:solid 1px black; display:none; padding:20px; } .modal-show{ transition-timing-function: linear; transition-delay: 1s; display: inline; } .modal a{ border:solid 1px; padding:5px; float:right; }

y del javascript necesitamos generar dos eventos onclick uno para abrir la ventana modal y otra para cerrarla.

1 2 3 4 5 6

var modal = document.getElementById("modal-lorem"); var trigger = document.getElementById("modal-trigger"); var closeTrigger = document.getElementById("modal-close-trigger" trigger.onclick = function(){ modal.className = modal.className + " modal-show";

7 8 9 10 11

} closeTrigger.onclick = function(){ modal.classList.remove("modal-show"); }

Onchange Es posible además utilizar el evento onchange, este se gatilla cuando se genera un cambio sobre un elemento de HTML, por ejemplo si alguien escribe en un input, o selecciona un opción en un combo box. Para ser exactos el evento onchange no se realiza tras cada cambio si no cuando el elemento pierde el foco. Vamos a empezar con un ejemplo sencillo, un input con un valor por defecto que al cargar la página muestre el mismo valor en la consola.

HTML 1 2 3 4 5 6 7 8 9 10 11 12 13

<meta charset="utf-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <script src="main.js">

Javascript (main.js) 1 2

var input = document.getElementById("prueba"); console.log(input.value);

Ahora es donde vamos a registrar el evento, vamos a generar una función que permita que cada vez que se cambie el input muestre en la consola el nuevo valor. Gracias a onchange podemos agregar una escucha en el input.

1 2

var input = document.getElementById("prueba") input.onchange = function(){console.log("me cambian wiiii")};

Ahora cada vez que escribamos algo y le quitemos el foco al input, (por ejemplo haciendo click en el resto de la ventana) veremos un mensaje que diga hey. Podemos mostrar el valor del input ocupando this.value (donde this) es el input y value lo que se ha escrito.

oninput ¿Pero como podemos hacer para que nos avise cada cambio? No podemos con onchange, pero existe otro evento que nos puede ayudar. oninput. Probemos el mismo ejemplo anterior pero cambiando el evento.

1 2

var input = document.getElementById("prueba"); input.oninput = function(){console.log(this.value)};

De esta forma podremos ver en el navegador que cada vez que ingresamos un caracter se ejecuta el evento.

HTML tag select Además de los inputs básicos de html, existe la etiqueta select, esta en conjunto con la etiqueta option dan una lista de opciones de donde escoger, la etiqueta funciona de la siguiente forma:

1 2 3 4



Cuando se escoge una de las opciones y se envía el formulario lo que se envía no es el texto que dice opción, se envía el value. Para capturar el valor del select cuando este cambie debemos obtener el input de la etiqueta select

1 2 3 4 5

input = document.getElementById("select1") input.onchange = function(){ var options = this.options console.log(options[this.selectedIndex]) }

y listo, este script nos permitirá mostrar los resultados cada vez que el usuario selecciona una opción.

Agregando una opción A nuestro select podríamos agregarle opciones dinámicamente para eso primero vamos a crear una página web con un input y un select.

1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20

<meta charset="utf-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <script src="main.js">

y crearemos un script que permita agregar una opción en el momento de que se termine de escribir.

1 2 3 4 5 6 7 8

var input = document.getElementById("new_option") var select = document.getElementById("options") input.onchange = function(){ var option = document.createElement("option"); option.text = this.value; select.add(option, select[0]); }

En este caso onchange crea un etiqueta html option nueva, agrega el texto basado en el input y luego agrega la opción dentro del select. ¿Para qué nos podría servir esto?, un ejemplo común el de dos select donde las opciones uno dependen de la selección del primero.

Doble select Este caso es ligeramente más complejo que los anteriores, primero desde el html necesitamos dos select y dependiendo del input del primero tendremos los resultados del segundo, esa parte requiere javascript.

El HTML 1 2 3 4 5 6 7 8 9 10 11 12 13 14 15

<meta charset="utf-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge">

16 17 18 19 20 21

<script src="main.js">

El javascript En este caso ordenaremos el código en tres funciones principales, la primera será para borrar las opciones de un select, podríamos hacerlo específico para el segundo select, pero es mejor programar las cosas bien una vez y después poder reutilizarlas.

1 2 3 4 5 6

var delete_options = function(select){ options_count = select.options.length; for (var i = 0; i < options_count; i++ ){ select.remove(0); } }

El segundo método que necesitamos es uno para añadirle opciones a un select, este recibirá dos parámetros, el select al cual le agregaremos las opciones y un array con opciones que serán las agregadas.

1 2 3 4 5 6 7

var add_options = function(select, options){ for (var i = 0; i < options.length; i ++){ var option = document.createElement("option"); option.text = options[i]; select.add(option, select[i]); } }

La tercera parte es la que ya es específica a nuestro problema, primero crearemos un objeto con todas las dependencias, de esa forma si el usuario escoge uno, le preguntamos al objeto por 1 y nos devuelve un array con los valores que hay que ingresar en el segundo select.

1 2 3

var options = {1:["1.1", "1.2", "1.3"], 2:["2.1", "2.2", "2.3"], 3:[ var select1 = document.getElementById("select1");

4 5 6 7 8 9 10 11 12

var select2 = document.getElementById("select2"); add_options(select2, options[1]); select1.onchange = function(){ index = select1.options[this.selectedIndex].value; new_options = options[index]; delete_options(select2); add_options(select2, new_options); }

finalmente utilizando onchange detectaremos un cambio en el primer select, con eso tomaremos el valor escogido, lo buscaremos en el array, borraremos las opciones del segundo select y agregaremos las nuevas.

El evento load Load es un evento que se gatilla cuando el HTML está listo para ser presentado. Para probarlo cargaremos una imagen pesada de internet.

1 2 3 4 5 6 7 8 9 10 11 12

<meta charset="utf-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge">

y crearemos un javascript que nos muestre una alerta cuando la imagen se termine de cargar.

1 2 3 4

var imagen1 = document.getElementById("imagen1"); imagen1.onload = function(){ alert("imagen cargada"); }

load también se puede usar directamente sobre el objeto window, en ese caso se gatillaría cuando todo el HTML esté completamente cargado dentro del sitio.

window.onload = function(){ console.log("Todo el sitio cargado"); }

1 2 3

Este tipo de eventos son particularmente útiles a la hora de rediagramar contenido de la página, por ejemplo queremos hacer una galería de fotos y la posición de algunas fotos depende de otras, en ese caso necesitaríamos que todo el contenido esté cargado.

Bubbling Es el efecto de que los eventos flotan como burbujas hacia la etiqueta superior dentro de las etiquetas anidadas. Miremos un ejemplo para entender porque debemos manejarlo:

1 2 3 4 5 6 7 8 9 10 11 12 13 14

<meta charset="utf-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
soy el div

soy el parrafo



Capítulo 14

Ajax Ajax permite comunicarse asíncronamente con servidores, eso tiene la ventaja que podemos cargar datos nuevos sin tener que recargar la página, ademas nos permite capturar datos de otros sitios. Ajax es una acrónimo que significa Asynchronous JavaScript and XML. Para nuestro primer ejemplo vamos a consultar la API de wheather. Recomiendo visitar el sitio http://openweathermap.org/current para tener una buena idea de lo que vamos a hacer. API es un acrónimo de Access Protocol Interface, en términos prácticos una página web para programas en lugar de para seres humanos. Existen muchas APIs online, la mayoría de los servicios grandes tienen sus APIs como son los casos de Youtube, Facebook y Twitter. En esta ocasión vamos a ocupar la api de openweahtermap para probar nuestro primer llamado ajax. para lograrlo llamaremos a api.openweathermap.org/data/2.5/weather?q={city name} Un script que se conecte con la página y muestre los resultados sería de la siguiente forma:

1 2 3 4 5 6 7 8 9 10 11

xmlhttp = new XMLHttpRequest(); xmlhttp.open("GET","http://api.openweathermap.org/data/2.5/weather?q=santiag xmlhttp.send(); xmlhttp.onreadystatechange=function() { if (xmlhttp.readyState==4 && xmlhttp.status==200) { console.log(xmlhttp.responseText); } }

Analicemos el script, la primera línea,

1

1. Instanciamos un objeto del tipo XMLHttpRequest para poder realizar una conexi

2 3 4 5

2. 3. 4. 5.

Abrimos la página por **GET**, le pasamos la dirección y el tercer parámetros Enviamos el pedido a la página Esperamos la respuesta si la respuesta es 200 (o sea OK) mostramos los resultados.

Tras ejecutar el código obtendremos algo de la siguiente forma:

GET, POST y otros Veamos un par de detalles más, en el paso dos de la sección anterior hablamos de abrir la página por GET, pero ¿qué es eso? Cuando se envía un request a una página hay que especificar un verbo, por defecto es GET, este es el verbo que se ocupa cuando escribes una página web en el navegador.

Como se ve en el inspector bajo el tab network vemos que la página que el método dice GET. Pero no es el único método, también existen otros, el segundo más famoso es POST, este se ocupa cuando queremos enviar formularios y que no se vea los parámetros enviados en la URL. Otros conocidos son PUT, PATCH y DELETE.

Javascript asíncrono. En el mismo punto anterior especificamos que abrimos la página por GET, le pasamos la dirección y el tercer parámetros es para que la conexión sea asíncrona. ¿Qué significa que sea asíncrona? Significa que no se espera la respuesta, el llamado no bloquea las siguientes líneas de código y cuando se obtiene una respuesta, que puede ser en 1 segundo o 1 minuto entonces se procesa la siguiente sección, pero el código no queda bloqueado esperando una respuesta.

1 2 3 4 5 6 7

xmlhttp.onreadystatechange=function() { if (xmlhttp.readyState==4 && xmlhttp.status==200) { console.log(xmlhttp.responseText); } }

Las líneas anteriores son el código que se ejecuta cuando se devuelve el resultado, readyState == 4 significa que ha sido completamente cargado, y status == 200 implica que el servidor al que llamamos envió correctamente los resultados.

STATUS El servidor siempre contesta con un status, son múltiples los status posible, los más comunes son 200, 404 y 500 200: significa que la operación término correctamente, algunas variantes como el 201, 202 implican que algo fue creado o aceptado, pero todos los del rango 2xx implican éxito en la operación. 3xx: implica redirección. 4xx: implica error de parte del cliente, en este caso el cliente es nuestro programa en javascript y significaría que el error lo estamos cometiendo nosotros. Algunas variates son 400 que el request está mal hecho, 401 que necesitamos autenticarnos primero, 403 que el recurso está prohibido, 404 que el recurso no existe. 5xx: En el rango de los 500 significa que el servidor falló en algún punto de la operación y por eso mismo no está devolviendo resultados. No es mucho lo que podamos hacer cuando nos enfrentemos a un 500 más que mandar un email reportando el error.

Mostrando los resultados

los resultados obtenidos son un objeto con la siguiente forma:

1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41

{ "coord": { "lon": -70.65, "lat": -33.46 }, "weather": [ { "id": 501, "main": "Rain", "description": "moderate rain", "icon": "10n" } ], "base": "cmc stations", "main": { "temp": 284.15, "pressure": 1011, "humidity": 81, "temp_min": 284.15, "temp_max": 284.15 }, "wind": { "speed": 7.2, "deg": 350 }, "clouds": { "all": 90 }, "dt": 1438819200, "sys": { "type": 1, "id": 4645, "message": 0.011, "country": "CL", "sunrise": 1438860601, "sunset": 1438898840 }, "id": 3871336, "name": "Santiago", "cod": 200 }

El objeto devuelto es un String, lo que nos haría difícil rescatar algún campo específico, pero podemos convertirlo en un objeto utilizando JSON.parse(), el siguiente ejemplo muestra como realizar el parseo

1 2 3 4 5 6 7 8 9 10 11 12 13 14

xmlhttp =new XMLHttpRequest(); xmlhttp.open("GET","http://api.openweathermap.org/data/2.5/weather?q=santiag xmlhttp.send(); xmlhttp.onreadystatechange=function() { if (xmlhttp.readyState==4 && xmlhttp.status==200) { string_results = xmlhttp.responseText; json = JSON.parse(string_results) console.log(json) document.getElementById("weather").innerHTML=json.weather } }

¿Qué es JSON? JSON es acrónimo de Javascript Object Notation, y consiste en un formato para intercambio de datos entre distintas plataformas, en cierto sentido es similar a XML pero mucho más simple. No hay que dejarse engañar por el nombre, JSON permite intercambiar objetos como si fueran string entre distintas plataformas que ocupan distintos lenguajes de programación, en este caso nuestro código está en javascript y no necesitamos saber en que lenguaje está hecho el proyecto en la plataforma, sólo tenemos que saber la URL, el método (GET/POST/…) y si tenemos que enviar un objeto cuál es el formato, (en nuestro caso solo recibimos). Se deja como tarea para el lector obtener del mismo JSON la temperatura actual, mínima y máxima además del clima de su ciudad.

Versión 2.0 de nuestra micro aplicación de clima En esta ocasión vamos a agregar un select a la página, al cambiar el valor gatillaremos el llamado ajax anterior.

HTML

El HTML es muy similar al anterior pero en esta ocasión incluimos el select.

1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18

<meta charset="utf-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge">
<script src="js/main.js">

Javascript En esta ocasión el código se vuelve ligeramente más complejo porque tenemos que hacer llamados AJAX en base a la selección de una opción del select, y además hacer el llamado ajax cuando se carga la página, la mejor forma de ordenar esto es con dos funciones en lugar de una. La primera función se encargará de observar los cambios del select y cuando vea que hay uno llamará a la segunda función, que su único propósito es llamar a la api de OpenWeather y mostrar los resultados.

1 2 3 4 5 6 7 8 9 10 11

var optionWatcher = function(){ option = this.options[this.selectedIndex] city = option.value console.log(city) getWeather(city) }

var getWeather = function(city){ xmlhttp = new XMLHttpRequest(); xmlhttp.open("GET","http://api.openweathermap.org/data/2.5/weather?q="

12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28

xmlhttp.send(); xmlhttp.onreadystatechange = function() { if (xmlhttp.readyState == 4 && xmlhttp.status == 200) { string_results = xmlhttp.responseText; json = JSON.parse(string_results) console.log(json) document.getElementById("weather").innerHTML=json.weather } } } var city_select = document.getElementById("city") city_select.onchange = optionWatcher getWeather("Santiago")

En la última sección del código agregamos el observador de cambios y llamamos a getWeather en la ciudad por defecto.

Capítulo 15

Jquery Jquery es una biblioteca (también conocidas como librerías) con la filosofía de escribir menos, hacer más. Esta biblioteca permite manejar de forma sencilla la captura de elementos del DOM, la manipulación de estos y los llamados AJAX. Existen dos versiones de Jquery, las 1.x, y las 2.x son compatibles entre ellas, la principal diferencia es que las 2.x no son compatibles con versiones de Internet Explorer menores a la versión 9, pero la versión 2 tiene la ventaja de pesar un 12% menos que la 1.x Para empezar a trabajar con Jquery podemos descargar la biblioteca de la http://jquery.com/download/ o podemos utilizar uno de los CDN existentes de la siguiente forma: <script src="https://code.jquery.com/jquery-2.1.4.min.js"> Nuestro nuevo HTML.

1 2 3 4 5 6 7 8 9 10 11 12

<meta charset="utf-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge">
<script src="https://code.jquery.com/jquery-2.2.4.min.js">

Utilizando el objeto Jquery Jquery es una biblioteca que cuando cargamos se carga sobre window (al igual que todos los objetos), dentro de la biblioteca podemos encontrar:

1 2 3

if ( !noGlobal ) { window.jQuery = window.$ = jQuery; }

Lo que significa que para utilizar Jquery lo podemos hacer como JQuery como window.jQuery o como la favorita de todos, simplemente $ Existen otras bibliotecas que también les gusta ocupar el espacio de nombre de $ en ese caso si ocupamos alguna de esas en conjunto con JQuery tendremos que ocupar la primera o la segunda forma.

Introducción a selectores Con Jquery podemos obtener cualquier elemento del DOM utilizando seletores, por ejemplo podemos obtener el tag body con jQuery("body") o con $("body") La lista de selectores posibles es gigante pero en esa sección revisaremos las más importantes. Selector window

document

* #id .class .class,.class element

Example

Selects

$(window)

Obtiene el objeto principal de javascript, el cual es el viewport

$(document)

$("*") $("#identificador") $(".intro") $(".bonus,.demo") $("p")

Obtiene el elemento document, el cual es hijo directo de window, de el se puede extraer información como el largo del documento Obtiene todos los elementos Obtiene al elemento con id="identificador" Obtiene todos los elementos con class="intro" Todo los elementos con "bonus" o "demo" Obtiene Todos los elementos



Al obtener el elemento podemos manipularlo o movernos a través de el para llegar a otro elemento.

Manipuladores Ahora que podemos obtener elementos del DOM podemos modificarlo con el método text, como por ejemplo:

$("body").text("Hola, estamos modificando el DOM con Jquery") El método .text tiene dos posibles uso, el primero para remplazar el contenido dentro de un elemento, el segundo es para obtenerlo. por ejemplo supongamos que tenemos dos párrafos uno con id="p1" y el otro con id="p2" y queremos copiar el texto de p1 en el p2, eso lo podemos lograr con:

1 2

var texto = $("#p1").text() $("#p1").text(texto)

Además del método text existe otro bastante similar llamado .html , la ventaja de este método es que nos permite agregar html dentro de nuestro sitio.

1

$("#p1").html("hola aquí podemos agregar HTML <

Si en lugar de modificarlo queremos agregar un contenido lo podemos hacer con el método append. $("body").append("Hola, estamos modificando el DOM con Jquery") Claramente podríamos lograr lo mismo sin utilizar jQuery pero requeriría de más líneas de código y el criterio de Jquery es Do More, Write Less, o sea hacer más con menos líneas de código. document.body.innerHTML = "Hola estamos modificando el DOM" Todo lo que se puede hacer con jQuery se puede hacer en Javascript, el problema es que en ciertas ocasiones puede requerir mucho trabajo, jQuery no es una biblioteca para programar menos, pero no para pensar menos y es por eso que debemos dominar bien Javascript.

Agregando CSS Con Jquery Otro ejemplo clásico de manipulación es agregar clases o estilos con Jquery.

1

$(".parrafo").addClass("super")

Lo anterior es muy poderoso puesto que se va a agregar la clase a super a todos los párrafos seleccionados.

Además también podemos manipular el CSS Dinámicamente, con el método .css, este método recibe dos parámetros, el primero es el atributo a modificar y el segundo es el valor.

1

$(".parrafo").css("color", "red")

También podemos obtener el valor de una propiedad específica con

1

$(".parrafo").css("color")

En este caso obtendríamos el mismo, aunque en el caso de Chrome diría "rgb(255, 0, 0)"

Traversing Traversing consiste en desplazarse a través de los nodos del DOM, visitando a los nodos hijos, padres, o hermanos, por ejemplo si tenemos una lista