jorgesumle
/
referencia-html


			
							123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187
							=========
Scripting
=========

Los *scripts* o guiones permiten añadir interactividad a la página.

Se recomienda proporcionar alternativas a los guiones siempre
que sea posible, pues muchos usuarios los desabilitan o no pueden
utilizarlos.


El elemento ``script``
======================

Permite incluir un guion dinámico y bloques de datos en los documentos.
Este elemento no representa contenido para el usuario.

El atributo ``type`` permite indicar cómo debe interpretar el navegador el
contenido de la etiqueta.

- Si se omite el atributo o se establece a un tipo MIME de JavaScript,
  el guion se interpreta como código JavaScript.

- Si se establece el atributo a otro valor, el guion se interpreta como un
  bloque de datos que no es procesado. Se debe utilizar un tipo MIME válido.

.. code-block:: html

   <head>
     <script>
        alert('¡Hola, mundo!');
     </script>
   </head>

El atributo ``src`` indica la ruta donde se encuentra el guion. En este caso
no se debe incluir nada dentro de la etiqueta ``<script>``.

.. code-block:: html

   <body>
     <p>Párrafo</p>
     <script src="externo.js"></script>
   </body>

El atributo ``charset`` establece la codificación de caracteres del guion.
Este atributo no debe especificarse si no existe el atributo ``src``.

Los atributos ``async`` y ``defer`` son valores booleanos que indican
cómo se debe ejecutar el guion.

Para guiones normales, si el atributo ``async`` está presente, el guion será
obtenido en paralelo y evaluado tan pronto como esté disponible. Si no está
presente el atributo ``async`` pero está presente el atributo ``defer``, el
guion se obtiene en paralelo y se evalúa cuando la página haya terminado de
interpretarse. Si ningún atributo está presente, el guion es
obtenido y evaluado inmediatamente, bloqueando el intérprete hasta que ambas
tareas se hayan completado

Esto se resume con el siguiente diagrama:

.. image:: imagenes/asyncdefer.png

Se pueden usar varios guiones en una misma página. En el siguiente ejemplo
se utilza un guion interno y otro externo... El interno se trata del
mapa de un juego; el externo es el motor del juego.

.. code-block:: html

   <script src="motor-de-juego.js"></script>
   <script type="text/x-game-map">
   ........U.........e
    o............A....e
    .....A.....AAA....e
    .A..AAA...AAAAA...e
    </script>

El elemento ``noscript``
========================

Este elemento no representa nada si están habilitados los guiones. Se
utiliza para permitir presentar un marcado alternativo a aquellos usuarios
que no tienen habilitados los guiones.

.. code-block:: html

   <form action="calcSquare.php">
     <p>
       <label for=x>Number</label>:
       <input id="x" name="x" type="number">
     </p>
     <script>
  var x = document.getElementById('x');
  var output = document.createElement('p');
  output.textContent = 'Escribe un número y lo multiplicaré por sí mismo inmediatamente';
  x.form.appendChild(output);
  x.form.onsubmit = function () { return false; }
  x.oninput = function () {
    var v = x.valueAsNumber;
    output.textContent = 'El cuadrado de ' + v + ' es ' + v * v;
  };
     </script>
     <noscript>
       <input type=submit value="Calculate Square">
     </noscript>
   </form>

El elemento ``template``
========================

Sirve para declarar fragmentos de HTML que pueden ser clonados e insertados
en el documento por un guion.

Cuando se carga la página, el contenido del elemento ``<template>`` no se
muestra.

.. code-block:: html

   <body>
       <table>
           <tbody>
           </tbody>
       </table>
      <template id="fila">
          <tr>
              <td>
              <td>
              <td>
              <td>
      </template>
      <script>
      var tbody = document.getElementsByTagName('tbody')[0];
      const NUMBER_OF_COLUMNS = 4;
      const NUMBER_OF_ROWS = 10;

      var plantilla_fila = document.querySelector('#fila');

      for (let i = 0; i < NUMBER_OF_ROWS; i++) {
          var fila = plantilla_fila.content.cloneNode(true);
          for (let j = 0; j < NUMBER_OF_COLUMNS; j++) {
              let mensaje = 'Fila ' + (i + 1) + '; Columna ' + (j + 1);
              var celda = fila.querySelectorAll('td')[j];
              celda.innerHTML = mensaje;
          }
          tbody.appendChild(fila);
      }
      </script>
   </body>

El elemento ``canvas``
========================

Canvas (o lienzo traducido al español) es un elemento HTML que permite la
generación de gráficos dinámicamente por medio de guiones. Entre otras
cosas permite la renderización interpretada dinámica de gráficos 2D y
mapas de bits, así como animaciones con estos gráficos.

El elemento ``<canvas>`` se muestra en un navegador con el tamaño
establecido en sus atributos ``width`` y ``height``. Se suele utilizar el
atributo ``id`` para permitir acceder a este elemento mediante JavaScript.

.. code-block:: html

   <canvas id="ejemplo" width="200" height="200">
   Este texto se muestra si tu navegador no soporta el elemento canvas de HTML 5.
   </canvas>

Utilizando JavaScript se puede dibujar en el lienzo...

.. code-block:: html
   :emphasize-lines: 4-10

   <canvas id="ejemplo" width="600" height="400">
   Este texto se muestra si tu navegador no soporta el elemento canvas de HTML 5.
   </canvas>
   <script>
     var ejemplo = document.getElementById('ejemplo');
     var context = ejemplo.getContext('2d');
     context.fillStyle = 'aquamarine';
     context.fillRect(90, 70, 100, 70);
   </script>

El anterior ejemplo dibuja un rectángulo en la coordenada 30, 30 con 100
píxeles de ancho y 120 de alto. El eje 0, 0 comienza en la esquina superior
izquierda del canvas, como se puede ver en la siguiente imagen.

.. image:: imagenes/coordenadas-canvas.png