Introducción a JavaScript

Computación Web (2023/24)

Jesús Arias Fisteus

Variables


              var n = 1;  // variable global
              var sumDoubled = function(m) {
                  var mDoubled = 2 * m;  // variable local
                  n += mDoubled;
              }

              sumDoubled(2);
              n;                // 5

Sentencias de control

  • if, switch
  • for, while, do while
  • return, break, continue

Condicionales y operadores de comparación


              if (command === "create") {
                  // ...
              }

              if (command !== "remove") {
                  // ...
              }

              if (num >= 7) {
                  // ...
              }

Operadores lógicos


              if (command === "create" || command === "remove") {
                  // ...
              }

              if (command === "remove" && num > 7) {
                  // ...
              }

              var a = false;
              while (!a) {
                  // ...
              }

Bucles


              var count = 0;
              while (count < 10) {
                  console.log(count);
                  count++;
              }

              for(var count = 0; count < 10; count++) {
                  console.log(count);
              }

              var person = {fname: "Lisa", lname: "Simpson", age: 8};
              var x;
              for (x in person) {
                  console.log(person[x]);
              }

Tipos de datos

  • Tipos simples:
    • Números
    • Cadenas de texto
    • Booleanos
  • Objetos:
    • Arrays
    • Funciones
    • Objetos

Tipos de datos


              var count = 0;
              var word = "University";
              var active = true;
              var square = function(n) {
                  return n * n;
              };
              var color = {
                  r: 30,
                  g: 255,
                  b: 128,
                  luminosity: function() {
                      return 0.21 * this.r + 0.72 * this.g + 0.07 * this.b;
                  }
              };

Objetos


              var emptyObject = {};

              var student = {
                  "first-name": "Lisa",
                  "last-name": "Simpson"
              };
              student["first-name"]     // "Lisa"
              student["middle-name"]    // undefined
              student["FIRST-NAME"]     // undefined

Objetos


              var book = {
                  title: "El ingenioso hidalgo Don Quijote de la Mancha",
                  year: 1605,
                  author: {
                      name: "Miguel",
                      surname: "de Cervantes Saavedra",
                      birthDate: 1547
                  }
              };
              book.year;               // 1605
              book.author.name         // "Miguel"

Objetos

Se pueden añadir nuevas propiedades a un objeto existente


              book.author['birthPlace'] = 'Alcalá de Henares'
              book.originalLanguage = 'Spanish';

Objetos

Los objetos se manipulan por referencia (como en Java)


              var x = book;
              x.genre = 'novel';
              var genre = book.genre;
                 // genre es 'novel' porque x y book
                 // son referencias al mismo objeto

              var a = {}, b = {}, c = {};
                 // a, b y c hacen referencia cada una
                 // a un objeto vacío diferente

              a = b = c = {};
                 // a, b y c hacen referencia, todas,
                 // al mismo objeto vacío

Funciones


              var add = function(a, b) {
                  return a + b;
              };

              var sum = add(3, 4);    // sum is 7

Métodos


              var color = {
                  r: 30,
                  g: 255,
                  b: 128,
                  luminosity: function() {
                      return 0.21 * this.r + 0.72 * this.g + 0.07 * this.b;
                  }
              };
              color.luminosity();  // 198.86

Constructores


// Declarar el constructor
var Color = function(r, g, b) {
    // Atributos
    this.r = r;
    this.g = g;
    this.b = b;

    // Métodos
    this.luminosity = function() {
        return Math.round(0.21 * this.r + 0.72 * this.g
                          + 0.07 * this.b);
    }

    this.toGrayScale = function() {
        var a = this.luminosity();
        return new Color(a, a, a);
    }
}

Constructores


// Crear un nuevo objeto con su constructor
var red = new Color(255, 0, 0);
red.luminosity();             // 54
var gray = red.toGrayScale(); // Color (r: 54, g: 54, b: 54)

Clases (a partir de ECMAScript 6)


class Color {
    constructor(r, g, b) {
        this.r = r;
        this.g = g;
        this.b = b;
    }

    get luminosity() {
        return Math.round(0.21 * this.r + 0.72 * this.g
                          + 0.07 * this.b);
    }

    toGrayScale() {
        var a = this.luminosity;
        return new Color(a, a, a);
    }
}

Constructores


// Crear un nuevo objeto con su constructor
var red = new Color(255, 0, 0);
red.luminosity;               // 54
var gray = red.toGrayScale(); // Color (r: 54, g: 54, b: 54)

Excepciones


var add = function (a, b) {
    if (typeof a !== 'number' || typeof b !== 'number') {
        throw {
            name: 'TypeError',
            message: 'add necesita números'
        };
    }
    return a + b;
}

try {
    add("seven");
} catch (e) {
    console.log('¡Vaya!');
    console.log(e.name + ': ' + e.message);
}

Arrays


var empty = [];
var letters = ['A', 'B', 'C', 'D', 'E', 'F'];

empty[1]          // undefined
letters[1]        // 'B'

empty.length      // 0
letters.length    // 6

Arrays


letters.length = 3;
// letters is ['A', 'B', 'C']

letters[letters.length] = 'Y';
// letters is ['A', 'B', 'C', 'Y']

letters.push('Z');
// letters is ['A', 'B', 'C', 'Y', 'Z']

delete letters[2];
// letters is ['A', 'B', undefined, 'Y', 'Z']

letters.splice(2, 1);
// letters is ['A', 'B', 'Y', 'Z']

Client-side JavaScript

Client-side JavaScript

  • El término client-side JavaScript hace referencia al entorno de ejecución de código JavaScript proporcionado por los navegadores web.
  • Este entorno lo conforman las APIs de JavaScript definidas por HTML5 y otros estándares relacionados, e implementadas por los navegadores.

Client-side JavaScript

  • Client-side JavaScript hace interactivo el documento HTML mediante, principalmente:
    • Manejadores de eventos: código a ejecutar cuando se cargue o cierre el documento, el usuario interaccione con sus elementos, etc.
    • Modificación dinámica del documento: mediante el API DOM, principalmente, el programa JavaScript puede modificar el documento, y el navegador muestra inmediatamente los cambios.

Inclusión de JavaScript en HTML



<script type="text/javascript">
var d = new Date();
document.write(d.toLocaleString());
</script>

<!-- desde un recurso externo -->
<script src="scripts/util.js" type="text/javascript"></script>

<!-- desde un manejador de eventos de HTML -->
<input type="button" value="Change" onclick="changeName()">
<p onmouseover="showHelp('p1')">...</p>

Cargar el código JavaScript al fondo del documento permite presentar más rápidamente la página (se cargan antes las imágenes, hojas CSS, etc.)

JQuery

Hola Mundo con JQuery


<!DOCTYPE html>
<html>
  <head>
    <meta charset="UTF-8">
    <title>Mi primera página con jQuery</title>
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.7.1/jquery.min.js"></script>
    <script type="text/javascript">
      $(function() {
          console.log("ready!");
      });
    </script>
  </head>
  <body>
    <p>¡Hola Mundo!</p>
  </body>
</html>

Abrir ejemplo

Código de inicialización


// Se ejecuta el código de inicialización cuando el árbol
// esté cargado
$(document).ready(function() {
    console.log("ready!");
});

// Forma compacta equivalente a lo anterior
$(function() {
    console.log("ready!");
});

Encadenamiento de métodos


var title = $("<h1>¡Hola!</h1>");
title.css("font-family", "sans-serif");
title.css("color", "navy")
var body = $("body");
body.prepend(title);
title.fadeIn(5000);
title.fadeOut(5000);
          

var title = $("<h1>¡Hola!</h1>")
            .css("font-family", "sans-serif")
            .css("color", "navy");
$("body").prepend(title);
title.fadeIn(5000)
     .fadeOut(5000);

Lectura y escritura de atributos


              // Lee el atributo href del primer enlace:
              $("a").first().attr("href");

              // Escribe el atributo title de todos los nombres de escritor
              $(".escritor").attr("title", "Esto es un nombre de escritor");

              // Cambia varios atributos a la vez
              $("#foto-cervantes").attr({src: "cervantes-2.jpg",
                                         alt: "Cervantes por Luis de Madrazo"});

              // Elimina un atributo
              $("#foto-quevedo").removeAttr("height");

