Vous êtes sur la page 1sur 23

UNIVERSIDAD POLITECNICA DE PACHUCA MATERIA: PROGRAMACION V UNIDAD IV : JAVA SCRIPT TEMA: INTRODUCCCION A JAVA SCRIPT , EJERCICIOS ALUMNO (A):

CALIFICACIN: SEM./GPO: ING. NUM.MATRICULA FECHA: / /

JAVA SCRIPT
INTRODUCCIN A JAVA SCRIPT Javascript es un lenguaje de programacin utilizado para crear pequeos programitas encargados de realizar acciones dentro del mbito de una pgina web. Con Javascript podemos crear efectos especiales en las pginas y definir interactividades con el usuario. El navegador del cliente es el encargado de interpretar las instrucciones Javascript y ejecutarlas para realizar estos efectos e interactividades, de modo que el mayor recurso, y tal vez el nico, con que cuenta este lenguaje es el propio navegador. Javascript es el siguiente paso, despus del HTML, que puede dar un programador de la web que decida mejorar sus pginas y la potencia de sus proyectos. Es un lenguaje de programacin bastante sencillo y pensado para hacer las cosas con rapidez, a veces con ligereza. Incluso las personas que no tengan una experiencia previa en la programacin podrn aprender este lenguaje con facilidad y utilizarlo en toda su potencia con slo un poco de prctica. Entre las acciones tpicas que se pueden realizar en Javascript tenemos dos vertientes. Por un lado los efectos especiales sobre pginas web, para crear contenidos dinmicos y elementos de la pgina que tengan movimiento, cambien de color o cualquier otro dinamismo. Por el otro, javascript nos permite ejecutar instrucciones como respuesta a las acciones del usuario, con lo que podemos crear pginas interactivas con programas como calculadoras, agendas, o tablas de clculo. Javascript es un lenguaje con muchas posibilidades, permite la programacin de pequeos scripts, pero tambin de programas ms grandes, orientados a objetos, con funciones, estructuras de datos complejas, etc. Toda esta potencia de Javascript se pone a disposicin del programador, que se convierte en el verdadero dueo y controlador de cada cosa que ocurre en la pgina. En este manual vamos a tratar de acercarnos a este lenguaje en profundidad y conocer todos sus secretos y mtodos de trabajo. Al final del manual seremos capaces de controlar el flujo en nuestros programas Javascript y saber cmo colocar scripts para resolver distintas necesidades que podamos tener. Todo lo que veremos a continuacin nos servir

UNIVERSIDAD POLITECNICA DE PACHUCA MATERIA: PROGRAMACION V UNIDAD IV : JAVA SCRIPT TEMA: INTRODUCCCION A JAVA SCRIPT , EJERCICIOS ALUMNO (A):

CALIFICACIN: SEM./GPO: ING. NUM.MATRICULA FECHA: / /

de base para adentrarnos ms adelante en el desarrollo de pginas enriquecidas del lado del cliente.

ALGO DE HISTORIA DE JAVA SCRIPT En Internet se han creado multitud de servicios para realizar muchos tipos de comunicaciones, como correo, charlas, bsquedas de informacin, etc. Pero ninguno de estos servicios se ha desarrollado tanto como el Web. Si estamos leyendo estas lneas no vamos a necesitar ninguna explicacin de lo que es el web, pero si podemos hablar un poco sobre cmo se ha ido desarrollando con el paso de los aos. El Web es un sistema Hipertexto, una cantidad de dimensiones gigantes de textos interrelacionados por medio de enlaces. Cada una de las unidades bsicas donde podemos encontrar informacin son las pginas web. En un principio, para disear este sistema de pginas con enlaces se pens en un lenguaje que permitiese presentar cada una de estas informaciones junto con unos pequeos estilos, este lenguaje fue el HTML. Conforme fue creciendo el Web y sus distintos usos se fueron complicando las pginas y las acciones que se queran realizar a travs de ellas. Al poco tiempo qued patente que HTML no era suficiente para realizar todas las acciones que se pueden llegar a necesitar en una pgina web. En otras palabras, HTML se haba quedado corto ya que slo sirve para presentar el texto en un pgina, definir su estilo y poco ms. Al complicarse los sitios web, una de las primeras necesidades fue que las pginas respondiesen a algunas acciones del usuario, para desarrollar pequeas funcionalidades ms all de los propios enlaces. El primer ayudante para cubrir las necesidades que estaban surgiendo fue Java, que es un lenguaje de propsito general, pero que haba creado una manera de incrustar programas en pginas web. A travs de la tecnologa de los Applets, se poda crear pequeos programas que se ejecutaban en el navegador dentro de las propias pginas web, pero que tenan posibilidades similares a los programas de propsito general. La programacin de Applets fue un gran avance y Netscape, por aquel entonces el navegador ms popular, haba roto la primera barrera del HTML al hacer posible la programacin dentro de las pginas web. No cabe duda que la aparicin de los Appletssupuso un gran avance en la historia del web, pero no ha sido una tecnologa definitiva y muchas otras han seguido implementando el camino que comenz con ellos.

UNIVERSIDAD POLITECNICA DE PACHUCA MATERIA: PROGRAMACION V UNIDAD IV : JAVA SCRIPT TEMA: INTRODUCCCION A JAVA SCRIPT , EJERCICIOS ALUMNO (A):

CALIFICACIN: SEM./GPO: ING. NUM.MATRICULA FECHA: / /

Llega Javascript Netscape, despus de hacer sus navegadores compatibles con los applets, comenz a desarrollar un lenguaje de programacin al que llam LiveScript que permitiese crear pequeos programas en las pginas y que fuese mucho ms sencillo de utilizar que Java. De modo que el primer Javascript se llamoLiveScript, pero no dur mucho ese nombre, pues antes de lanzar la primera versin del producto se forj una alianza con Sun Microsystems, creador de Java, para desarrollar en conjunto ese nuevo lenguaje. La alianza hizo que Javascript se diseara como un hermano pequeo de Java, solamente til dentro de las pginas web y mucho ms fcil de utilizar, de modo que cualquier persona, sin conocimientos de programacin pudiese adentrase en el lenguaje y utilizarlo a sus anchas. Adems, para programar Javascript no es necesario un kit de desarrollo, ni compilar los scripts, ni realizarlos en ficheros externos al cdigo HTML, como ocurra con los applets. Netscape 2.0 fue el primer navegador que entenda Javascript y su estela fue seguida por otros clientes web como Internet Explorer a partir de la versin 3.0. Sin embargo, la compaa Microsoft nombr a este lenguaje como JScript y tena ligeras diferencias con respecto a Javascript, algunas de las cuales perduran hasta el da de hoy. Diferencias entre distintos navegadores Como hemos dicho el Javascript de Netscape y el de Microsoft Internet Explorer tena ligeras diferencias, pero es que tambin el propio lenguaje fue evolucionando a medida que los navegadores presentaban sus distintas versiones y a medida que las pginas web se hacan ms dinmicas y ms exigentes las necesidades de funcionalidades. Las diferencias de funcionamiento de Javascript han marcado las historia del lenguaje y el modo en el que los desarrolladores se relacionan con l, debido a que estaban obligados a crear cdigo que funcionase correctamente en diferentes plataformas y diferentes versiones de las mismas. A da de hoy, siguen habiendo muchas diferencias y para solucionarlo han surgido muchos productos como los FrameworksJavascript, que ayudan a realizar funcionalidades avanzadas de DHTML sin tener que preocuparse en hacer versiones distintas de los scripts, para cada uno de los navegadores posibles del mercado.

Diferencias entre Java y Java Script Estamos contando diversos asuntos interesantes y curiosidades que sirven de introduccin para el Manual de Javascript y queremos tratar una de las ms tpicas asociaciones que se se hacen al oir hablar de Javascript. Nos referimos a relacionarlo con

UNIVERSIDAD POLITECNICA DE PACHUCA MATERIA: PROGRAMACION V UNIDAD IV : JAVA SCRIPT TEMA: INTRODUCCCION A JAVA SCRIPT , EJERCICIOS ALUMNO (A):

CALIFICACIN: SEM./GPO: ING. NUM.MATRICULA FECHA: / /

otro lenguaje de programacin, llamado Java, que no tiene mucho que ver. Realmente Javascript se llam as porque Netscape, que estaba aliado a los creadores de Java en la poca, quiso aprovechar el conocimiento y la percepcin que las personas tenan del popular lenguaje. Con todo, se cre un producto que tena ciertas similitudes, como la sintaxis del lenguaje o el nombre. Se hizo entender que era un hermano pequeo y orientado especficamente para hacer cosas en las pginas web, pero tambin se hizo caer a muchas personas en el error de pensar que son lo mismo. Queremos que quede claro que Javascript no tiene nada que ver con Java, salvo en sus orgenes, como se ha podido leer hace unas lneas. Actualmente son productos totalmente distintos y no guardan entre si ms relacin que la sintaxis idntica y poco ms. Algunas diferencias entre estos dos lenguajes son las siguientes: Compilador. Para programar en Java necesitamos un Kit de desarrollo y un compilador. Sin embargo, Javascript no es un lenguaje que necesite que sus programas se compilen, sino que stos se interpretan por parte del navegador cuando ste lee la pgina. Orientado a objetos. Java es un lenguaje de programacin orientado a objetos. (Ms tarde veremos que quiere decir orientado a objetos, para el que no lo sepa todava) Javascript no es orientado a objetos, esto quiere decir que podremos programar sin necesidad de crear clases, tal como se realiza en los lenguajes de programacin estructurada como C o Pascal. Propsito. Java es mucho ms potente que Javascript, esto es debido a que Java es un lenguaje de propsito general, con el que se pueden hacer aplicaciones de lo ms variado, sin embargo, con Javascript slo podemos escribir programas para que se ejecuten en pginas web. Estructuras fuertes. Java es un lenguaje de programacin fuertemente tipado, esto quiere decir que al declarar una variable tendremos que indicar su tipo y no podr cambiar de un tipo a otro automticamente. Por su parte Javascript no tiene esta caracterstica, y podemos meter en una variable la informacin que deseemos, independientemente del tipo de sta. Adems, podremos cambiar el tipo de informacin de una varible cuando queramos.

UNIVERSIDAD POLITECNICA DE PACHUCA MATERIA: PROGRAMACION V UNIDAD IV : JAVA SCRIPT TEMA: INTRODUCCCION A JAVA SCRIPT , EJERCICIOS ALUMNO (A):

CALIFICACIN: SEM./GPO: ING. NUM.MATRICULA FECHA: / /

Otras caractersticas. Como vemos Java es mucho ms complejo, aunque tambin ms potente, robusto y seguro. Tiene ms funcionalidades que Javascript y las diferencias que los separan son lo suficientemente importantes como para distinguirlos fcilmente.

UNIVERSIDAD POLITECNICA DE PACHUCA MATERIA: PROGRAMACION V UNIDAD IV : JAVA SCRIPT TEMA: INTRODUCCCION A JAVA SCRIPT , EJERCICIOS ALUMNO (A):

CALIFICACIN: SEM./GPO: ING. NUM.MATRICULA FECHA: / /

ANTES DE EMPEZAR Quizs a da de hoy sobra decir para qu sirve Javascript, pero veamos brevemente algunos usos de este lenguaje que podemos encontrar en el web para hacernos una idea de las posibilidades que tiene. Sin ir ms lejos, DesarrolloWeb.com utiliza Javascript para el men superior, que muestra diferentes enlaces dentro de cada opcin principal. Vamos cambiando la pgina cada cierto tiempo, pero en el diseo actual de este sitio web, elementos como el recuadro de "Login" tambin tienen su dinamismo con Javascript. Actualmente casi todas las pginas un poco avanzadas utilizan Javascript, pues se ha vuelto una de las insignias de lo que se denomina la Web 2.0 y la experiencia enriquecida de usuario. Por ejemplo, webs tan populares como Facebook, Twitter o Youtube usan Javascript a raudales. Para ser ms concretos, cuando en la red social apretamos un enlace para comentar algo, se muestra en la pgina un pequeo formulario que aparece como por arte de magia y luego se enva sin salirse de la propia pgina. Tambin cuando votamos por un vdeo en Youtube o cuando se cuentan los caracteres que llevamos escritos en los mini-post de Twitter, se utiliza Javascript para realizar pequeas funcionalidades que no es posible realizar con HTML slo. En realidad se pueden ver ejemplos de Javascript dentro de cualquier pgina un poco compleja. Algunos que habremos visto en innumerables ocasiones son calendarios dinmicos para seleccionar fechas, calculadoras o convertidores de divisas, editores de texto enriquecido, navegadores dinmicos, etc. Es mucho ms habitual encontrar Javascript para realizar efectos simples sobre pginas web, o no tan simples, como pueden ser navegadores dinmicos, apertura de ventanas secundarias, validacin de formularios, etc. Nos atrevemos a decir que este lenguaje es realmente til para estos casos, pues estos tpicos efectos tienen la complejidad justa para ser implementados en cuestin de minutos sin posibilidad de errores. Sin embargo, aparte de esos unos simples ejemplos, podemos encontrar dentro de Internet muchas aplicaciones que basan parte de su funcionamiento en Javascript, que hacen que una pgina web se convierta en un verdadero programa interactivo de gestin de cualquier recurso. Ejemplos claros son las aplicaciones de ofimatica online, como Google Docs, Office Online o Google Calendar. Qu necesitas para trabajar con Javascript

UNIVERSIDAD POLITECNICA DE PACHUCA MATERIA: PROGRAMACION V UNIDAD IV : JAVA SCRIPT TEMA: INTRODUCCCION A JAVA SCRIPT , EJERCICIOS ALUMNO (A):

CALIFICACIN: SEM./GPO: ING. NUM.MATRICULA FECHA: / /

Para programar en Javascript necesitamos bsicamente lo mismo que para desarrollar pginas web con HTML. Un editor de textos y un navegador compatible con Javascript. Cualquier ordenador mnimamente actual posee de salida todo lo necesario para poder programar en Javascrip. Por ejemplo, un usuario de Windows dispone dentro de su instalacin tpica de sistema operativo, de un editor de textos, el Bloc de notas, y de un navegador: Internet Explorer. Nota: Usuarios que deseen herramientas ms avanzadas pueden encontrar en Internet fcilmente programas similares en la seccin de programas para desarrolladores. Permitidme una recomendacin con respecto al editor de textos. Se trata de que, aunque el Bloc de Notas es suficiente para empezar, tal vez sea muy til contar con otros programas que nos ofrecen mejores prestaciones a la hora de escribir las lneas de cdigo. Estos editores avanzados tienen algunas ventajas como que colorean los cdigos de nuestros scripts, nos permiten trabajar con varios documentos simultneamente, tienen ayudas, etc. Entre otros queremos destacar KomodoEdit, Notepad++ o UltraEdit. Conocimientos previos recomendables Lo cierto es que no hace falta tener mucha base de conocimientos para ponerse a programar en Javascript. Lo ms seguro es que si lees estas lneas ya sepas todo lo necesario para trabajar, puesto que ya habrs tenido alguna relacin con el desarrollo de sitios web y habrs detectado que para hacer ciertas cosas te viene bien conocer un poco de Javascript. No obstante, sera bueno tener un dominio avanzado de HTML, al menos el suficiente para escribir cdigo en ese lenguaje sin tener que pensar qu es lo que ests haciendo. Tambin ser til un conocimiento medio sobre CSS y quizs alguna experiencia previa sobre algn lenguaje de programacin, aunque en este manual de DesarrolloWeb.com vamos a tratar de explicar Javascript incluso para personas que no hayan programado nunca.

VERSIONES DE NAVEGADORES Y DE JAVA SCRIPT Con el tiempo tambin el HTML ha avanzado y se han creado nuevas caractersticas como las capas, que permiten tratar y maquetar los documentos de manera distinta. Javascript ha avanzado tambin y para manejar todas estas nuevas caractersticas se han creado nuevas instrucciones y recursos. Para resumir vamos a comentar las distintas versiones de Javascript:

UNIVERSIDAD POLITECNICA DE PACHUCA MATERIA: PROGRAMACION V UNIDAD IV : JAVA SCRIPT TEMA: INTRODUCCCION A JAVA SCRIPT , EJERCICIOS ALUMNO (A):

CALIFICACIN: SEM./GPO: ING. NUM.MATRICULA FECHA: / /

