Sljavam 2

Módulo 2.
Introducción a JavaScript
Introducción
En esta lectura, vamos a explorar uno de los lenguajes más utilizados dentro de la programación
web.
En conjunto con HTML y CSS veremos que podremos realizar sistemas webs complejos, con
cambios dinámicos de acuerdo con la interacción del usuario (cliente que utiliza el navegador) con
nuestro sistema.
Así mismo, incursionaremos en conceptos fundamentales de este lenguaje tan solicitado a la hora
de emprender una búsqueda laboral o realizar nuestros propios sistemas.
En la actualidad, adquirir conocimientos en JavaScript es tan o más importante como saber

maquetar (construir páginas con HTML y CSS) y como saber el lenguaje PHP y sus
funcionalidades.
Conocer en conjunto tanto HTML, como CSS, JavaScript y PHP hará que nuestros sistemas sean
dinámicos, adaptativos y con mejoras en la experiencia de usuarios (como los clientes se
relacionan con nuestro sistema).
Video de Inmersión
Unidad 1. Principales nociones de JavaScript
Tema 1. JavaScript, ¿qué es y cuál es su utilidad?
JavaScript es un lenguaje interpretado (no necesita compilarse para su ejecución). Está orientado
a objetos y débilmente tipado, esto quiere decir que las variables que definamos en nuestros
scripts pueden cambiar su tipo de dato en el transcurso de este.
Este lenguaje se ejecuta en el navegador web (no en el servidor) y, entre sus utilidades, podemos
indicar el manejo de eventos (como clics en un botón o el envío de un formulario), la manipulación
de elementos HTML (cambiar el contenido de un div u otras etiquetas o el valor de un input) y el
acceso a valores de los elementos de un formulario o contenido dentro de una etiqueta.
También, es utilizado para crear efectos visuales en nuestro desarrollo, por ejemplo, movimiento
en las imágenes, cambio de color en los elementos, habilitar o deshabilitar el clic de botones,
generar o cambiar enlaces a otras páginas de forma dinámica.
Este lenguaje nos permitirá también crear nuestras propias funciones para, por ejemplo, validar
las entradas (datos) de los usuarios en un formulario, una utilidad muy necesaria, ya que las
validaciones de datos siempre debemos realizarlas tanto del lado del cliente (navegador utilizando
JavaScript) como en el servidor web utilizando PHP.
Todos los navegadores web actuales implementan este lenguaje, por lo cual, es el único lenguaje
de programación que entienden de forma nativa (esto es, sin la necesidad de agregar
complementos o herramientas adicionales).
Para interactuar con una página web, se provee al lenguaje JavaScript de una implementación
llamada Document Object Model (DOM). Document hace referencia a todo el contexto de la
página, esto es, todo lo que el navegador graficará en pantalla y estará a disposición de los
usuarios (en eventos y otras acciones).
Este lenguaje tiene una sintaxis similar al lenguaje C.
De la misma forma que con CSS, podemos tener archivos externos a nuestra página con el
código JavaScript (estos archivos por convención deben tener como extensión .js):
Figura 1. Código
Fuente: elaboración propia.
O bien, pueden estar incluidos dentro de la misma página entre las etiquetas <script></script>
Figura 2. Código
Actividad de repaso
Si suponemos que dentro de nuestra página web tenemos una etiqueta <h2> de la siguiente
forma: <h2>Hola Mundo</h2>, podemos cambiar “Hola Mundo” por “Bienvenidos”.
Veradero
Falso
Justificación
Tema 2. Selectores de elementos

Como nombramos anteriormente, este lenguaje nos permite interactuar con cualquier elemento
del DOM y, para poder hacerlo, debemos encontrarlos para manipularlos de acuerdo con nuestras
necesidades.
Veamos de manera práctica cómo hacerlo:
Figura 3. Código
Tomemos como ejemplo el <input type=”text”> de la imagen.

En este, podemos encontrar una propiedad llamada ID que es el identificador único del elemento,
por esto es que siempre trataremos que no existan dos elementos (iguales o diferentes) con el
mismo valor de ID.
También, vemos una propiedad class, el nombre de la clase que representa el elemento y que
utilizaremos mayormente para aplicarles estilos CSS, pueden existir muchos elementos con el
mismo valor de esta propiedad, ya que serán elementos a los que les queremos aplicar estilos
iguales.
Por último, notemos la propiedad name, el nombre del elemento y el valor que se enviará al
servidor cuando enviemos nuestro formulario. Pueden existir muchos elementos con el mismo
valor de name, puesto que, por ejemplo, podemos tener más de un formulario dentro de nuestra
página y, en ellos, solicitamos el nombre del usuario.
Selector por ID
Unos de los selectores más importantes y utilizados es el de ID, puesto que este selector nos
devolverá un único elemento (recordemos que no puede existir más de un elemento con el mismo
valor de la propiedad).
Para seleccionar este elemento dentro del DOM, debemos aplicar:
Figura 4. Código
Aquí, hemos seleccionado el input a través de su propiedad ID y obtenemos un único elemento.

