JavaScript III - Añadiendo JS a nuestra página

3/3/2018

Ya estamos aquí de nuevo con nuestro curso de JS, en el anterior artículo vimos como añadir comentarios a nuestro código, como referenciar elementos de HTML desde JavaScript y la manera más rápida de empezar a añadir JavaScript a nuestra página. Hoy seguiremos aprendiendo sobre las dos formas que nos quedan de añadir las funcionalidades de JavaScript antes de empezar con código más complejo, comencemos.

Dentro del documento HTML entre las etiquetas <script> y </script>

Cuando las líneas de código son más extensas que lo visto en el artículo anterior debemos agruparlas todos juntas dentro de las etiquetas <script>, de la misma manera que vimos que se hacía con CSS con la etiqueta <style>, recordemos que en especificaciones anteriores a HTML5 había que especificar el lenguaje en los estilos, pero desde HTML5 eso no es necesario, porque CSS sería el lenguaje por defecto, pues bien con JavaScript sucede lo mismo no es necesario incluir el atributo type en la etiqueta <script> para especificar el lenguaje, ya que en HTML5 el lenguaje de script por defecto es JavaScript.

Practiquemos

Como acabamos de explicar en HTML5, ya no es necesario indicar que lenguaje de script vamos a usar, si este es JavaScript, aunque esta sería la forma como se indicaría en versiones anteriores;

<script type= "text / javascript"> Línea de código </script>

Os lo indicamos por si a la hora de inspeccionar código más antiguo os preguntáis que significa.
En el siguiente ejemplo vamos a añadir el código entre las etiquetas <script> y </script>.

<!DOCTYPEhtml>
<html>
<body>

<h2>Insertando JavaScript entre las etiquetas</h2>

<button id="aqui" onclick="cambiar_texto()">Pulsa</button>

<p>Fijaros en el botón al pulsarlo como cambia el texto</p>

<script>
function cambiar_texto() {
document.getElementById("aqui").innerHTML = "Insertando un texto directamente con JavaScript";
}
</script>

</body>
</html>

Insertando JavaScript entre las etiquetas

Fijaros en el botón al pulsarlo como cambia el texto

Ejemplo nº1

En el ejemplo nº1, el código JavaScript lo situamos dentro del cuerpo del documento HTML (entre las etiquetas <body> y </body>), pero la práctica recomendada consiste en situarlo en la cabecera (entre las etiquetas <head> y </head>).

En el código hemos referenciado el botón con id identificándolo como “aquí” y le indicamos que al hacer un click sobre él active la función cambiar_texto().

Funciones y eventos

El elemento <script> y su contenido lo podemos colocar donde queramos del documento ya sea anidado en otros elementos o entre ellos, aunque para mayor claridad se recomienda, ubicarlos en la cabecera del documento como podéis observar en el código de abajo de estas líneas. Después le llegaría el turno a referenciar los elementos a los que queremos queden vinculados con nuestro <script>.

<!DOCTYPEhtml>
<htmllang="es">
       <head>
             <title>NeCLO JavaScript</title>
       <script>
             function funcion_creada_1(){
             alert('¡correcto!');
             }
             function ha_pulsado(){
             document.getElementsByTagName('button')[1].onclick=funcion_creada_1;
             }

             window.onload=ha_pulsado;

       </script>
       </head>
       <body>
             <h2>Solo uno de estos botones creará un ventana emergente, ¿cuál?</h2>
             <div id="principal">
                    <button>BOTÓN 1</button>
                    <button>BOTÓN 2</button>
                    <button>BOTÓN 3</button>
             </div>
       </body>
</html>

Ejemplo nº1

En el ejemplo nº1, el código JavaScript lo situamos dentro del cuerpo del documento HTML (entre las etiquetas <body> y </body>), pero la práctica recomendada consiste en situarlo en la cabecera (entre las etiquetas <head> y </head>).

En el código hemos referenciado el botón con id identificándolo como “aquí” y le indicamos que al hacer un click sobre él active la función cambiar_texto().

Funciones y eventos

El elemento <script> y su contenido lo podemos colocar donde queramos del documento ya sea anidado en otros elementos o entre ellos, aunque para mayor claridad se recomienda, ubicarlos en la cabecera del documento como podéis observar en el código de abajo de estas líneas. Después le llegaría el turno a referenciar los elementos a los que queremos queden vinculados con nuestro <script>.

<!DOCTYPEhtml>
<htmllang="es">
       <head>
             <title>NeCLO JavaScript</title>
       <script>
             function funcion_creada_1(){
             alert('¡correcto!');
             }
             function ha_pulsado(){
             document.getElementsByTagName('button')[1].onclick=funcion_creada_1;
             }

             window.onload=ha_pulsado;

       </script>
       </head>
       <body>
             <h2>Solo uno de estos botones creará un ventana emergente, ¿cuál?</h2>
             <div id="principal">
                    <button>BOTÓN 1</button>
                    <button>BOTÓN 2</button>
                    <button>BOTÓN 3</button>
             </div>
       </body>
</html>
Ejemplo nº4

Hay que tener en cuenta que el documento de HTML que estamos escribiendo, el navegador lo lee de forma secuencial, por esta razón no se puede referenciar un elemento que aún no ha sido creado.

Veamos que queremos decir con esto:

En el ejemplo nº4 se ha colocado el código (<script>) en la cabecera del texto, por lo tanto, teniendo en cuenta la manera secuencial de leer el navegador, el código es leído antes de crear el elemento <button> que queríamos referenciar.

Si en vez de escribirlo de esta forma hubiéramos referenciado <button> directamente, el navegador nos hubiera dado un mensaje de error, para decirnos que no ha encontrado el elemento.

Para evitar conflictos problemas o como queráis llamarlo el código lo convertimos a una función llamada funcion_creada_1().

