Apuntes Javascript

Universidad Autnoma de Baja California Escuela de Pedagoga Lenguaje de Programacin Javascript Bsico 1.
Introduccin
Qu es Javascript?

Javascript provee interactividad a pginas HTML. Es un lenguaje interpretado. No requiere licencia. Es reconocido por los principales browsers como Netscape y Explorer. Javascript se escribe directamente en las pginas HTML.
Es lo mismo Java que Javascript?

No, son completamente diferentes. Java se parece mas a C++ que a Javascript y adems pertenece a Sun Microsystems. Lo nico que tienen en comn es el nombre.
Qu puede hacerse con Javascript?

Pueden agregarse pequeos extractos de cdigo a las pginas HTML. Puede agregarse texto dinmico a una pgina HTML. Puede hacerse que una pgina HTML reaccione cuando se presente un evento. Pueden leerse o escribirse elementos HTML. Pueden validarse los datos de una forma antes de que se envien al servidor.
Qu necesito para utilizar Javascript?

1. Editar un archivo HTML que contenga Javascript embebido. 2. Colocar el archivo en un sitio visible desde la Internet. 3. Acceder al achivo por medio de un navegador.
Pgina 1 de 24 Material Elaborado por: Cecilia Curlango Rosas
Universidad Autnoma de Baja California Escuela de Pedagoga Lenguaje de Programacin Javascript Bsico Ejemplo 1 1. Editar un archivo con nombre hola.html y escribir dentro de l lo siguiente: 1 2 3 4 5 6 7 <html> <body> <script type="text/javascript"> document.write("Hola U.A.B.C.!") </script> </body> </html>
2. Cargue el archivo en su navegador. 3. Copie el archivo a su directorio public_html. 4. Cargue el archivo en su navegador escribiendo la direccin del servidor, su cuenta y el nombre del archivo. (http://tiburon.mxl.uabc.mx/~js100/hola.html).
La lnea 3 utiliza la etiqueta <script> que indica la presencia de un pequeo cdigo de programacin. Mientras que el atributo type="text/javascript" indica que el lenguaje de programacin del que se trata es Javascript. Esta etiqueta debe cerrarse para lo que se utiliza la etiqueta de la lnea 5. La lnea 4 es la que se encarga de escribir el mensaje en el documento. sta es cdigo de Javascript. Es importante resaltar que no es necesario agregar un punto y coma (;) al final de la instruccin como se hace en otros lenguajes. Sin embargo, se puede agregar si as se desea sin cambiar el funcionamiento. Algunos navegadores viejos no reconocen scripts por lo que se debe agregar  al rededor de la lnea 4 para estos casos.
Universidad Autnoma de Baja California Escuela de Pedagoga Lenguaje de Programacin Javascript Bsico
Donde se colocan los scripts?

Los ubicacin de los scripts controla el momento en que se ejecutan. Los scripts que se escriben en la seccin <body> sern ejecutados mientras que se carga la pgina. Los scripts que se escriben en la seccin <head> sern ejecutados cuando sean llamados. Aqu normalmente se colocan funciones escritas por el programador para asegurar que stas ya estn cargadas cuando se van a ejecutar. Tambin pueden ejecutarse scripts que se encuentren completamente fuera del documento dentro de otro archivo. <html> <head> <script type=text/javascript> instruccines de javascript </script> </head> <body> Aqu se coloca un script dentro del cuerpo. <script type=text/javascript> instruccines de javascript </script> Aqu se llama a un script externo. <script src=archivo.js></script> </body> </html>
Universidad Autnoma de Baja California Escuela de Pedagoga Lenguaje de Programacin Javascript Bsico 2. Variables Las variables se utilizan para almacenar algn dato. El valor de sta puede cambiar duante el script. Para nombrar una variable se debe considerar lo siguiente:

Los nombres de las variables distinguen entre maysculas y minsculas. Los nombres deben comenzar con una letra o el smbolo de subrayado.
Para declarar una variable se puede hacer de las siguiente maneras: var miVariable = hola miVariable = hola
Cuanto tiempo est vigente una variable?

Si se declara una variable dentro de una funcin, sta se conoce como variable local y est vigente mientras se est ejecutando la funcin. Tambin solo puede accederse a ella dentro de la funcin. Si se declara una variable fuera de una funcin, entonces todas la funciones de la pgina pueden acceder a ella. La vida de estas variables inicia cuando se declaran y termina cuando la pgina se cierra.
Universidad Autnoma de Baja California Escuela de Pedagoga Lenguaje de Programacin Javascript Bsico 3. Operadores Javascript utiliza los mismos operadores que C/C++ o Java. Esto se resumen en la siguiente tabla. Operadores Aritmticos Operadores de Asignacin Operadores de Comparacin Operadores Lgicos + = += * / -= > % *= < ++ --
/= %= >= <=
== !=
&& || !
A diferencia de lenguajes como C o C++ el operador de suma (+) se puede utilizar para unir cadenas de caracteres. Como se ve en el siguiente ejemplo. Cadena1 = Que lindo Cadena2 = es Puebla! Cadena3 = Cadena1 + + Cadena2
Universidad Autnoma de Baja California Escuela de Pedagoga Lenguaje de Programacin Javascript Bsico 4. Funciones Una funcin contiene cdigo que ser ejecutado por un evento o por una llamada a la funcin. Pueden reutilizarse las funciones dentro de un mismo script o en otros documentos. Las funciones se definen en la seccin <head> al inicio de un documento y se llaman desde el cuerpo del documento. Ejemplo 2 1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 <html> <head> <script type="text/javascript"> function miFuncion() { alert("Boo!"); } </script> </head> <body> <form> <input type="button" onclick="miFuncion()" value="Sorpresa"> </form> <p> Presiona el botn y recibe una sorpresa. </p> </body> </html>
Se define la funcin llamada miFuncion() dentro de la seccin <head>. Esta funcin al ejecutarse muestra una caja de dialogo con un mensaje. Dentro del cuerpo del documento, en la declaracin del botn, se indica en la lnea 15 que
Universidad Autnoma de Baja California Escuela de Pedagoga Lenguaje de Programacin Javascript Bsico cuando ste se presione, se debe ejecutar la funcin denominada miFuncion().
Cmo se define una funcin?
Funcin con parmetros:
function miFuncion(argumento1, argumento2, argumentoN) { instrucciones a ejecutar }
Funcin sin parmetros
function miFuncion() { instrucciones a ejecutar } Algunas funciones arrojan un valor al terminar su ejecucin como se ve en el siguiente ejemplo. function suma(a, b) { resultado = a + b return resultado } Ejercicio: a. Modificar el ejemplo 2 para que al presionar el botn le envie como parmetro el mensaje a la funcin. b. Agregar otro botn al ejercicio anterior. Al presionar este botn, se debe enviar como parametro su nombre. c. Crear un documento que contenga una funcin que regrese el producto de dos parmetros que recibir. El documento deber utilizar esta funcin para mostrar el producto de 2 y 3, 4 y 5, y 20 y 2.
Universidad Autnoma de Baja California Escuela de Pedagoga Lenguaje de Programacin Javascript Bsico 5. Condiciones Las condiciones se utilizan para ejecutar selectivamente un cdigo. Javascript cuenta con varias formas de expresar condiciones. stas son iguales las que manejan C/C++ y Java. Ejemplo 3 1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 <html> <body> <script type="text/javascript"> var d = new Date() var hora = d.getHours() if (hora < 10) { document.write("<b>An es temprano</b>") } else { document.write("<b>A la camita...</b>") } </script> <p> Si la hora del navegador es menor que 10, mostrar el mensaje "An es temprano" si no, mostrar "A la camita..." </p> </body> </html>
Ejemplo 4 1 <html> 2 <body> 3 <script type="text/javascript"> 4 var d = new Date() Pgina 8 de 24 Material Elaborado por: Cecilia Curlango Rosas
Universidad Autnoma de Baja California Escuela de Pedagoga Lenguaje de Programacin Javascript Bsico 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 var dia = d.getDay() switch(dia) { case 5: document.write("Por fin es viernes!") break case 6: document.write("Sabadito lindo!") break case 0: document.write("Es dormingo, zzzzz!") break default: document.write("Ya casi se acaba la semana.") } </script> <p> Se mostrar un mensaje diferente dependiendo del da de la semana. </p> </body> </html>
En ambos ejemplos se crea un objeto del tipo Date. ste nos permite acceder a la fecha actual del sistema. En la lnea 5 de ambos ejemplos se manda llamar un mtodo que pertenece al objeto Date. Puede obtener mayor informacin sobre este objeto en la siguiente direccin: http://www.w3schools.com/js/js_datetime.asp . Javascript tambin reconoce el operador condicional ternario. mayor = (a>b)?a:b
Universidad Autnoma de Baja California Escuela de Pedagoga Lenguaje de Programacin Javascript Bsico 6. Ciclos Javascript maneja los siguientes tipos de ciclos: while do-while for Nuevamente, la sintaxis de stos es identica a la de ciclos en C/C++ y Java. Ejemplo 5.1 1 <html> 2 <body> 3 <script type="text/javascript"> 4 for ( i = 1; i <= 6; i++) 5 { 6 document.write("<h" + i + ">Este es H" + i) 7 document.write("</h" + i + ">") 8 } 9 </script> 10 </body> 11 </html> El ciclo while tiene la siguiente sintaxis: while (condicin) { instruccines a ejecutar }
Ejemplo 5.2 1 <html> 2 <body> 3 <script type="text/javascript"> 4 i=1 5 while ( i <= 6 ) 6 { 7 document.write("<h" + i + ">Este es H" + i) 8 document.write("</h" + i + ">") 9 i++ 10 } 11 </script> 12 </body> 13 </html> El ciclo do-while tiene la siguiente sintaxis: do { instruccines a ejecutar } while (condicin) Ejercicio: a. Modifica el ejercicio 5.2 para que muestre los tamaos de los encabezados en orden inverso. b. Repite el ejercicio anterior utilizando el ciclo do-while.
Universidad Autnoma de Baja California Escuela de Pedagoga Lenguaje de Programacin Javascript Bsico 7. Interaccin con Componentes 1. Caja de texto Uno de los usos de Javascript, como se mencion, es para validar los datos de una forma antes de que estos sean enviados al servidor. Esto permite ahorrar tiempo ya que la validacin se realiza del lado del cliente. Un componente imortante cuyo contenido es sujeto de validacin es la caja de texto. Esta aparece en formas y permite al usuario escribir textos libremente. El siguiente ejemplo muestra como puede realizarse una interaccin con una caja de texto. Ejemplo 1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 6 <html> <head> <script type="text/javascript"> function miFuncion(elMensaje) { alert(elMensaje); } </script> </head> <body> <form> <input type="text" name="elTexto"> <input type="button" onclick="miFuncion(form.elTexto.value)" value="Sorpresa"> </form> <p> Presiona el botn y recibe una sorpresa. </p> </body> </html>
Universidad Autnoma de Baja California Escuela de Pedagoga Lenguaje de Programacin Javascript Bsico Ejercicio: a. Crea una pgina que contenga una forma con cajas de texto para escribir el nombre, apellido paterno, apellido materno y edad de una persona. Adems debe tener un botn con la leyenda Procesar. Al presionarse este botn, debe validarse que todas las cajas de texto tengan al escrito. Si es as, mostrar una caja de dialogo con la informacin captada. De no serlo as, mostrar una caja de dialogo indicando el dato que falt. b. Crear una pgina que contenga una caja de texto. En esta caja se escribir un nmero del 1 al 10. La pgina debe contener un botn que al presionarlo mostrar una caja de dialogo con la tabla de multiplicar del nmero que se escribi. En caso de ser un nmero fuera de rango, debe mostrarse una caja de dialogo con un mensaje indicando el error que se present.
Universidad Autnoma de Baja California Escuela de Pedagoga Lenguaje de Programacin Javascript Bsico 2. Boton Los botones que se colocan dentro de las formas en pginas HTML reconocen algunos eventos. Al asociar funciones de Javascript a estos eventos, obtenemos algunos efectos interesantes. La siguiente tabla muestra algunos de los eventos asociados a botones. Estos eventos tambin se pueden asociar a otros componentes de pginas. Atributo onclick ondblclick onmousedown onmousemove onmouseover onmouseout onmouseup Ejemplo 7.1: 1 2 3 4 5 6 7 8 9 10 11 12 13 14 <html> <head> <script type="text/javascript"> function cambiaColor(a) { document.bgColor=a } </script> </head> <body bgcolor=white> <p> Cambia el color del fondo. <form> Pgina 14 de 24 Material Elaborado por: Cecilia Curlango Rosas Se presion un click Se present un doble click Se presion el botn del ratn El cursor del ratn se movi El cursor del ratn est sobre el botn El cursor del ratn ya no est sobre el botn El botn del ratn se solt Descripcin
Universidad Autnoma de Baja California Escuela de Pedagoga Lenguaje de Programacin Javascript Bsico 15 16 17 18 19 20 21 22 23 24 <input type="button" onmouseover='cambiaColor("blue")' onmouseout='cambiaColor("white")' value="Azul"> <input type="button" onclick='cambiaColor("blue")' value="Azul"> </form> </p> </body> </html>
Universidad Autnoma de Baja California Escuela de Pedagoga Lenguaje de Programacin Javascript Bsico Ejemplo 7.2 1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 <html> <head> <script type="text/javascript"> function cambiaColor(a) { document.bgColor=a } function ponerMensaje(mens) { document.forms[0].mensaje.value=mens } </script> </head> <body bgcolor=white> <p> Cambia el color del fondo y Muestra el nombre del color. <form> <input type=text name=mensaje length=40> <br> <input type="button" onmouseover=cambiaColor("blue") onclick=ponerMensaje("Azul") value="Azul"> <br> <input type="button" onmouseover=cambiaColor("green") onclick=ponerMensaje("Verde") value="Verde"> <br> <input type="button" onmouseover=cambiaColor("red") onclick=ponerMensaje("Rojo") value="Rojo">
Universidad Autnoma de Baja California Escuela de Pedagoga Lenguaje de Programacin Javascript Bsico 36 37 38 39 </form> </p> </body> </html>
Ejercicio: a. Crear una calculadora bsica que permita sumar, restar, multiplicar y dividir dos numeros. Dicha calculadora deber tener una caja de texto para el primer nmero, una para el segundo y otra para el resultado. Adems deber contar con 4 botones uno para cada operacin. Cada vez que se presione uno de estos botones, se deber realizar la operacin y mostrar el resultado en la caja de resultado. b. Modificar la calculadora del ejercicio anterior. Agregar una caja de texto en la que se muestre un mensaje cada vez que el cursor del ratn se posicione sobre uno de los botones y otro mensaje cuando el cursor sale del botn.
Universidad Autnoma de Baja California Escuela de Pedagoga Lenguaje de Programacin Javascript Bsico 8. Mtodos Un mtodo es como un tipo de funcin especial que esta asociada siempre a un objeto, por ejemplo al objeto document. El uso de mtodos permite realizar operaciones predeterminadas, por ejemplo: document.write(Hola) . Un objeto tambin tiene atributos que son las caractersticas que lo hacen distinto a otros objetos del mismo tipo, por ejemplo un atributo de un objeto document es el color de su fondo. ste puede cambiarse modificando el valor de su atributo: document.bgcolor=green. Algunos objetos con mtodos interesantes se muestran a continuacin: Objeto Descripcin y Referencia Date Permite la manipulacin de fechas. http://devedge.netscape.com/library/manuals/2000/javascript/1.5/ guide/obj.html#1008512 Window Abrir y cerrar ventanas http://www.irt.org/xref/Window.htm Document Trabajar con documentos que se generan sobre la marcha. http://www.irt.org/xref/Document.htm Form Trabajar con formas en documentos HTML http://www.irt.org/xref/Form.htm History Trabajar con el historial de navegacin del usuario http://www.irt.org/xref/History.htm Math Acceder a operaciones matemticas como sin, cos, etc. http://devedge.netscape.com/library/manuals/2000/javascript/1.5/ guide/obj.html#1008620
Universidad Autnoma de Baja California Escuela de Pedagoga Lenguaje de Programacin Javascript Bsico 9. Eventos Adems de los botones, otros objetos en una pgina tienen la capacidad de generar eventos que pueden ser atendido por medio de funciones de Javascript. Cada evento tiene un manejador de evento que indica el nombre que se utiliza para identificar el evento dentro de un documento HTML. La siguiente lista muestra algunos eventos, el tipo de objeto al que se refiere, que sucede cuando se presenta, y el nombre del manejador del evento. Manejador del Evento
Evento abort
Objeto Imagenes
Cuando ocurre
El usuario detiene onAbort la carga de una imgen. El usuario quita el onBlur enfoque de una ventana, marco o elemento de una forma El usuario hace onClick click sobre un elemento de una forma o un vinculo.
blur
Ventanas, marcos y todos los elementos de una forma Botones, botones de radio, checkboxes, botones de submit o reset, vinculo
click
change
Campos de texto, El usuario cambia onChange reas de texto, el valor de un listas de seleccin elemento Imagenes y ventanas La carga de un documento o imagen causa un error OnError
Error
Universidad Autnoma de Baja California Escuela de Pedagoga Lenguaje de Programacin Javascript Bsico Manejador del Evento
Evento focus
Objeto
Cuando ocurre
Ventanas, marcos El usuario enfoca onFocus y elementos de la ventana, marco formas o elemento de forma Cuerpo del documento Areas, vnculos El usuario carga una pgina en el browser onLoad
load
mouseout
El cursor del ratn onMouseout se mueve fuera de un rea o enlace El cursor del ratn onMouseOver se mueve sobre un vnculo Se presiona el botn Reset de una forma onReset
mouseover
Vnculos
reset
Formas
select
Campos de texto y Se selecciona un onSelect reas de texto elemento en un campo de entrada Botn submit Se presiona el botn Submit Se abandona una pgina
submit
onSubmit onUnload
unload
Cuerpo de un documento
Universidad Autnoma de Baja California Escuela de Pedagoga Lenguaje de Programacin Javascript Bsico Ejemplo 8 1 <html> 2 <head> 3 4 <script type="text/javascript"> 5 function abrirVentana() 6 { 7 window.open ("http://yaqui.mxl.uabc.mx/~curlango","my_new_window","toolba r=yes, location=yes, directories=no, status=no, menubar=yes, scrollbars=yes, resizable=no, copyhistory=yes, width=400, height=400") 8 } 9 </script> 10 11 </head> 12 <body> 13 14 <form> 15 <input type="button" 16 value="Abrir Ventana" 17 onclick="abrirVentana()"> 18 </form> 19 20 </body> 21 </html>
Universidad Autnoma de Baja California Escuela de Pedagoga Lenguaje de Programacin Javascript Bsico 10.Listas de Seleccin Dinmicas En esta seccin se presenta un ejemplo del uso de listas de seleccin dinmicas. stas hacen uso de arreglos multidimensionales para obtener el efecto de presentar listas con opciones que dependen de una seleccin previa. Ejemplo 9
1 <html> 2 <head> 3 <script type="text/javascript"> 4 Fruta=new Array() 5 Fruta[0]="Pia" 6 Fruta[1]="Melon" 7 Fruta[2]="Sandia" 8 9 Vegetal=new Array() 10 Vegetal[0]="Chile" 11 Vegetal[1]="Tomate" 12 Vegetal[2]="Cebolla" 13 14 Carne=new Array() 15 Carne[0]="Machaca" 16 Carne[1]="Pollo" 17 Carne[2]="Barbacoa" 18 19 function listaSeleccion(f) 20 { 21 segundaLista = eval(f.listaGeneral.options [f.listaGeneral.selectedIndex].value) 22 f.listaEspecifica.options.length=0 23 for (i=0; i<segundaLista.length; i++) 24 { 25 f.listaEspecifica.options[i]=new Option (segundaLista[i]) 26 } 27 f.listaEspecifica.selectedIndex=0; 28 } 29 30 </script> 31 </head> 32 <body onLoad="listaSeleccion(document.comida)"> 33 Selecciona un tipo de comida:
34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 <form name="comida"> <select name="listaGeneral" onChange="listaSeleccion(form)"> <option value="Fruta" SELECTED>Fruta</option> <option value="Vegetal">Vegetales</option> <option value="Carne">Carnes</option> </select> <select name="listaEspecifica"> <option> </option> <option></option> <option></option> <option></option> <option></option> </select> </form> </body> </html>
Dnde puedo encontrar mas informacin?

Gua completa de etiquetas HTML http://www.w3schools.com/html/html_reference.asp Gua de referencia de Javascript http://devedge.netscape.com/library/manuals/2000/javascript/1.5/guide Otras guas de referencia de temas relacionados http://www.w3schools.com/

Apuntes Javascript

Cargado por

Copyright:

Formatos disponibles

Apuntes Javascript

Cargado por

Información del documento

Derechos de autor

Formatos disponibles

Compartir este documento

Compartir o incrustar documentos

Opciones para compartir

¿Le pareció útil este documento?

¿Este contenido es inapropiado?

Copyright:

Formatos disponibles

Apuntes Javascript

Cargado por

Copyright:

Formatos disponibles

Universidad Autnoma de Baja California Escuela de Pedagoga Lenguaje de Programacin Javascript Bsico 1.

Es lo mismo Java que Javascript?

Qu puede hacerse con Javascript?

Qu necesito para utilizar Javascript?

Pgina 1 de 24 Material Elaborado por: Cecilia Curlango Rosas

Pgina 2 de 24 Material Elaborado por: Cecilia Curlango Rosas

Donde se colocan los scripts?

Pgina 3 de 24 Material Elaborado por: Cecilia Curlango Rosas

Cuanto tiempo est vigente una variable?

Pgina 4 de 24 Material Elaborado por: Cecilia Curlango Rosas

Pgina 5 de 24 Material Elaborado por: Cecilia Curlango Rosas

Pgina 6 de 24 Material Elaborado por: Cecilia Curlango Rosas

Cmo se define una funcin?

Funcin con parmetros:

function miFuncion(argumento1, argumento2, argumentoN) { instrucciones a ejecutar }

Funcin sin parmetros

Pgina 7 de 24 Material Elaborado por: Cecilia Curlango Rosas

Pgina 9 de 24 Material Elaborado por: Cecilia Curlango Rosas

Pgina 10 de 24 Material Elaborado por: Cecilia Curlango Rosas

Pgina 11 de 24 Material Elaborado por: Cecilia Curlango Rosas

Pgina 12 de 24 Material Elaborado por: Cecilia Curlango Rosas

Pgina 13 de 24 Material Elaborado por: Cecilia Curlango Rosas

Pgina 15 de 24 Material Elaborado por: Cecilia Curlango Rosas

Pgina 16 de 24 Material Elaborado por: Cecilia Curlango Rosas

Pgina 17 de 24 Material Elaborado por: Cecilia Curlango Rosas

Pgina 18 de 24 Material Elaborado por: Cecilia Curlango Rosas

Pgina 19 de 24 Material Elaborado por: Cecilia Curlango Rosas

Pgina 20 de 24 Material Elaborado por: Cecilia Curlango Rosas

Pgina 21 de 24 Material Elaborado por: Cecilia Curlango Rosas

Pgina 22 de 24 Material Elaborado por: Cecilia Curlango Rosas

Pgina 23 de 24 Material Elaborado por: Cecilia Curlango Rosas

Dnde puedo encontrar mas informacin?

Pgina 24 de 24 Material Elaborado por: Cecilia Curlango Rosas

También podría gustarte