Javascript 1: naci con el Netscape 2.0 y soportaba gran cantidad de instrucciones y funciones, casi todas las que existen ahora ya se introdujeron en el primer estandar. - Javascript 1.1: Es la versin de Javascript que se dise con la llegada de los navegadores 3.0. Implementaba poco ms que su anterior versin, como por ejemplo el tratamiento de imgenes dinmicamente y la creacin de arrays. - Javascript 1.2: La versin de los navegadores 4.0. Esta tiene como desventaja que es un poco distinta en plataformas Microsoft y Netscape, ya que ambos navegadores crecieron de distinto modo y estaban en plena lucha por el mercado. - Javascript 1.3: Versin que implementan los navegadores 5.0. En esta versin se han limado algunas diferencias y asperezas entre los dos navegadores. - Javascript 1.5: Versin actual, en el momento de escribir estas lneas, que implementa Netscape 6. Por su parte, Microsoft tambin ha evolucionado hasta presentar su versin 5.5 de JScript (as llaman al javascript utilizado por los navegadores de Microsoft). Es obvio que todava, despus de escribir estas lneas, se presentarn o habrn presentado muchas otras versiones de Javascript, pues, a medida que se van mejorando los navegadores y van saliendo versiones de HTML, surgen nuevas necesidades para programacin de elementos dinmicos. No obstante, todo lo que vamos a aprender en este manual, incluso otros usos mucho ms avanzados, ya est implementado en cualquier Javascript que existan en la actualidad. EL LENGUAJE JAVA SCRIPT Javascript se escribe en el documento HTML Lo ms importante y bsico que podemos destacar en este momento es que la programacin de Javascript se realiza dentro del propio documento HTML. Es decir, el cdigo Javascript, en la mayora de los casos, se mezcla con el propio cdigo HTML para generar la pgina. Esto quiere decir que debemos aprender a mezclar los dos lenguajes de programacin y rpidamente veremos que, para que estos dos lenguajes puedan convivir sin problemas entre ellos, se han de incluir unos delimitadores que separan las etiquetas HTML de las instrucciones Javascript. Estos delimitadores son las etiquetas <SCRIPT> y </SCRIPT>. Todo el cdigo Javascript que pongamos en la pgina ha de ser introducido entre estas dos etiquetas. La colocacin de los scripts s que importa

UNIVERSIDAD POLITECNICA DE PACHUCA MATERIA: PROGRAMACION V UNIDAD IV : JAVA SCRIPT TEMA: INTRODUCCCION A JAVA SCRIPT , EJERCICIOS ALUMNO (A):

CALIFICACIN: SEM./GPO: ING. NUM.MATRICULA FECHA: / /

En una misma pgina podemos introducir varios scripts, cada uno que podra introducirse dentro de unas etiquetas <SCRIPT> distintas. La colocacin de estos scripts no es indiferente. En un principio, con lo que sabemos hasta el momento y los scripts que hemos realizado de prueba, nos da un poco igual donde colocarlos, pero en determinados casos esta colocacin s que ser muy importante. En cada caso, y llegado el momento, se informar de ello convenientemente. Tambin se puede escribir Javascript dentro de determinados atributos de la pgina, como el atributo onclick. Estos atributos estn relacionados con las acciones del usuario y se llaman manejadores de eventos.

UNIVERSIDAD POLITECNICA DE PACHUCA MATERIA: PROGRAMACION V UNIDAD IV : JAVA SCRIPT TEMA: INTRODUCCCION A JAVA SCRIPT , EJERCICIOS ALUMNO (A):

CALIFICACIN: SEM./GPO: ING. NUM.MATRICULA FECHA: / /

ALGUNOS EJEMPLOS EN JAVA SCRIPT Banners Insercin de anuncios o banners en la pgina

Banners aleatorios Una de las funcionalidades ms habituales que requiere una pgina web es la posibilidad de mostrar imgenes diferentes en cada recarga, de forma aleatoria, para implementar banners o simplemente para cambiar el aspecto o diseo dinmicamente. Con este ejemplo se consigue crear este efecto, de forma sencilla y con muy pocas lneas de cdigo. Adems es posible configurar el nmero de imgenes aleatorias y el color de fondo sobre el que aparecen. Las etiquetas <img ...> que definen las imgenes se almacenan en variables de tipo cadena, lo que facilita aadir o eliminar imgenes. Las posibilidades son infinitas, y con ligeros retoques se puede conseguir que se carguen imgenes diferentes en funcin de la hora del da, o del da de la semana, etc. Os animamos a intentarlo! Cdigo Fuente Java Script entre <head></head>

Cdigo Fuente HTML entre <body></body>

UNIVERSIDAD POLITECNICA DE PACHUCA MATERIA: PROGRAMACION V UNIDAD IV : JAVA SCRIPT TEMA: INTRODUCCCION A JAVA SCRIPT , EJERCICIOS ALUMNO (A):

CALIFICACIN: SEM./GPO: ING. NUM.MATRICULA FECHA: / /

