Terminologías y definiciones

• Polyfill es un código que provee funcionamiento de una caracteristica nueva de es6 a una vieja
• Datos primitivos: Información que no son un objeto y que es inmutable, hay 6 tipos de datos primitivos en js:

  Primitivos

  1. Booleano: true or false
  2. Null: sin valor, si usas typeof, te dirá que es un objeto
  3. Undifined: existe la variable pero no se le ha asignado un valor
  4. Number: números enteros o decimales(integers or floats)
  5. String: Cadenas de caracteres(palabras etc)
  6. Simbols: un tipo de dato que no puede ser igual a ninguno, un un valor UNICO(se usan en objetos)

Operadores de comparación

• No es igual (!=) Devuelve true si los operandos no son iguales.
• tricta (!==) Devuelve true si los operandos son del mismo tipo pero no iguales, o son de diferente tipo.

• Lógica booleana

  1. false es false
  2. true es true
  3. !false es true
  4. !true es false
  5. !!true es true
  6. !!false es false

  7. También se puede negar una función, ejemplo

     let caja = () => {

     console.log("Regresa falso");

     return false;

     }

     console.log(!caja());

  8. && ó AND ambas deben de ser ciertas para que de TRUE
  9. true && true da true
  10. true && false da false

  11. OJO: si Javascript nota que el primer resultado dará false, ya no seguirá revisando más cosas, por eso primero pon el true, se usa mucho cuando quieres ejecutar funciones de manera condicional

      let box = () => {

      console.log("Regresa true");

      return true;

      }

      let caja = () => {

      console.log("Regresa falso");

      return false;

      }

      console.log(caja() && box());

  12. OR ó ||al menos una condición debe de ser verdad

  13. Ejercicio capcioso con AND y OR

      const soyUndifined = undefined;

      const soyNull = null;

      const soyFalso = false;

      const a1 = true && 'Hola mundo';

      //evalua primero que sea true y como si es true, pasa al segundo valor y lo imprime,osea se le asigna ese valor, EL UÚLTIMO VALOR

      const a2 = true && 'Hola mundo' && 150;

      //Se le asigna el último valor, que no sea negativo

      const a3 = true && 'hola mundo' && 150 && soyNull;

      const a4 = true && 'hola mundo' && 150 && soyUndifined;

      //Pero si hay un valor falso, lo imprime aunque no sea el último

      const a5 = true && 'hola mundo' && soyFalso && 150 && soyUndifined;

      //Pero si es con OR, buscará al menos un true o un valor sin detenerse en el primer valor aunque sea false, e imprimira el último valor

      const a6 = soyFalso || 'Ya no soy falso';

      //Imprime el último valor aunque sea un null o undifined

      const a7 = soyFalso || soyUndifined;

      const a8 = soyFalso || soyUndifined || soyNull;

      //Pero si encuentra un valor anterior al true, DISTINTO de null o undifined, pondrá ese valor

      const a9 = soyFalso || "texto" || true;

      console.log(a9);
• Deestructuración: una expresión que permite asignar valores a nombres conforme a una estructura de tabla dada. Ejemplo:
  

  Deestructuración con un objeto RESUMIDO

  const persona = (nombre, apellido) =>

  ({ nombre, apellido })

  const { nombre: nombreNuevo } = persona('Ricardo', 'Garrido');

  console.log({ nombreNuevo });

  Se pueden reestructurar arrays y objetos, ambos pueden tener valores por defecto en ambos, solo que en el objeto, el valor por defecto se pone en la función

  Deestructuración con un objeto imprimiendo con una función

  let usuario = {

  nombre: 'Ric',

  apellido: 'gARRido',

  edad: 33,

  pais: 'mexaland'

  }

  let { nombre, apellido } = usuario;

  let imprimir = ({ nombre, profesion = 'developer' }) => {

  console.log(`Mi nombres es ${nombre} y soy ${profesion}`);

  }

  imprimir(usuario);

• Parametros REST: Es una sintaxis, cuando lo pongo como argumento dentro de una función, ES UN PARAMETRO REST, y quiere decir "Une todos los argumentos en una sola variable y transformalo como un areglo"
• Parametros Spread: Cuando utilizas los tres puntos fuera de una funcion(EN CUALQUIER LUGAR), es un parametro SPREAD y simboliza, "separa los elementos", la ventaja es que rompe la referencia de Javascript y así podemos trabajar con objetos y hacer igualaciones que apunten a diferentes espacios en memoria
  Ejemplo:
  

  Esto sobre escribe el valor en ambos objetos, esto es un problema

  let juan = { nombre: 'Juan' };

  let ana = juan;

  ana.nombre = 'Ana';

  console.log(juan, ana);

  Aquí lo resolvemos apuntando a otro espacio en memoria

  let juan = { nombre: 'Juan' };

  let ana = {...juan };

  ana.nombre = 'Ana';

  console.log(juan, ana);

  ---

  Ejemplo 2:

  Esto sobre escribe el valor en ambos objetos, esto es un problema

  const cambiarNombre = (persona) => {

  persona.nombre = 'Tony'

  return persona;

  }

  let peter = { nombre: 'Peter' };

  let tony = cambiarNombre(peter);

  console.log(peter, tony);

  Esto sobre escribe el valor en ambos objetos, esto es un problema

  const cambiarNombre = ({...persona }) => {

  persona.nombre = 'Tony'

  return persona;

  }

  let peter = { nombre: 'Peter' };

  let tony = cambiarNombre(peter);

  console.log(peter, tony);

  ---

  Ejemplo 3: con arreglo

  Esto sobre escribe el valor en ambos arreglos, esto es un problema

  const frutas = ['Manzana', 'Pera', 'Piña'];

  const otrasFrutas = frutas;

  otrasFrutas.push('Mango');

  console.table({ frutas, otrasFrutas });

  Aquí ya no sobreescribe el valor

  const frutas = ['Manzana', 'Pera', 'Piña'];

  const otrasFrutas = [...frutas];

  otrasFrutas.push('Mango');

  console.table({ frutas, otrasFrutas });

• Callback: Una función que se coloca como argumento a otra función(Explicacion FH) Es un función que se pasa como argumento a un operación asincrona, con la espectativa de que dicha función sea ejecutada una vez esta termine(Explicacion Uriel CF)
  

  Definicion sencilla de un callback Es una función que nos permite recibir como parametro otra función, es una función que se pasa a otra función como argumento, son una forma de asegurarnos que un determinado codigo no se ejecute hasta que un determinado codigo allá terminado de ejecutarse

