java script
TRANSCRIPT
-
7/16/2019 Java Script
1/23
UNIVERSIDAD POLITECNICA DE PACHUCA CALIFICACIN:
MATERIA: PROGRAMACION V SEM./GPO:
UNIDAD IV : JAVA SCRIP ING.
TEMA: INTRODUCCCION A JAVA SCRIPT , EJERCICIO NUM.MATRICULA
ALUMNO (A): 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
-
7/16/2019 Java Script
2/23
UNIVERSIDAD POLITECNICA DE PACHUCA CALIFICACIN:
MATERIA: PROGRAMACION V SEM./GPO:
UNIDAD IV : JAVA SCRIP ING.
TEMA: INTRODUCCCION A JAVA SCRIPT , EJERCICIO NUM.MATRICULA
ALUMNO (A): 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 parapresentar 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 yNetscape, 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.
-
7/16/2019 Java Script
3/23
UNIVERSIDAD POLITECNICA DE PACHUCA CALIFICACIN:
MATERIA: PROGRAMACION V SEM./GPO:
UNIDAD IV : JAVA SCRIP ING.
TEMA: INTRODUCCCION A JAVA SCRIPT , EJERCICIO NUM.MATRICULA
ALUMNO (A): 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 medidaque 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
-
7/16/2019 Java Script
4/23
UNIVERSIDAD POLITECNICA DE PACHUCA CALIFICACIN:
MATERIA: PROGRAMACION V SEM./GPO:
UNIDAD IV : JAVA SCRIP ING.
TEMA: INTRODUCCCION A JAVA SCRIPT , EJERCICIO NUM.MATRICULA
ALUMNO (A): 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, ypodemos 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.
-
7/16/2019 Java Script
5/23
UNIVERSIDAD POLITECNICA DE PACHUCA CALIFICACIN:
MATERIA: PROGRAMACION V SEM./GPO:
UNIDAD IV : JAVA SCRIP ING.
TEMA: INTRODUCCCION A JAVA SCRIPT , EJERCICIO NUM.MATRICULA
ALUMNO (A): 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.
-
7/16/2019 Java Script
6/23
UNIVERSIDAD POLITECNICA DE PACHUCA CALIFICACIN:
MATERIA: PROGRAMACION V SEM./GPO:
UNIDAD IV : JAVA SCRIP ING.
TEMA: INTRODUCCCION A JAVA SCRIPT , EJERCICIO NUM.MATRICULA
ALUMNO (A): 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 unapgina 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
-
7/16/2019 Java Script
7/23
UNIVERSIDAD POLITECNICA DE PACHUCA CALIFICACIN:
MATERIA: PROGRAMACION V SEM./GPO:
UNIDAD IV : JAVA SCRIP ING.
TEMA: INTRODUCCCION A JAVA SCRIPT , EJERCICIO NUM.MATRICULA
ALUMNO (A): 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:
-
7/16/2019 Java Script
8/23
UNIVERSIDAD POLITECNICA DE PACHUCA CALIFICACIN:
MATERIA: PROGRAMACION V SEM./GPO:
UNIDAD IV : JAVA SCRIP ING.
TEMA: INTRODUCCCION A JAVA SCRIPT , EJERCICIO NUM.MATRICULA
ALUMNO (A): FECHA: / /
- Javascript 1: naci con el Netscape 2.0 y soportaba gran cantidad de instruccionesy 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 losnavegadores 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 quees 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 sehan limado algunas diferencias y asperezas entre los dos navegadores.
- Javascript 1.5: Versin actual, en el momento de escribir estas lneas, queimplementa 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 problemasentre ellos, se han de incluir unos delimitadores que separan las etiquetas HTML de las
instrucciones Javascript. Estos delimitadores son las etiquetas y . 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
-
7/16/2019 Java Script
9/23
UNIVERSIDAD POLITECNICA DE PACHUCA CALIFICACIN:
MATERIA: PROGRAMACION V SEM./GPO:
UNIDAD IV : JAVA SCRIP ING.
TEMA: INTRODUCCCION A JAVA SCRIPT , EJERCICIO NUM.MATRICULA
ALUMNO (A): FECHA: / /
En una misma pgina podemos introducir varios scripts, cada uno que podra introducirse
dentro de unas etiquetas 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.
-
7/16/2019 Java Script
10/23
UNIVERSIDAD POLITECNICA DE PACHUCA CALIFICACIN:
MATERIA: PROGRAMACION V SEM./GPO:
UNIDAD IV : JAVA SCRIP ING.
TEMA: INTRODUCCCION A JAVA SCRIPT , EJERCICIO NUM.MATRICULA
ALUMNO (A): 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 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
Cdigo Fuente HTML entre
-
7/16/2019 Java Script
11/23
UNIVERSIDAD POLITECNICA DE PACHUCA CALIFICACIN:
MATERIA: PROGRAMACION V SEM./GPO:
UNIDAD IV : JAVA SCRIP ING.
TEMA: INTRODUCCCION A JAVA SCRIPT , EJERCICIO NUM.MATRICULA
ALUMNO (A): 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
-
7/16/2019 Java Script
12/23
UNIVERSIDAD POLITECNICA DE PACHUCA CALIFICACIN:
MATERIA: PROGRAMACION V SEM./GPO:
UNIDAD IV : JAVA SCRIP ING.
TEMA: INTRODUCCCION A JAVA SCRIPT , EJERCICIO NUM.MATRICULA
ALUMNO (A): FECHA: / /
Cdigo Fuente HTML entre
Resultado:
Efectos sobre text os
Trucos para aplicar efectos a mensajes de texto, como cambios de color o de
tamao y desplazamientos.
Textos vistosos
-
7/16/2019 Java Script
13/23
UNIVERSIDAD POLITECNICA DE PACHUCA CALIFICACIN:
MATERIA: PROGRAMACION V SEM./GPO:
UNIDAD IV : JAVA SCRIP ING.
TEMA: INTRODUCCCION A JAVA SCRIPT , EJERCICIO NUM.MATRICULA
ALUMNO (A): 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 deseavayan 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
Cdigo Fuente HTML entre
Resultado:
-
7/16/2019 Java Script
14/23
UNIVERSIDAD POLITECNICA DE PACHUCA CALIFICACIN:
MATERIA: PROGRAMACION V SEM./GPO:
UNIDAD IV : JAVA SCRIP ING.
TEMA: INTRODUCCCION A JAVA SCRIPT , EJERCICIO NUM.MATRICULA
ALUMNO (A): FECHA: / /
Scrolling de un t exto
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
Cdigo Fuente HTML entre
-
7/16/2019 Java Script
15/23
UNIVERSIDAD POLITECNICA DE PACHUCA CALIFICACIN:
MATERIA: PROGRAMACION V SEM./GPO:
UNIDAD IV : JAVA SCRIP ING.
TEMA: INTRODUCCCION A JAVA SCRIPT , EJERCICIO NUM.MATRICULA
ALUMNO (A): 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
Cdigo Fuente HTML entre
Resultado:
Seguridad
Control de acceso y proteccin de los elementos de una pgina.
Cont rol de acceso a una pgina
-
7/16/2019 Java Script
16/23
UNIVERSIDAD POLITECNICA DE PACHUCA CALIFICACIN:
MATERIA: PROGRAMACION V SEM./GPO:
UNIDAD IV : JAVA SCRIP ING.
TEMA: INTRODUCCCION A JAVA SCRIPT , EJERCICIO NUM.MATRICULA
ALUMNO (A): 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 desdeningn 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
|
Cdigo Fuente HTML entre
Resultado:
-
7/16/2019 Java Script
17/23
UNIVERSIDAD POLITECNICA DE PACHUCA CALIFICACIN:
MATERIA: PROGRAMACION V SEM./GPO:
UNIDAD IV : JAVA SCRIP ING.
TEMA: INTRODUCCCION A JAVA SCRIPT , EJERCICIO NUM.MATRICULA
ALUMNO (A): FECHA: / /
Ventanas de alerta y de confi rmacin
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
Resultado:
-
7/16/2019 Java Script
18/23
UNIVERSIDAD POLITECNICA DE PACHUCA CALIFICACIN:
MATERIA: PROGRAMACION V SEM./GPO:
UNIDAD IV : JAVA SCRIP ING.
TEMA: INTRODUCCCION A JAVA SCRIPT , EJERCICIO NUM.MATRICULA
ALUMNO (A): 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
Resultado:
Formular ios y Cuest ionarios
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.
-
7/16/2019 Java Script
19/23
UNIVERSIDAD POLITECNICA DE PACHUCA CALIFICACIN:
MATERIA: PROGRAMACION V SEM./GPO:
UNIDAD IV : JAVA SCRIP ING.
TEMA: INTRODUCCCION A JAVA SCRIPT , EJERCICIO NUM.MATRICULA
ALUMNO (A): 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 Cdigo Fuente HTML entre
Flujo de navegacin
Cmo alterar el flujo de navegacin para redirigir a otra pgina o refrescar el contenido
automticamente.
-
7/16/2019 Java Script
20/23
UNIVERSIDAD POLITECNICA DE PACHUCA CALIFICACIN:
MATERIA: PROGRAMACION V SEM./GPO:
UNIDAD IV : JAVA SCRIP ING.
TEMA: INTRODUCCCION A JAVA SCRIPT , EJERCICIO NUM.MATRICULA
ALUMNO (A): 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:
Cdigo Fuente Java Script entre
Cdigo Fuente HTML entre
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:
-
7/16/2019 Java Script
21/23
UNIVERSIDAD POLITECNICA DE PACHUCA CALIFICACIN:
MATERIA: PROGRAMACION V SEM./GPO:
UNIDAD IV : JAVA SCRIP ING.
TEMA: INTRODUCCCION A JAVA SCRIPT , EJERCICIO NUM.MATRICULA
ALUMNO (A): 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
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 nmerosdecimales 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
-
7/16/2019 Java Script
22/23
UNIVERSIDAD POLITECNICA DE PACHUCA CALIFICACIN:
MATERIA: PROGRAMACION V SEM./GPO:
UNIDAD IV : JAVA SCRIP ING.
TEMA: INTRODUCCCION A JAVA SCRIPT , EJERCICIO NUM.MATRICULA
ALUMNO (A): FECHA: / /
-
7/16/2019 Java Script
23/23
UNIVERSIDAD POLITECNICA DE PACHUCA CALIFICACIN:
MATERIA: PROGRAMACION V SEM./GPO:
UNIDAD IV : JAVA SCRIP ING.
TEMA: INTRODUCCCION A JAVA SCRIPT , EJERCICIO NUM.MATRICULA
ALUMNO (A): FECHA: / /
Cdigo Fuente HTML entre Resultado: