Scribd
Cargar
661 vistas

Javascript en Documentos HTML

El documento describe la integración de código JavaScript en documentos HTML. Se puede incrustar código JavaScript directamente entre las etiquetas <SCRIPT> y </SCRIPT>, o se puede referir a un archivo externo usando el atributo SRC. El código JavaScript se ejecutará cuando se cargue la página y puede manipular el contenido HTML.

Cargado por

dannyboy3119
Derechos de autor
© Attribution Non-Commercial (BY-NC)
Formatos disponibles
Descarga como DOCX, PDF, TXT o lee en línea desde Scribd
661 vistas

Javascript en Documentos HTML

El documento describe la integración de código JavaScript en documentos HTML. Se puede incrustar código JavaScript directamente entre las etiquetas <SCRIPT> y </SCRIPT>, o se puede referir a un archivo externo usando el atributo SRC. El código JavaScript se ejecutará cuando se cargue la página y puede manipular el contenido HTML.

Cargado por

dannyboy3119
Derechos de autor
© Attribution Non-Commercial (BY-NC)
Formatos disponibles
Descarga como DOCX, PDF, TXT o lee en línea desde Scribd
Está en la página 1/ 19

Javascript en documentos HTML

Se ofrece aqu un primer ejemplo en el que se ilustra la integracin directa de cdigo JavaScript en un documento HTML: <HTML> <HEAD> <TITLE>Primer ejemplo de JavaScript</TITLE> </HEAD> <BODY> Esto es texto normal de un documento HTML <SCRIPT LANGUAGE="JavaScript"> docurnent.write("Texto generado desde JavaScript") </SCRIPT> Esto es, de nuevo, HTML </body> </HTML> Como se puede observar, este ejemplo tiene la apariencia de un documento HTML estndar. La nica novedad viene dada por la presencia del fragmento correspondiente al cdigo JavaScript: <SCRIPT LANGUAGE="JavaScript"> document.write('Texto generado desde Javascript") </SCRIPT> Para poder ver el resultado de su ejecucin, bastar con cargar dicho documento con cualquiera de los clientes Web antes mencionados. La salida, como se aprecia en las figuras adjuntas (para ambos clientes Web), se compone de tres lneas de texto: - Esto es texto normal de un documento HTML - Texto generado desde JavaScript - De nuevo HTML En realidad no se trata de un script til, puesto que todo lo que ofrece (mostrar una lnea de texto) se podra haber hecho en HTML directamente y, sin duda, con mayor comodidad. Slo se trata de mostrar el funcionamiento del cdigo <SCRIPT>. En efecto, cualquier elemento que quede delimitado por los cdigos <SCRIPT> y </SCRIPT> se considera

cdigo JavaScript . En este caso particular, se ha utilizado document.write , una de las funciones ms importantes de JavaScript, que permite escribir algo en el documento actual (en este caso, el documento HTML que contiene el ejemplo).

Archivos de cdigo Javascript


El atributo SRC del cdigo SCRIPT del lenguaje HTML permite especificar un archivo que contiene el cdigo JavaScript (en lugar de incrustar el cdigo JavaScript en el documento HTML). Por ejemplo: <HEAD> <SCRIPT SRC="comun.js"> ... </SCRIPT> </HEAD> <BODY> ... Este atributo es especialmente til para compartir funciones entre numerosos documentos HTML. Las sentencias JavaScript del interior de un cdigo <SCRIPT SRC= ... > se ignoran a menos que la inclusin cause un error. Se incluye una sentencia que muestre un mensaje de error en caso de no poder cargar el archivo de cdigo. Por ejemplo: <script src="http://www.mienlace.es/funciones/funcion1.js"> Los archivos JavaScript externos slo pueden tener cdigo JavaScript y ninguna sentencia HTML. Clientes que no soportan JavaScript.- Estos clientes no admiten la etiqueta HTML <script>. Consideran la etiqueta SCRIPT y todo su contenido como texto normal, por ello, se hace preciso ocultar el cdigo a clientes que no lo soporten. Para evitar esto, se utilizan los comentarios de HTML entre las etiquetas <SCRIPT> y </SCRIPT>: <SCRIPT LANGUAGE="JavaScript"> </SCRIPT> Recuerda que es la forma de insertar comentarios en HTML. Otra forma de conocer si un cliente soporta JavaScript es insertar el cdigo <NOSCRIPT>...</NOSCRIPT>. De modo, los navegadores que no soporten JavaScript ejecutan las sentencias HTML alternativas incluidas dentro de esta etiqueta.

Javascript para aplicaciones servidor


En el servidor JavaScript tambin est integrado en pginas HTML. Las sentencias de JS del servidor pueden realizar multitud de tareas: -Conectarse a bases de datos relacionales de varios fabricantes. -Compartir informacin entre usuarios de una aplicacin.

-Acceder a los ficheros del servidor. -Comunicarse con otras aplicaciones a travs de LIVECONNECT y JAVA. Las aplicaciones JavaScript del servidor se compilan generando archivos binarios. Existen servicios especiales de JavaScript en el servidor: -Servicio de Gestin de Sesiones. -Servicio de Bases de Datos LiveWire. JavaScript y Java.JavaScript Interpretado por el cliente Java Copilado (bytecodes). Se descarga del servidor y se ejecuta en el cliente Basado en clases

Orientado a Objetos El cdigo se integra e incrusta en documentos Se utilizan APPLETS. Se accede a ellos desde documentos HTML Los tipos de datos de las variables no se Es necesario definir los tipos de datos a las variables declaran No se puede escribir automticamente en el No se puede escribir automticamente en el disco duro disco duro

JavaScript reconoce los siguientes valores: -Valores numricos. -Valores lgicos (true, false) -Cadenas de caracteres -Valor null -Valor no definido (undefined) Adems de estos valores, existen otros elementos propios de JavaScript como los objetos y las funciones. JavaScript trata de forma dinmica los datos y se puede realizar la siguiente operacin: var unValor=50 Y despus asignar a un Valor un valor de tipo cadena de caracteres: unValor="Ahora est lloviendo" Variables.- Las variables pueden comenzar por un carcter o un subrayado bajo (_). Cuando a una variable no se le asigna un valor, tiene valor indefinido (undefined). Si se le pone un valor, pueden ocurrir dos cosas:

-Si fue declarada sin "var", se produce un error en tiempo de ejecucin. -Si fue declarada con "var", devuelve el valor NaN (Not a Number). Veamos un ejemplo: function f1() { return y-2; } f1() // Esta llamada a f1 provoca un error en tiempo de ejecuci n function f2() { return var y-2; } f2() // devuelve el valor NaN Podemos utilizar el valor "undefined" para ponerle valor a una expresin: var miVar; if(miVar==undefined) { hazunacosa(); } else { hazotracosa(); } El valor "undefined" se comporta como falso cuando se usa como tipo booleano. Las variables pueden ser: Globales: cuando se le asigna un valor fuera de una funcin. El uso de "var" es opcional. Locales: Se realiza la operacin de asignacin dentro de una funcin. El uso de "var" es obligatorio. Por ltimo, es bueno saber que se puede acceder a una variable de un documento HTML de un FRAME desde otro: parent.miVar

Literales Javascript
Un literal es un valor fijo que se especifica en el script .

Existen varios tipo de literales que explicaremos a continuacin: -Arrays -Booleanos -Coma Flotante -Enteros -Objetos -Cadenas 1.Arrays: conjunto de 0 o ms expresiones encerradas entre corchetes ([]). Ejemplo: coches=["BMW","Mercedes","Audi","Volvo"] Coches es un array de 4 elementos. Podemos dejar elementos del array vacos: ciudades=["Madrid",,"Valladolid"] ciudades=[,,"Pamplona"] ciudades=["Madrid","Pamplona",,] 2.Los boleanos: tienen 2 valores booleanos: true y false. 3.Coma flotante: un literal de coma flotante puede tener las siguientes partes: Un entero decimal Un punto decimal(".") Una parte fraccionaria Un exponente ("e" o "E") Un literal de coma flotante debe tener al menos un dgito y un punto decimal o una "e"(o "E"). Ejemplos: 3.1415 -6.23E11 .2e10

2E-10 4. Los enteros: los literales enteros se pueden expresar como: Decimales: del 0 al 9. Octales: comienzan por 0. Del 0 al 7. Hexadecimales: comienzan por "0x" o "0X". Del 0 a 9 y a(o A) a f(o F). 5. Los objetos: conjunto de cero o ms parejas de parejas nombre: valor. Ejemplo: avin= { marca:"Boeing",modelo:"747",npasajeros:"450" } Para referirnos desde JavaScript a una propiedad del objeto avin: document.write(avin.modelo) 6.Las cadenas: el literal de cadena es una secuencia de caracteres entre los signos de comillas simples o dobles ( o ). En un literal de tipo cadena podemos utilizar los mtodos del objeto String . Existe un conjunto de caracteres que comienzan por \ . Algunos de ellos son: \b: retroceso \f: avance de lnea \n: salto de lnea \r: return \t: tabulacin \' , \", \\ : los smbolos ', " y \ respectivamente. Captulo anterior:
Valores Javascript

Objetos Javascript
Definimos como objeto, una entidad con una serie de propiedades que definen su estado y unos mtodos (funciones) que actan sobre esas propiedades. La forma de acceder a una propiedad de un objeto es la siguiente: nombreobjeto.propiedad Tambin se puede referir a una propiedad de un objeto por su ndice en la creacin. Los ndices comienzan

por 0: casa[0]=casa.localidad casa[1]=casa.superficie casa[2]=casa.precio Vamos a crear un objeto con una serie de propiedades. La forma de crear un objeto es la siguiente: -Crear una funcin 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) Dos observaciones importantes: -Gracias a new creamos nuevos objetos con las propiedades de los ya creados. "this" hace referencia al propio objeto. -A un objeto se le pueden seguir aadiendo propiedades tras ser definido, aunque es una prctica que no se aconseja, pues todos los objetos ya creados hasta entonces aaden tambin esa propiedad con valor nulo. Para ello se utiliza la palabra prototype: casa.prototype.ao=null casa.ao="1980"

Mtodos Javascript
Otra forma de crear objetos de forma literal es la siguiente: nombreobjeto= { propiedad1:valor;propiedad2:valor;.....propiedadN:valor } Finalmente, slo aadir que una propiedad puede estar formada por varias subpropiedades de modo que, para referenciarlas deberemos seguir una notacin similar a la anterior: nombreobjeto.nombrepropiedad.nombreSubpropiedad

Ejemplo: casa1= { localidad:"Pamplona",precio:15000000,superficie: { interior:90,terraza:10 } } En este ejemplo, casa1 es un objeto en el que, la propiedad "superficie", est a su vez formada por dos subpropiedades: interior y terraza. Cmo se crean mtodos.- Veamos ahora cmo se crean los mtodos: Un mtodo no es ms que una funcin asociada a un tipo de objeto: objeto.nombremtodo=nombrefuncin Veamos un ejemplo. Este mtodo sirve para mostrar las propiedades de un objeto casa: function VerCasa() { var mostrar="La casa est en " + this.localidad + ", tiene " + this.superficie +" m2 y cuesta " +this.precio +" ptas." return(mostrar) } Si en la funcin constructora de casa aadimos: this.VerCasa=VerCasa Ya tenemos un mtodo llamado VerCasa que nos permite ver las propiedades de cualquier objeto de tipo casa. Una vez creado un objeto, si lo que queremos es eliminarlo, slo tenemos que llamar al operador "delete". delete casa Este operador es interesante, porque, si consigue eliminar el objeto, devuelve "true" si se le pone valor, por lo que se puede saber cuando un objeto ha sido borrado satisfactoriamente.