Resultado: Banners aleatorios mejorados Partiendo de nuestro sencillo script de banners, Daniel D. Ocares nos presenta este ejemplo que permite incluir la correspondiente URL, y el tpico texto inferior que suele acompaar a la imagen del banner, as como el texto que se muestra cuando se pasa el puntero del ratn sobre la imagen. Todo esto configurable en una serie de variables iniciales, de modo que sea muy sencillo adaptarlo a las necesidades de cada pgina. Con estas mejoras este ejemplo puede ya utilizarse plenamente para mostrar banners de forma aleatoria. Cdigo Fuente Java Script entre <head></head>

UNIVERSIDAD POLITECNICA DE PACHUCA MATERIA: PROGRAMACION V UNIDAD IV : JAVA SCRIPT TEMA: INTRODUCCCION A JAVA SCRIPT , EJERCICIOS ALUMNO (A):

CALIFICACIN: SEM./GPO: ING. NUM.MATRICULA FECHA: / /

Cdigo Fuente HTML entre <body></body>

Resultado:

Efectos sobre textos


Trucos para aplicar efectos a mensajes de texto, como cambios de color o de tamao y desplazamientos.

Textos vistosos

UNIVERSIDAD POLITECNICA DE PACHUCA MATERIA: PROGRAMACION V UNIDAD IV : JAVA SCRIPT TEMA: INTRODUCCCION A JAVA SCRIPT , EJERCICIOS ALUMNO (A):

CALIFICACIN: SEM./GPO: ING. NUM.MATRICULA FECHA: / /

Con este ejemplo podrs visualizar los textos de tu pgina web con vistosos efectos de colores, tipografas y tamaos de letra. Este script asigna a cada letra de un texto un color, tipografa y tamao diferente, en funcin de 3 arrays especficos, donde se consignan los valores que se desea vayan tomando estos parmetros. Con ello se pueden crear efectos como el de los ejemplos de la izquierda. La posibilidad de seleccionar los valores de los 3 arrays de forma independiente crea infinitas posibilidades para combinar colores, tipografas y tamaos de letra. Si se desea fijar cualquiera de los tres parmetros, basta con asignar un slo valor al array correspondiente.

Cdigo Fuente Java Script entre <head></head>

Cdigo Fuente HTML entre <body></body>

Resultado:

UNIVERSIDAD POLITECNICA DE PACHUCA MATERIA: PROGRAMACION V UNIDAD IV : JAVA SCRIPT TEMA: INTRODUCCCION A JAVA SCRIPT , EJERCICIOS ALUMNO (A):

CALIFICACIN: SEM./GPO: ING. NUM.MATRICULA FECHA: / /

Scrolling de un texto El cdigo JavaScript para realizar desplazamientos horizontales de texto puede ser tan simple como el de este ejemplo. El texto se desplaza horizontalmente hacia la derecha en el cuadro de texto. Para conseguir este efecto, basta con reescribir la cadena eliminado cada vez el primer carcter.

Cdigo Fuente Java Script entre <head></head>

Cdigo Fuente HTML entre <body></body>

UNIVERSIDAD POLITECNICA DE PACHUCA MATERIA: PROGRAMACION V UNIDAD IV : JAVA SCRIPT TEMA: INTRODUCCCION A JAVA SCRIPT , EJERCICIOS ALUMNO (A):

CALIFICACIN: SEM./GPO: ING. NUM.MATRICULA FECHA: / /

Resultado:

Frase aleatoria Este sencillo ejemplo permite mostrar al usuario una frase elegida de forma aleatoria de una lista de frases preconfigurada. Para ello, se utiliza el mtodo random() del objeto Math para obtener un nmero aleatorio. Este nmero aleatorio se usa como ndice delarray que contiene las frases. El script es sencillo y nos sugiere una forma original de aadir dinamismo a una pgina web. Cdigo Fuente Java Script entre <head></head>

Cdigo Fuente HTML entre <body></body>

Resultado:

Seguridad
Control de acceso y proteccin de los elementos de una pgina.

Control de acceso a una pgina

UNIVERSIDAD POLITECNICA DE PACHUCA MATERIA: PROGRAMACION V UNIDAD IV : JAVA SCRIPT TEMA: INTRODUCCCION A JAVA SCRIPT , EJERCICIOS ALUMNO (A):

CALIFICACIN: SEM./GPO: ING. NUM.MATRICULA FECHA: / /

