Java Script

download Java Script

of 23

Transcript of Java Script

  • 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: