BLOQUE IFLUJO DE EJECUCIN SECUENCIAL

INICIO

DATOS

FUNCIONES

RESULTADO FINJavaScript es un lenguaje de programacin creado por la empresa Netscape. Es el lenguaje de programacin ms utilizado en internet para aadir interactividad a las pginas web No confundir con Java. El Java es un lenguaje de programacin de propsito general como lo son C++ o el Visual Basic. Un programa en JavaScript se integra en una pgina Web (entre el cdigo HTML) y es el navegador quien lo interpreta, es decir, no est compilado. CARACTERSTICAS Moderno Sencillo til Potente: permite la POO (programacin orientada a objetos- se basa en que todos los objetos tienen unas propiedades y unas acciones que puede hacer el objeto.) Es barato: slo necesitamos un editor de textos y un navegador. Es visual: permite la programacin visual (ventanas, botones, colores, formularios, etc.) Por ejemplo una ventana es un objeto que tienen acciones como cerrarse, maximizarse... Tiene las propiedades de altura, anchura... JavaScript es una de las mltiples aplicaciones que han surgido para extender las capacidades del Lenguajes HTML. JavaScript es un lenguaje script orientado a documento. Nunca podr hacer un programa, tan slo podr mejorar la pgina Web. Con JavaScript, por ejemplo, en caso de los formularios comprueba que los datos de entrada que alguien inserta son vlidos. Normas: Todo el cdigo (sentencias) est dentro de funciones, aunque puntualmente podremos introducir funciones predefinidas directamente junto con el cdigo HTML. Las funciones se definen entre las etiquetas y (algunos navegadores entienden el javascript si se pone solo )

SINTAXIS BSICA cdigo JavaScript; NORMAS 1- La definicin de funciones debe colocarse entre las etiquetas 2- Las etiquetas no pueden estar colocadas entre las de 3- La llamada a la funcin se hace a travs de un evento de un elemeno del documento o escribiendo la etiqueta , el nombre de la funcin y ejemplo de funcin, como las matemticas: f(x)=3x+2; si f(x)=0; 3x+2=0 ; x=2/3 ; f(2/3)=6/3+2; f(2/3)=4 Una funcin tambin es un algoritmo. QU ES UN ALGORITMO? Secuencia de instrucciones que se ejecutan en un intervalo finito de tiempo, de forma automtica. USO DE FUNCIONES Las funciones son un conjunto de sentencias (bloque de cdigo) terminadas en ; que especifica al programa las operaciones a realizar. Son tiles para evitar la repeticin de lneas y fomentan el diseo modular del cdigo. Para trabajar en ellas hay que hacer dos cosas: Definirlas (cmo se hace algo) Llamarlas cuando lo necesitemos (invocar la funcin, que es escrita una sola vez, y que haga lo que hemos definido) SINTAXIS function nombre_funcin([var1, var2,... varN]) { sentencias(s); } LLAMADA A UNA FUNCIN 1 MANERA

function nombre_funcin([var1, var2,... varN]) { sentencias(s); } 2 MANERA function nombre_funcin([var1, var2,... varN]) { sentencias(s); } nombre_funcin([var1, var2,...varN]);

LA VENTANA ALERT se trata de una ventana estndar que usa unos para mostrar informaicn en patnalla. Se puede mostrar texto, variables y texto en conjunto con variables. El diseo de la ventana ya est definido lo nico que podemos hacer es mostrar la informacioo una o varias lneas. SINTAXIS 1 opcin alert (texto que queramos visualizar); 2 opcin alert(variable); 3 opcin alert(texto+variable); Este cdigo se inserta como cdigo JavaScript dentro del documento HTML o de una funcin.

Ventana Alert. Genera una pgina HTML (que contenga un prrafo) en la qe se defina una funcin cuyo nombre es hola que al ejecutarse muestre el mensaje Hola Mundo!. Esta funcin se ejecutar justo despus de que se procese la etiqueta BODY. La cual guardamos como .html function hola() { alert("Hola Mundo"); } hola(); Este es el primer programa que desarrollamos con JavaScript Ventana Alert. Genera una pgina HTML (que contenga un prrafo) en la que se defina dos funciones: la primera tendr por nombre Hola y se ejecutar al abrir la pgna haciendo uso del evento onLoad y mostrar un mensaje de bienvenida a los usuarios que visiten nuestra pgina. La segunda funin se llamar adis, mostrar un mensaje de despedida y se ejecutar cuando el usuario vaya a cerrar la pgina usando para ello el evento onUnLoad (cuando se actualiza la pgina). Los eventos deben especificarse en la etiqueta BODY. Guardamos como .html function hola() { alert("Bienvenido a nuestra pgina"); } function adios() { alert("Hasta pronto"); } Este es el primer programa que desarrollamos con JavaScript

Ventana Alert. Modifica la prctica anterior creando una nueva funcin que se llame como_estas que pregunte al usuario qu tal estas? Esta funcin debe llamarse desde la funcin hola, y debe ejecutarse justo despus de la ventana de bienvenida. La cual guardamos como .html function hola() { alert("Bienvenido a nuestra pgina"); como_estas(); } function adios() { alert("Hasta pronto"); } function como_estas () { alert("Qu tal ests?") } Este es el primer programa que desarrollamos con JavaScript