• Promesas: es un objeto que puede producir un valor único en algún momento en el futuro: un valor resuelto o una razón por la que no se resuelve. Ejemplo:

  Crea una promesa

  const promesa = new Promise((resolve, reject) => {

  $caja = false;

  if ($caja) {

  resolve();

  } else {

  reject();

  }

  });

  promesa.then(() => {

  alert("Exito!");

  }).catch(() => {

  alert("No funciono!");

  });

• endpoint: es la PUTA URL, cuando estamos hablando de APIs

Datos curiosos

• El undifened, de las funciones de JS aparece por que las funciones de Javascript tienen por default un return
• En console.log("hola mundo"); console es un objeto y .log es un metodo(una función dentro de un objeto)
• Cambiando colores en consola, console.log('%c mis variables','color:blue;');
• Con console.table({a,b,c}); puedes imprimir los valores en una tabla en la consola
• En Javascript, cualquier variable que no esté inicializada, tiene el valor de undifined
• Depende donde quieras ejecutar Javascript es si funcionara o no, prompt o confirm, no funcionaran si ejecutaras tu programa en la consola con Node, pero si quieres imprimir la varible "global" en tu programa, Node te mostrará todo lo que tiene, ahora, prompt y confirm, funcionaran sin problema en el navegador
• Null: sin valor, si usas typeof, te dirá que es un objeto
• Las variables no pueden empezar con números ó caracteres raros tampoco ponerle puntos
• Es muy raro tener 3 niveles dentro de arrays
• Toda función devuelve "UNDIFINED", porque todas las funciones tienen un "return aunque no este escrito" cuando se tiene una función y no tiene un return "específico", devolverá "undifined"
• Si quieres devolver 2 valores, tendras que volverlo array:

  let nombre = (nombre) => {

  console.log(nombre);

  return [1, 2];

  }

  const almacen = nombre("Ricardo");

  console.log(almacen[0], almacen[1]);

• Diferencias entre ES6, ES7, ES8, ES-NEXT
  
  • ES6: Agrega las funciones flecha y otras funciones, algunas funciones deben ser transpiladas con BabelJS
  • ES7: Incluye nuevas funciones
  • ES8: Se agregan funciones Async/Await
  • ES-Next: Versión en desarrollo, nunca es liberada
• JavaScript es el lenguaje y EcmaScript las especificaciones que uno debe de seguir
• NodeJS es una plataforma hecha en JS utilizada par aplicaciones en servidores
• document: cuando imprimes document en la consola del navegador te muestra todo lo que tienes en tu html, es por eso que la función .getElementById('') te ayuda a seleccionar un ID de tu documento ó un una etiqueta usando .querySelector('h1')
• Let: para sobre-Escribir un Let, tienes que hacer esto:
  let perro = 'firulais';
perro = 'solovino';
• Poner comillas en el texto: \'
• Otra manera de crear un array

  let meses = new Array('Enero', 'Febrero', 'Marzo');

  console.log(meses);

• const cuando tiene dentro un arreglo, puede modificarse un espacio del arreglo pero no el arreglo entero
• const las constantes con obj dentro, si se pueden cambiar sus valores

Buenas practicas

• No usa VAR para declarar variables, usa let, esto debido a que cuando utilizamos var lo esta colocando dentro de un objeto global llamado window donde te muestra las capacidades que tiene cada navegador web, puedes probarlo en la consola de cada navegador, escribiendo la palabra window, y ahí aparecera la variable que hayas escrito con var, esto te perjudica en que pudieses sobre escribir algún metodo, y eso ocasionará errores en tu proyecto y no sabrás que tendrás mal y esos errores son muy difíciles de rastrear
• El orden de como importas los archivos si importa
• Deshabilitar el cache, click derecho en chrome, inspeccionar>network> click en disable cache
• let y const no se puede sobreescribir las variables ó constantes que se encuentran en el objeto global a menos que le agregues datos a una costante que contenga array u objeto y las constantes se tienen que declarar con un dato , no se pueden dejar vaciaswindow
• Evita usar como variables, palabras reservadas, aquí dejo una lista
• Let: para sobre-Escribir un Let, tienes que hacer esto:
  let perro = 'firulais';
perro = 'solovino';
• Poner comillas en el texto: \'
• Usar comillas inversas para poder usar template strings, una ventaja es que respeta la identación,saltos y espacios, esto ayudara a que en los proyectos generes codigo dinámico.
• === acostumbrarme a usarlo en los if

Aprendizaje

• Lógica, gramatica y sintaxis, para sacarle el máximo provecho al lenguaje
• Sacarle el máximo a lo mínimo que tengas, y ver las cosas con humildad, eso te hace sentir bien al ver lo mucho que avanzas con tan poco.
• Los últimos serán los primeros, la humildad me mantendra.
• La sabiduría se consigue con la disciplina
• -dedicar mi vida a la sabiduria, incluso en la biblia dice que vale más un buen nombre que el dinero... Es muy probable que sea cierto, porque ya he visto eso en muchos hombres ricos y poderosos

Datos varios

• Funcion expresada las que se guardan dentro de una variable o constante y se llaman así funcionDentroDeVariable(); pero solo se pueden ejecutar debajo de donde comenzaste a escribir la función
• Funcion declarada son las normales, ya conocidas y se pueden ejecutar en cualquier parte del archivo, inicio, final, en medio etc
• Array otra forma de crear un array es la siguiente let cadena = Array.of("hola", 2, true, [1, 2, "mundo"]);
• if-else corto se llama formalmente "operador ternario" let eresMayor=(edad >= 18) ? "eres mayor de edad" : "Eres menor de edad";
• while y while están cayendo mucho en desuso, se usan más en programación estructurada
• For in sirve para recorrer arreglos

  let objeto = {

  nombre: "Ric",

  apellido: "Garrido",

  Edad: 33

  }

  for (const propiedad in objeto) {

  console.log(`Key: ${propiedad} --- Value: ${objeto[propiedad]}`);

  }

• for of recorre la cadena de texto, array u objeto

  let texto = "ric";

  let cadena = [1, 2, 3, 4, 5];

  for (const iterator of cadena) {

  console.log(iterator);

  }

• DESTRUCTURACION se usa mucho en REACT JS
• REST & SPREAD se usan mucho en Angular, React y Vue
• this Al usar las arrow functions y this, heredan el contesto del padre, ejemplo:

  const perro = {

  nombre: "kenai",

  ladrar: () => {

  console.log(this);

  }

  }

