HTML script

La etiqueta <script> en HTML se utiliza para insertar scripts o código de programación en un documento HTML. Los scripts se usan para realizar tareas como validar formularios, crear efectos visuales, mostrar alertas y mensajes, entre otras tareas. Los scripts pueden ser escritos en diferentes lenguajes de programación, como JavaScript, VBScript, entre otros.

La sintaxis básica de una etiqueta <script> es la siguiente:


<script>
    // Código JavaScript aquí
</script>

Lenguaje del código: JavaScript (javascript)

También se puede especificar el lenguaje de programación utilizando el atributo type dentro de la etiqueta <script>:


<script type="text/javascript">
    // Código JavaScript aquí
</script>

Lenguaje del código: JavaScript (javascript)

Otra forma de incluir scripts es mediante el uso del atributo src para especificar una ubicación externa del script:


<script src="nombre_del_archivo.js"></script>

Lenguaje del código: JavaScript (javascript)

Es importante tener en cuenta que los scripts deberían ser colocados en la sección de head o al final del body, para asegurar que el contenido de la página esté cargado antes de ejecutar el script.

Ejemplo de uso

Un ejemplo de cómo utilizar la etiqueta <script> en HTML podría ser el siguiente:


<!DOCTYPE html>
<html>
<head>
  <script>
    function showMessage() {
      alert("Hello, World!");
    }
  </script>
</head>
<body>
  <button onclick="showMessage()">Mostrar mensaje</button>
</body>
</html>

Lenguaje del código: HTML, XML (xml)

En este ejemplo, se define una función llamada “showMessage” dentro de la etiqueta <script> en la sección <head>. Luego, se utiliza una etiqueta <button> con el atributo onclick para llamar a la función “showMessage” cuando se hace clic en el botón. Al hacer clic en el botón, se mostrará una ventana emergente con el mensaje “Hello, World!”.

Es importante tener en cuenta que los scripts deberían ser colocados en la sección de head o al final del body, para asegurar que el contenido de la página esté cargado antes de ejecutar el script.

Otro ejemplo de uso de la etiqueta <script> es el siguiente:


<!DOCTYPE html>
<html>
<head>
<script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>
<script>
$(document).ready(function(){
  $("#boton").click(function(){
    $("#parrafo").hide();
  });
});
</script>
</head>
<body>
  <p id="parrafo">Este es un ejemplo de como ocultar un parrafo</p>
  <button id="boton">Ocultar</button>
</body>
</html>
Lenguaje del código: HTML, XML (xml)

En este ejemplo se usa un script externo, JQuery, para ocultar un párrafo cuando se hace clic en un botón.

En este último ejemplo, se usa la librería JQuery para escribir el código JavaScript. La librería JQuery es una biblioteca de JavaScript que proporciona una forma más fácil y concisa de escribir código JavaScript.

Primero, se incluye la biblioteca JQuery en la sección <head> mediante el uso del atributo src y se especifica la URL donde se encuentra el archivo JQuery.

Luego, dentro de la etiqueta <script> se utilizan las funciones de JQuery para especificar que cuando el documento esté listo, se ejecutará una función anónima que asigna a un botón con un id específico la función de ocultar un párrafo con un id específico cuando se haga clic en él.

Es importante destacar que en este ejemplo se utiliza una función específica de JQuery, $(document).ready(function(){…}) para asegurar que el código se ejecute solo cuando el documento esté completamente cargado, evitando errores o problemas de ejecución.

Atributos

Los atributos más importantes de la etiqueta <script> en HTML son:

  • src: Este atributo se utiliza para especificar una URL donde se encuentra el script que se quiere incluir en el documento. Es útil cuando se desea incluir un script externo en lugar de escribirlo directamente dentro de la etiqueta <script>.
  • type: Este atributo se utiliza para especificar el tipo de script que se está utilizando. El valor predeterminado es “text/javascript”.
  • async: Este atributo se utiliza para especificar si el script se debe descargar y ejecutar de forma asíncrona mientras se carga el resto de la página. Si se establece en true, el script se cargará de forma asíncrona. Si no se especifica este atributo o se establece en false, el script se cargará de forma síncrona.
  • defer: Este atributo se utiliza para especificar si el script se debe ejecutar después de que el documento se haya cargado completamente. Si se establece en true, el script se ejecutará después de que el documento se haya cargado completamente. Si no se especifica este atributo o se establece en false, el script se ejecutará en el momento en que se encuentra en el código.
  • charset: Este atributo se utiliza para especificar el juego de caracteres utilizado en el script. El valor predeterminado es “UTF-8”.

Es importante tener en cuenta que estos atributos pueden ser utilizados para mejorar la performance de la carga de la página y para mejorar la compatibilidad con los navegadores.

Ejemplos

Aquí hay algunos ejemplos de cómo utilizar los atributos de la etiqueta <script> en HTML:

  • Utilizando el atributo src para incluir un script externo:

<script src="nombre_del_archivo.js"></script>

Lenguaje del código: JavaScript (javascript)
  • Utilizando el atributo type para especificar el tipo de script:

<script type="text/javascript">
    // Código JavaScript aquí
</script>

Lenguaje del código: JavaScript (javascript)
  • Utilizando el atributo async para descargar y ejecutar el script de forma asíncrona:

<script src="nombre_del_archivo.js" async></script>

Lenguaje del código: JavaScript (javascript)
  • Utilizando el atributo defer para ejecutar el script después de que el documento se haya cargado completamente:

<script src="nombre_del_archivo.js" defer></script>

Lenguaje del código: JavaScript (javascript)
  • Utilizando el atributo charset para especificar el juego de caracteres utilizado en el script:

<script src="nombre_del_archivo.js" charset="UTF-16"></script>

Lenguaje del código: JavaScript (javascript)

Es importante tener en cuenta que el uso de estos atributos dependerá de las necesidades específicas de la página y del código JavaScript que se esté utilizando. Por ejemplo, si el script es muy pequeño y se está incluyendo directamente en la página, entonces no es necesario especificar el atributo src.

Si el script es muy grande y se está incluyendo de forma externa, entonces es importante especificar el atributo async o defer para mejorar la carga de la página.