3.

JAVASCRIPT

ÍNDICE

1. Introducción a JavaScript
2. Instalación de entorno para JavaScript
3. Estándares de JavaScript
4. Inserción del código JavaScript
5. Variables y constantes
6. Tipos de datos primitivos
7. Estructuras de datos
8. Estructuras de control
9. Funciones
10. Clases
11. Objetos
12. Web API – DOM
13. Fetch API
14. JSON

ILERNA JEREZ – CURSO 2024-2025 – PRIMERO- FRANCISCO ÁLVARO GONZÁLEZ - LENGUAJE DE MARCAS Y SGI
 [Link]

1. Introducción a JavaScript

Distinción entre lenguajes, librerías y frameworks. Las librerías son un

conjunto de funciones de un lenguaje en concreto. Los frameworks son
cajas de herramientas con componentes ya realizados que facilitan la
programación de aplicaciones.

Lenguajes Librerias Frameworks

JavaScript jQuery Angular, React,
Vue, [Link]
Java Log4j2, concurrent Spring
Python Numpy, Pandas,Sci-kit Django
PHP Psr/log Laravel, Symfony

ILERNA JEREZ – CURSO 2024-2025 – PRIMERO- FRANCISCO ÁLVARO GONZÁLEZ - LENGUAJE DE MARCAS Y SGI
 [Link]

1. Introducción a JavaScript

JavaScript es un lenguaje de programación de tipo scripting de tipado débil

y variable con soporte para programación orientado a objetos, muy usado
para la lógica de las aplicaciones web, tanto front-end como back-end.

Forma parte de la triada esencial de programación de front-

end de aplicaciones web: HTML + CSS + JavaScript.
❑ HTML. Para el desarrollo del contenido de la capa de
presentación
❑ CSS. Para definir los estilos de la capa de presentación.
❑ JavaScript. Para definir la lógica de la capa de presentación
y sus relaciones con las capas más internas del front-end y
de las conexiones con el back-end.

ILERNA JEREZ – CURSO 2024-2025 – PRIMERO- FRANCISCO ÁLVARO GONZÁLEZ - LENGUAJE DE MARCAS Y SGI
 [Link]

2. Instalación de entorno para JavaScript

Requerimientos para trabajar con JavaScript: IDE (Visual Studio

Code) y [Link]

[Link]
[Link]

Botón descargas.
Descargar versión LTS
Es necesario reiniciar el equipo
para que Windows carge el
PATH.

ILERNA JEREZ – CURSO 2024-2025 – PRIMERO- FRANCISCO ÁLVARO GONZÁLEZ - LENGUAJE DE MARCAS Y SGI
 [Link]

3. Historia y estándares de JavaScript

Hasta 1995 las páginas web eran completamente estáticas.

Además, no había lenguajes normalizados para el lado
servidor de las aplicaciones.

Por aquel entonces el navegador Netscape y la

empresa Sun Microsystems empezaron a
colaborar para crear páginas dinámicas.
Sun Microsystems era el creador del lenguaje
Java.
Netscape, por su parte, contrató a un
programador llamado Brendan Eich, para
desarrollar un lenguaje que permitiriera el
dinamismo en la web.

ILERNA JEREZ – CURSO 2024-2025 – PRIMERO- FRANCISCO ÁLVARO GONZÁLEZ - LENGUAJE DE MARCAS Y SGI
 [Link]

3. Historia y estándares de JavaScript

Su origen remonta a 1995, cuando Brendan Eich cambió el

nombre de un lenguaje de scripting que estaba usando,
LiveScript, a JavaScript, aprovechando el tirón de Java.

Desde entonces se han sucedido diferentes

actualizaciones publicadas por dos organizaciones: W3C
y ECMA.
Los navegadores, al usar las normalizaciones, favorecen
mucho el desarrollo web.
1997 – ECMAScript 2,3 y 5
2019 – ECMAScript 10

ILERNA JEREZ – CURSO 2024-2025 – PRIMERO- FRANCISCO ÁLVARO GONZÁLEZ - LENGUAJE DE MARCAS Y SGI
 [Link]

3. Historia y estándares de JavaScript

JavaScript es una parte fundamental de una parte del Front-

End (dinamismo y comunicación con el back-end) y en el
Back-end (programación de servidores).

HTML+CSS

JavaScript JavaScript

Bases de
datos

ILERNA JEREZ – CURSO 2024-2025 – PRIMERO- FRANCISCO ÁLVARO GONZÁLEZ - LENGUAJE DE MARCAS Y SGI
 [Link]

4. Motores y ámbitos de JavaScript

Diferentes motores de JavaScript. Muchos de estos motores

están escritos en C++. Los motores son interpretes de código.

ILERNA JEREZ – CURSO 2024-2025 – PRIMERO- FRANCISCO ÁLVARO GONZÁLEZ - LENGUAJE DE MARCAS Y SGI
 [Link]

4. Motores y ámbitos de JavaScript

Diferentes motores de JavaScript. Muchos de estos motores

están escritos en C++. Los motores son interpretes de código.

ILERNA JEREZ – CURSO 2024-2025 – PRIMERO- FRANCISCO ÁLVARO GONZÁLEZ - LENGUAJE DE MARCAS Y SGI
 [Link]

4. Elementos de un Lenguja de programación

Un lenguaje de programación va a utilizar una serie de

elementos para poder programar las aplicaciones.

❑ Variables
❑ Constantes
❑ Tipos de datos
❑ Estructuras de datos
❑ Estructuras de control
❑ Operadores lógicos
❑ Operadores matemáticos
❑ Funciones.
❑ Objetos

ILERNA JEREZ – CURSO 2024-2025 – PRIMERO- FRANCISCO ÁLVARO GONZÁLEZ - LENGUAJE DE MARCAS Y SGI
 [Link]