Operadores Javascript
Existen varios tipos de operadores en JavaScript: 1.Asignacin: este tipo de operador se utiliza para asignar valores a las variables. var resultado=50 Asigna a la variable "resultado" el valor 50. Existen abreviaturas de algunas operaciones de asignacin: x+=y x=x+y x-=y x=x-y

x*=y x=x*y x%=yx=x%y x/=y x=x/y 2.Comparacin: en JavaScript, se pueden comparar variables de distinto tipo, pues es capaz de forzar conversiones: == Devuelve true si son iguales. Fuerza conversiones de tipo. != Devuelve true si son distintos. Fuerza conversiones de tipo. === Devuelve true si son iguales y del mismo tipo. !== Devuelve true si son distintos o de distinto tipo. > Devuelve true si la variable de la izquierda es mayor que la variable de la derecha < Devuelve true si la variable de la derecha es mayor que la variable de la izquierda >= Devuelve true si la variable de la izquierda es mayor o igual que la variable de la derecha <= Devuelve true si la variable de la izquierda es menor o igual que la variable de la derecha 3. Aritmticos: los operadores aritmticos, a partir de varios operandos, devuelven un solo valor; resultado de la operacin realizada con los anteriores operandos. En JavaScript existe notacin postfija y prefija, por lo que variable++ y ++variable son dos formas distintas de incrementar una variable. En primer lugar, se procesa la variable, y luego se incrementa. Sin embargo, en el segundo caso, primero se incrementa la variable y despus se procesa. % Binario: devuelve el resto de una divisin. ++ Unitario: incrementa el valor de la variable. -- Unitario: disminuye el valor de una variable. - Unitario: cambia el signo de una variable. 4.Lgicos: los operadores lgicos devuelven un valor binario. && AND || OR ! NOT

