Professional Documents
Culture Documents
Introduccin al JavaScript
Lenguaje de programacin usado para crear pequeos programas dentro de una pgina web. Crea efectos especiales y permite interactuar con el usuario El navegador del cliente interpreta las instrucciones
Java necesita un kit de desarrollo y un compilador Se pueden hacer sistemas Java es mucho ms potente que JS Es fuertemente tipado. Fuerte, robusto y seguro
Yuri Marquez Solis
Javascript es interpretado por el navegador cuando lee la pgina Solo se pueden hacer programas que se ejecuten en web No necesitamos declarar el tipo
Usos de JavaScript
Crear efectos especiales Validar datos de un formulario Crear rollovers (cambia la imagen cuando se pasa el mouse). Crear navegadores desplegables. Apertura de ventanas secundarias.
Qu necesitamos
Editor de textos Navegador compatible con javascript. Tags de Javascript: <script>.....</script> <script language=JavaScript>....</script> <script type="text/javascript">.....</script>
Yuri Marquez Solis
<html><body> <script type="text/javascript"> Document.write(Prueba de js !") </script> </body></html> Nota: usamos alert o window.alert
Lenguaje javascript
La programacin de javascript se realiza en un documento HTML Se pueden introducir varios script en una misma pgina con etiquetas script diferentes
Archivos externos
Cuando existen varias funciones probadas y que pueden servir a mas de un programa se puede realizar un archivo externo. El archivo externo normalmente tiene la extensin .js y se lo incluye de la siguiente manera: <script src=externo.js> </script>
Elementos bsicos
Se respetan las maysculas y las minsculas Separacin de instrucciones
Las instrucciones se separan con punto y coma, si se escriben dos instrucciones en la misma lnea. La otra forma de separarlas es mediante un salto de lnea Se recomienda usar siempre el punto y coma despus de cada instruccin.
Yuri Marquez Solis
Sintaxis Javascript
Comentarios: <script> //comentario de una lnea /*Comentario que puede abarcar Ms de una lnea*/ </script>
Textos
Los textos deben estar entre comillas dobles o simples <HTML><BODY> <SCRIPT> document.write(texto) document.write(que se ver en el documento) </SCRIPT></BODY></HTML>
Yuri Marquez Solis
Efectos rpidos
Alert
Muestra una ventana de alerta <HTML><BODY> <SCRIPT> alert(Bienvenido a Laboratorio 1...) </SCRIPT> </BODY></HTML>
Confirm
Prompt
Uso de document
Volver
Se usa cdigo javascript embebido en html: <input type= button value=Volver onclick=history.go(1)> <A HREF= "history.go(-1)"><b>Inicio de pgina</b></A>
Variables
Es un espacio en memoria en donde se almacena un dato Ejemplo:
A=14 B=13 Suma = A + B
Declaracin de variables
No es obligatorio, pero es conveniente. Se usa la palabra reservada var
var suma1 var suma2, suma3 varias variables separadas por coma.
Tipos
Nmeros: var igv = 16; // variable tipo entero var total = 234.65; // variable tipo decimal Cadenas de caracteres: texto que puede estar compuesto de letras y nmeros, encerrado en comillas dobles o simples. var mensaje = "Bienvenido a nuestro sitio web"; var nombreProducto = 'Producto ABC'; var letraSeleccionada = 'c'; Valores booleanos: true o false var clienteRegistrado = false; var ivaIncluido = true;
Yuri Marquez Solis
Arrays
Un array es una coleccin de variables, que pueden ser todas del mismo tipo o cada una de un tipo diferente. Su utilidad se da al permitir manejar todos los valores como si fueran uno solo: var dias = ["Lunes", "Martes", "Mircoles", "Jueves", "Viernes", "Sbado", "Domingo"];
Definir array
Para definir un array, se utilizan los caracteres [ y ] para delimitar su comienzo y su final y se utiliza el carcter , (coma) para separar sus elementos:
var nombre_array = [valor1, valor2, ..., valorN]; Cada elemento se accede indicando su posicin dentro del array. La nica complicacin, que es responsable de muchos errores cuando se empieza a programar, es que las posiciones de los elementos empiezan a contarse en el 0 y no en el 1: var diaSeleccionado = dias[0]; // diaSeleccionado = "Lunes" var otroDia = dias[5]; // otroDia = "Sbado"
Yuri Marquez Solis
Operadores Aritmticos
Operadores de Asignacin
= Asignacin += Asignacin con suma -= Asignacin con resta *= Asignacin con multiplicacin /= Asignacin con divisin %= Obtiene el resto y asigna
Operadores lgicos
! : operador de negacin && : operador AND (si los dos valores son verdaderos, el resultado es verdadero) || : Operador OR ( si uno de los valores es verdadero, devuelve un valor verdadero. funcin AND
Conversiones de Variables
Para evitar problemas en las conversiones, se pueden utilizar mtodos ya implementados que realizan la conversin de una manera ms segura. TIPO DE CONVERSION SINTAXIS De texto a numero: enterovar_numerica=parseInt(var_texto) De texto a coma flotante: (decimal)var_numerica=parseFloat(var_texto) De numrica a texto: Es automtica sin peligro.
<html> <head> <script> var global=100; function uno() { var local_uno=1; alert("Global " +global +" Local " +local_uno); dos(); } function dos() { var local_dos=2; alert("Global " +global +" Local " +local_dos); } </script> <title>yms </title> </head> <body onLoad=uno();> </body> </html>
Yuri Marquez Solis
Eventos
Un evento es un mecanismo por el cual podemos detectar las acciones que realiza el usuario y llamar automticamente a la funcin que tengamos asociada. Desde esta funcin realizaremos las acciones que tengamos desarrolladas. SINTAXIS:
<elemento nombre_evento=nombre_funcion([parametros]);>
Listado de eventos
onLoad:Terminar de cargar una pgina o frame (entrar). onUnLoad:Descargar una pgina o frame (salir).la carga de una pgina. onError:Producirse algn error en la carga de la pgina. onMouseOver:Pasar el ratn por encima de un enlace, area o frame. onMouseOut:Dejar de estar el ratn(sale) encima de un enlace, area o frame. onMouseMove:Mover el ratn por el documento. onKeyUp:Presionar una tecla. onClick:Hacer click con el ratn. onResize:Dimensionar la ventana del navegador.
Listado de eventos
onMove:Mover la ventana del navegador. onChange:Modificar texto en un control de edicin. Sucede al perder el foco. onSelect:Seleccionar texto en un control de edicin. onFocus:Situar el foco en un control. onBlur:Perder el foco un control. onSubmit:Enviar un formulario. onReset:Inicializar un formulario.
SENTENCIAS DE CONTROL
IF-ELSE: La ejecucin atraviesa un conjunto de estados boolean que determinan que bloques de cdigo se ejecutan. Con la utilizacin de esta sentencia nunca se realizarn ambos bloques de cdigo. SINTAXIS: En caso de ser una sola sentencia por parte las llaves son opcionales. if (expresion-booleana) { Sentencia(s); { [else] { Sentencia(s); } La clusula else es opcional. La expresin puede ser de cualquier tipo y ms de una (siempre que se unan mediante operadores lgicos).Otra opcin posible es la utilizacin de if anidados, es decir unos dentro de otros compartiendo la clusula else.
Otro ejemplo
<html> <head> <script> function pasa(secre,caja) { var temporal; temporal=secre.value; caja.value=temporal; } </script> </head> <body> <form> CONTRASEA: <input type="password" name="secre" size="5" onKeyUp= pasa(secre,caja) ;> <br> NORMAL: <input type="text" name="caja" size="5"> </form> </body> </html>
} </script> <title>Ejemplo if</title> </head> <body> Edad: <input type= "text" name="cedad" size="3onBlur=ver();> </body> </html>
SWITCH:
Es una sentencia muy similar a if-else. Si los valores con los que se compara son nmeros se los pone directamente, pero si es texto se debe encerrar entre comillas. La sintaxis de esta sentencia es: switch (expresin) { case constante1: sentencia(s); break; case constante2: sentencia(s); break; case constante3: sentencia(s); break; case constanteN: sentencia(s); break; [default:] sentencia(s); }
El valor de la expresin se compara con cada una de las constantes de la sentencia case, si coincide alguno, se ejecuta el cdigo que le sigue, y cuando ejecuta break sale de este bloque hasta salir del switch. Si ninguno coincide se realiza el bloque default (opcinal), si no lo hay no se ejecuta nada.
<html> <head> <script> function espe() { var tipo=cespe.value; switch(tipo) { case "humano": case "planta": case "animal": default: }
alert("Eres un Humano"); break; alert("Eres un Vegetal"); break; alert("Eres del reino Animal"); break;
} </script> </head> <body> ESPECIE:<input type="text" name="cespe" size="20" onBlur= espe() ;> </body> </html>
WHILE:
Ejecuta repetidamente el mismo bloque de cdigo hasta que se cumpla una condicin de terminacin. Hay cuatro partes en todos los bucles. Inicializacin, cuerpo, iteracin y condicin. SINTAXIS: [inicializacin;] while(condicion[es]) { cuerpo; [iteracin;] }
DO..WHILE: Es lo mismo que en el caso anterior pero aqu como mnimo siempre se ejecutar el cuerpo del bucle una vez, en el tipo de bucle anterior es posible que no se ejecute ni una sola vez el contenido de este. SINTAXIS: [inicializacin;] do { cuerpo; [iteracin;] }while(condicin);
FOR: Se debe empelar si sse conoce el numero de iteraciones a realizar. Normalmente la condicin para terminar es de tipo numrico. La iteracin puede ser cualquier expresin matemtica valida. Si de los 3 trminos que necesita no se pone ninguno se convierte en un bucle infinito. SINTAXIS: En caso de ser una sola sentencia por parte las llaves son opcionales. for (inicio;cond_fin;iteracin) { sentencia(S); }
CONFIRM:
SINTAXIS: var_boolean=confirm("texto de la ventana");
BOTON PULSADO ACEPTAR CANCELAR VALOR De RETORNO true false
<html> <head> <script> function confirma() { var respuesta=confirm("Pulsa un botn"); if (respuesta==true) alert("Has pulsado ACEPTAR"); else alert("Has pulsado CANCELAR"); } </script> </head> <body onLoad= confirma() ;> </body> </html>
<html> <head> <script> function opt(valor) { if(valor==1) alert("Vas a ir a uno"); else alert("Vas a ir a dos"); } </script> <title>Ejemplo de funciones</title> </head>
<body> <a href="Uno.htm" onMouseOver = opt(1); >ir a uno</a> <a href="Dos.htm" onMouseOver = opt(2); >ir a dos</a> </body> </html>
<html> <head> <script> function opt(valor) { var cadena; switch(valor) { case 1: cadena="uno"; break; case 2: cadena="dos"; break; case 3: cadena="tres"; break; case 4: cadena="cuatro"; break; } alert("Vinculo " +cadena); } </script> <title>Ejemplo de funciones</title> </head> <body><form> <a href="Uno.htm" onMouseOver=opt(1);>uno</a> <a href="Dos.htm" onMouseOver=opt(2);>dos</a> <a href="Tres.htm" onMouseOver=opt(3);>tres</a> <a href="Cuatro.htm" onMouseOver=opt(4);>cuatro</a> </form></body> </html>
MATRICES (Arrays)
Una matriz es una coleccin de variables del mismo tipo que tiene un nombre comn. A un elemento especifico de un matriz se accede mediante su ndice. Todos los arrays tienen como primer ndice el valor 0. Hay que tener muy presente NO rebasar el valor del ltimo ndice. SINTAXIS: var nombre_array=new Array(); INICIALIZACIN DE UN ELEMENTO: nombre_array[indice]=valor; UTILIZACIN DE ELEMENTOS: Casi como si se tratase de una variable normal. nombre_array[indice];
CONTROLES
Hasta el momento hemos visto nicamente botones, cajas de texto y enlaces como controles con los cuales el usuario puede interactuar. Con JavaScript podemos utilizar cualquier control de un formulario para que el usuario interacte con ellos igual que con los anteriormente vistos, ampliando la flexibilidad a la hora de realizar programas. Cuantos ms controles podamos utilizar mejor.
Control Radio Botones (Radio) Casillas de verificacin (checkBox) Cajas de Contrasea (passWord) Cajas de texto multilnea (area) Listas y Listas desplegables (select) Modo de empleo Igual que un botn de comando. Igual que un botn de comando o un radio botn. Igual que una caja de texto. Igual que una caja de texto o caja de contrasea.
Construir el elemento como siempre, aadiendo en la etiqueta <select> el evento change. Y en cada etiqueta <option> aadir el atributo value para poder identificar cual de los elementos ha sido elegido.
<html> <head> <script> var banco=100; var num_secreto=0; function genera() { num_secreto=Math.random()*3; num_secreto=Math.round(num_secreto); if(num_secreto==0) num_secreto=3; } function juego(valor,c) { if(num_secreto==valor) { alert("Enhorabuena"); banco+=100; genera(); } else
EJEMPLO 1
{
banco-=50; } c.value=banco; } </script> </head> <body onload=genera();> Apuesta: <form> <p>1<input type="radio" name="R1" onClick=juego(1,this.form.caja);> <br> 2<input type="radio" name="R1" onClick=juego(2,this.form.caja);> <br> 3<input type="radio" name="R1" onClick=juego(3,this.form.caja);> <br> banco: <input type="text" name="caja" size="20" value="100"> </p> </form> </body> </html>
Ejemplo 2
<html> <head> <script> function pasa() { var temporal; temporal=secre.value; caja.value=temporal; } </script> </head> <body> CONTRASEA: <input type="password" name="secre" size="5" onKeyUp= pasa() ;><br> NORMAL: <input type="text" name="caja" size="5"> </body> </html>