presentación.js index.

html

1
2
3
4
JavaScript {
5
El alumno aprenderá JavaScript para
6
7
manipular elementos HTML y
8 propiedades CSS y así crear páginas
9 web dinámicas.
10
11
12
13 }
14
 index.html presentación.js

1 Contenido del ‘Tema’ {

2
3
4
IV.1 ECMAScript
5
6
IV.2 Separate of Concerns
7
8
IV.3 Sintaxis y comentarios
9
10
IV.4 Variables
11
12
IV.5 Tipos de datos {
13
IV.5.1 Datos primitivos
14

JavaScript
 index.html presentación.js

1
2 IV.5.2 Object
3 IV.5.3 Function
4
}
5
6
7
IV.6 Operadores, asignaciones, comparaciones y Math
8
9 IV.7 Estructuras de control
10
11 IV.8 Arreglos
12
13 IV.9 Eventos
14

JavaScript
 index.html presentación.js

1
2 IV.10 Mapas y conjuntos
3
4 IV.11 Funciones
5
6 IV.12 Objetos
7
8 IV.13 HTML DOM
9
10 IV.14 Cookies
11
12
}
13
14

JavaScript
 index.html presentación.js

1
2 IV.1 ECMAScript {
3
JavaScript es un lenguaje de programación que los desarrolladores
4
utilizan para hacer páginas web interactivas. Desde actualizar fuentes de
5
redes sociales hasta mostrar animaciones y mapas interactivos, las
6
funciones de JavaScript pueden mejorar la experiencia del usuario en un
7
sitio web.
8
9 ECMAScript es el núcleo de este lenguaje de programación, así como de

10 otros lenguajes, como ActionScript y Jscript.

11 Las siglas de este lenguaje se refieren a European Computer Manufacturers

12 Association Script.
13
14 }
JavaScript
 index.html presentación.js

1
2 IV.2 Separate of Concerns {
3
4
La separación de preocupaciones (Separate of Concerns) es un principio de
5
diseño para separar un programa en secciones distintas, de modo que cada
6
sección aborde una preocupación por separado.
7
8 En el desarrollo web, esta separación está dada en los documentos HTML,

9 CSS y JavaScript (al igual que con cualquier otro lenguaje de

10 programación).

11 JavaScript se inserta en HTML con la etiqueta <script> y el atributo src.

12
13
14 }
JavaScript
 index.html presentación.js

1
2 IV.3 Sintaxis y comentarios {
3
La sintaxis de JavaScript es el conjunto de reglas gramaticales que
4
constituyen al lenguaje.
5
6
7
8
9
10
11
12
13
14 }
JavaScript
 index.html presentación.js

1
2 IV.4 Variables {
3
4 Las variables son contenedores para almacenar valores de datos.
5
Existen 3 formas de declarar una variable en JavaScript:
6
• utilizando la palabra reservada var,
7
• utilizando la palabra reservada let y
8 • utilizando la palabra reservada const.
9
Las variables var y let tienen como diferencia el alcance (scope),
10
mientras que la variable const define una referencia constante a un
11
valor.
12
13
14 }
JavaScript
 index.html presentación.js

