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

    var i = 0;

    do{

        document.write('Hola <br>')

        i++;

    } while (i <= 5);

    WHILE

    var i = 0;

    while (i <= 3){

      document.write('Hola <br>')

      i = i +1;

    };

    FOR

    for - in - off

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

    FUNCIONES

    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(i){

        case 1:

        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

    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 ' dentro de... unas fuera otras

                                                                                                                                                                dentro

    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(() => {

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

      }, 1000);

      listaItem1.innerText = contador;

     

    });

    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.

        O podemos cambiar appendChild por insertBefore

        contenedorLista.insertBefore(nuevoElemento, listaItem2);

            // insertar en la lista, antes de li 2 - entre el 1 y el 2

    })

Así es como queda el ejercicio viendolo web

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

Este es el nuevo elemento</li>