You are on page 1of 53

JavaScript

Pedro Yuri Marquez Solis

Yuri Marquez Solis

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

Yuri Marquez Solis

Diferencias con Java

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.

Yuri Marquez Solis

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

Nuestro primer JavaScript

<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

Yuri Marquez Solis

Maneras de ejecutar un javascript


Directa: se incorpora el script de modo que el navegador interprete cada linea, se puede incorporar en el body o en el head. Respuesta a un evento:
Evento: accin que realiza el usuario, como movimiento del mouse o pulsar un botn o la seleccin de un texto.

Yuri Marquez Solis

Ocultar scripts en navegadores antiguos


El clinte interpreta las instrucciones <script> <! Cdigo javascript // </script> Se puede indicar un texto alternativo si el navegador no permite cdigo javascript: <NOSCRIPT>El navegador no comprende los scripts </NOSCRIPT>
Yuri Marquez Solis

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>

Yuri Marquez Solis

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>

Yuri Marquez Solis

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

Yuri Marquez Solis

Alert
Muestra una ventana de alerta <HTML><BODY> <SCRIPT> alert(Bienvenido a Laboratorio 1...) </SCRIPT> </BODY></HTML>

Yuri Marquez Solis

Confirm

<html><body> <script type="text/javascript"> v = confirm("Carrera de Programador?"); alert(v) </script> </body></html>

Yuri Marquez Solis

Prompt

<html><body> <script type="text/javascript"> v = prompt("Ingrese su nombre", "") alert(v) </script> </body></html>

Yuri Marquez Solis

Uso de document

<html><body> <script type="text/javascript"> document.write("Bienvenido a Ingeniera Web!") </script> </body></html>

Yuri Marquez Solis

Ver fecha actual

<html><body> <script type="text/javascript"> document.write(new Date()) </script> </body></html> Con window


Yuri Marquez Solis

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>

Yuri Marquez Solis

Variables
Es un espacio en memoria en donde se almacena un dato Ejemplo:
A=14 B=13 Suma = A + B

En este ejemplo tenemos tres variables: A, B y suma.

Yuri Marquez Solis

Caractersticas de las variables


Se forman con caracteres alfanumricos o guin bajo.
ejemplos: sumando_1, A, B, sumando2, _A, etc.

DEBEN comenzar con un carcter alfabtico o guin bajo Prohibidos:


+, $ o espacio palabras reservadas como for, return, while, if, etc.

Yuri Marquez Solis

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.

Se le puede asignar un valor


var suma1 = 14

Yuri Marquez Solis

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"];

Yuri Marquez Solis

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

Suma: + Resta: Multiplicacin: * Divisin: / Resto de la divisin: % Unarios:


Incremento en una unidad: ++, (A++) Decremento en una unidad: -- (A--)

Yuri Marquez Solis

Operadores de Asignacin

= Asignacin += Asignacin con suma -= Asignacin con resta *= Asignacin con multiplicacin /= Asignacin con divisin %= Obtiene el resto y asigna

Yuri Marquez Solis

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

Yuri Marquez Solis

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.

Yuri Marquez Solis

<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

Ingreso con controles FORM


<html><head><script> Otro mecanismo por el cual se function muestra(cnombre) pueden introducir datos, es { mediante las cajas de texto. Todo el trabajo con las cajas, var nombre=cnombre.value; esta basado en funciones y mtodos ya implementadas en alert("Eres "+nombre); JavaScript. cnombre.value=""; variable=nombre_caja.value; cnombre.focus(); Guarda el contenido de la caja } nombre_caja.value=valor o variable;Muestra en la caja el </script></head><body> valor nombre_caja.value="";Limpia el <form> contenido de la caja Nombre:<input type="text" name="cnombre" nombre_caja.sefocus();Enva el foco a la caja size="20"> <input type="button" value="Ver" onClick=muestra(this.form.cnombre);> </form></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.

Yuri Marquez Solis

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.

Yuri Marquez Solis

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>

<html> <head> <script> function ver() { var edad=parseInt(cedad.value);


if(edad<=18) alert("No tienes acceso\nDebes tener 18"); else alert("Bienvenido a la pagina");

} </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;

alert("Especie Desconocida"); 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>

PASO DE PARMETROS A FUNCIONES


Es el paso de informacin (parmetros) a una funcin. Cuando se realiza la llamada hay que indicar entre los parntesis los valores que se van a enviar. SINTAXIS DE LA LLAMADA: <elemento evento=nombre_funcion(valor1,valor2,valorN);> nombre_funcion(valor1,valor2,valorN);

SINTAXIS DEL DESARROLLO: function nombre_funcion(var1,var2,varN) { sentencia(s); }

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

You might also like