Es importante saber que si en una evaluacin ya se conoce el resultado, no se pone valor a los dems trminos: true || devuelve true. false && devuelve false.

Condicionales Javascript
Las sentencias en JavaScript se dividen en varios tipos: 1.Condicionales: las sentencias condicionales sin "if" y "switch" . La sintaxis de "if" es la siguiente: if(condicin) { acciones } else { acciones } Ejemplo: var i=5 if(i>5) { document.write("i es mayor que 5") } else { document.write("i es menor o igual que 5") } La sentencia "switch" toma una variable, y la evala segn unos posibles valores: switch(variable) { case valor1: acciones1; break; case valor2:

acciones2; break; ......... ......... case valorN: accionesN; break; default acciones; } Veamos cada una de las partes: case valor1: en el caso de que la variable tenga el valor "valor1", realizar las acciones "acciones1". break: si no se incluye esta sentencia despus de cada "case", se realizaran todos los cases del "switch" hasta el final. De este modo, slo se realizarn las acciones referentes al "case" concreto. Default: si el valor de la variable no concuerda con ningn case, se realizarn las acciones de default. En la prxima leccin le explicaremos el segundo tipo de sentencia: los bucles.
Practica con esta leccin

Bucles Javascript
Veamos el segundo tipo de sentencia: los bucles. Bucles.- Estas sentencias se caracterizan porque el flujo puede pasar varias veces por ellas hasta que se cumple una condicin. "for" representa una o varias sentencias que se repiten un nmero determinado de veces: for(inicio;final;incremento) { acciones } "do...while" es un bucle que al menos se recorre una vez, antes de analizar la condicin al final. do(condicin) { acciones

} while(condicin) "while" es una sentencia de bucle que puede que no se realice ninguna vez, pues la condicin se evala al principio del bucle. while(condicin) { acciones } Con la sentencia "break", se puede salir de una sentencia de bucle sin limitaciones. Con la sentencia "continue", se termina el bucle actual y se comienza con el siguiente. Manipulacin de Objetos.- Existen dos sentencias (for y with) que permiten acceder a las propiedades de un objeto de forma rpida. La sentencia "for" recorre todas y cada una de las propiedades de un objeto con un ndice. for(variable en objeto) { acciones } "with" establece un objeto por defecto al que aplica un conjunto de acciones: with(objeto) { acciones } La forma de introducir comentarios en JavaScript es con // . Si se trata de una lnea, los comentarios se introducirn con /* ...*/, si queremos tomar un bloque como comentario.

