Manual de HTML: Eventos y scripts

Scripts en HTML

  • <script></script>

    HTML admite diversos lenguajes de script que se suelen utilizar para manipular imágenes, validar formularios, cambios dinámicos en la página, etc. La etiqueta <script>< es la que se utiliza para definir los scripts del lado del cliente.

    Atributos:

    • type: define el lenguaje de script usado y la codificación. Valores:
      • text/javascript: JavaScript.
      • text/jscript: JScript.
      • text/vbscript: VBScript.
      • text/php: PHP.
    • src: establece como script el código contenido en un archivo externo.

    Nota

    Es necesario "comentar" el código del script situándolo entre etiquetas de comentarios ya que de no hacerlo así los navegadores antiguos mostrarán el código en pantalla. Además, la etiqueta de cierre del comentario (–>) debe ir precedida por una etiqueta de comentario válida para el script (//) para que el script no tome la etiqueta de cierre HTML por una instrucción y devuelva un error:

    <script type="text/javascript">
      <!--
      document.write("Hola<br />")
      // -->
    </script>
  • Cómo ejecutar código script en una página HTML

    Hay varias formas de ejecutar código script en una página HTML:

    • Capturar un evento y ejecutar un comando

      El código script va embebido en el código HTML, captura un evento y ejecuta directamente la instrucción Javascript en el punto de captura.

      <html>
        <head>
        </head>
        <body>
          <form name="formulario">
            <input type="button" name="but" value=1
                onclick=javascript:alert("Hola")>
          </form>
        </body>
      </html>
    • Capturar un evento y ejecutar una función

      El código script va embebido en el código HTML, captura un evento y ejecuta una función Javascript definida con la etiqueta <script>.

      <html>
        <head>
          <script type="text/javascript">
            <!--
            function mensaje() {
              alert("Esto es un mensaje de JavaScript")
            }
            // -->
          </script>
        </head>
        <body>
          <form name="formulario">
            <input type="button" name="but" value=1 onclick="mensaje()">
          </form>
        </body>
      </html>
    • Ejecutar código en tiempo de carga

      El código script va embebido en el código HTML mediante la etiqueta <script> y se ejecuta durante la carga de la página web. Aunque por claridad es preferible escribir los scripts en el HEAD, determinados scripts pueden aparecer en el BODY, por ejemplo scripts que escriben código on-line, como en el siguiente ejemplo:

      <html>
        <head>
          <script type="text/javascript">
            <!--
            document.write("Esto lo ha escrito JavaScript desde HEAD<br />")
            // -->
          </script>
        </head>
        <body>
          <script type="text/javascript">
            <!--
            document.write("Esto lo ha escrito JavaScript desde BODY<br />")
            // -->
          </script>
          <p>Esto lo ha escrito HTML</p>
        </body>
      </html>

      Obtenemos:

      Esto lo ha escrito JavaScript desde HEAD
      Esto lo ha escrito JavaScript desde BODY
      Esto lo ha escrito HTML
    • Como archivo externo

      El código script se ubica en un archivo externo (extensión .js) que se cargará con la página HTML. Para ello incluiremos en el HEAD la URL del archivo mediante la etiqueta <script>.

      <html>
        <head>
          <script type="text/javascript" src="script.js">
          </script>
        </head>
        <body>
          <form name="formulario1"></p>
            <input type="button" name="but" value=1 onclick="mensaje()">
          </form>
        </body>
      </html>

      Donde el contenido del fichero script.js es:

      function mensaje() {
        alert("Esto es un mensaje de JavaScript")
      }
  • <noscript></noscript>

    Especifica el contenido que será mostrado cuando el navegador no soporte scripts, cuando esté configurado para no ejecutarlos o cuando un script no pueda ejecutarse.

    <script type="text/javascript">
      <!--
      document.write("Hello World!")
      // -->
    </script>
    <noscript>Tu navegador no soporta JavaScript!</noscript>

Eventos en HTML

Un evento es una acción que efectúa el usuario de una aplicación (como onclick, que salta al hacer click sobre un elemento, o onload, que salta cuando carga el documento), y que origina una respuesta por parte de dicha aplicación. En general, la respuesta a un evento será un script. La sintaxis general de un evento es la siguiente:

<etiqueta evento=accion>

Ejemplo: mostrar un aviso cuando se pasa el raton sobre una tabla.

<table onmouseover="javascript:alert('Hola')">

Los eventos pueden ser:

  • eventos de la ventana
    • onload: salta cuando carga el documento.
    • onunload: salta cuando descarga el documento.
  • eventos de ratón
    • onmouseover: salta cuando se pasa el ratón sobre un elemento.
    • onmouseout: salta cuando, estando el ratón sobre el elemento, nos vamos de él.
    • onmousedown: salta cuando pulsamos sobre el elemento con el ratón, sin necesidad de despulsar, tanto con el botón izquierdo como con el derecho.
    • onmouseup: salta cuando, tras haber pulsado con uno de los botones del ratón sobre el elemento, dejamos libre ese botón del ratón, sin necesidad de sacar el puntero del elemento.
    • onmousemove: salta cuando movemos el puntero del ratón sobre el elemento. Este evento se utiliza para capturar las coordenadas del ratón.
    • onclick: salta cuando se pincha sobre el elemento con el botón izquierdo del ratón.
    • ondblclick: salta al hacer doble click sobre el elemento con el botón izquierdo del ratón.
  • eventos de teclado
    • onkeydown: salta cuando, estando el elemento enfocado, se empieza a pulsar una tecla.
    • onkeypress: salta cuando, teniendo el foco el elemento, se acaba de pulsar una tecla.
    • onkeyup: salta cuando, teniendo el foco el elemento, y tras haber pulsado una tecla, se libera dicha tecla.
  • eventos de foco
    • onfocus: salta cuando el elemento recibe el foco, bien al ser pulsado con el puntero del ratón, bien al acceder a él mediante el tabulador o una función de JavaScript.
    • onblur: salta cuando, teniendo el foco el elemento, lo pierde.
  • eventos de elementos de formulario
    • onchange: salta cuando el elemento cambia.
    • onsubmit: salta cuando el formulario es enviado.
    • onreset : salta cuando el formulario es reseteado.
    • onselect: salta cuando el elemento es seleccionado.
    • onblur: salta cuando el elemento pierde el foco.
    • onfocus: salta cuando el elemento recibe el foco.

Recursos

Artículos en la categoría "Manual de HTML"

  1. Manual de HTML: Cómo tener una web
  2. Manual de HTML: Cabecera
  3. Manual de HTML: Estilos CSS
  4. Manual de HTML: Cajas (div)
  5. Manual de HTML: Texto
  6. Manual de HTML: Glosarios y Listas
  7. Manual de HTML: Enlaces
  8. Manual de HTML: Tablas
  9. Manual de HTML: Imágenes
  10. Manual de HTML: Frames (marcos)
  11. Manual de HTML: Colores HTML
  12. Manual de HTML: Colores seguros para la web
  13. Manual de HTML: Formularios
  14. Manual de HTML: Fuentes
  15. Manual de HTML: Objetos
  16. Manual de HTML: Eventos y scripts
  17. Manual de HTML: Caracteres especiales
  18. Manual de HTML: Unidades
  19. Manual de HTML: URL encoding
  20. Manual de HTML: Responsive Web Design (diseño web adaptativo)
  21. Manual de HTML: Geolocalización HTML5 en aplicaciones web