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 body

Prácticamente es lo mismo, sólo que en lugar de poner el Elemento script en head lo tenemos que poner entre las Etiquetas del Elemento body.

Quedaría de la siguiente manera:

        <!DOCTYPE html>
        <html>
        <head>
        </head>
        <body>
            <h2>Prueba JAVA SCRIPT desde head</h2>
            <p id="prueba">Ya sabemos que funciona, así que aprieta el botón.</p>
            <button type="button" onclick="mifuncion()">Dame clic</button>
            <script>
                function mifuncion(){
                document.getElementById("prueba").innerHTML = "¡Funcionó! Ya lo sabíamos. Fue emocionante,
                no tanto como el primer botón, pero lo logramos ¡Muy bien!.";
                }
            </script>
        </body>
        </html>

El resultado quedaría de la siguiente manera:

Prueba JAVA SCRIPT desde body

Ya sabemos que funciona, así que aprieta el botón.

Nota: Es importante que coloques el script en la parte inferior del Elemento body para que la visualización de la página sea la prioridad y hasta el final lo que lea el navegador sean las instrucciones JAVA SCRIPT. Si es al revés o de manera intercalada, la página abrirá muy lento.

¿Se puede utilizar un archivo JAVA SCRIPT externo?

Sí, se puede utilizar un archivo externo con las instrucciones de código para manipular los elementos HTML.

Tiene muchas ventajas cuando un mismo código se utiliza en varias páginas.

Para poder usar un archivo JAVA SCRIPT debemos de crearlo con la extensión .js.

Ya creado nuestro archivo JAVA SCRIPT con la extensión .js para llamarlo en nuestro archivo HTML necesitamos el Atributo src. El atributo nos permite llamar recursos externos. Éste mismo atributo lo utilizamos en el Elemento de Imagen img para mandar a llamar una imagen.

El Elemento script lo seguiremos utilizando pero de una manera distinta. ¡Vamos con el ejemplo!

Primer paso:

Vamos a crear nuestro archivo .js y para lograrlo abrimos un editor de texto o nuestra IDE de preferencia.

Dentro de éste archivo escribiremos el siguiente script:

            function mifuncion(){
            document.getElementById("prueba").innerHTML = "¡Funcionó! Y fue desde un Archivo JAVA SCRIPT externo.";
            }

Ya con el código escrito en nuestro editor de texto, vamos a guardarlo con el nombre "miPrimerScript.js

¡Ya tenemos nuestro archivo JAVA SCRIPT creado! Ahora tenemos que mandarlo a llamar desde nuestro archivo HTML. Al igual que los ejemplos anteriores, podemos agregar las Etiquetas del Elemento script en el Elemento head o en el Elemento body pero en lugar de escrbir el script en nuestro archivo HTML, lo que haremos en mandar a llamar nuestro Archivo Externo desde la Etiqueta de inicio del Elemento script con el Atributo src como lo verás a continuación:

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

Así se vería el Elemento script externo si lo agregamos en el Elemento head:

        <!DOCTYPE html>
        <html>
        <head>
                <script src="miPrimerScript.js"></script>
        </head>
        <body>
        </body>
        </html>
Así se vería el Elemento script externo si lo agregamos en el Elemento body: 
        <!DOCTYPE html>
        <html>
        <head>
        </head>
        <body>
            <script src="miPrimerScript.js"></script>
        </body>
        </html>
Vamos con la práctica y vamos a escribir en nuestro archivo HTML lo siguiente: 
        <!DOCTYPE html>
        <html>
        <head>
            <script src="miPrimerScript.js"></script>
        </head>
        <body>
            <h2>Prueba JAVA SCRIPT desde head</h2>
            <p id="prueba">Este texto se cambiará desde un archivo JAVA SCRIPT externo llamado desde el <b>Elemento head</b></p>
            <button type="button" onclick="mifuncion()">Dame clic</button>
        </body>
        </html>
Estamos agregando el script entre las Etiquetas del Elemento head.

Al igual que en los dos ejemplos anteriores vamos a agregar un botón que cambie el texto del Elemento Párrafo.

El resultado se verá de la siguiente manera:

Prueba JAVA SCRIPT desde head desde un Archivo Externo

Este texto se cambiará desde un archivo JAVA SCRIPT externo llamado desde el Elemento head

¡El botón funciona!

El último ejemplo será ahora pasando el Elemento script de head a body. Recuerda porner sus scripts siempre hasta el final para no afectar el rendimiento de tu página web.

Nuestro archivo HTML se vería de la siguiente manera:

        <!DOCTYPE html>
        <html>
        <head>
        </head>
        <body>
            <h2>Prueba JAVA SCRIPT desde head</h2>
            <p id="prueba">Este texto se cambiará desde un archivo JAVA SCRIPT externo llamado desde el
            <b>Elemento body.</b></p>
            <button type="button" onclick="mifuncion()">Dame clic</button>
            <script src="miPrimerScript.js"></script>
        </body>
        </html>
Y el resultado debe ser igual que el ejemplo anterior:

Prueba JAVA SCRIPT desde body desde un Archivo Externo

Este texto se cambiará desde un archivo JAVA SCRIPT externo llamado desde el Elemento body.

¡Funcionó!

Ventajas de usar archivos JAVA SCRIPT externos

La primera ventaja es tener el archivo HTML separado del Código que se encuentra de los Archivos JAVA SCRIPT.

Esto permite tener un fácil lectura al momento de leer ambos archivos y dar mantenimiento en caso de ser necesario.

Además si necesitamos modificar varias páginas web que comparten el mismo código, a tenerlo de manera externa, los cambios son de manera masiva y rápida.

Además podemos tener varios archivos JAVA SCRIPT y podemos agregarlos fácilmente. Lo que tenemos que hacer es escribir en nuetro Archivo HTML un Elemento script por cada archivo externo que llamemos. Por ejemplo:

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

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>