JavaScript Pedro Yuri Marquez Solis

Yuri Marquez Solis

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

Introduccin al JavaScript

Diferencias con Java

Yuri Marquez Solis

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

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

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

Usos de JavaScript

Editor de textos

Navegador compatible con javascript.

Tags de Javascript:

.....

....

.....

Yuri Marquez Solis

Qu necesitamos

Document.write(Prueba de js !")

Nota: usamos alert o window.alert

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

Lenguaje 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

Maneras de ejecutar un javascript

El clinte interpreta las instrucciones

Se puede indicar un texto alternativo si el navegador no permite cdigo javascript:

El navegador no comprende los scripts

Yuri Marquez Solis

Ocultar scripts en navegadores antiguos

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:

Yuri Marquez Solis

Archivos externos

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

Elementos bsicos

Comentarios:

//comentario de una lnea

/*Comentario que puede abarcar

Ms de una lnea*/

Yuri Marquez Solis

Sintaxis Javascript

Los textos deben estar entre comillas dobles o simples

document.write(texto)

document.write(que se ver en el documento)

Yuri Marquez Solis

Textos

Efectos rpidos

Yuri Marquez Solis

Muestra una ventana de alerta

alert(Bienvenido a Laboratorio 1...)

Yuri Marquez Solis

Alert

v = confirm("Carrera de Programador?");

alert(v)

Yuri Marquez Solis

Confirm

v = prompt("Ingrese su nombre", "")

alert(v)

Yuri Marquez Solis

Prompt

document.write("Bienvenido a Ingeniera Web!")

Yuri Marquez Solis

Uso de document

document.write(new Date())

Con window

Yuri Marquez Solis

Ver fecha actual

Se usa cdigo javascript embebido en html:

Inicio de pgina

Yuri Marquez Solis

Volver

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

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

Caractersticas de las 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

Declaracin de variables

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

Tipos

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

Arrays

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

Definir array

Suma: +

Resta: -

Multiplicacin: *

Divisin: /

Resto de la divisin: %

Unarios: Incremento en una unidad: ++, (A++)

Decremento en una unidad: -- (A--)

Yuri Marquez Solis

Operadores Aritmticos

= Asignacin

+= Asignacin con suma

-= Asignacin con resta

*= Asignacin con multiplicacin

/= Asignacin con divisin

%= Obtiene el resto y asigna

Yuri Marquez Solis

Operadores de Asignacin

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

Operadores lgicos

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

Conversiones de Variables

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

yms

Yuri Marquez Solis

Otro mecanismo por el cual se pueden introducir datos, es mediante las cajas de texto. Todo el trabajo con las cajas, esta basado en funciones y mtodos ya implementadas en JavaScript.

variable=nombre_caja.value;

Guarda el contenido de la caja nombre_caja.value=valor o

variable;Muestra en la caja el valor

nombre_caja.value="";Limpia el contenido de la caja

nombre_caja.sefocus();Enva el foco a la caja

Yuri Marquez Solis

Ingreso con controles FORM

function muestra(cnombre) { var nombre=cnombre.value; alert("Eres "+nombre); cnombre.value=""; cnombre.focus(); } Nombre:

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:

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.

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

Listado de eventos

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.

Otro ejemplo

function pasa(secre,caja) { var temporal; temporal=secre.value; caja.value=temporal; } CONTRASEA: NORMAL:

function ver() { var edad=parseInt(cedad.value); if(edad

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.

function espe() { var tipo=cespe.value; switch(tipo) { case "humano": alert("Eres un Humano"); break; case "planta": alert("Eres un Vegetal"); break; case "animal": alert("Eres del reino Animal"); break; default: alert("Especie Desconocida"); break; } } ESPECIE:

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 VALOR De RETORNO

ACEPTAR true

CANCELAR false

function confirma() { var respuesta=confirm("Pulsa un botn");

if (respuesta==true) alert("Has pulsado ACEPTAR"); else alert("Has pulsado CANCELAR"); }

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:

nombre_funcion(valor1,valor2,valorN);

SINTAXIS DEL DESARROLLO:

function nombre_funcion(var1,var2,varN)

{

sentencia(s);

}

function opt(valor) { if(valor==1) alert("Vas a ir a uno"); else alert("Vas a ir a dos"); } Ejemplo de funciones ir a uno ir a dos

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

}

Ejemplo de funciones uno dos tres cuatro

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.

Igual que un botn de comando. Radio Botones (Radio)

Modo de empleo Control

Construir el elemento como siempre, aadiendo en la etiqueta

el evento change. Y en cada etiqueta aadir el atributo value

para poder identificar cual de los elementos ha sido elegido.

Listas y Listas desplegables

(select)

Igual que una caja de texto o caja de contrasea. Cajas de texto multilnea (area)

Igual que una caja de texto. Cajas de Contrasea (passWord)

Igual que un botn de comando o un radio botn. Casillas de verificacin

(checkBox)

EJEMPLO 1

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

{

banco-=50;

}

c.value=banco;

}

Apuesta:

1

2

3

banco:

Ejemplo 2

function pasa() { var temporal; temporal=secre.value; caja.value=temporal; } CONTRASEA: NORMAL: