1.

INTRODUCCIÓN

Java Scripts es el más incomprendido de todos los lenguajes, primero por tener el prefijo de
Java, por tener mucho de C y C++, por no tener typeCasting y por ultimo por tener errores de
diseño.

JavaScripts tiene una sola definición y múltiples implementaciones:

 La definición se encuentra bajo los estándares de ECMA organismo de estandarización

europeo.
 Las implementacionesomo: NetScape, Safari, Opera, Firefox, IE, V8.

Microsoft crea su propia implementación JScript que junto con NetScape nace la
estandarización ECMA y nace JavaScript estandarizado, y desde la V5 y V6 nece TC-39.

2. NOCIONES BÁSICAS DE PROGRAMACIÓN WEB : SINTAXIS BÁSICAS:

Comentarios:
Para comentarios de una única línea:
// Esto es un comentario

Para comentarios de varias líneas:

/* Esto es un comentario más extenso */

JavaScript incorpora el símbolo punto-y-coma (;) para indicar el final de una

instrucción:
let unaVariable = 1.0;

console.log(unaVariable);

Bloques:

Un bloque no es más que una serie de instrucciones entre una llave de apertura y otra de
cierre, la principal función de un bloque es definir un ámbito: global o local.
// Ámbito global
{
// Esto es un bloque de ámbito local
console.log('Esto es un bloque');
}
Tipos de datos:

JavaScript es un lenguaje no tipado, es decir dinámico, lo que significa que un valor puede
cambiar de tipo según el requerimiento del programa es lo contario a los lenguajes
tipados.

Para saber que tipo de datos es una variable en JavaScript se usa el typeof por ejemplo:
typeof "Hola aprendices de JavaScript!"; // devolverá 'string'
typeof false; //devolverá 'boolean'

Variable y ámbito:
Desde la versión 2015 de JavaScript, también conocida como ES6, las variables deben
declararse con las palabras clave let o const.

let m=1
m=5 // m puede cambiar de valor
const n=5
n=4 //sale error ya que n es una constante y su valor puedo cambiar

Es decir las constantes no pueden cambiar de valor, la excepción son los objetos ejemplo:
const unObjeto = { saludo: "hola" };
unObjeto.saludo = "Qué tal?"; // No representa ningún problema

Las variables pueden ser de ámbito global o ámbito local

const valor = "un valor"; //Variable global

let otroValor = 4; //Variable global
{
// Ahora definimos otra variable con el mismo nombre en un ámbito local
let valor = 2.3;
console.log(valor); // Devolverá 2.3;
console.log(otroValor); // Devolverá 4;
}
console.log(valor); // Devolverá "un valor” ya que es una variable global

Pero si no declaramos la variable como let la variable es global ejemplo

const valor = "un valor";

let otroValor = 4;
{
// Ahora definimos otra variable con el mismo nombre en un ámbito local
valor1 = 2.3;
console.log(valor); // Devolverá 2.3;
console.log(otroValor); // Devolverá 4;
}
console.log(valor1); // Devolverá "un valor"

Cadena y Template literals

Para declarar una cadena podemos usar la definición literal como:

let cadena = “Hola”;

Pero podemos declarar variable tipo string de manera estricta con el operador new de la
siguiente manera:

let cadena = new String(“Hola”);

Template Literals, se introducen el la versión E6 y es el uso de comilla invertidas para la
concatenación de cadenas como por ejemplo

const nombre = "Alberto";

console.log(`Hola ${nombre}`); // Devuelve "Hola Alberto"

antes de la llegada de los los templates literal la manera de conseguir este resultado era
con el operador de concatenación de cadenas

console.log("Hola " + nombre);

3. ESTRUCTURAS COMPLEJAS EN JAVASCRIPT

1. Arreglos:

Declaración: const array = [];

ejemplo: const gurus = ["Jobs", "Ellison"];
Acceso a un elemento: console.log(gurus[0]); // Devuelve "Jobs"
Se puede modificar el tipo de los elementos del arreglo gurus[0]=1;
console.log(gurus[0]);
Un Array aunque sea declarado como constante es mutable.
Borrado de un elemento: delete array[0];
Método sobre arrays:
.pop() //borrar último elemento Combinación de array
.shift() //borrar el primer
.push() //poner al final del arreglo .concat(otroArray) //concatenamos arreglos
.unshift() //poner un elemento al inicio .splice(índice, numElemento, elementosAInsertar)
.slice(indiceInicial, indiceFinal) //podemos reemplazor un número de elementos desde
//extraemos una porción del arreglo una posición inicial

