HTML - JavaScript

UN scriptes un pequeño programa que puede agregar interactividad a su sitio web. Por ejemplo, una secuencia de comandos podría generar un mensaje de cuadro de alerta emergente o proporcionar un menú desplegable. Este script se puede escribir con JavaScript o VBScript.

Puede escribir varias funciones pequeñas, llamadas controladores de eventos, utilizando cualquiera de los lenguajes de scripting y luego puede activar esas funciones utilizando atributos HTML.

Hoy en día, solo JavaScript y la mayoría de los desarrolladores web utilizan marcos asociados, VBScript ni siquiera es compatible con varios de los principales navegadores.

Puede mantener el código JavaScript en un archivo separado y luego incluirlo donde sea necesario, o puede definir la funcionalidad dentro del propio documento HTML. Veamos ambos casos uno por uno con ejemplos adecuados.

JavaScript externo

Si va a definir una funcionalidad que se utilizará en varios documentos HTML, entonces es mejor mantener esa funcionalidad en un archivo JavaScript separado y luego incluir ese archivo en sus documentos HTML. Un archivo JavaScript tendrá la extensión.js y se incluirá en archivos HTML mediante la etiqueta <script>.

Ejemplo

Considere que definimos una pequeña función usando JavaScript en script.js que tiene el siguiente código:

function Hello() {
   alert("Hello, World");
}

Ahora hagamos uso del archivo JavaScript externo anterior en nuestro siguiente documento HTML:

<!DOCTYPE html>
<html>

   <head>
      <title>Javascript External Script</title>
      <script src = "/html/script.js" type = "text/javascript"/></script>
   </head>

   <body>
      <input type = "button" onclick = "Hello();" name = "ok" value = "Click Me" />
   </body>

</html>

Esto producirá el siguiente resultado, donde puede intentar hacer clic en el botón dado:

Guión interno

Puede escribir su código de secuencia de comandos directamente en su documento HTML. Por lo general, mantenemos el código de secuencia de comandos en el encabezado del documento usando la etiqueta <script>; de lo contrario, no hay restricción y puede colocar su código fuente en cualquier lugar del documento, pero dentro de la etiqueta <script>.

Ejemplo

<!DOCTYPE html>
<html>

   <head>
      <title>JavaScript Internal Script</title>
      <base href = "https://www.tutorialspoint.com/" />
      
      <script type = "text/JavaScript">
         function Hello() {
            alert("Hello, World");
         }
      </script>
   </head>

   <body>
      <input type = "button" onclick = "Hello();" name = "ok" value = "Click Me" />
   </body>

</html>

Esto producirá el siguiente resultado, donde puede intentar hacer clic en el botón dado:

Controladores de eventos

Los controladores de eventos no son más que funciones simplemente definidas que se pueden llamar contra cualquier evento de mouse o teclado. Puede definir su lógica empresarial dentro de su controlador de eventos, que puede variar desde un código de línea único hasta miles.

El siguiente ejemplo explica cómo escribir un controlador de eventos. Escribamos una función simple EventHandler () en el encabezado del documento. Llamaremos a esta función cuando cualquier usuario pase el mouse sobre un párrafo.

<!DOCTYPE html>
<html>

   <head>
      <title>Event Handlers Example</title>
      <base href = "https://www.tutorialspoint.com/" />
      
      <script type = "text/JavaScript">
         function EventHandler() {
            alert("I'm event handler!!");
         }
      </script>
   </head>

   <body>
      <p onmouseover = "EventHandler();">Bring your mouse here to see an alert</p>
   </body>

</html>

Ahora esto producirá el siguiente resultado. Pase el mouse sobre esta línea y vea el resultado:

Ocultar scripts de navegadores más antiguos

Aunque la mayoría de los navegadores (si no todos) en estos días admiten JavaScript, algunos navegadores más antiguos no lo hacen. Si un navegador no admite JavaScript, en lugar de ejecutar su secuencia de comandos, mostraría el código al usuario. Para evitar esto, simplemente puede colocar comentarios HTML alrededor del script como se muestra a continuación.

JavaScript Example:
<script type = "text/JavaScript">
   <!--
      document.write("Hello JavaScript!");
   //-->
</script>

VBScript Example:
<script type = "text/vbscript">
   <!--
      document.write("Hello VBScript!")
   '-->
</script>

El elemento <noscript>

También puede proporcionar información alternativa a los usuarios cuyos navegadores no admiten scripts y a aquellos usuarios que han desactivado la opción de script en sus navegadores. Puede hacer esto usando el<noscript> etiqueta.

JavaScript Example:
<script type = "text/JavaScript">
   <!--
      document.write("Hello JavaScript!");
   //-->
</script>

<noscript>Your browser does not support JavaScript!</noscript>

VBScript Example:
<script type = "text/vbscript">
   <!--
      document.write("Hello VBScript!")
   '-->
</script>

<noscript>Your browser does not support VBScript!</noscript>

Lenguaje de secuencias de comandos predeterminado

Puede haber una situación en la que incluya varios archivos de script y, en última instancia, utilice varias etiquetas <script>. Puede especificar un lenguaje de secuencia de comandos predeterminado para todas sus etiquetas de secuencia de comandos . Esto le evita tener que especificar el idioma cada vez que usa una etiqueta de secuencia de comandos dentro de la página. A continuación se muestra el ejemplo:

<meta http-equiv = "Content-Script-Type" content = "text/JavaScript" />

Tenga en cuenta que aún puede anular el valor predeterminado especificando un idioma dentro de la etiqueta de secuencia de comandos.

↰ Previous page Next page ↱