function funcion_creada_1() {
             alert('¡correcto!');
             }

Y la referencia al elemento <button> junto con el manejador del eventos se colocaron en otra función esta vez llamada ha_pulsado().

function ha_pulsado() {
             document.getElementsByTagName('button')[1].onclick=funcion_creada_1;
             }

Las funciones son llamadas desde la última línea de nuestro código mediante el uso de otro manejador de eventos, en este caso es onload que está relacionado con la ventana, este manejador de eventos hará que se ejecute la función ha_pulsado() cuando nuestro documento sea totalmente cargado por el navegador, estando ya todos los elementos de la página creados.

window.onload=ha_pulsado;

Con todo esto vamos ahora a repasar paso a paso como el navegador interpreta nuestro documento.

Lo primero que el navegador leerá en el documento del código JavaScript que tecleamos, serán las funciones JavaScript que quedarán declaradas, pero no se ejecutarán.

Seguidamente los elementos HTML, incluido en el paquete el elemento <button> se cargarán mostrándose todo el documento completo en la ventana de nuestro navegador, activándose al completarse la carga del documento con el evento onload y así la función ha_pulsado() es lanzada.

¡Antención!

document.getElementsByTagName('button')[1].onclick=funcion_creada_1;

En la línea de código que está justo encima de estas líneas, vemos un 1 en rojo que está entre corchetes, 'button' hace referencia a que la función queremos que la ejecute un botón y el 1 al botón que hará la función. Si pusiéramos 0 sería en botón 1, si colocásemos un 2 sería el botón 3, pero en este caso es el 1 por lo tanto es el botón 2, porque es el segundo botón por el orden en que aparece en el documento esto se explicó en anteriores artículos.

0 haría referencia al primer elemento referenciado de ese tipo

1 segundo elemento

2 tercer elemento

3 cuarto elemento… y así sucesivamente.

JavaScript incorporado por un archivo externo

La incorporación de JavaScript a nuestra página mediante un archivo externo sería la más aconsejable por regla general.

Al usar un archivo externo, un mismo código puede ser utilizado en más de una página, facilitando su lectura y su modificación, al separar HTML y JavaScript. Estos archivos tienen la extensión .js.

La sintaxis que utilizaremos para usar un archivo externo de JavaScript sería, colocar la dirección con el nombre del archivo, todo entre comillas como valor en el atributo src en el interior de una etiqueta <script>.

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

<!DOCTYPEhtml>
<htmllang="es">
       <head>
             <title>NeCLO JavaScript</title>
       <script src="ARTJAVASCRIPIIITEJEMPLO4.js"></script>
       </head>
       <body>
             <h2>Solo uno de estos botones creará un ventana emergente, ¿cuál?</h2>
             <div id="principal">
                     <button>BOTÓN 1</button>
                    <button>BOTÓN 2</button>
                    <button>BOTÓN 3</button>
             </div>
       </body>
</html>

Veamos el tema de las direcciones, en este ejemplo pondríamos la dirección completa, de esta forma podríamos vincular hasta un script externo a la página.

<script src="http://www.negocioscontralaobsolescencia.com/files/theme/ART146JAVASCRIPTIII/ARTJAVASCRIPIIITEJEMPLO4.js"></script>

<!DOCTYPEhtml>
<htmllang="es">
       <head>
             <title>NeCLO JavaScript</title>
<script src="http://www.negocioscontralaobsolescencia.com/files/theme/ART146JAVASCRIPTIII/ARTJAVASCRIPIIITEJEMPLO4.js"></script>
       </head>
       <body>
             <h2>Solo uno de estos botones creará un ventana emergente, ¿cuál?</h2>
             <div id="principal">
                    <button>BOTÓN 1</button>
                    <button>BOTÓN 2</button>
                    <button>BOTÓN 3</button>
             </div>
       </body>
</html>

El archivo:

http://www.negocioscontralaobsolescencia.com/files/theme/ART146JAVASCRIPTIII/ARTJAVASCRIPIIITEJEMPLO4.js

Es un archivo real, el cual os hemos dejado por si queréis enlazarlo como un archivo externo de JavaScript, para practicar.

En la siguiente dirección vemos como sería si el archivo estuviera ubicado en una carpeta interior de nuestra web.

<script src="/files/theme/ART146JAVASCRIPTIII/ARTJAVASCRIPIIITEJEMPLO4.js "></script>

Y ahora veremos la dirección como quedará en nuestras prácticas de ahora, debido a que nuestro archivo script está ubicado donde el documento de nuestra página.

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

Si en vez de estar dentro de la misma carpeta, estuviera a su vez dentro de otra carpeta quedaría de la siguiente forma:

<script src="ARCHIVOS_JAVASCRIPT/ARTJAVASCRIPIIITEJEMPLO4.js"></script>

Donde ARCHIVOS_JAVASCRIPT sería el nombre que le hemos dado a la carpeta donde meteremos los documentos .js.

Y hasta aquí hemos llegado por hoy, ya hemos visto las formas que tendríamos de añadir JavaScript a nuestra página ahora iremos poco a poco adentrándonos en las posibilidades que nos abre este lenguaje de programación, nos vemos en el siguiente artículo con más y siempre que podamos mejor.

Manuel Castelló (kasmangou)

Temas relacionados: Programación, Redacción independiente, kasmangou, JavaScript

Reconocimientos y más información sobre la obra gráfica
ADVERTENCIA: En este foro, no se admitirán por ninguna razón el lenguaje soez y las descalificaciones de ningún tipo. Se valorará ante todo la buena educación y el rigor sobre el tema a tratar, así que nos enorgullece reconocer que rechazaremos cualquier comentario fuera de lugar.

0 Comentarios