- Dentro de un elemento <script >...</script>.
- Usando un archivo vinculado .js.
- Haciendo uso de manejadores de eventos dentro de algunos elementos HTML.
- Mediante la sintaxis de dirección pseudo-URL javascript: referida a un enlace.
1. Hacer uso del elementos script.
El método más común para incluir código JavaScript dentro de un documento HTML es utilizando el elemento SCRIPT. Los navegadores que reconocen scripts o guiones asumen que el texto comprendido entre etiquetas <script>...</script> corresponde a algún lenguaje de script, de forma predeterminada se utiliza JavaScript, aunque es posible indicar mediante el uso del atributo languaje, el lenguaje que se debe utilizar.
<script language="JavaScript">
var msg = "Usando JavaScript";
document.write("<p>Estamos " + msg + ".</p>");
</script>
De acuerdo a la sintaxis propuesta por el consorcio W3C, en lugar del atributo language, debería hacer uso del atributo type, indicando el tipo MIME del lenguaje de script a utilizar. El tipo MIME para el lenguaje JavaScript es text/javascript. Así, el ejemplo anterior quedaría:
<script type="text/javascript">
var msg = "Usando JavaScript";
document.write("<p>Estamos " + msg + ".</p>");
</script>En algún momento, se solía utilizar ambos atributos, para lograr la mayor compatibilidad posible con todos los navegadores en ese momento, no obstante, hoy en día todos los navegadores han implementado la recomendación de la W3C, por lo que puede hacerse uso únicamente del atributo type para indicar el lenguaje que será utilizado en el script.
Un mismo documento HTML puede contener uno o varios elementos SCRIPT, como se muestra a continuación:
Al ejecutar el script se ejecutarán dos scripts. El primero le solicitará su nombre y el segundo le solicitará su edad. Al final se mostrará en la página web el nombre y edad de quién ejecute el script.
2. Archivo vinculado .js
Una de las formas, más recomendadas para incluir código de JavaScript a un documento web es hacer uso del atributo src en el elemento SCRIPT, de modo que no se inserte el guión directamente en el documento HTML.Ingrese el siguiente código usando el Notepad++:
Guarde el script en un archivo con extensión .js en alguna carpeta en el disco de su computadora. Llame al script comparacion.js.
Cree el documento HTML, siempre con el Notepad++ y guárdelo con el nombre comparacion.html.
Página web después de ingresar dos cantidades mediante diálogos prompt().
Esta ha sido la forma de utilizar JavaScript para controlar la interacción del usuario con casi cualquier elemento de la página web; sin embargo, hoy en día, la más desaconsejada. Este método permite incluir, en forma de atributo de algunos elementos HTML, código de JavaScript que será ejecutado cuando se produzca el evento en dicho elemento producto de la interacción del usuario con la página. A estos atributos HTML, se le denomina manejadores de eventos.
Veamos un ejemplo:
<form>
<input type="button" value="Pulsar" onclick="alert('Has pulsado el botón')" />
</form>
El ejemplo anterior hará aparecer un diálogo alert en el navegador indicándole al usuario que hizo clic sobre el botón.
4. Direcciones pseudo-URL
Los navegadores actuales suelen reconocer las direcciones pseudo-URL. Estas permiten invocar una instrucción desde un enlace, por ejemplo. Si desea comprobar si con su navegador puede utilizar sintaxis de pseudo-URL, puede ingresar una instrucción como la siguiente en la barra de direcciones del mismo: javascript:alert('Esta es una dirección pseudo-URL'). Puede ser que por razones de seguridad, su navegador no realice ninguna acción. Sin embargo, la comprobación final, puede hacerse con un script sencillo como el siguiente:
El resultado es el siguiente:
<a href="javascript:prompt('Ingresa tu nombre','')" title="Tu nombre">
Clic para ingresar tu nombre
</a>