Evitaran errores

• No puedes usar una variable antes de inicializarla
• Evita usar como variables, palabras reservadas, aquí dejo una lista
• Toda función devuelve "UNDIFINED", porque todas las funciones tienen un "return aunque no este escrito" cuando se tiene una función y no tiene un return "específico", devolverá "undifined"
• Si quieres devolver 2 valores, tendras que volverlo array:

  let nombre = (nombre) => {

  console.log(nombre);

  return [1, 2];

  }

  const almacen = nombre("Ricardo");

  console.log(almacen[0], almacen[1]);

• parametros rest: no pueden llevar nada después de ellos y sirven para poder mostrar varios datos como un array, EJEMPLO:

  let persona = (nombre, ...args) => {

  return [nombre, args];

  }

  console.log(persona("Ricardo", true, 32, ["Perro", "Canada"]));

• En Javascript, todos los objetos son pasados por referencia, Todos los primitivos son pasados por valor
• No puedes sobreescribir una variable let ni un const
• No podemos acceder a variables let, dentro de una función
• En Javascript todos los objetos son pasados por referencia
• En javascript todo es un objeto excepto los primitivos
• Parametros REST: Es una sintaxis, cuando lo pongo como argumento dentro de una función, ES UN PARAMETRO REST, y quiere decir "Une todos los argumentos en una sola variable y transformalo como un areglo"
• Parametros Spread: Cuando utilizas los tres puntos fuera de una funcion(EN CUALQUIER LUGAR), es un parametro SPREAD y simboliza, "separa los elementos", la ventaja es que rompe la referencia de Javascript y así podemos trabajar con objetos y hacer igualaciones que apunten a diferentes espacios en memoria
  Ejemplo:
  

  Esto sobre escribe el valor en ambos objetos, esto es un problema

  let juan = { nombre: 'Juan' };

  let ana = juan;

  ana.nombre = 'Ana';

  console.log(juan, ana);

  Aquí lo resolvemos apuntando a otro espacio en memoria

  let juan = { nombre: 'Juan' };

  let ana = {...juan };

  ana.nombre = 'Ana';

  console.log(juan, ana);

• Let: para sobre-Escribir un Let, tienes que hacer esto:
  let perro = 'firulais';
perro = 'solovino';
• Poner comillas en el texto: \'
• Algebra:Multiplicaciones y divisiones primero, luego sumas y restas

• Valores boleanos

  0 = false

  -7 = true

  "" = false

  " " = true

  null = false

  undifined = false

  = true

  {} = true

  [] = true

  infinite = true

  -infinite = true

  new Date() = true

  NaN = false

Funciones para STRINGS

• concat une los caracteres
  

  const producto = 'Monitor 20 Pulgadas';

  const precio = '38USD'

  console.log(producto.concat(precio));

• length cuenta los caracteres que tiene
  

  const producto = 'Monitor 20 Pulgadas';

  console.log(producto.length);

• indexOf busca el texto en la cadena de texto, y te dice en que posición se encuentra, si arroja -1, quiere decir que no lo encontro
  

  const producto = 'Monitor 20 Pulgadas';

  console.log(producto.indexOf('Pulgadas'));

• includeste arroja true or false si es que existe la palabra que estás buscando
  

const producto = 'Monitor 20 Pulgadas';

console.log(producto.includes('Pulgadas'));

Tipos de datos

• Strings: cadenas de texto
• Null: significa que no tiene nada ahí dento, NO ES LO MISMO QUE UNDIFINED, no lo confundas
• Boleano: es true ó false
• undifined: indefinido, que no se le ha agregado un valor
• Number: números enteros o decimales(integers or floats)

Operadores

• += : te suma el valor a tu variable
  

  let caja = 4;

  caja += 3;

  console.log(caja);

• -= : te resta el valor a tu variable
  

  let caja = 4;

  caja -= 3;

  console.log(caja);

• if-else corto se llama formalmente "operador ternario" let eresMayor=(edad >= 18) ? "eres mayor de edad" : "Eres menor de edad";

Parametros REST & SPREAD

• REST Es una sintaxis, sirve para ir agregando datos, cuando lo pongo como argumento dentro de una función, ES UN PARAMETRO REST, y quiere decir "Une todos los argumentos en una sola variable y transformalo como un areglo"
• SPREAD Sirve para separar los datos, Cuando utilizas los tres puntos fuera de una funcion(EN CUALQUIER LUGAR), es un parametro SPREAD y simboliza, "separa los elementos", la ventaja es que rompe la referencia de Javascript y así podemos trabajar con objetos y hacer igualaciones que apunten a diferentes espacios en memoria
• parametros rest: no pueden llevar nada después de ellos y sirven para poder mostrar varios datos como un array, EJEMPLO:

  let persona = (nombre, ...args) => {

  return [nombre, args];

  }

  console.log(persona("Ricardo", true, 32, ["Perro", "Canada"]));

• Parametros Spread:
  Ejemplo:
  

  Esto sobre escribe el valor en ambos objetos, esto es un problema

  let juan = { nombre: 'Juan' };

  let ana = juan;

  ana.nombre = 'Ana';

  console.log(juan, ana);

  Aquí lo resolvemos apuntando a otro espacio en memoria

  let juan = { nombre: 'Juan' };

  let ana = {...juan };

  ana.nombre = 'Ana';

  console.log(juan, ana);

• DESTRUCTURACION se usa mucho en REACT JS
• REST & SPREAD se usan mucho en Angular, React y Vue
• this Al usar las arrow functions y this, heredan el contesto del padre, ejemplo:

  const perro = {

  nombre: "kenai",

  ladrar: () => {

  console.log(this);

  }

  }