Ahora, podemos manipularlo, por ejemplo, si queremos agregar un valor al input podríamos
realizar:
Figura 5. Código
Y veremos cómo el input de texto se completa automáticamente con la palabra “Hola”

Selector por nombre
De forma análoga, podemos acceder al elemento por su nombre:
Figura 6. Código
La diferencia radica en que, de esta forma, no obtendremos el elemento de modo directo, sino
que obtendremos un array, aunque encontramos uno solo, con todos los que tengan como
atributo name el valor nombre (recordemos que pueden existir muchos con el mismo valor).
Entonces, para manipularlo, debemos indicar el índice del array que pertenece al elemento
buscado, comenzando por el índice 0.
Figura 7. Código
Selector por nombre de clase
Es similar al selector por name, pero su sintaxis será:
Figura 8. Código
Y, para manipularlo:
Figura 9. Código
Selector de elementos por nombre de tag
Idéntico a los selectores por name y class. Su sintaxis es:
Figura 10. Código
La manipulación es idéntica también, en formato de array y seleccionando el índice del elemento.
Veamos un ejemplo para clarificar mejor el concepto de seleccionar por índice del array. En el
ejemplo planteado, tenemos dos tags <buttons>, ahora bien, al botón_cancelar queremos
cambiar su contenido a “Cancel” y al enviar por “Send”
Deberíamos hacer lo siguiente:
Figura 11. Código

Figura 12. Código
Hemos seleccionado el botón_cancelar con el índice 1 y el botón enviar con el índice 0. El

orden de los índices asignados a los elementos siempre se da en el orden en que lo hemos
incorporado dentro de nuestro código HTML.
Notemos, también, que en los ejemplos que trabajamos con el <input type=”text”> utilizamos
el value para manipular su valor y con los botones indicamos innerHTML.
InnerHTML nos sirve para manipular el contenido que se encuentra entre las etiquetas de
apertura y de cierre.
Actividad de repaso
En nuestro documento, tenemos un elemento <div> de la siguiente forma:
<div class=”container” id=”div_contenido”>HOLA MUNDO</div>
Si quisiéramos cambiar el contenido “Hola mundo” por “Bienvenidos”, ¿qué opción sería la
correcta?
document.getElementById(“div_contenido”).innerHTML = “Bienvenidos”
document.getElementById(“div_contenido”)[0].innerHTML = “Bienvenidos”
document.getElementById(“div_contenido”).value = “Bienvenidos”
document.getElementByClassName(“div_contenido”).innerHTML = “Bienvenidos”
Justificación
Tema 3. Principales propiedades de document

En nuestra lectura anterior, vimos que los selectores comienzan con document, este no solo
sirve para encontrar elementos HTML dentro de nuestra página y manipularlos, sino que sus
funcionalidades son diversas. Por ejemplo, generar eventos.
Evento ready
Al cargar una página en nuestro navegador, tenemos dos situaciones claves. Recordemos que el
proceso de una carga en el navegador comienza con una petición de este al servidor, el cual
responde enviando el código HTML correspondiente.
Primeramente, tenemos el evento ready (la página está lista para ser utilizada por el usuario).
Este evento podemos capturarlo si al final de nuestro código HTML (inmediatamente antes del
cierre de la etiqueta body - </body>) agregamos el siguiente código:
Figura 13. Código
Alert es una función propia de JavaScript y su propósito es mostrar un mensaje en pantalla en

forma de un contenedor y un botón aceptar.
Una vez que la página se encuentra lista para ser utilizada por el usuario, veremos una salida en
pantalla con el mensaje correspondiente.
Esta será la siguiente:
Figura 14: La página se encuentra lista para ser utilizada
Evento load
Una vez que la página está lista para ser utilizada por el usuario, ocurre un siguiente evento.
Esto se da cuando la página se cargó completamente. La diferencia radica, principalmente, en el
tiempo de carga.
Imaginemos que estamos graficando, además de un formulario o contenido institucional en

nuestra web, algunas imágenes como, por ejemplo, nuestro logo, imágenes de nuestra institución,
de nuestros productos y servicios y un mapa con la ubicación de la empresa.
Estas imágenes deben viajar por la red y su tamaño en Kb o Mb es grande (el navegador puede
demorar unos milisegundos o incluso segundos en poder mostrarla).
Una vez que estas imágenes se completan, ocurre el evento load.
Este se refiere a la carga completa del cuerpo de la página, esto es, de la etiqueta <body>.
Para manipular este evento, podemos agregar este código en nuestra web:
Figura 15. Código
La salida en pantalla sería la siguiente:
Figura 16: La página se cargó completamente
La propiedad location
document.location nos permitirá acceder y manipular las diferentes propiedades de la URL que
estamos navegando.
Por ejemplo, supongamos que tenemos un proyecto llamado IPP dentro de nuestro host local y
cargamos la página. En este proyecto, necesitamos conocer la URL, por lo que podríamos
realizar la siguiente acción:
Figura 17. Código

Al utilizar document.location.href conocemos la URL completa que estamos navegando, entonces,

