Curso de JAVASCRIPT - Nivel JUNIOR
https://www.youtube.com/watch?v=z95mZVUcJ-E
**********
ENLAZAR JS
**********
En línea:
Franky
En script:
En archivo externo:
*********
VARIABLES
*********
string ="cadena de texto"
number=3.14
boolean=true y false
parseInt(num) -> convierte a entero
console.log(typeof number) -> nos devuelve el tipo de dato
Formas de declarar varibles:
var
let -> solo valen dentro del scope (recomendada)
const -> siempre vale lo mismo, se debe declarar al inicializar
undefined -> variable sin asignación
null -> nula, vacía
NaN -> not a number -> 5*"hola"
Hoisting -> se pueden ejecutar funciones antes de su declaración
prompt -> es como un input
let nombre = prompt("Nombre?")
alert("Hola" + nombre)
alert("hola") -> mensaje por alerta
console.log("hola") -> mensaje por consola
document.write("hola") -> mensaje en documento
comentarios -> //
podemos seleccionar varias líneas y comentar con Ctrl + }
comentarios multilínea -> /* comentario */
En JS se utiliza camel case:
nombrePerro
getElementByID
**************************************
OPERADORES DE ASIGNACIÓN Y ARITMÉTICOS
**************************************
let numero = 5
numero += 3 -> suma 3 a numero
-= -> resta
*= -> multiplica
/= -> divide
%= -> resto
**= -> elevado a
+ suma
- resta
* multiplicación
/ división
** potencia
++ incremento suma 1
-- decrecimiento resta 1
% módulo resto división
- y + para hacer negativo y positivo
*************
CONCATENACIÓN
*************
Al detectar string se convierte todo a string
let saludo = "hola"
let nombre = "Pedro"
frase = saludo + " " + nombre
frase = numero1.concat(numero2)
`${saludo}, bienvenido, ${nombre}` -> con backticks (acento abierto), podemos escribir html
******************************
OPERADORES BOOLEANOS Y LÓGICOS
******************************
let num1 = 5;
let num2 = 3;
document.write(num1 == num2) -> devuelve false
a == b igualdad
a != b distintos
a === b identidad (estrictamente el mismo tipo de dato)
a !== b no idénticos
a > b mayor que
a < b menor que
a >= b mayor o igual
a <= b menor o igual
&& -> and, si las 2 son verdaderas es true, si no false
|| -> or, si hay una verdadera es true, si las 2 son falsas false
! -> devuelve lo contrario
*************
CONDICIONALES
*************
si es verdadero se ejecuta:
if (nombre == "Pedro") {
alert("hola Pedro")
}
si se cumple otra condición:
else if (nombre == "Alex"){
alert("hola Alex")
}
si no:
else {
alert("hola desconocido")
}
******
ARRAYS
******
let frutas =["pera", "manzana", "plátano"] -> puede contener distintos tipos
document.write(fruta[0]) -> pera
json:
let pc ={
nombre: "hashmania",
procesador: "i7",
ram: "8Gb",
disco: "1Tb"
}
document.write(pc["nombre"]) -> hashmania
******************
BUCLES E ITERACIÓN
******************
while -> mientras se cumpla la condición se ejecuta
let numero = 0;
while (numero < 10) {
numero++;
document.write(numero + " ")
}
do while -> primero se ejecuta y después se ve la condición
let numero = 0;
do {
numero++;
document.write(numero + " ")
}
while (numero < 10)
break -> rompe el bucle
continue -> se salta esa iteración
if (numero==5){
break;
}
for -> declaración, condición, iteración
for (i=0; i<6; i++){
document.write(i + " ")
}
for in -> para arrays pero funciona con los índices
let frutas =["pera", "manzana", "plátano"];
for (fruta in frutas){
document.write(fruta + " ")
}
for of -> para arrays, funciona con los valores
let frutas =["pera", "manzana", "plátano"];
for (fruta of frutas){
document.write(fruta + " ")
}
label -> asociar un bucle a un nombre
*********
FUNCIONES
*********
function saludar(){
alert("hola");
return "saludo realizado";
}
document.write(saludar())
funciones con parámetros
function suma(num1,num2){
let resultado = num1+num2
return resultado
}
document.write(suma(5,3))
declarar las variables con let hace que solo sean válidas en el scope,
si no ponemos let es como si las declarasemos con var y serían variables globales
funciones flecha
let suma = (num1,num2)=>{
let resultado = num1+num2
return resultado
}
document.write(suma(5,3))
podemos hacerlo en una sola línea:
let suma = (num1,num2)=> num1+num2;
document.write(suma(5,3))
********************************
PROGRAMACIÓN ORIENTADA A OBJETOS
********************************
class animal{
constructor(especie,edad,color){
this.especie = especie;
this.edad = edad;
this.color = color;
this.info = `Soy ${this.especie}, tengo ${this.edad} años y soy de color ${this.color}`;
}
verInfo(){document.write(this.info + " ")
}
}
const perro = new animal("perro", 3,"marrón");
const gato = new animal("gato", 2,"negro");
const pajaro = new animal("pajaro", 1,"blanco");
// document.write(perro.info + " ");
// document.write(gato.info + " ");
// document.write(pajaro.info + " ");
perro.verInfo();
gato.verInfo();
pajaro.verInfo();
********
HERENCIA
********
class Animal{
constructor(especie,edad,color){
this.especie = especie;
this.edad = edad;
this.color = color;
this.info = `Soy ${this.especie}, tengo ${this.edad} años y soy de color ${this.color}`;
}
verInfo(){document.write(this.info + " ")
}
}
class Perro extends Animal {
constructor(especie,edad,color,raza){
super(especie,edad,color);
this.raza = raza;
}
ladrar(){
alert("guau")
}
}
const perro = new Perro("perro", 3,"marrón","pastor alemán");
const gato = new Animal("gato", 2,"negro");
const pajaro = new Animal("pajaro", 1,"blanco");
perro.ladrar();
perro.verInfo();
gato.verInfo();
pajaro.verInfo();
método estático es un método que no necesita que la clase se defina para ser creado
class Perro extends Animal {
constructor(especie,edad,color,raza){
super(especie,edad,color);
this.raza = raza;
}
static ladrar(){
alert("guau")
}
}
Perro.ladrar();
set -> método para cambiar el valor de un atributo
class Perro extends Animal {
constructor(especie,edad,color,raza){
super(especie,edad,color);
this.raza = raza;
}
set setRaza(newName){
this.raza=newName;
}
}
perro.setRaza = "boxer";
document.write(perro.raza)
get -> para obtener un valor
class Perro extends Animal {
constructor(especie,edad,color,raza){
super(especie,edad,color);
this.raza = raza;
}
set setRaza(newName){
this.raza=newName;
}
get getRaza(){
return this.raza;
}
}
perro.setRaza = "boxer";
document.write(perro.getRaza)
********************
MÉTODOS PARA STRINGS
********************
concat() concatenar cadenas
lenght devuelve la longitud de la cadena
startsWith("hola") si comienza con "hola" devuelve true
endsWith("hola") si finaliza con "hola" devuelve true
includes("hola") si una cadena contiene "hola" devuelve true
indexOf("hola") devuelve el índice del primer caracter de "hola", -1 si no está
lastIndexOf("hola") devuelve el índice del útimo caracter de "hola", -1 si no está
padStart(6,"a") rellena hasta al principio 6 posiciones con "a"
padEnd(6,"a") rellena hasta el final 6 posiciones con "a"
repeat(2) repite la cadena 2 veces
split(",") convierte a array dividiendo la cadena por ","
substring(0,2) retorna un trozo de cadena desde la posición 0 a 2
toLowerCase() convierte a minúscula
toUpperCase() convierte a mayúscula
toString() convierte a string
trim() elimina espacios en blanco al principio y al final
trimEnd() elimina espacios en blanco al final
trimStart() elimina espacios en blanco al principio
valueOf() retorna el valor primitivo de un objeto string
*******************
MÉTODOS PARA ARRAYS
*******************
modifican el array
pop() elimina el último item de un array y lo devuelve
shift() elimina el primer item de un array y lo devuelve
push() agrega un item al final y devuelve la longitud del array
reverse() invierte el orden del array
unshift( ) agrega uno o más items al inicio del array, y devuelve la nueva longitud
sort() ordena los items de un array
splice(posición,cantidad,agregar) cambia el contenido de un array eliminando o agregando items
acceden al array
join(" - ") convierte a string todos los elementos de un array separando por " - "
slice(1,3) devuelve un trozo del array desde el inicio hasta el fin, fin no incluido
toString() convierte a string
indexOf("hola") devuelve el índice del primer caracter de "hola", -1 si no está
lastIndexOf("hola") devuelve el índice del útimo caracter de "hola", -1 si no está
includes("hola") si una cadena contiene "hola" devuelve true
repetición
filter() crea un nuevo array con los items que cumplan la condición, que es una función
r= numeros.filter(numero => numero.length > 4)
forEach() ejecuta la función indicada para cada item
map()
***********
OBJETO MATH
***********
Métodos
sqrt() raiz cuadrada
cbrt() raiz cúbica
max() devuelve el máximo
min() devuelve el mínimo
random() número aleatorio entre 1 y 0
round() redondea
fround() redondea flotante a 4 bits (15 decimales)
floor() devuelve el mayor entero menor que o igual a un número
trunc() devuelve la parte entera del número x, eliminando la fracción
Propiedades
PI 3.14159
SQRT1_2 raiz cuadrada de 1/2
SQRT2 raiz cuadrada de 2
E constante de Euler
LN2 logaritmo neperiano 2
LN10 logaritmo neperiano 10
LOG2E logaritmo de E con base 2
LOG10E logaritmo de E con base 10
let numero = Math.sqrt(25); -> 5
let numero = Math.max(25,40,3,5); -> 40
número aleatorio de 1 a 100
let numero = Math.random()*99;
numero = Math.floor(numero+1);
**********
LA CONSOLA
**********
console.log("hola") imprime en consola
funciones de registro
assert(5 > 6) aparece un error si la afirmación es falsa (no estándar)
clear() limpia la consola
error() muestra un error
info() emite un mensaje informativo
log() muestra un mensaje en la consola
table([1,2,3,4]) esta función toma un argumento obligatorio: data, debe ser un array u objeto,
y un parámetro adicional: columns, y nos muestra una tabla
warn() mensaje de advertencia
dir([1,2,3,4]) despliega una lista interactiva de las propiedades del objeto (no estándar)
funciones de conteo
count() registra el número de veces que se llama a count(). Esta función toma como
argumento opcional una etiqueta
countReset() resetea el contador console.count()
funciones de agrupación
group("grupo 1") crea un nuevo grupo en línea en el registro de la consola
groupEnd() remueve un grupo en línea en el registro de la consola
groupCollapsed() crea un grupo en línea pero contraido, el usuario debe expandirlo para verlo
funciones de temporización
time() inicia un temporizador
tiemEnd() registra el valor actual de un temporizador
timeLog() detiene un temporizador
estilo en consola
console.log("%hola", "color:red; background:black; padding:20px")
******
EL DOM
******
DOM: es una representación completamente orientada al objeto de la página web y puede ser modificado con un lenguaje de script como JavaScript.
Nodo: es cualquier etiqueta del cuerpo, como un párrafo, el body o las etiquetas de una lista
Document: es el nodo raiz del que derivan el resto de nodos
Element: nodos definidos por etiquetas html
Text: el texto dentro de un nodo elemenmt se considera un nuevo hijo de tipo text
Attribute: los atribustos de las etiquetas definen nodos, en JS no se consideran nodos, sino como información asociada al nodo element
Comentarios y otros: los comentarios y otros elementos como las declaraciones doctype en la cabecera de los html generan nodos
**********************
SELECCIÓN DE ELEMENTOS
**********************
hola
bienvenido
adios
document.
getElementByID() selecciona un elemento por ID
document.getElementByID("saludo")
getElementsByTagName() selecciona un elemento por la etiqueta
document.getElementsByTagName("p")
querySelector() devuelve el primer elemento que coincida con un grupo especificado de selectores
document.querySelector(".despedida") -> clase
document.querySelector("#saludo") -> ID
querySelectorAll() devuelve todos los elementos que coincidan con un grupo especificado de selectores
document.querySelectorAll("#saludo") -> selecciona todos
**********************
ATRIBUTOS DE ELEMENTOS
**********************
Métodos para definir, obtener y eliminar atributos
setAttribute() modifica el valor de un atributo
getAttribute() obtiene el valor de un atributo
removeAttribute() elimina el valor de un atributo
html:
JS:
const entrada = document.querySelector(".entrada");
entrada.setAttribute("type","text"); -> modifica el atributo type a text
Atributos globales
class lista de clases del elemento separadas por espacios
contenededitable indica si el elemento puede ser modificado (bool)
dir indica la dirección del texto
hidden indica si el elemento está oculto
id define un identificador único
style declaraciones css
tabindex indica si el elemento puede obtener un focus de input
title texto con información del elemento
html:
hola
JS:
const titulo = document.querySelector(".titulo");
titulo.style.backgroundColor = "red";
Atributos de inputs
className
value
type
accept (formato archivo)
form
minLength
placeholder
required
*************************************
CLASES, CLASSLIST Y MÉTODOS CLASSLIST
*************************************
add() añade una clase
remove() elimina una clase
item() devuelve la clase del índice especificado
contains() verifica si un elemento tiene la clase especificada
replace() reemplaza una clase por otra
toggle() si no tiene la clase especificada la agrega, si no la elimina
html:
hola
JS:
const titulo = document.querySelector(".titulo");
titulo.classList.add("grande"); -> añade otra clase
let valor = titulo.classList.item(1); -> devuelve la 2ª clase (grande)
*********
ELEMENTOS
*********
Obtención y modificación de elementos
textContent devuelve el texto de cualquier nodo
innerHTML devuelve el contenido html de un elemento
outerHTML devuelve el código html completo del elemento (en desuso)
innerText devuelve el texto visible de un node element (en desuso)
outerText devuelve el texto de las etiquetas html (en desuso)
html:
hola
JS:
const titulo = document.querySelector(".titulo");
let resultado = titulo.innerHTML;
alert(resultado); -> hola Hashmania
*********************
CREACIÓN DE ELEMENTOS
*********************
createElement() crea elemento
createTextNode() crea nodo texto
appendChild() crea un nodo hijo
createDocumentFragment()
html:
//-> elemento hijo
JS:
1) objeto:
const contenedor = document.querySelector(".contenedor");
const item = document.createElement("LI");
const textoDelItem = document.createTextNode("item de la lista");
item.appendChild(textoDelItem);
contenedor.appendChild(item);
console.log(item);
2) texto:
const contenedor = document.querySelector(".contenedor");
const item = document.createElement("LI");
item.innerHTML = "este es un item de la lista";
contenedor.appendChild(item);
console.log(item);
3) múltiples
const contenedor = document.querySelector(".contenedor");
const fragmento = document.createDocumentFragment();
for (i=0; i<20; i++){
const item = document.createElement("LI");
item.innerHTML = "este es un item de la lista";
fragmento.appendChild(item);
}
contenedor.appendChild(fragmento);
**********************************
OBTENCIÓN Y MODIFICACIÓN DE CHILDS
**********************************
firstChild primer hijo (coge los espacios como text)
lastChild último hijo (coge los espacios como text)
firstElementChild primer elemento hijo
lastElementChild último elemento hijo
childNodes devuelve un NodeList con todos los nodos hijos, no es un array pero al ser un objeto podemos recorrerlo con un forEach
children devuelve los elementos hijos, podemos recorrerlo con for of
html:
Un h2 normal
Un h4 normal
Un simple párrafo
JS:
const contenedor = document.querySelector(".contenedor");
primerHijo = contenedor.lastElementChild;
console.log(primerHijo);
*****************
MÉTODOS DE CHILDS
*****************
replaceChild() reemplaza un child nuevo por uno antiguo
removeChild() elimina un child
hasChildNodes() verifice si tiene un elemento hijo o no
html:
Un h2 normal
Un h4 normal
Un simple párrafo
JS:
const contenedor = document.querySelector(".contenedor");
const parrafo = document.createElement("P");
const h2_nuevo = document.createElement("H2");
parrafo.innerHTML = "párrafo";
h2_nuevo.innerHTML = "título";
h2_antiguo = document.querySelector(".h2");
contenedor.replaceChild(h2_nuevo,h2_antiguo);
**********************
PROPIEDADES DE PARENTS
**********************
parentElement selecciona el padre elemento de un elemento
parentNode selecciona el padre de un elemento
***********************
PROPIEDADES DE SIBLINGS (hermanos)
***********************
nextSibling el siguiente hermano
previousSibling el anterior hermano
nextElementSibling el siguiente elemento hermano
previousElementSibling el anterior elemento hermano
**************
NODOS - Extras
**************
closest() seleccionar el elemento ascendente más cercano que coincida con nuestro selector
html:
DIV 1
DIV2
DIV3
JS:
const div = document.querySelector(".div3");
console.log(div.closest(".div"));
Curso de JAVASCRIPT - Nivel MID LEVEL
https://www.youtube.com/watch?v=xOinGb2MZSk
******
window
******
Hereda las propiedades de EventTarget
open() carga un recurso, abre una ventana
close() cierra la ventana
closed verifica si la ventana está cerrada
stop() deja de cargar una ventana
alert() muestra una alerta
print() imprime
prompt() es como un input
confirm() verifica una confirmación
screen devuelve una referencia al objeto de pantalla asociado con la ventana
screenLeft devuelve la distancia horizontal entre el borde izq del navegador y el borde izq de la pantalla
screenTop devuelve la distancia vertical entre el borde superior del navegador y el borde superior de la pantalla
scrollX devuelve el número de pixels que el documento se desplaza horizontalmente
scrollY devuelve el número de pixels que el documento se desplaza verticalmente
scroll() desplaza la ventana a un lugar particular (con options y posiciones)
resizeBy() cambia el tamaño de la ventana a una cantidad específica
resizeTo() redimensiona dinámicamente la ventana
moveBy() mueve la ventana en una ubicación relativa
moveTo() mueve la ventana en una ubicación absoluta
objetos barprop: en caso de que sean visibles no devuelven true
locationbar
menubar
personalbar
scrollbars
statusbar
toolbar
open / close
let youtubeURL = "https://youtube.com"
let ventana = window.open(youtubeURL)
ventana.close()
screen
const screen = window.screen;
console.log(screen);
document.write(screen.availWidth)
const screenLeft = window.screenLeft;
const screenTop = window.screenTop;
document.write(`Left: ${screenLeft} Top: ${screenTop}`)
location
window.location.href devuelve el href (url) de la página actual
window.location.hostname devuelve el dominio del servidor
window.location.pathname devuelve la ruta y en nombre de archivo de la página
window.location.protocol devuelve el protocolo utilizado (http, https)
window.location.assign() carga un nuevo documento
*******
EVENTOS
*******
Evento es cualquier cambio o cosa que sucede en la página.
Para hacer que un código se ejecute en un evento se usa un manejador de eventos (Event Handler)
html:
js forma antigua:
html:
const saludar = document.querySelector(".saludar");
saludar.onclick = ()=>{
alert("hola");
}
- addEventListener / removeEventListener
js:
html:
const saludar = document.querySelector(".saludar");
saludar.addEventListener("click", ()=>{
alert("hola");
});
- Objeto Evento
saludar.addEventListener("click", (event)=>{
console.log(event.target);
})
- Flujo de Eventos o Event Flow
cuando tenemos una sucesión de eventos:
Event Bubbling se ejecuta desde los hijos a los padres
Event Capturing si le doy true al padre se ejecuta primero
saludar.addEventListener("click", ()=>{
alert("hola");
},true);
- .stopPropagation() detiene el flujo
saludar.addEventListener("click", (event)=>{
alert("hola");
event.stopPropagation()
})
*****************
EVENTOS DEL MOUSE
*****************
click
dblclick doble click
mouseover cuando el puntero se mueve sobre un elemento o uno de sus hijos
mouseout cuando el puntero se mueve fuera de un elemento o uno de sus hijos
contextmenu click botón derecho en un elemento para abrir un menú contextual
mouseenter cuando el puntero se mueve sobre un elemento (IE)
mouseleave cuando el puntero se mueve fuera de un elemento
mousedown cuando el usuario aprieta un botón del mouse sobre un elemento
mouseup cuando el usuario suelta un botón del mouse sobre un elemento
mousemove cuando el puntero se mueve mientras está sobre un elemento
******************
EVENTOS DE TECLADO
******************
kedown cuando se deja de presionar una tecla
keypress cuando se presiona una tecla y se suelta
keyup cuando se suelta una tecla
**********************
EVENTOS DE LA INTERFAZ
**********************
error cuando sucede un error durante la carga de un archivo multimedia
load cuando un objeto se ha cargado
beforeunload antes de que un documento esté a punto de descargarse
unload cuando se ha descargado una página
resize cuando se cambia el tamaño de vista del documento
scroll cuando se desplaza la barra de desplazamiento
select después de que el usuario selecciona algún texto de inpu o textarea
Más sobre eventos:
https://www.w3schools.com/jsref/obj_events.asp
**********************
TIMERS, TEMPORIZADORES
**********************
setTimeout() se ejecuta una vez
setInterval() se ejecuta cada x milisegundos
clearTimeout()
clearInterval()
setTimeout(()=>{
documnet.write("hola")
},2000)
const saludar = ()=>{
documnet.write("hola")
};
setTimeout(saludar,2000);
************************************
CONTROL DE FLUJO Y MANEJO DE ERRORES
************************************
Sentencias de bloque (los bloques se ejecutan por orden)
Sentencias de control de flujo (if, else, switch, etc)
Sentencias de manejo de excepciones
******
SWITCH
******
let expresion = "plátano"
switch(expresion){
case "plátano":
console.log("esta fruta es amarilla");
break;
case "naranja":
console.log("esta fruta es naranja");
break;
default:
console.log("no coincide con ninguna");
}
*********************
EXCEPCIONES TRY CATCH
*********************
try {
dfhadfhdfhdfh
}
catch(error){
console.log(error);
console.log(typeof error);
console.log("lo siento, ocurrió un error de referencia");
} finally {
console.log("esto se muestra en cualquier caso");
}
throw lanza una excepción, podemos pasarle el tipo de dato que queramos, array, string, etc
try {
throw "excepción 1"
}
catch(error){
console.log(error);
}
finally {
console.log("esto se muestra en cualquier caso");
}
*********
CALLBACKS
*********
Un callback sería una función que pasamos como parámetro a otra función.
function prueba(callback){
callback("Roberto")
}
prueba(function (nombre){
console.log(nombre)
})
también:
prueba((nombre)=>{
console.log(nombre)
})
o también:
prueba(nombre => console.log(nombre))
Ejemplo:
class Persona {
constructor(nombre,telefono){
this.nombre = nombre;
this.telefono = telefono
}
};
const data = [
["Pedro", 666666666],
["María", 555555555],
["Marta", 444444444],
["Ramón", 333333333]
];
const personas = [];
for (let i = 0; i < data.length; i++) {
personas[i] = new Persona(data[i][0], data[i][1]);
}
// console.log(personas)
const obtenerPersona = (id, callback)=>{
if (personas[id] == undefined) {
callback("No se ha encontrado la persona")
} else {
callback(null,personas[id])
}
};
obtenerPersona(0,(err,persona)=>{
if (err) {
console.log(err)
} else {
console.log(persona.nombre, persona.telefono);
}
});
********
PROMISES
********
Las promesas son un objeto que tiene 2 callbacks, resolve y reject
Representan la terminación o el fracaso de una operación asíncrona
Sirven para no tener muchos condicionales anidados
Podemos acceder a la promesa con un then y manejar el error con un catch
let nombre = "Pedro";
const promesa = new Promise((resolve,reject)=>{
if (nombre !== "Pedro") reject("Lo siento, el nombre no es Pedro");
else resolve(nombre)
});
// console.log(promesa);
promesa.then((resultado)=>{
console.log(resultado)
}).catch((e)=>{
console.log(e)
})
*************
AWAIT & ASYNC
*************
Después de 3 segundos nos muestra el resultado, poprque las promesas son asíncronas
const objeto = {
propiedad1 : "valor1",
propiedad2 : "valor2",
propiedad3 : "valor3"
};
const obtenerInformacion = ()=>{
return new Promise((resolve,reject)=>{
setTimeout(()=> {resolve(objeto)}, 3000)
})
};
obtenerInformacion().then(resultado => console.log(resultado))
Con await y async:
const objeto = {
propiedad1 : "valor1",
propiedad2 : "valor2",
propiedad3 : "valor3"
};
const obtenerInformacion = ()=>{
return new Promise((resolve,reject)=>{
setTimeout(()=> {resolve(objeto)}, 3000)
})
};
const mostrarResultado = async()=>{
resultado = await obtenerInformacion();
console.log(resultado);
}
mostrarResultado();
otro ejemplo:
const obtenerInformacion = (text)=>{
return new Promise((resolve,reject)=>{
setTimeout(()=> {resolve(text)}, 3000)
})
};
obtenerInformacion("hola").then(resultado => console.log(resultado));
otro ejemplo:
const obtenerInformacion = (text)=>{
return new Promise((resolve,reject)=>{
setTimeout(()=> {resolve(text)}, Math.random()*200)
})
};
const mostrarData = async ()=>{
data1 = await obtenerInformacion("1: hola");
data2 = await obtenerInformacion("2: buenos días");
data3 = await obtenerInformacion("3: buenas noches");
console.log(data1);
console.log(data2);
console.log(data3);
};
mostrarData();
****
JSON
****
json no serializado
const jsonDeserializado = {"variable1" : "valor1", "variable2" : "valor2"};
console.log(jsonDeserializado.variable1);
console.log(typeof jsonDeserializado);
para enviarlo tenemos que serializarlo, es decir, pasarlo a cadena string
const serializado = JSON.stringify(jsonDeserializado);
console.log(serializado);
const deserializar = JSON.parse(serializado);
console.log(deserializar);
**********************
FETCH
**********************
fetch("https://httpbin.org/ip")
.then(function (response) {
return response.json();
})
.then(function (myJson) {
console.log(myJson.origin);
})
.catch(function (error) {
console.log("Error: " + error);
});
*Nota: Para habilitar el servidor:
.htaccess -> Header set Access-Control-Allow-Origin *
fetch("http://hashmania.pcriot.com/nav/code/info.json")
.then(function (response) {
return response.json();
})
.then(function (myJson) {
console.log(myJson);
})
.catch(function (error) {
console.log("Error: " + error);
});
**********************
CURSO JS 3
**********************
**********************
PROTOTYPE
**********************
En JS todo son objetos
let variable = "hola";
console.log(variable.__proto__); -> prototipos ya creados
let variable = function(){};
console.log(variable.prototype); -> prototipos que creamos nosotros
Todos los objetos heredan al menos un prototipo
Un prototipo que creamos nosotros se puede modificar
Tiene una existencia física en la memoria
**********************
USE STRICT
**********************
Convierte errores de JS en excepciones
"use strict";