Aprendemos JavaScript: ¿Dónde va el código JS?

Tenemos tres posibilidades para escribir el código JavaScript.

1.- En el cuerpo del documento HTML. En el body.
2.- En la cabecera del documento HTML. En el head.
3.- En un archivo externo que tiene que guardarse con la extensión .js.

Vamos a colocar en sendos iframes un ejemplo de cada caso para comprobar que funciona correctamente.

Primer caso. El código está escrito en el cuerpo del documento web. Dentro del body.
Este es el código exacto del documento que se muestra:


<!DOCTYPE html>
<html>
<head>
<title>Ejemplo de JavaScript en el body</title>
<meta charset="UTF-8" />
<meta name="author" content="Ángel Puente" />
</head>
<body>

<h2>JavaScript en el body</h2>
<p id="demo">Esto es un párrafo.</p>
<button type="button" onclick="myFunction()">Pruébalo</button>

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

</body>
</html>

Segundo caso. El código está escrito en la cabecera del documento. Dentro del head,
Este es el código exacto del documento que se muestra:


<!DOCTYPE html>
<html>
<head>
<title>Ejemplo de JavaScript en el head</title>
<meta charset="UTF-8" />
<meta name="author" content="Ángel Puente" />
<script>
function myFunction() {
    document.getElementById("demo").innerHTML = "El párrafo ha sido cambiado.";
}
</script>
</head>

<body>
<h2>JavaScript en el head</h2>
<p id="demo">Esto es un párrafo.</p>
<button type="button" onclick="myFunction()">Pruébalo</button>
</body>

Tercer caso. El código está escrito en un documento aparte. En este caso se llama myScript.js.
Este es el código exacto del documento que se muestra:


<!DOCTYPE html>
<html>
<head>
<title>Ejemplo de JavaScript en un archivo externo</title>
<meta charset="UTF-8" />
<meta name="author" content="Ángel Puente" />
</head>
<body>

<h2>JavaScript en un archivo externo</h2>
<p id="demo">Esto es un párrafo.</p>
<button type="button" onclick="myFunction()">Pruébalo</button>
<p><strong>Nota:</strong> myFunction está creada en un archivo externo llamado "myScript.js".</p>
<script src="myScript.js"></script>

</body>
</html>

Y el código escrito en el documento myScript.js:

function myFunction() {
document.getElementById("demo").innerHTML = "El párrafo ha sido cambiado.";
}

Esta función ya la hemos visto en un ejemplo anterior.
Lo único a señalar es que ponemos de manifiesto que la colocación del código es indiferente en el caso del body o del head.
El tema novedoso es el archivo externo.
Observamos que en el archivo externo no escribimos las etiquetas <script>. Solo se pone el contenido encerrado en esas etiquetas.
Y que desde el documento principal tenemos que hacer una llamada al archivo .js.
Se hace con esta línea de código:
<script src="myScript.js"></script>
Para que funcione correctamente el archivo principal, el documento .html y el archivo .js tienen que estar en la misma carpeta en el servidor, como así es en este caso.
Si no fuese así habría que sustituir el src por la ruta completa o relativa del archivo .html respecto del archivo .js.

A partir del contenido del capítulo JS Where to del curso de JavaScript de W3Schools.

jueves, 7 de enero de 2016

¿Dónde va el código JS?

No hay comentarios:

Publicar un comentario