T8.- Javascript.

Michel Vilaplana
¿Qué es • Lenguaje de programación interpretado
• Orientado a objetos
Javascript? • Se utiliza para crear páginas web interactivas
 • JavaScript proporciona la interactividad a las páginas web
Importancia de JS • Sin JavaScript, las páginas web serían estáticas
en HTML+CSS+JS • JavaScript es esencial para crear páginas web modernas
 • JavaScript es esencial para el desarrollo web

Importancia de JS en el • Proporciona
• Interactividad

desarrollo web • Animaciones

• Juegos
• Validación
• Efectos visuales
El poder de JS
en acción
• JavaScript permite crear una amplia
variedad de aplicaciones y efectos
web:
• Validación de formularios
• Animaciones
• Carruseles de imágenes
• Juegos
• Actualizaciones de contenido
• Aplicaciones web complejas
Empezando a
programar…
La programación es el proceso
de crear instrucciones que le
dicen a una computadora qué
hacer.
Los programadores utilizan
lenguajes de programación
para escribir estas
instrucciones.
Variables
• En el mundo de la programación, las
variables son como pequeñas cajas
que nos permiten almacenar
información. Estas cajas pueden
contener números, texto, booleanos
(verdadero o falso) y otros tipos de
datos. Nos permiten reutilizar
información y hacer que nuestros
programas sean más dinámicos.
Cómo
crear
variables
Para crear una variable en JavaScript, utilizamos la palabra clave let o const.
La palabra clave let nos permite crear variables que se pueden modificar a lo largo
de nuestro programa, mientras que conts nos permite crear variables que no se
pueden modificar que se denominan constantes.
Tipos de
datos
• Los tipos de datos determinan el valor que puede almacenar una variable.
• JavaScript admite los siguientes tipos de datos:
• Primitivos: números, cadenas, booleanos, nulos e indefinidos.
• Objetos: colecciones de datos complejos.
Operadores
aritméticos
En JavaScript, los operadores aritméticos
permiten realizar operaciones
matemáticas en variables y valores. Los
operadores básicos son la suma (+),
resta (-), multiplicación (*), y división (/).
Además, tenemos el operador de
módulo (%), que devuelve el resto de
una división.
Precedencia de Operador Precedencia
operadores () 1

++, -- 2

La precedencia de operadores en
% 3
JavaScript determina el orden en que se
evalúan los operadores en una
expresión. / 4

* 5

+ 6

- 7
Operadores de Los operadores de comparación se utilizan para
comparar dos valores y devolver un valor

comparación
booleano.
 En JavaScript, los operadores lógicos permiten realizar
evaluaciones condicionales y combinan expresiones
booleanas. Los principales operadores lógicos son:

Operadores 1. AND (&&): Retorna true si ambas condiciones son

verdaderas.

lógicos 2. OR (||): Retorna true si al menos una de las

condiciones es verdadera.

3. NOT (!): Retorna true si la condición es falsa y

viceversa, invirtiendo el valor booleano.
Estructuras de control.

• Una estructura de control es una

sentencia que permite controlar el flujo
de ejecución del código. Las estructuras
de control se utilizan para ejecutar
bloques de código de manera
condicional, repetitiva o secuencial.
• Son fundamentales para controlar el
comportamiento del programa en
respuesta a diferentes situaciones,
brindando flexibilidad y lógica a la
lógica de programación.
 Las estructuras de control condicionales en JavaScript
permiten ejecutar bloques de código según condiciones
Estructuras de específicas. Las más comunes son:

control. La estructura if-else se utiliza para ejecutar un bloque de

código si una condición es verdadera, o un bloque de código
Condicionales diferente si la condición es falsa.
La estructura switch se utiliza para ejecutar un bloque de
código diferente según el valor de una variable.
Estructuras de control. Repetición.

Las estructuras de control de repetición permiten ejecutar un bloque de código

repetidamente hasta que se cumpla una condición.
Las estructuras de control de repetición más comunes en JavaScript son:
• while: Permite ejecutar un bloque de código repetidamente mientras una condición
sea verdadera.
• for: Permite ejecutar un bloque de código repetidamente un número determinado de
veces.
• do-while: Permite ejecutar un bloque de código repetidamente mientras una
condición sea verdadera, pero al menos una vez.
Estructuras de control. La estructura while se utiliza
para ejecutar un bloque de

Repetición. While.
código repetidamente
mientras una condición sea
verdadera.
 La estructura for se utiliza para ejecutar un
Estructuras de bloque de código repetidamente un número
determinado de veces.
control.
Repetición. for.
Estructuras de control. La estructura do-while se utiliza para
Repetición. do..while ejecutar un bloque de código
repetidamente mientras una condición
sea verdadera, pero al menos una vez.
Funciones
Las funciones en JavaScript son bloques de código que
se pueden reutilizar. Las funciones se utilizan para
dividir el código en unidades más pequeñas y
manejables, y para hacer que el código sea más
modular y legible.
Arrays
Los arrays son estructuras que permiten almacenar múltiples valores
en una sola variable. Pueden contener datos de diferentes tipos y se
accede a cada elemento mediante un índice.
Objetos
Los objetos en JavaScript son estructuras que permiten agrupar
datos y funciones relacionados en una única variable. Se definen
mediante llaves {} y consisten en pares clave-valor
Arrays de
objetos
Los arrays de objetos son
arrays que contienen
objetos
Eventos y gestión de errores
en JS
Los eventos son notificaciones que se
envían a un objeto cuando ocurre algo. Se
utilizan para controlar la interacción del
usuario con una aplicación.
La gestión de errores es el proceso de
manejar los errores que se producen
durante la ejecución de un programa.
 click Clic en un elemento.