• Parametros REST: Es una sintaxis, cuando lo pongo como argumento dentro de una función, ES UN PARAMETRO REST, y quiere decir "Une todos los argumentos en una sola variable y transformalo como un areglo"
• Parametros Spread: Cuando utilizas los tres puntos fuera de una funcion(EN CUALQUIER LUGAR), es un parametro SPREAD y simboliza, "separa los elementos", la ventaja es que rompe la referencia de Javascript y así podemos trabajar con objetos y hacer igualaciones que apunten a diferentes espacios en memoria
  Ejemplo:
  

  Ejemplo 2:

  Esto sobre escribe el valor en ambos objetos, esto es un problema

  const cambiarNombre = (persona) => {

  persona.nombre = 'Tony'

  return persona;

  }

  let peter = { nombre: 'Peter' };

  let tony = cambiarNombre(peter);

  console.log(peter, tony);

  Esto sobre escribe el valor en ambos objetos, esto es un problema

  const cambiarNombre = ({...persona }) => {

  persona.nombre = 'Tony'

  return persona;

  }

  let peter = { nombre: 'Peter' };

  let tony = cambiarNombre(peter);

  console.log(peter, tony);

  ---

  Ejemplo 3: con arreglo

  Esto sobre escribe el valor en ambos arreglos, esto es un problema

  const frutas = ['Manzana', 'Pera', 'Piña'];

  const otrasFrutas = frutas;

  otrasFrutas.push('Mango');

  console.table({ frutas, otrasFrutas });

  Aquí ya no sobreescribe el valor

  const frutas = ['Manzana', 'Pera', 'Piña'];

  const otrasFrutas = [...frutas];

  otrasFrutas.push('Mango');

  console.table({ frutas, otrasFrutas });

Objetos antiguos en javascript

• Los objetos de manera antigua en Javascript

  function animal(nombre, genero) {

  //Propiedades

  this.nombre = nombre;

  this.genero = genero;

  //Metodos

  this.sonar = function() {

  console.log("Hago sonidos porque estoy vivo");

  }

  }

  const snoopy = new animal("Snoopy", "Macho");

  const lolaBunny = new animal("Lola Bunny", "Hembra");

  console.log(snoopy);

• PROTOTYPE:Metodos agregados desde afuera, esto evita la duplicidad de metodos

  function animal(nombre, genero) {

  //Propiedades

  this.nombre = nombre;

  this.genero = genero;

  }

  //Metodos agregados desde afuera, esto evita la duplicidad de metodos en la función constructora

  animal.prototype.sonar = function() {

  console.log("Hago sonidos porque estoy vivo");

  }

  const snoopy = new animal("Snoopy", "Macho");

  const lolaBunny = new animal("Lola Bunny", "Hembra");

  lolaBunny.sonar();

Herencia prototipica en objetos antiguos de Javascripts

• HERENCIA PROTOTIPICA:Heredar las propiedades y metodos de otra funcion constructora

  function animal(nombre, genero) {

  //Propiedades

  this.nombre = nombre;

  this.genero = genero;

  }

  //Metodos agregados desde afuera, esto evita la duplicidad de metodos en la función constructora

  animal.prototype.sonar = function() {

  console.log("Hago sonidos porque estoy vivo");

  }

  const snoopy = new animal("Snoopy", "Macho");

  const lolaBunny = new animal("Lola Bunny", "Hembra");

  lolaBunny.sonar();

  -----------------------------------

  function perro(nombre, genero, tamanio) {

  //super sirve para invocar al constructor padre

  this.super = animal;

  this.super(nombre, genero);

  this.tamanio = tamanio;

  }

  perro.prototype = new animal();

  perro.prototype.constructor = perro;

  al igualarlo al mismo constructor, obtendra todo lo que hay en la funcion perro incluso los prototipos, como el .sonar que tiene

• HERENCIA PROTOTIPICA:Heredar las propiedades y metodos de otra funcion constructora

  function animal(nombre, genero) {

  //Propiedades

  this.nombre = nombre;

  this.genero = genero;

  }

  //Metodos agregados desde afuera, esto evita la duplicidad de metodos en la función constructora

  animal.prototype.sonar = function() {

  console.log("Hago sonidos porque estoy vivo");

  }

  const snoopy = new animal("Snoopy", "Macho");

  const lolaBunny = new animal("Lola Bunny", "Hembra");

  lolaBunny.sonar();

  -----------------------------------

  function perro(nombre, genero, tamanio) {

  //super sirve para invocar al constructor padre

  this.super = animal;

  this.super(nombre, genero);

  this.tamanio = tamanio;

  }

  perro.prototype = new animal();

  perro.prototype.constructor = perro;

  al igualarlo al mismo constructor, obtendra todo lo que hay en la funcion perro incluso los prototipos, como el .sonar que tiene

• SOBREESCRIBIENDO UN METODO HEREDADO DE UNA FUNCION(JAVASCRIPT VIEJITO)

  function animal(nombre, genero) {

  //Propiedades

  this.nombre = nombre;

  this.genero = genero;

  }

  //Metodos agregados desde afuera, esto evita la duplicidad de metodos en la función constructora

  animal.prototype.sonar = function() {

  console.log("Hago sonidos porque estoy vivo");

  }

  const snoopy = new animal("Snoopy", "Macho");

  const lolaBunny = new animal("Lola Bunny", "Hembra");

  lolaBunny.sonar();

  -----------------------------------

  function perro(nombre, genero, tamanio) {

  //super sirve para invocar al constructor padre

  this.super = animal;

  this.super(nombre, genero);

  this.tamanio = tamanio;

  }

  perro.prototype = new animal();

  perro.prototype.constructor = perro;

  al igualarlo al mismo constructor, obtendra todo lo que hay en la funcion perro incluso los prototipos, como el .sonar que tiene

• AGREGANDO UN METODO A UNA FUNCION HEREDADA

  function animal(nombre, genero) {

  //Propiedades

  this.nombre = nombre;

  this.genero = genero;

  }

  //Metodos agregados desde afuera, esto evita la duplicidad de metodos en la función constructora

  animal.prototype.sonar = function() {

  console.log("Hago sonidos porque estoy vivo");

  }

  const snoopy = new animal("Snoopy", "Macho");

  const lolaBunny = new animal("Lola Bunny", "Hembra");

  lolaBunny.sonar();

  -----------------------------------

  function perro(nombre, genero, tamanio) {

  //super sirve para invocar al constructor padre

  this.super = animal;

  this.super(nombre, genero);

  this.tamanio = tamanio;

  }

  perro.prototype = new animal();

  perro.prototype.constructor = perro;

  al igualarlo al mismo constructor, obtendra todo lo que hay en la funcion perro incluso los prototipos, como el .sonar que tiene

Clases y objetos en Javascript

• El constructor es un metodo especial que se ejecuta en el momento de instancia de la clase

• Propiedades y metodos estaticos: sirven para agregarle un valor a la clase fuera de una clase sin necesidad de instanciar la clase para crear un objeto. Ejemplo

  class Animal {

  //El constructor es un metodo especial que se ejecuta en el momento de instancia de la clase

  constructor(nombre, genero) {

  this.nombre = nombre;

  this.genero = genero;

  }

  //Metodos

  sonar() {

  console.log("Hago sonidos porque estoy vivo");

  }

  saludar() {

  console.log(`HOla me llamo ${this.nombre}`);

  }

  }

  class Perro extends Animal {

  constructor(nombre, genero, tamanio) {

  //Con el metodo super() se manda llamar al constructor de la clase padre

  super(nombre, genero);

  this.tamanio = tamanio;

  }

  sonar() {

  console.log("Soy un perro y mi sonido es un ladrido");

  }

  ladrar() {

  console.log("GUa gua");

  }

  static queEres() {

  console.log("Soy el mejor amigo del hombre");

  }

  }

  Perro.queEres();

• Getters y Setters son metodos especiales que nos permiten establecer y obtener los valores y atributos de nuestra clase. Los sets se acostumbra recibir un valor y no deben tener el mismo nombre que la propiedad que quieres modificar

• Ejemplo de Set:

  class Persona {

  nombre = '';

  codigo = '';

  codigo = '';

  frase = '';

  comida = '';

  constructor(nombre = 'sin nombre', codigo = 'sin codigo', frase = 'sin frase') {

  this.nombre = nombre;

  this.codigo = codigo;

  this.frase = frase;

  }

  //los sets se acostumbra recibir un valor y no deben tener el mismo nombre que la propiedad que quieres modificar

  set setComidaFavorita(comida) {

  this.comida = comida;

  }

  quienSoy() {

  return `soy ${this.nombre} y mi identidad es ${this.codigo}`;

  }

  otraFuncion() {

  return this.quienSoy();

  }

  }

  const spiderman = new Persona('ric', 'asd', 'hurra!');

  spiderman.setComidaFavorita= 'Los chilaquiles';

  console.log(spiderman);

• Ejemplo de Get:

  class Persona {

  nombre = '';

  codigo = '';

  codigo = '';

  frase = '';

  comida = '';

  constructor(nombre = 'sin nombre', codigo = 'sin codigo', frase = 'sin frase') {

  this.nombre = nombre;

  this.codigo = codigo;

  this.frase = frase;

  }

  //los sets se acostumbra recibir un valor y no deben tener el mismo nombre que la propiedad que quieres modificar

  set setComidaFavorita(comida) {

  this.comida = comida.toUpperCase();

  }

  //El get es para recuperar un valor

  get getComidaFavorita() {

  return `La comida favorita de ${this.nombre} es ${this.comida}`;

  }

  quienSoy() {

  return `soy ${this.nombre} y mi identidad es ${this.codigo}`;

  }

  otraFuncion() {

  return this.quienSoy();

  }

  }

  const spiderman = new Persona('ric', 'asd', 'hurra!');

  spiderman.setComidaFavorita = 'una jericalla';

  console.log(spiderman.getComidaFavorita);

METODOS que me van a servir de Javascript

Nota: prompt y confirm se encuentran dentro del objeto window

• prompt: hace aparecer una ventana con un formulario y una pregunta, let nombre = prompt('¿Cómo te llamas?');
document.getElementById('app').innerHTML = `Mi nombre es ${nombre}`;
• confirm: similar al prompt solo que aquí te da elegir OK ó Cancel, y si lo guardas en una variable y luego imprimes la variable para ver que tiene dentro verás true ó false
• .length: mascotas.length te dice cuantos cupos tiene un array, si no sabes cuantos cupos hay en el array por que es dinámico, se recomienda usar console.log(mascotas.length-1);
• .push
: mascotas.push("datos") te agrega un nuevo dato a tu array, puede ser de cualquier tipo al final de tu array
• JSON.stringify() convierte un objeto o valor de JavaScript en una cadena de texto JSON
• .unshift
: mascotas.unshift("datos") te agrega un nuevo dato a tu array, puede ser de cualquier tipo al inicio de tu array
• meses.shift(); : elimina la primera posición de un array
• .pop
mascotas.pop(); remueve el último dato de tu array , si quieres guardar e una variable lo que se borro, puedes guardarlo en una variable let borrado = mascotas.pop():
• .splice mascotas.splice(1, 4); Elimina el rango de elementos que tu le digas, dentro de un array
• meses.sort(); Ordena el array en orden alfabetico y los números también de mayor a menor y menos a mayor
  

  Menor a mayor

  let meses = new Array(1, 2, 44, 56, 78, 98, 90, 9);

  meses.sort(function(x, y) {

  return x - y;

  });

  console.log(meses);

  Mayor a menor

  let meses = new Array(1, 2, 44, 56, 78, 98, 90, 9);

  meses.sort(function(x, y) {

  return y - x;

  });

  console.log(meses);

• .indexOf: mascotas.indexOf("pez"); Te dice el lugar en donde se encuentra el dato que buscas, OJO: debes ponerlo exacto, mayúsculas y minúsculas
• setTimeout: ejecuta una acción después de cierto tiempo

  Mayor a menor

  setTimeout(function() {

  spinnerGif.style.display = 'none';

  //AppendChild necesita el id de un elemento padre

  document.querySelector('#loaders').appendChild(enviado);

  }, 2000);

• .reset() formularioEnviar.reset(); resetea todo a como estaba
• entriesPares: const entriesPares = Object.entries(persona); console.log(entriesPares); convierte el objeto de js en arrays INCLUSO cuando creas el objeto con un const que se supone no se debería poder modificar checa el ejercicio 15
• .getOwnPropertyNames() Object.getOwnPropertyNames(persona); te muestra las propiedades que le pusiste a tu objeto, pero en un Array, ES MUY USADO AL TRABAJAR CON OBJETOS EN JS, checa el ejercicio 18
• Object.values() Object.values(persona) Te pone en un array los valores que tengas dentro de las propiedades que están dentro de tu objeto, checa el ejercicio 19, ES MUY USADO EN JS
• Math.random() Te da un número aleatorio entre 0 y 1
• .map() es una función que te muestra lo que tiene dentro un array
  

  const nombres = ['Carlos', 'Alejandro', 'Manuel', 'Cesar'];

  const numero_caracteres = nombres.map((nombre) => {

  console.log(`${nombre} tiene ${nombre.length} letras`);

  })

• .startsWith('p') Checa con que letra comienza la palabra dentro de la variable

  let texto = "Hola mundo";

  console.log(`¿'${texto}' empieza con la letra 'p'?`, texto.startsWith('p'));