Aunque no es la mejor forma de implementar un control de acceso, se puede utilizar este script para solicitar al usuario la introduccin de una palabra de paso o password antes de mostrarle una pgina.El truco se basa en que no es posible acceder a una pgina que no est enlazada desde ningn otro sitio, a menos que se conozca su nombre. De este modo, el nombre de la pgina (o parte de l) puede utilizarse como el password. La dificultad est en evitar que aparezca el tpico File notfound cuando se introduzca una palabra de paso errnea. La solucin pasa por utilizar los eventos onLoad y onError del tag de una imagen que tenga exactamente el mismo nombre que el fichero a proteger. Si la imagen no se carga, se muestra un mensaje de password no vlido. Si se carga, el password es correcto y se muestra la pgina con xito. El usuario no tendr consciencia del truco y no percibir la existencia de la imagen si esta es de tamao 1 x 1 pixels (pero cuidado, la imagen debe existir). En este ejemplo, la password es abc123 y la pgina protegida se llama abc123.html. Cdigo Fuente Java Script entre <head></head>

Cdigo Fuente HTML entre <body></body>

Resultado:

UNIVERSIDAD POLITECNICA DE PACHUCA MATERIA: PROGRAMACION V UNIDAD IV : JAVA SCRIPT TEMA: INTRODUCCCION A JAVA SCRIPT , EJERCICIOS ALUMNO (A):

CALIFICACIN: SEM./GPO: ING. NUM.MATRICULA FECHA: / /

Ventanas de alerta y de confirmacin Ejemplos sencillos de utilizacin de ventanas de alerta, confirmacin y solicitud de informacin.

Mensaje automtico Para los que deseen abrir un cuadro de dilogo cuando el visitante entre en su pgina, con el tpico mensaje Bienvenido a mi pgina Web! (o cualquier otro similar), presentamos un ejemplo sencillo de cmo hacerlo con JavaScript. Este ejemplo espera unos segundos antes de mostrar el cuadro de dilogo. El tiempo de espera se puede modificar fcilmente, cambiando el valor del variable lapso. El funcionamiento se basa en la funcin setTimeout(), que permite establecer la ejecucin de una funcin JavaScript cuando pase cierto periodo de tiempo. Cdigo Fuente Java Script entre <head></head>

Resultado:

UNIVERSIDAD POLITECNICA DE PACHUCA MATERIA: PROGRAMACION V UNIDAD IV : JAVA SCRIPT TEMA: INTRODUCCCION A JAVA SCRIPT , EJERCICIOS ALUMNO (A):

CALIFICACIN: SEM./GPO: ING. NUM.MATRICULA FECHA: / /

Confirmacin antes de entrar a una pgina Este sencillo script ilustra el uso del mtodo confirm() del objeto window. Este mtodo muestra un cuadro de confirmacin con los botones de "Aceptar" y "Cancelar", y devuelve verdadero (true) o falso (false) en funcin del botn que pulse el usuairo. Una aplicacin prctica es sta: se presenta un cuadro de confirmacin antes de cargar la pgina, y si el usuario pulsa sobre "Cancelar" (no desea continuar), se hace un history.go(-1) para volver a la pgina anterior. Es til para pginas con contenidos restringidos a adultos o que pueden herir la sensibilidad. Cdigo Fuente Java Script entre <head></head>

Resultado:

Formularios y Cuestionarios

Envo de formularios con desactivacin del submit Deshabilitar campos de un formulario no forma parte del estndar del DOM publicado por el W3C. Esta facilidad fue introducida por Microsoft en el Internet Explorer 4, y desde entonces ha sido implementada en la mayora de los navegadores, porque resulta muy til en determinados casos.

UNIVERSIDAD POLITECNICA DE PACHUCA MATERIA: PROGRAMACION V UNIDAD IV : JAVA SCRIPT TEMA: INTRODUCCCION A JAVA SCRIPT , EJERCICIOS ALUMNO (A):

CALIFICACIN: SEM./GPO: ING. NUM.MATRICULA FECHA: / /

Uno de los ejemplos de utilizacin es el bloqueo del botn Submit de envo de un formulario, para evitar que el usuario enve los datos del formulario mltiples veces al servidor por error, al pulsar el botn de envio repetidas veces. El script de este ejemplo deshabilita el botn Submit asignando a la propiedad disabled del objeto del botn de envo el valor true. Adems, reasigna la funcin de envo a una funcin vaca, para que los navegadores que no soportan deshabilitar campos de formulario dispongan tambin de un mecanismo de prevencin del reenvo de los datos. La funcin vaca no hace nada, de modo que aunque el botonSubmit est activo, una vez enviado el formulario, su pulsacin no tiene efecto. Como curiosidad, la informacin de los campos deshabilitados no se enva al servidor al hacer el Submit, lo cual puede ser til para evitar enviar informacin redundante. Cdigo Fuente Java Script entre <head></head> Cdigo Fuente HTML entre <body></body>