Funciones Javascript
Una funcin es un elemento del programa creado con la finalidad de realizar una determinada accin. Una funcin puede ser llamada desde otra. En JavaScript, las funciones se definen en la cabecera del documento HTML. Su sintaxis es: function nombreFuncin([parmetros]) { acciones } Veamos un ejemplo: el siguiente script es una funcin que toma los valores de un formulario, y devuelve en un cuadro de texto del mismo el valor de la primera casilla elevado a la potencia de la segunda:

<script> function potencia() { var i=0; var resul=1; if(document.c lculo.elevado.value==0) document.c lculo.resultado.value=resul; else { resul=document.c lculo.base.value; for(i=1;i<document.c lculo.elevado.value;i++) resul=resul*document.c lculo.base.value; } document.c lculo.resultado.value=resul; } </script> Importante: las funciones siempre irn situadas en la cabecera del documento HTML. Se debe recordar cmo se accede a los diferentes elementos de un documento HTML . Primero, document , despus los nombres de los distintos elementos que existen en ese elemento: -Clculo: es el valor que se le ha dado al atributo "name" del formulario. -Resultado, base, elevado: es el valor que se le ha dado al atributo "name" de una de las cajas de texto del formulario. Veamos la parte HTML de este documento: <form name="clculo"> Nmero: <input type="text" name="base"> Potencia: <input type="text" name="elevado"> Resultado: <input type="text" name="resultado"> <input type="button" name="poten" Value="Calcular potencia" onClick="potencia()"> </form>

Parmetros de las funciones


En JavaScript, los parmetros de las funciones se pasan por valor, es decir, si una variable cambia de valor en la funcin, fuera de ella sigue teniendo el mismo valor que cuando entr en ella. Si una funcin devuelve su resultado con return , la funcin debe ser asignada o formar parte de una respuesta. En caso contrario, si una funcin no devuelve un valor con "return", puede ser llamada sin ser asignada. Los argumentos de las funciones se gestionan con un array propio de cada una de ellas. Al array se accede con "nombreFuncin.arguments[i]", donde "i" es un ndice que comienza por 0. Para conocer el nmero de parmetros, podemos utilizar: "arguments.length". Existe un conjunto de funciones predefinidas, veamos algunas de ellas: Fecha: getDate(): da del mes getDay(): da de la semana getMonth(): da del mes getYear(): ao (con dos dgitos) getTime(): milisegundos transcurridos desde 1/1/1970 getHours(): hora entre 0 y 23 getMinutes(): minutos entre 0 y 59 getSeconds(): segundos entre 0 y 59 Existen las mismas funciones pero con "set" en lugar de "get", de modo que nos permiten cambiar el valor de esas variables.

Funciones de ventanas y funciones matemticas


Tenemos tres formas de mostrar un mensaje al usuario en una ventana de aviso: Alert: muestra el contenido de lo que le pasamos en una ventana con un botn de aceptar. alert("Esto es una prueba") Confirm: muestra un mensaje como "alert", pero con dos botones: aceptar y cancelar. Si se evala, al pulsar aceptar devuelve true y con cancelar, false . Prompt: muestra una ventana donde podemos escribir un valor, de modo que despus pueda ser asignado a una variable. prompt("mensaje",valor por defecto)

Matemticas.- Se trata de las propiedades de Math : abs(): valor absoluto max(v1,..,vn): valor mximo min(v1,..,vn): valor mnimo round(): redondear exp(): exponencial log(): logaritmo pow(base,exponente): potencia sqrt(): raz cuadrada sin(): seno cos(): coseno tan(): tangente asin(): arcoseno acos(): arcocoseno atan(): arcotangente

Gestin de eventos
Evento se considera cualquier accin que el usuario realiza con el sistema: hacer click, posicionarse con el ratn en un lugar determinado, enviar un formulario, posicionarse en un cuadro para texto,.... Para referirnos a un evento en HTML, el nombre del evento ir precedido por "on". Por ejemplo, el gestor de eventos de "Click" ser "onClick". La forma de llamar a un evento es la siguiente. Imaginamos que tenemos un botn en un formulario, y queremos que al pulsarlo realice una accin determinada: <form ....> <input type="button" onClick="funcin([parmetros])"> </form ....> Con esta accin, asociamos al evento click sobre el botn las acciones que realice la funcin. Veamos los eventos que conoce JavaScript: DragDrop: arrastrar un objeto a la ventana del navegador.