• .toLocaleLowerCase().endsWith('o') Checa con que letra termina la palabra y aparte la convierte a minúscula

  let texto = "Hola mundo";

  console.log(`¿'${texto}' empieza con la letra 'p'?`, texto.startsWith('p'));

• .toLocaleLowerCase().endsWith('o') Checa con que letra termina la palabra y aparte la convierte a minúscula

  let texto = "Hola mundo";

  console.log(`¿'${texto}' empieza con la letra 'p'?`, texto.startsWith('p'));

• .texto.includes('Ric') Busca si contiene una palabra y te dice si es true or false

  let amigos = ['Nacho', 'Urrutia', 'Jessica', 'Lau'];

  console.log(`¿ ${amigos} incluye la palabra "Lau"?`, amigos.includes('Lau'));

  También sirve para arreglos

  let texto = "Hola mundo";

  console.log(`¿'${texto}' empieza con la letra 'p'?`, texto.startsWith('p'));

• .find( () =>{} ) Nos devuelve El primer elemento de un arreglo que "cumpla una condición"

  let amigos = ['Nacho', 'Urrutia', 'Jessica', 'Lau'];

  console.log(amigos.find((amigo) => {
return amigo.length > 6;
}));

  Se puede resumir la función

  let amigos = ['Nacho', 'Urrutia', 'Jessica', 'Lau'];

  console.log(amigos.find(amigo => amigo.length > 6));

• .findIndex() Encuentra la posición en el arreglo en el que se encuentra el dato que estás buscando

  let amigos = ['Nacho', 'Urrutia', 'Jessica', 'Lau'];

  console.log(amigos.findIndex((amigo) => {

  return amigo === 'Jessica';

  }));

• variable.substring(2,6) te muestra las letras que hay en el texto de la variable

  let amigos = "Francisco Javier Topiltzin";

  console.log(amigos.substring(2,6))

• variable.slice(2,6) hace lo mismo que substring

  let amigos = "Francisco Javier Topiltzin";

  console.log(amigos.substring(2,6))

• variable.split(',') corta la cadena de texto y cada corte lo hace donde tenga el signo o la letra que tu le pongas y te pone los cortes en un string

  let amigos = "Francisco, Javier, Topiltzin";

  console.log(amigos.split(','))

• variable.replace('Francisco', 'Pancho') hace lo mismo que substring

  let amigos = "Francisco Javier Topiltzin";

  console.log(amigos.replace('Francisco', 'Pancho'))

• variable.repeat(10) repite la cadena de texto

  let amigos = "Francisco Javier Topiltzin";

  console.log(amigos.repeat(10))

También se puede acortar

let amigos = ['Nacho', 'Urrutia', 'Jessica', 'Lau'];

console.log(amigos.findIndex(amigo => amigo === 'Jessica'));

• console.timeEnd('hola') Te dice cuanto tiempo tomo ejecutar dicho código.
• Math.PI te imprime el valor de PI

  let resultado = Math.PI;

  console.log(resultado);

• Math.round() redondea hacia arriba o abajo

  let resultado1 = Math.round(2.49);

  console.log(resultado1);

• Math.PI te da el valor de PI
• Math.floor(7.8) te redondea hacia abajo
• Math.abs(-7.8) te da el valor absoluto de un número(si es positivo te lo pone positivo y si es negativo te lo pone positivo)
• Math.sign(8) te da un 1 o -1 dependiendo si el número es positivo o negativo
• Math.ceil(2.49) redondea hacia arriba siempre

  let resultado1 = Math.ceil(2.49);

  console.log(resultado1);

• Math.floor(2.49) redondea hacia abajo siempre

  let resultado1 = Math.floor(2.49);

  console.log(resultado1);

• Math.sqrt() saca la raíz cuadrada

  let resultado1 = Math.sqrt(144);

  console.log(resultado1);

• Math.abs(-3) Ejercicio te devuelve el número absoluto(lo negativo lo vuelve positivo)

  let resultado1 = Math.abs(-3);

  console.log(resultado1);

• Math.pow(144) te eleva el número a la potencia que le digas

  let resultado1 = Math.pow(144);

  console.log(resultado1);

• Math.min(2,4,6,7,8,9) te devuelve el número más pequeño

  let resultado1 = Math.min(2,4,5,6,78,9);

  console.log(resultado1);

• Math.max(2,4,6,7,8,9) te devuelve el número mayor

  let resultado1 = Math.max(2,4,5,6,78,9);

  console.log(resultado1);

• Math.random() te da un valor aleatorio del 0 al 0.99

  let resultado1 = Math.random();

  console.log(resultado1);

• Number(caja1) transforma la cadena de texto a número

  let caja = 4;

  let caja1 = '4';

  console.log(typeof Number(caja1));

• parseInt(caja1) TAMBIÉN transforma la cadena de texto a número

  let caja = 4;

  let caja1 = '4';

  console.log(typeof parseInt(caja1));

• String(caja) transforma el número a cadena de texto

  let caja = 2;

  console.log(typeof String(caja));

• caja.toString() transforma el número a cadena de texto

  let caja = 2435;

  console.log(typeof caja.toString());

• caja.concat(caja2) une 2 arreglos en 1

  let meses = new Array('Enero', 'Febrero', 'Marzo');

  let numeros = [1, 2, 3];

  console.log(meses.concat(numeros));

• caja.concat(caja2,caja3,caja4) une varios arreglos en 1

  let meses = new Array('Enero', 'Febrero', 'Marzo');

  let numeros = [1, 2, 3];

  let numeros1 = [4, 5, 6];

  let numeros2 = [7, 8, 9];

  console.log(meses.concat(numeros, numeros1, numeros2));

• toFixed(1);: te imprime el número de decimales que le indiques

  Mayor a menor

  let c = 7.19;

  console.log(c.toFixed(1));

• Obtener la fecha: let hoy = new Date(); console.log(hoy);
• Obtener el día: let hoy = new Date(); let dia = hoy.getDay(); console.log(dia);
• throw: te da un mensaje de error, ejemplo : throw "No hay cartas en el deck";
• Object.keys(ric); te da los llaves(los nombres de las propiedades del objeto) del objeto console.log(Object.keys(ric));
• objeto.hasOwnProperty("nombre")imprimira true or false para decirte si existe o no la propiedad en el objeto

Metodos que se usan en console.

