Conceptos Bsicos de Javascript Con Ejemplos PDF
Conceptos Bsicos de Javascript Con Ejemplos PDF
Departamento Cencias de Computacin Facultad de Ciencias Exactas y Tecnologa Universidad Nacional de Tucumn
Bases de JavaScript by Ana Nieves Rodrguez is licensed under a Creative Commons Atribucin-No Comercial-Compartir Obras Derivadas Igual 2.5 Argentina License.
Pag:2/44
Laboratorio I Carrera de Programador Universitario JavaScript Departamento Ciencias de la Computacin FACET Microsoft cre el JavaScript que se desarroll para aprovechar las ventajas de Explorer.
Pag:3/44
Laboratorio I Carrera de Programador Universitario JavaScript Departamento Ciencias de la Computacin FACET Las rutinas de JavaScript se escriben en un documento HTML, esto significa que en la pgina web conviven dos lenguajes de programacin: HTML y JavaScript. Para que HTML interprete el lenguaje invasor (JavaScript) es necesario que se incorporen determinados tags propios de JavaScript de manera que el HTML reconozca que se trata de un script de JavaScript, as se deben incorporar los siguientes tags de acuerdo al navegador de que disponga, las posibilidades son: 1. <script>.....</script> 2. <script language=JavaScript>....</script> 3. <script type="text/javascript">.....</script> Nota: Tenga en cuenta que JavaScript es sensible al ingreso, por lo tanto si ingres <script> con minscula, deber realizar el cierre con minscula, si lo hizo con mayscula, su cierre debe ser con mayscula, lo mismo sucede con el uso de variables. O se puede realizar un archivo externo. o Cuando existen varias funciones probadas y que pueden servir a mas de un programa se puede realizar un archivo externo. o El archivo externo normalmente tiene la extensin .JavaScript y se lo incluye de la siguiente manera, suponiendo que el archivo con las funciones se llame externo: <script src=externo.JS> </script>
Formas de Ejecutarlo
Directa: se incorpora el script en el cuerpo o en la cabecera de una pgina html de modo que el navegador interprete cada lnea. Como respuesta a un evento: o Un evento es la accin que realiza el usuario mientras visita una pgina. Por ejemplo el movimiento el mouse, pulsar un botn, la seleccin de un texto o la carga de un formulario. El programa captura el evento realizado por el usuario, realiza una tarea y emite una respuesta mediante el uso de manejadores de eventos. Estos manejadores son funciones propias de JavaScript.
Pag:4/44
Laboratorio I Carrera de Programador Universitario JavaScript Departamento Ciencias de la Computacin FACET comentario, para ello se incorpora <!-- y -->, como hemos visto en lenguaje HTML. <script type=text/javascript> <! --Cdigo javascript -- > </script> Se puede indicar un texto alternativo si el navegador no permite cdigo javascript como se muestra a continuacin: <NOSCRIPT> El navegador no comprende los scripts </NOSCRIPT> Tener en cuenta que: 1. En la sintaxis de JAVASCRIPT Se respetan letras maysculas y minsculas 2. Las instrucciones se separan con punto y coma, si se escriben dos instrucciones en la misma lnea. 3. La otra forma de separarlas es mediante un salto de lnea Se recomienda usar siempre el punto y coma despus de cada instruccin requerimientos de servicios hechos por estaciones de trabajo inteligentes o clientes, resultan en un trabajo realizado por otros computadores llamados servidores. 1. Es una relacin entre procesos corriendo en mquinas separadas en donde: a. El Servidor es el proveedor de servicios. b. El Cliente es el consumidor de servicios. 2. El Cliente y el Servidor interactan por medio de pasajes de mensajes. a. El Cliente solicita el servicio b. El Servidor proporciona una respuesta. Por tanto existen dos actores: el servidor y el cliente. En esta arquitectura, la computadora de los usuarios (cliente), produce una demanda de informacin a la computadora que proporciona informacin (servidor) quien da respuesta a la demanda del cliente.
Pag:5/44
Laboratorio I Carrera de Programador Universitario JavaScript Departamento Ciencias de la Computacin FACET Un programa es una secuencia de instrucciones. En la pgina realizada hemos incrustado un script en el cdigo HTML, porqu decimos esto? Porque el cdigo del script se encuentra en el cuerpo de la pgina, o sea dentro de las etiquetas <body>..</body> Explicacin del ejemplo: 1. Se comienza con el tag <script> 2. La orden document.write, establece que se escriba en el documento html la frase Hola programador que debe ir entre comillas dobles o simples. Ejemplo mediante un evento: <html><body> <FORM> <INPUT TYPE="button" NAME="boton" VALUE="Presione" onClick="document.write('Hola Programador!!!')"> </FORM> </body></html>
Ejemplo 2
Desde un evento para que muestre una ventana de alerta: <html><body> <FORM> <INPUT TYPE="button" NAME="boton" VALUE="Presione" onClick="alert('Hola Programador!!!')"> </FORM> </body></html>
Ejemplo 3
En este caso incorporamos una expresin javascript en un formulario en donde declaramos un botn con el texto presione. Al presionar el botn escribe en el documento la frase Hola Programador. La expresin onClick es JavaScript, fjese un detalle: luego de onClick = la expresin documentr.write est entre comillas dobles y el texto se encuentra en comillas simples.
Pag:6/44
II - Elementos bsicos
Al escribir un programa JavaScript, se deben respetar las maysculas y las minsculas. Las rdenes o instrucciones dadas a JavaScript se separan con punto y coma, si se escriben dos instrucciones en la misma lnea. Otra forma de separarlas es mediante un salto de lnea Se recomienda usar siempre el punto y coma despus de cada instruccin.
Comentarios:
Cuando se escribe un programa, muchas veces es necesario documentar las tareas que realiza, muchas veces son lneas importantes que no hacen tareas de programacin en s: <script type=text/javascript> //comentario de una lnea /*Comentario que puede abarcar Ms de una lnea*/ </script>
Ejemplo 4
En el ejemplo propuesto, se realiza un script que escribe en el documento HTML una frase. Para que realice esta tarea escribimos la instruccin document.write que significa que escriba en el documento lo que se encuentra dentro del parntesis. Cuando combinamos frases y contenido de variables, se usa el operador de concatenacin +, como veremos mas adelante. Uso de Document: Luego veremos que document es un objeto. El document es muy usado en JavaScript, en casos en que no es conveniente trabajar con ventanas.
Textos
Los textos que deseamos que se muestren en el programa deben ir encerrados entre comillas que pueden ser dobles o simples. <HTML><HEAD></HEAD> <script type=text/javascript>
Pag:7/44
Laboratorio I Carrera de Programador Universitario JavaScript Departamento Ciencias de la Computacin FACET o DEBEN comenzar con un carcter alfabtico o guin bajo. Prohibidos: o +, $, espacio o palabras reservadas como for, return, while, if, var, etc Se aconseja que el nombre represente al dato que alberga, de esta manera es fcil convocarlas. Ejemplo: A=14 B=13 Suma = A + B En este ejemplo tenemos tres variables: A, B y suma. o Locales: cuando son declaradas en un tramo de programa acotado por { }, por ejemplo una funcin o un bucle. NOTA: Si no se usa la palabra var, la variable ser global.
Tipos de datos
Los datos pueden ser de diferentes tipos, por ejemplo: o Nmeros o Cadenas de caracteres: texto que puede estar compuesto de letras y nmeros, encerrado en comillas dobles o simples. o Valores booleanos: las variables de este tipo pueden tomar solo los valores true o false, o sea o es verdadera (true) o falsa (false).
Declaracin de variables
No es obligatorio, aunque es conveniente, declarar una variable mediante la indicacin de la palabra reservada var, de la siguiente manera: o Var suma1 o Var suma2, suma3 varias variables separadas por coma. Se puede asignar el valor a una variable de la siguiente manera: o Var suma1 = 14
Tipos de variables
El Operador typeof devuelve una cadena de textos que describe el tipo de variable que estamos comprobando. Var confirma = true Var numero = 67 document.write(tipo1: + typeof confirma + <br>) document.write(tipo2: + typeof numero + <br>)
Ejemplo 6
Pag:8/44
Laboratorio I Carrera de Programador Universitario JavaScript Departamento Ciencias de la Computacin FACET operadores. A continuacin se listan los operadores usados en JavaScript con un ejemplo correspondiente. a=prompt("ingrese numero a",""); b=prompt("ingrese numero b",""); s=a+b; alert(s); </script>
Ejemplo 8
Aritmticos:
o o o o o Suma: + Resta: Multiplicacin: * Divisin: / Resto de la divisin: %
Vista en el Browser:
<HTML><HEAD><TITLE>LABORATORIO 1</TITLE></HEAD> <script> document.write('texto que saldr en el script<br>') var a=6 , b=2 c= a*b; d= a/b; e= a%b; f= a+b; document.write('a= '+ a + '<br>b= ' + b + '<br>c= ' + c); document.write('<br>d= ' + d +'<br>e= ' + e + '<br>f='+f) </script> </BODY></HTML>
Ejemplo 7
Figura 1
NOTA1: en muchos navegadores, el operador de suma es interpretado como la concatenacin de caracteres como se muestra en el siguiente ejemplo <script type="text/javascript"> var a,b,s;
Figura 2
Resultado:
Pag:9/44
Laboratorio I Carrera de Programador Universitario JavaScript Departamento Ciencias de la Computacin FACET Ejemplo de operadores unarios: <HTML><HEAD> <TITLE>LABORATORIO 1</TITLE> </HEAD> <script type=text/javascript> document.write('texto que saldr en el script<br>') var a=3 , b=1 a++; b-//se incrementa la variable a y se decrementa b document.write('a= '+ a + '<br>b= ' + b) </script> </BODY> </HTML>
Ejemplo 10
Para solucionar momentneamente se har uso de 2 funciones propias de JavaScript: ParseInt o ParseFloat, las que se describen en el captulo de funciones <script type="text/javascript"> var a,b,s; a=prompt("ingrese numero a",""); b=prompt("ingrese numero b","");
De Asignacin
o o o o o o = Asignacin simple += Asignacin con suma -= Asignacin con resta *= Asignacin con multiplicacin /= Asignacin con divisin %= Obtiene el resto y asigna
s=parseInt(a)+parseInt(b);
alert(s); </script> </body> </html>
Ejemplo 9: con ParseInt
Unarios: o Incremento de la variable en una unidad: ++, (A++) o Decremento de la variable en una unidad: --)
(A-
Ejemplo de asignacin: <html> <body> <script type="text/javascript"> num1 = 2; //asignacin simple document.write('Numero original--> '+num1+'<br>');
Pag:10/44
Laboratorio I Carrera de Programador Universitario JavaScript Departamento Ciencias de la Computacin FACET num1 += 4; // asignacin con suma, en este caso se suma 4 al nmero num1 document.write('Numero mas cuatro (num1 += 4)--> '+num1+'<br>'); num1 -=1; // asignacin con resta, en este caso se resta 1 al nmero num1 document.write('Numero menos uno (num1 -=1)--> '+num1+'<br>'); num1 %=2;// resto de la divisin del nmero por dos document.write('Resto de dividir en dos (num1 %=2)--> '+num1+'<br>'); </script> </body> </html>
Ejemplo 11
Operadores de incremento Estos operadores se pueden colocar antes o despus de la expresin, pero solo modifican si se encuentran delante, ejemplo: <html> <body> <script type="text/javascript"> a = 1; document.write('a = 1<br>') b = ++a; document.write('(b = ++a) a--> '+a +'<br>b-->'+ b +'<br>--------<br>'); a = 1; document.write('a = 1<br>') c =a++; document.write('(c = a++) a--> '+ a +'<br>c-->'+ c +' b->'+b); </script> </body> </html>
Ejemplo 12
Vista en el browser
Operadores lgicos o ! : operador de negacin o && : operador AND (si los dos valores son verdaderos, el resultado es verdadero) o || : Operador OR ( si uno de los valores es verdadero, devuelve el valor verdadero)
Figura 4: asignacin
Pag:11/44
Laboratorio I Carrera de Programador Universitario JavaScript Departamento Ciencias de la Computacin FACET <html><body> <script type="text/javascript"> num1 = true; document.write('Num1: '+num1+'<br>-------<br>'); num1 = !num1; document.write('Negacin (num1 = !num1): '+num1+'<br><b>---Vuelvo num1 al valor original--</b><br>'); num1 = !num1; num2 = true; num3 = false; document.write('Num1= '+num1+'<br>Num2= '+num2+'<br>Num3= '+num3+'<br>--------<br>'); num4 = num1 && num2; document.write('And con true (num4 = num1 && num2): '+num4+'<br>-------<br>'); num4 = num1 && num3; document.write('And con false (num4 = num1 && num3): '+num4+'<br>-------<br>'); //or num4 = num1 || num2; document.write('OR dos true (num4 = num1 || num2): '+num4+'<br>-------<br>'); num4 = num1 || num3; document.write('OR con false (num4 = num1 || num3): '+num4+'<br>--------<br>'); </script></body></html>
Ejemplo 13
<html><body> <script type="text/javascript"> a = false; b = false; _a = !a; _b = !b; document.write('<center><table border= 2><caption><h2>Funcin AND</h2></caption>'); document.write('<tr><td>A</td><td>B</td><td>Y</td></tr ><tr><td>'); //00 document.write(a +'</td><td>'); document.write(b +'</td><td>'); c = a&&b; document.write(c +'</td></tr><tr><td>'); //0 1 document.write(a +'</td><td>'); document.write(_b +'</td><td>'); c = a&&_b; document.write(c +'</td></tr><tr><td>'); //1 0 document.write(_a +'</td><td>'); document.write(b +'</td><td>'); c = _a&&b; document.write(c +'</td></tr><tr><td>'); //1 1 document.write(_a +'</td><td>'); document.write(_b +'</td><td>'); c = _a&&_b; document.write(c +'</td></tr><tr><td>');
Pag:12/44
Laboratorio I Carrera de Programador Universitario JavaScript Departamento Ciencias de la Computacin FACET //fin de tabla document.write('</table></center>'); </script></body></html>
Ejemplo 14
escriba lo que se encuentra entre parntesis en un documento HTML. Este anexo es para los ms ansiosos y quieren ver un resultado inmediatamente.
Operadores de Comparacin Se usan para comparar los valores de las variables. x == y Devuelve verdadero si x es igual a y x != y devuelve verdadero si x es distinto de y x > y devuelve verdadero si x es mayor que y x < y devuelve verdadero si x es menor que y x <= y devuelve verdadero si x ees menor o igual que y
Efectos rpidos
Entre los efectos rpidos haremos uso del objeto window, en el que se mostrarn ventanas de: 1. Alert 2. Confirm 3. Prompt 1. Uso de ventanas de alerta Veamos algunos ejemplos simples y rpidos: Copie el siguiente cdigo con el bloc de notas y guarde en una carpeta llamada JAVASCRIPT en su disquet, con el nombre segundoJS.html <html> <body> <script type="text/javascript"> wdow.alert("Bienvenido a Laboratorio 1 - Carrera de Programador!") </script> </body> </html>
Ejemplo 15
Anexo 1
Ya se vieron algunos ejemplos, en los que hemos usado la orden document.write(), que le dice a JavaScript que
en este caso incrustamos el cdigo de javascript dentro del body de una pgina web. Window es un objeto usado por javascript, y alert es un mtodo de window que al decir window.alert le decimos
Pag:13/44
Laboratorio I Carrera de Programador Universitario JavaScript Departamento Ciencias de la Computacin FACET que muestre una ventana de alerta con el mensaje que se encuentra en el parntesis, como en este caso se trata de un texto, se debe incluir entre comillas dobles o simples. Cabe aclarar que la orden de alert puede ir sola siempre y cuando se encuentre dentro del bloque <script>...</script>, ya que JavaScript asume que se trata de una ventana de alerta. Al ejecutar la pgina, se ver la siguiente pantalla: Como en el caso anterior, confirm se puede usar con window.Confirm. El detalle que se debe tener en cuenta en estos casos, es que confirm solicita una respuesta que se carga en una variable que hemos llamado resp, los valores posibles que tomar la variable resp son True o False. Para saber el valor elegido, se muestra en una ventana de alert, la visualizacin se muestra de la siguiente forma:
2. Interactuando con el usuario ventana de confirmacin En este apartado trataremos de mostrar dos ejemplos simples en los que el programador interacta con el usuario. <html><body> <script type="text/javascript"> resp = confirm("Carrera de Programador?"); alert(v) </script> </body></html>
3. Ventana de Prompt Otro ejemplo tpico que permite interactuar con el usuario, es el de solicitar por pantalla el ingreso de datos. Esta tarea se realiza usando la ventana prompt de la siguiente forma: <html><body> <script type="text/javascript"> nombre = prompt("Ingrese su nombre", "") alert(v) </script> </body></html>
Pag:14/44
El comando Prompt posee dos lugares a los que llamamos parmetros. Los parmetros, como se ver mas adelante, son variables que se ingresan a un programa, separados por coma: Parmetro 1: en este lugar se escribe la frase que deseamos ver en la pantalla del prompt, en el caso del ejemplo: Ingrese su nombre, Parmetro 2: en el que podemos escribir un texto que deseamos que se muestre como valor predeterminado. Este valor puede ser ignorado pero mostrar la palabra undefined o sea valor no definido, si no queremos que se muestre esta palabra, simplemente se abren y cierran las dobles comillas, en el caso que deseamos ver una palabra predeterminada, la escribimos entre comillas dobles.
Pag:15/44
Laboratorio I Carrera de Programador Universitario JavaScript Departamento Ciencias de la Computacin FACET Un detalle que debe tener en cuenta es que si dentro de la rama if posee mas de una orden, estas deben encerrarse entre llaves: { }, lo mismo sucede con el else, siendo de buena costumbre usar las llaves siempre tanto en if como en else. Recuerde que el else es opcional. <html><body> <script type="text/javascript"> <!-conf = confirm("Desea Seguir?"); document.write(conf+"<br>"); if (conf) { document.write("Presion Aceptar"); } else { document.write("Presion Cancelar"); } --> </script> </body></html>
Ejemplo 17
Estructura IF
La estructura mas sencilla es la estructura IF y se utiliza de la siguiente manera: If (expresin) { Acciones a realizar en caso positivo } else { Acciones a realizar en caso negativo }
Ejemplo 16
En el siguiente ejemplo se solicita al usuario una respuesta, mediante el uso de una ventana de confirmacin. Debe tener en cuenta que: if (conf) significa si la variable conf posee el valor true (verdadero), entonces escriba en el documento con la orden document.write: Presion Aceptar, de otro modo (else) escriba en el documento document.write: Presion Cancelar
Estructura Switch
Bifurca segn el valor que tome la variable, se utiliza para seleccionar un valor entre diferentes alternativas. Switch (expresin) { case valor1: Tarea1 break
Pag:16/44
Laboratorio I Carrera de Programador Universitario JavaScript Departamento Ciencias de la Computacin FACET case valor2: Tarea2 break Default: tarea } La expresin a evaluar se escribe junto a la palabra switch Switch (expresin) Si la expresin tiene el valor1, realiza la tarea1. Para que salga de la estructura se incorpora la orden break, de otro modo contina realizando la tarea2. Si no encuentra valor vlido, ingresa a la opcin default. Pruebe el siguiente ejemplo: <html> <body> <SCRIPT> <!-num = prompt("numfoto",""); switch (num){ case "1": fto = 'foto'+num+'.jpg'; document.write(fto); document.write("<img src="+fto+">"); break; case "2": fto = 'foto'+num+'.jpg'; document.write(fto); document.write("<img src="+fto+">"); break; case "3": fto = 'foto'+num+'.jpg'; document.write(fto); document.write("<img src="+fto+">"); break; case "4": fto = 'foto'+num+'.jpg'; document.write(fto); document.write("<img src="+fto+">"); break; default: alert("Esa foto no existe") --> </SCRIPT> </body> </html>
Ejemplo 18: Este ejemplo solicita el ingreso de un nmero de foto y la muestra
Vista en el Browser
Pag:17/44
Laboratorio I Carrera de Programador Universitario JavaScript Departamento Ciencias de la Computacin FACET <html> <body> <SCRIPT> <!-for (i=1;i<6;i++){ document.write("<H" + i +">Encabezado "+ i+ "</H><br>"); } --> </SCRIPT> </body> </html>
Ejemplo 19 Figura 9: prompt, switch e imagen
Bucles
Se usan para realizar una tarea repetidamente, de acuerdo a una condicin determinada. Se utilizan: FOR WHILE DO WHILE.
Bucle FOR
Se usa para realizar tareas repetitivas un nmero determinado de veces: Sintaxis: for (desde (inicio);hasta (condicin);cmo_se_actualiza (incremento)) { Tareas a realizar } Ejemplo:
En el ejemplo se dice: Para la variable i: desde i=1, hasta que la variable i sea menor que 6 en 5 tendr que salir, esta es la condicin: en este punto se dir hasta cundo se realizar la iteracin, incrementando i en 1 en cada iteracin (cada vuelta del bucle) for (i=1;i<6;i++). El bucle for, se encarga de iterar o sea de realizar la tarea una y otra vez, incrementando la variable cada vez hasta que se cumpla la condicin, una vez que cumple la condicin sale del bucle y contina con el programa. Escriba en el documento(...) document.write("<H" + i +">Encabezado "+ i+ "</H><br>");
Pag:18/44
Bucle WHILE
Se usa para repetir una tarea un nmero indefinido de veces, MIENTRAS se cumpla una condicin. Sintaxis: while (condicin){ tarea a ejecutar } Ejemplo: <HTML><BODY> <SCRIPT> <!-var i=0; while (i < 5){ i += 1; document.write("<H" + i +">Encabezado "+ i+ "</H><br>"); } --> </SCRIPT> </BODY></HTML>
Ejemplo 20
Bucle do..while
Este bucle se ejecuta por lo menos una vez Sintaxis: do { tareas } while (condicin) <html><body> <SCRIPT> <!-var j=prompt("Cantidad de veces que ingresar al bucle:",""); var i=1; do { document.write("<H" + i +">Encabezado "+ i+ "</H><br>"); i += 1; } while (i <= j) --> </SCRIPT> </body></html>
Ejemplo 21
En el ejemplo se dice: Mientras i sea menor que 5, entonces: o Incremente i en 1 o Escriba en el documento(..) document.write("<H" + i +">Encabezado "+ i+ "</H><br>")
El ejemplo dice: Do Realice determinadas tareas, en este caso escribe el documento y luego incrementa j en uno document.write("<H" + i +">Encabezado "+ i+ "</H><br>"); j += 1;
Pag:19/44
Laboratorio I Carrera de Programador Universitario JavaScript Departamento Ciencias de la Computacin FACET While Mientras no se cumpla la condicin, en el momento en que se cumpla la condicin debe salir, en este caso da vueltas mientras la variable i sea menor que la variable j.
NOTA: En el caso del bucle do..while, la tarea se realiza al menos una vez, mientras que en el bucle while, evala la expresin y luego ingresa al bucle. Realice el siguiente ejemplo para comprobar lo que se dice en la NOTA: <script> var num=0 while (num==1) { alert(Ingreso al while); } do { alert(Ingreso a do..while); } while (num==1);
Ejemplo 22
Este ejemplo muestra claramente que NUNCA ingresar al bucle while, porque la variable num jams toma el valor 1, pero s ingresar al menos una vez al bucle do.. while.
Pag:20/44
Laboratorio I Carrera de Programador Universitario JavaScript Departamento Ciencias de la Computacin FACET 2. En otra parte de la pgina 3. Desde un evento Realice los siguientes ejemplos: <html> <body> <script type="text/javascript"> function alarma(){ alert(ERRORRRR!") } alarma() </script> </body></html>
Ejemplo 23
Sintaxis
Las funciones poseen la siguiente estructura: Function nombre(parmetro_1, parmetro_2, ....,parmetro_n) { Cdigo de tareas que realizar la funcin } Se escribe la palabra function, luego el nombre de la funcin y entre parntesis los parmetros, si no los tiene, igual se incorporan los parntesis() . Ejemplo: function alarma(){ Window.alert(ERROR!!!!) } Formas de ejecutar una funcin: solo necesita invocar su nombre entre tags de script de la siguiente manera: 1. Luego de la funcin invocando su nombre: alarma()
Otra forma de llamar a la funcin: <html><body> <script type="text/javascript"> function alarma(){ alert("ERRORRRR!") } </script> <h1>veamos que pasa</h1> <script> alarma() </script> </body></html>
Ejemplo 24
Pag:21/44
Laboratorio I Carrera de Programador Universitario JavaScript Departamento Ciencias de la Computacin FACET <html><body> <script type="text/javascript"> function alarma(){ alert("ERRORRRR!") } </script> <h1>veamos que pasa</h1> <form> <input type=button value="Presione el botn" onclick=alarma()> </form> </body></html>
Ejemplo 25
Sintaxis: function hola(nombre){ alert(Hola +nombre) } Nota: Para incorporar un parmetro en la funcin, tenemos que poner el nombre de la variable que almacenar el dato que se ingresa, por otro lado la variable tendr vida durante la ejecucin de la funcin y dejar de existir cuando la funcin se termine de ejecutar. Los parmetros pueden recibir cualquier tipo de datos, textos, nmeros, bolanos, u objetos. <html> <head> <script> <!-function alarma(nombre){ alert("Hola "+nombre) } --> </script> </head> <body> <h1>veamos que pasa</h1> <script> v1 = prompt("Escriba su nombre",""); alarma(v1) </script> </body></html>
Ejemplo 26
A tener en cuenta cuando se trabaja con funciones: Declararlas entre etiquetas <script>....</script> Declarar la funcin antes de ser llamadas Lo conveniente es declarar las funciones en el head, o en programa aparte prog.JavaScript. NO llamar a la funcin y luego declararla
Pag:22/44
Laboratorio I Carrera de Programador Universitario JavaScript Departamento Ciencias de la Computacin FACET Mltiples parmetros: Se pueden ingresar mas de un parmetro, separados por coma: ,. function alarma(num1,num2){ document.write("producto= "+num1*num2) } Llamado: v1 = (prompt("num1","")); v2 = (prompt("num2","")) alarma(v1,v2) Ejemplo: <html><head> <script> <!-function alarma(num1,num2){ document.write("producto= "+num1*num2) } --> </script> </head> <body> <h1>veamos que pasa</h1> <script> v1 = (prompt("num1","")); v2 = (prompt("num2","")) alarma(v1,v2) </script> </body></html>
Ejemplo 27
Nota: Los parmetros de las funciones se pasan por valor, o sea que aunque se modifiquen los parmetros en una funcin, la variable original no cambia su valor. Veamos en un ejemplo: Function valor(mivar){ mivar= 10 document.write(Variable dentro de la funcion: + mivar) } var mivar= 3 valor(mivar) document.write(Variable fuera de la funcion: + mivar)
Ejemplo 28
Analice el ejemplo. Retorno de la funcin: Los parmetros de una funcin JAVASCRIPT se pasan por valor, o sea que si dentro de la funcin se cambia el valor de la variable, este cambio no se ve reflejado a menos que se utilice la palabra reservada return La funcin realiza un conjunto de acciones y devuelve un valor. Se usa la palabra return seguida por el valor que se desea retornar. Cuando se la convoca se asigna a una variable. Pruebe los siguientes Ejemplos: Sin_return.htm <html><body> <script type="text/javascript">
Pag:23/44
Laboratorio I Carrera de Programador Universitario JavaScript Departamento Ciencias de la Computacin FACET function suma(num) { num++; alert(num); } var a=1; d=suma(a); alert(d); alert(a) </script> </body></html>
Ejemplo 29
Lgicamente slo habr un valor que cumple con las condiciones de la funcin y ese es el valor que retornar.
Con_return.htm <html><body> <script type="text/javascript"> function suma(num) { num++; alert(num); return num; } var a=1; d=suma(a); alert(d); </script> </body></html>
Ejemplo 30
Funciones bsicas JAVASCRIPT posee funciones predefinidas algunas de las cuales enumeramos a continuacin: eval(string): recibe una cadena de caracteres y la evala. <html><body> <script type="text/javascript"> var miTexto = "3 * 5 + 4 document.write(Var miTexto: +miTexto + "= "); eva= eval(miTexto); document.write(eva) </script> </body></html>
Ejemplo 31
parseInt(cadena,base): Devuelve un valor numrico resultante de convertir la cadena en un nmero entero en la base indicada. <html><body> <script type="text/javascript"> <!-valor = prompt("Ingrese el valor 1",""); valor2 = prompt("Ingrese el valor 2",""); //los valores sern concatenados document.write("Sin ParseInt (concatena) " + valor + " + "+ valor2 +" = ");
Pag:24/44
Laboratorio I Carrera de Programador Universitario JavaScript Departamento Ciencias de la Computacin FACET sum_str = valor+valor2; document.write(sum_str + "<br>"); //los valores sern sumados document.write("Con ParseInt (suma) "+ valor + " + "+ valor2 +" = "); p_i_valor = parseInt(valor); p_i_valor2 = parseInt(valor2); sum_val = p_i_valor+p_i_valor2; document.write(sum_val + "<br>") --> </script> </body></html>
Ejemplo 32
p_i_valor = parseFloat(valor); p_i_valor2 = parseFloat(valor2); sum_val = p_i_valor+p_i_valor2; document.write(sum_val + "<br>") --> </script> </body></html>
Ejemplo 33
isNaN(nmero): (is Not a Number = Si no es un nmero) Devuelve un booleano dependiendo de lo que recibe por parmetro. Si no es un nmero devuelve un true, si es un numero devuelve false.
parseFloat(cadena): Convierte la cadena en un nmero (no necesariamente entero) y lo devuelve. <html><body> <script type="text/javascript"> <!-valor = prompt("Ingrese el valor 1",""); valor2 = prompt("Ingrese el valor 2",""); //los valores sern concatenados document.write("Sin ParseFloat (concatena) " + valor + " + "+ valor2 +" = "); sum_str = valor+valor2; document.write(sum_str + "<br>"); //los valores sern sumados document.write("Con ParseFloat (suma) "+ valor + " + "+ valor2 +" = ");
<html><body> <script type="text/javascript"> <!-miInteger = parseInt("A3.6"); pp=isNaN(miInteger); document.write("No es un nmero: "+pp) mifloat = parseInt("3.6"); isNaN(mifloat); document.write("<br>Es un Nmero: "+isNaN(mifloat)) --> </script> </body></html>
Ejemplo 34
Pag:25/44
Laboratorio I Carrera de Programador Universitario JavaScript Departamento Ciencias de la Computacin FACET En resumen se puede decir que un objeto de software es un conjunto de variables (llamadas propiedades) y funciones (llamadas mtodos) relacionadas. Recuerde que los mtodos son funciones que manipulan las variables, o sea las propiedades. Los objetos se dividen en clases e instancias, una clase define a los objetos en forma general por ejemplo la clase perro, pero su perro es una instancia de la clase perro. Una clase es una descripcin de la forma y funcionamiento de los objetos, con las clases no se realiza ningn trabajo, sino con los objetos que creamos a partir de una clase.
V - Objetos en JavaScript
JavaScript utiliza objetos, de hecho hemos venido trabajando con ellos, cuando decimos document.write() estamos trabajando con el objeto document. Haremos ahora un pequeo resumen de lo que necesitamos para trabajar con los objetos de JavaScript, sin complicarnos demasiado.
Qu es un objeto?
Aunque hemos venido trabajando con objetos, en este apartado trataremos de explicar en forma simple e intuitiva qu son los Objetos. Bsicamente el modelo de objetos se basa en los objetos del mundo real: un perro, una planta, una ventana, etc. Los objetos de la vida real poseen dos caractersticas: propiedades y comportamientos, los propiedades del perro podran ser: nombre, color, casta y el comportamiento sera menear la cola, ladrar, etc. Los objetos de software son modelos tomados de objetos de la vida real y tambin poseen propiedades y comportamiento. Un objeto de software: Mantiene sus propiedades en una o ms variables. Recuerde que una variable es un tem de datos que posee un nombre o identificador. Y su comportamiento es implementado mediante mtodos, un mtodo es una funcin o subrutina asociada al objeto. A menos que se diga lo contrario una funcin no es esttica.
Pag:26/44
Laboratorio I Carrera de Programador Universitario JavaScript Departamento Ciencias de la Computacin FACET <html> <body> <script type="text/javascript"> fecha=new Date(); dia = fecha.getDate(); ao = fecha.getYear(); document.write('fecha: '+ fecha+ '<br>Dia: '+dia + '<br>Ao: '+ ao) </script> </body> </html>
Ejemplo 35
Clases predefinidas
JavaScript posee clases predefinidas, en este apartado mostraremos las ms usadas. Las clases se escriben con la primera letra en mayscula.
Clase Array
Esta clase permite crear vectores que son tipos de datos complejos, es un conjunto ordenado de elementos en donde cada elemento es una variable. Por ejemplo se puede tener un Array de das de la semana, el Array contendr siete elementos, del cero al seis (los arrays comienzan siempre en la posicin cero), cada uno correspondiente a un da de la semana. Declaracin de un Array Siguiendo con el ejemplo de los das de la semana, declaramos el Array (la primera letra con mayscula) semana de la siguiente manera: Semana = new Array(7) En este caso decimos que el array poseer siete (7) elementos aunque se puede dejar abierta la posibilidad, sin asignar la cantidad de elementos.
En este ejemplo, se crea un objeto fecha y se utilizan los mtodos getDate y getYear para obtener da y ao.
Pag:27/44
Laboratorio I Carrera de Programador Universitario JavaScript Departamento Ciencias de la Computacin FACET Semana[1] = martes ..... semana[6] = domingo dentro de sus casillas distintos tipos de datos, o sea en una casilla se puede introducir texto, en otro un valor booleano, en otra un nmero, etc. Longitud de un Array Los arrays adems de almacenar el valor de cada posicin, almacena el nmero total de posiciones o sea en el caso del Array semana, la longitud es de 7 posiciones. Para obtener esta longitud usamos una propiedad length del objeto array, recuerde que la propiedad de un objeto es una variable, veamos en un ejemplo: <html><body> <script type="text/javascript"> var semana = new Array(7) semana[0] = "lunes" semana[1] = "martes" semana[2] = "miercoles" semana[3] = "jueves" semana[4] = "viernes" semana[5] = "sabado" semana[6] = "domingo" for (i=0;i<7;i++){ document.write('Indice ' + i + ' de la semana: ' + semana[i] + '<br>') } document.write("<h1>Longitud semana.length + " </h1>" ) </script> del array: " +
Pag:28/44
Laboratorio I Carrera de Programador Universitario JavaScript Departamento Ciencias de la Computacin FACET </body></html>
Ejemplo 37
Clase Date
Permite manejar fechas y horas.
del
array:
"
Pag:29/44
Laboratorio I Carrera de Programador Universitario JavaScript Departamento Ciencias de la Computacin FACET Ejemplo: cumple = new Date(2000,11,23) WIDTH: ancho de la imagen HEIGTH: alto de la imagen BORDER: ancho del borde que se establece a la imagen ALT: utilizado para navegadores que no visualizan la imagen HSPACE: espacio horizontal entre imgenes VSPACE: espacio vertical entre imgenes
Mtodos de Date
El objeto Date utiliza en sus mtodos, para asignar valores el prefijo set y para obtener valores el prefijo get. getTime() - setTime(mls): obtiene y asigna, respectivamente, fecha y hora tomados como milisegundos transcurridos desde el 1 de enero de 1970 getYear() setYear(ao):obtiene y asigna el ao de la fecha, entre 1900 y 1999 en dos dgitos, no es recomendable. getFullYear() setFullYear(ao): obtiene y asigna el ao de la fecha, en cuatro dgitos. getMonth() setMonth(mes) getDate() setDate(dia) getHours() setHours(horas) getMinutes() setMinutes(minutos) getSeconds() setSeconds(segundos) getDay(): devuelve el da de la semana en formato nmero del 0 al 6.
Luego se establece el lugar en donde se encuentra la imagen. Si se encuentra en el mismo directorio de la pagina, se procede de la siguiente manera: Activa.src = nombrImagen.gif Para saber si el navegador entiende los objetos de imagen, se usa la siguiente lnea: if (document.images), si devuelve true (verdadero), entonces realiza la tarea
Clase Image
Esta clase representa una imagen. Est disponible desde Netscape 3 y Explorer 4.
Propiedades de Image
SRC: contiene la direccin del archivo con la imagen LOWSRC: es la imagen que se cargue antes que la imagen final, generalmente se establece una imagen pequea.
Pag:30/44
Laboratorio I Carrera de Programador Universitario JavaScript Departamento Ciencias de la Computacin FACET var noactiva = new Image(); noactiva.src = "right.gif"; } function activar(nombreimg) { if (document.images) { document[nombreimg].src= activa.src;} } function noactivar(nombreimg) { if (document.images) { document[nombreimg].src= noactiva.src;} } --> </SCRIPT> </HEAD> <BODY> <A HREF = "valida.htm" onMouseOver="activar('prueba');" onMouseOut="noactivar('prueba');"> <IMG NAME ="prueba" SRC = "right.gif" BORDER = 0> </A> </BODY></HTML>
Ejemplo 39
navegador debe traer el archivo desde un lugar remoto, por tanto es preferible haberlas precargado, en busca de optimizar los tiempos de acceso.
Clase String
Todas las variables de tipo texto son objetos de la clase string, por lo tanto no es necesario definirlas con la orden new como se haca con los objetos vistos anteriormente (aunque puede hacerlo, pero no funcionar en JavaScript 1.0) y todas las variables de este tipo tienen derecho de hacer uso de una serie de propiedades y mtodos, por ejemplo: saber la longitud en caracteres o extraer una porcin del texto o cambiar el texto a maysculas, etc.
Propiedades de String
length: Esta clase solo tiene la propiedad length, que guarda el nmero de caracteres del string.
Esto se hace dentro de un vnculo <A HREF...., la razn es que los eventos onMouseOver y onMouseOut son admitidos por la etiqueta <IMG. No olvidar el atributo NAME=nombre_de_imagen, esto es para identificarla posteriormente. Tal vez este cdigo parezca un poco reiterativo, ya que se declara dos veces document[nombreimg], pero recuerde que cada vez que se convoca una imagen, el
Mtodos de String
Presentamos ac los mtodos ms usados para manipular los strings, existen otros que sirven para aplicar estilos a los textos, y es como usar lenguaje HTML. charAt(indice): devuelve el carcter que hay en la posicin indicada por indice, las posiciones comienzan en cero.
Pag:31/44
Laboratorio I Carrera de Programador Universitario JavaScript Departamento Ciencias de la Computacin FACET indexOf(carcter,desde): Devuelve la posicin en que se encuentra el carcter , el segundo parmetro es opcional ya que indica desde el lugar en que har la bsqueda. lastIndexOf(carcter,desde): Devuelve la posicin en que se encuentra el carcter pero realiza la bsqueda desde el final del texto, o sea de derecha a izquierda. replace(texto_cambiar,nuevo_texto): Reemplaza el texto_a_cambiar por el nuevo_texto. Implementado en javascript 1.2 split(separador): Crea un vector a partir de un texto en el que cada elemento est separado por el separador indicado por el parmetro. Implementado para jascript 1.1 y posterior. substring(lugar_comienzo,lugar_fin): devuelve el substring que se inicia en el carcter de lugar_comienzo y termina en el lugar_fin (lugar_comienzo y lugar_fin son nmeros). toLowerCase(): Pasa todos los caracteres a minscula. toUpperCase(): Pasa todos los caracteres a mayscula. toString(): sirve para convertir cualquier objeto en cadenas de caracteres. Ejemplo de string: <HTML><HEAD><TITLE> Ctedra de Laboratorio 1 - Carrera de Programador Universitario </TITLE></head> <body> <script> <!-var hola="Trabajando con string en Laboratorio 1" ; var texto = ""; //largo del string largo = hola.length; document.write("Largo del string: "+largo+ "<br>"); //------------------/*En la variable letra cargamos cada caracter del string hola, en texto vamos sumando cada letra separada por un guin*/ for (i=0;i<largo;i++) { letra = hola.charAt(i); texto = texto + letra +"-" } document.write("Texto separado por guiones:"+texto + "<br>"); //------------------//Dnde se encuentra la s? ese = hola.indexOf("s"); document.write("La letra S se encuentra en el lugar: "+ese + "<br>"); //-------------------------//uso de replace re=hola.replace("string","<b>texto</b>"); document.write("En la variable re, cambio el texto: " + re +"<br>") //-------------------//uso de substring substr=hola.substring(1,6); document.write("Subtexto: "+substr+"<br>"); //---------------------
Pag:32/44
Laboratorio I Carrera de Programador Universitario JavaScript Departamento Ciencias de la Computacin FACET //Paso todo a mayuscula mayu = hola.toUpperCase() document.write("Texto en mayuscula: "+mayu); --> </script> </body></HTML>
Ejemplo 40
Propiedades de Math
E: constante de Euler. LN2: Logaritmo neperiano de 2 LN10: Logaritmo neperiano de 10 LOG2E: Logaritmo en base 2 de E LOG10E: Logaritmo en base 10 de E PI: nmero PI 3,1416... SQRT1_2: Raiz cuadrada de SQRT2: Raiz cuadrada de 2
floor(): devuelve el nmero o el inmediato anterior. cos(): coseno de un nmero exp() resultado de elevar el nmero E por un nmero log(): Logaritmo neperiano de un nmero max(): devuelve el mayor de dos nmeros dados. Min(): devuelve el menor de dos nmeros dados. Pow(): trabaja con dos parmetros y devuelve el primer nmero elevado al segundo. random(): Devuelve un nmero aleatorio entre 0 y 1. round(): Redondea al entero ms prximo sin(): devuelve el seno del nmero en radianes sqrt(): raiz cuadrada de un nmero tan(): Tangente de un nmero en radianes Ejemplo de la clase math: <HTML><HEAD><TITLE> Ctedra de Laboratorio 1 - Carrera de Programador Universitario </TITLE></head> <body> <script> <!-neper = Math.E; _pi = Math.PI; document.write("Euler: "+neper+"<br>"+"PI: "+_pi+"<br>"); document.write("Usando pow elevamos 2 al cubo: "+Math.pow(2,3)+"<br>") document.write("Redondea 2.6: "+ Math.round(2.6)+"<br>"); document.write("Redondea 2.4: "+ Math.round(2.4));
Mtodos de Math
abs(): valor absoluto de un nmero sin signo acos(): arcocoseno de un nmero en radianes asin(): arcoseno de un nmero en radianes atan(): arcotangente de un nmero ceil(): devuelve el entero igual o el siguiente de un nmero.
Pag:33/44
Laboratorio I Carrera de Programador Universitario JavaScript Departamento Ciencias de la Computacin FACET --> </script> </body></HTML>
Ejemplo 41
historial o los distintos frames de la ventana. JavaScript sabe que todos los objetos comienzan en window, aunque no lo especifiquemos, podramos escribir: window.document.write(hola) y estara muy bien. En la figura se muestra un esquema elemental de la jerarqua de objetos:
Objeto Window
El principal objeto de JavaScript es el objeto window, de hecho ya hemos trabajado con l, y es el nico que puede ejecutar tareas sin ser llamado, por ejemplo decimos alert(algo) en lugar de decir window.ALER(algo). Este objeto define ventanas e incluye los objetos referentes a la barra de tareas, al documento, etc.
location
document
history
Elementos de formulario
Figura 10: Jerarqua de objetos
Pag:34/44
Laboratorio I Carrera de Programador Universitario JavaScript Departamento Ciencias de la Computacin FACET history: objeto historial de las pginas visitadas. locationbar: objeto barra de direcciones de la ventana. menubar: objeto barra de mens de la ventana. name: Nombre de la ventana self: ventana o frame actual status: texto de la barra de estado toolbar: objeto barra de herramientas. Close(mensaje): cierra la ventana. Alert(mensaje): Muestra una ventana de dilogo, como se explic anteriormente Confirm(mensaje): ventana de dilogo con el mensaje y con dos posibles opciones. Prompt(mensaje,sugerencia): anteriormente usado. Muestra el mensaje, siendo sugerencia el valor inicial. La opcin OK el mtodo devuelve la cadena ingresada, si oprime Cancelar, devuelve el valor null (false) SetTimeout(funcin,tiempo): Llama a funcin cuando haya pasado el tiempo establecido en milisegundos. back(): ir una pgina atrs en el historial blur(): Quitar el foco de la ventana actual focus(): coloca el foco de la aplicacin en la ventana. forward(): Ir una pgina adelante home(): ir a la pgina de inicio del explorador. MoveBy(pixelsX,pixelsY): mueve la ventana de acuerdo a los pixeles que se indican por parmetro. print(): muestra la ventana de impresin del navegador. resizeBy(ancho,alto): redimensiona la ventana del navegador para que ocupe el espacio indicado por parmetros
Mtodos de window
[variable] = window.open(URL, nombre, propiedades) Esta frase permite crear y abrir una nueva ventana. En este caso, que es opcional, se asigna la ventana a una variable para poder acceder a ella. Qu significa lo que est entre parntesis? Recuerde que la direccin URL es la direccin de la ventana que estamos abriendo. El nombre es el que queremos que se utilice como parmetro de un TARGET. Propiedades o Toolvar[= yes/no] o Location[=yes/no] o directories[=yes/no] o status[=yes/no] o menubar[=yes/no] o scrollbars[=yes/no] o resizable[=yes/no] o width[=yes/no] o heigth[=yes/no]
Barra de Estado
Sirve para controlar la barra de estado. Si deseamos que la pgina tenga un mensaje en la barra de estado, podemos hacerlo de dos formas diferentes: Con precarga en la declaracin de body:
Pag:35/44
Laboratorio I Carrera de Programador Universitario JavaScript Departamento Ciencias de la Computacin FACET <BODY onLoad="window.defaulStatus='Esta es mi barra de estado';return true"> O dentro de un script como se muestra a continuacin: <script> window.status='Barra de estado!!!! </script>
Ejemplo 42: Barra de estado
Anchor: ancla o marcador de una pgina, trabaja como en HTML. fgColor: color del texto lastModified: fecha de la ltima modificacin linkColor: Color de los enlaces vlinkColor: color de los enlaces visitados.
Mtodos de document
Solo nos ocuparemos de los mtodos ms usados. close(): cierra el flujo del documento open(): abre el flujo del documento. write(): Escribe dentro de la pgina web writeln(): escribe en el documento e inserta un salto de lnea al final.
Por medio de un botn: <HTML> <BODY> <form> <input type="button" value="Mirame" onclick="window.status='barra de estado'"> </form> </BODY> </HTML>
Ejemplo 43
Pruebe los siguientes ejemplos: 1) Ultima modificacin: lastModifiied <html><HEAD> <script type=text/javascript> function ultima(){ document.write('Ultima modificacin: '+document.lastModified) } </SCRIPT> </HEAD> <body> <script> ultima() </script>
Objeto document
Representa al documento HTML en que estamos trabajando.
Propiedades de document
Se muestran a continuacin las propiedades ms usadas: alinkColor: color de los enlaces activos bgColor: color de fondo del documento
Pag:36/44
Laboratorio I Carrera de Programador Universitario JavaScript Departamento Ciencias de la Computacin FACET </body></html>
Ejemplo 44
Pag:37/44
Ejemplo 46
Vista en el Browser:
Pag:38/44
Laboratorio I Carrera de Programador Universitario JavaScript Departamento Ciencias de la Computacin FACET Convocar imgenes mediante document Una forma fcil de convocar imgenes es mediante el uso de document, de la siguiente manera: document.nombre_imagen.src=imagen.jpg Siendo nombre_imagen, coincidente con el nombre de la imagen convocada en el documento html: <img src="img1.jpg" name=" nombre_imagen "> Ejemplos con funciones Carrusel de Fotos En este ejemplo se trabaja con las siguientes variables: Foto: definir la foto que se ver Total: es el nmero total de fotos Mas: definir si el carrusel va hacia adelante o hacia atrs. <script type="text/javascript"> foto = 1; function cambia(mas, total){ foto = foto + mas; if (foto > total){ foto = 1} if (foto < 1){ foto = total;} document.kkk.src = "img"+foto+".jpg" } </script>
Ejemplo 47: funcin para navegar entre las fotos
<body text=white> <center><h1>Fotos</h1></center> <form> <center> <img src="img1.jpg" width="600" heigth="75" name="kkk"><br> <input type=button name="_foto" value="<<--" onClick="cambia(-1,6)"> <input type=button name="_foto" value="-->>" onClick="cambia(1,6)"> </center> </form> </body> </html>
Ejemplo 48: Carrusel de fotos
Pag:39/44
Laboratorio I Carrera de Programador Universitario JavaScript Departamento Ciencias de la Computacin FACET Vista en el Browser <img src="img1.jpg" width="600" heigth="75" name="kkk"><br> <input type=button name="_foto" value="<<--" onClick="cambia(-1,6)"> <input type=button name="_foto" value="-->>" onClick="cambia(1,6)"></center> </form> </body> </html>
Ejemplo 49: HTML que llama a EXT.JS
foto = 1; function cambia(mas, total){ foto = foto + mas; if (foto > total){ foto = 1} if (foto < 1){ foto = total;} document.kkk.src = "img"+foto+".jpg" }
Ejemplo 50: EXT.JS
Carrusel de fotos con funcin en archivo externo <html> <head> <script src="_EXT.JS"> </script> </head> <body text=white> <center><h1>Fotos</h1></center> <form> <center>
Pag:40/44
Indice
I - PRESENTACIN DE JAVASCRIPT .......................... 3 INTRODUCCIN ............................................................. 3 Elementos bsicos para programar en JavaScript ............... 3 Qu se necesita para programar un JavaScript? .................... 3 Donde se escribe un JAVASCRIPT? .................................... 4 Formas de Ejecutarlo ............................................................. 4 Forma de ocultar un JAVASCRIPT en navegadores antiguos: ................................................................................ 4 Tener en cuenta que: .......................................................... 5 Quien interpreta las instrucciones? ........................................ 5 Nuestro primer JavaScript ..................................................... 5 II - ELEMENTOS BSICOS ............................................ 7 II - ELEMENTOS BSICOS ............................................ 7 Comentarios: ............................................................................ 7 Textos ........................................................................................ 7 VARIABLES Y OPERADORES EN JAVASCRIPT......... 7 1. Qu son las variables:.......................................................... 7 Declaracin de variables........................................................ 8 Ambito de las variables ......................................................... 8
Tipos de datos ........................................................................ 8 Tipos de variables .................................................................. 8 2.Qu son los operadores ......................................................... 8 Aritmticos:............................................................................ 9 Unarios: ............................................................................ 10 De Asignacin ...................................................................... 10 Operadores de incremento ............................................... 11 Operadores lgicos........................................................... 11 Operadores de Comparacin ............................................ 13 Orden de Precedencia de los operadores ............................. 13 ANEXO 1 ....................................................................... 13 Efectos rpidos ..................................................................... 13 1. Uso de ventanas de alerta ............................................. 13 2. Interactuando con el usuario ventana de confirmacin .......................................................................................... 14 3. Ventana de Prompt ....................................................... 14 III - FLUJO DEL PROGRAMA ...................................... 16 ESTRUCTURAS DE CONTROL ................................... 16 Toma de decisiones o bifurcacin condicionales ................. 16 Estructura IF......................................................................... 16 Estructura Switch ................................................................. 16 Vista en el Browser .......................................................... 17 Bucles ...................................................................................... 18 Bucle FOR ........................................................................... 18 Bucle WHILE ...................................................................... 19
Pag:41/44
Laboratorio I Carrera de Programador Universitario JavaScript Departamento Ciencias de la Computacin FACET Bucle do..while .................................................................... 19 IV - FUNCIONES ........................................................... 21 QU ES UNA FUNCIN? ............................................. 21 Sintaxis ................................................................................ 21 Parmetros de las funciones ................................................ 22 Sintaxis: ........................................................................... 22 Retorno de la funcin: ..................................................... 23 Mltiples retornos: .......................................................... 24 Funciones bsicas ............................................................ 24 V - OBJETOS EN JAVASCRIPT .................................. 26 QU ES UN OBJETO? ................................................. 26 Cmo instanciar un objeto?.................................................. 26 Cmo se accede a las propiedades y mtodos de un objeto? ................................................................................................. 27 CLASES PREDEFINIDAS ............................................ 27 Clase Array ............................................................................ 27 Asignar valores al Array: .................................................... 27 Captar valores de un Array .................................................. 28 Tipos de datos en un Array.................................................. 28 Otra forma de inicializar el Array semana sera: ................. 29 Propiedades del Array ......................................................... 29 Mtodos del Array .............................................................. 29 Clase Date ............................................................................... 29 Declaracin de un objeto de la clase Date ........................... 29 Mtodos de Date .................................................................. 30 Clase Image............................................................................. 30 Propiedades de Image .......................................................... 30 Declaracin del objeto imagen: ........................................... 30 Activa.src = nombrImagen.gif...................................... 30 Ejemplo de Rollover o imgenes de sustitucin: ................. 30 Clase String............................................................................. 31 Declaracin del objeto String: ............................................. 31 Propiedades de String .......................................................... 31 Mtodos de String ................................................................ 31 Ejemplo de string: ............................................................ 32 Clase Math en JavaScript ..................................................... 33 Propiedades de Math ............................................................ 33 Mtodos de Math ................................................................. 33 Ejemplo de la clase math: ................................................ 33 VI - JERARQUA DE OBJETOS DEL NAVEGADOR .. 34 Propiedades de los objetos..................................................... 34 OBJETO WINDOW ....................................................... 34 Propiedades del objeto window ............................................ 34 Mtodos de window................................................................ 35 Qu significa lo que est entre parntesis? ...................... 35 Barra de Estado .................................................................... 35
Pag:42/44
Laboratorio I Carrera de Programador Universitario JavaScript Departamento Ciencias de la Computacin FACET OBJETO DOCUMENT .................................................. 36 Propiedades de document ..................................................... 36 Mtodos de document ........................................................... 36 VII EJEMPLOS CON IMGENES ................................. 37 Con botones y window.open ............................................... 38 Vista en el Browser: ........................................................ 38 Convocar imgenes mediante document ......................... 39 Ejemplos con funciones Carrusel de Fotos .................. 39 Vista en el Browser ......................................................... 40 Carrusel de fotos con funcin en archivo externo ........... 40 Ejemplo 16 .................................................................... 16 Ejemplo 17 .................................................................... 16 Ejemplo 18: Este ejemplo solicita el ingreso de un nmero de foto y la muestra .......................................... 17 Ejemplo 19 .................................................................... 18 Ejemplo 20 .................................................................... 19 Ejemplo 21 .................................................................... 19 Ejemplo 22 .................................................................... 20 Ejemplo 23 .................................................................... 21 Ejemplo 24 .................................................................... 21 Ejemplo 25 .................................................................... 22 Ejemplo 26 .................................................................... 22 Ejemplo 27 .................................................................... 23 Ejemplo 28 .................................................................... 23 Ejemplo 29 .................................................................... 24 Ejemplo 30 .................................................................... 24 Ejemplo 31 .................................................................... 24 Ejemplo 32 .................................................................... 25 Ejemplo 33 .................................................................... 25 Ejemplo 34 .................................................................... 25 Ejemplo 35 .................................................................... 27 Ejemplo 36 .................................................................... 28 Ejemplo 37 .................................................................... 29 Ejemplo 38 .................................................................... 29 Ejemplo 39 .................................................................... 31 Ejemplo 40 .................................................................... 33 Ejemplo 41 .................................................................... 34 Ejemplo 42: Barra de estado ......................................... 36 Ejemplo 43 .................................................................... 36 Ejemplo 44 .................................................................... 37 Ejemplo 45 .................................................................... 37 Ejemplo 46 .................................................................... 38
Tabla de Ejemplos
Ejemplo 1......................................................................... 1 Ejemplo 2......................................................................... 6 Ejemplo 3......................................................................... 6 Ejemplo 4......................................................................... 7 Ejemplo 5......................................................................... 7 Ejemplo 6......................................................................... 8 Ejemplo 7......................................................................... 9 Ejemplo 8......................................................................... 9 Ejemplo 9: con ParseInt ................................................. 10 Ejemplo 10 ..................................................................... 10 Ejemplo 11 ..................................................................... 11 Ejemplo 12 ..................................................................... 11 Ejemplo 13 ..................................................................... 12 Ejemplo 14 ..................................................................... 13 Ejemplo 15 ..................................................................... 13
Pag:43/44
Laboratorio I Carrera de Programador Universitario JavaScript Departamento Ciencias de la Computacin FACET Ejemplo 47: funcin para navegar entre las fotos .......... 39 Ejemplo 48: Carrusel de fotos........................................ 39 Ejemplo 49: HTML que llama a EXT.JS ........................ 40 Ejemplo 50: EXT.JS....................................................... 40
Tabla de Figuras
Figura 1 ........................................................................... 9 Figura 2 ........................................................................... 9 Figura 3: Sin ParseInt .................................................... 10 Figura 4: asignacin ...................................................... 11 Figura 5: ventana de alerta ............................................ 14 Figura 6: ventana Confirm ............................................. 14 Figura 7: Ventana de Prompt ......................................... 15 Figura 8: ejemplo con prompt y switch .......................... 17 Figura 9: prompt, switch e imagen ................................. 18 Figura 10: Jerarqua de objetos ..................................... 34 Figura 11: HTML + JavaScript ....................................... 37 Figura 12: Foto activada luego de presionar botn ver.. 38 Figura 13: vista en el browser del carrusel .................... 40
Pag:44/44