Array y cadenas de texto Búsqueda de valores

.join(separador) //devuelve una cadena de .indexOf(elemento) //posición del elementos

texto con los elementos del array .includes(elemento) //devuelve verdadero o false si
el elementos pertenece al arreglo
spread operator . . . //separa los
elementos del array
...gurus;

2. Conjuntos

Un conjunto o set es una estructura que representa una colección de valores únicos (no
pueden repetirse).
const conjunto = new Set();

añadir elementos:

conjunto.add(20);

.has(elemento) //verifica si el elemento existe en el set

.delete(elemento)borra el elemento del set

.clear() // borra todos los elementos del set

Set y array

const setCientificas = new Set().add("Noether").add("Rubin");

const arrayCientificas = [...setCientificas]; // separamos los elementos del array y lo

ponemos como elementos del array

3. Mapas
Los mapas no son más que listas de parejas clave-valor. Son conocidos como hashes,
tablas o diccionarios en otros lenguajes de programación.
Diferencia con los objetos

1. En los mapas tanto la clave como valor pueden ser de cualquier tipo, en los objetos
solo pueden ser cadenas de texto
2. En los objetos podemos tener métodos propios o podemos definir nuevos
métodos sobre los objetos, a diferencia que en mapas solo podemos utilizar un
método concreto y no podemos definir nuevos

Creación de Map:

const mapa = new Map();

Añadir elementos: Mapa.set(1, “Hola”);

Mostrar elemento: Mapa.get(2);
Borrar: Mapa.delete(2);
Vaciar Map: Mapa.clear();

4. FUNCIONES Y OBJETOS

Declaración de una función

let unaFuncion = function(parámetros){
// Instrucciones a cumplir con esos parámetros
};
Invocación:

let unafuncion = function(){console.log("hola")};

unafuncion();

Valores devueltos: La variable se inicializa con los valores devueltos por la función

function mensaje(cadena){
return cadena;
}
const devuelve= mensaje("Adios");
console.log(devuelve);
Parámetros por defecto:

function saluda(saludo = "Hola!"){

return saludo;
}
console.log(saluda()); // Devuelve "Hola!"
console.log(saluda("¿Qué tal?")); // Devuelve "¿Qué tal?"

Funciones Flecha:

Este tipo de funciones es introducido con ES6, la cual es muy limpia y directa y esta
inspirada en el superset.

Ejemplo: Esta función recibe como parámetro un número y lo devuelve elevado al 3.

Ejemplo 1:
let val= a=>a**3;
console.log(val(3));
Ejemplo 2:
let suma = (a,b) => {
let d = a+b;
return (d+a);
}
console.log(suma(1,2));

Funciones callback

Son funciones que se pasan como parámetro a otras funciones y es muy usada para la
programación orientada a eventos

function diAlgoYAlgoMas(algo, funcionCallback){

console.log(algo + " " + funcionCallback());
}
let yAlgoMas = () => "y algo más!";
console.log(diAlgoYAlgoMas("Hola", yAlgoMas));
La función que es llamada debe ser inicializada después de ser llamada esta es una
característica de la función callBack.

Funciones de orden superior

Son métodos que se usan en array, set y Map.

Funciones anónimas: Son funciones que no tienen nombre y no han sido definidas
previamente. Ejemplo recorrido de array

const matematicos = ["Mirzakhni", "Werner"];

matematicos.forEach((matematico, indice) => {
console.log(`El índice del matemático ${matematico} es ${indice}.`);
 });
Filtrado de array:

const numeros = [1, 2, 3, 4, 5, 6];

numeros.filter(a => a%2 !== 0); // Devuelve [ 1, 3, 5 ]

OBJETOS LITERALES:

Conjunto de propiedades y valores que se usan para mantener información y

funcionalidad sobre esa misma información de manera cohesionada y en un solo lugar

Ejemplo:

const buzz = {
nombre: "Buzz Lightyear",
amigos: [ "Jessie", "Mr. Potato"],
frase: () => "Hasta el infinito y más allá!"
};
console.log(buzz.nombre);

Objetos literales como parámetros

function saluda1({saludo, nombre}){

return `${saludo} ${nombre}!`
}
saluda1({ saludo: "Hola", nombre: "Woody" });

OBJETO THIS:

Hace referencia al objeto mismos

const otromensaje = {
d: "Hola",
frase(){
return "Otra vez " + this.d;
}
}
console.log(otromensaje.frase());

5. EL DOM

Document Object Model, framework dispuesto por los navegadores para JavaScript pueda
interactuar con la pagina web, es decir le permite: Cambiar y mover elementos, modificar
atributos cambiar estilos. DOM representa un documento HTML como un árbol de ítems o
nodos interconectados. Para el DOM, cualquier cosa en una página web es un nodo: desde
las etiquetas HTML, pasando por el texto dentro de las mismas, hasta incluso los atributos
anexados a las etiquetas

DOM1 – 1998: W3C decide estandarizar el acceso a los elementos de la página web.

DOM2- 2000: Se introduce el método getElementId() que permite acceder a lo elementos

de una página web

DOM3 – 2004: W3C ya no usa niveles si no actualiza de manera dinámica y continua.

Obtención y navegación de elementos de la página WEB

El DOM presenta varios métodos para acceder a los elementos de la pagina web pero lo
hace a través del objeto Document. Uno de esos métodos es el body.

DOM VIRTUAL CON JSDOM

Node.js no tiene acceso al API del DOM ya que es una implementación de Java Scripts para
el servidor, por esa razón se creó JSDOM que no es mas que un framework para Node que
simula gran parte de la funcionalidad del navegador por eso se llama DOM virtual.
const jsdom = require("jsdom");
const { JSDOM } = jsdom;
const dom = new JSDOM(`<!DOCTYPE html><p>Hola!</p>`);
const document = dom.window.document;

con esto ya podríamos acceder al contenido del HTML

const cuerpoPagina = document.body;

const tipo = document.body.nodeType;

const nombre= document.body.nodename;

JSDOM permite además ejecutar programas en segundo plano con la tecnología Web
Worker, es decir una manera de incorporar una especie de funcionalidad multihilo a
JavaScript.
Localizar elementos en el navegador: getElementById(‘ElementoID’);

Localizar elementos con el tag: getElementByTagName(“nombreelemento”);

Localizar elementos por su clase: getElementByClassName(“Clase”);

const dom = new JSDOM(`<p class="saludos">Hola!</p>

<h1 class="saludos">Qué tal?</h1>`);

const document = dom.window.document;

const cosas = document.getElementsByClassName("saludos");

SELECTORES DE CONSULTA QUERY SELECTORS

Con los métodos querySelector(selector) y querySelectorAll(selector) del objeto
document. Este método acepta una cadena de texto que apunta a un selector CSS. Los
selectores CSS son una versión resumida del API del DOM para referenciar etiquetas,
atributos, nombres de clase (class), identificadores únicos (id), etc. Concretos.

. Clase ejemplo: .unaclase

: Superclase ejemplo : li:fist-child

:: Superelemento h3::first-line

querySelector(Selector)

const dom = new JSDOM(`<p id="esteSaludo">Hola!</p>`);

document.querySelector("#esteSaludo"); //devuelve el primer elementos
encontrado lo busca por ID
const unParrafoDeIDSaludo = document.querySelectorAll(".saludo"); // devuelve
todos los elementos de la clase saludo
Navegaciones mediante propiedades: firstchild

<h4 class =”saludos”>Hola</h4>

const nodo= document.queryselector(“.saludo”);
const texto= nodo.firstchild;
Asignación atributos: setAtribute(), getAtribute()

nodo.setAttribute("class", "despedida");
nodo.getAttribute("class");
Creación de elementos

const elemento = document.CreateElement(‘H1’)

const texto = document.createTextNode("Hooola!");
elemento.appendChild(texto);

6. DESARROLLO DE WEB MODERNO

Flujo basados en eventos y Listeners

