JavaScript Dónde


Tabla de contenido

    Mostrar tabla de contenidos


La etiqueta <script>

En HTML, el código JavaScript se inserta entre las etiquetas <script> y </script>.

Ejemplo

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

Pruébelo usted mismo →

<!DOCTYPE html>
<html>
<body>

<h2>JavaScript in Body</h2>

<p id="demo"></p>

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

</body>
</html> 

Los ejemplos antiguos de JavaScript pueden utilizar un atributo de tipo: <script; type="text/javascript">.
El atributo de tipo no es obligatorio. JavaScript es el lenguaje de secuencias de comandos predeterminado en HTML.


Funciones y eventos de JavaScript

Una función de 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.

Aprenderá mucho más sobre funciones y eventos en capítulos posteriores.


JavaScript en o

Puede colocar cualquier cantidad de scripts en un documento HTML.

Los scripts se pueden colocar en la sección <body> o en la sección <head> de una página HTML. o en ambos.


JavaScript en

En este ejemplo, una función de JavaScript se coloca en la sección <head> de una página HTML.

La función se invoca (llama) cuando se hace clic en un botón:

Ejemplo

<!DOCTYPE html>
<html>
<head>
<script>
function myFunction() {
  document.getElementById("demo").innerHTML = "Paragraph changed.";
}
</script>
</head>
<body>

<h2>Demo JavaScript in Head</h2> <p id="demo">A Paragraph</p> <button type="button" onclick="myFunction()">Try it</button>

</body> </html>

Pruébelo usted mismo →

<!DOCTYPE html>
<html>
<head>
<script>
function myFunction() {
  document.getElementById("demo").innerHTML = "Paragraph changed.";
}
</script>
</head>
<body>

<h2>Demo JavaScript in Head</h2>

<p id="demo">A Paragraph.</p>

<button type="button" onclick="myFunction()">Try it</button>

</body>
</html> 


JavaScript en

En este ejemplo, una función de JavaScript se coloca en la sección <body> de una página HTML.

La función se invoca (llama) cuando se hace clic en un botón:

Ejemplo

<!DOCTYPE html>
<html>
<body>

<h2>Demo JavaScript in Body</h2>

  <p id="demo">A Paragraph</p>

  <button type="button" onclick="myFunction()">Try 
it</button>
 
<script>
function myFunction() {
    document.getElementById("demo").innerHTML = "Paragraph changed.";
}
</script>
 
</body>
</html>

Pruébelo usted mismo →

<!DOCTYPE html>
<html>
<body>

<h2>Demo JavaScript in Body</h2>

<p id="demo">A Paragraph.</p>

<button type="button" onclick="myFunction()">Try it</button>

<script>
function myFunction() {
  document.getElementById("demo").innerHTML = "Paragraph changed.";
}
</script>

</body>
</html> 

Colocar scripts en la parte inferior del elemento <body> mejora la visualización velocidad, porque la interpretación del guión ralentiza la visualización.


JavaScript externo

Los scripts también se pueden colocar en archivos externos:

Archivo externo: myScript.js

function myFunction() {
  document.getElementById("demo").innerHTML = "Paragraph changed.";
}

Los scripts externos son prácticos cuando se utiliza el mismo código en muchas páginas web diferentes.

Los archivos JavaScript tienen la extensión de archivo .js.

Para utilizar un script externo, coloque el nombre del archivo de script en el atributo src (fuente) de una etiqueta <script>:

Ejemplo

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

Pruébelo usted mismo →

<!DOCTYPE html>
<html>
<body>

<h2>Demo External JavaScript</h2>

<p id="demo">A Paragraph.</p>

<button type="button" onclick="myFunction()">Try it</button>

<p>This example links to "myScript.js".</p>
<p>(myFunction is stored in "myScript.js")</p>

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

</body>
</html>

Puede colocar una referencia de secuencia de comandos externa en <head> o <body> como desee.

El script se comportará como si estuviera ubicado exactamente donde se encuentra la etiqueta <script>.

Los scripts externos no pueden contener etiquetas <script>.


Ventajas de JavaScript externo

Colocar scripts en archivos externos tiene algunas ventajas:

  • 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 secuencia de comandos a una página, utilice varias etiquetas de secuencia de comandos:

Ejemplo

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

Referencias externas

Se puede hacer referencia a un script externo de 3 maneras diferentes:

  • Con una URL completa (una dirección web completa)

  • Con una ruta de archivo (como /js/)

  • sin ningún camino

Este ejemplo utiliza una URL completa para vincular a myScript.js:

Ejemplo

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

Pruébelo usted mismo →

<!DOCTYPE html>
<html>
<body>

<h2>External JavaScript</h2>

<p id="demo">A Paragraph.</p>

<button type="button" onclick="myFunction()">Click Me</button>

<p>This example uses a full web URL to link to "myScript.js".</p>
<p>(myFunction is stored in "myScript.js")</p>

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

</body>
</html>

Este ejemplo utiliza una ruta de archivo para vincular a myScript.js:

Ejemplo

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

Pruébelo usted mismo →

<!DOCTYPE html>
<html>
<body>

<h2>External JavaScript</h2>

<p id="demo">A Paragraph.</p>

<button type="button" onclick="myFunction()">Try it</button>

<p>This example uses a file path to link to "myScript.js".</p>
<p>(myFunction is stored in "myScript.js")</p>

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

</body>
</html>

Este ejemplo no utiliza ninguna ruta para vincular a myScript.js:

Ejemplo

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

Pruébelo usted mismo →

<!DOCTYPE html>
<html>
<body>

<h2>Demo External JavaScript</h2>

<p id="demo">A Paragraph.</p>

<button type="button" onclick="myFunction()">Try it</button>

<p>This example links to "myScript.js".</p>
<p>(myFunction is stored in "myScript.js")</p>

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

</body>
</html>

Puedes leer más sobre rutas de archivos en el capítulo HTML. Rutas de archivos.