1
2 IV.5 Tipos de datos {
3
4 IV.5.1 Datos primitivos {
5
JavaScript tiene siete tipos de datos primitivos: String, Number, BigInt,
6
Boolean, Undefined, Null y Object.
7
8 • Un String es una serie de caracteres como “Hola”.
9 • Un Number es un valor numérico, BigInt es un valor numérico muy grande.

10 • Un Boolean solo puede tener dos valores: true o false.

11 • Una variable sin un valor es Undefined.

12 • Null es una variable que no apunta a ningún objeto.

• Todos los elementos de JavaScript pueden ser del tipo Object.
13
14 }

JavaScript
 index.html presentación.js

1
2 IV.5.2 Object {
3
4
5 • En JavaScript casi todo es un objeto.
6
• Un objeto es una variable que puede contener muchos valores. Los
7
valores del objeto son escritos de la forma nombre: valor.
8
9 • Este par (nombre, valor) es llamado propiedad.
10
11 • Un objeto puede tener métodos. Los métodos son acciones que se

12 pueden realizar sobre los objetos.

13
14

JavaScript
 index.html presentación.js

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

JavaScript
 index.html presentación.js

1
2 IV.5.3 Function {
3
4
5 Una función de JavaScript es un bloque de código diseñado para
6 realizar una tarea en particular. Una función de JavaScript se
7 ejecuta cuando "algo" la invoca (la llama):
8
9 • cuando ocurre un evento (cuando un usuario hace clic en un

10 botón),

11 • cuando se invoca (llama) desde código JavaScript,

12 • automáticamente (auto invocada).

13
14

JavaScript
 index.html presentación.js

1
2
3
4
5
6
7
8
9
10
11
12
}
13
14 }
JavaScript
 index.html presentación.js

1
2
IV.6 Operaciones, asignaciones,
3 comparaciones y Math {
4
5
Los operadores aritméticos de JavaScript se utilizan para realizar
6
operaciones aritméticas con datos de tipo Number o BigInt.
7
8 Los operadores aritméticos son
9
+ Adición / División
10
11 - Sustracción % Módulo

12 * Multiplicación ++ Incremento

13 ** Exponenciación -- Decremento

14

JavaScript
 index.html presentación.js

1
2
3
Los operadores de asignación de JavaScript asignan valores a las
4
variables. Son la combinación de algún operador aritmético con el
5
operador de asignación.
6
7 Los operadores de asignación son
8
= x = y /= x = x / y
9
10 += x = x + y %= x = x % y

11 -= x = x - y **= x = x ** y

12 *= x = x * y

13
14

JavaScript
 index.html presentación.js

1
2
3
4 Los operadores de comparación de JavaScript verifican condiciones
5 y retornan un valor (true o false).
6
Los operadores de comparación son
7
8 == igual que > mayor que
9 === igual valor y tipo de dato < menor que
10 != diferente de >= mayor o igual que
11 !== valor o tipo de dato diferente <= menor o igual que
12
13
14

JavaScript
 index.html presentación.js

1
2
3 Math es un objeto de JavaScript que contiene métodos útiles para
4 trabajar matemáticamente. No es necesario importar al objeto Math,
5
pues es nativo de JavaScript.
6
7 Las propiedades y métodos más comunes del objeto Math son
8
Math.E número de Euler Math.abs(x) valor absoluto de x
9
Math.PI número PI Math.round(x) redondeo de x
10
Math.SQRT2 raíz cuadrada de 2 Math.sign(x) signo de x
11
12
13
14 }
JavaScript
 index.html presentación.js

1
2 IV.7 Estructuras de control {
3
Las estructuras de control de flujo en JavaScript permiten controlar el
4
flujo de ejecución del código. Las estructuras de control más comúnmente
5
utilizadas son
6
7 if-else: permite ejecutar un bloque de código determinado si se cumple

8 una determinada condición, y un bloque de código diferente si la

9 condición no se cumple.

10 switch: permite ejecutar código diferente en función del valor de una

11 expresión.
12
for: permite ejecutar un bloque de código determinado un cierto número de
13
veces.
14

JavaScript
 index.html presentación.js

1
2
3
while: permite ejecutar un bloque de código mientras se cumpla una
4
determinada condición.
5
6 do-while: es similar al bucle while, pero el bloque de código se
7 ejecutará siempre, al menos una vez, antes de comprobar la
8 condición.
9
10
11
12 }
13
14

JavaScript
 index.html presentación.js

1
2 IV.8 Arreglos {
3
Un arreglo en JavaScript es un objeto que permite almacenar varios
4
valores en una sola variable. Los valores pueden ser de cualquier tipo,
5
como números, cadenas, objetos, etc. Los arreglos se representan con
6
corchetes [].
7
8 Los elementos de un arreglo se pueden acceder a través de su índice, que
es un número que representa su posición en el arreglo. El primer elemento
9
tiene índice 0, el segundo tiene índice 1, y así sucesivamente.
10
11 Los arreglos en JavaScript también tienen varios métodos incorporados que
12 te permiten realizar operaciones como agregar o quitar elementos, buscar
13 elementos, ordenar elementos, etc.
14 }
JavaScript
 index.html presentación.js

1
2
3 Arreglos
4
5
6 const carros = [“Tsuru”, “BMW”, “Kia”];
7
carros[0] = “Pointer”;
8
9 carros.length
10
11 carros.sort()
12
13
14

JavaScript
 index.html presentación.js

1
2 IV.9 Eventos {
3
En JavaScript, un evento es una acción o una interacción que ocurre en un
4
elemento de una página web. Los eventos pueden ser activados por el
5
usuario, como hacer clic en un botón o ingresar texto en un campo de
6
formulario, o pueden ser activados por el navegador, como cargar o
7
redimensionar una página.
8
9 Un desarrollador Frontend puede utilizar el modelo de eventos de

10 JavaScript para asignar funciones específicas a cada evento, lo que

11 permite que la página reaccione a la interacción del usuario. Los eventos

12 se manejan mediante la asignación de un controlador de eventos, que es

13 una función de JavaScript, a un evento específico.

14 }
JavaScript
 index.html presentación.js

1
2 IV.10 Mapas y conjuntos {
3
4
Los mapas son una estructura de datos en JavaScript que permite almacenar
5
pares de clave-valor. La clave puede ser cualquier valor (como una cadena
6
o un número) y el valor puede ser cualquier objeto. Los mapas se utilizan
7
a menudo para hacer búsquedas rápidas o para mantener un seguimiento de
8
las relaciones entre elementos.
9
10
Un ejemplo de un mapa podría ser un mapa de nombres de estudiantes y sus
11
calificaciones. El nombre del estudiante sería la clave y la calificación
12
sería el valor.
13
14

JavaScript
 index.html presentación.js

1
2 Los conjuntos son similares a los mapas, pero solo almacenan valores
3 únicos. No se permiten valores duplicados en un conjunto y no se pueden
4 acceder a los valores mediante una clave. Los conjuntos se utilizan a

5 menudo para eliminar valores duplicados de un conjunto de datos o para

6 realizar operaciones matemáticas como la unión o la intersección.

7
8 Un ejemplo de un conjunto podría ser un conjunto de números únicos de
un juego de lotería. Cada número del juego de lotería solo aparecería
9
una vez en el conjunto, incluso si se elige varias veces.
10
11
12 }
13
14

JavaScript
 index.html presentación.js

1
2
3 Conjunto
4
5
const letras = new Set(["a","b","c"]);
6
7
8 Mapa
9
10 const frutas = new Map([
[“manzanas", 500],
11
[“mangos", 300],
12 [“naranjas", 200]
13 ]);
14

JavaScript
 index.html presentación.js

1
2 IV.13 HTML DOM {
3
4 El HTML DOM (Document Object Model) es una representación en forma de

5 árbol de todos los elementos y atributos de un documento HTML. JavaScript

se utiliza para manipular el HTML DOM para agregar, modificar o eliminar
6
elementos o atributos en una página web. Esto se puede hacer mediante el
7
uso de funciones como getElementByID(), createElement() y appendChild().
8
9 También se pueden acceder y modificar los estilos de los elementos
10 utilizando las propiedades de estilo del objeto del elemento. Por
11 ejemplo, podría utilizarse elemento.style.color = “red” para cambiar el

12 color de un texto a rojo.

13
14 }
JavaScript
 index.html presentación.js

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

JavaScript
 index.html presentación.js

1
2 IV.14 Cookies {
3
4
5 • Las cookies son pequeñas piezas de información que se almacenan en el
navegador del usuario y que se pueden utilizar para guardar datos y
6
preferencias entre sesiones. Se pueden usar en JavaScript mediante el
7
objeto document.cookie.
8
9 • Para establecer una cookie, se asigna un valor a document.cookie
10 especificando las propiedades que se desean establecer, como el nombre,

11 el valor, la fecha de caducidad y el dominio. Por ejemplo:

12
document.cookie = "username=Juan; expires=Mon, 13 Feb 2023 12:00:00 UTC; path=/;";
13
14

JavaScript
 index.html presentación.js

1
2 Para obtener el valor de una cookie, se puede leer el valor de
3 document.cookie y luego “parsearlo” para encontrar la cookie deseada.
4
5
6 const cookies = document.cookie.split(";");

7 for (const cookie of cookies) {

8 const [name, value] = cookie.split("=");

9 if (name.trim() === "username") {

10 console.log(value);
break;
11
}
12
}
13
14

JavaScript
 index.html presentación.js

1
2
3
4 Para eliminar una cookie, se establece su fecha de caducidad en el pasado
y su valor en una cadena vacía. Por ejemplo:
5
6 document.cookie = "username=Juan; expires=Mon, 01 Jan 2020 12:00:00 UTC; path=/;";

7 Es importante tener en cuenta que las cookies se almacenan en el

8 navegador del usuario, por lo que se deben usar con precaución y solo se
9 deben guardar datos sensibles si se implementa una adecuada encriptación.
10 Estas se envían y reciben entre el navegador y el servidor web en cada
11 solicitud HTTP.
12
13
14

JavaScript
 index.html presentación.js

1
2 Además de las propiedades ya mencionadas (nombre, valor, fecha de
caducidad y ruta), también existen otras propiedades que se pueden
3
establecer en una cookie, como:
4
5 • secure: indica que la cookie solo se transmitirá a través de un canal
6 seguro (HTTPS).
7 • httpOnly: indica que la cookie no puede ser accedida por scripts en el
8 lado del cliente.

9 • sameSite: indica si la cookie debe ser enviada solo en solicitudes de

10 la misma origen o si también debe enviarse en solicitudes cross-site.

11 Hay alternativas más modernas a las cookies, como el almacenamiento local

12 y sesión en el lado del cliente, que ofrecen una mayor capacidad de
13 almacenamiento y una mayor privacidad para el usuario.
14 }
JavaScript