Repaso antes del examen

1) Tipos de variables

Ejemplos de uso de estas variables:

2) Comparaciones y operadores lógicos

Siempre que se hace una comparación o se usa un operador lógico es resultado es de tipo boolean

Y = AND = &&

condición1 && condición2 && condición3

Sólo da true cuando todas las condiciones son true.

Cuando se evaluan los && se hace de izquierda a derecha. El cortocircuito: si encuentra una condición que es false no continua la evaluación de la expresión.

O = OR = ||

condicion1 || condición2 || condición3

Da true si al menos una de las condiciones es true.

El cortocircuito: si encuentra una condición que es true no continua la evaluación de la expresión.

Negado = NOT = !

! condición

Si la condición es true da false. Si es false da true.

Un valor está dentro de un rango

Un valor está en un conjunto de valores

3) Operadores aritméticos

Todas las instrucciones incrementan el valor del número en 1 unidad:

    let numero = 100;
    numero++;
    ++numero;
    numero += 1;
    numero = numero + 1;
    numero = 1 + numero;
    numero = numero + 100 - 99;
    numero = numero + numero / numero;

4) Arrays

Unidimensional:

    const parrafos = document.querySelectorAll('p');

Imprimir el array de un montón de maneras diferentes:

    const palos = [ 'oro', 'basto', 'copa', 'espada' ];

// Recorrer un array usando índices permite leer o escribir cada elemento
    for (let i=0; i<palos.length; i++) {
        palos[i] = palos[i].toUpperCase();
        console.log(palos[i]);
    }

// Recorrerlo así es muy fácil pero no se pueden cambiar los elementos
    for (const palo of palos) {
        console.log(palo);
    }

// Método equivalente al for usando índices
    let i = 0;
    while (i < palos.length) {
        console.log(palos[i++]);
    }

// Accediendo uno a uno a los elementos
    console.log(palos[0]);
    console.log(palos[1]);
    console.log(palos[2]);
    console.log(palos[3]);

// Lo mismo pero un poco más fácil
    let i = 0;
    console.log(palos[i++]);
    console.log(palos[i++]);
    console.log(palos[i++]);
    console.log(palos[i++]);

// La función se ejecuta por cada elemento del array
    palos.forEach(function (palo) {
        console.log(palo);
    });

// La función flecha simplifica el código
    palos.forEach(palo => console.log(palo));

// El método join convierte un array en texto
    console.log(palos.join("\n"));

Bidimensional

    const calendario = [
        [1, 2, 3, 4, 5, 6, 7],
        [8, 9, 10, 11, 12, 13, 14],
        ...
    ];

    console.log(calendario[1][3]); // Imprime 11

Operaciones sobre los arrays

5) Animaciones

Usar en temporizador para modificar algún estilo CSS.

Al cabo del tiempo especificado ejecuta la función:

Cada vez que transcurre el tiempo especificado llamará a la función:

Acceder a estilos en CSS:

Ejemplo

Cambiar un estilo CSS durante la animación

    const imagen = document.querySelector('#foto');
    let x = 0;
    imagen.style.position = 'absolute';
    setInterval(moverFoto, 100);
    function moverFoto() {
        imagen.style.left = x + 'px';
        x += 10;
        if (x >= 2000) { x = 0; } 
    }

6) jQuery

Es una biblioteca multiplataforma de Javascript especialmente indicada para manipular el DOM y hacer animaciones.

Antes de usar usar jQuery hay que incluir el archivo js de jQuery. La web oficial es https://jquery.com.

La función estrella de jQuery es $() que se puede usar:

Ejemplos como selector CSS:

Ejemplo al cargar la página web:

    $(function() {
        alert('La página ya está cargada');
    });

    $(document).ready(function() {
        alert('La página ya está cargada');
    });

Más ejemplos de jQuery:

1) Modificar el texto de todos los párrafos:

    $('p').html('Hola');

2) Cambiar el attributo href de todos los enlaces:

    $('a').attr('href', 'https://www.w3schools.com');

3) Que cuando un botón se pulse se ponga rojo:

    $('button').click(function() {
        $(this).css('background-color', 'red');
    });

4) Poner el atributo de usuario filtro al valor comic de todos los elementos de lista del identificador navegacion.

    $('#navegacion li').data('filtro', 'comic');

    <li data-filtro="comic">...

7) Control de errores

try catch

    try {

        // Prueba de ejecutar este código
        // Si se produce algún error salta 
        // al apartado del catch

    } catch (error) {

        // Gestión de errores 
        // Sólo se ejecutará este código si en el
        // try hubo algún error.
        // La variable error es un objeto con 
        // la excepción que ocurrió

    }

El try catch se suele colocar lo más arriba posible de la pila de llamadas a funciones (a la función principal o más genérica).

    try {
        // Código a ejecutar
    }
    catch (error) {
        // En caso de que haya un error en el try
    }
    finally {
        // Este código se ejecuta al final
        // haya habido errores o no
    }

8) Manipulación del DOM

Obtener referencias a etiquetas

Crear etiquetas e insertarlas

Insertar las nuevas etiquetas al final del body:

Insertar la imagen y el enlace en el párrafo y el párrafo en el body:

Navegar por el DOM

Acceder al contenido

Tanto innerHTML como value son de lectura y escritura.

Acceder a los atributos

Directamente:

O con métodos:

9) Formularios

Se suele poner el atributo name cuando se envían los datos al servidor web.

Se suele poner también el atributo id que normalmente coincide con el name.

Normalmente cada campo tiene una etiqueta LABEL que lo acompaña. El atributo FOR de la etiqueta indica el identificador del campo.

Tipos de controles o campos:

Eventos de formulario

Atributos de campos

Al enviar los campos a un servidor web se envía el nombre y el valor de cada campo. Si no tiene nombre no se envía.

Más atributos booleanos:

Más atributos:

Atributos ayuda del navegador:

Proinf.net