Documentos de Académico
Documentos de Profesional
Documentos de Cultura
LENGUAJE JAVASCRIPT
JavaScript es un lenguaje de alto nivel, basado en objetos, diseado para permitir a los programadores Web la generacin de documentos Web interactivos de un modo sencillo. El vocabulario de JavaScript, relativamente pequeo, es fcil de comprender y nos da un amplio nmero de posibilidades, antes no disponibles. JavaScript nos proporciona un conjunto de herramientas compactas propias que realzan las interacciones entre los usuarios y las pginas HTML. Estas herramientas nos permiten responder a las pulsaciones del ratn, a las entradas de los formularios, a la navegacin de la pgina y a otros eventos. Una de las caractersticas principales de JavaScript es su capacidad para capturar un nmero limitado de acciones del usuario, conocidas por la mayora de los programadores como eventos. JavaScript se inserta dentro de los documentos HTML por medio de las etiquetas de comienzo y final de script. El navegador comienza buscando la primera etiqueta de script: <SCRIPT LANGUAGE=JavaScript> y continua leyendo todo lo que encuentra hasta llegar a la etiqueta de finalizacin del script: </SCRIPT> Por ejemplo El siguiente inserta JavaScript en la seccin BODY
CARACTERES ESPECIALES
Cuando se escriben scripts, a veces es necesario decirle al ordenador que utilice caracteres especiales o teclas, tales como la tabulacin o retorno de carro. Para hacer esto se utiliza la siguiente tabla: Cdigo de escape \b \f \n \r \t \\ \ \ Significado Espacio hacia atrs Alimentacin de lnea Nueva lnea Retorno de carro Tabulacin Backslash Comilla simple Comilla doble
Hay que tener presente que en algunos navegadores no funcionara algunos de ellos, por ejemplo si queremos hacer salto de lnea podemos utilizar cdigo HTML eso lo reconoce, ver en la imagen la etiqueta <br>.
ESTRUCTURA DE CONTROL Las estructuras de control nos permiten modificar el flujo de ejecucin bsico de los scripts. if if(condicin){ sentencias; } if...else if(condicin){ sentencias; }else{ sentencias; } Docente: Salinas Encinas Aldo http://webprofesional.blogspot.com correo: salinas282003@hotmail.com Pgina 2
DHTML [FUNDAMENTOS DEL LENGUAJE JAVASCRIPT] BUCLES La utilizacin de los bucles dentro de un script sirve para mejorar la programacin. for for(valor inicial; condicin; incremento[decremento]){ sentencias; } while while(condicin){ sentencias; } do..while do{ sentencias; }while(condicin)
DHTML [FUNDAMENTOS DEL LENGUAJE JAVASCRIPT] 2. Confirm: Muestra un cuadro de dialogo, para que el usuario pueda confirmar o cancelar una accin de proceso. Por ejemplo
El resultado ser el siguiente teniendo presente que despus de elegir alguna de las dos opciones (OK) o (CANCELAR) se ejecutara la condicional.
Si el botn es Aceptar, se mostrara la ventana de la izquierda, caso contrario se mostrara la ventana de la derecha.
3. Prompt: Muestra un cuadro de dialogo, para que el usuario pueda ingresar un dato. Se puede especificar un valor por defecto. prompt(MensajeDePrompt[,valor predeterminado]);
VARIABLES EN JAVASCRIPT Las variables en JavaScript pueden almacenar cualquier tipo de datos (cadenas o valores). Se considera un lenguaje de programacin de tipos libres, la declaracin de una variable se hace con la sentencia var. Var NombreDeVariable [=valor/expresion]; Por ejemplo
Otro ejemplo Para este presente ejemplo vamos a utilizar concatenacin de cadenas, es decir, sumar cadenas Cadena=cadena1+cadena2++cadenaN; Ahora si concatenamos una cadena con un nmero por ejemplo predomina el de mayor jerarqua es decir la cadena.
El resultado ser:
Tenga presente que a pesar que nuestra variable i toma valores desde 1 hasta 10 pero la etiqueta <h1> toma valores solo hasta <h6>
DHTML [FUNDAMENTOS DEL LENGUAJE JAVASCRIPT] OPERADORES La idea general para escribir un script es introducir, evaluar, manipular y mostrar informacin. Para crear programas tiles necesitamos evaluar, incluso cambiar la informacin con la que trabajan los scripts.
Operador
Precedencia Asignacin = += -= *= /= %= <<= >>= >>>= &= ^= |= Condicional ?: o lgica || y lgica && o nivel bit | xor nivel bit ^ y nivel bit & Igualdad = |= Comparacin < <= > >= Desplazamiento << >> >>> Suma/Resta + Multiplicacin/ * /
Divisin Negacin/ Incremento
! ~ - ++ --
Por ejemplo Vamos a crear una tabla de multiplicar, para ello ingresaremos un nmero por teclado el que ser ledo por la ventana prompt, veamos el ejemplo
ARRAYS
Un arreglo es una matriz ya sea unidimensional o multidimensional visto de manera matemtica, sin embargo en un lenguaje coloquial seria un conjunto de elementos el cual tiene un orden, ya sea mediante filas o columnas, veamos los diferentes tipos de crear una matriz:
1.- Arreglo esttico, es un conjunto de dos o ms expresiones (nmeros, cadenas, objetos, etc) encerradas entre corchetes, con una cantidad ya definida. nombreArray=[dato1,dato2,..,datoN]; o tambin se puede realizar de la siguiente manera: nombreArray=new Array[5]; nombreArray[0]=dato1; nombreArray[1]=dato2; .. nombreArray[4]=dato5; Por ejemplo
2.- Arreglo dinmico, es un conjunto de dos o ms expresiones (nmeros, cadenas, objetos, etc) encerradas entre corchetes, la cantidad se define segn vallamos ingresando los datos. nombreArray=new Array( ); esto deja libre al arreglo a almacenar la cantidad de datos libremente. Por ejemplo
Veamos el resultado del cdigo anterior, primero se irn mostrndose las ventanas para ingresar los valores del arreglo.
Al final del proceso nos mostrara el resultado, como se muestra en la siguiente ventana
CADENAS
Algo que se utiliza a menudo son las cadenas, son importantes ya que con ellas podemos concatenar (como ya hemos visto) pero no es lo nico que podemos hacer, veamos: 1.- length, define la longitud del texto 2.- indexOf, indica la posicin de una frase a partir de una posicin dada, sino lo encuentra resulta ser -1. 3.- substring, extrae parte del texto desde una posicin inicial hasta una posicin final. 4.- charAt, extrae un carcter de un texto en una posicin indicada. 5.- toUpperCase, muestra al texto en mayscula. 6.- toLowerCase, muestra al texto en minscula.
DHTML [FUNDAMENTOS DEL LENGUAJE JAVASCRIPT] 1.- Por ejemplo en nuestros ejemplos anteriores lo hemos definido nuestro script en el <body>, esto indica que se ejecutara cuando el navegador lea nuestro script al pasar por esa seccin de lnea, pero solo ocurrir una vez, ya que el <body> se lee una sola vez.
2.- Pero tambin podemos definirlo al final, que ocurra cuando haya acabado de leer todo el documento.
3.- Ahora podemos definirlo dentro de la cabecera <head>, esto se utiliza cuando queremos que se ejecute algo antes de llegar al <body>.
En esta ltima parte hemos utilizado el script en la cabecera, debemos decir que todava se puede escribir cdigo javascript pero fuera de nuestra pgina HTML, para ello debemos enlazar mediante una lnea de cdigo que se muestra a continuacin:
Mostrndose la siguiente ventana para escribir nuestro cdigo javascript Docente: Salinas Encinas Aldo http://webprofesional.blogspot.com correo: salinas282003@hotmail.com Pgina 13
Observe que ya se ha hecho una copia en nuestra pgina HTML, es decir, ya estamos listos para usar el cdigo javascript, y si deseamos modificarlo solamente habr que hacer clic donde dice cdigo.as (ver imagen)
FUNCIONES
Algo que se utiliza a menudo en JavaScript son las funciones para realizar un llamado un nmero ilimitado de veces durante su ejecucin en el script para que realice la ejecucin de una determinada tarea. Una funcin es simplemente una seccin de cdigo a la que se le ha asignado un nombre. function nombreFuncion([argumento1],[argumento2],...,[argumentoN]){ sentencias; } Por ejemplo
EJERCICIOS
1) Vamos a desarrollar un ejercicio el cual muestre el mayor de 3 nmeros.
2) Vamos a desarrollar un ejercicio el cual muestre una imagen que se mueve cada vez que se mueve el mouse del a lo largo de la pantalla para ello utilizaremos el evento onmousemove
Pero este cdigo solo es ejecutable en Internet Explorer, pero buscamos que siempre funcione en todos los navegadores, por eso aqu le participo de un cdigo que encontr en la Web, espero les guste:
Veamos el resultado en dos navegadores como Internet Explorer, Google Chrome, tambin funciona en Mozilla Firefox, Opera, etc.
3) Vamos a crear un efecto para un texto, utilizaremos el evento onload. Dicho efecto lo podemos encontrar en muchos libros, all hay un problema que solo funciona en Internet Explorer
4) Aqu se escribe algunos scripts de mucha utilidad en su pgina Web Colocar este script dentro de la etiqueta <head>y agregarle un botn en <body> con el nombre button
DHTML [FUNDAMENTOS DEL LENGUAJE JAVASCRIPT] Colocar este script dentro de la etiqueta <body>
1.2 Mtodos del objeto window Muestra el mensaje en una caja de dialogo Elimina el foco del objeto window actual Cancela el intervalo especificado por nombre Cierra el objeto window actual Muestra el mensaje en una caja de dialogo Evala la cadena como una sentencia, en referencia al objeto window Captura el foco sobre el objeto window actual focus() Mueve el objeto window actual al nmero de pxeles moveBy(x,y) especificados por x,y Mueve el objeto window actual a la coordenada (x,y) moveTo(x,y) Ajusta el tamao del objeto window actual resizeBy(x,y) moviendo su esquina inferior derecha el nmero de pxeles x,y Ajusta el tamao del objeto window actual resizeTo(ancho,alto) Desplaza el objeto actual a las coordenadas (x, y) scroll(x,y) Desplaza el objeto actual el nmero de pxeles x,y scrollBy(x,y) Desplaza el objeto actual a las coordenadas (x,y) scrollTo(x,y) Muestra un mensaje en una caja de dialogo el cual prompt(mensaje,respuesta) permite introducir informacin mediante una caja de texto. Evala la expresin especificada despus de que setTimeout(expresin,tiempo) haya pasado el nmero en milisegundos (tiempo) Devuelve una cadena que representa al objeto toString() window Convierte el objeto a su tipo primitivo (number, valueOf() boolean, string, o function) open(url,nombre,caracterstica) Abre la url especificada en la ventana llamada nombre. Si no existe tal ventana, la url se abrir en una nueva ventana con las caractersticas especificadas: alert(mensaje) blur() clearTimeout(nombre) close() confirm(mensaje) eval() Docente: Salinas Encinas Aldo http://webprofesional.blogspot.com correo: salinas282003@hotmail.com Pgina 20
Toolbar=[yes,no,,1,0]:Indica si la nueva ventana deber tener barra de herramientas o no location=[yes,no,1,0]:Indica si la nueva ventana deber tener campo de localizacin o no directories=[yes,no,1,0]:Indica si la nueva ventana deber tener botones de direccin o no status=[yes,no,1,0]:Indica si la nueva ventana deber tener barra de estado o no. scrollbar=[yes,no,1,0]:Indica si la nueva ventana deber tener barra de desplazamiento o no menubar=[yes,no,1,0]:Indica si la nueva ventana deber tener barra de mens o no resizable=[yes,no,1,0]:Indica si la nueva ventana podr cambiar de tamao o no width=pxeles:Indica el ancho de la ventana cliente height=pxeles:Indica el alto de la ventana cliente outerWidth=pxeles:Indica el ancho total de la ventana en pxeles outerHeight=pxeles:Indica el alto total de la ventana en pxeles left=pxeles:Indica la distancia en pxeles desde el lado izquierdo de la pantalla a la que se deber colocar la ventana top=pxeles:Indica la distancia en pxeles desde el lado superior de la pantalla a la que se deber colocar la ventana alwaysRaised=[yes,no,1,0]:Indica si la ventana deber permanecer siempre en frente de cualquier otra. z-lock=[yes,no,1,0]:Indica si se debe bloquear o no la ventana en su z-index actual. Por ejemplo El siguiente ejemplo muestra la apertura y cierre bsicos de una nueva ventana.
DHTML [FUNDAMENTOS DEL LENGUAJE JAVASCRIPT] 2.2 Mtodos del objeto document clear() close() eval() toString() valueOf() write() writeln() open(mime,reoplace) Limpia la ventana del documento Cierra la escritura sobre el documento actual Evala la cadena como una sentencia, en referencia al objeto document Devuelve una cadena que representa el objeto document Convierte el objeto a su tipo primitivo (number,bolean, string, o function) Escribe texto y HTML sobre el documento actual Escribe texto y HTML sobre el documento actual, seguido de una nueva lnea Abre la escritura sobre un documento. El parmetro mime especifica el tipo de documento soportado por el navegador. Si la cadena replace se pasa como segundo parmetro, se reutliza el documento anterior dentro del historial.
3.2 Mtodos del objeto form reset() submit() eval() toString() valueOf() Resetea el formulario. Tiene el mismo resultado que pulsar sobre un botn de tipo RESET. Envia el formulario. Tiene el mismo resultado que pulsar sobre el botn de tipo SUBMIT Evala la cadena como una sentencia, en referencia al objeto form Devuelve una cadena que representa el objeto form Convierte el objeto a su tipo primitivo (number,bolean, string, o function) correo: salinas282003@hotmail.com Pgina 23
4.2 Mtodos del objeto botn. click() eval() toString() valueOf() Simula la accin de pulsar sobre el botn Evala la cadena como una sentencia, en referencia al objeto botn. Devuelve una cadena que representa el objeto botn Convierte el objeto a su tipo primitivo (number,bolean, string, o function)
Ejercicios variados
1. Crear un ejemplo el cual permita copiar el texto de una caja de texto a otra e utilizando el evento onfocus.
DHTML [FUNDAMENTOS DEL LENGUAJE JAVASCRIPT] Aunque preferiremos trabajar utilizando un identificador mejor de Objetos en HTML, denominado DOM (el cual este material no profundizara).
Tiene su ventaja ya que solo habr que escribir el ID del objeto y nada ms, no habr que rutear dicho objeto pasando por todos sus objetos que lo contienen. 2. Crear un ejemplo el cual permita sumar 2 nmeros y tiene 2 botones con eventos el cual llamaran a las funciones determinadas
DHTML [FUNDAMENTOS DEL LENGUAJE JAVASCRIPT] 3.- Desarrollemos una ventana que sirva para loguearse y comprobar el usuario y la contrasea.
Aunque aqu los eventos estn basados por medio de botones, pero podemos cambiarlo ya que un formulario posee sus propios sus eventos.
4.- Desarrollemos una pgina el cual cargue una imagen en dicha pgina, pero dicha imagen se halla en nuestro sitio, dentro de la carpeta imagen.
5.- Desarrollemos una pgina que permita cargar una cantidad de imgenes, despus de ellos se muestre con eventos de agrandar y encoger de manera proporcional.
Note que se puede modificar la cantidad de imgenes al cargar, en este caso son 6.
DHTML [FUNDAMENTOS DEL LENGUAJE JAVASCRIPT] 6.- Mejoraremos el ejercicio anterior haciendo una muestra de dicha imagen en otra capa un poco ms grande, pero debemos tener presente que hay que crear 2 tipos de imgenes una de un tamao grande y otro de un tamao ms pequeo, en nuestro ejemplo tenemos dos carpetas las imgenes pequeas (carpeta chicas) y las imgenes normales (carpeta imagen).