Views: 4893644 words0 Comments on JavaScriptPublished On: agosto 16th, 2022Last Updated: febrero 13th, 2023By

lestrades

JavaScript Lenguaje de programación

JavaScript es un lenguaje de programación interpretado, dialecto del estándar ECMAScript. Se define como orientado a objetos,​ basado en prototipos, imperativo, débilmente tipado y dinámico.

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

Apareció en: 4 de diciembre de 1995
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

Javascript:

Actualmente JavaScript tiene otros usos añadidos:

Otros framework y aplicaciones relacionados con JavaScript:

  • Variables, constantes y objetos:

  • Las declaraciones var tienen un ámbito global o un ámbito función/local, mientras que let y const tienen un ámbito de bloque.
  • Las variables var pueden ser modificadas y re-declaradas dentro de su ámbito; las variables let pueden ser modificadas, pero no re-declaradas; las variables const 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 con undefinedlet y const no se inicializan.
  • Mientras que var y let pueden ser declaradas sin ser inicializadas, const debe ser inicializada durante la declaración.

Keiler Guardo Herrera

'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();