• console.error() te imprime el resultado de color rojo
• console.warn() te imprime el resultado de color amarillo
• console.info()te imprime el resultado de color normal
• Imprimir como en C con console.log("Mi nombre es %s",nombre)
• console.clear() limpiar toda la consola
• console.log(window) te muestra las propiedades del objeto window
• console.log(document) es la representación del documento html a traves de javascript, te muestra el contenido(las etiquetas html)
• console.dir(document) te muestra todas las propiedades y objetos que tiene document
• console.group("Un titulo") sirve para crear una lista con console.log. Ejemplo:

  console.group("Titulo del grupo")

  console.log("Un nombre");

  console.log("Otro nombre");

  console.groupEnd();

• console.groupEnd(); sirve para cerrar el grupo
• console.table(Object.entries(console).sort()) te crea una tabla con todos les metodos que puede usar el objeto console y el sort lo puse para que me lo ponga en orden alfabetico

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

  console.log(numeros);

  const vocales = ["a","e","i","o","u"];

  console.log(vocales);

  const gato = {nombre: "Alvin",color: "albinegro",raza:"mestizo"};

  console.log(gato);

• console.time(); Te dice cuanto tiempo tarda tu código en ejecutarse Ejemplo:

  console.time("Cuanto tiempo tarda");

  const arreglo = Array(1000000);

  for(let i = 0; arreglo.length; i++);{

  arreglo[i] = i;

  }

  console.timeEnd("Cuanto tiempo tarda");

• Te dice cuantas veces se ha ejecutado tu código, por ejemplo cuantas veces el usuario ejecuto el evento al darle click a un boton ó cuantas conexiones tuvo que hacer para llegar a cierta solicitud. Ejemplo:

  for(let i = 0; arreglo.length; i++);{

  console.count("Codigo for");

  console.log(i);

  }

• console.assert() sirve para comenzar aprender pruebas unitarias Ejemplo:

  let x = 3;

  let y = 2;

  pruebaXY = "Se espera que X siempre sea mayor";

  console.assets(x < y (x,y,pruebaXY));

Callback

Una función que se coloca como argumento a otra función(Explicacion FH) Es un función que se pasa como argumento a un operación asincrona, con la espectativa de que dicha función sea ejecutada una vez esta termine(Explicacion Uriel CF)

Definicion sencilla de un callback Es una función que nos permite recibir como parametro otra función, es una función que se pasa a otra función como argumento, son una forma de asegurarnos que un determinado codigo no se ejecute hasta que un determinado codigo allá terminado de ejecutarse, es muy útil cuando los tiempos de respuesta ó carga del servidor tienen una demora

Promesas

es un objeto que puede producir un valor único en algún momento en el futuro: un valor resuelto o una razón por la que no se resuelve. Ejemplo:

Definiciones varias

• Procesamiento Single thread y multi thread
• Single thread: solo puede ejecutar una cosa a la vez
• Operaciones de CPU y Operaciones de I/O
• Operaciones de CPU: siempre están procesando como un FOR en el navegador
• Operaciones de I/O: Están esperando una respuesta como cuando se procesa un pago en linea
• Operaciones concurrentes y paralelas
• Concurrencia: 2 o más tareas progresan simultaneamente(una empezo antes y otra después), se ejecutan al mismo tiempo
• Paralelismo: 2 o más tareas se ejecutan al mismo tiempo(al unisono)
• Operaciones bloqueantes y No bloqueantes: se refiere a la fase de espera cada que se va ejecutando una operación de nuestro codigo
• Bloqueante: es aquella que no va a devolverle el control a la aplicacion hasta que termine su tarea
• No Bloqueante: se ejecutan y devuelven inmediatamente el control al hilo principal sin importar si han terminado la tarea
• Operaciones Sincronas y Asincronas se refiere a cuando tendra lugar la respuesta
• Sincrono: sucede en el tiempo inmediato, una funcion sincrona espera el resultado y sigue con otra operacion
• Asincrono: la respuesta sucede en el futuro, no va a esperar el resultado, suelta el control del hilo JS es asincrono y no bloqueante, no se bloquea el unico hilo, JS ees altamente concurrente JS tiene un solo hilo de ejecucion JS la ultima tarea en entrar es la primera en salir. LIFO(last in-First out)
• En JS hay 2 tipos de codigo:
• -Sincrono bloqueante: cada operacion se hace de una vez bloqueando el flujo del hilo principal, una vez se procese pasa a la sig operacion hasta que se terminen las operaciones
• -Asincrono no bloqueante: se manda la labor a la fila de tareas y sigue con otra y no bloquea el flujo del hilo

this

• this.type: te dice el tipo de dato o lo que esta seleccionando, si fuera un formulario, te diria si es de tipo text, email o textarea

DOM