5. Características del lenguaje JavaScript

Un lenguaje de programación va a utilizar una serie de

elementos para poder programar las aplicaciones.

❑ Interpretado
❑ Tipado dinámico
❑ Rendimiento
❑ Débilmente tipado

ILERNA JEREZ – CURSO 2024-2025 – PRIMERO- FRANCISCO ÁLVARO GONZÁLEZ - LENGUAJE DE MARCAS Y SGI
 [Link]

5. Variables y constantes

Las variables se definen con las palabras reservadas var o let.

Sirven para almacenar datos en la memoria volátil RAM de un
ordenador. Cuando acabe el programa la información se borra.

var nombre = 'DAM2'

let mensaje = 'Cadiz’
Las variables pueden ser globales o locales. Depende del ámbito donde se haya
definido será visible por todo el código del fichero .js o no.
Las variables var se pueden definir después de ser utilizadas. Se pueden declarar
más tarde de sus llamadas, al contrario que las de tipo let, pero puede provocar
efectos no deseados debido al hoisting (su valor no está definido).

ILERNA JEREZ – CURSO 2024-2025 – PRIMERO- FRANCISCO ÁLVARO GONZÁLEZ - LENGUAJE DE MARCAS Y SGI
 [Link]

5. Variables y constantes

Los ámbitos hijos pueden acceder a la información de los

padres pero no al revés.