Error: se produce un error en la carga de un documento. Focus: el usuario se posiciona en una ventana o cuadro de texto de un formulario. KeyDown: se pulsa una tecla. KeyPress: se pulsa o libera una tecla KeyUp: se libera una tecla Load: se carga un documento en el navegador MouseDown: se pulsa un botn del ratn MouseMove: se mueve el cursor MouseOver: el puntero del ratn se posiciona sobre un enlace MouseOut: el puntero del ratn sale de un enlace o imagen mapa MouseUp: se libera un botn del ratn. Move: se mueve la ventana. Esta accin tambin la puede realizar el script. Reset: se pulsa sobre el botn reset del formulario. Resize: las dimensiones de la ventana cambian. Select: se selecciona una de las opciones de un cuadro combo del formulario. Submit: se pulsa el botn submit del formulario. UnLoad: el usuario sale de la pgina. Recuerde que para llamar a los eventos, se debe anteponer "on" al nombre del evento. En la prxima leccin veremos ejemplos de eventos.

Ejemplos de eventos
Veamos un ejemplo del evento Click: <script> function contar(objetoSelect) { var seleccionadas=0 for (var i=0;i < objetoSelect.options.length;i++) { if (objetoSelect.options[i].selected)

seleccionadas++; } return seleccionadas; } </script> El resto de cdigo HTML es el siguiente: <BODY BGCOLOR="#FFFFFF"> <form name="formulario"> Selecione los temas que son de su inter s y pulse despu s el bot n

<select name="temas" m ltiple> <option selected>Inform tica <option>Naturaleza <option>M sica <option>Deportes <option>Econom a <option>Coleccionismo </select> <input type="button" value=" Cu ntos hay selecionados?" onclick="alert('N mero de opciones selecionadas: ' + contar(document.formulario.temas))"> </form> Vamos a estudiar este ejemplo con detenimiento: Este formulario cuenta el nmero de opciones de un cuadro combo. Hemos definido un formulario llamado formulario que posee un cuadro combo (llamado temas) y un botn.

Si nos fijamos en el botn, veremos que con el evento Click llama a la funcin definida previamente contar. Esta funcin toma como parmetro el cuadro combo (document.formulario.temas) y lo procesa, devolviendo un valor con return Obsrvese tambin que el resultado no se escribe en un cuadro de texto, sino que usamos alert para mostrar un mensaje en otro cuadro, que concatena un literal y el resultado de la funcin contar.

Captura de eventos
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 mtodos: -captureEvents: captura eventos del tipo que se especifique. -releaseEvents: ignora la captura del tipo especificado. -routeEvent: enva el evento capturado a un objeto. Ahora vamos a ver la secuencia de captura, definicin y activacin de un gestor de eventos: Debemos especificar el tipo de eventos que queremos capturar: window.captureEvent(Event.CLICK [| Event.* | Event.*]) De este modo, todos los eventos de tipo CLICK que se produzcan sern capturados. Ntese que se pueden especificar varios eventos, siempre separados por | que significa OR. Tras capturar dicho(s) evento(s), deberemos especificar una funcin que realice las acciones asociadas a dicho evento: function evento_nombre([parmetros]) { acciones return true o false La funcin devolver true cuando la accin sea posible y false en caso contrario. Ya tenemos el evento capturado y la funcin asociada, slo queda asignar al evento la funcin especificada: window.onClick=evento_nombre;

Configurar y borrar cookies


Para configurar una cookie podemos utilizar la siguiente funcin: 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 funcin 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"; } } Limitaciones.- Las cookies tienen unas limitaciones: -Mximo de 300 cookies en el archivo cookies.txt . Si se excede ese lmite, se eliminan las menos recientes. -Mximo de 4 Kb por cookie. Si se excede el lmite, se trunca la cookie dejando intacto el nombre, siempre que ste no exceda los 4Kb. -20 cookies por servidor o dominio. Si se excede ese lmite, se eliminan las menos recientes.

También podría gustarte