PROGRAMACIÓN DESDE CERO

¿Qué es la programación?
Resolver problemas dándole instrucciones a un ordenador y poder manipular esos datos.

Lenguajes de programación
 Tipo:
o Lenguaje informático -> Es cualquier instrucción escrita que el
ordenador pueda entender.
o Lenguaje de programación -> Debería ser capaz de ejecutar un algoritmo
(pasos para solucionar un problema).

 Tipos de lenguaje:
o Compilado -> Convierte el código en binarios que lee nuestro S.O.
o Interpretado -> Requiere de un programa que lea la instrucción en tiempo
real y lo ejecute.
o Intermedio -> Se compila el código de fuente a un lenguaje intermedio y
este último se ejecuta en una máquina virtual.

 Alto nivel y bajo nivel:

o Alto nivel: Lenguajes que como personas podemos entender.
o Bajo nivel: Lenguaje que solo lo puede leer un ordenador.
¿Que son los paradigmas de la programación?
Son los diferentes estilos de usar la programación para resolver un problema.
 Tipos:
o Programación estructurada -> Instrucciones secuenciales, usa ciclos y
condicionales.
o Programación reactiva -> Lee flujos de datos constantes y reaccionar por
cada cambio que ocurra.
o Programación orientada a objetos -> Divide el sistema en partes que se
comunican entre sí y cada parte es un objeto.
o Programación funcional -> Divide el programa en pequeñas tareas que
son ejecutadas por funciones.
¿Qué es un algoritmo?
Conjuntos de instrucciones para resolver diferentes tipos de problemas.

¿Características de un algoritmo?
Definido – Preciso – Legible – Finito.
Partes de un algoritmo
Entrada de datos que ya han sido definidos.
Proceso, para poder procesar los datos de entrada.
Salida, ejecutar los procesos.

Desarrollo de algoritmo con pseudocódigo.

¿Cómo resolver un problema o necesidad?

 Tener el enunciado del problema/necesidad claro, conciso y completo.

 Analizar los datos que se van a procesar.
o Datos de entrada.
o Datos de salida.
o Fórmulas que procesarán los datos.
o Datos de prueba.
 Identificar varias soluciones posibles.

Ejemplo: Calcular el año bisiesto.

Algoritmo AñoBisiesto

Escribir "Ingrese el año:";

Leer año;

Si ((año MODULO 4 = 0) Y (año MODULO 100 <> 0)) O año MODULO 400 = 0 Entonces

Escribir "el año es bisiesto";

SiNo

Escribir "el año no es bisiesto";

FinSi

FinAlgoritmo

Desarrollo de algoritmo con diagrama de flujo

Tipos de datos Primitivos
String -> Cadena de texto.
Integer/Entero -> Numérico sin decimal.
Float -> Numérico con decimal.
Boolean -> True o False.

¿Qué son las variables?

Son espacios reservados en memoria para almacenar datos.
¿Qué son las funciones?
Es un bloque de código que realiza una actividad especifica, para poder utilizarse las
veces se necesite.

JAVA SCRIPT DESDE CERO

¿Creado por?
Brendan Eich en 1995.

¿Qué es JavaScript?
JavaScript, es un lenguaje dinámico y de tipado débil.

¿Qué significa que JavaScript se ha de un lenguaje dinámico?

Se Pueden cambiar los tipos de las variables en tiempo de ejecución.

¿Qué significa que JavaScript se ha de tipado débil?

No es necesario indicarle el tipo a una variable.
Formas de poner comentarios en JS

Tipos de datos Primitivos:

 Number:
 Undefined:
 String:
 Boolean:
 2n:
 Symbol():
 Null:

¿Por
qué el tipo de dato primitivo Null da Object?
Es por un error/bug, esta documentado que en JavaScript hubo un error y el Null ===
Null y esto jamás lo han arreglado pero por un tema de compatibilidad.

Los objetos

Hay diferentes objects, pero hay uno dentro de los objects que es especial y que no tiene
una estructura de datos, es una estructura sin datos y serían las funciones.

En realidad, las funciones por detrás son un Object ya que cada constructor de las
funciones se deriva del constructor Object, pero es un tipo especial.

¿Qué dos grupos de tipos de datos hay en JavaScript?

Primitivos y Objetos, aunque las functions son parte especial de los objetos.

¿Y qué diferencia hay entre los dos grandes grupos de tipos de datos en JavaScript?
Los primitivos se pasan por valor, quiere decir que:
 Los primitivos son inmutables, ya que siempre se estarán comparando por su
valor y el valor de un primitivo no se puede mutar.

Los objetos se pasan por referencia, quiere decir que:

 La comparación de ambas estructuras no se compara por su valor, si no por su
referencia, esto se debe a que:
 o Los lenguajes de programación, cuando crean estos tipos de estructuras
de datos, lo que hace es apuntar a una dirección diferente de memoria ya
que pueden ir creciendo/recibiendo, reservando ese espacio en memoria
por si se añade más valores.

Tipo de estructura de datos

 Los Objetos: Son colecciones de datos/información, que tienen un identificador
(Numérico por posición comenzando del 0) y una key (Dato).
 Array(arreglo): Agrupar datos de diferentes tipos.

Variables
Son espacios reservados en memoria para guardar información/datos y luego
reutilizarlos o reasignarlos.

Formas de declarar una variable

VAR (palabra reservada).
LET (palabra reservada).
CONST (palabra reservada).
Constantes
 Valores almacenados en memoria dentro de una variable constante.
 ¿Que guarda? Datos que no van a cambiar.
 No se le puede reasignar un valor a una Constante.
Operadores Aritméticos
* Nos permiten hacer operaciones matemáticas
 +(Suma)
 -(Resta)
 *(Multiplicación)
 /(División)
 %(residual)
Operadores de Asignación
 = (Asigna un valor a una variable).
 += (Asignación aritmética).
 **(Exponencial 5^3).
Operadores de concatenación
 (+)
Operadores de comparación
Compara uno o más datos.
 == (Es igual, compara solo el valor, aunque el tipo dato no se ha igual).
 === (Es exactamente igual, comprara valor y tipo de dato).
 ! = (Es diferente, verifica que los valores se han diferentes).
 ! == (Es exactamente diferente, verifica el valor y tipo de datos).
Operadores de comparación Aritméticos
Compara uno o más datos.
  > (Mayor que).
 < (Menor que).
 >= (Mayor o igual que).
 <= (Menor o igual que).

Operadores lógicos
Sirve para concatenar dos validaciones.
 && (AND - Se tiene que cumplir ambas AFIRMACIONES para que dé
verdadero).
 || (OR - Al menos una de las AFIRMACIONES se ha de cumplir para que se ha
verdadero).

Operadores unarios
 ++ (Se incrementa el Valor X en uno).
 -- (Se disminuye el Valor X en uno).

Operadores ternarios
Los operadores ternarios necesitan tres pasos:
Comparación - Valor que se asigna a la variable Y si la comparación es verdadera o
falsa.
 ( ? - Esto es verdad) Operador de pregunta.
 ( : - Y si no es verdad).
Type Coercion
NaN -> Not a number (no es un numero).

Condicionales
 IF (Si es).
 ELSE (Sino es).
 ELSE IF (Sino sí)

o Sintaxis
if(condición) {
Acción
} else if () {
Anidación de condicionales
 } else {
}

Condicionales múltiples
SWITCH (condición) {
case "caso":
acción
break (Evita que se sigan realizando validaciones siguientes
y salga del Switch)
case "caso":
acción
break
default:
(valor por defecto)
}

Ciclos/Bucles/Loops de código
Hace referencia a bloques de código, que se van a ejecutar varias veces.
 FOR (palabra reservada para escribir un ciclo).

for (valor de inicialización; condición; incremento/decremento de valor) {

bloque de código
}
for (let i = 10; i < 10; i++) {
console.log(i)
}
.length  Devuelve la longitud/cantidad de caracteres que tiene.
¿¿Primera vuelta  i vale 0, i es menor que 10?? Si => console.log(i), i se incrementa y
ahora vale 1.
Ejercicio:
Dado un texto, deseamos imprimir su contenido letra por letra.
 Ejemplo: "Frances"
FRANCES
let texto = 'frances'
let valor = 0

for (let i = texto.length; i > 0; i--) {

console.log (texto [i - 1])
}

Ciclo While
¡Mientras! (siga siendo verdad).

Ejercicio: regalar juguetes

let juguetes = 10;

let a = 3

while (juguetes > 0) {

console.log (`regalamos un juguete, Nos queda ${juguetes}`)
juguetes-=a
}
Funciones
function ()
Las variables creadas dentro de una función, solo son utilizadas dentro de esa función, si
se utiliza afuera de la función dará error.

 Sintaxis
Declaración de la función Saludar
function saludar (nombre) {
if (typeof nombre === 'string') {
console.log (`Hola ${nombre} muy buenos dias`) Bloque de codigo
} else {
console.log ('Escribe un nombre correcto')
}
}

Llamar a la función
saludar (256)

Funciones - Valores de retorno

La sentencia RETURN finaliza la ejecución de la función devuelve un valor de esa
función y el código que esta después no se ejecuta.

Ejemplo 1:
function obtenernombrecompleto (nombre, apellidos) {
let nombrecompleto = `${nombre} ${apellidos}`
return nombrecompleto
}
console.log (obtenernombrecompleto ("frances", "sanchez p."));
Ejemplo 2:
const hola = function () {
 return function (nombre) {
nombre = "Frances";
console.log (`Hola ${lock}, ${nombre}`);
};
};

const mifuncion = hola ();

mifuncion ();

Funciones de Tipo Flecha == Arrow Function

 =>
Ejemplo:
const sumar = (a, b) => a + b;
console.log (sumar (5, 10));

Recorrer Array con un ciclo For

Métodos de Arrays

Método Array.prototype.push()
Permite agregar uno o más elementos al final de array del array y devuelve la longitud
de array.

Método Array.prototype.shift()
Elimina el primer elemento de un array y lo retorna. Este método modifica la longitud
de array original, sin la necesidad de pasarle ningún parámetro.
Método Array.prototype.unshift()
Agrega uno o más elementos al inicio del array y devuelve la nueva longitud del array.

Método Array.prototype.pop()
Elimina el último elemento de un array y lo devuelve. Este método cambia la longitud
del array, sin la necesidad de pasarle ningún parámetro.

Método Array.prototype.slice()
Devuelve una copia de una parte del array dentro de un nuevo array empezando por
inicio hasta fin (fin no incluido). El array original no se modificará
Método Array.prototype.forEach()

Necesita como parámetro una función e itera por cada elemento de mi array.
Método Array.prototype.map()
Tiene la misma funcionalidad que ForEach, pero tiene la cualidad de devolver un array
nuevo, almacenando datos con cada uno de los elementos que hace el ciclo.
Método Array.prototype.reduce()

Es un callback, el cual se va ejecutar por cada uno de los elementos del array.
Como parámetros tiene:
 PreviousValue  Valor Anterior.
 AccumulatedValue  Valor Acumulado.
 Index  El índice que tiene cada elemento del array.
 Array  El array completo.
Es recomendable no utilizar el método reduce() y solo utilizarlo en casos
excepcionales.
Las razones son: La cargar cognitiva, difícil de entender en primera instancia y no
tiene ventajas en el performance.

Método Array.prototype.filter()
Crea un nuevo array con todos los elementos que cumplan la condición implementada
por la función dada.

Método Array.prototype.indexOf()
Retorna el primer índice en el que se puede encontrar un elemento dado en el array, ó
retorna -1 si el elemento no está presente.
Como parámetro opcional esta la posición, desde donde va a buscar.
Método Array.prototype.lastIndexOf()
Devuelve el último índice en el que un cierto elemento puede encontrarse en el arreglo,
ó -1 si el elemento no se encontrara. El arreglo es recorrido en sentido contrario,
empezando por el índice fromIndex.
Como parámetro opcional esta la position, desde donde va a buscar.
Método Array.prototype.find()

Encuentra el primer dato que cumpla con la validación que nosotros pongamos como
parámetro en el método.
Método Array.prototype.findIndex()
Devuelve el índice del primer elemento de un array que cumpla con la condición. En
caso contrario devuelve -1.

Método Array.prototype.findLast()
Itera la matriz en orden inverso y devuelve el valor del primer elemento que satisface la
función de prueba proporcionada. Si ningún elemento satisface la función de prueba,
devuelve undefined.
Método Array.prototype.findLastIndex()
Itera la matriz en orden inverso y devuelve el índice del primer elemento que cumpla la
condición. Si ningún elemento satisface cumple con la condición da, se devuelve -1.

Método Array.prototype.includes()
Devuelve un tipo de dato booleano TRUE o FALSE y determina si una matriz incluye
un determinado elemento, también incluye un segundo parámetro opcional de la
position (desde donde va a buscar).
Método Array.prototype.some()

Valida si al menos algún elemento de un array cumple con una condición. Hace el break
en el primer TRUE
Método Array.prototype.every()
Validar si todos los elementos de un array cumplen con una condición. Hace el break en
el primer FALSE
Método Array.prototype.concat()
Se usa para unir dos o más arrays. Este método no cambia(muta) los arrays existentes,
sino que devuelve un nuevo array

Método Array.prototype.at()
Recibe un valor numérico entero y devuelve el elemento en esa posición, permitiendo
valores positivos y negativos. Los valores negativos contarán desde el último elemento
del array.

Método Array.prototype.flat()
Aplana un array anidado dentro del array superior y devuelve los elementos/items del
array anidado.

En el caso de que haya más de un sub-nivel de arrays anidados, se ha de especificar

dentro del método flat(), cuantos niveles se ha de aplanar, predeterminadamente solo
aplana un primer sub-nivel

Método Array.prototype.flatMap()
EL método flatMap(), primero mapea cada elemento usando una función de mapeo, luego
aplana el resultado en una nueva matriz.
Método Array.prototype.toString()
Devuelve una cadena de caracteres representando el array especificado y sus elementos.
Método Array.prototype.toLocalString()

Devuelve una cadena de texto representando los elementos del array. Los elementos son
convertidos a texto usando el método toLocaleString y dichos Strings son separados
por un carácter específico para la localidad (como una coma para la separación de
decimales “,”).

Método Array.prototype.keys()
Devuelve un nuevo objeto [Array Iterator] que contiene las keys de cada índice con
las que acceder a cada elemento en el array.

Método Array.prototype.values()
Retorna un nuevo objeto [Array Iterator] que contiene los valores para cada índice
del array.
Método Array.prototype.entries()
Retorna un nuevo objeto [Array Iterator] que contiene los pares clave/valor para cada
índice de la matriz.

Método Array.isArray()
Determina si el valor pasado es un Array y retorna TRUE si cumple, en caso contrario
FALSE.

Método Aray.prototype.reverse()
Invierte el orden de los elementos de un Array. El primer elemento pasa a ser el último
y el último pasa a ser primero. (Muta el array original)
Método Array.prototype.toReversed()

El método toReversed(), nos permite invertir el orden de un array. Devuelve un nuevo

array con los elementos invertidos y no modifica el array original.

Método Array.prototype.sort()
Ordena los elementos de un Array y devuelve el Array ordenado. La forma de ordenar
no es necesariamente estable. El método de ordenar por defecto responde a la posición
del valor del string de acuerdo a su valor Unicode.

Método Array.prototype.toSorted()
El método toSorted() nos permite ordenar un array. Devuelve un nuevo array con los
elementos ordenados sin modificar el array original. Igual que el método sort() clásico,
podemos pasarle una función de comparación para ordenar los elementos.

Método Array.prototype.splice()
El método splice(), cambia el contenido de un array eliminando elementos existentes
y/o agregando nuevos elementos. Devuelve un nuevo array con los elementos
eliminados/reemplazados modificando el array original.

Método Array.prototype.toSpliced()
El método toSpliced() nos permite eliminar o reemplazar elementos de un array.
Devuelve un nuevo array con los elementos eliminados/reemplazados sin modificar el
array original. Igual que el método splice() clásico, podemos pasarle un índice, un
numero de elementos a eliminar y opcionalmente, los elementos a reemplazar.

Método

Array.prototype.with()
Este método es muy interesante ya que viene a sustituir la asignación de un índice de un
array. Devuelve un nuevo array con el nuevo elemento asignado en la posición indicada
y no modifica el array original.
Método Array.from()
El método from() crea una nueva instancia de array a partir de un objeto iterable.

Métodos de Strings:

Método String.prototype.includes()
Determina si una cadena de texto puede ser encontrada dentro de otra cadena de texto,
devolviendo true o false según corresponda.

Método String.prototype.split()
Divide un objeto de tipo STRING en un array y los separa por medio de un separador
(‘’) que se le pasa como parámetro, dividiendo mi array en dos elementos, en dado caso
no se le pusiera ningún separador, este devuelve un array de una posición.
Método String.prototype.slice()
Sirve para modificar una cadena de texto, la cual extrae una parte de una cadena de
texto y devuelve una cadena nueva, como parámetros este método recibe 2 slice (desde
donde y hasta antes de).

Método Array.prototype.join()
Une todos los elementos de una matriz/array en una cadena de texto y devuelve esa
cadena, como parámetro este recibe un separador por ejemplo join(‘ ’), el cual separa mi
cadena de texto con un espacio.

Método String.prototype.startsWith()
Retorna (true) si la cadena que llama comienza con los caracteres de la cadena
especificada, y (false) en caso contrario.
Método String.prototype.endsWith()
Retorna (true) si la cadena que llama termina con los caracteres de la cadena
especificada, y (false) en caso contrario.

Método String.prototype.search()
Necesita una expresión regular (que es una serie de caracteres que simboliza algo que el
lenguaje entienda y realice una búsqueda).
Método String.prototype.toLowerCase()

Devuelve el valor en minúsculas de la cadena que realiza la llmadada

Método String.prototype.toUpperCase()
Transforma un tipo de dato string en mayúsculas

Método String.prototype.charAt()
Devuelve en un nuevo string el carácter UTF-16 de una cadena en el índice
proporcionado.

Método String.prototype.charCodeAt()
Devuelve un número indicado por el valor Unicode del carácter en el índice
proporcionado.
Método String.prototype.repeat()
Construye y devuelve un nuevo string que contiene el numero especificado de copias de
la cadena en la cual fue llamada, concatenados

Método String.prototype.trim()
Elimina los espacios que pueda tener una cadena, tanto en inicio de la cadena como
al final de esta.

Método String.prototype.trimStart()
Elimina los espacios que pueda una cadena solo al principio de la misma.
Método String.prototype.trimEnd()
Elimina los espacios que pueda tener una cadena solo al final de la misma.

Método String.prototype.replace()
Devuelve una cadena con algunas o todas las coincidencias de un patrón, siendo
cada una de estas coincidencias reemplazadas por reemplazo. El patrón puede ser
una cadena o una RegExp, y el reemplazo puede ser una cadena o una función que
será llamada por cada coincidencia. Si el patrón es una cadena, sólo la primera
coincidencia será reemplazada.

Método String.prototype.replaceAll()
Devuelve una cadena con todas las coincidencias de un patrón sustituidas por un
reemplazo. El patrón puede ser una cadena o un RegExp y el reemplazo puede ser
una cadena o una función a llamar por cada coincidencia. La cadena original no se
modifica.
Objetos Globales
Object.values()  Devuelve solo los valores de mi Objeto.

Object.keys()  Devuelve todas las llaves(keys) de mi objeto.

Object.entries()  Devuelve una matriz de pares de propiedades propias enumerables
[key, value] de un objeto dado, en el mismo orden que se proporciona en un bucle
for...in (la diferencia es que un bucle for-in enumera propiedades en la cadena de
prototipos).

Math
Nos permite calcular valores matemáticos.
Math.sort(parameter1, parameter2)
Función de comparación, ordena/desordena los elementos de un array

Math.random ()

Math.PI ()
Devuelve el valor de PI.

Math.max (valores)
Devuelve el valor más alto.

Match.min (Valores)
Devuelve el valor más bajo mínimo.

Date
Se crea una instancia de date para tener como valor la fecha y hora en tiempo real.

Intl
Objeto de ámbito global Intl es el espacio de nombres para el API de
Internacionalización de ECMAScript, éste provee comparación de cadenas y formato de
números, fechas y tiempos con sensibilidad al lenguaje.

Constructor del Objecto Intl

Intl.ListFormat()
Crea objetos que permiten el formato de lista sensible al idioma, recibe dos parámetros
el idioma y las options.
const formartter = new Intl.ListFormat('es', {style: 'narrow', type: 'unit'})

Propiedades del parámetro options

Type:
 Conjunction  Para la agrupación basada en "y" de los elementos de la lista:
"A, B y C" (predeterminado)
 Disjunction  Para la agrupación basada en "o" de los elementos de la lista:
"A, B o C"
 Unit  Para agrupar los elementos de la lista como una unidad (ni basados en
"y" ni en "o"): "A, B, C"

Style:
Indica el estilo de agrupación (por ejemplo, si se incluyen separadores de lista y
conjunciones). Valores posibles:

 "long": "A, B, and C" (default)

 "short": "A, B, C"
 "narrow": "A B C"

Método Intl.ListFormat().prototype.format()
El método format() devuelve una cadena con una representación específica del idioma
de la lista.
Método Intl.ListFormat().prototype.formatToParts()
El método formatToParts() devuelve una matriz de objetos que representan los distintos
componentes que pueden utilizarse para hacer formato a una lista de valores teniendo en
cuenta la localización.

Método Intl.ListFormat().prototype.resolvedOptions()
EL método resolvedOptions() devuelve un nuevo objeto con propiedades que reflejan
las opciones de formato de localización y estilo calculadas durante la construcción del
objeto Intl.ListFormat() actual.

El DOM - JavaScript
DOM (Document Objecto Model) - Modelo de objetos del documento.

¿Qué es el Documento?
Todo el HTML es un documento.

¿Qué es el Objeto?
Es un elemento independiente con propiedades y métodos.
Cada etiqueta HTML es un objeto, y un objeto puede tener HIJOS.

¿Qué es el Modelo?
Modelo se refiere a la estructura particular que tienen los objetos dentro del HTML.

Document  Variable global que representa un objeto que contiene todo lo que se ve
en la PAGINA WEB.
El DOM, no es parte de la especificación de JavaScript.
El DOM, es una web API.

¿Qué es el DOM?
DOM son las iniciales de Document Objet Model (modelo de objetos de documentos).

Métodos del Document

 document.styleSheets -> Muestra las hojas de estilos que tenemos vinculados.
 document.scripts -> Muestras los scripts que tenemos vinculados.
 document.doctype ->
 document.documentElement ->
 document.head -> Devuelve lo que hay en la etiqueta HEAD.
 document.charset -> Devuelve el UTF-8 o juego de caracteres del documento.
 document.title -> Devuelve lo que hay en la etiqueta TITLE.
 document.body  Devuelve el body.
o document.links -> Devueleve todos los links.
o document.images -> Devuelve todas las imagenes.
o document.getSelection() -> Permite obtener la selección.
o toString () -> Capturar la selección de un usuario.

 document.forms -> Devuelve los formularios.

NODOS
Son las etiquetas HTML, los atributos de las etiquetas, textos, comentarios también son
nodos, etc.

Toda etiqueta HTML es un elemento.

  Tipos de Nodos
o Si devuelve 1 es un elemento.
o Si devuelve 2 es un atributo.
o Si devuelve 3 es un texto.
o Si devuelve 8 es un comentario.

Seleccionar nodos
Con ID:
document.getElementByID(‘parámetro’)  Obtener su elemento x su ID.

Con Selectores CSS:

document.querySelector(‘parámetro’) o element.querySelector ()  Seleccionar un
elemento.
document. querySelectorAll(‘parámetro’) o element.querySelectorAll ()  Selecciona
varios elementos.
Tanto querySelector () como querySelectorAll () seleccionan con selectores de CSS.
Todos los selectores de CSS son válidos y no necesariamente parten del documento,
también podrán partir de un elemento cualquiera.

Colecciones
Diferencias entre Nodelist - HTMLCollection
Los nodos son atributos, textos, etc.
HTMLCollection son una lista de elementos(etiquetas).
Array.from  forma recomendada para convertir un nodelist en un array.
.trim()  Quita los espacios al inicio o final.

Opción 1:
const lists = Array.from(document.querySelectorAll("li"));

lists.map((el) => (el.style.backgroundColor = "yellow"));

Opción 2:
let lists = document.querySelectorAll("li");
for (let list of lists) {
if (list.textContent.trim().toUpperCase() === "DOCUMENT2") {
list.remove();
}
}

Atributos
getAttribute (parametroID) -> Obtener un atributo de mi etiqueta.

setAttribute (parametroID, parametrovalorID) -> Setear/definir un atributo "".

classlist -> Devuelve la lista de clases.

.add(parámetro, parámetro, etc.) -> añadir clases.
.remove() -> eliminar una clase.
title2.classList.remove ("parametroClass");
.toggle() -> añade o quita la clase según el caso.
title2.classList.toggle ("parametroClass ");
id ->
value -> se utiliza más para los inputs de los forms.

Contenido
Estas tres propiedades son de lectura y escritura.
textContent  Devuelve o añade contenido a un elemento.
innerHTML  Devuelve el HTML del elemento.
innText  Devuelve un texto.
outerHTML  Devuelve todo el elemento con su HTML en un string.

Crear Elementos
document.createElement ()  Crea elementos.
document.createDocumentFragment ()  Nos permite guardar elementos en memoria
antes de que se pinte en la WEB,
appenChild () -> Insertar un elemento en algún lugar del DOM, como último hijo de
otro.

Eventos
Un evento es algo que ocurre en la página.
Todos los eventos que comiencen con ON... son eventos.
onEvent
.addEventListener ()
Cada vez que se requiera información del objeto se pone un parámetro en la función.
(e.target), devuelve el elemento del DOM, donde se originó el evento.
Eventos de Mouse
 click  Captura el clic.
 dblclick  Detecta el doble clic.
 mouseenter  Cuando el mouse entra en el área de un elemento y es
equivalente al HOVER de CSS.
 mouseleave  Cuando sale del área del elemento y es equivalente al HOVER
de CSS.
 contextmenu  Captura el clic derecho.
 mousedown  Cuando haces clic y dejas presionado el clic.
 mouseup  Cuando haces clic y sueltas el clic.
 mousemove  Cuando el mouse se mueve dentro de un elemento.
e.preventDefault ()  Previene la acción predeterminada de un elemento para que no
se realice por ejemplo al enviar un formulario.
pageX - pageY  Son las coordenadas de donde ocurrió el evento del mouse.

Ejercicio: Menú contextual

const createmenu = (e) => {

const menu = document.createElement("div");
const prevmenu = document.getElementById("context-menu");
menu.id = "context-menu";
menu.textContent = "Soy un menuContextual";

if (prevmenu) document.body.removeChild(prevmenu);
document.body.appendChild(menu);

menu.style.padding = "1em";
menu.style.backgroundColor = "#eee";
menu.style.position = "fixed";
menu.style.top = `${e.pageY}px`;
menu.style.left = `${e.pageX}px`;
};
title.addEventListener("contextmenu", (e) => {
createmenu(e);
 e.preventDefault();
});

Eventos de teclado
 keydown  Cuando presionas una tecla.
 keyup  Cuando sueltas una tecla.
 keypress  Cuando dejas presionado una tecla.

Eventos de formulario
 submit  Se ejecuta, cuando el formulario se envía.
 change  Se ejecuta, cuando un input cambia de valor.
 focus  Se ejecuta, cuando haces clic en un input.
 blur  Se ejecuta, cuando sales del focus o del elemento.
 reset  Se ejecuta, cuando se resetea el formulario.

Eventos del DOM

 DOMContentloaded  Es un evento que ocurre cuando carga todo el DOM.
 Window  Objeto global de JS.

Eventos del navegador

 load  Ocurre cuando carga toda la página.
 scroll  Ocurre cuando haces scroll.
 resize  Ocurre cuando se redimensiona la pantalla.
Inner se refiere a la parte interna del navegador, la ventana o el viewport, y outer es
toda la ventana del navegador en el sistema operativo.

Eventos multimedia
 Play  Se ejecuta el vídeo.
 Pause  Se pausa el vídeo.

Propagación de eventos
Cada vez que ocurre un evento, este ocurre en el elemento más profundo del DOM, pero
se propagan hacia afuera, el término utilizado para esto es bubble.
Esto significa que cada vez que estás dentro de un elemento hijo de otro elemento, al
mismo tiempo estás entrando en ambos elementos.

Por ejemplo: Tienes un DIV padre en HTML y dentro tienes un DIV hijo y dentro de
este hijo tienes otro DIV hijo, si le das clic al último hijo que sería en este caso el
tercero, también le estarías dando clic al primer DIV que sería el padre.
e.stopPropagation() -> Detiene la propagación del evento.

Delegación de eventos
La delegación consta en detectar el evento en el elemento padre y luego detectar en cuál
de los elementos hijos se hizo el target.

Ejemplo:
const gallery = document.getElementById("gallery");

gallery.addEventListener("click", (e) => {

const img__items = Array.from(gallery.querySelectorAll("img")),
img = img__items.indexOf(e.target);
console.log (`Hicistes click en la imagen ${img + 1} `);
});

Recorrer y transformar el DOM

DOM traversing -> Recorrer el DOM
 Hijos:

o childNodes  Devuelve todos los nodos hijos.

o children  Devuelve solo elementos hijos.
o firstChild  Devuelve un nodo (podría ser un elemento o texto).
o firstElementChild  Devuelve el primer elemento(hijo).
o lastChild  Devuelve el ultimo nodo(hijo).
o lastElementChild  Devuelve el último elemento(hijo).
o hasChildNodes ()  Método que devuelve TRUE, si el elemento
seleccionado, contiene hijos.
  Hermanos:

o nextSibling -> Devuelve el siguiente nodo hermano.

o nextElementSibling -> Devuelve el siguiente elemento hermano.
o previousSibling -> Devuelve el anterior nodo hermano.
o previousNextSibling -> Devuelve el anterior elemento hermano.

 Padre:

o parentNode -> Devuelve el nodo que se ha padre.

o parentElement -> Devuelve el elemento padre.

Insertar Elementos
 appendChild ()  Inserta un elemento al final de otro.
 insertBefore(newElement,nextnodeExistente)  Inserta un elemento antes del
otro nodo ya existente.
 insertAdjacent ()  Coges un elemento e inserta un hijo(elemento),
indicándoles uno de los siguientes métodos y posiciones.

 Metodos:
o insertAdjacentElement (posición, el).
o insertAdjacentHTML (posición, html).
o insertAdjacentText (posición, text).

 Posiciones:
o beforebegin (hermano anterior)  Se inserta antes de que comience el
elemento.
o afterbegin (Primer hijo)  Se inserta, después de que comience el
elemento.
o beforeend (Ultimo hijo)  Se inserta, antes de que acabe su ultimo hijo.
o afterend (Hermano siguiente)  Se inserta, después de que acabe su
ultimo hijo.

Reemplazar hijos
o replacechild (newchild, oldchild) -> Remplazar un hijo x uno nuevo.
Ejemplo:
Métodos de JQuery
 before (hermano anterior).
 after (hermano siguiente).
 prepend (primer hijo).
 append (último hijo).
 child (hijo).replaceWith(newchild).

Clonar
 cloneNode(true)  Sacar una copia de un elemento y TRUE para capturar
también los hijos de este elemento.
 remove ()  Eliminar ese elemento.

Template (html)
 template  Etiqueta para crear plantillas en HTML.

CSSOM (CSS)
¿Qué es CSSOM?
Es el modelo de objeto de CSS, es equivalente al DOM, pero en CSS. Esto te permitirá
modificar CSS desde JavaScript.
 style  Inserta estilos css a un elemento del HTML.
 matchMedia ('(min-width: valor) and '(orientación: valor)')  Insertar
mediaquerys.
 getComputedStyle ()  Se obtiene todos los estilos calculados de un elemento.
 getBoundingClientRect ()  Devuelve la posición del elemento, coordenadas,
tamaños, posiciones.
o naturalWidth ()  Devuelve el tamaño(width) original de la imagen.
o naturalHeight ()  Devuelve el tamaño(height).

JS En el navegador
El objeto window, es el objeto de más alto nivel en JS en el navegador.
Todos los objetos descienden de WINDOW.

Objetos:
 console  Imprime en consola información.
 navegator  Devuelve información sobre el navegador.
 location  Devuelve información de la URL que se está actualmente.
 history  Devuelve información del historial del navegador.
 screen  Devuelve el alto y el ancho del navegador.

Métodos:
 Open ('url', 'name', 'propertis')  Permite abrir una nueva instancia del
navegador.
 Close ()  Solo funciona en ventanas que se han abierto con OPEN ().
 Alert (message)  Manda un mensaje
 Confirm (message)  Muestra un modal de confirmación y devuelve TRUE o
FALSE.
 Prompt (message)  Mandar un mensaje y guarda la información en una
variable.

Objeto Location - Devuelve información de la URL.

 Propiedades:
o href  Devuelve la URL actual, se puede reemplazar para cambiar la
página actual.
 o host  Devuelve el dominio + puerto.
o hostname  Devuelve el dominio.
o port  Devuelve el puerto.
o protocol  Devuelve el protocolo (http o https).
o origin  Devuelve el protocolo + dominio.
o hash  devuelve el #.
o pathname  Devuelve la ruta interna luego del dominio.

 Métodos:
o reload ()  Recarga la página.
o assign (url)  Cambia la página actual.
o replace (url)  Cambian la página actual sin guardar en HISTORY del
NAVEGATOR.

Objeto History - Contiene el historial de navegación de la pestaña actual.

 Propiedades
o length (devuelve la cantidad de elementos incluye la página actual).

 Métodos:
o Back ()  Te manda atrás.
o Forward ()  Te manda adelante.
o go(position)  Devuelve la posición que se indique, siendo -1 back y 1
forward.

Objeto navigator
 Detectar navegador.
No es buena idea son estilos de los 90’s – 2000’s.

 Detectar características CSS

@supports  condicional para saber si el navegador soporta X propiedad.
 JAVSCRIPT
operador in
 MODENIZR -> Librería que permite detectar si un navegador tiene
características que se usa para mandar sms al usuario o validar.

Timers
  setTimeout(callback,ms)  Ejecuta lo que hay en el CALLBACK, después de
cierta cantidad de Milisegundos.
 setInterval(callback,ms)  Ejecuta acciones que se repitan periódicamente.
 clearInterval(interval)  Eliminar el intervalo.

DATE - objeto que obtiene las fechas del S.O.

 Instancia:
o new Date ().
o Date (Year,month,day)  Meses de 0 a 11.
o new Date (Year,Month, Day, Hour, Mints, Seconds).
o new Date(string).
 Métodos:
o getFullYear () -> Devuelve el año.
o getMinutes () -> Devuelve los minutos.
o getSeconds () -> Devuelve los segundos.
o getDate () -> Devuelve el día actual del mes de 0 a 30.
o getDay () -> Devuelve el día de la semana de 0 a 6.
o getMonth () -> Devuelve los meses de 0 a 11.
o getTime () -> Devuelve los milisegundos desde el 1 de enero de 1970.
o getTimeZoneOffset () -> Devuelve la diferencia de tu zona horaria al
Meridiano de Greenwich que es la referencia de zona horaria para todos
los países.

POO (Programación Orientada a Objetos)

¿Qué es la POO?
Los objetos tienen datos y funcionalidad.
Los datos en POO, son atributos.
La funcionalidad, son métodos.

Atributos ejemplo Métodos ejemplo

Nombres. Iniciar sesión.
Apellidos. Cerra Cesión.
Correo. Editar perfil.
Contraseña. Cambiar contraseña.
Premium. Pasar a premium.
Publicar en comunidad.

CLASE: Es una plantilla, la cual crea nuevos objetos y a ello se le llama

INSTANCIAR.
INSTANCIAR: Crear un objeto a partir de una CLASE.
La POO se basa en 4 pilares:
Abstracción. - Son los atributos y los métodos que va tener la Clase.
Encapsulamiento. – La protección de la información de manipulaciones no autorizadas.
Polimorfismo. – Dar la misma orden a diferentes objetos y que cada uno de ellos
responda con su propia manera.
Herencia. – Aprovechar las funcionalidades y atributos de la clase padre con el añadido
que las clases hijas tendrán sus propios atributos y métodos.

La base de la POO es la abstracción

Función constructora
Con la función constructora, podrás determinar un molde con el cual podrás definir los
atributos que se necesiten al momento de crear un objeto determinado.

¿Cómo declarar una función constructora?

Para crear una función constructora, se utiliza la palabra reservada function y el nombre
de la función comenzando con mayúscula y en singular. Toda función puede contener
parámetros los cuales son opcionales.

Ej: function Usuario(parametro1, parametro2, parametro3, ...) {

Se le llama valor quemado a aquel que se coloca directamente al momento de llamar al

objeto.

Se le llama valor dinámico a aquel que se trae de los parámetros del objeto.

¿Cómo llamar los atributos del objeto?

Para llamar los atributos, se utilizará la nomenclatura punto.
Ej: function Usuario(parametro1, parametro2, parametro3, ...) {

//Atributos
`this.parametro1 = parametro1,`
this.parametro2 = parametro2,

this.parametro3 = parametro3

Es una buena práctica al momento de llamar los atributos del objeto, colocarle los
mismos nombres de los parámetros del objeto a los atributos.

¿Cómo llamar una función constructora?

Para ejecutar la función utilizarás la palabra reservada new seguida del nombre de la
función y entre paréntesis (), los atributos que pide esta función. También se puede
guardar estos valores en una variable y al llamar esta variable se ejecutará tu objeto.

Ej: new Usuario() Dentro de los paréntesis colocarías el contenido de cada parámetro
separado por comas (,).

La función constructora te servirá para construir objetos, pero también para seguir un
molde definido el cual te determinará cuáles atributos se utilizarán para crear un objeto.

A partir de la función constructora, podrás crear todos los objetos que sean necesarios.

Clases
La programación orientada a objetos permite escribir Clases que van a ser los moldes y,
a partir de estas clases podrás crear los objetos que necesites.

Diferencias entre la nomenclatura de la Función Constructora y las Clases.

Para escribir una clase, utilizarás la palabra reservada class y el nombre de la clase.
Luego dentro de la clase se encuentra lo que se llama el método constructor el cual
recibe los parámetros entre paréntesis (). El método constructor recibirá los mismos
parámetros de la función constructora anteriormente creada.

¿Qué son las instancias?

Son objetos que fueron declarados a partir de una clase. El método constructor permitirá
definir los atributos que tendrá este objeto.

Métodos

Un método siempre se deberá retornar un valor y luego se podrá ejecutar ese valor.

Ej: nombreDelMetodo() {

return Lo que se quiere retornar

¿Qué son los métodos getters y setters?

GET = obtener
SET = dar

Método getters.
Para acceder a los atributos deberás tener un método que se llamará
getNombreAtributo() este método funcionará para retornar el valor del atributo. De esta
manera estarás obteniendo atributos que son privados de la clase y a partir del método
getNombreAtributo() lo estarás convirtiendo en accesible.

Ej: getNombreAtributo() {
return this.parametro1
}
Método setters.
Para cambiar el valor de un atributo deberás tener un método que se llamará
setNombreAtributo () y entre los paréntesis colocar donde se guardará el nuevo valor
que recibirá este método. En sí, el método funcionará para recibir el valor de un atributo
y cambiarlo a un nuevo valor.

Ej: setNombreAtributo(nuevoAtributo) {
this.parametro1 = nuevoAtributo
}

getters y setters son regla de oro en la POO.

Herencia
La herencia en programación viene literalmente del verbo heredar.

Cuando existen atributos que se pueden compartir entre diferentes objetos, pero otros
atributos que son específicos para un objeto, deberás crear una nueva clase para cada
objeto que necesite un atributo específico.

¿Cómo utilizar la herencia?

Para heredar atributos de una clase que ya existe, al método constructor de la nueva
clase le pasarás todos los atributos que este necesite, pero ya no serán creados en su
método constructor, también deberás decirle a la nueva clase utilizando la palabra
reservada extends más el nombre de la clase de donde vas a heredar, esto indicará que a
la vez de la nueva clase ser diferente, también será igual a la clase de la cual heredo.

Pero esto no será suficiente para heredar todos los atributos de la clase existente, para
esto en la nueva clase dentro de la función constructora deberás utilizar el método
super() y entre paréntesis colocar los atributos necesarios.

Con el método super() le indicarás a la clase de la cual te estás extendiendo que también
traiga a la nueva clase esos atributos.

¿Cómo exportar un archivo .js?

Con export default escrito delante de la clase, podrás exportar la clase para que esta
pueda ser reconocida e importada en tu archivo index.js

¿Cómo importar un archivo .js?

En tu archivo index.js realizarás lo siguiente: import más el nombre de la clase que se
importará, from y entre comillas le indicarás de cuál carpeta y cuál archivo importarás.

EJ: import Clase from ".classes/Curso"

No es necesario colocarle al archivo la extensión .js sin embargo, si tienes levantado tu

proyecto con liveserver deberás colocarle la extensión .js

Pero ojo! Todavía está importación no funcionará hasta colocar en tu HTML a la

etiqueta script el tipo del archivo como módulo.

EJ: <script type="module" src="index.js"></script>

Como buena práctica colocar los métodos getters y setters para cada atributo de cada
clase.

Spread Operator
Permite copiar los datos de un array de objetos en una sola línea.

WordPress:
https://cocinero.helefantest.com/
User: adminHelefate
Pass: U0%!9HhsYDo&*HX145

Fotos:
http://quickconnect.to/helefante
User: Tamer
Pass: UXs8ovUt6MRjZtQjjubxnw
Marc Martínez
Developer