si en nuestro navegador estamos en http://localhost/IPP/index.php, veremos en pantalla:
Figura 18: URL completa del navegador
De la misma forma, podemos asignar un valor nuevo a document.location.href. Con esto, el

navegador dirigirá su página a esta nueva URL.
Figura 19. Código
Al finalizar la carga de nuestro sitio, el navegador nos redirigirá a la web del famoso buscador.
Otras funcionalidades de document.location:
document.location.hostname nos retorna el nombre del host (servidor), en nuestro ejemplo

anterior, la respuesta sería “locahost”.
document.location.pathname nos dará a conocer la carpeta y el archivo en la que estamos
navegando (es decir, sin el nombre del host). En nuestro ejemplo: “/IPP/index.php”.
document.location.protocol indica el protocolo que estamos utilizando para navegar (HTTP o
HTTPS). En nuestro ejemplo anterior, obtendremos "http:".
Actividad de repaso
Si en nuestro documento HTML tenemos dos llamados de ejecución, ready y load, ¿cuál se
ejecutará primero?
Ready
Load
Ambos al mismo tiempo
Es indistinto, depende de la página que estemos diseñando
Justificación
Tema 4. Variables, constante y funciones de JavaScript

Variables
Las variables son representadas bajo un nombre simbólico que almacena un valor asociado en la
memoria del ordenador (en el caso de JavaScript, este espacio lo administra el navegador web).
En JavaScript, podemos, por ejemplo, almacenar valores del tipo cadena de caracteres, números
enteros, de punto flotante (o decimal), entre otros.
Para definir una variable en JavaScript, podemos utilizar tanto la sentencia var o let, aunque con
los fines prácticos del curso nos abocaremos al uso de var.
Así, por ejemplo, podemos tener este código:
Figura 20. Código
Cuya salida en pantalla será la siguiente:
Figura 21: Código en pantalla

Analicemos el código propuesto.
Primeramente, declaramos con var la variable llamada miVariable y le asignamos el valor “Hola
Mundo”, luego mostramos una ventana de alerta mostrando dicho valor.
Las variables pueden sobrescribirse o concatenarse con otras. Para la concatenación, utilizamos
el símbolo de suma (+). Para sobrescribir su valor, no es necesario utilizar var.
Ejemplo de sobrescritura de variables:
Figura 22. Código
Luego de asignar el valor inicial a miVariable, sobrescribimos su valor por “Bienvenidos”.

Posteriormente, definimos otra variable miOtraVariable con el valor “al curso de Programación
Web”
Finalmente, mostramos en una alerta el valor de ambas variables concatenadas, teniendo como
resultado la siguiente salida en el navegador:
Figura 23: Código con variables concatenadas
Recordemos, como nombramos al comienzo de la presente lectura, que JavaScript es un

lenguaje débilmente tipado. Esto quiere decir que una variable definida como cadena de
caracteres puede cambiar su tipo de datos a, por ejemplo, un valor numérico. Por lo que el
siguiente código sería totalmente válido:
Figura 24. Código

Primero se mostrará la alerta con la leyenda “Hola Mundo” y, luego, otra alerta con el valor 1492.
Es importante tener en cuenta que, si tenemos dos variables numéricas, el símbolo de

concatenación (+) realizará la suma entre ambas. Por el contrario, si tenemos una variable de
cadena de caracteres (sin importar su contenido) y otra numérica, se realizará la concatenación.
Ejemplo:
Figura 25. Código
El valor mostrado será 32 (la suma de 12 y 20).

Pero, si tenemos el siguiente código:
Figura 26. Código

La salida en pantalla será 1220 (se concatena el 12 con el 20 como si ambas variables fueran
cadenas de caracteres). Notar que el valor 12 está entrecomillado.
Vectores: un tipo especial de variables (array)

Un vector es una zona de la memoria donde podemos guardar elementos relacionados dentro de
una misma variable. Así, por ejemplo, podemos tener en array con números, propiedades,
cadenas de caracteres e incluso otro array relacionado.
Cada elemento del array tomará un índice que lo relaciona (siempre comenzando desde el índice
cero).
Existen dos formas actuales para definir un array:
var miVariable = []
var miVariable = new Array()
Cabe aclarar que no existe diferencia en cuanto a la definición de una forma u otra.
Para agregar elementos a un array, nos valdremos de la función (construcción propia del
lenguaje) push.
Veámoslo en un simple ejemplo:
Figura 27. Código
Hemos definido un array llamado miVariable, posteriormente, hemos agregado tres elementos
(utilizando push) del tipo cadena de caracteres.
Para acceder a un elemento en particular, utilizaremos el índice de este. Por ejemplo, si

queremos recuperar “Bienvenidos al”, realizaremos el siguiente código:
Figura 28. Código