• document al ejecutar esto en la consola del navegador chrome te mostrará todo lo que hace referencia a la página html
• document.querySelector('body') querySelector SELECCIONA la etiqueta que le digas y siempre seleccionara la primera en su tipo que encuentre en tu documento html, puedes guardar esta seleccion dentro de una variable, ejemplo: const divBotones = document.querySelector('#divBotones');
• document.querySelectorAll('img') SELECCIONA todas las etiquetas de su mismo tipo en tu documento html
• document.querySelector('img').src te dice la ruta de tu imagen, solo te selecciona la primera
• document.querySelector('#principal a:first-child') selecciona los selectores de css
• document.querySelector('#principal').getElementByClassName('.titulo'); seleccionas el id que contenga la clase fulana
• const encabezado = document.querySelector('#hero'); puedes seleccionar id y clases usando querySelector
• document.getElementById('hero').textContent; te muestra el contenido del texto
• document.querySelector('small').innerText te AGREGA texto ó número, PERO no agrega html
• document.querySelector('small').innerHTML te AGREGA texto, números y etiquetas HTML
• document.getElementById('computadora-cartas'); SELECCIONA un elemento que tenga el id que le indicaste
• document.getElementById('computadora-cartas').textContent; MUESTRA el texto que tiene el id que le indicaste
• document.getElementById('computadora-cartas').innerText; MUESTRA el texto que tiene el id que le indicaste
• document.getElementById('computadora-cartas').className; MUESTRA la clase que tiene el id que le indicaste
• document.getElementById('computadora-cartas'); es lo mismo que document.querySelector('#computadora-cartas')
• document.querySelector('.carta'); te SELECCIONA elemento que tenga esa clase PERO solo 1 elemento
• const divBotones = document.querySelector('#divBotones'); puedes GUARDAR UNA SELECCION de una id ó clase
• document.getElementsByClassName('.carta'); te SELECCIONA TODOS los elementos que tengan esa clase
• document.getElementsByClassName('.otraClase')[3]; te SELECCIONA TODOS los elementos que tengan esa clase y le puedes poner la psicion del array
• document.createElement('button'); CREA un elemento, y también se puede almacenar en una variable const botonNuevo = document.createElement('button');
• document.getElementByTagName('div'); SELECCIONA la etiqueta HTML
• botonNuevo.innerText = "Destruir"; AGREGA texto a tu elemento creado
• divBotones.append(botonNuevo) AGREGA AL DOM usando APPEND
• botonNuevo.classList.add('btn-success'); AGREGAR estilos a algo que yo he creado, seleccionado y guardado en variables o constantes
• window.outerHeight te dice la altura del navegador altura = window.outerHeight
• window.outerWidth te dice el ancho del navegador altura = window.outerWidth
• window.innerHeight te dice la altura de la ventana del navegador altura = window.outerHeight
• window.innerWidth te dice el ancho de la ventana del navegador altura = window.outerWidth
• window.location te da información acerca de la URL, mucha info, recuerda que es un objeto, puedes acceder a info más específica usando "." , ejemplo: window.location.port window.location.href='https://twitter.com'
• window.navigator: Te dice los datos del navegador y como también es un objeto puedes pedirle más datos window.navigator.appName
• document.all te dice cuantos elemtos tiene tu document(etiquetas html y con que ids y clases)
• document.all[119] seleccionas la etiqueta de tu documento en específico
• document.URL: te da la url
• document.forms te da los formularios
• document.forms[0] seleccionas el primer formulario
• document.forms[0].id selecciona el id del formulario y te lo muestra
• document.forms[0].classNameselecciona la clase del formulario y te la muestra
• document.forms[0].classList te muestra las clases que tenga el formulario o cualquier clase
• document.forms[0].classList[0]te muestra la clase según el número que le pongas en el array
• document.images te muestra cuantas imagenes hay y cuales tienen id y clase
• document.images[2] te muestra la imagen su src, como se llama la imagen y si tiene ancho o altura etc
• document.images[2].src te da el src de la imagen
• nodeName son las etiquetas html, los nodos al final son nuestras etiquetas de html console.log('caja.nodeName'); la consola te regresa la etiqueta que este guardada en la variable caja
• children te regresa las etiquetas html que hayas seleccionado y almacenado en la variable const navegacion = document.querySelector('#principal');
console.log('navegacion.children')
• childElementCountconsole.log('cursos[0].childElementCount'); te cuenta el número de elementos hijos
• parentElement const cursos = document.querySelectorAll('.card'); console.log('cursos[0].parentElement.parentElement.parentElement'); te da el padre o la etiqueta mayor al padre, puedes ir tan afuera como quieras, a esto se le llama transversinTRANSVERSING
• previousElementSiblingconst enlaces = document.querySelectorAll('.enlace'); console.log('enlaces[0].previousElementSibling');te SELECCIONA el elemento previo
• createElement ejemplo más abajo
• appendChildnuevoEncabezado.appendChild(document.createTextNode('Otro titulo')); todo puede ser agregado al DOM
• remove();const enlaces = document.querySelectorAll('.enlace'); enlaces[0].remove();remueve
• removeChild();const navegacion = document.querySelector('#principal'); navegacion.removeChild(enlaces[0]);Otra manera de borrar
• classListelemento = primerLi.classList.add('nueva-clase'); Te dice todas las clases que contenga tu elemento seleccionado
• getAttributeelemento = primerLi.getAttribute('href'); CONSIGUE los atributos del html
• setAttributeprimeLi.setAttribute('href','http://facebook.com'); REDECLARA el atributo del HTML
• hasAttributeprimerLi.hasAttribute('data-id');comprueba si tienes un atributo
• removeAttributeprimerLi.removeAttribute('data-id'); remueve el atributo
• Convertir HTMLCollection en un array(o culquiera de los ejemplo de arriba) let imagenes = document.images; let imagenesArr = Array.from(imagenes) console.log(imagenesArr);

• Ejemplo de document.images con función Array que convierte un HtmlCollection en un array

  let imagenes = document.images;

  let imagenesArr = Array.from(imagenes);

  console.log(imagenesArr);

• Ejemplo donde usa forEach para mostrar cada imagen

  imagenesArr.forEach(function(imagen){

  console.log(imagen);

  });

DOM MOdificar CSS

• let encabezado;

  encabezado = document.getElementById('encabezado');

  encabezado.style.background='#333'

  encabezado.style.color='#fff'

  encabezado.style.padding='20px'

  encabezado.textContent='Los mejores cursos'

  encabezado.innerText='Los mejores cursos'

  console.log(encabezado);

• Ejemplo creando elementos con createElement

  const enlace = document.createElement('a');

  //agregamos una clase

  enlace.className='enlace';

  //añadir id

  enlace.id = 'nuevo-id';

  //agregamos el atributo href

  enlace.setAttribute('href','#')

  //Añadir el texto

  enlace.textContent = 'Nuevo Enlace';

  //Otra manera de agregar texto

  enlace.appenChild(document.createTextNode('Nuevo enlace'))

  //agregando todo esto en el id que le estás indicando de tu proyecto

  document.querySelector('#secundaria').appendChild(enlace);

• Ejemplo reemplazando elementos con replaceChild

  const nuevoEncabezado = document.createElement('h2');

  //agregamos una id

  nuevoEncabezado.id ='encabezado';

  //agregar nuevo texto

  nuevoEncabezado.appendChild(document.createTextNode('Los mejores cursos'));

  //elemento que sera reemplazado

  const anterior = document.querySelector('#encabezado');

  //Elemento padre

  const elPadre = document.querySelector('#lista-Cursos');

  //Reemplazando

  elPadre.replaceChild(nuevoEncabezado,anterior)

• Agregando y quitando clases

  const primerLi = document.querySelector('.enlace');

  let elemento;

  //Obtener una clase de CSS: Ejemplo 1

  elemento = primerLi.className;

  elemento = primerLi.classList.add('nueva-clase');

  elemento = primerLi.classList.remove('vieja-clase');

  elemento = primerLi.classList;

  //Modificar atributos: Ejemplo 2

  elemento = primerLi.getAttribute('href');

  primeLi.setAttribute('href','http://facebook.com');

API's

• Json Place Holder

PLuggins de pinshi chrome alv

• Json Formatter
• wappalyzer
• Vue JS Dev Tools
• Redux Dev Tools
• React Developer Tools