mousedown Presiona el botón del mouse.
mouseup Suelta el botón del mouse.
Eventos en JS mousemove Mueve el mouse sobre un
Eventos de
elemento.
• En js hay mucho tipo de ratón
mouseover Mueve el mouse sobre un
eventos: mouse, teclado, elemento.
carga, tiempo, formulario,
mouseout Mueve el mouse fuera de un
estado, navegación,
elemento.
medios, red, etc...
keydown Presiona una tecla.
• Nos vamos a centrar en los Eventos de
keyup Suelta una tecla.
tres primeros. teclado
keypress Presiona y suelta una tecla.
load Se carga una página web.
Eventos de
readystatechange El estado de carga de una
carga
página web cambia.
Gestión de errores
en JS
En JavaScript, los errores son
notificaciones que se producen
cuando se produce un problema
durante la ejecución de un
programa.
Los errores pueden ser causados por
una variedad de factores, como
errores de sintaxis, errores de lógica
o errores de entrada de datos.
La gestión de errores es el proceso
de manejar los errores que se
producen durante la ejecución de un
programa.
Introducción al DOM
El DOM es una API importante para la programación web. El DOM permite a los programadores
manipular el contenido, el estilo y la estructura de los documentos HTML y XML.

Los nodos son los elementos básicos del DOM. Los nodos tienen propiedades y métodos que
se pueden utilizar para acceder y manipular el documento.

El DOM se puede acceder desde JavaScript utilizando la función document. La función

document devuelve un objeto que representa el documento actual.

El DOM se puede manipular utilizando los métodos y propiedades de los nodos.

Estructura del DOM
• Nodos de elemento: Representan
elementos HTML, como div, p o img.
• Nodos de texto: Representan texto
dentro de un elemento.
• Nodos de comentario: Representan
comentarios dentro de un documento.
• Nodos de atributo: Representan
atributos de un elemento.
• Nodos de documento: Representan el
documento completo.
Manipulación del DOM en JS.

La manipulación del DOM

en JavaScript es el proceso
Los métodos más comunes appendChild()`: Agrega un removeChild()`: Elimina un
de modificar el contenido, el
para manipular el DOM son: nuevo nodo al nodo. nodo del nodo.
estilo o la estructura de un
documento HTML o XML.

setAttribute()`: Establece removeAttribute()`: Elimina **textContent`: El texto

un atributo del nodo. un atributo del nodo. contenido en el nodo.
Seleccionar elementos
Método Descripción
getElementById Devuelve un elemento del DOM que tiene el ID especificado.

let elemento = document.getElementById("myId");

getElementsByClassName Devuelve una colección de elementos del DOM que tienen la clase especificada.

let elementos = document.getElementsByClassName("myClass");

getElementsByTagName Devuelve una colección de elementos del DOM que tienen la etiqueta HTML especificada.

let parrafos = document.getElementsByTagName("p");

Devuelve el primer elemento del DOM que coincide con el selector CSS especificado.
querySelector

let elemento = document.querySelector("#myId");

Devuelve todos los elementos del DOM que coinciden con el selector CSS especificado como una NodeList
querySelectorAll

let elementos = document.querySelectorAll(".myClass");

Cambiar el contenido
de un elemento
• Para cambiar el contenido de texto
de un elemento, utilizamos la
propiedad textContent.
• Para cambiar el contenido HTML de
un elemento, utilizamos la
propiedad innerHTML.
Modificar
atributos
Javascript proporciona la
posibilidad de establecer el
valor de un atributo de un
elemento, así como obtener
dicho valor o también
eliminar un atributo en un
momento dado. También da
la posibilidad de actualizar
una propiedad determinada
de un elemento.
Responder a eventos
Podemos responder a eventos con JavaScript utilizando el método
addEventListener() que tiene dos parámetros: el tipo de evento y la
función que se ejecutará cuando ocurra el evento.
 Podemos crear nuevos elementos HTML utilizando el método
createElement().

Crear nuevos
El método createElement() tiene un solo parámetro: el nombre de la etiqueta
del elemento que queremos crear.
Podemos establecer atributos de un elemento recién creado utilizando el

elementos método setAttribute().

Podemos establecer el contenido de un elemento recién creado utilizando el
método textContent.
Podemos agregar elementos al DOM utilizando el método appendChild().
 Para eliminar un elemento del DOM en JavaScript, utilizamos el
Eliminar elementos método removeChild(). Este método tiene un solo parámetro: el
elemento que queremos eliminar.
Beneficios del DOM
Interactividad: Permite crear aplicaciones web interactivas que respondan a las acciones del usuario.

Accesibilidad: Facilita la manipulación y actualización de contenido web en tiempo real.

Dinamismo: Permite modificar la apariencia y el contenido de una página sin necesidad de recargarla

Flexibilidad: El DOM permite acceder y manipular cualquier elemento de una página web.

Eficiencia: El DOM es una interfaz eficiente permite realizar cambios en una página web de forma rápida y
sencilla.

Potencial: El DOM es una herramienta poderosa que puede utilizarse para crear aplicaciones web dinámicas e
interactivas.
Ej1. Cambiar el texto de un párrafo.
Para cambiar el texto de un párrafo en JavaScript, podemos utilizar
los siguientes métodos:

• innerHTML: Este método reemplaza el contenido de un elemento

por el valor especificado.
• textContent: Este método reemplaza el contenido de texto de un
elemento por el valor especificado.
Ej2. Crear elementos dinámicamente.
Otros ejemplos

Los tenemos a partir de la

página 24 del documento pdf
de los apuntes.