Javascript

Guía para practicar Javascript desde 0

Recuerda que todas las palabras inician con minúsculas y con camelCase

    SALIDAS

    document.write('Hola');

    console.log('Hi Mike');

    alert('Listos para el proceso');

    window.print();

    print();

    ELIMINAR CLASE O ID

    contenedorLista.remove();

    CSS CON JS

    var contenedorLista = document.querySelector('.lista');

    contenedorLista.style.background = 'black';

    MÉTODOS

    BUCLES

    IF   -   if(# == # &&ambos ||cualquiera de los 2){}else{};

    var i = 0;

    var a = 5;

    if(i == 1 && a == 5){

      document.write('Es el if');

    }else{

      document.write('Sigue intentando');

    };

    DO - Aquí usamos ++.

    var i = 0;

    do{

        document.write('Hola <br>')

        i++;

    } while (i <= 5);

    WHILE - Aquí usamos ++.

    var i = 0;

    while (i <= 3){

      document.write('Hola <br>')

      i = i +1;

    };

    FOR

    for - in - off

    alto - derecha - menos menos - 10>3 -- de mayor a menor

    bajo - izquierda - más más - de menor a mayor 0 - 10 ++

    for(i = 0; i < 10; i++){ document.write('Hola <br>') }

    FUNCION FLECHA

    ()=>{}

    let suma = function (a,b) => { return a+b }

    let suma = (a, b) => a+b;

    SELECCIONES - VARIAS OPCIONES

    var i = 7;

  Si ningún case tiene la respuesta correcta, se mostrará el default.

    switch(nombre_variable){

        case resultado_variable:

        document.write('Soy el # 1');

        break;

 

        case 'Mike':

        document.write('Soy un nombre');

        break;

 

        case 7:

        document.write('Soy el 7');

        break;

 

        default:

        document.write('No es ninguno');

    }

    OBJETOS

    Arrays (arreglos) - utiliza el salto de línea <br> al final

                        para mostrar el resultado

    var colection = [];

// Agregar objetos

        colection[0] = 7;

        colection[1] = 'Hola';

        colection[2] = 25;

        colection[3] = 'Mike';

// * Agregar elementos al array con funciones

  colection.unshift(1); // - al 1er elemento

  colection.push('hasta el último'); // - al final

// Eliminar elementos del array

  colection.shift(); // - al 1er elemento

  colection.pop(); // - al final

    for(elemento of colection){

        document.write(elemento + '<br>');

    };

    OBJETOS JSON

    EJEMPLO 1 - básico

    dentro de las llaves todos usan dos puntos {:[{0, 1, 2}]}

    const obj = {

            nombre : 'Maria',

            edad : 15,

            correo : 'ma15@gmail.com'};

    document.write(obj.edad);

    EJEMPLO 2 - intermedio (recuerda siempre comillas en varchar simples o dobles)

                - '' - "" - ´´ - `` - \\ - // - si ya se usaron " siguen las simples ' 

SEPARADO TODO POR COMAS , , , , , , , , , , ,

                                                                                           

    const obj = {nombre : [

      {tamaño: 174, peso: 70, educacion: 'universitaria'}, //este es el elemento 0

      {tamaño: 190, peso: 850, educacion: 'preescolar'} //este es el elemento 1

                            ],

                    edad : 15,

                    correo : 'ma15@gmail.com'};

    document.write(obj.nombre[1].tamaño);

    MANIPULACIÓN DEL DOM

    EJEMPLO 1 - básico

     var contenedorLista = document.querySelector('.lista');

    contenedorLista.addEventListener('mouseover'<-//Nombre del evento, () => {

      alert('Hola Mk');

    });

    EJEMPLO 2 - Intermedio

     var contenedorLista = document.querySelector('.lista');

    contenedorLista.style.background = 'black';

    var contador = 0;

    var listaItem1 = document.querySelector('.lista li:nth-child(1)')

    contenedorLista.addEventListener('click', () => {

    SETINTERVAL ES UNA FUNCION QUE CONTIENE UNA FUNCION (FLECHA ()=>{ ... },1000)

    es por milisegundos 1000 = 1 segundo

    setInterval(recibe varios parametros: programacion, funcion, método..,

               separada por la coma con el tiempo en ms)

      setInterval(() => {

        document.write('Hola Mundo <br>');

        listaItem1.innerText = contador++; // Este es para sumar de uno en uno..

      }, 1000);

      listaItem1.innerText = contador; // Moverlo dentro de setInterval.

     

    });

    EJEMPLO 3 - Intermedio - METODO PARA AGREGAR ELEMENTOS LI

      contenedorLista.addEventListener('click', ()=>{

      let nuevoElemento = document.createElement('li'); //Crea elemento nuevo con la etiqueta li

      nuevoElemento.innerText = 'Este es el nuevo elemento'; // añadir texto al elemento

      nuevoElemento.classList.add('nuevaClase'); // añadirle una clase

      nuevoElemento.id = 'nuevoid'; // añadir atributo id

      nuevoElemento.setAttribute('name', 'name'); // añadir atributos

      contenedorLista.appendChild(nuevoElemento); // llamando a la propiedad con la nueva variable.

        // se agrega al final de la lista.

     contenedorLista.insertBefore(nuevoElemento, listaItem2); // insertar en la lista, antes de li 2 - entre el 1 y el 2

        O podemos cambiar appendChild por insertBefore, agregando datos adicionales

        como listaItem2

      

    })

Así es como queda el ejercicio viendolo web

<li class="nuevaClase" id="nuevoid" name="name">

Este es el nuevo elemento</li>

    EJEMPLO 4 MOVIENDO UN CUADRO (onclick='nombre_de_la_funcion')

Importante no olvidar el

      position:relative; 1 - contenedor

      position:absolute; 2 - elemento

 <button onclick="myMove()">dale click aqui</button>

  <div id="container">

      <div id="animate">      </div>

    </div>

        const myMove = () => {

        let id = null;

        const elem = document.querySelector('#animate');

        let pos = 0;

        id = setInterval(frame, 1);

        function frame () {

       

          if(pos == 350){

            clearInterval(id); // funcion para detener setInterval

          }else{

            pos++;

            elem.style.top = pos +  'px';

            elem.style.left = pos + 'px';

          }

        }

      };

    CALLBACKS

ASINCRONA - Funcion que pasa a otra funcion

  const pruebaAsincrona = async ()=>{

        let resultado = await fetch('frase.txt');

        let respuesta = await resultado.text(); //como se reciben los datos, en texto

        document.write(respuesta);

      }

      pruebaAsincrona();