Con los listeners, el sistema nos notifica si un suceso ha acontecido y nos deja espacio para
responder al mismo. Por ejemplo con esto sabremos si un botón ha sido pulsado o no. Y se
lo hace con código JavaScript.
Ejemplo:
document.body.addEventListener(“click”, hazAlgo);

Escuchadores de eventos inline

Estos eventos son llamados desde el código HTML
<h1 onclick="console.log('hiciste click')">Haz click si quieres!</h1>

Escuchadores de eventos antiguos

document.onclick = function (){ console.log('Click!!'); }
Uso de event listeners

Podemos usarlo de manera anónima:

addEventListener('click', () => alert('Hiciste click!'));

Usando un nombre de función:

addEventListener('click', hazAlgo);

Modo estricto de JavaScript

En la versión 5 de ECMAScript se introdujo una nueva normativa llamada modo estricto. En
este modo, el intérprete de JavaScript prohíbe ciertas malas prácticas. Para activar el modo
estricto, solo tenemos que incluir esta línea al inicio de nuestro programa:
'use strict';
Como malas prácticas podemos mencionar:
 No declarar variables globales so=in la palabra var.
 Los parámetros de una función deben ser únicos

Ejemplo:

'use strict'; var x = 10;

eval("var a = x");
console.log(a); // error, a no está definido

También podemos activar el modo estricto por función, como en el siguiente ejemplo:
function muyEsctricto(){
'use strict';
// código de la función
}
Algo más sobre funciones
1. Capacidad de memorización: Una función puede alterarse a sí misma.
function unaFuncion(){
return 'Hola 1';
unaFuncion = function(){
return 'Hola 2';
}
}
2. Funciones invocadas inmediatamente: son funciones anónimas que se invocan al ser
definidas.
(function(){
var hola= “Mundo”;
console.log(`hola ${hola}`);
})();

Promesas y funciones asincrónicas

1. Las promesas son nuevas formas de llamar a la funciones callback
const promise = new Promise((todoOK, algoFueMal) => {
//código asincronico
if (exito) {
 todoOK(value);
}
else {
algoFueMal(error);
}
});
2. Funciones asincrónicas, el código de la función se ejecuta al mismo tiempo del resto
del programa.
async function cargarUsuario(userName) {
const usuario = await login(nombre);
const informcion = await infoUsuario(usuario.id);
}
Closures
Es una referencia a una variable que fue creada en el ámbito de otra función, pero puede
ser accesible en otra parte de código del programa.

function funcionExterna() {
const variableExterna = 'Variable externa';
function funcionInterna() {
const variableInterna = 'Variable interna';
}
console.log(variableExterna);
funcionInterna();
}

Programación Funcional:
Los elementos esenciales de la programación funcional son la capacidad de pasar funciones
como parámetros a otras funciones (callbacks), la existencia de funciones anónimas y los
closures.
No Trabaja con funciones impuras:
let numero =2;
let resultado=0;
function suma1(x){
resultado = numero+x;
}
Es impura porque accede a una variable que no esta dentro de su ámbito
Solo con Funciones puras
const unNumero = 2;
function sumaPura(x,y){
return x + y;
}
resultado = sumaPura(unNumero, 90);
console.log(resultado);
Funciones de orden superior
Son funciones que aceptan otras como argumento o devuelven una función como resultado
o ambas cosas.
const gente = [
 { nombre: "Pedro", edad: 46 },
{ nombre: "Jacinto", edad: 29 },
{ nombre: "Esmeraldo", edad: 76 },
{ nombre: "Cara" , edad: 8 },
];
const mayoresEdad = (gente) => {
return gente.filter((persona) => persona.edad >= 18);
}
console.log(mayoresEdad(gente));

Programación OO
class Persona{
constructor(nombre = "Pedro"){
console.log(nombre);
}
static especie(){
return "homo sapiens sapiens";
}
}
const persona1= new Persona;
const persona2 = new Persona("Juan");
console.log(Persona.especie());
Prototype
Permite añadir métodos a una clase que ya existe:

class Persona{
constructor(nombre = "Pedro"){
console.log(nombre);
}
static especie(){
return "homo sapiens sapiens";
}
}
Persona.prototype.despedida=function(){console.log("Adios");}

const persona1= new Persona;

const persona2 = new Persona("Juan");
console.log(Persona.especie());
console.log(persona2.despedida());