Programación en JavaScript/Cómo escribir código en JavaScript
En este apéndice aprenderemos a insertar código JavaScript en nuestras páginas. Como sabemos, las páginas web se componen de código HTML (HyperText Markup Language), y para incluir el código Javascript utilizamos una marca HTML, <script>. Esta marca puede encontrarse en cualquier parte de la página web, tanto en el <head> como en el <body>. Aunque <script> es la forma más corta existen otras formas de definir código script. Por ejemplo <script language="JavaScript">. W3C recomienda utilizar el tag <script type="text/javascript">.
<html>
<head>
<title>Esta es una pagina web</title>
<script type="text/javascript">
var mi_numero = 1;
function calcula(numero) {
return numero + mi_numero;
}
</script>
</head>
<body>
<script>
document.write(calcula(1));
</script>
</body>
</html>
Este ejemplo mostrará un numero '2' en el navegador.
Además, podemos especificarle el lenguaje en el que queremos programar. Existen otros lenguajes para navegador como Visual Basic Script y PerlScript, pero nosotros usamos Javascript porque es universal: todos los navegadores lo soportan, mientras que los otros dependen de la plataforma donde nos encontremos. Para indicar el lenguaje, podemos escribir lo siguiente:
<script language="Javascript"> </script>
De esta forma indicamos el lenguaje a usar. Esto es necesario en el caso de que tengamos que usar lenguajes combinados en la misma página, como en el caso de que queramos enlazar una película flash con nuestra pagina web.
Otra forma de escribir Javascript en una página web es utilizando los eventos de las etiquetas HTML. Las etiquetas HTML tienen varios "eventos" que responden a determinados sucesos, como por ejemplo el click del ratón, el envío de un formulario, o la carga de una página. Por ejemplo, si queremos que aparezca un mensaje al cargar la página que estamos viendo, haríamos algo como esto:
<html>
<head>
</head>
<body onload="alert('Hola, esto es una página web')">
texto
</body>
</html>
Esto hará que aparezca un mensaje nada más cargar la página web. También podemos aplicar estos eventos como enlaces, botones, imágenes, etc... Prácticamente cualquier etiqueta HTML soporta eventos como onclick, que permite responder a una pulsación del botón izquierdo del ratón.
<html> <head> </head> Anderso <body> <a href="http://www.google.com/" onclick="alert('Vas a ir a Google')">Google</a> </body> </html>
En este ejemplo vemos cómo al mismo tiempo que vamos a Google, el navegador nos avisa de lo que vamos a hacer antes de que ocurra. Este tipo de acciones se pueden usar para comprobar formularios antes de enviar los datos (e incluso, evitar su envío si no son correctos), comprobar dónde pinchamos en una imagen, etc..., observando los cambios en los objetos Javascript.
Y una última manera de ejecutar código Javascript es adjuntando un archivo al código principal, de tal forma que podemos agrupar las funciones, clases y demás en un archivo, y reutilizar ese archivo tantas veces como queramos posteriormente. Un ejemplo puede ser éste:
funciones.js:
function saludo(nombre) {
alert('Hola, ' + nombre);
}
saludo.html:
<html>
<head>
<title>Esta es una pagina web</title>
<script language="Javascript" src="funciones.js"></script>
</head>
<body>
<script>
saludo('Ana');
</script>
</body>
</html>
En este ejemplo vemos cómo podemos incluir un código Javascript desde otro archivo y utilizar las funciones incluidas dentro de nuestro código, en tantos archivos como queramos. De esta forma podemos reutilizar el código todo lo necesario.
Los comentarios
editarLos comentarios son uno de los elementos más despreciados en todos los lenguajes de programación, pero son de suma utilidad: permiten aclarar y sintetizar el código, además de servir de eventuales "ocultadores" de código, ya que todo lo que se encuentra en un comentario no es interpretado por el navegador. Podemos escribir comentarios de dos formas diferentes:
// Este es un comentario de una línea
Ponemos dos barras normales para crear un comentario de una línea. Este comentario también lo podemos usar en el caso de que queramos ocultar una línea concreta de la ejecución del programa. Si queremos realizar un comentario de múltiples líneas, haremos:
/* Este es un comentario de múltiples líneas */
De esta forma, podemos comentar varias líneas de texto o código en un bloque. Esto es bastante interesante cuando tenemos que ocultar una gran cantidad de código continuo, que de otra forma tendríamos que comentar línea a línea con las dos barras. var input1 = document.getElementById("form1_input1");
var input2 = document.getElementById("form1_input2");
var sInput = input1.value + "," + input2.value;
var divSalida = document.getElementById("div1");
divSalida.innerHTML = sInput;
Los comentarios en el código son muy útiles para ayudar a comprender el sentido del programa, tanto para el creador del código como para otros que puedan leerlo.
Los nombres de las variables
editarJavascript es un lenguaje no tipado, es decir una variable puede servir para almacenar un número, una cadena de texto, un elemento DOM de HTML (sería más exacto hablar de "una referencia a un elemento DOM de HTML"). Este característica puede ser una ventaja cuando se tiene cierta soltura con el lenguaje, sin embargo puede ser una trampa mortal para aquellos que empiezan, ya que es fácil que intenten obtener el valor del texto almacenado en la variable "campo1" cuando en realidad "campo1" no contiene un número sino que referencia a un elemento de formulario input con identificador "campo1", de forma que para obtener el texto del campo en realidad deberían consultar el valor de "campo1.value". Estos errores son frecuentes y es fácil evitarlos si a la hora de elegir el nombre de nuestras variables prefijamos las mismas indicando el tipo de elemento al que referencian. P.ej, una variable que almacene texto puede ir prefijada con "s" (de string), una referencia a un objeto div puede ir prefijado con el propio "div" y una referencia a un input de formulario puede prefijarse con input. Así por ejemplo escribiríamos:
var input1 = document.getElementById("form1_input1");
var input2 = document.getElementById("form1_input2");
var sInput = input1.value + "," + input2.value;
var divSalida = document.getElementById("div1");
divSalida.innerHTML = sInput;
También es conveniente adjuntar un prefijo a las variables globales que van a ser compartidas por todas las funciones del script de forma que no se confundan con variables locales de igual nombre y sea fácil entender que se trata de variables globales compartidas sin necesidad de buscar su definición original cuando estamos inspeccionando el código de una función donde se utiliza. Por ejemplo:
function muestraMensaje(sMensaje){
globDivSalida.innerHTML = this.sMensaje;
}
En el anterior ejemplo se entiende que globDivSalida es una variable global (que probablemente habrá sido inicializada inmediatamente al arrancar el script) gracias a su prefijo glob y que además referencia a un div, gracias a su prefijo Div.