En HTHL, el código Javascript es insertado entre las etiquetas <script></script>.

Ejm

<script>
document.getElementById("demo").innerHTML = "My First JavaScript";
</script>

Funciones y eventos Javascript

Una función JavaScript es un bloque de código JavaScript, que se puede ejecutar cuando se "llama". Por ejemplo, se puede llamar a una función cuando ocurre un evento, como cuando el usuario hace clic en un botón.

Javascript en <head> o en <body>

Puedes colocar cualquier número de secuencias de comandos en un documento HTML. Los scripts se pueden colocar en la sección <body> o <head> de una página HTML, o en ambas.

Javascript en <head>

En este ejemplo, se coloca una función de JavaScript en la sección <head> de una página HTML. La función se invoca (llama) cuando se hace clic en un botón.

Ejm

<!DOCTYPE html>
<html lang="es">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Ejm 06 Javascript</title>
    <script>
        function myFunction() {
            document.getElementById("demo").innerHTML = "Párrafo cambiado";
        }
    </script>
</head>
<body>
    <h1>Javascript en el head</h1>
    <p id="demo">Esto es un párrafo</p>
    <button type="button" onclick="myFunction();">Haz clic</button>
</body>
</html>

Javascript en <body>

En este ejemplo, se coloca una función de JavaScript en la sección <body> de una página HTML. La función se invoca (llama) cuando se hace clic en un botón.

<!DOCTYPE html>
<html>
<body>

<h2>Demo JavaScript en Body</h2>
<p id="demo">Un párrafo</p>
<button type="button" onclick="myFunction()">Haz clic</button>

<script>
function myFunction() {
  document.getElementById("demo").innerHTML = "Párrafo cambiado.";
}
</script>

</body>
</html>

Javascript externo

Los scripts se pueden cargar desde archivos externos. Los scripts externos son prácticos cuando se usa el mismo código en muchas páginas web diferentes. Los archivos JavaScript tienen la extensión de archivo .js. Para usar un script externo utiliza el atributo src en la etiqueta script de la siguiente manera.

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

Puedes colocar una referencia de secuencia de comandos externa en <head> o <body> como desees. El script se comportará como si estuviera ubicado exactamente donde se encuentra la etiqueta <script>.

Ventajas de los archivos Javascript externos

  • Separa HTML y código.
  • Hace que HTML y JavaScript sean más fáciles de leer y mantener.
  • Los archivos JavaScript almacenados en caché pueden acelerar la carga de la página

Para agregar varios archivos de secuencias de comandos a una página, usa varias etiquetas script.

<script src="myScript1.js"></script>
<script src="myScript2.js"></script>

Referencias externas

Un script externo se puede referenciar de 3 maneras:

  • Con la URL completa
  • Con una ruta de archivo (como /js/)
  • Con una ruta en la misma carpeta

Este ejemplo usa una URL completa para vincular a myScript.js

<script src="https://www.sutilweb.com/js/myScript.js"></script>

Veamos el mismo ejm con una ruta de archivo en una carpeta distinta de la actual

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

La ruta en la misma carpeta será la siguiente

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