Puesto que el elemento con índice cero es el primero que declaramos (“Hola Mundo”), el
elemento con índice 1 es el segundo declarado (“Bienvenidos al”) y es por ello por lo que lo
invocamos como miVariable[1].
También, es factible concatenar todos los elementos juntos utilizando la función join, a la cual
podemos pasarles o no parámetros (de no pasarles la concatenación se hará separando cada
elemento con una coma (,)).
Figura 29. Código
Donde la salida en pantalla será la siguiente.
Figura 30: Elementos concatenados con la función join
A su vez, a join podemos enviar la cadena de caracteres que queramos utilizar como separador
de elementos, por ejemplo, miVariable.join(" - ") donde los separamos con espacio, guion medio y
un nuevo espacio.
A sabiendas que una ventana alert no muestra código HTML, podemos realizar el siguiente
código para mostrar cada elemento en una línea diferente ( \n representa un salto de línea en
una ventana de alerta).
Figura 31. Código
La salida en pantalla será la siguiente.
Figura 32: Cada elemento en una línea diferente
Un arreglo en JavaScript (por ser un lenguaje débilmente tipado), admite que sus elementos sean
de diferentes tipos de datos, por lo cual, el siguiente código es totalmente válido:
Figura 33. Código
De igual forma, podemos obtener concatenación o suma de sus elementos.
Figura 34. Código

Para conocer la cantidad de elementos que posee un array en JavaScript, podemos recurrir a su
propiedad length.
Por ejemplo, en el código anterior:
Figura 35. Código
Podemos agregar:
Figura 36. Código
Y la ventana de alerta nos mostrará la cantidad de elementos, en este caso, tres.

Constantes
Las constantes presentan dos diferencias importantes en comparación con las variables.
Para declararlas, utilizamos la sentencia const.

Una vez asignado el valor a una constante, este no podrá cambiarse (sobrescribirse) en
todo el ciclo del sistema. De hacerlo, JavaScript nos indicará un error y el script actual se
detiene.
Si está permitido realizar las operaciones matemáticas y de concatenación entre constantes y

constantes y entre constantes y variables, la salida en pantalla será 32.
Figura 37. Código
Funciones
Una función es una sección de código que sirve para realizar una actividad específica, así, por
ejemplo podemos tener funciones para realizar operaciones matemáticas, validar datos de un
formulario, tomar decisiones de cómo continuar la ejecución de la página, entre muchas otras,
dependiendo de la necesidad del sistema que estemos construyendo.
Una de las formas de declarar funciones en JavaScript es comenzar con la instrucción function
seguida del nombre de dicha función (un nombre que represente que debe realizarse la función
como, por ejemplo, sumar o restar). Luego, entre paréntesis, se debe agregar, de ser necesario,
los parámetros con los que esta trabajará.
Figura 38. Código
En este sencillo ejemplo, hemos declarado la función sumar y le enviamos dos parámetros (a y
b). El retorno de dicha función es la suma (o concatenación) de ambos parámetros.
Para invocar una función, solo debemos escribir el nombre de esta y entre paréntesis enviar los
parámetros solicitados.
Figura 39. Código

En este ejemplo, declaramos la función sumar y, posteriormente, asignamos una variable llamada
respuesta con el resultado de esta pasando los parámetros de los números que queremos sumar
(24 y 58) y lo mostramos en una alerta.
Figura 40: Alerta de respuesta
Actividad de repaso
¿Cuál será el resultado del siguiente código?
<script>
const a = 58;
var b = "11";
alert(a + b);
</script>
5811
69
Un error y se detiene la ejecución del script

1158
Justificación
Conclusión
JavaScript, con su potencialidad para trabajar en el navegador y su posibilidad de dejarnos crear
nuestras propias funciones e interactuar con los elementos del DOM, se convierte en una
herramienta muy valiosa en nuestros proyectos, ya que podemos relacionar el navegador con las
acciones del usuario.
Unidad 2. JQuery: el framework de JavaScript es de los

más utilizados en la actualidad
JQuery es una biblioteca, es decir, un conjunto de herramientas que nos facilita la programación
en JavaScript, al simplificar la forma de interactuar con los elementos HTML de la página web, los
eventos y las acciones de los usuarios.
Esta biblioteca es de código abierto y libre, por lo que se permite su utilización en proyectos libres
o privados.
Ofrece una serie de funcionalidades basadas en JavaScript que, de otra manera, requerirían de
mucho más código, es decir, con las funciones propias de esta biblioteca se logran grandes
resultados en menos tiempo.
El enfoque modular de la biblioteca jQuery permite la creación de poderosas páginas web

dinámicas y aplicaciones web.
Para poder utilizar jQuery en nuestros proyectos, tenemos dos opciones. La primera es incluir la
librería directamente desde la web, como si estuviese en nuestro propio proyecto. Esto se logra al
añadir una simple línea:
<script src="https://code.jquery.com/jquery-3.6.0.min.js"
integrity="sha256-/xUj+3OJU5yExlq6GSYGSHk7tPXikynS7ogEvDej/m4="
crossorigin="Anonymous"></script>
Otra forma es descargar el código desde https://code.jquery.com/jquery-3.6.0.min.js y agregarlo a
nuestra carpeta de proyecto (de esta forma, lo tendremos local, útil si se quiere trabajar sin
conexión a internet durante el desarrollo en nuestro host local).
Una vez agregado el archivo, solo resta incluirlo:
<script src="assets/js/jquery-3.6.0.min.js"></script>
Las utilidades de jQuery siempre comenzarán con el signo pesos ($).
Tema 1. Selectores en jQuery
Al igual que con JavaScript nativo, jQuery permite seleccionar elementos del DOM de diferentes
maneras.
Veamos el siguiente código:
Figura 41. Código
Los selectores en jQuery siguen la misma estructura que los selectores en CSS (cuando los
utilizamos para dar estilos a nuestras páginas).
Vemos con más detalle cada uno de ellos.

