P. 1
Java Script

Java Script

|Views: 8|Likes:
Published by Agustin Ventura

More info:

Published by: Agustin Ventura on May 27, 2013
Copyright:Attribution Non-commercial

Availability:

Read on Scribd mobile: iPhone, iPad and Android.
download as PDF, TXT or read online from Scribd
See more
See less

08/18/2014

pdf

text

original

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

):

CALIFICACIÓN: SEM./GPO: ING. NUM.MATRICULA FECHA: / /

JAVA SCRIPT
INTRODUCCIÓN A JAVA SCRIPT Javascript es un lenguaje de programación utilizado para crear pequeños programitas encargados de realizar acciones dentro del ámbito de una página web. Con Javascript podemos crear efectos especiales en las páginas 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, después del HTML, que puede dar un programador de la web que decida mejorar sus páginas y la potencia de sus proyectos. Es un lenguaje de programación 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 programación podrán aprender este lenguaje con facilidad y utilizarlo en toda su potencia con sólo un poco de práctica. Entre las acciones típicas que se pueden realizar en Javascript tenemos dos vertientes. Por un lado los efectos especiales sobre páginas web, para crear contenidos dinámicos y elementos de la página 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 páginas interactivas con programas como calculadoras, agendas, o tablas de cálculo. Javascript es un lenguaje con muchas posibilidades, permite la programación de pequeños scripts, pero también de programas más grandes, orientados a objetos, con funciones, estructuras de datos complejas, etc. Toda esta potencia de Javascript se pone a disposición del programador, que se convierte en el verdadero dueño y controlador de cada cosa que ocurre en la página. En este manual vamos a tratar de acercarnos a este lenguaje en profundidad y conocer todos sus secretos y métodos de trabajo. Al final del manual seremos capaces de controlar el flujo en nuestros programas Javascript y saber cómo colocar scripts para resolver distintas necesidades que podamos tener. Todo lo que veremos a continuación nos servirá

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

CALIFICACIÓN: SEM./GPO: ING. NUM.MATRICULA FECHA: / /

de base para adentrarnos más adelante en el desarrollo de páginas 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, búsquedas de información, etc. Pero ninguno de estos servicios se ha desarrollado tanto como el Web. Si estamos leyendo estas líneas no vamos a necesitar ninguna explicación de lo que es el web, pero si podemos hablar un poco sobre cómo se ha ido desarrollando con el paso de los años. El Web es un sistema Hipertexto, una cantidad de dimensiones gigantes de textos interrelacionados por medio de enlaces. Cada una de las unidades básicas donde podemos encontrar información son las páginas web. En un principio, para diseñar este sistema de páginas con enlaces se pensó en un lenguaje que permitiese presentar cada una de estas informaciones junto con unos pequeños estilos, este lenguaje fue el HTML. Conforme fue creciendo el Web y sus distintos usos se fueron complicando las páginas y las acciones que se querían realizar a través 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 página web. En otras palabras, HTML se había quedado corto ya que sólo sirve para presentar el texto en un página, definir su estilo y poco más. Al complicarse los sitios web, una de las primeras necesidades fue que las páginas respondiesen a algunas acciones del usuario, para desarrollar pequeñas funcionalidades más allá de los propios enlaces. El primer ayudante para cubrir las necesidades que estaban surgiendo fue Java, que es un lenguaje de propósito general, pero que había creado una manera de incrustar programas en páginas web. A través de la tecnología de los Applets, se podía crear pequeños programas que se ejecutaban en el navegador dentro de las propias páginas web, pero que tenían posibilidades similares a los programas de propósito general. La programación de Applets fue un gran avance y Netscape, por aquel entonces el navegador más popular, había roto la primera barrera del HTML al hacer posible la programación dentro de las páginas web. No cabe duda que la aparición de los Appletssupuso un gran avance en la historia del web, pero no ha sido una tecnología definitiva y muchas otras han seguido implementando el camino que comenzó con ellos.