EVENTOSUn evento es un mecanismo por el cual podemos detectar las acciones que realiza el usuario y llamar a la funcin que tengamos asociada. Desde esta funcin realizamos las acciones que tengamos desarrolladas. Los eventos ms utilizados son: SE PRODUCE AL.. EVENTO onLoad onUnLoad onAbort onBlur onError onMouseOver onMouseOut Terminar de cargar una pgina o frame (entrar). Descargar una pgina o frame (salir). Abortar la carga de una pgina. Un elemento de formulario, una ventana o un marco pierden el foco La carga de un documento o imagen produce un error Pasar el ratn por encima de un enlace, rea o frame. Dejar de estar el ratn encima de un enlace, rea o frame.

onMouseMove Mover el ratn por el documento. onMouseDown El usuario pulsa un botn del ratn onMouseUp onKeyUp onKeyDown onKeyPress onDragDrop onDblClick onClick onResize onMove onChange onSelect onFocus onSubmit onReset El usuario libera un botn del ratn El usuario libera una tecla El usuario pulsa una tecla El usuario mantiene pulsada una tecla El usuario arrastra y suelta un objeto en la ventana (no en Mac) Se hace click doble en un objeto o formulario Cuando se hace click con el ratn. Dimensionar la ventana del navegador. Mover la ventana del navegador. Modificar texto en un control de edicin (cuadro de texto de un formulario). Sucede al perder el foco. Seleccionar texto en un control de edicin (cuadro de texto de un formulario). Situar el cursos/ratn en un control (elemento del formulario). Enviar un formulario. Inicializar un formulario.

Crea una pgina web, que contenga un botn y dos cuadros de texto. Cuando el usuario pulse el botn debe aparecer vuestro nombre, si se sita en el cursor sobre el primer cuadro deber emerger una ventana indicndoselo, cada vez que pulse una letra en el segundo cuadro debe emerger otra indicndole que acaba de pulsar una tecla y para terminar cada vez que el usuario intente cambiar las dimensiones de la ventana, otro mensaje debe de advertir lo que est haciendo.

function nombre() { alert("Mi nombre es Patricia"); } function advert() { alert("Acabas de hacer pasar por encima"); } function ventana() { alert("Acabas de poner una letra"); }

VARIABLES Y CONSTANTES Una variable es un espacio de memoria con un nombre reservado para guardar la informacin mientras la pgina est cargada. (Un cajoncito que reservamos en algn sitio para guardar algo) El primer paso para poder trabajar con variables declaradas, que es el lugar donde se les da su nombre y se define su mbito de accin. Para dar nombre a una variable debemos tener en cuenta las siguientes normas: No pueden contener espacios Distingue entre maysculas y minsculas, es decir, la variable Numero es distinta a la variable numero. Podemos juntar las palabras capitalizadas (ms recomendado). Ejemplo: onLoad. No pueden contener acentos, puntos o cualquier signo gramatical (barra baja s) No pueden comenzar con un dgitos ni contener la letra . El nombre es nico y exclusivo para cada variable salvo que se definan dos variables distintas con el mismo nombre en 2 funciones distintas. El mbito de accin de una variable define si la variable se podr utilizar en cualquier parte del documento / pgina (es global), o si solo se podr utilizar dentro de una funcin determinada (es local). La sintaxis para declarar una variable es igual en ambos casos, la nica diferencia es el lugar donde declaramos.

SINTAXISvar nombre_variable; var nombre_variable=valor; La asignacin de valor es opcional, aunque intentaremos utilizarla en casi todas las declaraciones para inicializarlas. La declaracin de las variables globales se realiza dentro de la etiqueta: (pero fuera de cualquier funcin) SINTAXIS VARIABLES GLOBALES var variable_uno=valor; var variable_dos=valor; function uno() { ; } function dos() { ; } Cdigo HTML SINTAXIS VARIABLES LOCALES function uno() { var variable_uno=valor; var variable_dos=valor; Cdigo de la funcion uno; } function dos() { var variable_uno=valor; var variable_dos=valor; Cdigo de la funcion dos; }

Cdigo HTML El tipo de dato que almacenar la variable es asignado automticamente por JavaScript. Depende del primer valor que se guarde en la variable. Tipos de variables: TIPO VALORES Numrica Boolean String Cualquier tipo de nmero True or False Texto o letra

Para visualizar el valor almacenado por una variable mediante una ventana alert basta con escribir el siguiente cdigo alert (Texto1+variable+Texto2+variable2+...); Los String se denotan por comillas dobles o comillas simples, pero no ambas a la vez. Es decir: var variable1=Pepito; var variable2='Paquito'; Habitualmente se aaden los String caracteres de control que permiten formatear el texto, los ms usados son: \n salto de linea \t tabulador Por ejemplo: var Variable1 = Pepito \n, /* Escribir Pepito y un salto de lnea, de forma que lo siguiente que se escriba aparecer en la siguiente lnea*/ var Variable2 = \t Paquito; /* Escribir una tabulacin y a continuacin el contenido de la variable */ Prctica 1: Escribe un programa que conste de una funcin que se llamar datos_personales y que al pulsarle salgan tus datos personales. function datos_personales() { var nombre="Patricia Fernndez Cardero"; var edad=19; alert("Nombre: \t"+nombre+"\nEdad: \t"+edad); }