Página de demostración

Lectura y escritura de propiedades CSS


              // Lee el valor de una propiedad CSS:
              $(".info").first().css("font-size");

              // Establece el valor de una propiedad CSS:
              $(".info").css("font-variant", "small-caps");

              // Establece una propiedad compuesta
              $(".retrato").css("border", "solid red 2px");

              // Establece varias propiedades a la vez:
              $(".retrato").css({"padding": "5px",
                                 "background-color": "gray",
                                 "filter": "grayscale(50%)"});

Lectura y escritura del atributo class


              // Elimina la pertenencia a una clase:
              $(".escritor").last().removeClass("escritor");

              // Añade la pertenencia a una clase:
              $("a").last().addClass("encuadrado");

              // Comprueba la pertenencia a una clase:
              $("a").last().is(".encuadrado");

              // Alterna la pertenencia a una clase:
              $("a").last().toggleClass("encuadrado");

Lectura y escritura del contenido de un elemento


              // Lee el contenido de un elemento como texto sin formato:
              var t1 = $(".info").first().text();

              // Lee el contenido de un elemento como texto HTML:
              var t2 = $(".info").first().html();

              // Establece el contenido de un elemento (texto plano):
              $(".info").first().text("Texto borrado.");

              // Establece el contenido de un elemento (HTML):
              $(".info").first().html("Texto borrado.");

El modelo DOM


<!DOCTYPE html>
<html>
  <head>
    <title>Barney says...</title>
  </head>
  <body>
    <h1>Barney says</h1>
    <p>
      This is going to be <em>legendary</em>
    </p>
  </body>
</html>

El modelo DOM

Representación del modelo DOM