Selector por ID
El selector universal por ID es el símbolo #, la sintaxis de jQuery para seleccionar un elemento

por ID es la siguiente:
Figura 42. Código
Donde seleccionamos el elemento cuyo ID es nombre.

Selector por nombre
El selector por nombre utiliza en su sintaxis [name=’nombre_del_elemento’]
Figura 43. Código

En este ejemplo, hemos seleccionado el elemento cuya propiedad name es nombre.

Al igual que su par en JavaScript nativo, este selector puede retornar más de un elemento si
contamos con varios con el mismo valor en esta propiedad en formato de array comenzando con
el índice 0. Así pues, si tenemos dos elementos name=’nombre’ podemos acceder a cada uno de
ellos como:
Figura 44. Código
Selector por nombre de clase
El símbolo para este selector es el punto (.) y su sintaxis completa es:
Figura 45. Código
Aquí, hemos seleccionado todos los elementos cuya propiedad class es input-selector-nombre.
Al igual que el selector por nombre, podemos obtener muchos elementos, que son retornados
como un array que comienza con el índice 0.
En jQuery, también es válido seleccionar elementos que no tengan una clase determinada,
veamos el siguiente ejemplo:
Figura 46. Código

Con el siguiente código, obtendremos todos los input que no posean la clase input-selector-
nombre.
Figura 47. Código
La función not() se utiliza para excluir.
Selector por nombre de tag
Para seleccionar elementos por tag, solo basta informar el nombre de este. Por ejemplo, si
queremos encontrar todos los botones de nuestra página, utilizaremos la siguiente sintaxis:
Figura 48. Código
También, obtendremos una array si tenemos más de un botón en nuestra página web.
Selector de elemento seleccionado
Veamos un ejemplo un poco más avanzado, donde hemos agregado etiquetas radio.
Figura 49. Código

Muchas veces, queremos conocer cuál de las opciones ha seleccionado el usuario, para ello,
podemos agregar al selector un indicador especial :checked.
Figura 50. Código
Si el usuario seleccionó una opción, entonces, estaremos obteniendo este único elemento, caso
contrario, nos retornará un elemento vacío.
De igual forma, podemos utilizarlo para inputs checkbox.
Figura 51. Código
Al hacer esto, estaremos obteniendo todos los checkbox cuya propiedad name es interés y que el
usuario seleccionó.
Figura 52. Código

Nuevamente, podemos utilizar la función not() para excluir elementos chequeados:
Figura 53. Código
Actividad de repaso
En nuestro documento, tenemos un elemento <div> de la siguiente forma:
<div class=”container” id=”div_contenido_superior”>HOLA MUNDO</div>

<div class=”container” id=”div_contenido_inferior”>Bienvenidos</div>
Si quisiéramos seleccionar el div cuyo contenido es “Bienvenidos”, ¿qué opción u opciones