debido a que estaban obligados a crear código que funcionase correctamente en diferentes plataformas y diferentes versiones de las mismas. EJERCICIOS ALUMNO (A): CALIFICACIÓN: SEM.UNIVERSIDAD POLITECNICA DE PACHUCA MATERIA: PROGRAMACION V UNIDAD IV : JAVA SCRIPT TEMA: INTRODUCCCION A JAVA SCRIPT . siguen habiendo muchas diferencias y para solucionarlo han surgido muchos productos como los FrameworksJavascript. después de hacer sus navegadores compatibles con los applets. para cada uno de los navegadores posibles del mercado. pues antes de lanzar la primera versión del producto se forjó una alianza con Sun Microsystems. Además. pero es que también el propio lenguaje fue evolucionando a medida que los navegadores presentaban sus distintas versiones y a medida que las páginas web se hacían más dinámicas y más exigentes las necesidades de funcionalidades.0. ni compilar los scripts. pero no duró mucho ese nombre. solamente útil dentro de las páginas web y mucho más fácil de utilizar. para desarrollar en conjunto ese nuevo lenguaje. A día de hoy.0 fue el primer navegador que entendía Javascript y su estela fue seguida por otros clientes web como Internet Explorer a partir de la versión 3. La alianza hizo que Javascript se diseñara como un hermano pequeño de Java. comenzó a desarrollar un lenguaje de programación al que llamó LiveScript que permitiese crear pequeños programas en las páginas y que fuese mucho más sencillo de utilizar que Java./GPO: ING. Nos referimos a relacionarlo con . como ocurría con los applets. algunas de las cuales perduran hasta el día de hoy. Diferencias entre distintos navegadores Como hemos dicho el Javascript de Netscape y el de Microsoft Internet Explorer tenía ligeras diferencias. Netscape 2. de modo que cualquier persona. creador de Java. Las diferencias de funcionamiento de Javascript han marcado las historia del lenguaje y el modo en el que los desarrolladores se relacionan con él. sin conocimientos de programación pudiese adentrase en el lenguaje y utilizarlo a sus anchas. Sin embargo. NUM. que ayudan a realizar funcionalidades avanzadas de DHTML sin tener que preocuparse en hacer versiones distintas de los scripts. ni realizarlos en ficheros externos al código HTML. Diferencias entre Java y Java Script Estamos contando diversos asuntos interesantes y curiosidades que sirven de introducción para el Manual de Javascript y queremos tratar una de las más típicas asociaciones que se se hacen al oir hablar de Javascript. para programar Javascript no es necesario un kit de desarrollo. la compañía Microsoft nombró a este lenguaje como JScript y tenía ligeras diferencias con respecto a Javascript. De modo que el primer Javascript se llamoLiveScript.MATRICULA FECHA: / / Llega Javascript Netscape.

