JavaScript Lenguaje de programación
Se utiliza principalmente del lado del cliente, implementado como parte de un navegador web permitiendo mejoras en la interfaz de usuario y páginas web dinámicas y JavaScript del lado del servidor (Server-side JavaScript o SSJS). Su uso en aplicaciones externas a la web, por ejemplo en documentos PDF, aplicaciones de escritorio (mayoritariamente widgets) es también significativo. Wikipedia
Diseñado por: Netscape Communications, Fundación Mozilla
Sistema de tipos: Débil, dinámico, duck
Implementaciones: SpiderMonkey, Rhino, KJS, JavaScriptCore, V8, Chakra.
Dialectos: ECMAScript
Influido por: Java, Perl, Self, Python, C, Scheme
Ha influido a: ObjectiveJ, JScript .NET, TIScript
- Variables, constantes y objetos:
- Las declaraciones
var
tienen un ámbito global o un ámbito función/local, mientras quelet
yconst
tienen un ámbito de bloque. - Las variables
var
pueden ser modificadas y re-declaradas dentro de su ámbito; las variableslet
pueden ser modificadas, pero no re-declaradas; las variablesconst
no pueden ser modificadas ni re-declaradas. - Todas ellas se elevan a la parte superior de su ámbito. Pero mientras que las variables
var
se inicializan conundefined
,let
yconst
no se inicializan. - Mientras que
var
ylet
pueden ser declaradas sin ser inicializadas,const
debe ser inicializada durante la declaración.
'use strict' // Operadores y tipos de datos var numero_texto = "33" console.log(Number(numero_texto)+7) console.log(parseInt(numero_texto)+7) console.log(parseFloat(numero_texto)+7) console.log(String(numero_texto)+7) //saber el tipo de dato console.log(typeof numero_texto) //operadores del if // AND && // OR|| // Negacion !
//Crear un objeto const producto = { nombreProducto: "Monitor", precio: 500, disponible: true } const medidas = { peso: "1kg", medida: "1M" } //Modifificar objetos********** //Añadir una propiedad producto.imagen = "imagen.jpg"; //Eliminar una propiedad delete producto.disponible; //Crear una variable con una propiedad de un objeto const precioproducto = producto.nombreproducto; //Destructuring const { nombreProducto, precio, etc } = producto;//En este caso creamos la variable (nombreProducto,precio,etc) y extraemos el valor. //Freece congelar un objeto Object.freeze(producto)//Ya no podemos agregar ni borrar propiedades, ni tampoco modificarlas. //Seal Object.seal(producto)//Ya no podemos agregar ni borrar propiedades, pero se pueden modificar. //Unir dos objetos const nuevoProducto = {...producto, ... medidas};
const numeros = [ 1, 54, 8, 4 ]; const cantidad = new Array(5); const lenguajes = new Array("php", "C#", "Kotlin") //Se ven los valores en tipo tabla console.table(numeros); //SALIDA: /* | indice | valores | | 0 | 1 | | 1 | 54 | | 2 | 8 | | 3 | 4 | */ //Acceder a los elementos de un arreglo console.log(numeros[ 2 ]);// SALIDA: 8 //Modificar un elemento lenguajes[ 0 ] = "PHP"; console.log(lenguajes[0]);// SALIDA: PHP //agregar un elemento al final del arreglo lenguajes.push("JavaScript"); //agregar al principio del arreglo lenguajes.unshift("Basic"); //eliminar el primer elemento numeros.pop(); //eliminar el ultimo elemento numeros.shift(); //eliminar un elemento por indice numeros.slice(2, 1);//el primer numero es el indice, el segundo cuantas posiciones. //Rest operator añadir un nuevo arreglo con otro arreglo dentro para no modificar el original const nuevoarreglo = [ ...numeros, 25 ];//añade el numero al final const nuevoarreglo2 = [ 25, ...numeros ];//anade el numero al principio //longitud de array console.log("Longitud: " + lenguajes.length);//SALIDA: Longitud: 5 //ordenar alfabeticamente lenguajes.sort(); //invertir el orden lenguajes.reverse(); //buscar dentro de un array const busqueda01 = lenguajes.find(lenguaje => lenguaje == "C#"); console.log('Busqueda: '+busqueda01) //buscar el indice const busqueda02 = lenguajes.findIndex(lenguaje => lenguaje == "C#"); console.log(busqueda02)//SALIDA: //buscar un numero que cumpla una condicion. const precio = [ 10, 20, 30, 40, 50, 60 ] const busqueda2 = precio.some(lenguaje => precio > 8); console.log("some " + busqueda2)//SALIDA: //includes solo para arrays sin objetos const otraforma = lenguajes.includes("C#"); console.log(otraforma);//SALIDA: //Listar todos los elementos de un array lenguajes.forEach(function (lenguaje) { console.log('Listado: ' + lenguaje);//SALIDA: Listado: PHP|Listado: Kotlin|Listado: JavaScript|Listado: C#|Listado: Basic }) //Some ideal para arreglo de objetos const producto = [ { nombre: "Monitor", precio: 500 }, { nombre: "teclado", precio: 50 }, { nombre: "raton", precio: 10 } ]; let resultado = producto.some(function (producto) { return producto.nombre === "raton" }) let resultado2 = producto.some(producto => producto.nombre === "raton"); console.log(resultado, resultado2);//SALIDA: true true //Ver el precio de todos los productos(Reduce) resultado = producto.reduce(function (total, producto) { return total + producto.precio }, 0); //forma abreviada resultado2 = producto.reduce((total, producto) => total + producto.precio, 0) console.log(resultado, resultado2);//SALIDA: 560 560 //Filtrar valores resultado = producto.filter(function (producto) { return producto.precio > 15 }); //forma abreviada resultado2 = producto.filter((producto) => producto.precio > 15, 0); console.log(resultado, resultado2);//SALIDA: Array [ {…}, {…} ] Array[ {… }, {… } ]
const lenguajes = new Array("php", "C#", "Kotlin") //Otra forma de crear un arreglo const dias = ['lunes', 'martes', "miercoles", "jueves",'viernes', 'sabado', 'domingo']; //Desestructuración const [dia1] = dias; console.log(dia1);//SAlIDA: lunes const [,,,dia4]= dias;// Cada coma representa un elemento console.log(dia4);//SALIDA: jueves const[,,...resto]= dias; console.log(resto);//SALIDA: Array(5) [ "miercoles", "jueves", "viernes", "sabado", "domingo" ]
'use strict' //Desestructuración de objetos const persona = { nombre : "Tony", edad: 45, clave: "Ironman", comic: "Marvel", mote: "Hombre de hierro", vehiculo: "Audi R8 e-tron", } const { nombre, edad, ...rest } = persona; console.log(nombre); //Tony console.log(rest); //Object { clave: "Ironman", comic: "Marvel", mote: "Hombre de hierro" } //Notas Se puede renombrar una propidad const { clave: c } = persona; console.log(c)//Ironman //Notas Se puede iniciar una propiedad, si existe se sobrescribe si no se crea. const { vehiculo="Ford Fiesta" , apellido = "start"} = persona; console.log(vehiculo, apellido);//Audi R8 e - tron start
- Métodos, funciones y clases :
//Declaracion de función (de esta manera esta función se puede llamar antes o despues de crearla) calculadora(); function calculadora() { console.log("Hola soy la calculadora"); } //Expresión de la función const sumar = function suma() { console.log(10 + 10) } sumar(); //funcion tipo IIFE (function () { console.log("Esto es una función que se llama a ella misma") })(); //Diferencia en JS entre métodos y funciones. const numero1 = 20; const numero2 = "20"; console.log(parseInt(numero2)); //parseInt() es una función. console.log(numero1.toString()); // .toString es un método. //Funciones con parámetros y argumentos console.log("*** Funciones con parámetros y argumentos***") function sumarParametros(numero1,numero2){ //numero1 y numero2 son parámetros console.log(numero1 + numero2); } sumarParametros(10, 20);// 10 y 20 son argumentos o valores reales. //Párametros por defecto function multiplica(n1,n2 = 0){//n2 tiene el valor 0 por defecto console.log(n1 * n2) } multiplica(10,12); multiplica(10); //Funciones que devuelven valores console.log("*** Funciones que devuelven valores ***") let total = 0; function totalCarrito(precio){ return total += precio; } total = totalCarrito(200); total = totalCarrito(250); total = totalCarrito(150); console.log(total); //Métodos de propiedad const reproductor = { reproducir: function(id) { console.log(`Reproduciendo la canción con ID: ${id}`); } } reproductor.reproducir(3540);
//Arrow functions (Funciones flecha) const sumaNoArrow = function(n1,n2){ console.log(n1 + n2); } sumaNoArrow(5,10); //Cuando solo hay una línea const sumaArrow = (n1,n2)=> console.log(n1 + n2); sumaArrow(5,10); //Cuando solo hay un parámetro const aprendiendo = tecnologia => console.log(`Aprendiendo ${tecnologia}`); aprendiendo("JavaScript");
/* Object Literal */ const producto = { nombre: 'Monitor', precio: 500 } // Object Constructor (Clases) function Producto(nombre, precio) { this.nombre = nombre; this.precio = precio; } const producto2 = new Producto("Tablet", 800); const producto3 = new Producto("Laptop", 1000); console.log(producto); console.log(producto2); console.log(producto3);
function Producto(nombre, precio) { this.nombre = nombre; this.precio = precio; } const producto2 = new Producto("Tablet", 800); const producto3 = new Producto("Laptop", 1000); /*Prototype se usa para crear funciones que solo se utilizan en un Objeto específico*/ Producto.prototype.formatearProducto = function(){ return `El producto ${this.nombre} tiene un precio de ${this.precio}€`; } console.log(producto2.formatearProducto() ); console.log(producto3.formatearProducto() );
class Producto{ constructor(nombre,precio){ this.nombre = nombre; this.precio = precio; } formatearProducto(){ return `El producto ${this.nombre} tiene un precio de ${this.precio}€`; } precioProducto(){ return `El precio es: ${this.precio}€`; } } const producto2 = new Producto("Tablet", 800); console.log(producto2.formatearProducto() ); console.log(producto2.precioProducto() ); //Herencia class Libro extends Producto{ constructor(nombre,precio, isbn){ super(nombre, precio); this.isbn = isbn } formatearProducto(){ return `${super.formatearProducto()} y su ISBN es ${this.isbn}`; } } const libro = new Libro("JavaScript la revolución", 120, "1654321843218") console.log(libro.formatearProducto() );
'use stric' //alerta alert("Hola") //Confirmación var resultado = confirm("¿Estas seguro que quieres continuar?") console.log(resultado) //Ingreso datos resultado = prompt("¿Que edad tienes?", "No has puesto edad"); console.log(resultado)
//parametro Rest //En una funcion si se le pasan mas parámetros se ponen tres punto para que con los restantes se cree un array function listadoFrutas( fruta1, fruta2,...restoDeFrutas){ console.log("Fruta 1: ", fruta1); console.log("Fruta 2: ",fruta2); console.log(restoDeFrutas); } listadoFrutas("Naraja","Manzana","Sandia", "Pera","Melón","Coco") /* Salida (4) ['Sandia', 'Pera', 'Melón', 'Coco'] 0: "Sandia" 1: "Pera" 2: "Melón" 3: "Coco" length: 4 [[Prototype]]: Array(0) */ //Parametro Spread cuando tenemos un arreglo y queremos que la funcion tome los datos separados var frutas = ["Naraja","Manzana"] listadoFrutas(...frutas, "Sandia") /*Salida Fruta 1: Naraja Fruta 2: Manzana ['Sandia']0: "Sandia" length: 1 [[Prototype]]: Array(0) */
//parametro Rest /*En una funcion si se le pasan mas parámetros se ponen tres puntos para que con los restantes se cree un array*/ function listadoFrutas( fruta1, fruta2,...restoDeFrutas){ console.log("Fruta 1: ", fruta1); console.log("Fruta 2: ",fruta2); console.log(restoDeFrutas); } listadoFrutas("Naraja","Manzana","Sandia", "Pera","Melón","Coco") /* Salida (4) ['Sandia', 'Pera', 'Melón', 'Coco'] 0: "Sandia" 1: "Pera" 2: "Melón" 3: "Coco" length: 4 [[Prototype]]: Array(0) */ //Parametro Spread cuando tenemos un arreglo y queremos que la funcion tome los datos separados var frutas = ["Naraja","Manzana"] listadoFrutas(...frutas, "Sandia") /*Salida Fruta 1: Naraja Fruta 2: Manzana ['Sandia']0: "Sandia" length: 1 [[Prototype]]: Array(0) */
var numero = 444; var texto1 = "Bienvenido"; var texto2 = "Buen curso"; //Transformar en String numero.toString(); //Convertir en mayusculas texto1.toUpperCase(); //Convertir en minusculas texto1.toLowerCase(); //Calcular longitud variable o array texto1.length; //Concatenar, unir textos console.log(texto1+texto2); console.log(texto1.concat(texto2)); // buscar dentro de un String texto1.indexOf("veni"); texto1.lastIndexOf("v"); texto1.search("v");
//setTimeout espera a realizar las instrucciones los milisegundos que le pongamos setTimeout( ()=> console.log("timeout..."),3000) //setInterval realiza las instrucciones repetidamente cada tantos milisegundos setInterval( ()=> console.log("setinterval..."),5000)
- Bucles, condicionales y manejo de errores:
const edad = 18; if (edad < 18) { console.log("Alice es menor de 18 años."); } else if (edad >= 18 && edad <= 21) { console.log("Alice tiene entre 18 y 21 años de edad."); } else { console.log("Alice tiene mas de 21 años."); }
const nombre_Variable = ( aserción ) ? acción_si_verdadero : acción_si_falso ;
'use strict' var año = 0 while (año<=10) { año++ console.log(año) }
'use strict' var año = 0 do { año++ console.log(año) }while(año<10)
'use strict' var edad = 18; switch(edad){ case 18: console.log("Eres mayor de edad"); break; case 25: console.log("Ya eres adulto"); break; default: console.log("No se que eres"); }
Nombre_Array.forEach ( (elemento, indice) => { Código que se ejecutará por cada interacción del array}); Si no es necesario el indice: Nombre_Array.forEach ( elemento => { Código que se ejecutará por cada interacción del array});
const producto = [ {nombre: "Monitor", precio: 500}, {nombre: "teclado", precio: 50}, {nombre: "raton", precio: 10} ]; const arregloEach = producto.forEach (producto => producto.nombre); const arregloMap = producto.map (producto => producto.nombre); console.log(`Salida Each: ${arregloEach}`); console.log(`Salida Map: ${arregloMap}`);
const numero1 = 20; const numero2 = 30; console.log(numero1); try { console.log(numero3); } catch (error) { console.log(error) console.log(`No funciona`) } /*Se puede comprobar que pasa el error y se muestra el contenido de la siguiente línea*/ console.log(numero2);
const usuarioIdentificado = new Promise((resolve,reject) =>{ const auth = true if(auth){ resolve("Ususario identificado"); //El promise se cumple }else{ reject("Usuario no identificado"); //el promise no se cumple } }) console.log(usuarioIdentificado); usuarioIdentificado .then( (resultado) => console.log(resultado)) .catch( (error) => console.log(error)) /* En los promise existen 3 valores * Pending: No se ha cumplido pero tampoco se ha rechazado. * Fulfilled: ya se cumplió * Rejected: Se ha rechazado */
function descargarNuevosClientes(){ return new Promise(resolve =>{ console.log("descargando clientes ... espere...") setTimeout(()=>{resolve("Los clientes fueron descargados");},5000); }) } function descargarNuevosPedidos(){ return new Promise(resolve =>{ console.log("descargando pedidos ... espere...") setTimeout(()=>{resolve("Los pedidos fueron descargados");},3000); }) } async function app(){ try { /*Cuando tenemos varias tareas y no queramos que esperen unas por otras la forma optima de hacerlo es con un arreglo*/ const resultado = await Promise.all([descargarNuevosClientes(),descargarNuevosPedidos()]); console.log(resultado[0]); console.log(resultado[1]); } catch (error) { console.log(error); } } app(); //Podemos comprobar que el código siguiente no se bloquea los 5 segundos console.log("Este código no es bloqueado")
DOM:
DOM significa Document Object Model, en español sería Modelo de Objetos del Documento. Es una interfaz de programación que nos permite crear, cambiar, o remover elementos del documento. También podemos agregar eventos a esos elementos para hacer más dinámica nuestra página.
//*** Selecionar elementos *** // querySelector (se accede por clase(.), id (#) o selector, pero solo al primero) const heading = document.querySelector(".header__texto h2"); //retorna 0 o 1 elemento heading.textContent = "Nuevo heading";//cambiar texto console.log(heading); const parrafo = document.querySelector(".header__texto p"); parrafo.textContent = "Cambiado";//cambiar texto console.log(parrafo); //querySelectorAll (se accede por clase(.), id (#) o selector a todos ellos) const enlaces = document.querySelectorAll(".navegacion a"); //retorna un array de elementos console.log(enlaces[0]); enlaces[0].textContent = "Enlace cambiado";//cambiar texto enlaces[0].href = "https://google.es";//cambiar enlace enlaces[0].classList.add("nueva-clase")//añadir clase enlaces[0].classList.remove("navegacion__enlace");//eliminar clase /*En firefox developer ediccion se puede ver, desde la consola, el listado de elementos que podemos cambiar*/ // getElementById (se accede al componente solo por id, no hace falta ponerle (#)) const heading2 = document.getElementById("heading"); console.log(heading2);
//Generar nuevo enlace (Se recomienda en mayúscular) /* H1, H2, A, P, DIV, IMG, etc. Para añadir otros elementos*/ const nuevoEnlace = document.createElement("A"); //Agregar el href nuevoEnlace.href = "nuevo-enlace.html"; //Agregar el texto nuevoEnlace.textContent = "Un nuevo enlace"; //Agregar la clase nuevoEnlace.classList.add("navegacion__enlace"); //Agregarlo al documento const navegacion = document.querySelector(".navegacion"); navegacion.appendChild(nuevoEnlace); console.log(nuevoEnlace);
//Eventos console.log("inicio"); //load espera a que todo el JS,CSS y HTML esté cargado. window.addEventListener("load", function() { console.log("Load"); }) //Otra forma de hacerlo window.onload = function(){ console.log("onLoad"); } //Solo espera por el HTML pero no el JS, CSS o las imágenes. document.addEventListener("DOMContentLoaded", function(){ console.log("DOMContentLoaded"); }) console.log("Log final"); //Genera un evento al hacer scroll window.onscroll = function(){ console.log("Scroling...") } // selecionar elementos y asociarles un evento const btnEnviar = document.querySelector(".boton--primario"); //Atención click ha de ser en minúsculas, evento puede ser e, event, o lo que quieras. btnEnviar.addEventListener("click", function(evento) { console.log(evento); evento.preventDefault();//Con esto prevenimos que recargue la página //Se usa para validar un formulario y no se cargue la página por default console.log("Enviando formulario..."); }); //Eventos con el teclado Inputs y TexArea const nombre = document.querySelector("#nombre"); /* change: registra cuando el foco sale del campo. input: registra nada más que comienza a escribir. */ nombre.addEventListener("change", function(){ console.log("Termina de escribir"); }) nombre.addEventListener("input", function(){ console.log("Escribiendo..."); })
/*El evento Submit para validación de formularios (enviar información) Se necesita selecionar todo el formulario y que este tenga una clase submit*/ // ***Forma correcta de ordenar el código //**Variables */ const datos = { nombre: "", email: "", mensaje: "" } const nombre = document.querySelector("#nombre"); const email = document.querySelector("#email"); const mensaje = document.querySelector("#mensaje"); const formulario = document.querySelector(".formulario");//nota que esto es una clase no un id //**EvenListeners */ nombre.addEventListener("input",leerTexto); email.addEventListener("input",leerTexto); mensaje.addEventListener("input",leerTexto); formulario.addEventListener("submit", function(evento){ evento.preventDefault();// recuerda para no enviar el formulario por defecto. //validar el formulario const {nombre, email, mensaje} = datos; if(nombre === ""||email === ""||mensaje === ""){ // REFACTORING mostrarError("Todos los campos son obligatorios"); mostrar("Todos los campos son obligatorios", "error"); return; //Corta la ejecución del código. } //enviar el formulario // REFACTORING mostrarEnviado("Mensaje enviado"); mostrar("Mensaje enviado"); }) /**Funciones */ //Lee el texto y lo convierte en un arry function leerTexto(evento){ datos[evento.target.id] = evento.target.value; console.log(datos); } //Muestra un error en pantalla debajo del botón function mostrarError(mensaje) { //Creamos el elemento const error = document.createElement("P"); //Escribimos el mensaje error.textContent = mensaje; //Insertamos la clase error.classList.add("error"); //Lo introducimos en el formulario formulario.appendChild(error); //Desaparezca despues de 5 segundos setTimeout(()=> error.remove() , 5000); } function mostrarEnviado(mensaje) { const envio = document.createElement("P"); envio.textContent = mensaje; envio.classList.add("correcto"); formulario.appendChild(envio); //Desaparezca despues de 5 segundos setTimeout(()=> envio.remove() , 5000); } //Refactoring de las dos funciones mostrarError y mostrarEnviando function mostrar(mensaje, error = null){ const alerta = document.createElement("P"); alerta.textContent = mensaje; if(error) { alerta.classList.add("error"); }else{ alerta.classList.add("correcto"); } formulario.appendChild(alerta); //Desaparezca despues de 5 segundos setTimeout(()=> alerta.remove() , 5000); }
- APIS:
const boton = document.querySelector("#boton"); boton.addEventListener("click", () =>{ Notification.requestPermission() .then(resultado => console.log(`El resultado es ${resultado}`)) }); if(Notification.permission == "granted") { new Notification("Esta es una notificación",{ icon: "img/cabezalogo.png", body: "Probando ando" }) };
//Fetch obtener datos de un archivo .json const archivo = "empleados.json";//Enlace al archivo .json /* Com promises */ function obtenerEmpleados(){ fetch(archivo) .then(resultado => resultado.json()) .then( datos => console.log(datos)) } obtenerEmpleados(); /* Con async / await */ async function obtenerEmpleados2(){ const resultado = await fetch(archivo); const datos = await resultado.json(); console.log(datos); } obtenerEmpleados2();
// En javascript hay un objeto llamado Date const diaHoy = new Date(); let valor; // En este momento fecha en milisegundos Date.now(); // Date es Mes, dia y año let cumple = new Date('1-5-1987'); cumple = new Date('January 5 1987'); // .toString lo cambiaria de object a string console.log(typeof valor) // Convertir fecha a string // cumple.toString(); valor = cumple; valor = diaHoy.getMonth(); valor = diaHoy.getDate(); valor = diaHoy.getDay(); valor = diaHoy.getFullYear(); valor = diaHoy.getMinutes(); valor = diaHoy.getHours(); valor = diaHoy.getTime(); valor = diaHoy.getFullYear(); valor = diaHoy.setFullYear(2018); console.log(valor); // MomentJS libreria para fechas moment.locale('es'); console.log(moment().format('MMMM Do YYYY, h:mm:ss a', diaHoy)); console.log(moment().add(3, 'days').calendar()); console.log(moment().format('LLLL', diaHoy))
- A tener en cuenta:
Node. js sirve para crear sitios web dinámicos muy eficientes, escritos con el lenguaje de programación JavaScript. Normalmente, los desarrolladores se decantan por este entorno de ejecución cuando buscan que los procesos se ejecuten de forma ágil y sin ningún tipo de bloqueo cuando las conexiones se multiplican.
npm es el sistema de gestión de paquetes por defecto para Node. js, un entorno de ejecución para JavaScript, bajo Artistic License 2.0.
Aunque puedes ver diferentes variaciones del significado de npm, las siglas significan «Node package manager».
npm es un gestor de paquetes para los proyectos de Node.js disponibles para su uso público. Los proyectos disponibles en el registro de npm se llaman «paquetes».
El registro npm tiene más de 1,3 millones de paquetes que son utilizados por más de 11 millones de desarrolladores en todo el mundo.
Abrimos el terminal de Visual Studio Code y ejecutamos el siguiente código:
npm init
Y procedemos a rellenar todos los apartados que se nos van pidiendo. El .json resultante es el siguiente:
{ "name": "ejercicio01", "version": "1.0.0", "description": "Primer ejercicio", "main": "index.js", "scripts": { "test": "echo \"Error: no test specified\" && exit 1" }, "author": "JL Domingo", "license": "ISC" }
Para ejecutar un Script se utiliza:
npm run nombre_script
Sass es un procesador CSS. Un preprocesador CSS es una herramienta que nos permite generar, de manera automática, hojas de estilo, añadiéndoles características que no tiene CSS, y que son propias de los lenguajes de programación, como pueden ser variables, funciones, selectores anidados, herencia, etcétera.
Instalar la dependencia de SASS en el terminal de Visual Studio Code:
npm install sass //En el caso de que se quiera que la dependencia de desarrollo npm install sass --save-dev
Gulp es una herramienta que forma parte del desarrollo de softwares, y está especialmente relacionada con el front-end. Su principal objetivo es automatizar los flujos de trabajo lentos y repetitivos, facilitando y acelerando el rendimiento diario del programador.
Instalar la dependencia de Gulp en el terminal de Visual Studio Code:
npm install gulp //En el caso de que se quiera que la dependencia sea solo de desarrollo npm install gulp --save-dev //tambien se puede hacer con la forma abreviada npm i -D gulp
Hay que crear un archivo en la raíz del proyecto llamado gulpfile.js
Crear una tarea en Gulp:
function tarea(callback){ //el nombre que le pongas aquí *1 console.log("Hola mundo Gulp") callback();//*1 Es el que debe cerrar y avisa a Gulp que llegamos al final de la función } exports.tarea = tarea;//A la función tarea no hay que ponerle ()
Para llamar a la tarea desde npx desde el terminal de Visual Studio Code:
npx gulp tarea
Para llamar la tarea con npm desde el terminal de Visual Studio Code:
Hay que ir al archivo package.json y añadir un script en su apartado scripts: "tarea" : "gulp tarea"
Y en el terminar se escribe: npm run tarea
Se utiliza para guardar datos en el navegador y al volver a la página esos datos persistan.
// Introducir datos en localStorage, siempre clave/valor // toodos sus datos son string localStorage.setItem('nombre', 1); const producto = { nombre: "Monitor 24 pulgadas", precio: 300, } //Convertimos un objeto en un string const productoString = JSON.stringify(producto); localStorage.setItem('producto', productoString); //Convertimos un arry en string const meses = [ 'Enero', 'Febrero', 'Marzo' ]; localStorage.setItem('meses', JSON.stringify(meses)); //obtener datos de localStorage ******************************* const nombre = localStorage.getItem('nombre'); console.log(nombre); const productoJSON = localStorage.getItem('producto'); console.log(JSON.parse(productoJSON)); const mesesGet = localStorage.getItem('meses'); const mesesArray = JSON.parse(mesesGet); console.log(mesesArray); //Eliminar elementos de localStorage****************************** localStorage.removeItem("nombre"); // En cuanto a toda la funcionalidad d eun CRUD, nos haria falta un update, // no hay como tal un Update... lo que se podría hacer es... const mesesArray2 = JSON.parse(localStorage.getItem('meses')); console.log(mesesArray2) mesesArray2.push('nuevo Mes'); console.log(mesesArray2); localStorage.setItem('meses', JSON.stringify(mesesArray2)) //para borrar todo el localStorage localStorage.clear();