Añadir contenido


              // Añade un nuevo nodo hijo, al final:
              $("ul").append("<li><div class='escritor'>José de Espronceda</div></li>");

              // Crea y añade un nuevo nodo hijo, al principio:
              var alfonso_div = $('<li>').append($('<div>')
                                                 .addClass("escritor")
                                                 .text("Alfonso X el Sabio"));
              $("ul").prepend(alfonso_div);

              // Añade dos nodos hermanos, uno anterior y otro posterior:
              $("h1").before("
");
              $("h1").after("
");

Añadir contenido


              // Se pueden hacer las inserciones a la inversa,
              // invocando los métodos sobre el nodo a insertar:
              $(document.createTextNode(": escritores")).appendTo("h1");
              $("<cite>[Wikipedia] </cite>").prependTo($(".info"));

              $("
").insertBefore("ul");
              $("
").insertAfter("ul");

Añadir contenido


              // Envuelve elementos en otro elemento:
              $(".retrato").wrap("<div>");

              // Envuelve el contenido de un elemento dentro de otro:
              $(".escritor").wrapInner("<strong>");

Clonar contenido


              $(".retratos").clone().insertBefore("ul");

Eliminar contenido


              // Vacía el contenido de un nodo, pero no elimina el nodo:
              $(".retratos").first().empty();

              // Elimina un nodo con todo su contenido:
              $("li").last().remove();

              // Desenlaza un nodo del árbol, pero se conserva en una variable
              var node = $("h1").detach();
              $("body").append(node);

Acceso a formularios


              // Lee el valor de un control:
              $("input[name='pregunta1'").val();

              // Cambia el valor de un control:
              $("input[name='pregunta2'").val("Córdoba");

              // Lee el botón tipo radio marcado:
              $("input[name='pregunta3']:checked").val();

              // Marca un botón de tipo radio:
              $("input[name='pregunta3'][value='quevedo']").prop("checked", true);

Acceso a formularios


              // Lee los controles marcados de tipo checkbox:
              $("input[name='pregunta4']:checked").each(function(i, e) {
                  console.log($(e).attr("value"));
              });

              // Marca controles de tipo checkbox:
              $("input[name='pregunta4']").val(['gongora', 'cervantes']);

Manejadores de eventos

Permiten registrar acciones a llevar a cabo cuando ocurran determinados eventos sobre un elemento de la página. Por ejemplo:

  • Se hace click sobre el elemento.
  • El cursor pasa por encima del elemento.
  • Cambia el valor de un control de formulario.

Eventos de carga del documento


            $(document).ready(function() {
              // Código a ejecutar cuando se haya cargado
              // el árbol DOM del documento.
            });

            $(window).on("load", function() {
              // Código a ejecutar cuando se haya representado la página
              // y cargado todos sus recursos adicionales.
            });

            $(window).on("unload", function() {
              // Código a ejecutar cuando se abandone la página
              // (se sigue un hipervínculo, se recarga el documento,
              // se va hacia atrás o adelante).
            });

Eventos del navegador


            $("#img1").on("error", function() {
              // Código a ejecutar cuando se produzca un error
              // en la carga del elemento (p.e. una imagen).
            });

            $(window).resize(function() {
              // Código a ejecutar cuando se cambie el tamaño
              // de la ventana.
            });

            $(window).scroll(function() {
              // Código a ejecutar cuando se haga scroll en la página.
            });

            $("#e1").scroll(function() {
              // Código a ejecutar cuando se haga scroll
              // en el elemento con identificador #e1.
            });

Eventos en formularios


            $("input[name=email]").change(function() {
              // Código a ejecutar cuando cambie el valor del control.
            });

            $("form").submit(function(event) {
              // Código a ejecutar cuando el usuario presione en un botón
              // de envío del formulario.

              // Se puede también detener el envío:
              event.preventDefault();
            });

Eventos en formularios (foco)


            $("input[name=email]").focus(function() {
              // Código a ejecutar cuando el control consiga el foco.
            });

            $("input[name=email]").blur(function() {
              // Código a ejecutar cuando el control pierda el foco.
            });

            $("#e1").focusIn(function() {
              // Código a ejecutar cuando el elemento #e1
              // o algún descendiente suyo consiga el foco.
            });

            $("#e1").focusOut(function() {
              // Código a ejecutar cuando el elemento #e1
              // o algún descendiente suyo pierda el foco.
            });

Eventos del cursor


            $("#e1").click(function() {
              // Código a ejecutar cuando el usuario haga click
              // sobre el elemento #e1.
            });

            $("#e1").dblclick(function() {
              // Código a ejecutar cuando el usuario haga doble click
              // sobre el elemento #e1.
            });

            $("#e1").toggle(function() {
              // Código a ejecutar cuando el usuario haga click
              // por primera vez sobre el elemento #e1
              // (y en sucesivos ciclos).
            }, function() {
              // Código a ejecutar cuando el usuario haga click
              // por segunda vez sobre el elemento #e1
              // (y en sucesivos ciclos).
            });

Eventos del cursor


            $("#e1").mouseenter(function() {
              // Código a ejecutar cuando el puntero entre en el área
              // del elemento #e1.
            });

            $("#e1").mouseleave(function() {
              // Código a ejecutar cuando el puntero abandone el área
              // del elemento #e1.
            });

            $("#e1").hover(function() {
              // Código a ejecutar cuando el puntero entre en el área
              // del elemento #e1.
            }, function() {
              // Código a ejecutar cuando el puntero abandone el área
              // del elemento #e1.
            });

Eventos del cursor


            $("#e1").mousedown(function(event) {
              // Código a ejecutar cuando se presione un botón
              // dentro del área del elemento #e1.
              // Se puede saber qué botón se ha presionado:
              switch(event.button) {
                case 0:
                  // botón izquierdo
                  break;
                case 1:
                  // botón central
                  break;
                case 2:
                  // botón derecho
                  break;
              }
            });

Eventos del cursor


            $("#e1").mouseup(function(event) {
              // Código a ejecutar cuando se libere un botón
              // dentro del área del elemento #e1.
              // Se puede saber qué botón se ha liberado con event.button.
            });

            $("#e1").mousemove(function(event) {
              // Código a ejecutar cuando se mueva el cursor
              // dentro del área del elemento #e1.
            });

            // En todos estos eventos se pueden conocer las coordenadas
            // del cursos con event.pageX, event.pageY, event.screenX, event.screenY,
            // event.offsetX y event.offsetY.

            // También se puede saber qué botones se encuentran presionados
            // con event.buttons.

            // https://developer.mozilla.org/en-US/docs/Web/API/MouseEvent

Referencias

Referencias