Java es mucho más potente que Javascript. como la sintaxis del lenguaje o el nombre.MATRICULA FECHA: / / otro lenguaje de programación. Sin embargo. quiso aprovechar el conocimiento y la percepción que las personas tenían del popular lenguaje. podremos cambiar el tipo de información de una varible cuando queramos. para el que no lo sepa todavía) Javascript no es orientado a objetos. Se hizo entender que era un hermano pequeño y orientado específicamente para hacer cosas en las páginas web. Realmente Javascript se llamó así porque Netscape. pero también se hizo caer a muchas personas en el error de pensar que son lo mismo. Algunas diferencias entre estos dos lenguajes son las siguientes: Compilador. Javascript no es un lenguaje que necesite que sus programas se compilen. tal como se realiza en los lenguajes de programación estructurada como C o Pascal. con el que se pueden hacer aplicaciones de lo más variado. esto quiere decir que podremos programar sin necesidad de crear clases. salvo en sus orígenes. Con todo. que no tiene mucho que ver. NUM. Queremos que quede claro que Javascript no tiene nada que ver con Java. sino que éstos se interpretan por parte del navegador cuando éste lee la página. Además. llamado Java. Para programar en Java necesitamos un Kit de desarrollo y un compilador. Propósito./GPO: ING. que estaba aliado a los creadores de Java en la época. EJERCICIOS ALUMNO (A): CALIFICACIÓN: SEM. Java es un lenguaje de programación fuertemente tipado. Java es un lenguaje de programación orientado a objetos. Por su parte Javascript no tiene esta característica. . sin embargo. se creó un producto que tenía ciertas similitudes. Actualmente son productos totalmente distintos y no guardan entre si más relación que la sintaxis idéntica y poco más. Estructuras fuertes. esto es debido a que Java es un lenguaje de propósito general. con Javascript sólo podemos escribir programas para que se ejecuten en páginas web. y podemos meter en una variable la información que deseemos. Orientado a objetos.UNIVERSIDAD POLITECNICA DE PACHUCA MATERIA: PROGRAMACION V UNIDAD IV : JAVA SCRIPT TEMA: INTRODUCCCION A JAVA SCRIPT . (Más tarde veremos que quiere decir orientado a objetos. como se ha podido leer hace unas líneas. independientemente del tipo de ésta. esto quiere decir que al declarar una variable tendremos que indicar su tipo y no podrá cambiar de un tipo a otro automáticamente.

robusto y seguro.UNIVERSIDAD POLITECNICA DE PACHUCA MATERIA: PROGRAMACION V UNIDAD IV : JAVA SCRIPT TEMA: INTRODUCCCION A JAVA SCRIPT . aunque también más potente.MATRICULA FECHA: / / Otras características. Tiene más funcionalidades que Javascript y las diferencias que los separan son lo suficientemente importantes como para distinguirlos fácilmente. EJERCICIOS ALUMNO (A): CALIFICACIÓN: SEM. NUM./GPO: ING. Como vemos Java es mucho más complejo. .

etc. Ejemplos claros son las aplicaciones de ofimatica online.0 y la experiencia enriquecida de usuario. apertura de ventanas secundarias. DesarrolloWeb. podemos encontrar dentro de Internet muchas aplicaciones que basan parte de su funcionamiento en Javascript. pero veamos brevemente algunos usos de este lenguaje que podemos encontrar en el web para hacernos una idea de las posibilidades que tiene. webs tan populares como Facebook. como pueden ser navegadores dinámicos. como Google Docs.UNIVERSIDAD POLITECNICA DE PACHUCA MATERIA: PROGRAMACION V UNIDAD IV : JAVA SCRIPT TEMA: INTRODUCCCION A JAVA SCRIPT . pero en el diseño actual de este sitio web. se utiliza Javascript para realizar pequeñas funcionalidades que no es posible realizar con HTML sólo. pues estos típicos efectos tienen la complejidad justa para ser implementados en cuestión de minutos sin posibilidad de errores. que muestra diferentes enlaces dentro de cada opción principal. Actualmente casi todas las páginas un poco avanzadas utilizan Javascript.MATRICULA FECHA: / / ANTES DE EMPEZAR Quizás a día de hoy sobra decir para qué sirve Javascript. se muestra en la página un pequeño formulario que aparece como por arte de magia y luego se envía sin salirse de la propia página. Twitter o Youtube usan Javascript a raudales. En realidad se pueden ver ejemplos de Javascript dentro de cualquier página un poco compleja. calculadoras o convertidores de divisas. También cuando votamos por un vídeo en Youtube o cuando se cuentan los caracteres que llevamos escritos en los mini-post de Twitter. Es mucho más habitual encontrar Javascript para realizar efectos simples sobre páginas web. editores de texto enriquecido. Algunos que habremos visto en innumerables ocasiones son calendarios dinámicos para seleccionar fechas./GPO: ING. Por ejemplo. etc. que hacen que una página web se convierta en un verdadero programa interactivo de gestión de cualquier recurso. Office Online o Google Calendar. NUM. EJERCICIOS ALUMNO (A): CALIFICACIÓN: SEM.com utiliza Javascript para el menú superior. o no tan simples. Qué necesitas para trabajar con Javascript . Vamos cambiando la página cada cierto tiempo. pues se ha vuelto una de las insignias de lo que se denomina la Web 2. cuando en la red social apretamos un enlace para comentar algo. Sin embargo. Nos atrevemos a decir que este lenguaje es realmente útil para estos casos. Sin ir más lejos. elementos como el recuadro de "Login" también tienen su dinamismo con Javascript. navegadores dinámicos. Para ser más concretos. aparte de esos unos simples ejemplos. validación de formularios.

VERSIONES DE NAVEGADORES Y DE JAVA SCRIPT Con el tiempo también el HTML ha avanzado y se han creado nuevas características como las capas./GPO: ING. y de un navegador: Internet Explorer. nos permiten trabajar con varios documentos simultáneamente. Notepad++ o UltraEdit. un usuario de Windows dispone dentro de su instalación típica de sistema operativo. También será útil un conocimiento medio sobre CSS y quizás alguna experiencia previa sobre algún lenguaje de programación. que permiten tratar y maquetar los documentos de manera distinta. etc.UNIVERSIDAD POLITECNICA DE PACHUCA MATERIA: PROGRAMACION V UNIDAD IV : JAVA SCRIPT TEMA: INTRODUCCCION A JAVA SCRIPT . Nota: Usuarios que deseen herramientas más avanzadas pueden encontrar en Internet fácilmente programas similares en la sección de programas para desarrolladores. aunque en este manual de DesarrolloWeb. Por ejemplo. NUM. Lo más seguro es que si lees estas líneas ya sepas todo lo necesario para trabajar. Para resumir vamos a comentar las distintas versiones de Javascript: . sería bueno tener un dominio avanzado de HTML. No obstante. el Bloc de notas. Permitidme una recomendación con respecto al editor de textos.MATRICULA FECHA: / / Para programar en Javascript necesitamos básicamente lo mismo que para desarrollar páginas web con HTML. de un editor de textos. al menos el suficiente para escribir código en ese lenguaje sin tener que pensar qué es lo que estás haciendo. Javascript ha avanzado también y para manejar todas estas nuevas características se han creado nuevas instrucciones y recursos. Estos editores avanzados tienen algunas ventajas como que colorean los códigos de nuestros scripts. Entre otros queremos destacar KomodoEdit. puesto que ya habrás tenido alguna relación con el desarrollo de sitios web y habrás detectado que para hacer ciertas cosas te viene bien conocer un poco de Javascript. Se trata de que. Cualquier ordenador mínimamente actual posee de salida todo lo necesario para poder programar en Javascrip. tal vez sea muy útil contar con otros programas que nos ofrecen mejores prestaciones a la hora de escribir las líneas de código. EJERCICIOS ALUMNO (A): CALIFICACIÓN: SEM.com vamos a tratar de explicar Javascript incluso para personas que no hayan programado nunca. Conocimientos previos recomendables Lo cierto es que no hace falta tener mucha base de conocimientos para ponerse a programar en Javascript. tienen ayudas. Un editor de textos y un navegador compatible con Javascript. aunque el Bloc de Notas es suficiente para empezar.

se han de incluir unos delimitadores que separan las etiquetas HTML de las instrucciones Javascript.5 de JScript (así llaman al javascript utilizado por los navegadores de Microsoft).0. Por su parte. Esto quiere decir que debemos aprender a mezclar los dos lenguajes de programación y rápidamente veremos que.Javascript 1. en la mayoría de los casos. ya que ambos navegadores crecieron de distinto modo y estaban en plena lucha por el mercado. se presentarán o habrán presentado muchas otras versiones de Javascript.0. . . No obstante.Javascript 1. EL LENGUAJE JAVA SCRIPT Javascript se escribe en el documento HTML Lo más importante y básico que podemos destacar en este momento es que la programación de Javascript se realiza dentro del propio documento HTML. . todo lo que vamos a aprender en este manual. Todo el código Javascript que pongamos en la página ha de ser introducido entre estas dos etiquetas. Estos delimitadores son las etiquetas <SCRIPT> y </SCRIPT>. NUM.2: La versión de los navegadores 4.0 y soportaba gran cantidad de instrucciones y funciones. Es decir.MATRICULA FECHA: / / Javascript 1: nació con el Netscape 2. que implementa Netscape 6. En esta versión se han limado algunas diferencias y asperezas entre los dos navegadores. para que estos dos lenguajes puedan convivir sin problemas entre ellos. casi todas las que existen ahora ya se introdujeron en el primer estandar.5: Versión actual.UNIVERSIDAD POLITECNICA DE PACHUCA MATERIA: PROGRAMACION V UNIDAD IV : JAVA SCRIPT TEMA: INTRODUCCCION A JAVA SCRIPT . Esta tiene como desventaja que es un poco distinta en plataformas Microsoft y Netscape. se mezcla con el propio código HTML para generar la página. Implementaba poco más que su anterior versión. pues. ya está implementado en cualquier Javascript que existan en la actualidad. surgen nuevas necesidades para programación de elementos dinámicos. Es obvio que todavía.Javascript 1. . el código Javascript. Microsoft también ha evolucionado hasta presentar su versión 5. La colocación de los scripts sí que importa - ./GPO: ING. EJERCICIOS ALUMNO (A): CALIFICACIÓN: SEM.0.3: Versión que implementan los navegadores 5. incluso otros usos mucho más avanzados. como por ejemplo el tratamiento de imágenes dinámicamente y la creación de arrays. en el momento de escribir estas líneas. después de escribir estas líneas.Javascript 1. a medida que se van mejorando los navegadores y van saliendo versiones de HTML.1: Es la versión de Javascript que se diseñó con la llegada de los navegadores 3.

/GPO: ING. con lo que sabemos hasta el momento y los scripts que hemos realizado de prueba. En un principio. EJERCICIOS ALUMNO (A): CALIFICACIÓN: SEM. En cada caso. nos da un poco igual donde colocarlos. se informará de ello convenientemente. Estos atributos están relacionados con las acciones del usuario y se llaman manejadores de eventos. La colocación de estos scripts no es indiferente. . cada uno que podría introducirse dentro de unas etiquetas <SCRIPT> distintas. y llegado el momento. como el atributo onclick.MATRICULA FECHA: / / En una misma página podemos introducir varios scripts. También se puede escribir Javascript dentro de determinados atributos de la página.UNIVERSIDAD POLITECNICA DE PACHUCA MATERIA: PROGRAMACION V UNIDAD IV : JAVA SCRIPT TEMA: INTRODUCCCION A JAVA SCRIPT . NUM. pero en determinados casos esta colocación sí que será muy importante.

Las posibilidades son infinitas. NUM. para implementar banners o simplemente para cambiar el aspecto o diseño dinámicamente. lo que facilita añadir o eliminar imágenes. o del día de la semana. Además es posible configurar el número de imágenes aleatorias y el color de fondo sobre el que aparecen.UNIVERSIDAD POLITECNICA DE PACHUCA MATERIA: PROGRAMACION V UNIDAD IV : JAVA SCRIPT TEMA: INTRODUCCCION A JAVA SCRIPT . ¡Os animamos a intentarlo! Código Fuente Java Script entre <head></head> Código Fuente HTML entre <body></body> . EJERCICIOS ALUMNO (A): CALIFICACIÓN: SEM./GPO: ING.MATRICULA FECHA: / / ALGUNOS EJEMPLOS EN JAVA SCRIPT Banners Inserción de anuncios o banners en la página Banners aleatorios Una de las funcionalidades más habituales que requiere una página web es la posibilidad de mostrar imágenes diferentes en cada recarga. Con este ejemplo se consigue crear este efecto.. Las etiquetas <img . de forma aleatoria.> que definen las imágenes se almacenan en variables de tipo cadena. etc. y con ligeros retoques se puede conseguir que se carguen imágenes diferentes en función de la hora del día. de forma sencilla y con muy pocas líneas de código..

UNIVERSIDAD POLITECNICA DE PACHUCA MATERIA: PROGRAMACION V UNIDAD IV : JAVA SCRIPT TEMA: INTRODUCCCION A JAVA SCRIPT . Todo esto configurable en una serie de variables iniciales. Ocares nos presenta este ejemplo que permite incluir la correspondiente URL. y el típico texto inferior que suele acompañar a la imagen del banner. de modo que sea muy sencillo adaptarlo a las necesidades de cada página. Daniel D. NUM. Con estas mejoras este ejemplo puede ya utilizarse plenamente para mostrar banners de forma aleatoria./GPO: ING. Código Fuente Java Script entre <head></head> . así como el texto que se muestra cuando se pasa el puntero del ratón sobre la imagen.MATRICULA FECHA: / / Resultado: Banners aleatorios mejorados Partiendo de nuestro sencillo script de banners. EJERCICIOS ALUMNO (A): CALIFICACIÓN: SEM.

Textos vistosos .UNIVERSIDAD POLITECNICA DE PACHUCA MATERIA: PROGRAMACION V UNIDAD IV : JAVA SCRIPT TEMA: INTRODUCCCION A JAVA SCRIPT .MATRICULA FECHA: / / Código Fuente HTML entre <body></body> Resultado: Efectos sobre textos Trucos para aplicar efectos a mensajes de texto./GPO: ING. EJERCICIOS ALUMNO (A): CALIFICACIÓN: SEM. como cambios de color o de tamaño y desplazamientos. NUM.

UNIVERSIDAD POLITECNICA DE PACHUCA MATERIA: PROGRAMACION V UNIDAD IV : JAVA SCRIPT TEMA: INTRODUCCCION A JAVA SCRIPT . donde se consignan los valores que se desea vayan tomando estos parámetros./GPO: ING. tipografía y tamaño diferente. NUM. La posibilidad de seleccionar los valores de los 3 arrays de forma independiente crea infinitas posibilidades para combinar colores. Código Fuente Java Script entre <head></head> Código Fuente HTML entre <body></body> Resultado: .MATRICULA FECHA: / / Con este ejemplo podrás visualizar los textos de tu página web con vistosos efectos de colores. EJERCICIOS ALUMNO (A): CALIFICACIÓN: SEM. Este script asigna a cada letra de un texto un color. tipografías y tamaños de letra. Con ello se pueden crear efectos como el de los ejemplos de la izquierda. tipografías y tamaños de letra. en función de 3 arrays específicos. Si se desea fijar cualquiera de los tres parámetros. basta con asignar un sólo valor al array correspondiente.

Para conseguir este efecto. Código Fuente Java Script entre <head></head> Código Fuente HTML entre <body></body> . EJERCICIOS ALUMNO (A): CALIFICACIÓN: SEM.UNIVERSIDAD POLITECNICA DE PACHUCA MATERIA: PROGRAMACION V UNIDAD IV : JAVA SCRIPT TEMA: INTRODUCCCION A JAVA SCRIPT . NUM. basta con reescribir la cadena eliminado cada vez el primer carácter.MATRICULA FECHA: / / Scrolling de un texto El código JavaScript para realizar desplazamientos horizontales de texto puede ser tan simple como el de este ejemplo./GPO: ING. El texto se desplaza horizontalmente hacia la derecha en el cuadro de texto.

Código Fuente Java Script entre <head></head> Código Fuente HTML entre <body></body> Resultado: Seguridad Control de acceso y protección de los elementos de una página.MATRICULA FECHA: / / Resultado: Frase aleatoria Este sencillo ejemplo permite mostrar al usuario una frase elegida de forma aleatoria de una lista de frases preconfigurada. Este número aleatorio se usa como índice delarray que contiene las frases. EJERCICIOS ALUMNO (A): CALIFICACIÓN: SEM./GPO: ING.UNIVERSIDAD POLITECNICA DE PACHUCA MATERIA: PROGRAMACION V UNIDAD IV : JAVA SCRIPT TEMA: INTRODUCCCION A JAVA SCRIPT . Control de acceso a una página . NUM. Para ello. se utiliza el método random() del objeto Math para obtener un número aleatorio. El script es sencillo y nos sugiere una forma original de añadir dinamismo a una página web.

La dificultad está en evitar que aparezca el típico File notfound cuando se introduzca una palabra de paso errónea. se puede utilizar este script para solicitar al usuario la introducción de una palabra de paso o password antes de mostrarle una página. De este modo.El truco se basa en que no es posible acceder a una página que no está enlazada desde ningún otro sitio. el nombre de la página (o parte de él) puede utilizarse como el password. se muestra un mensaje de password no válido. la imagen debe existir). NUM. La solución pasa por utilizar los eventos onLoad y onError del tag de una imagen que tenga exactamente el mismo nombre que el fichero a proteger. En este ejemplo.UNIVERSIDAD POLITECNICA DE PACHUCA MATERIA: PROGRAMACION V UNIDAD IV : JAVA SCRIPT TEMA: INTRODUCCCION A JAVA SCRIPT .html. el password es correcto y se muestra la página con éxito.MATRICULA FECHA: / / Aunque no es la mejor forma de implementar un control de acceso. Código Fuente Java Script entre <head></head> | Código Fuente HTML entre <body></body> Resultado: . la password es abc123 y la página protegida se llama abc123. El usuario no tendrá consciencia del truco y no percibirá la existencia de la imagen si esta es de tamaño 1 x 1 pixels (pero cuidado. Si la imagen no se carga. EJERCICIOS ALUMNO (A): CALIFICACIÓN: SEM. Si se carga. a menos que se conozca su nombre./GPO: ING.

UNIVERSIDAD POLITECNICA DE PACHUCA MATERIA: PROGRAMACION V UNIDAD IV : JAVA SCRIPT TEMA: INTRODUCCCION A JAVA SCRIPT . con el típico mensaje ¡Bienvenido a mi página Web! (o cualquier otro similar).MATRICULA FECHA: / / Ventanas de alerta y de confirmación Ejemplos sencillos de utilización de ventanas de alerta./GPO: ING. Mensaje automático Para los que deseen abrir un cuadro de diálogo cuando el visitante entre en su página. El funcionamiento se basa en la función setTimeout(). presentamos un ejemplo sencillo de cómo hacerlo con JavaScript. NUM. Este ejemplo espera unos segundos antes de mostrar el cuadro de diálogo. EJERCICIOS ALUMNO (A): CALIFICACIÓN: SEM. El tiempo de espera se puede modificar fácilmente. que permite establecer la ejecución de una función JavaScript cuando pase cierto periodo de tiempo. confirmación y solicitud de información. Código Fuente Java Script entre <head></head> Resultado: . cambiando el valor del variable lapso.

UNIVERSIDAD POLITECNICA DE PACHUCA MATERIA: PROGRAMACION V UNIDAD IV : JAVA SCRIPT TEMA: INTRODUCCCION A JAVA SCRIPT . y si el usuario pulsa sobre "Cancelar" (no desea continuar)./GPO: ING. se hace un history. Este método muestra un cuadro de confirmación con los botones de "Aceptar" y "Cancelar". . Una aplicación práctica es ésta: se presenta un cuadro de confirmación antes de cargar la página. porque resulta muy útil en determinados casos. y devuelve verdadero (true) o falso (false) en función del botón que pulse el usuairo. y desde entonces ha sido implementada en la mayoría de los navegadores. NUM. Es útil para páginas con contenidos restringidos a adultos o que pueden herir la sensibilidad.go(-1) para volver a la página anterior.MATRICULA FECHA: / / Confirmación antes de entrar a una página Este sencillo script ilustra el uso del método confirm() del objeto window. EJERCICIOS ALUMNO (A): CALIFICACIÓN: SEM. Código Fuente Java Script entre <head></head> Resultado: Formularios y Cuestionarios Envío de formularios con desactivación del submit Deshabilitar campos de un formulario no forma parte del estándar del DOM publicado por el W3C. Esta facilidad fue introducida por Microsoft en el Internet Explorer 4.

al pulsar el botón de envio repetidas veces. para que los navegadores que no soportan deshabilitar campos de formulario dispongan también de un mecanismo de prevención del reenvío de los datos. una vez enviado el formulario. lo cual puede ser útil para evitar enviar información redundante.MATRICULA FECHA: / / Uno de los ejemplos de utilización es el bloqueo del botón Submit de envío de un formulario. . la información de los campos deshabilitados no se envía al servidor al hacer el Submit. NUM. Como curiosidad. EJERCICIOS ALUMNO (A): CALIFICACIÓN: SEM./GPO: ING. para evitar que el usuario envíe los datos del formulario múltiples veces al servidor por error. El script de este ejemplo deshabilita el botón Submit asignando a la propiedad disabled del objeto del botón de envío el valor true. Además. reasigna la función de envío a una función vacía. La función vacía no hace nada. su pulsación no tiene efecto.UNIVERSIDAD POLITECNICA DE PACHUCA MATERIA: PROGRAMACION V UNIDAD IV : JAVA SCRIPT TEMA: INTRODUCCCION A JAVA SCRIPT . Código Fuente Java Script entre <head></head> Código Fuente HTML entre <body></body> Flujo de navegación Cómo alterar el flujo de navegación para redirigir a otra página o refrescar el contenido automáticamente. de modo que aunque el botonSubmit esté activo.

podemos usar este sencillo script. EJERCICIOS ALUMNO (A): CALIFICACIÓN: SEM. La página se recargará de forma automática cada 10 segundos./GPO: ING. La recarga automática de la página puede ser de utilidad en páginas que muestran información que cambia constantemente (por ejemplo. que contiene la página desde la cual se ha llegado a la página actual (y que. Se basa en comprobar el valor del document.referrer actual es: . Existen formas alternativas de conseguir este efecto. por tanto. NUM. la más simple mediante éste código HTML en la cabecera de la página: <meta http-equiv="refresh" content="10"> Código Fuente Java Script entre <head></head> Código Fuente HTML entre <body></body> Resultado: Forzar la página de procedencia Si deseamos que cierta página sólo sea visitada cuando se procede de otra (por ejemplo. enlaza con ella). para presentaciones o formularios de evaluaciones). siendo este periodo configurable.MATRICULA FECHA: / / Página que se auto recarga (refresh) El ejemplo que presentamos implementa con JavaScript un refresh o refresco automático de la página cada 10 segundos.UNIVERSIDAD POLITECNICA DE PACHUCA MATERIA: PROGRAMACION V UNIDAD IV : JAVA SCRIPT TEMA: INTRODUCCCION A JAVA SCRIPT . índices de bolsa). Por ejemplo. modificando el valor de la variable lapso.referrer. el document.

Cálculos numéricos Cálculos numéricos (sumas.cgi?tabla=scripts&campo=5&clave=1x35 El cuadro anterior aparecerá vacío cuando se haya tecleado la URL de la página directamente en la barra de direcciones del naveagdor. Para implementar la calculadora. hay que tener en cuenta que el usuario siempre podrá deshabilitar JavaScript en su navegador para saltarse esta limitación. uniendo los operandos con el operador. y funciona como la mayoría de las calculadoras básicas. document. restas. pero en cualquier caso siempre puede ser útil para guiar la navegación por el site. multiplicaciones) y ejemplos de aplicación (calculadoras.net/cgi-bin/DBread.referrer no toma ningún valor. divisiones./GPO: ING. EJERCICIOS ALUMNO (A): CALIFICACIÓN: SEM. se construye una cadena con la operación a realizar.UNIVERSIDAD POLITECNICA DE PACHUCA MATERIA: PROGRAMACION V UNIDAD IV : JAVA SCRIPT TEMA: INTRODUCCCION A JAVA SCRIPT . El script se basa en la función eval(). conversores). que interpreta como código JavaScript la cadena que se le pasa como argumento. Código Fuente Java Script entre <head></head> . multiplica y divide. Código Fuente Java Script entre <head></head> Resultado: Y enseguida aparecerá la página a la que re-direccionaste en el script. resta. tiene memoria. NUM. Calculadora Simple Esta sencilla calculadora suma. soporta números decimales y exponenciales. y se pasa después esta cadena a la función eval().MATRICULA FECHA: / / http://www.amiguito. A la hora de utilizar scripts como el de este ejemplo. En ese caso.

UNIVERSIDAD POLITECNICA DE PACHUCA MATERIA: PROGRAMACION V UNIDAD IV : JAVA SCRIPT TEMA: INTRODUCCCION A JAVA SCRIPT ./GPO: ING. NUM. EJERCICIOS ALUMNO (A): CALIFICACIÓN: SEM.MATRICULA FECHA: / / .

EJERCICIOS ALUMNO (A): CALIFICACIÓN: SEM./GPO: ING. NUM.MATRICULA FECHA: / / Código Fuente HTML entre <body></body> Resultado: .UNIVERSIDAD POLITECNICA DE PACHUCA MATERIA: PROGRAMACION V UNIDAD IV : JAVA SCRIPT TEMA: INTRODUCCCION A JAVA SCRIPT .

You're Reading a Free Preview

Download
scribd
/*********** DO NOT ALTER ANYTHING BELOW THIS LINE ! ************/ var s_code=s.t();if(s_code)document.write(s_code)//-->