PRACTICA 2: haz una pgina que al abrirla de la bienvenida y tenga un botn que al pulsarlo muestre los datos de la pgina web (nombre de administrador, fecha, correo electrnico) function hola() { alert("Bienbenidos a mi pagina Web"); } function datos_web() { var nombre="Patricia Fernandez Cardero"; var edad=19; var fecha="10/04/2012"; var email="patry_mr93@hotmail.com"; alert("---------------------------------------------"+"\n|Web Master: \t"+nombre+"\n|Edad: \t"+edad+"\n|Fecha de creacion: \t"+fecha+"\n|E-mail: \t"+email+"\n----------------------------------------------"); }

OPERADORES JavaScript define TRES tipos de operadores: aritmticos, relacionales y lgicos Tambin hay definido un operador para realizar determinadas tareas como las (falta) OPERADORES-ASIGNACIN (=) En JavaScript se puede utilizar el operador de asignacin en cualquier expresin vlida. Slo con utilizar un signo de igualdad se realiza la asignacin.

El operador destino (parte izquierda) debe ser siempre una variable, mientras que en la parte derecha puede ser cualquier expresin vlida (constante, variable o expresin). Es posible realizar asignaciones mltiples, igualar variables entre s y a un valor. EQUIVALE A OPERADOR DESCRIPCIN = += -= *= /= %= Asignacin x+=y x-=y x*=y x/=y x%=y x=y x=x+y x=x-y x=x*y x=x/y x=x%y

SINTAXIS variable=valor; variable=variable1; variable=variable1=variable2=variableN=valor; EJEMPLO: MODIFICAR EL VALOR DE LAS VARIABLES NOMBRE Y EDAD (solo se pone var una vez para definir la misma variable. Las variables siempre al comienzo de la funcin) function datos_personales() { var nombre="Patricia Fernndez Cardero"; var edad=19; alert("Nombre: \t"+nombre+"\nEdad: \t"+edad); alert("Cambios los valores anteriores"); nombre="Patricia"; edad=20; alert("Nombre: \t"+nombre+"\nEdad: \t"+edad); } OPERADORES ARITMTICOS Pueden aplicarse a todo tipo de expresiones Son utilizados para realizar operaciones matemticas sencillas, aunque unindolos se puede realizar cualquier tipo de operacin:

OPERADOR + * / % N e N Raz cuadrada

DESCRIPCIN Resta Suma Multiplicacin Divisin Resto de una divisin. Ejemplo: resto de 10 dividido entre 3: 10%2Math.e Math.pi Math.sqrt()

Para realizar las dems races tenemos que considerarlas potencias y fracciones.Math.pow(n1, n)

Logaritmo en base 2 Logaritmo en base 10 Logaritmo en base 2 de e Math.abs(valor); Math.cos(valor); Math.log(valor); Math.max(val1,val2,val3, ); Math.min(val1,val2,val3, ); Math.pow(base,exponte); Math.random()*interv; Math.random(y-x) *Math.random()+x Math.round(valor); Math.sin(valor); Math.tan(valor); -++ vari+=valor vari-=valor vari*=valor

Math.ln2 Math.ln10 Math.log2e

Logaritmo en base 10 de e Math.log10e Valor absoluto. Coseno de un ngulo (radianes). Logaritmo decimal de valor. Devuelve el mayor de los nmeros en la lista. Devuelve el menor de los nmeros en la lista. Base exponente Nmero aleatorio entre 0 y el intervalo. Nmero aleatorio entre x e y. Por ejemplo entre 10 y 34 (x=10 e y=34). Redondea un valor con decimales. Seno de un ngulo (radianes). Tangente de un ngulo (radianes). Decremento en 1 Incremento en 1 Incrementa el valor de vari Decrementa el valor de vari Multiplica el valor de vari

OPERADORES LGICOS Y RELACIONALES Los operadores relacionales hacen referencia a la relacin entre unos valores y otros. Los lgicos se refieren a la forma en que esas relaciones pueden conectarse entre s. OPERADORES RELACIONALES OPERADOR < > = == != DESCRIPCIN Menor que Mayor que Menor o igual que Mayor o igual que Igual distinto OPERADORES LGICOS OPERADOR && || DESCRIPCIN Y (AND) O (OR) NO (NOT) (el resultado es verdadero si ambas expresiones son verdaderas) (el resultado es verdadero si alguna expresin es verdadera) (el resultado invierte la condicin de la expresin) El operador lgico OR x true true y true resultado true

El operador lgico AND x true true y true resultado true

false false false

false true true

false true

false true

false false false

false false false El operador lgico NOT x true resultado false

false true Los operadores AND y OR combinan expresiones relacionales cuyo resultado viene dado por la ltima columna de sus tablas de verdad. Por ejemplo:(a