Etiqueta <script>

En HTML existe el Elemento script. Para agregarlo a nuestro archivo HTML utilizamos las siguientes etiquetas:

Etiqueta <script>

Instrucción

Etiqueta </script>

Así de sencillo podemos podemos agregar JAVA SCRIPT en nuestro archvio HTML.

Antes era diferente, se tenía que agregar el Atributo type y agregar la propiedad "text/javascript". Afortunadamente ya no es necesario pero si te lo encuentras en algunos sitios éste formato, sepas identificarlo.

La antigua aplicación de JAVA SCRIPT en HTML se veía así:

Etiqueta <script type="text/javascript">

¿En qué momento usar JAVA SCRIPT?

JAVA SCRIPT funciona como una Función, es decir, un conjunto de instrucciones en código que se puede ejecutar en HTML cuando se le llama.

JAVA SCRIPT es llamado cuando necesitamos que suceda algo, ese algo le llamaremos Evento.

Ese Evento puede ser, por ejemplo, un botón. Entonces cuando el usuario de clic en ese botón que es un Evento mandamos a llamar un Código JAVA SCRIPT para que suceda algo en nuestra página web.

¿En qué parte del archivo HTML se agrega el elemento script?

El Elemento script se utiliza generalmente en el Elemento body o en Elemento head. Pero si así lo necesitas, Puedes utilizarlo en Ambos.

Quizá no me lo preguntes, pero si alguien me preguntara cuántos scripts puedo colocar en un archivo HTML, te respondería que el límite es el cielo o las que necesites, lo que suceda primero.

Aclarado que puedes utilizarlo en los Elementos body y head su aplicación es un poco distinto y lo veremos a continuación.

JAVA SCRIPT en el Elemento head

¡Vamos con un ejemplo! ¿Lograremos que funcione aquí?

Vamos a agregar lo que llevaría un archivo HTML limpio, pondremos sólo la estructura básica:

<!DOCTYPE html>

<html>

<head>

</head>

<body>

</body>

</html>

Si agregas lo anterior, no aparecerá nada en tu navegador.

Vamos a agregar el Elemento script entre las etiquetas del Elemento head

<!DOCTYPE html>

<html>

<head>

<script>

function mifuncion(){

document.getElementById("prueba").innerHTML = "Cambiando este contenido que es un párrafo.";

}

</script>

</head>

<body>

</body>

</html>

Se agregó las etiquetas de inicio y cierre del Elemento script y dentro de éstas etiquetas se creo una función que le asignamos el nombre mifuncion.

Sigue el código que se explicará en próximos temas pero a groso modo permite que por medio de un ID el elemento que llame esta función será sustituido por lo que aparece después del símbolo =.

Ahora, para que se realicen los cambios, entre las etiquetas del Elemento body agregaremos lo siguiente:

<!DOCTYPE html>

<html>

<head>

<script>

function mifuncion(){

document.getElementById("prueba").innerHTML = "Desapareció el párrafo anterior, pero estoy en su lugar hasta que recarges la página.";

}

</script>

</head>

<body>

<h2>Prueba JAVA SCRIPT desde head</h2>

<p id="prueba">¿Si aprietas en botón desapareceré?</p>

<button type="button" onclick="mifuncion()">Dame clic</button>

</body>

</html>

El resultado sería el siguiente:

Prueba JAVA SCRIPT desde head

¿Si aprietas el botón desapareceré?

Lo que agregamos fue el Elemento Enbazado. Después agregamos el Elemento Párrafo. En su etiqueta de inicio agregamos el Atributo id para asignarle el nombre prueba.

Después agregamos el Elemento button. Es su Etiqueta de inicio agregamos el Atributo type con el Valor burron. Agregamos el Atributo onclick y el Valor que le asignamos es la llamada a la función que creamos en head llamada mifuncion.

Recuerda poner la Etiqueta de cierre tanto para el Elemento de párrafo como para el Elemento botón.

Apuntes finales del tema

Al igual que los archivos CSS, los archivos JAVA SCRIPT se pueden llamar de manera externa en el archivo HTML.

Aquí unos ejemplos:

No necesita ninguna ruta

Se encuentra en el mismo lugar que nuestro Archivo HTML.

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

Necesita una ruta para identificar el archivo

Se encuentra en una carpeta distinta a la de nuestro Archivo HTML.

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

Necesita una URL completa para vincular el archivo JAVA SCRIPT

Se encuentra en un sitio externo a nuestra web el Archivo HTML.

        <script src="miPrimerScript1.js"></script>
        <script src="/js/miPrimerScript2.js"></script>
        <script src="https://www.robertocoyomani.com/js/miPrimerScript3.js"></script>