let numero1 = 5;
const limite1 = 10;
❑ Ámbito global. Las variables o constantes están fuera de
cualquier función. function calculo(){
❑ Ámbito de función. Las variables o constantes definidas let numero2 = 20;
dentro de una función sólo se ven dentro de la función.
if(numero1 < limite1){
Sin embargo, desde dentro de una función se pueden ver let numero3 = 20;
las variables o constantes del ámbito global. let suma = numero1 + numero2 +
❑ Ámbito de bloque. Un bloque es un trozo de código numero3;
dentro de llaves, como el cuerpo de un condicional. [Link]("Suma total de
❑ Ámbito de módulo. Sale fuera del alcance de este curso. numero1,numero2 y suma es: " + suma);
}
}

calculo();

ILERNA JEREZ – CURSO 2024-2025 – PRIMERO- FRANCISCO ÁLVARO GONZÁLEZ - LENGUAJE DE MARCAS Y SGI
 [Link]

6. Sintaxis

El estándar define algunas reglas básicas

❑ Todas las líneas deben acabar en ;

❑ Los nombres de variables y elementos deben empezar por una letra o _, y pueden
tener números después.
❑ El lenguaje distingue entre mayúsculas y minúsculas (Case Sensitive).
❑ Tiene un conjunto de palabras reservadas y no se pueden usar como nombres de
variables, constantes o estructuras.
❑ Palabras reservadas: var, let, function, if, else, try,catch,for, while…
❑ La posición de los elementos del código es importante en su ejecución.

ILERNA JEREZ – CURSO 2024-2025 – PRIMERO- FRANCISCO ÁLVARO GONZÁLEZ - LENGUAJE DE MARCAS Y SGI
 [Link]

6. Sintaxis

La violación de alguna de estas reglas provocará un

error de sintaxis (SyntaxError)

ILERNA JEREZ – CURSO 2024-2025 – PRIMERO- FRANCISCO ÁLVARO GONZÁLEZ - LENGUAJE DE MARCAS Y SGI
 [Link]

6. Tipos de datos

Los tipos de datos de JavaScript son los datos numéricos

(numbers), texto (string) y booleanos (boolean), undefined
(indefinido) y null (valor nulo).

Se llaman tipos de datos primitivos son aquellos datos que no son estructuras de
datos ni objetos. A este tipo de variables no se le pueden añadir atributos o
métodos.
JavaScript proporciona tipos de datos complejos (objetos) para algunos de estos
tipos primitivos:
❑ number -> Number
❑ string -> String
❑ boolean -> Boolean

ILERNA JEREZ – CURSO 2024-2025 – PRIMERO- FRANCISCO ÁLVARO GONZÁLEZ - LENGUAJE DE MARCAS Y SGI
 [Link]

6. Tipos de datos

Tipo String. Cadena de caracteres.

Se usan comillas dobles o simples. Se recomiendan las dobles

Puede tener cualquier tipo de texto.

Let asignatura = “Lenguaje de marcas”;

ILERNA JEREZ – CURSO 2024-2025 – PRIMERO- FRANCISCO ÁLVARO GONZÁLEZ - LENGUAJE DE MARCAS Y SGI
 [Link]

6. Tipos de datos

Tipo Number. Representan un número entero o decimal.

Usan el estándar IEEE 754 de 64 bits, usando decimales.

Existe un número máximo y mínimo. Si se llega a esos valores, se toma el valor
Infinity.
Existe otro número especial llamado “NaN” que sirve para indicar que una
expresión matemática no se puede representar como un número.

Let temperatura = 23.45;

ILERNA JEREZ – CURSO 2024-2025 – PRIMERO- FRANCISCO ÁLVARO GONZÁLEZ - LENGUAJE DE MARCAS Y SGI
 [Link]

6. Tipos de datos

Tipo Boolean. Puede tomar el valor true o false.

Este tipo de dato es usado en las expresiones condicionales.

También en los bucles de programación.
Se usa también en el valor de retorno de una función.

Let alumnoProgresa = true;

ILERNA JEREZ – CURSO 2024-2025 – PRIMERO- FRANCISCO ÁLVARO GONZÁLEZ - LENGUAJE DE MARCAS Y SGI
 [Link]

6. Tipos de datos

Valores undefined y null.

Undefined es el valor por defecto. Es el valor que toman las variables que se han
declarado pero no tiene valor asignado.
Let nota;

Null es un valor que se usa de forma intencionada cuando no tiene un valor

asignada ni tampoco tiene referencia en memoria.
Let respuesta = null;

ILERNA JEREZ – CURSO 2024-2025 – PRIMERO- FRANCISCO ÁLVARO GONZÁLEZ - LENGUAJE DE MARCAS Y SGI
 [Link]

6. Tipos de datos

Tipado dinámico. En JavaScript el tipo de los datos se determina

cuando se ejecuta el programa (tiempo de ejecución).

Esto permite que podamos asignar a una misma variable diferentes tipos de datos
a lo largo del programa.
Es decir, podemos reaprovechar una variable en el programa.

El cambio de tipo de variable se puede hacer modificando el valor de una variable

o bien haciendo el método casting, que permite conversar el valor de la variable.

ILERNA JEREZ – CURSO 2024-2025 – PRIMERO- FRANCISCO ÁLVARO GONZÁLEZ - LENGUAJE DE MARCAS Y SGI
 [Link]

6. Tipos de datos

Ejemplo de tipado dinámico y casting.

Let isActive = “1”;

[Link](typeof isActive); //Nos devolverá string
isActive = true;
[Link](typeof isActive); //Boolean
isActive = 1;
[Link](typeof isActive); //Number
isActive = Boolean(isActive);
[Link](typeof isActive); //Boolean

ILERNA JEREZ – CURSO 2024-2025 – PRIMERO- FRANCISCO ÁLVARO GONZÁLEZ - LENGUAJE DE MARCAS Y SGI
 [Link]

6. Tipos de datos

Sin embargo, JavaScript proporciona métodos a las variables

primitivas, como si fueran objetos, ya que todas heredan de un
tipo básico Object.

Si a una variable primitiva se le añade la notación punto, podemos acceder a

métodos como length y otras.

var colegio = 'CES Juan PabloII'

[Link]([Link])
var nombreColegio = [Link]()
[Link]([Link]())

ILERNA JEREZ – CURSO 2024-2025 – PRIMERO- FRANCISCO ÁLVARO GONZÁLEZ - LENGUAJE DE MARCAS Y SGI
 [Link]

6. Tipos de datos

Existen una serie de funciones comunes a todos los tipos de

datos

Función Significado
typeof variable u objeto Devuelve de tipo de la variable
toString() Te transforma a un string
trim Elimina espacios en blanco
toUpperCase() Pone el texto en mayúsculas
toLowerCase() Pone el texto en minúsculas

ILERNA JEREZ – CURSO 2024-2025 – PRIMERO- FRANCISCO ÁLVARO GONZÁLEZ - LENGUAJE DE MARCAS Y SGI
 [Link]

8. Condicionales y operadores de comparación

Las expresiones condicionales son van a permitir variar la dirección

del flujo del programa dependiendo de las circunstancias.

Operadores Símbolo Significado

Igualdad == Los valores son iguales

Igualdad estricta === Los valores son iguales y tienen el mismo tipo

Desigualdad != Los valores son diferentes

Desigualdad !== Los valores son iguales pero de tipo diferente

estricta
Mayor que > El primer valor es mayor que el segundo

Mayor o igual que >= El primer valor es mayor o igual que el segundo

Menor que < El primer valor es menor que el segundo

Menor o igual que <= El primer valor es menor o igual que el segundo

ILERNA JEREZ – CURSO 2024-2025 – PRIMERO- FRANCISCO ÁLVARO GONZÁLEZ - LENGUAJE DE MARCAS Y SGI
 [Link]

8. Condicionales y operadores de comparación

Los operadores lógicos nos permiten crear expresiones lógicas

más complejas.

Operador lógico Símbolo Significado

AND o && == Los valores son iguales

OR o || === Los valores son iguales y tienen el mismo tipo

NOT o ! != Los valores son diferentes

ILERNA JEREZ – CURSO 2024-2025 – PRIMERO- FRANCISCO ÁLVARO GONZÁLEZ - LENGUAJE DE MARCAS Y SGI
 [Link]

8. Condicionales y estructuras de control

Estructura if, else if, else

function evaluar(nota){

if(nota<5.0){
[Link]("Suspenso")
}else if(nota>=5.0 && nota<=9.0){
[Link]('Aprobado')
}else{
[Link]('Sobresaliente')
}
}

ILERNA JEREZ – CURSO 2024-2025 – PRIMERO- FRANCISCO ÁLVARO GONZÁLEZ - LENGUAJE DE MARCAS Y SGI
 [Link]

8. Condicionales y estructuras de control

Estructura if, else if, else

function evaluar(nota){

if(nota<5.0){
[Link]("Suspenso")
}else if(nota>=5.0 && nota<=9.0){
[Link]('Aprobado')
}else{
[Link]('Sobresaliente')
}
}

ILERNA JEREZ – CURSO 2024-2025 – PRIMERO- FRANCISCO ÁLVARO GONZÁLEZ - LENGUAJE DE MARCAS Y SGI
 [Link]

8. Condicionales y estructuras de control

Estructura ternario

function evaluarTernario(nota){
let notaMenorCinco = nota<5.0
let evaluacion = notaMenorCinco ? 'Suspenso' :'Aprobado'
return evaluacion
}

function evaluarTernario2(nota){
[Link](nota<5.0 ? 'Suspenso' :'Aprobado')
}

ILERNA JEREZ – CURSO 2024-2025 – PRIMERO- FRANCISCO ÁLVARO GONZÁLEZ - LENGUAJE DE MARCAS Y SGI
 [Link]

8. Condicionales y estructuras de control

Estructura switch

function evaluarSwitch(nota){
switch(nota){
case 6:
case 7:
case 8:
return 'Aprobado';
break;
case 9:
case 10:
return 'Sobresaliente';
break;
default:
return 'Suspenso'
}
}
ILERNA JEREZ – CURSO 2024-2025 – PRIMERO- FRANCISCO ÁLVARO GONZÁLEZ - LENGUAJE DE MARCAS Y SGI
 [Link]

8. Condicionales y estructuras de control

Estructura for. Sintaxis clásica

function listarLista(lista){
for(let i=0;i<=[Link]-1;i++){
[Link](lista[i]);
}
}
var lista = ['Maria','Pepe','Juan','Jose']
listarLista(lista)

ILERNA JEREZ – CURSO 2024-2025 – PRIMERO- FRANCISCO ÁLVARO GONZÁLEZ - LENGUAJE DE MARCAS Y SGI
 [Link]

8. Estructuras de control

Estructura foreach. Se puede usar con

var lista = ['Maria','Pepe','Juan','Jose’]

[Link](function listar2 (e) {[Link](e)});

[Link]((e) => [Link](e));

ILERNA JEREZ – CURSO 2024-2025 – PRIMERO- FRANCISCO ÁLVARO GONZÁLEZ - LENGUAJE DE MARCAS Y SGI
 [Link]

8. Estructuras de control

Estructuras for..of y for..in

var lista = ['Maria','Pepe','Juan','Jose’]

for(var item of lista){

[Link](item)
}
for(var item in lista){
[Link](lista[item])
}

ILERNA JEREZ – CURSO 2024-2025 – PRIMERO- FRANCISCO ÁLVARO GONZÁLEZ - LENGUAJE DE MARCAS Y SGI
 [Link]

7. Estructuras de datos

Son formas normalizadas de almacenar datos, como listas,

colas, pilas o conjuntos.

Listas/Pilas/Colas
Una lista en JavaScript se define con elementos entre corchetes.

var lista = [1,2,3,4]

[Link](lista[0])
[Link](lista[[Link]-1])

ILERNA JEREZ – CURSO 2024-2025 – PRIMERO- FRANCISCO ÁLVARO GONZÁLEZ - LENGUAJE DE MARCAS Y SGI
 [Link]

3. Inserción del código Javascript

El código JavaScript se puede poner directamente entre

etiquetas <script>, con código o indicando el fichero con src, o
bien mediante la etiqueta <link> (en el <head>).

<script type="text/javascript">
var alumno = prompt("Soy Castón, identifiquese: ");
alert("Puede ir en paz, " + alumno);
</script>

ILERNA JEREZ – CURSO 2024-2025 – PRIMERO- FRANCISCO ÁLVARO GONZÁLEZ - LENGUAJE DE MARCAS Y SGI
 [Link]

3. Inserción del código Javascript

El código JavaScript se puede poner directamente entre

etiquetas <script>, con código o indicando el fichero con src, o
bien mediante la etiqueta <link> (en el <head>).

<script type="text/javascript">
var alumno = prompt("Soy Castón, identifiquese: ");
alert("Puede ir en paz, " + alumno);
</script>
<script src="js/[Link]"></script>
<link href="js/[Link]" type="text/javascript"/>
<button onclick="javascript:alert('Boton');" >ACCIÓN</button>

ILERNA JEREZ – CURSO 2024-2025 – PRIMERO- FRANCISCO ÁLVARO GONZÁLEZ - LENGUAJE DE MARCAS Y SGI
 [Link]

3. Inserción del código Javascript

El código javascript se puede poner directamente entre etiquetas

<script>, con código o indicando el fichero con src, o bien mediante la
etiqueta <link> (en el <head>). También se puede usar para capturar
eventos, como click de usuario.

<script type="text/javascript">
var alumno = prompt("Soy Castón, identifiquese: ");
alert("Puede ir en paz, " + alumno);
</script>
<script src="js/[Link]"></script>
<link href="js/[Link]" type="text/javascript"/>
<button onclick="javascript:alert('Boton');" >ACCIÓN</button>

ILERNA JEREZ – CURSO 2024-2025 – PRIMERO- FRANCISCO ÁLVARO GONZÁLEZ - LENGUAJE DE MARCAS Y SGI
 [Link]

3. Inserción del código Javascript

La ubicación de los ficheros .js o de los comandos online dependen de la

función que se quiera hacer. Si se van a realizar acciones sobre el propio
HTML mejor al final del <body>. Si es para tener algo preparado antes de
que cargue la página mejor dentro del <head>.

Event loop -> Es un mecanismo utilizado por Javascript para emular el

funcionamiento asíncrono.
Es un bucle que tiene diferentes fases y que hace que se esté
supervisando el código javascript de forma continua.

Cuando el motor se encuentra con una variable o una función sin

declarar previamente, les da el valor undefined y function
respectivamente. A este fenómeno se le llama hoisting y en el
compilador salta un error.

ILERNA JEREZ – CURSO 2024-2025 – PRIMERO- FRANCISCO ÁLVARO GONZÁLEZ - LENGUAJE DE MARCAS Y SGI
 [Link]

7. Estructuras de datos

Dependiendo de los métodos que utilicemos, una lista se puede

utilizar como una cola o como una pila. Una pila es una estructura
LIFO (Last-In First-Out).

Funcionamiento al final de la lista.

//Funcionamiento de pila
var lista = [1,2,3,4]
var ultimo = [Link]()
[Link](15)
[Link](lista)

ILERNA JEREZ – CURSO 2024-2025 – PRIMERO- FRANCISCO ÁLVARO GONZÁLEZ - LENGUAJE DE MARCAS Y SGI
 [Link]

7. Estructuras de datos

También podemos modelar una pila si en vez de trabajar con el

final de la lista trabajamos con el principio de la lista y con los
métodos shift() y unshift().

Funcionamiento al final de la lista.

//Funcionamiento de pila
var lista = [1,2,3,23]
var ultimaLista = [Link]()
[Link](34)
[Link](lista)

ILERNA JEREZ – CURSO 2024-2025 – PRIMERO- FRANCISCO ÁLVARO GONZÁLEZ - LENGUAJE DE MARCAS Y SGI
 [Link]

7. Estructuras de datos

Una cola es una estructura de datos FIFO (First-In First-Out). Para

modelar una cola tenemos que combinar pop() con unshift() o
push() con shift().

Funcionamiento de cola

//Funcionamiento de cola
var cola = [1,2,3,50]
var ultimaCola = [Link]()
[Link](99)
[Link](cola)

ILERNA JEREZ – CURSO 2024-2025 – PRIMERO- FRANCISCO ÁLVARO GONZÁLEZ - LENGUAJE DE MARCAS Y SGI
 [Link]

9. Funciones

Una función es un bloque de código que realiza un conjunto

de tareas y que podrían ser reutilizadas. Evita la duplicación
de código.

Las funciones se declaran con la palabra function.

El formato es function nombreFuncion(arg1,arg2…), donde argX son argumentos

function autor(){
let autor=“Juan Belmonte”;
[Link](autor);
}

ILERNA JEREZ – CURSO 2024-2025 – PRIMERO- FRANCISCO ÁLVARO GONZÁLEZ - LENGUAJE DE MARCAS Y SGI
 [Link]

9. Funciones

Las funciones nos pueden devolver un valor. Se usa la

palabra reservada return.

function autor(){
let autor=“Juan Belmonte”;
[Link](autor);
return autor;
}

ILERNA JEREZ – CURSO 2024-2025 – PRIMERO- FRANCISCO ÁLVARO GONZÁLEZ - LENGUAJE DE MARCAS Y SGI
 [Link]

9. Funciones

Los argumentos se pueden inicializar con un valor por defecto.

Estos valores se toman si no pasamos los valores en los
argumentos. El orden de los argumentos es importante.

function autor(nombre=“Juan”,apellidos=“Belmonte”){
[Link](“El autor se llama “+ nombre + “ “ +apellidos);
return autor;
}
[Link](autor());
[Link](autor(“Perico”,”Delgado”));

ILERNA JEREZ – CURSO 2024-2025 – PRIMERO- FRANCISCO ÁLVARO GONZÁLEZ - LENGUAJE DE MARCAS Y SGI
 [Link]

9. Funciones

Los argumentos de las funciones pueden ser datos

primitivos o datos complejos como objetos.

function geoObjet(obj){
[Link](obj.x,[Link].z)
}
geoObjet({x:21.4,y:34.7,z:99.0})

ILERNA JEREZ – CURSO 2024-2025 – PRIMERO- FRANCISCO ÁLVARO GONZÁLEZ - LENGUAJE DE MARCAS Y SGI
 [Link]

9. Funciones

Una manera adecuada de gestionar argumentos de tipo

objeto es mediante estructuras for que recorren dichos
objetos

function geoObjectFor(obj){
for(let e in obj){
[Link](obj[e])
}
}
geoObjectFor({x:21.4,y:34.7,z:99.0,alpha:85.8})

ILERNA JEREZ – CURSO 2024-2025 – PRIMERO- FRANCISCO ÁLVARO GONZÁLEZ - LENGUAJE DE MARCAS Y SGI
 [Link]

10. Clases

Las clases es la base de la creación de objetos y por tanto de la

Programación orientada a objetos. Se definen con la palabra
reservada class.

class Persona {
constructor(nombre, edad) {
[Link] = nombre;
[Link] = edad;
}

// Método de la clase
saludar() {
[Link](`Hola, me llamo ${[Link]} y tengo ${[Link]} años.`);
}
}

ILERNA JEREZ – CURSO 2024-2025 – PRIMERO- FRANCISCO ÁLVARO GONZÁLEZ - LENGUAJE DE MARCAS Y SGI
 [Link]

10. Clases

Las clases es la base de la creación de objetos y por tanto de la

Programación orientada a objetos. Se definen con la palabra
reservada class.

•constructor: Es un método especial que se llama automáticamente

cuando se crea una nueva instancia de la clase. Aquí se asignan los
valores iniciales para los atributos nombre y edad.

•Métodos: Puedes definir métodos dentro de la clase, como saludar.

ILERNA JEREZ – CURSO 2024-2025 – PRIMERO- FRANCISCO ÁLVARO GONZÁLEZ - LENGUAJE DE MARCAS Y SGI
 [Link]

11. Objetos

Los objetos se crean, normalmente, a partir de una clase

previamente declarada. Se utiliza la palabra reservada new

let persona1 = new Persona("Juan", 25);

[Link](); // Output: Hola, me llamo Juan y tengo 25 años

ILERNA JEREZ – CURSO 2024-2025 – PRIMERO- FRANCISCO ÁLVARO GONZÁLEZ - LENGUAJE DE MARCAS Y SGI
 [Link]

12. Web API – DOM

La Web API es un conjunto de interfaces y herramientas

proporcionadas por los navegadores para interactuar con
el entorno web.

Estas APIs permiten a los desarrolladores realizar diversas

tareas como:

•Manipular el DOM.
•Manejar eventos.
•Trabajar con gráficos, audio y video.
•Realizar solicitudes de red (AJAX o Fetch).
•Almacenar datos localmente en el navegador.
•Acceder a sensores del dispositivo (como la geolocalización).

ILERNA JEREZ – CURSO 2024-2025 – PRIMERO- FRANCISCO ÁLVARO GONZÁLEZ - LENGUAJE DE MARCAS Y SGI
 [Link]

12. Web API – DOM

Mediante JavaScript podemos manipular la estructura

de una página web, representada por su DOM.

JavaScript se puede utilizar para capturar eventos de usuario

más allá de los elementos de HTML. Por ejemplo, se puede
captura el click del usuario en cualquier lugar de la página.

DOM es una API (Application Programming Interface) para

interactuar con los distintos nodos (elementos) de la página
web.

Tiene estructura de árbol. Permite a JavaScript modificar,

añadir y/o eliminar nodos (elementos html y contenidos
internos).

ILERNA JEREZ – CURSO 2024-2025 – PRIMERO- FRANCISCO ÁLVARO GONZÁLEZ - LENGUAJE DE MARCAS Y SGI
 [Link]

12. Web API – DOM

Se puede ver la acción de la manipulación del DOM a través

de la consola embebida en los navegadores, que es un
intérprete de JavaScript.

ILERNA JEREZ – CURSO 2024-2025 – PRIMERO- FRANCISCO ÁLVARO GONZÁLEZ - LENGUAJE DE MARCAS Y SGI
 [Link]

12. Web API - DOM

El DOM (Document Object Model) está compuesto por varios

componentes y objetos que permiten la interacción con el
documento HTML desde JavaScript. Son los siguientes:

ILERNA JEREZ – CURSO 2024-2025 – PRIMERO- FRANCISCO ÁLVARO GONZÁLEZ - LENGUAJE DE MARCAS Y SGI
 [Link]

12. Web API - DOM

El objeto Window es la raíz del entorno de ejecución de JavaScript

en el navegador. Representa la ventana del navegador y
proporciona métodos, propiedades y eventos globales.

[Link](“Hola”); //Saca por consola un texto formado por cadena de caracteres y/o variables.
[Link](“Peligro!!”); //Muestra un mensaje en una ventana emergente
[Link](); //Imprime la página web
[Link](0,100 ); //Dos argumentos, eje x y ejeY. Provoca un desplazamiento a un punto de la web

Ejemplo de alert()

ILERNA JEREZ – CURSO 2024-2025 – PRIMERO- FRANCISCO ÁLVARO GONZÁLEZ - LENGUAJE DE MARCAS Y SGI
 [Link]

12. Web API -DOM

Propiedades y métodos importantes de Window:

• document: Referencia al documento HTML cargado.

• alert(), confirm(), prompt(): Mostrar diálogos emergentes.
• setTimeout(), setInterval(): Programación de tareas.
• localStorage, sessionStorage: Almacenamiento local y de sesión.
• location: Información sobre la URL actual.
• navigator: Información sobre el navegador.
• history: Control del historial de navegación.

ILERNA JEREZ – CURSO 2024-2025 – PRIMERO- FRANCISCO ÁLVARO GONZÁLEZ - LENGUAJE DE MARCAS Y SGI
 [Link]

12. Web API - DOM

El objeto document es un punto de entrada crucial para interactuar

con el contenido del DOM. Representa todo el documento HTML. Tiene
funciones de selección y creación de elementos.

▪ getElementById(): Selecciona un primer elemento por su id.

▪ getElementsByClassName(): Selecciona elementos por clase.

▪ querySelector(), querySelectorAll(): Selecciona elementos con selectores CSS.

▪ createElement(): Crea nuevos elementos HTML.

▪ body: Accede al elemento <body> del documento.

▪ head: Accede al elemento <head> del documento.

ILERNA JEREZ – CURSO 2024-2025 – PRIMERO- FRANCISCO ÁLVARO GONZÁLEZ - LENGUAJE DE MARCAS Y SGI
 [Link]

12. Web API - DOM

El objeto document es un punto de entrada crucial para interactuar

con el contenido del DOM. Representa todo el documento HTML. Tiene
funciones de selección y creación de elementos.

[Link](“.[Link]”).remove() //Borra el elemento.

[Link](“h1”); //Selecciona todos los elementos con un selector CSS.

ILERNA JEREZ – CURSO 2024-2025 – PRIMERO- FRANCISCO ÁLVARO GONZÁLEZ - LENGUAJE DE MARCAS Y SGI
 [Link]

12. Web API - DOM

Node es la clase base de todos los nodos del DOM.

Incluye elementos, atributos, texto, comentarios, etc.

Tipos de nodos:

• Element: Nodo que representa un elemento HTML.

• Text: Nodo que representa texto dentro de un elemento.
• Comment: Nodo que representa un comentario en el documento.
• Document: Nodo raíz del DOM.
• DocumentFragment: Contenedor de nodos que no se renderiza directamente.

ILERNA JEREZ – CURSO 2024-2025 – PRIMERO- FRANCISCO ÁLVARO GONZÁLEZ - LENGUAJE DE MARCAS Y SGI
 [Link]

12. Web API - DOM

Propiedades y métodos de Node

• nodeType: Retorna el tipo de nodo.

• nodeName: Nombre del nodo (por ejemplo, DIV para un <div>).
• childNodes: Lista de nodos hijos.
• parentNode: Nodo padre.
• appendChild(): Agrega un nodo hijo.
• removeChild(): Elimina un nodo hijo.

ILERNA JEREZ – CURSO 2024-2025 – PRIMERO- FRANCISCO ÁLVARO GONZÁLEZ - LENGUAJE DE MARCAS Y SGI
 [Link]

12. Web API -DOM

Element es un tipo específico de nodo que representa un

elemento HTML. Es el componente más usado para
interactuar con elementos del documento.

Propiedades y métodos de Element:

• tagName: Nombre del elemento (por ejemplo, DIV).

• className, classList: Acceso y manipulación de clases.
• id: Identificador del elemento.
• attributes: Lista de atributos del elemento.
• innerHTML, outerHTML: HTML interno y externo del elemento.
• style: Acceso y manipulación de estilos en línea.
• addEventListener(): Vincula un evento al elemento.

ILERNA JEREZ – CURSO 2024-2025 – PRIMERO- FRANCISCO ÁLVARO GONZÁLEZ - LENGUAJE DE MARCAS Y SGI
 [Link]

12. Web API -DOM

Element es un tipo específico de nodo que representa un

elemento HTML. Es el componente más usado para
interactuar con elementos del documento.

ILERNA JEREZ – CURSO 2024-2025 – PRIMERO- FRANCISCO ÁLVARO GONZÁLEZ - LENGUAJE DE MARCAS Y SGI
 [Link]

13. Fetch API – Consulta a APIs

La Fetch API es una interfaz moderna de JavaScript que permite realizar

solicitudes HTTP (como GET, POST, etc.) de manera asíncrona, lo que significa
que no bloquea el hilo principal de ejecución mientras espera una respuesta
del servidor.

Esto facilita la creación de aplicaciones web rápidas y dinámicas, ya que se pueden

obtener o enviar datos sin tener que recargar toda la página.

La sintaxis básica de fetch es la siguiente:

fetch(url, options)
.then(response => [Link]()) // Convierte la respuesta en JSON (si es aplicable)
.then(data => [Link](data)) // Maneja los datos de la respuesta
.catch(error => [Link]('Error:', error)); // Maneja errores

ILERNA JEREZ – CURSO 2024-2025 – PRIMERO- FRANCISCO ÁLVARO GONZÁLEZ - LENGUAJE DE MARCAS Y SGI
 [Link]

13. Fetch API – Consulta a APIs

Parámetros y respuesta de fetch.

Parámetros de fetch:
• url: La URL a la que se hace la solicitud. Puede ser una API pública o un archivo en el
servidor.
• options: (opcional) Un objeto que especifica las configuraciones de la solicitud, como
el método HTTP (GET, POST, PUT, DELETE), los encabezados, los parámetros, etc.

Respuesta de fetch:
• El objeto response es devuelto como una promesa. Debes usar el método .json() para
convertirlo en un formato más usable, como un objeto JavaScript, si es un JSON.
• También puedes usar .text() si la respuesta es texto plano o .blob() para manejar
archivos binarios.

ILERNA JEREZ – CURSO 2024-2025 – PRIMERO- FRANCISCO ÁLVARO GONZÁLEZ - LENGUAJE DE MARCAS Y SGI
 [Link]

13. Fetch API – Consulta a APIs

Parámetros y respuesta de fetch.

Parámetros de fetch:
• url: La URL a la que se hace la solicitud. Puede ser una API pública o un archivo en el
servidor.
• options: (opcional) Un objeto que especifica las configuraciones de la solicitud, como
el método HTTP (GET, POST, PUT, DELETE), los encabezados, los parámetros, etc.

Respuesta de fetch:
• El objeto response es devuelto como una promesa. Debes usar el método .json() para
convertirlo en un formato más usable, como un objeto JavaScript, si es un JSON.
• También puedes usar .text() si la respuesta es texto plano o .blob() para manejar
archivos binarios.

ILERNA JEREZ – CURSO 2024-2025 – PRIMERO- FRANCISCO ÁLVARO GONZÁLEZ - LENGUAJE DE MARCAS Y SGI
 [Link]

13. Fetch API – Consulta a APIs

Ejemplo de uso de consulta a APIs

ILERNA JEREZ – CURSO 2024-2025 – PRIMERO- FRANCISCO ÁLVARO GONZÁLEZ - LENGUAJE DE MARCAS Y SGI
 [Link]

13. Fetch API – Consulta a APIs

Explicación del Código.

Obtención de un Chiste de Chuck Norris:

• Usamos la API [Link] para obtener un chiste

aleatorio.
• fetch realiza la solicitud a la API y luego convertimos la respuesta en formato JSON
utilizando .json().
• La propiedad [Link] contiene el texto del chiste, que se inserta en el contenedor
jokeContainer.

ILERNA JEREZ – CURSO 2024-2025 – PRIMERO- FRANCISCO ÁLVARO GONZÁLEZ - LENGUAJE DE MARCAS Y SGI
 [Link]

13. Fetch API – Consulta a APIs

Explicación del Código.

Obtención de Información Meteorológica:

• Usamos la API de OpenWeatherMap: [Link]

• En el url se incluyen los parámetros necesarios como el nombre de la ciudad y la clave API.

• La respuesta contiene detalles sobre el clima, como la temperatura y la descripción del

clima.

• Estos datos se insertan dinámicamente en una tabla en el weatherTable.

ILERNA JEREZ – CURSO 2024-2025 – PRIMERO- FRANCISCO ÁLVARO GONZÁLEZ - LENGUAJE DE MARCAS Y SGI
 [Link]

13. Fetch API – Consulta a APIs

Explicación del Código.

Manejo de Errores:

En ambas solicitudes, si ocurre un error (como problemas de red o un error

en la respuesta de la API), se muestra un mensaje de error en la interfaz de
usuario y se registra en la consola.

ILERNA JEREZ – CURSO 2024-2025 – PRIMERO- FRANCISCO ÁLVARO GONZÁLEZ - LENGUAJE DE MARCAS Y SGI
 [Link]

13. Fetch API – Consulta a APIs

Consideraciones importantes

Claves API:

• Algunas APIs (como la del tiempo) requieren claves de autenticación.

Debes registrarte en el servicio correspondiente (como OpenWeatherMap
para obtener una clave API válida)
• Manejo de Errores: Siempre debes manejar posibles errores con .catch()
para evitar que tu aplicación se caiga si algo sale mal.
• Asincronía: fetch es asíncrono y retorna una promesa, lo que significa que
no bloquea la ejecución del resto del código mientras espera la
respuesta.

ILERNA JEREZ – CURSO 2024-2025 – PRIMERO- FRANCISCO ÁLVARO GONZÁLEZ - LENGUAJE DE MARCAS Y SGI
 [Link]

14. JSON

JSON (JavaScript Object Notation) es un formato de intercambio de

datos ligero, basado en texto, que es fácil de leer y escribir para los
humanos, y fácil de analizar y generar para las máquinas.

Se utiliza principalmente para transmitir datos entre un servidor y un cliente en

aplicaciones web y es el formato de intercambio más común en las APIs web.

JSON es un subconjunto del objeto de JavaScript, lo que significa que tiene una
estructura similar a los objetos de JavaScript, pero con reglas específicas de sintaxis
que lo hacen independiente de cualquier lenguaje de programación.

ILERNA JEREZ – CURSO 2024-2025 – PRIMERO- FRANCISCO ÁLVARO GONZÁLEZ - LENGUAJE DE MARCAS Y SGI
 [Link]

14. JSON

Un archivo JSON tiene una estructura de pares clave-valor. Cada par

clave-valor es un objeto, y las claves son siempre cadenas (strings). Los
valores pueden ser cadenas, números, booleanos, arrays, objetos u null.

Sintaxis Básica de JSON:

• Objeto: Se define entre llaves { }, con pares de clave y valor

separados por comas.
• Array: Se define entre corchetes [ ], con valores separados por comas.
• Cadena de texto (string): Siempre va entre comillas dobles " ".
• Número: Puede ser entero o decimal.
• Valor booleano: true o false.
• Null: Representa un valor nulo.

ILERNA JEREZ – CURSO 2024-2025 – PRIMERO- FRANCISCO ÁLVARO GONZÁLEZ - LENGUAJE DE MARCAS Y SGI
 [Link]

14. JSON

Ejemplo JSON. Objeto simple.

{
"nombre": "Juan",
"edad": 30,
"activo": true
}

Este objeto JSON tiene tres pares clave-valor:

"nombre": un string con el valor "Juan".
"edad": un número con el valor 30.
"activo": un valor booleano con el valor true.

ILERNA JEREZ – CURSO 2024-2025 – PRIMERO- FRANCISCO ÁLVARO GONZÁLEZ - LENGUAJE DE MARCAS Y SGI
 [Link]

14. JSON

Ejemplo JSON. Objeto con un array.

{
"nombre": "Ana",
"edad": 25,
"amigos": ["Luis", "Carlos", "María"]
}

En este caso, el valor de "amigos" es un array que contiene tres

elementos de tipo string.

ILERNA JEREZ – CURSO 2024-2025 – PRIMERO- FRANCISCO ÁLVARO GONZÁLEZ - LENGUAJE DE MARCAS Y SGI
 [Link]

14. JSON

Ejemplo JSON. Objeto con un objeto dentro.

{
"usuario": {
"nombre": "Pedro",
"correo": "pedro@[Link]"
},
"activo": true}

Aquí, el valor de "usuario" es otro objeto, lo que demuestra que JSON

puede contener estructuras anidadas.

ILERNA JEREZ – CURSO 2024-2025 – PRIMERO- FRANCISCO ÁLVARO GONZÁLEZ - LENGUAJE DE MARCAS Y SGI
 [Link]

14. JSON

Ejemplo JSON. Array de objetos.

[
{
"nombre": "Carlos", "edad": 28
},
{
"nombre": "Marta", "edad": 22
}
]

Este es un array de objetos, donde cada elemento del array es un

objeto con las claves "nombre" y "edad".

ILERNA JEREZ – CURSO 2024-2025 – PRIMERO- FRANCISCO ÁLVARO GONZÁLEZ - LENGUAJE DE MARCAS Y SGI
 [Link]

14. JSON

Uso de JSON en JavaScript.

Convertir JSON a Objeto JavaScript:

Cuando obtienes datos en formato JSON de una API, puedes convertirlo en
un objeto JavaScript utilizando el método .json() de la respuesta de fetch
(como en el ejemplo anterior).

Convertir un Objeto JavaScript a JSON:

Si quieres enviar datos a un servidor, puedes convertir un objeto JavaScript
en JSON utilizando [Link]().

ILERNA JEREZ – CURSO 2024-2025 – PRIMERO- FRANCISCO ÁLVARO GONZÁLEZ - LENGUAJE DE MARCAS Y SGI
 [Link]

14. JSON

Uso de JSON en JavaScript.

Ejemplo:

Const persona = { nombre: "Juan", edad: 30};

const personaJSON = [Link](persona);

[Link](personaJSON); // {"nombre":"Juan","edad":30}

ILERNA JEREZ – CURSO 2024-2025 – PRIMERO- FRANCISCO ÁLVARO GONZÁLEZ - LENGUAJE DE MARCAS Y SGI
 [Link]

14. JSON

Resumen de JSON

• JSON es un formato basado en texto para el intercambio de datos.

• Es ligero, fácil de leer y escribir para los humanos y fácil de analizar para las
máquinas.

• Se usa ampliamente en APIs web, donde las respuestas y solicitudes a menudo

están en formato JSON.

• Se puede manejar en JavaScript utilizando métodos como [Link]() para

convertir un string JSON en un objeto y [Link]() para convertir un objeto
en un string JSON.

• JSON es una forma versátil y eficiente de intercambiar datos en aplicaciones

web, y entender cómo manipularlo es crucial para el desarrollo moderno de
aplicaciones frontend y backend.

ILERNA JEREZ – CURSO 2024-2025 – PRIMERO- FRANCISCO ÁLVARO GONZÁLEZ - LENGUAJE DE MARCAS Y SGI