Introducción a
JavaScript
Portales Web
Vamos
a empezar por describir que es JavaScript, JavaScript es un lenguaje de
programación que se utiliza principalmente para crear páginas web dinámicas.
Una
página web dinámica es aquella que incorpora efectos como texto que aparece y
desaparece, animaciones, acciones que se activan al pulsar botones y ventanas
con mensajes de aviso al usuario. Técnicamente, JavaScript es un lenguaje de
programación interpretado, por lo que no es necesario compilar los programas
para ejecutarlos. En otras palabras, los programas escritos con JavaScript se
pueden probar directamente en cualquier navegador sin necesidad de procesos
intermedios.
Para
integra código JavaScript en documento XHTML se hace con la etiqueta <script>
que se pude incluir en cualquier parte del documento pero es aconsejable
hacerlo dentro de la etiqueta <head>. Existen 2 formas para integrar
código JavaScript en documento XHTML a continuación se presentan como hacerlo.
Incluir el código JavaScript en un documento
XHTML
Un
ejemplo claro seria en siguiente:
<!DOCTYPE
html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html
xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta
http-equiv="Content-Type" content="text/html;
charset=iso-8859-1" />
<title>Ejemplo de código JavaScript en el
propio documento</title>
<script type="text/javascript">alert("Un mensaje
de prueba");</script>
</head>
<body>
<p>Un párrafo de texto.</p>
</body>
</html>
En este ejemplo se integra el código
JavaScript dentro del documento XHTML pero este método no se los recomiendo hay
satura mucho el documento y es poco profesional.
Definir el código JavaScript en un archivo
externo
Se
pude hacer todo un archivo externo y solo llamar al documento con extensión
(.js) dentro del XTHML con la etiqueta <script> ya mencionada.
Pero
veamos un ejemplo más claro:
Archivo código.js
alert("Un mensaje de
prueba");
Documento XHTML
<!DOCTYPE
html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html
xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta
http-equiv="Content-Type" content="text/html;
charset=iso-8859-1" />
<title>Ejemplo de código JavaScript en el
propio documento</title>
<script
type="text/javascript"
src="/js/codigo.js"></script>
</head>
<body>
De
esta manera podemos hacer todo el código JavaScript dentro del archivo externo
y reutilizarlo en otro documento XHTML y haciendo más ligero el contenido del
mismo, esta manera de utilizar documentos con extensión (.js) es mucho más
profesional y al momento de programar todo está en orden.
Otra
de las grandes utilidades de usar JavaScript es incluirlo en los elementos de XHTML
veamos este pequeño ejemplo:
<!DOCTYPE
html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html
xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta
http-equiv="Content-Type" content="text/html;
charset=iso-8859-1" />
<title>Ejemplo de código JavaScript en el
propio documento</title>
</head>
<body>
<input
type="button" value="mostrar" onclick=" alert('Un mensaje
de prueba')" /></body>
</html>
Se
incluye en los eventos de los elementos de un documento XHTML como se muestra
en el ejemplo anterior.
Lo básico de JavaScript
Empecemos
con lo interesante y es con la programación básica de JavaScript que son las
bases para el uso de este lenguaje.
El
uso de variable es indispensable y en JavaScript no es la excepción y estas se
declaran de la siguiente manera:
Ejemplo
para declarar variables en JavaScript:
Var x;
Var y;
En
JavaScript no hace referencia al tipo de variable al momento de declararla esto
es muy importante.
También
cabe mencionar el uso de los arreglos que son prácticamente variables que
alojan más información o datos que una variable normal un ejemplo seria:
Ejemplo
de un array:
var dias = ["Lunes", "Martes",
"Miércoles", "Jueves", "Viernes",
"Sábado",
"Domingo"];
También
cabe mencionar las estructuras de control de flujo que son las del tipo “si se cumple esta condición, hazlo; si no se
cumple haz esto otro”.
·
Estructura if:
if(condicion) {
...
}
·
Estructura if…else:
if(condicion) {
...
}
else {
...
}
·
Estructura for:
var veces = 0;
if(veces < 4) {
alert("Mensaje");
veces++;
}
·
Estructura while:
while(condicion) {
...
}
·
Estructura do…while:
do {
...
} while(condicion);
·
Estructura switch
switch(variable)
{
case
valor_1:
...
break;
case
valor_2:
...
break;
...
case
valor_n:
...
break;
default:
...
break;
}
Como
se puede apreciar en los ejemplos anteriores se pueden usar estas estructuras
para crear diferentes aplicaciones y usar esto de acuerdo a lo que se necesite
pero esto solo es lo básico vamos a ver cómo usar cosas más complejas en
JavaScript a continuación.
Otras
de las cosas que son de gran utilidad a la hora de programar en cualquier
lenguaje son las funciones y JavaScript tiene ya predefinida como utilizar las
funciones.
function nombre_funcion() {
...
}
Así
declara las funciones de JavaScript y el nombre de la función se utiliza para llamar
a esa función cuando sea necesario.
Talvez una
de las cosas más importantes se JavaScript sea el uso del DOM o Document Object Model es una de las
innovaciones que más ha influido en el desarrollo de las páginas web dinámicas
y de las aplicaciones web más complejas.
Esto es a
lo que se la llama un árbol de nodos:
Un
punto muy importante es saber cómo acceder a los nodos y se puede hacer esto
mediante las funciones que proporcionan DOM, existen muchas pero solo
mencionare algunas.
Ejemplo
de funciones de DOM:
getElementsByTagName()
getElementsByName()
getElementById()
Se
pueden acceder a los nodos de un documento XHTML con estas funciones a
continuación les mostrare con ejemplos claros como su pueden usar.
El
siguiente ejemplo muestra cómo obtener todos los párrafos de una página XHTML:
var parrafos =
document.getElementsByTagName("p");
En el
siguiente ejemplo, se obtiene directamente el único párrafo con el nombre
indicado:
var parrafoEspecial =
document.getElementsByName("especial");
En
el siguiente ejemplo, se obtiene directamente el valor del elemento mediante el
id:
var cabecera =
document.getElementById("cabecera");
Hay
muchas maneras utilizar estas funciones que nos brinda DOM y que mejor que
conocer más de estas que con ejemplos, les mostrare los diversos usos que le
podemos dar.
El
siguiente ejemplo obtiene de forma directa la dirección a la que enlaza el
enlace:
var enlace =
document.getElementById("enlace");
//documento XHTML
<a id="enlace"
href="http://www...com">Enlace</a>
El
siguiente ejemplo obtiene el valor de la propiedad margin de la imagen:
var imagen =
document.getElementById("imagen");
alert(imagen.style.margin);
//documento XHTML
<img
id="imagen" style="margin:0; border:0;"
src="logo.png" />
Manejadores de eventos
Las funciones o código JavaScript que se
definen para cada evento se denominan
"manejador de eventos" y como JavaScript es un lenguaje muy flexible,
existen varias formas diferentes de indicar los manejadores:
▪ Manejadores como atributos de los elementos
XHTML.
▪ Manejadores como funciones JavaScript externas.
▪ Manejadores "semánticos".
De los 3 mencionados anteriormente yo
personalmente aconsejo el uso de los manejadores semánticos pero igual es al
gusto del programador, explicare el uso de los 3:
·
Manejadores
de eventos como atributos XHTML
Se trata del método más sencillo y a la vez menos
profesional de indicar el código
JavaScript que se debe ejecutar cuando se
produzca un evento. En este caso, el código se incluye en un atributo del
propio elemento XHTML. En el siguiente ejemplo, se quiere mostrar un mensaje
cuando el usuario pinche con el ratón sobre un botón:
<input
type="button" value="Pinchame y verás"
onclick="alert('Gracias por
pinchar');"
/>
·
Manejadores
de eventos y variable this
JavaScript
define una variable especial llamada this que se crea automáticamente y que se
emplea en algunas técnicas avanzadas de programación.
<div
id="contenidos" style="width:150px; height:60px; border:thin
solid silver"
onmouseover="this.style.borderColor='black';"
onmouseout="this.style.borderColor='silver';">
Sección de contenidos...
</div>
·
Manejadores de eventos como
funciones externas
La definición de los manejadores de eventos en
los atributos XHTML es el método más sencillo pero menos aconsejable de tratar
con los eventos en JavaScript. El principal inconveniente es que se complica en
exceso en cuanto se añaden algunas pocas instrucciones, por lo que solamente es
recomendable para los casos más sencillos.
function muestraMensaje() {
alert('Gracias por pinchar');
}
//documento XHTML
<input type="button"
value="Pinchame y verás" onclick="muestraMensaje()" />
·
Manejadores de eventos semánticos
Los métodos que se han visto para añadir
manejadores de eventos (como atributos
XHTML y como funciones externas) tienen un
grave inconveniente: "ensucian" el código
XHTML de la página.
Como es conocido, una de las buenas prácticas
básicas en el diseño de páginas y aplicaciones web es la separación de los contenidos
(XHTML) y su aspecto o presentación (CSS). Siempre que sea posible, también se
recomienda separar los contenidos (XHTML) y su comportamiento o programación
(JavaScript).
Así, el siguiente ejemplo:
<input
id="pinchable" type="button" value="Pinchame y
verás"
onclick="alert('Gracias por
pinchar');" />
Se puede transformar en:
// Función externa
function muestraMensaje() {
alert('Gracias por pinchar');
}
// Asignar la función externa al elemento
document.getElementById("pinchable").onclick
= muestraMensaje;
// Elemento XHTML
<input
id="pinchable" type="button" value="Pinchame y
verás" />
La técnica de los manejadores semánticos
consiste en:
1. Asignar un identificador único al elemento
XHTML mediante el atributo id.
2. Crear una función de JavaScript encargada
de manejar el evento.
3. Asignar la función externa al evento
correspondiente en el elemento deseado.
