Código HTML y código JavaScript.
El JavaScript fue creado por Netscape en 1995. Se trata de un lenguaje interpretado, que soporta algunas características de la programación orientada a objetos, cuyo código se incluye directamente en el documento HTML.
La guerra entre navegadores que hubo entre el Netscape Navigator y el Internet Explorer de Microsoft creó graves problemas para los programadores de páginas web, ya que, aunque ambos navegadores utilizaban Javascript como lenguaje de programación, los objetos no se comportaban de la misma forma, lo que obligaba con frecuencia a programar dos veces las páginas, una para el Navigator y otra para el Explorer; aún así, seguían teniendo problemas, ya que no todas las versiones de un mismo navegador se comportaban igual.
ECMAScript es una especificación de lenguaje de programación empezada a desarrollar en 1996, basada en JavaScript. Actualmente está aceptada como el estándar ISO 16262.
Jscript es la implementación de ECMAScript de Microsoft, muy similar al JavaScrip de Netscape, pero con ciertas diferencias en el modelo de objetos del navegador que hacen a ambas versiones con frecuencia incompatibles.
Para evitar estas incompatibilidades, el World Wide Web Consortium diseñó el estándar Document Object Model (DOM, ó Modelo de Objetos del Documento en castellano), que incorporan las versiones 6 de Internet Explorer y Netscape Navigator, Opera versión 7, y Mozilla desde su primera versión.
El DOM es una forma de representar documentos estructurados (tales como una página web HTML o un documento XML) que es independiente de cualquier lenguaje orientado a objetos.
La mayoría de navegadores de Internet incluyen una implementación del estándar ECMAScript, al igual que un acceso al DOM para manipular páginas web. JavaScript está implementado en la mayoría de navegadores, y el Internet Explorer de Microsoft usa JScript. El navegador Opera tiene su propio intérprete de ECMAScript con extensiones para soportar algunas características de JavaScript y JScript.
Ecma-262: www.ecma-international.org
Javascript netscape: Universidad de Valencia
Jscript microsoft: Biblioteca Microsof
JavaSript puede cambiar:
El navegador con soporte JavaScript posibilita que el usuario no se limite exclusivamente a la activación de vínculos de hipertexto para llegar a otras páginas. Permite detectar eventos y ofrecer diferentes cursos de actuación. Al uso de JavaScript y HTML en un mismo documento se le conoce como DHTML, o HTML Dinámico.
Existen varias maneras de incluir código javascript dentro del HTML:
<SCRIPT>
instrucciones javascript
</SCRIPT>
<SCRIPT SRC="funciones.js">
...
</SCRIPT>
<HR WIDTH="&{anchoBarra};%" ALIGN="LEFT">
Esta forma de incluir código no la reconoce Internet Explorer.
<NOSCRIPT>
Este navegador no comprende los scripts que se están ejecutando, debes actualizar tu versión de navegador a una más reciente.
<br><br>
<a href=http://netscape.com>Netscape</a>.<br>
<a href=http://microsoft.com>Microsoft</a>.
</NOSCRIPT>
<SCRIPT>
instrucciones javascript
</SCRIPT>
<A HREF="javascript:history.go(0)">Actualizar página</A>
<BODY onLoad="ventanaSecundaria('url');>
Para evitar que el texto de los scripts se escriba en la página cuando los navegadores no los entienden se tienen que ocultar como comentarios HTML (<!-- comentario HTML --> ):
<SCRIPT>
<!--
Código JavaScript
//-->
</SCRIPT>
Vemos que el inicio del comentario es idéntico al que ya conocemos del HTML, pero el cierre del comentario presenta una particularidad, que empieza por doble barra inclinada. Esto es debido a que el final de comentario HTML contiene varios caracteres que JavaScript reconoce como operadores y al tratar de analizarlos lanza un mensaje de error de sintaxis. Para que JavaScript no lance un mensaje de error se coloca antes del final de comentario HTML esa doble barra, que es el indicador de comentario de JavaScript de una sola línea.
Para comentarios de varias líneas se usa la notación /* y */.
// Esto es un comentario javascript de una línea
/* Esto es un comentario javascript
Los nombres han de empezar con un carácter alfabético o por _ (guión bajo), y solo pueden contener caracteres alfanuméricos y el _ (guión bajo).
JavaScript distingue entre mayúsculas y minúsculas.
El punto y coma (; ) es opcional emplearlo como separador de sentencias. Solamente es obligatorio hacerlo cuando hay varias sentencias en una misma línea.
Se utiliza la comilla simple (' ) para delimitar literales de tal forma que se puedan distinguir de los valores de los atributos encerrados entre comillas dobles (" ).
Para hacer referencia a una propiedad se utiliza la sintaxis:
nombredeobjeto.propiedad
y para hacer referencia a un método se utiliza la misma sintaxis, acabando con una apertura y cierre de paréntesis:
Los tipos de datos pueden ser: number, string y boolean.
Numéricos, que pueden ser enteros o reales. p.e.: 2 ó 23.6, admitiendo números octales (034 ) y hexadecimales (0x3FA )
Cadenas, escritas entre comillas dobles o simples, "cadena " u 'otra cadena'.
Los caracteres de escape se escriben precedidos de \ (barra atrás)
Salto de línea: \n
Comilla simple: \'
Comilla doble: \"
Tabulador: \t
Retorno de carro: \r
Avance de página: \f
Retroceder espacio: \b
Contrabarra: \\
Boleanos que son true y false.
Null, es una palabra clave especial que denota un valor nulo. Null es lo mismo que null, NULL, o cualquier otra variante.
Al declarar los datos, no se especifica su tipo
var nombre_de_variable[, nombre2, ...];
La coma se utiliza como separador de variables en una misma línea.
El alcance de las variables puede ser:
Podemos utilizar el valor undefined para evaluar una expresión.
Cuando se declara una variable se le puede asignar un valor.
var nombre_variable = "valor de la variable";
Función constructora
function casa(localidad,superficie,precio){
this.localidad=localidad
this.superficie=superficie
this.precio=precio
}
Instanciar objetos con "new"
casa1=new casa("Pamplona",90,15000000)
casa2=new casa("Bilbao",110,23000000)
this, hace referencia al propio objeto.
new, crea nuevos objetos con las propiedades de los ya creados.
delete, borra un objeto
A un objeto se le pueden seguir añadiendo propiedades tras ser definido, aunque es una práctica que no se aconseja, pues todos los objetos ya creados hasta entonces añaden también esa propiedad con valor nulo. Para ello se utiliza la palabra protopype:
casa.prototype.año=null
casa.año="1980"
La propiedad prototype es muy importante desde el punto de vista del programador web, ya que permite añadir propiedades y métodos adicionales a los objetos (por ejemplo a un objeto Image), es decir, permite ampliar lo que es el objeto en sí, aumentando sus propiedades por defecto.
Otra forma de crear objetos es de forma literal:
nombreobjeto={propi1:valor;propi2:valor;.....propiN:valor}
Una propiedad puede estar formada por varias subpropiedades:
nombreobjeto.nombrepropiedad.nombreSubpropiedad
nombreobjeto={propi1:valor;propi2:{sub1:valsub,sub2:valsub, ...,subN:valsub};.....propiN:valor}
Operadores aritméticos:
+Suma de dos valores-Resta de dos valores-Cambiar el signo de un solo operando*Multiplicación de dos valores/División de dos valores%El resto de la división de dos números++Incremento en una unidad, se utiliza con un solo operando--Decremento en una unidad, utilizado con un solo operandoOperadores de asignación:
=Asignación. Asigna a la parte de la izquierda del igual la parte de la derecha.+=Asignación con suma.-=Asignación con resta*=Asignación de la multiplicación/=Asignación de la división%=Se obtiene el resto y se asignaOperadores de cadenas:
+Concatena dos cadenas, pega la segunda cadena a continuación de la primera.Operadores lógicos:
!Operador NO o negación. Si era true pasa a false y viceversa.&&Operador Y, si son los dos verdaderos vale verdadero.||Operador O, vale verdadero si por lo menos uno de ellos es verdadero.Operadores relacionales:
==Comprueba si dos números son iguales===Comprueba si dos números son iguales y del mismo tipo!=Comprueba si dos números son distintos>Mayor que, devuelve true si el primer operador es mayor que el segundo<Menor que, es true cuando el elemento de la izquierda es menor que el de la derecha>=Mayor igual.<=Menor igualOperador condicional
?Simula la estructura de control if .. else. (condición) ? valor1 : valor 2Operador de tipo
typeoftipo=typeof(variable o expresión). Los tipos devueltos son number, string, boolean, object, function y undefined.
JavaScript también posee operadores a nivel de bit, y la precedencia de las operaciones son las comunes en operaciones aritméticas y otros lenguajes, permitiendo paréntesis ( ) y corchetes [ ].
Las expresiones regulares constituyen un mecanismo bastante potente para realizar manipulaciones de cadenas de texto.
La subcadena que buscamos en el texto es lo que se llama un patrón y se construye encerrando entre dos barras inclinadas ( / ) una serie de caracteres normales y símbolos especiales llamados comodines o metacaracteres.
Las expresiones regulares se usan con el objeto Regular Expresion y también dentro de los métodos String.match, String.replace, String.search y String.split.
if permite bifurcaciones condicionales y switch elecciones múltiples.
La sentencia while crea un bucle que se repite hasta que la expresión del test se vuelve falsa, o cero (0). La sentencia while es un bucle con condición de entrada; la decisión de realizar una pasada más del bucle se realiza antes de que éste comience. Por tanto, es posible que el bucle se efectúe cero veces.
La sentencia do while crea un bucle que se repite hasta que la expresión de test se vuelve falsa o 0. La sentencia do while es un bucle con condición de salida; la decisión de pasar una vez más por el bucle se realiza después de haberlo atravesado; por tanto, este bucle se ejecuta una vez como mínimo. la parte de la sentencia del bucle puede ser simple o compuesta.
La sentencia for emplea tres expresiones de control, separadas por puntos y coma, para controlar el proceso del bucle. La primera expresión de inicialización se ejecuta una sola vez antes de entrar al bucle. Si la expresión de test es cierta (distinta de 0), se ejecuta el bucle completo. A continuación se evalúa la tercera expresión (actualización) y se comprueba de nuevo el test. La sentencia for es un bucle con condición de entrada; la decisión de realizar una nueva pasada del bucle se toma antes de atravesarlo. Es, por tanto, posible que el bucle no se ejecute ni una sola vez.
document.write("<h1>Numeración con ceros no significativos</h1>");
for(i=1;i<1002;i++){
numeroOrden="000"+i;
while(numeroOrden.length>4) {
numeroOrden=numeroOrden.substring(1)
}
document.write("Nº " +numeroOrden);
if (i!=1001) {document.write(", ")}
else {document.write(".")};
}
El comando break se puede utilizar con cualquiera de las tres formás de bucle y con la sentencia switch, produce un salto en el control del programa, de manera que evita el resto del bucle o switch que lo contiene, y se reanuda la ejecución con la siguiente sentencia a continuación de dicho bucle o switch.
El comando continue puede utilizarse con cualquiera de las tres formás de bucle, pero no con switch. Al igual que break, hace que el control del programa evite el resto de sentencias del bucle; sin embargo a diferencia de él, este comando inicia una nueva iteración. En los casos de bucles for o while se comprueba la condición, y si procede, se empieza un nuevo ciclo.
Para definir una función se emplea la palabra clave function seguida del nombre de la función.
La llamada a una función se hace por medio de su nombre.
La función se debe definir en el bloque <SCRIPT> donde esté la llamada a la función, aunque es indiferente si la llamada se encuentra antes o después la función, dentro del mismo bloque <SCRIPT>.
<SCRIPT>
//definición de la función
function miFuncion(){
//hago algo...
document.write("Esto va bien") ;
}
//llamada a la función
miFuncion();
</SCRIPT>
También es válido que la función se encuentre en un bloque <SCRIPT> anterior al bloque donde está la llamada.
Un lugar muy bueno donde colocarlas es en la cabecera puesto que se supone no se van a utilizar todavía y siempre podremos disfrutar de ellas en el cuerpo porque ya han sido declaradas seguro.
Los parámetros o argumentos se usan para mandar valores a la función y se escriben entre los paréntesis separados por comas. Solo se pueden pasar las variables por valor.
Los argumentos de las funciones se gestionan con un array propio de cada una de ellas. El array se accede con "nombreFunción.arguments[i] ", donde "i" es un índice que comienza por 0.
Para conocer el número de parámetros, podemos utilizar: "arguments.length ".
La palabra clave return devuelve un valor desde la función al programa de llamada.
Cuando asignamos una cadena a una variable, estamos creando un objeto de tipo String.
objetoString="Esta cadena es un objeto string "
document.write(objetoString);
document.write("y esta también.");
Propiedades
Métodos
document.write(objetoString.bold());
nombreArchivo=nombreArchivo.fontcolor("olive");
nombreArchivo=nombreArchivo.small();
document.write(nombreArchivo);
document.write("Esto también es un objeto string.".italics());
nombreArchivo=location.href;
document.write("<p>URL completa (href): " +nombreArchivo.bold());
i=nombreArchivo.lastIndexOf("/");
nombreArchivo=nombreArchivo.substring(i+1);
document.write("<br>Nombre archivo: <b>" +nombreArchivo+ "</b>");
Constructor
Para poder tener un objeto array, tendremos que crearlo con su constructor:
a=new Array(15);
Para acceder a cada elemento individual usaremos la notación a[i], donde i variará entre 0 y N-1, siendo N el número de elementos que le pasamos al constructor.
También podemos inicializar el array a la vez que lo declaramos, pasando los valores directamente:
a=new Array(21,"cadena",true);
que nos muestra, además, que los elementos del array no tienen por qué ser del mismo tipo.
Un array bidimensional se crea con un array con las filas deseadas y, después, cada elemento del array se inicializará con un array con las columnas deseadas.
a=new Array(4);
for(i=0;i<4;i++) a[i]=new Array(7);
y para referenciar al elemento que ocupa la posición (i,j), escribiremos a[i][j].
Propiedades
Métodos
Este objeto se utiliza para poder realizar cálculos en nuestros scripts. Tiene la peculiaridad de que sus propiedades no pueden modificarse, sólo consultarse. Estas propiedades son constantes matemáticas de uso frecuente en algunas tareas, por ello es lógico que sólo pueda consultarse su valor pero no modificarlo.
Propiedades
Métodos
Este objeto nos permite trabajar con fechas y horas.
Constructor
Para crear un objeto con el día y hora actuales llamamos al constructor sin datos.
fechaActual = new Date();
Para crear un objeto fecha con un día y hora distintos de los actuales tenemos que indicar entre paréntesis el momento con que inicializar el objeto.
otraFecha = new Date(año,mes,dia,hora,minutos,segundos);
otraFecha = new Date(año,mes,dia);
otraFecha = new Date(document.lastModified);
Los valores que debe recibir el constructor son siempre numéricos.
El mes comienza por 0, es decir, enero es el mes 0.
Si no indicamos la hora, el objeto fecha se crea con hora 00:00:00.
Métodos
Existen los mismos métodos pero con "set " en lugar de "get" que nos permiten cambiar el valor de las variables.
Este objeto nos permite crear booleanos, esto es, un tipo de dato que es cierto o falso, tomando los valores true o false. Podemos crear objetos de este tipo mediante su constructor. Veamos varios ejemplos:
a = new Boolean(); asigna a 'a' el valor 'false'
a = new Boolean(0); asigna a 'a' el valor 'false'
a = new Boolean(""); asigna a 'a' el valor 'false'
a = new Boolean(false); asigna a 'a' el valor 'false'
a = new Boolean(numero_distinto_de_0); asigna a 'a' el valor 'true'
a = new Boolean(true); asigna a 'a' el valor 'true'
Este objeto representa el tipo de dato número con el que JS trabaja. Podemos asignar a una variable un número, o podemos darle valor, mediante el constructor Number, de esta forma:
a = new Number(valor);
a = new Number(3.2); da a el valor 3.2. Si no pasamos algún valor al constructor, la variable se inicializará con el valor 0.
Propiedades
En este capítulo vamos a estudiar la jerarquía que presentan los objetos del navegador, atendiendo a una relación "contenedor - contenido" que se da entre estos objetos. De forma esquemática, esta jerarquía podemos representarla de esta manera (al lado está la directiva HTML con que se incluyen en el documento objetos de este tipo, cuando exista esta directiva):
* window+ history+ location+ document<BODY> ... </BODY>- anchor<A NAME="..."> ... </A>- applet<APPLET> ... </APPLET>- area<MAP> ... </MAP>- form<FORM> ... </FORM>+ button<INPUT TYPE="button">+ checkbox<INPUT TYPE="checkbox">+ fileUpload<INPUT TYPE="file">+ hidden<INPUT TYPE="hidden">+ password<INPUT TYPE="password">+ radio<INPUT TYPE="radio">+ reset<INPUT TYPE="reset">+ select<SELECT> ... </SELECT>- options<INPUT TYPE="option">+ submit<INPUT TYPE="submit">+ text<INPUT TYPE="text">+ textarea<TEXTAREA> ... </TEXTAREA>- image<IMG SRC="...">- link<A HREF="..."> ... </A>- plugin<EMBED SRC="...">+ frame<FRAME>* navigator
Según esta jerarquía, podemos entender el objeto area (por poner un ejemplo) como un objeto dentro del objeto document que a su vez está dentro del objeto window. Hay que decir que la notación '.' también se usa para indicar un objeto que está dentro de otro objeto.
En la mayoría de los casos podemos ignorar la referencia a la ventana actual (window), pero será necesaria esta referencia cuando estemos utilizando múltiples ventanas, o cuando usemos frames. Cuando estemos usando un único frame, podemos pues ignorar explícitamente la referencia al objeto window, ya que JS asumirá que la referencia es de la ventana actual.
También podemos utilizar la notación de array para referirnos a algún objeto, por ejemplo, cuando los objetos a usar no tienen nombre, como en este caso:
document.forms[0].elements[1];
hace referencia al segundo elemento del primer formulario del documento; este elemento será el segundo que se haya creado en la página HTML.
Se trata del objeto más alto en la jerarquía del navegador (navigator es un objeto independiente de todos en la jerarquía), pues todos los componentes de una página web están situados dentro de una ventana. El objeto window hace referencia a la ventana actual. Veamos a continuación sus propiedades y sus métodos.
Propiedades
Métodos
Todos sabemos que la ventana del navegador puede ser dividida en varios frames que contengan cada uno de ellos un documento en el que mostrar contenidos diferentes. Al igual que con las ventanas, cada uno de estos frames puede ser nombrado y referenciado, lo que nos permite cargar documentos en un marco sin que esto afecte al resto.
Realmente cada frame se representa con un objeto window, esto quiere decir que el objeto frame tiene todas las propiedades y métodos del objeto window.
Propiedades
Métodos
Este objeto contiene la URL actual así como algunos datos de interés respecto a esta URL. Su finalidad principal es, por una parte, modificar el objeto location para cambiar a una nueva URL, y extraer los componentes de dicha URL de forma separada para poder trabajar con ellos de forma individual si es el caso. Recordemos que la sintaxis de una URL era:
protocolo://maquina_host[:puerto]/camino_al_recurso
Propiedades
Métodos
Este objeto se encarga de almacenar una lista con los sitios por los que se ha estado navegando, es decir, guarda las referencias de los lugares visitados. Se utiliza, sobre todo, para movernos hacia delante o hacia atrás en dicha lista.
Propiedades
Métodos
Estos métodos devuelven la URL, o undefined caso de que el número de historial no exista.
Este objeto simplemente nos da información relativa al navegador que esté utilizando el usuario.
Propiedades
Métodos
El objeto de nivel superior screen almacena información acerca de la configuración de pantalla del usuario.
Propiedades
Todas las propiedades son de modo lectura.
El objeto document es el que tiene el contenido de toda la página que se está visualizando. Esto incluye el texto, imágenes, enlaces, formularios, ... Gracias a este objeto vamos a poder añadir dinámicamente contenido a la página, o hacer cambios, según nos convenga.
Propiedades
Métodos
Este objeto engloba todas las propiedades que tienen los enlaces externos del documento actual.
Propiedades
Este objeto engloba todas las propiedades que tienen los enlaces internos del documento actual.
Propiedades
Gracias a este objeto (disponible a partir de la versión 3 de Netscape, aunque Microsoft lo adoptó en la versión 4 de su navegador) vamos a poder manipular las imágenes del documento, pudiendo conseguir efectos como el conocido rollover (cambio de imágenes al pasar el ratón sobre la imagen).
Además del objeto propio asociado a cada una de las imágenes del documento HTML, se dispone de la matriz images que posee la propiedad length, que almacena el número de imágenes presentes en el documento.
Constructor
nombre_imagen = new Image(width,height);
nombre_imagen.src = "ruta_imagen";
Declaración completa de un objeto imagen. El navegador no solamente sabe de su existencia, también sabe qué imagen en concreto es la asociada al objeto, por lo que conoce su peso en Ks, pudiendo cargarla en memoria y tenerla así disponible para poder usarla cuando queramos. Si además hemos declarado su tamaño mediante los parámetros width y height, ya tiene todos los datos que definen al nuevo objeto
Propiedades
Este objeto es el contenedor de todos los elementos del formulario. Como ya vimos al tratar el objeto document, los formularios se agrupan en un array dentro de document. Cada elemento de este array es un objeto de tipo form.
Propiedades
Métodos
Este objeto es el contenedor de todos los elementos del formulario. Como ya vimos al tratar el objeto document, los formularios se agrupan en un array dentro de document. Cada elemento de este array es un objeto de tipo form.
Propiedades
Métodos
Tenemos tres tipos de botones: un botón genérico, 'button', que no tiene acción asignada, y dos botones específicos, 'submit' y 'reset'. Estos dos últimos sí que tienen una acción asignada al ser pulsados: el primero envía el formulario y el segundo limpia los valores del formulario.
Propiedades
Métodos
Las "checkboxes" nos permiten seleccionar varias opciones marcando el cuadrito que aparece a su izquierda. El cuadrito pulsado equivale a un "sí" y sin pulsar a un "no" o, lo que es lo mismo, a "true" o "false".
Propiedades
Métodos
Al contrario que con los checkbox, que nos permiten elegir varias posibilidades entre las dadas, los objetos radio sólo nos permiten elegir una de entre todas las que hay. Están pensados para posibilidades mútuamente excluyentes (no se puede ser a la vez mayor de 18 años y menor de 18 años, no se puede estar a la vez soltero y casado, etc.).
Propiedades
Hay que recordar que para agrupar elementos de tipo radio, todos ellos deben tener el mismo valor en NAME.
Métodos
Este objeto representa una lista de opciones dentro de un formulario. Puede tratarse de una lista desplegable de la que podremos escoger alguna (o algunas) de sus opciones.
Propiedades
Gracias a este objeto podemos almacenar información extra en el formulario de forma completamente transparente para el usuario, pues no se verá en ningún momento que tenemos estos campos en el documento. Es parecido a un campo de texto (objeto text) salvo que no tiene valor por defecto (no tiene sentido pues el usuario no va a modificarlo) y que no se puede editar.
Propiedades
Evento se considera a cualquier acción que el usuario realiza con el sistema.
Para referirnos a un evento en HTML, el nombre del evento irá precedido por "on ".
Eventos que conoce JavaScript:
EVENTODESCRIPCIÓNAbortAbortar la carga de una imagen.BlurQuitar el foco de entrada en una ventana, marco, o elemento de formulario.ChangeCambiar el valor en un formulario de un campo de texto, área de texto, o lista de selección.ClickClick sobre un elemento de un formulario o enlace.DragDropArrastrar un objeto a la ventana del navegadorErrorSe produce un error en la carga de un documento, imagen.FocusEl usuario se posiciona en una ventana, marco, o elemento de un formulario.KeyDownSe pulsa una teclaKeyPressSe pulsa o libera una teclaKeyUpSe libera una teclaLoadEl navegador finaliza la carga de un documento, imagen,MouseDownSe pulsa un botón del ratónMouseMoveSe mueve el cursorMouseOutEl puntero del ratón sale de un enlace, imagenMouseOverEl puntero del ratón se posiciona sobre un enlace, imagenMouseUpSe libera un botón del ratónMoveSe mueve la ventana. Esta acción también la puede realizar el scriptResetSe pulsa sobre el botón reset del formularioResizeLas dimensiones de la ventana cambianSelectSe selecciona una de las opciones de un cuadro de entrada de un formulario.SubmitSe pulsa el botón submit del formulario.UnLoadEl usuario sale de la página
JavaScript permite definir eventos y asignarlos a objetos por encima de los elementos donde nacen dichos eventos.
Para definir estos eventos, los objetos window, document y layer utilizan los siguientes métodos:
Una COOKIE es un pequeño elemento de información que se almacena en el cliente como parte del archivo cookies.txt.
Una cookie puede estar gestionada de 3 formas:
La forma de acceder a una cookie es con la propiedad cookie de document, de modo que devuelve una cadena que contiene todas las cookies existentes en nuestro sistema.
La forma más sencilla de enviar una cookie con JavaScript es usando la instrucción:
document.cookie='cookie'
Para acceder a una cookie, esta función devuelve una cadena con el valor de la cookie o null si no la encuentra:
function getCookie(name){
var cname=name + "=";
var dc=document.cookie;
if(dc.length>0{
begin=dc.indexOf(cname);
if(begin!=-1){
begin+=cname.length;
end=dc.indexOf(";",begin);
if(end==-1)
end=dc.length;
return(dc.substring(bgin,end));
}
}
}
Para configurar una cookie podemos utilizar la siguiente función:
function setCookie(name,values,expires,path,domain,secure){
document.cookie=name+ "=" +escape(value) +
((expires==null)?"":";expires="+expires.toGMTString())
+((path==null)?"":";path=" + path)
+((domain==null)?"":";domain="+domain)
+((secure==null)?"":";secure");
}
Para borrar una cookie usaremos una función como la siguiente:
function delCookie(name,path,domain){
if(getCookie(name)){
document.cookie=name+"="
+((path==null)?"":";path="+path)
+((domain==null)?"":";domain="+domain)+";
expires=Thu,01-Jan-70 00:00:01 GMT";
}
}
Las cookies pueden tener un máximo de 4 Kb, no pueden exceder de 300 en el archivo cookies.txt y de 20 por servidor o dominio. Si exceden estos límites se trunca el nombre o se eliminan las menos recientes.
//, comentario de una línea.
/*, inicio comentario de varias líneas
*/, cierre comentario de varias líneas
;, (punto y coma) separador de instrucciones en la misma línea.
,, (coma) separador de variables
break
continue
do { acciones
}while (condición)
for (inicialización;condición;actualización) {
acciones
}
for ( variable in objeto){
acciones
}
function nombrefuncion (){
instrucciones de la función
...
[return [ valor];]
}
if ( expresión){ acciones}
[else { acciones}]
if ( expresión){ acciones
[else { if ( expresión){ acciones
[else { if ( expresión){ acciones} [else { acciones} } ]
} ]
}
switch ( expresión) {
case valor1: acciones1
[ break ]
case valor2: acciones2
[ break ]
...
case valorN: accionesN
[ break ]
[default : acciones ]
}
while ( condición){
acciones
}
with ( objeto){
acciones
}
Es fácil que nuestro primer contacto con el HTML Dinámico sea por emplear algún script para dar atractivos efectos a nuestras páginas web, sin tener conocimientos para comprender el mecanismo del mismo. Simplemente funciona y con eso nos basta. Cualquier buscador responde con miles de páginas a la consulta de scripts javascript.
La lectura del manual JavaScript, sin conocimientos previos de programación, no nos aclara el asunto, muy al contrario, seguramente, terminamos más confusos y desanimados para proseguir en el aprendizaje.
Puesto que a programar se aprende programando, y desde un comienzo defendemos practicar ejecutando casos reales, procederemos a desarrollar varias aplicaciones de forma tal que consigamos su comprensión y las podamos usar de forma inmediata.
Recordar el parámetro ID en una etiqueta HTML la identifica como Objeto, por tanto una etiqueta tal como <img Src="…" ID="idObjeto"> nos dice que estamos ante un objeto image con sus propiedades y eventos asociados, entre ellos MouseOver y MouseOut.
Podemos asignar a la propiedad src, indicativa de la imagen, un nuevo valor al poner sobre ella el puntero del ratón y dejarla con su valor original al quitarlo:
<img src=dibujo1.gif widht=30 ID="Dieu"
onMouseOver="Dieu.src='dibujo2';"
onMouseOut="Dieu.src='dibujo1';">
o agrandar su tamaño al asignar un valor superior en la propiedad width,
<img src=dibujo1.gif widht=30 ID="Dieu"
onMouseOver="Dieu.width='60';"
onMouseOut="Dieu.width='30';">
o ambas,
<img src=dibujo1.gif widht=30 ID="Dieu"
onMouseOver="Dieu.src='dibujo2.gif';Dieu.width='60';"
onMouseOut="Dieu.src='dibujo1.gif';Dieu.width='30';">
etc.
Recordar que el valor del parámetro ID ha de ser único en el documento, por tanto si queremos hacer varios efectos en una misma pagina al primero lo podríamos identificar como Dieu1, al segundo Dieu2, etc.
He agrandado la imagen intencionadamente, pero también la podemos empequeñecer
<img src=dibujo1.gif widht=60 ID="Dieu"
onMouseOver="Dieu.width='30';"
onMouseOut="Dieu.width='60';">
produciendo un efecto con el que a primera vista seguramente no contábamos y que nos puede ayudar a comprender cuando se producen los eventos.
Hay un espacio en la pantalla que la ocupa la imagen grande pero no la pequeña. Si pasamos el puntero del ratón por esta zona con movimientos cortos del ratón, es decir, sin salirnos de esta zona, el movimiento se acelera. La explicación es que al pasar por la imagen grande esta se empequeñece, lo que ocasiona que el puntero quede fuera de la misma.
Si no movemos el puntero, no pasa nada, no producimos evento alguno. Los eventos suponen una acción.
De la misma forma que hacemos con una imagen, podemos hacerlo con una porción de texto por medio de las propiedades de la etiqueta font.
<p><font size="-2" ID="Fll1"
onMouseOver="Fll1.size='+1';"
onMouseOut="Fll1.size='-2';">
Se puede llegar a Astorga … </font></p>
<p><font size="-2" ID="Fll2"
onMouseOver="Fll2.size='+1';"
onMouseOut="Fll2.size='-2';">
Por cualquiera de sus cuatro puntos cardinales … </font></p>
<p><font size="-2" ID="Fll3"
onMouseOver="Fll3.size='+1';"
onMouseOut="Fll3.size='-2';">
En agosto, hace diez años, aquí … </font></p>
En este ejemplo concreto trabajamos sobre el tamaño, pero podemos probar con cualquier atributo de las fuentes.
El efecto de resaltar un enlace, sobre todo cuando están dispuestos en menús, es uno de los efectos más empleados y agradecidos.
Empecemos con un solitario enlace que lo hacemos nulo, puesto que solo nos interesa el efecto de pasar el ratón, y un texto al que cambiamos de letra por medio de la propiedad face.
<p>El texto del enlace cambia de
<a href="#"><font face="verdana" ID="Reaper"
onMouseOver="Reaper.face='courier';"
onMouseOut="Reaper.face='verdana';">
Verdana a courier</font></a>
al pasar el ratón.</p>
Podemos combinar imágenes de múltiples formas, una de las más comunes es encender y apagar un botón:
<a href="#"><img src=boton_apagado.gif ID="Reaper"
onMouseOver="Reaper.src='boton_iluminado.gif';"
onMouseOut="Reaper.src='boton_apagado.gif';"></a>
Aprovechando las facilidades que nos proporcionan las hojas de estilo CSS podemos definir estilos por nombre ,
#menuout { color:red; font-family:verdana; font-weight:normal; font-size:xx-small; background-color:aqua }
#menuin { color:blue; font-family:arial; font-weight:bold; font-size:large; background-color:yellow }
y aplicarlos como si de una sola propiedad se tratara. Muy cómodo para la confección de menús de opciones.
<br><a href="#" id="menuout"
onMouseOver="id='menuin';"
onMouseOut="id='menuout';">
Elemento de menú 1</a>
<br><a href="#" id="menuout"
onMouseOver="id='menuin';"
onMouseOut="id='menuout';">
Elemento de menú 2</a>
<br><a href="#" id="menuout"
onMouseOver="id='menuin';"
onMouseOut="id='menuout';">
Elemento de menú 3</a>
Con imágenes podemos también crear barras de navegación dinámicas, pero conviene cargar previamente las imágenes en memoria para conseguir que cambien velozmente cuando se pase el ratón por ellas. Por medio del constructor declaramos un objeto Image y le asignamos la ruta de la imagen asociada.
casa_off =new Image(17,17);
this.src="../images/Casa.gif";
casa_on =new Image(17,17);
this.src="../images/Casa_p.gif";
in_off =new Image(17,17);
this.src="../images/In.gif";
in_on =new Image(17,17);
this.src="../images/In_p.gif";
etc.
Creando la barra de navegación en una tabla tal como sigue:
<table cellspacing="0" cellpadding="0" border="0">
<tr>
<td><a href="#"
onMouseover="window.document['boton_casa'].src=casa_on.src"
onMouseout="window.document['boton_casa'].src=casa_off.src">
<img src="../images/irCasa.gif" name="boton_casa"
alt="Inicio web" border="0"></a></td>
<td><a href="#"
onMouseover="window.document['boton_in'].src=in_on.src"
onMouseout="window.document['boton_in'].src=in_off.src">
<img src="../images/irIn.gif" name="boton_in"
alt="Inicio documento" border="0"></a></td>
etc.
HTML nos permite visualizar la página de un enlace en una nueva ventana por medio del atributo TARGET haciendolo igual a "_blank" en una etiqueta <a>.
Javascript nos proporciona además la posibilidad de manejar sus propiedades, de tal forma que nos da un control total de la misma, como su tamaño, ubicación, etc.
Construimos una función que ejecute el método open para la ventana con las características deseadas:
function ventanaSecundaria(URL){
window.open(URL, "NV", "width=350,height=500,top=50, left=50,directories=NO,location=NO, menubar=yes,status=no,toolbar=yes ");
}
En el enlace dirigimos su ejecución a la sentencia de JavaScript, y como parámetro la ruta de la página que deseemos abrir:
<a href="JavaScript:ventanaSecundaria('url')">abrir ventana secundaria</a>
Aprovechando el evento load podemos hacer que la ventana secundaria se abra automáticamente al cargarse la página,
<BODY onLoad="ventanaSecundaria('url');>
o con otro evento, al pasar el ratón por una imagen:
<img src="../images/dibujo1.gif"
onMouseOver="JavaScript:ventanaSecundaria('url')">
etc.
Recordar que si en una misma hoja deseamos abrir ventanas con características diferentes han de llevar nombres distintos, pues los nombres han de ser únicos dentro de un mismo documento.
Con los enlaces hay que tener especial cuidado, pues no todos los navegadores o sus versiones soportan javascript, o el usuario lo puede tener deshabilitado. El ejemplo que hemos puesto de enlace sería más correcto de la siguiente forma:
<a href="url" onClick="ventanaSecundaria('url');return false">Abrir ventana secundaria de forma correcta</a>
de esta forma el navegador que no entendiera javascript no respondería al evento con la función, pero si a href="url"; y para no tener que repetir dos veces la url, que en algunos casos puede ser engorroso, podríamos simplificarla de esta forma:
<a href="url" onClick="ventanaSecundaria(this.href);return false">Nueva ventana forma correcta simplificada</a>
Recordar que this hace referencia al propio objeto, en este caso a la propiedad href de este objeto link.
La característica de la ventana fullscreen nos permite crear una función que utilice el método open para abrir una ventana secundaria a pantalla completa:
function pantallaCompleta(URL){
window.open(URL,"NV","fullscreen=yes, scrollbars=auto")
}
La pantalla completa está en desuso, puesto que el internauta, acostumbrado a manejar el ratón, busca desesperadamente el botón de cerrar la ventana sin éxito, y puesto que no siempre recuerda la forma de cerrar una ventana desde el teclado, se ve en la necesidad de finalizar la tarea con <Ctrl+Alt+Sup>, cerrando el navegador, lo cual le hace evitar los sitios que abusan de las ventanas a pantalla completa.
Podemos colocar un botón que cierre la ventana con lo que conseguimos que algunos inconvenientes queden resueltos.
<form>
<input type="button" value="Cerrar esta ventana"
onclick="window.close();">
</form>
Una solución para muchas situaciones, es abrir una ventana secundaria pero que ocupe el total del área de visualización, para lo que recurrimos a las propiedades availHeight y availWidth del objeto screen y asignamos la forma de la ventana al método open por medio de una variable.
function ventanaTotal (URL){
var anchoDisponible=screen.availWidth;
var altoDisponible=screen.availHeight;
var formaVentana="top=0, left=0,
width=" + anchoDisponible + ",
height=" + altoDisponible + ",
scrollbars=auto, directories=no, location=no, menubar=no, status=no, toolbar=no";
window.open(URL,"NV4",formaVentana);
}
Durante la resolución de este último ejemplo se utilizó el método alert del objeto window para mostrar el contenido de la variable con los parámetros de la especificación de la forma de la ventana, dado que no se tenía muy claro cómo expresar dicha variable correctamente dentro de la función:
window.alert(formaVentana);
También podemos utilizar este método para seguir los pasos en la construcción de la página.
Tenemos dos métodos en javascript para escribir en un documento, write y writeln pero hay que tener en cuenta que para escribir en un documento, éste debe estar abierto y, al abrirlo, se destruye todo el código que haya en él.
Un documento se abre automáticamente cuando empieza a cargarse y se cierra cuando termina de hacerlo. Así pues, si deseamos escribir en un documento respetando su contenido, deberemos hacerlo antes de que éste se termine de cargar. Si lo hacemos después, borraremos el contenido anterior.
Aprovecharemos el ejemplo, para de paso trabajar con variables y objetos date:
<HTML><HEAD><TITLE>Escribir documento</TITLE>
</HEAD>
<BODY> // se abre el documento
<p>Este documento fue modificado por última vez el día
<SCRIPT>
document.write(document.lastModified + ".");
document.write("<p>No es la forma más correcta de poner la fecha en nuestro entorno, así que ya puestos: hagámoslo bien.");
document.write("<p>Este documento fue modificado por última vez el día ");
fechaUM = new Date(document.lastModified); // en los manuales
// pone que es una cadena, pero se hace date, y funciona.
var tmeses=new Array("Enero","Febrero","Marzo","Abril","Mayo", "Junio","Julio","Agosto","Septiembre","Octubre","Noviembre", "Diciembre");
var iMesUM=fechaUM.getMonth();
document.write("<strong>");
document.write(fechaUM.getDate() + " de " + tmeses[iMesUM] + " de " + fechaUM.getFullYear() + ".");
document.write("</strong>");
document.write("<p>Hoy es ");
fechaHoy = new Date();
var iDiaS=fechaHoy.getDay();
var iMes=fechaHoy.getMonth();
var tdiasemana=new Array("domingo","lunes","martes", "miércoles","jueves", "viernes","sábado")
document.write("<strong>" + tdiasemana[iDiaS] + ", " + fechaHoy.getDate() + " de " + tmeses[iMes] + " de " + fechaHoy.getFullYear() + ".</strong>");
document.write("<p>Convenciones de Internet con la zona horaria GMT: " + fechaHoy.toGMTString());
document.write("<p>Año método Year: " + fechaHoy.getYear());
document.write("<br><small>Verá el año actual si utiliza el Explorer, y los años trancurrridos desde 1900 si usa el Navigator.</small>");
</script>
<p>Otra vez HTML.
</BODY> // se cierra el documento.
</HTML>
Observamos que no hay ningún problema en incluir etiquetas HTML dentro de los literales de write.
Podemos imprimir las fechas por medio de funciones colocándolas en la cabecera del documento y de este forma el cuerpo de la página nos queda simplificado y es mucho más fácil de revisar:
<HTML><HEAD><TITLE>Escribir documento con una función</TITLE>
<SCRIPT>
var tmeses=new Array("Enero","Febrero","Marzo","Abril","Mayo", "Junio","Julio","Agosto","Septiembre","Octubre","Noviembre", "Diciembre");
function fechaDoc(){
fechaUM = new Date(document.lastModified);
var iMesUM=fechaUM.getMonth();
document.write("<strong>");
document.write(fechaUM.getDate() + " de " + tmeses[iMesUM] + " de " + fechaUM.getFullYear() + ".");
document.write("</strong>");
}
function fechaHoy(){
fechaHoy = new Date();
var iDiaS=fechaHoy.getDay();
var iMes=fechaHoy.getMonth();
var tdiasemana=new Array("domingo","lunes","martes", "miércoles","jueves", "viernes","sábado")
document.write("<strong>" + tdiasemana[iDiaS] + ", " + fechaHoy.getDate() + " de " + tmeses[iMes] + " de " + fechaHoy.getFullYear() + ".</strong>");
}
</script>
</HEAD>
<BODY>
<p>Este documento fue modificado por última vez el día
<SCRIPT>
fechaDoc();
</script>
<p>Hoy es
<SCRIPT>
fechaHoy();
</script>
</BODY></HTML>
La matriz "tmes" se ha definido fuera de las funciones para que tenga un alcance global y nos sirva para las dos.
Si presumiblemente estas funciones son necesarias en varios documentos las pondremos en un archivo .js con lo que el código de la página quedaría más simplificado.
<HTML><HEAD><TITLE>Escribir documento con funciones en archivo aparte.</TITLE>
<SCRIPT src="funciones.js">
</script>
</HEAD>
<BODY>
<p>Este documento fue modificado por última vez el día
<SCRIPT>
fechaDoc();
</script>
<p>Hoy es
<SCRIPT>
fechaHoy();
</script>
</BODY></HTML>
Por último probamos el mecanismo de pasar una valor a la función, controlando la validez del valor pasado y actuando en consecuencia:
function barra(ancho){
if (!ancho){ancho="100%"}
document.write("<hr width='" +ancho+ "'>");
}
en este primer caso pasamos un valor válido:
barra("50%");
y en segundo lugar no pasamos valor
barra();
@ulambra.com Tecnologías internet.http://www.aulambra.com/javascript.asp
gamarod.com.ar. http://www.gamarod.com.ar/javascript/home.asp
HTMLPOINT.com. http://www.htmlpoint.com/jscript/index.html
MundoJavaScript. http://www.mundojavascript.com