Flujo de navegacin
Cmo alterar el flujo de navegacin para redirigir a otra pgina o refrescar el contenido automticamente.

UNIVERSIDAD POLITECNICA DE PACHUCA MATERIA: PROGRAMACION V UNIDAD IV : JAVA SCRIPT TEMA: INTRODUCCCION A JAVA SCRIPT , EJERCICIOS ALUMNO (A):

CALIFICACIN: SEM./GPO: ING. NUM.MATRICULA FECHA: / /

Pgina que se auto recarga (refresh) El ejemplo que presentamos implementa con JavaScript un refresh o refresco automtico de la pgina cada 10 segundos. La pgina se recargar de forma automtica cada 10 segundos, siendo este periodo configurable, modificando el valor de la variable lapso. La recarga automtica de la pgina puede ser de utilidad en pginas que muestran informacin que cambia constantemente (por ejemplo, ndices de bolsa). Existen formas alternativas de conseguir este efecto, la ms simple mediante ste cdigo HTML en la cabecera de la pgina: <meta http-equiv="refresh" content="10"> Cdigo Fuente Java Script entre <head></head>

Cdigo Fuente HTML entre <body></body>

Resultado:

Forzar la pgina de procedencia Si deseamos que cierta pgina slo sea visitada cuando se procede de otra (por ejemplo, para presentaciones o formularios de evaluaciones), podemos usar este sencillo script. Se basa en comprobar el valor del document.referrer, que contiene la pgina desde la cual se ha llegado a la pgina actual (y que, por tanto, enlaza con ella). Por ejemplo, el document.referrer actual es:

UNIVERSIDAD POLITECNICA DE PACHUCA MATERIA: PROGRAMACION V UNIDAD IV : JAVA SCRIPT TEMA: INTRODUCCCION A JAVA SCRIPT , EJERCICIOS ALUMNO (A):

CALIFICACIN: SEM./GPO: ING. NUM.MATRICULA FECHA: / /

http://www.amiguito.net/cgi-bin/DBread.cgi?tabla=scripts&campo=5&clave=1x35 El cuadro anterior aparecer vaco cuando se haya tecleado la URL de la pgina directamente en la barra de direcciones del naveagdor. En ese caso, document.referrer no toma ningn valor. A la hora de utilizar scripts como el de este ejemplo, hay que tener en cuenta que el usuario siempre podr deshabilitar JavaScript en su navegador para saltarse esta limitacin, pero en cualquier caso siempre puede ser til para guiar la navegacin por el site. Cdigo Fuente Java Script entre <head></head>

Resultado:

Y enseguida aparecer la pgina a la que re-direccionaste en el script.

Clculos numricos
Clculos numricos (sumas, restas, divisiones, multiplicaciones) y ejemplos de aplicacin (calculadoras, conversores). Calculadora Simple Esta sencilla calculadora suma, resta, multiplica y divide, tiene memoria, soporta nmeros decimales y exponenciales, y funciona como la mayora de las calculadoras bsicas. El script se basa en la funcin eval(), que interpreta como cdigo JavaScript la cadena que se le pasa como argumento. Para implementar la calculadora, se construye una cadena con la operacin a realizar, uniendo los operandos con el operador, y se pasa despus esta cadena a la funcin eval(). Cdigo Fuente Java Script entre <head></head>

UNIVERSIDAD POLITECNICA DE PACHUCA MATERIA: PROGRAMACION V UNIDAD IV : JAVA SCRIPT TEMA: INTRODUCCCION A JAVA SCRIPT , EJERCICIOS ALUMNO (A):

CALIFICACIN: SEM./GPO: ING. NUM.MATRICULA FECHA: / /

UNIVERSIDAD POLITECNICA DE PACHUCA MATERIA: PROGRAMACION V UNIDAD IV : JAVA SCRIPT TEMA: INTRODUCCCION A JAVA SCRIPT , EJERCICIOS ALUMNO (A):

CALIFICACIN: SEM./GPO: ING. NUM.MATRICULA FECHA: / /

Cdigo Fuente HTML entre <body></body>

Resultado:

Vous aimerez peut-être aussi