serían las correctas?
$(“#div_contenido_inferior”)
$(“.container”)[1]
$(“.container”)[2]
$(“#div_contenido_inferior”)[0]
Justificación
Tema 2. Acceder y modificar valores de los elementos de un formulario desde jQuery

Una vez que se comprendió cómo seleccionar elementos, podemos manipular de forma dinámica
cualquiera de ellos.
Supongamos que queremos ver el contenido que el usuario ha ingresado en el input nombre,
podemos hacerlo con el siguiente código:
Figura 54. Código

La funcionalidad val tiene dos posibilidades:
Si no pasamos parámetros a esta, nos retornará el valor que el usuario ha ingresado en el

input nombre.
Si pasamos un parámetro (cadena de caracteres), el valor del input mostrará dicho valor.
Esto último podemos comprobarlo siguiendo el ejemplo:
Figura 55. Código
Cuando termine la carga de la página, veremos lo siguiente.
Figura 56: Input nombre
El input nombre se completa con el valor.
También, podemos manipular el contenido HTML de los tags (de forma análoga a la función de
JavaScript innerHTML, utilizaremos html()).
Figura 57. Código
Al no enviar parámetros, la salida en pantalla será la siguiente.
Figura 58: Salida en pantalla sin parámetros

Es decir, mostramos el contenido que se encuentra entre las etiquetas de apertura y cierre
<button></button>
Para cambiar su contenido, podemos enviar un parámetro a dicha función:
Figura 59. Código
Donde cambiamos el texto Enviar por Send, haciendo que el navegador presente el siguiente
formulario:
Figura 60. Código
Vale realizar una aclaración importante que diferencia a jQuery de JavaScript nativo.
En el siguiente ejemplo, tenemos dos div con su nombre de clase container:
Figura 61. Código
Al seleccionar por clase, obtendremos los dos elementos div. Cuando cambiemos el contenido
HTML de la selección, jQuery lo hará para ambos al mismo tiempo.
Figura 62. Código

La salida en el navegador será la siguiente.
Figura 63: Los dos divs cambiarán su contenido al mismo tiempo
Para evitar esto y manipular uno de ellos, jQuery nos facilita algunas funcionalidades extras.
first() selecciona el primer div de la selección, en nuestro ejemplo:
Figura 64. Código
last() selecciona el último div de la selección:
Figura 65. Código
eq(índice) selecciona el elemento según su índice de selección (recordemos que el selector

por clase nos retorna un array cuyo índice inicial es el cero):
Figura 66. Código

Esta última funcionalidad es de gran importancia si en la selección tenemos más de dos

elementos.
Actividad de repaso
¿Es correcto afirmar que $(".container").eq(0) tiene el mismo efecto que utilizar
$(".container").first() en todos los casos de selección de elementos por nombre de clase?
Verdadero
Falso
Justificación
Tema 3. Eventos en JQuery

Como ya hemos mencionado, jQuery nos permite agregar dinamismo en nuestros desarrollos
web. Uno de los casos más importantes es el manejo de eventos (clics de botones, publicación de
formularios, selección de elementos, entre muchos otros).
ready()
Ofrece también una mejora a la funcionalidad ready del documento HTML (cuando este está
disponible para ser utilizado por los usuarios durante el proceso de carga).
Esta función podemos ejemplificarla con el siguiente código:
Figura 67. Código
En este ejemplo, creamos una función simple (solo contiene una alerta) que se ejecutará en el
ready de nuestra página web.
Figura 68: Función ready salida en pantalla

Este evento, como veremos un poco más adelante, cumple una función fundamental, ya que
podemos comenzar a manipular los elementos, asignar otros eventos a ellos y comenzar la
interacción con los usuarios a sabiendas de que todos los elementos en el DOM ya se encuentran
disponibles.
click()
Como su nombre lo indica, invoca una acción al realizar clic sobre los elementos asignados.
Este evento se puede asignar a cualquier elemento del DOM.
Veamos el siguiente ejemplo:
Figura 69. Código
Figura 70. Código
Hemos asociado el botón con ID botón_cancelar a un evento clic. Cuando el usuario pulse (haga
clic en este) verá una alerta con la leyenda: se canceló el envío del formulario.
Figura 71: Alerta de cancelación del envío del formulario

focus()
Este evento se ejecuta cuando un elemento tiene el foco (el usuario lo ha seleccionado).
Por ejemplo, si tenemos un input de texto y el usuario lo selecciona para completar los datos, en
este momento, se invocará dicho evento.
Ejemplo:
Figura 72. Código
Cuando el usuario ingresa el input cuyo ID es domicilio, verá el alerta correspondiente.
focusout()
Es el evento contrario a focus(), ya que se ejecutará cuando el elemento pierde el foco (el usuario
ha seleccionado otro elemento).
Ejemplo:
Figura 73. Código
submit()
El evento submit es, seguramente, uno de los más importantes en la manipulación de formularios,
puesto que con él podemos impedir que este se envíe al servidor.
Cobra su vital importancia en la validación de datos antes del envío, al verificarlos en el

navegador.
Como regla general, podemos indicar que siempre es conveniente la validación de datos del
formulario en el navegador antes del envío al servidor, para aliviar a este último. Del lado del
servidor también debemos validarlos, pero con la casi certeza de que los datos son correctos.
Antes de avanzar con el ejemplo, vamos a presentar una nueva funcionalidad de jQuery. La
función trim().
Esta función quita los espacios en blanco delante y detrás de los datos ingresados por el usuario,
ya que pueden causar un error cuando indicamos la propiedad que requiere en los elementos:
Figura 74. Código
Si bien el navegador verifica que el input tenga contenido, el usuario podría agregar espacios en
blanco (con la barra espaciadora) y el navegador lo interpretará como válido.
Referencia $(this) en los eventos:
El denominador this dentro de las funciones hace referencia al elemento que causó el evento, así
pues, si hacemos clic en el botón enviar, $(this) se transforma en el propio elemento.
Si tenemos el siguiente código:
Figura 75. Código
Si captamos el evento clic del botón_cancelar:
Figura 76. Código
Figura 77: Evento clic del botón_cancelar
Veamos el siguiente formulario:
Figura 78. Código
Ahora bien, a este le asignaremos el evento submit().
Figura 79. Código

Dentro de este, validamos los datos que el usuario ha ingresado:
Figura 80. Código
Como podemos apreciar, guardamos en las variables nombre y domicilio los datos ingresados. Si
el usuario ingresó espacios en blanco dentro del nombre o el domicilio, acumulamos los errores
(dentro del array errores) e informamos sobre estos.
Length es una propiedad de los array o vectores que nos indica la cantidad de elementos que
posee.
Cuando algún campo no es válido, guardamos un mensaje de error dentro del array. Al finalizar la
validación, vemos la cantidad de errores recogidos, de existir uno o más, mostramos una ventana
de alerta para informar sobre estos y retornamos false (el formulario no se envía al servidor).
Si la cantidad de errores de validación es 0, retornamos true y el formulario es enviado al
servidor.
hide()
Esta función esconde los elementos seleccionados de la pantalla. En el ejemplo de nuestro

formulario anterior, podríamos tener este código:
Figura 81. Código
Su efecto sería esconder de pantalla los dos botones cuyo class es btn.
Cabe destacar que los elementos quedan ocultos (no visibles) y que no son eliminados del DOM.
Podemos, a su vez, dar un efecto mientras estos se ocultan, pasando por parámetro la cantidad
(en milisegundos que dura el efecto).
Figura 82. Código
El botón se va ocultando lentamente durante 1000 milisegundos.
show():
Es la función inversa de hide(), puesto que mostrará los elementos ocultos.
Figura 83. Código
También, admite el parámetro de tiempo en milisegundos que debe durar la acción.
toggle():
Es una combinación entre hide y show, puesto que si los elementos están ocultos los mostrará,
caso contrario, los ocultará.
Figura 84. Código

Actividad de repaso
La validación de formularios, ¿solo debe existir del lado del servidor?
Verdadero
Falso
Justificación
Tema 4. Modificar propiedades, tributos y estilos en JQuery

Otra de las utilidades que nos permite jQuery es el poder cambiar propiedades y atributos de los
elementos HTML. Pero, veamos las diferencias entre ambos conceptos.
Propiedades: son las que indican un estado de los elementos, así, por ejemplo:
required = ’’ nos indica que el elemento tiene un estado de requerido.
readonly = ‘’ nos indica que el elemento es solo lectura (el usuario no puede ingresar
valores en este, por ejemplo, completar contenido en un input de texto).
disabled = ’’ el elemento no puede tener el foco ni se responderá a los clics. Esta propiedad
se utiliza, mayormente, en los botones.
Las propiedades requieren un parámetro booleano (true o false) en su llamada. Por ejemplo, si
indicamos true en la propiedad disabled, el elemento se deshabilita.
Si partimos de nuestro ejemplo de formulario anterior:
Figura 85. Código
Podemos agregar los siguientes códigos:

Figura 86. Código
Este ejemplo deshabilita todos los elementos que posean un valor de class btn.
Figura 87. Código
La primera línea convierte el input cuyo ID es nombre en solo lectura.
La segunda quita la obligatoriedad de completar datos en el input cuyo ID es domicilio (el usuario
no necesita completarlo - se transforma en optativo).
Atributos: son aquellas palabras que se encuentran dentro de las etiquetas HTML y que
tienen un valor definido. Veamos las más importantes:
name: el nombre del elemento.
class: la clase CSS de los elementos.
type: el tipo de elemento.
Para modificar los atributos de los elementos, podemos valernos del siguiente código:
Figura 88. Código
La línea primera cambia el tipo del input cuyo ID es nombre, transformándolo en un input del tipo
password.
La segunda línea de código cambia la class del botón ID botón_cancelar a su nuevo valor “botón”.
La tercera cambia el nombre del elemento cuyo ID es botón_enviar a su valor mi_boton
Cambiar estilos CSS con jQuery
Dentro del dinamismo que podemos obtener con esta poderosa herramienta, está la de cambiar
la forma en que se ven los elementos en pantalla. Una de estas utilidades es la función css().
Veamos con un ejemplo cómo utilizarla:
Figura 89. Código
A todos los elementos cuya class sea btn les hemos agregado un color de fondo negro, letras
blancas, un borde de 1 pixel, un radio de borde (esquinas redondeadas) en 5 pixeles, un color de
borde gris, espacio entre el texto y los bordes (superior, inferior, izquierdo y derecho) de 5 pixeles.
Actividad de repaso
Siguiendo el código presentado:
<label for="nombre">Nombre</label><br>
<input type="text" id="nombre" name="nombre">
<button class="btn" name="nombre">Enviar</button>
¿Cómo podemos deshabilitar el envío del formulario?

$(".btn").prop("readonly", true);
$(“button”).prop(“disabled”, true);
$(“button”).attr(“readonly”, “true”);
$(".btn").show();
$(“button”).prop(“disabled”, false);
Justificación
¡A practicar!
Vamos a seguir trabajando en la creación de un sistema de organización para la clase de Química
Orgánica de una escuela. Ahora, vamos a poner en práctica lo aprendido sobre clases de PHP.
1. Debemos crear las estructuras de clases programáticas. Por ende, debemos definir los
niveles de la estructura. Los datos que tenemos son:
Sabemos que todos los integrantes de la clase son personas, es decir, debemos
crear una clase personas a las cuales luego extenderemos las subclases alumnos,
profesores y celadores.
Sabemos por requerimiento del usuario que las personas compartirán nombre,
apellido, email y dirección.
¿Qué debemos hacer?

Crear una superclase (personas) que no pueda ser instanciada, es decir, una clase abstracta de
la cual podremos tener una extensión a otras clases. Sus propiedades son las indicadas
anteriormente. Generemos un constructor para llenar las propiedades mencionadas y creemos un
método para mostrar los valores cargados.
2. Ahora, debemos crear la clase alumnos. Damos por entendido que un alumno
pertenece a la clase personas, pero se diferencia por tener una propiedad extra llamada
legajo. Debemos instanciar el objeto con los datos:
Nombre: "Pedro"
Apellido "Picapiedras"
Email: "pedro@picapiedras.com"
Dirección: "Rocallosas 50"
Legajo: "21211/5"
3. De tener en una base de datos llamada escuela, dentro de ella una tabla llamada
alumnos, ¿cómo recuperarían y mostrarían los alumnos registrados?
Para conocer las respuestas más adecuadas a los interrogantes, descargar el siguiente PDF.
Cierre
jQuery, además de ser el framework de trabajo JavaScript más utilizado en la actualidad, nos
permite con gran facilidad interactuar con los elementos del DOM al permitirnos manipular sus
propiedades, atributos, estilos y visibilidad.
Gracias a estas herramientas y, si tenemos en cuenta que podemos utilizarlas en todas sus
combinaciones, nos permitirá realizar páginas web más interactivas y amigables para los
usuarios.
Video de habilidades
Elijamos una página web de nuestra preferencia y realicemos cambios en los estilos de
algunos elementos. Por ejemplo, agregar letras en negrita, aumentar el tamaño de algunos
textos y cambiarles el color.
Presentemos una captura de la página original y otra con los cambios realizados.
Glosario

Sljavam 2

Cargado por

Información del documento

Título original

Derechos de autor

Formatos disponibles

Compartir este documento

Compartir o incrustar documentos

Opciones para compartir

¿Le pareció útil este documento?

¿Este contenido es inapropiado?

Copyright:

Formatos disponibles

Sljavam 2

Cargado por

Copyright:

Formatos disponibles

Módulo 2.

En la actualidad, adquirir conocimientos en JavaScript es tan o más importante como saber

Este lenguaje tiene una sintaxis similar al lenguaje C.

Fuente: elaboración propia.

Tema 2. Selectores de elementos

Veamos de manera práctica cómo hacerlo:

Fuente: elaboración propia.

Tomemos como ejemplo el <input type=”text”> de la imagen.

Para seleccionar este elemento dentro del DOM, debemos aplicar:

Fuente: elaboración propia.

Aquí, hemos seleccionado el input a través de su propiedad ID y obtenemos un único elemento.

Fuente: elaboración propia.

Y veremos cómo el input de texto se completa automáticamente con la palabra “Hola”

De forma análoga, podemos acceder al elemento por su nombre:

Fuente: elaboración propia.

Fuente: elaboración propia.

Selector por nombre de clase

Es similar al selector por name, pero su sintaxis será:

Fuente: elaboración propia.

Fuente: elaboración propia.

Selector de elementos por nombre de tag

Idéntico a los selectores por name y class. Su sintaxis es:

Figura 10. Código

Fuente: elaboración propia.

La manipulación es idéntica también, en formato de array y seleccionando el índice del elemento.

Deberíamos hacer lo siguiente:

Figura 11. Código

Fuente: elaboración propia.

Fuente: elaboración propia.

Hemos seleccionado el botón_cancelar con el índice 1 y el botón enviar con el índice 0. El

Tema 3. Principales propiedades de document

Figura 13. Código

Fuente: elaboración propia.

Alert es una función propia de JavaScript y su propósito es mostrar un mensaje en pantalla en

Esta será la siguiente:

Figura 14: La página se encuentra lista para ser utilizada

Fuente: elaboración propia.

Imaginemos que estamos graficando, además de un formulario o contenido institucional en

Figura 15. Código

Fuente: elaboración propia.

La salida en pantalla sería la siguiente:

Figura 16: La página se cargó completamente

Fuente: elaboración propia.

Figura 17. Código

Al utilizar document.location.href conocemos la URL completa que estamos navegando, entonces,

Figura 18: URL completa del navegador

Fuente: elaboración propia.

De la misma forma, podemos asignar un valor nuevo a document.location.href. Con esto, el

Figura 19. Código

Fuente: elaboración propia.

document.location.hostname nos retorna el nombre del host (servidor), en nuestro ejemplo

Es indistinto, depende de la página que estemos diseñando

Tema 4. Variables, constante y funciones de JavaScript

Así, por ejemplo, podemos tener este código:

Figura 20. Código

Fuente: elaboración propia.

Cuya salida en pantalla será la siguiente:

Figura 21: Código en pantalla

Fuente: elaboración propia.

Ejemplo de sobrescritura de variables:

Figura 22. Código

Fuente: elaboración propia.

Luego de asignar el valor inicial a miVariable, sobrescribimos su valor por “Bienvenidos”.