Desarrollo de Paginas Web

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">

<head>

<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">

<head>

<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">

<head>

<title>Ejemplo de código JavaScript en el propio documento</title>

</head>

<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");

alert(enlace.href); // muestra http://www...com

//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

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

· 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

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.

Desarrollo de Paginas Web

miércoles, 7 de marzo de 2012

No hay comentarios:

Publicar un comentario

Datos personales