JavaScript índice 1. Introducción 6. Estructuras de control 5. Operadores 8. Objetos 2. Un primer ejemplo 3. Variables y constantes 4. Tipos de datos 7.

Presentación del tema: "JavaScript índice 1. Introducción 6. Estructuras de control 5. Operadores 8. Objetos 2. Un primer ejemplo 3. Variables y constantes 4. Tipos de datos 7."— Transcripción de la presentación:

1 JavaScript índice 1. Introducción 6. Estructuras de control 5. Operadores 8. Objetos 2. Un primer ejemplo 3. Variables y constantes 4. Tipos de datos 7. Funciones y eventos Índice 1. IntroducciónIntroducción 2. Un primer ejemploUn primer ejemplo 3. Constantes y variablesConstantes y variables 4. Tipos de datosTipos de datos 5. OperadoresOperadores 6. Estructuras de controlEstructuras de control 7. Funciones y eventosFunciones y eventos 8. ObjetosObjetos

2 JavaScript índice 1. Introducción 6. Estructuras de control 5. Operadores 8. Objetos 2. Un primer ejemplo 3. Variables y constantes 4. Tipos de datos 7. Funciones y eventos JavaScript es un lenguaje de programación creado por Netscape que se integra dentro de HTML y nos permitirá crear páginas interactivas. 1. Introducción

3 JavaScript índice 1. Introducción 6. Estructuras de control 5. Operadores 8. Objetos 2. Un primer ejemplo 3. Variables y constantes 4. Tipos de datos 7. Funciones y eventos JavaScript ≠ JAVA JavaScript es un lenguaje que funciona como extensión HTML y que es interpretado por el navegador, es independiente del servidor donde está alojado. JAVA es un lenguaje independiente no necesita HTML para funcionar. El código no se interpreta en el navegador 1. Introducción

4 JavaScript índice 1. Introducción 6. Estructuras de control 5. Operadores 8. Objetos 2. Un primer ejemplo 3. Variables y constantes 4. Tipos de datos 7. Funciones y eventos Al ser (JavaScript) interpretado en el navegador, una vez cargado el código se puede ejecutar cuantas veces sea necesario sin acceder al servidor. Por ejemplo, podemos crear una función que compruebe un campo fecha de un formulario. Si el usuario introduce una fecha incorrecta, saldrá un mensaje de error sin tener que cargar una nueva página. 1. Introducción

5 JavaScript índice 1. Introducción 6. Estructuras de control 5. Operadores 8. Objetos 2. Un primer ejemplo 3. Variables y constantes 4. Tipos de datos 7. Funciones y eventos Como ocurre con CSS la interpretación que cada navegador hace de un código puede ser muy particular. Iexplorer soporta una especie de JavaScript llamado jscript, que es muy similar a JavaScript, pero no es compatible 100%. Por este motivo debemos comprobar el código que realicemos en distintos navegadores, sobre todo en este último, al ser el más extendido. 1. Introducción

6 JavaScript índice 1. Introducción 6. Estructuras de control 5. Operadores 8. Objetos 2. Un primer ejemplo 3. Variables y constantes 4. Tipos de datos 7. Funciones y eventos En una misma página podemos insertar distintos trozos de código JavaScript, cada uno de ellos encerrado entre las directivas: Y 1. Introducción 1. Inserción en HTML

7 JavaScript índice 1. Introducción 6. Estructuras de control 5. Operadores 8. Objetos 2. Un primer ejemplo 3. Variables y constantes 4. Tipos de datos 7. Funciones y eventos código HTML de cabecera código JavaScript código HTML código JavaScript código HTML código JavaScript código HTML 1. Introducción 1. Inserción en HTML

8 JavaScript índice 1. Introducción 6. Estructuras de control 5. Operadores 8. Objetos 2. Un primer ejemplo 3. Variables y constantes 4. Tipos de datos 7. Funciones y eventos El atributo “languaje” de la etiqueta SCRIPT indica el lenguaje que vamos a utilizar, que por defecto es JavaScript, por lo que podemos omitirlo. Ejercicio: Lo siguiente es código JavaScript. Insértalo en una página HTML de manera correcta y observa el resultado: alert(“Esto es una nota informativa”); 1. Introducción 1. Inserción en HTML

9 JavaScript índice 1. Introducción 6. Estructuras de control 5. Operadores 8. Objetos 2. Un primer ejemplo 3. Variables y constantes 4. Tipos de datos 7. Funciones y eventos Nota importante: JavaScript es un lenguaje sensible a las mayúsculas (Case Sensitive) por lo que los siguientes nombres de variables son diferentes: Resultado RESULTADO resultado 1. Inserción en HTML 1. Introducción

10 JavaScript índice 1. Introducción 6. Estructuras de control 5. Operadores 8. Objetos 2. Un primer ejemplo 3. Variables y constantes 4. Tipos de datos 7. Funciones y eventos Al igual que CSS podemos crear un fichero externo que contenga código JavaScript. Su extensión será.js Para llamarlo utilizaremos el atributo src de la etiqueta SCRIPT 1. Inserción en HTML. Archivo Externo 1. Introducción

11 JavaScript índice 1. Introducción 6. Estructuras de control 5. Operadores 8. Objetos 2. Un primer ejemplo 3. Variables y constantes 4. Tipos de datos 7. Funciones y eventos TEMA 2. Hojas de Estilo Ejercicio: dado el código JavaScript ejecutarlo mediante una llamada a un fichero externo: Var hoy=new Date(); Dia=hoy.getDate(); Mes=hoy.getMonth()+1; Anio=hoy.getYear(); alert(“Hoy es “+Dia+” del “+Mes+” de “+Anio); 1. Inserción en HTML. Archivo Externo Resultado 1. Introducción

12 JavaScript índice 1. Introducción 6. Estructuras de control 5. Operadores 8. Objetos 2. Un primer ejemplo 3. Variables y constantes 4. Tipos de datos 7. Funciones y eventos Se pueden introducir de dos formas distintas: // Comentarios en una sola línea /* En varias líneas: todo lo que escribamos entre estos dos símbolos no será tenido en cuenta por el navegador*/ Comentarios 1. Introducción

13 JavaScript índice 1. Introducción 6. Estructuras de control 5. Operadores 8. Objetos 2. Un primer ejemplo 3. Variables y constantes 4. Tipos de datos 7. Funciones y eventos Podemos encerrar cualquier trozo de código entre llaves. Más adelante veremos que el código de una función va encerrado entre llaves {} Llaves Punto y coma ; El símbolo ; se utiliza para separar sentencias. Pondremos uno al finalizar cada línea de instrucción. Si la instrucción es larga y ocupa más de una línea, no pondremos uno en cada línea, sino de la misma forma, al finalizar la instrucción. 1. Introducción

14 JavaScript índice 1. Introducción 6. Estructuras de control 5. Operadores 8. Objetos 2. Un primer ejemplo 3. Variables y constantes 4. Tipos de datos 7. Funciones y eventos TEMA 2. Hojas de Estilo imagen1=new Image imagen1.src="imagenes/dedo.jpg" imagen2=new Image imagen2.src="imagenes/dedo1.jpg" var i=1; function cambio_icono() { if (i == 1) { document.images['icono'].src=imagen2.src; i=2; } else { document.images['icono'].src=imagen1.src; i=1; } 2. Un primer ejemplo Resultado Ejemplo

15 JavaScript índice 1. Introducción 6. Estructuras de control 5. Operadores 8. Objetos 2. Un primer ejemplo 3. Variables y constantes 4. Tipos de datos 7. Funciones y eventos Son elementos que se utilizan en todos los lenguajes y sirven para almacenar datos temporalmente. A la hora de asignar un nombre a una variable tenemos que tener en cuenta lo siguiente: Primer carácter: letra ó _ Resto caracteres: letras, números ó _ sin espacios intermedios No utilizar palabras reservadas Diferencia entre mayúsculas y minúsculas. Conviene seguir una norma. 3. Variables y constantes Variables

16 JavaScript índice 1. Introducción 6. Estructuras de control 5. Operadores 8. Objetos 2. Un primer ejemplo 3. Variables y constantes 4. Tipos de datos 7. Funciones y eventos ResultadoSuma, Resultadosuma y resultadosuma son tres variables distintas. En los navegadores antiguos era necesario declara las variables antes de usarla. En los actuales no. Para declarar una variable basta con poner “var” y seguidamente su nombre: var nombre1; Variables 3. Variables y constantes

17 JavaScript índice 1. Introducción 6. Estructuras de control 5. Operadores 8. Objetos 2. Un primer ejemplo 3. Variables y constantes 4. Tipos de datos 7. Funciones y eventos En JavaScripts las constantes se tratan como una variable a la que no se le cambia nunca el valor. Constantes 3. Variables y constantes

18 JavaScript índice 1. Introducción 6. Estructuras de control 5. Operadores 8. Objetos 2. Un primer ejemplo 3. Variables y constantes 4. Tipos de datos 7. Funciones y eventos Existen distintos tipos de variables: De cadena: son aquellas que contienen una cadena de texto. Se definen mediante comillas simples o dobles. Existen una serie de caracteres especiales que podemos usar en ellas: \n, \t, \\, \”, \’ Ejemplo: var cadena1=“\n\tEjemplo de \ncadena”; alert (cadena1); Tipos de Variables 4. Tipos de datos

19 JavaScript índice 1. Introducción 6. Estructuras de control 5. Operadores 8. Objetos 2. Un primer ejemplo 3. Variables y constantes 4. Tipos de datos 7. Funciones y eventos Numérica: son aquellas que conienen números. Ejemplos: var numero=100; var numero=-100; Booleanas: son aquellas que solo tienen dos valores posibles, verdadero o falso (true / false). var abierta=true; Tipos de Variables 4. Tipos de datos

20 JavaScript índice 1. Introducción 6. Estructuras de control 5. Operadores 8. Objetos 2. Un primer ejemplo 3. Variables y constantes 4. Tipos de datos 7. Funciones y eventos Undefined: son aquellas que han sido declaradas pero no tienen ningún valor asignado: 4. Tipos de datos Tipos de Variables

21 JavaScript índice 1. Introducción 6. Estructuras de control 5. Operadores 8. Objetos 2. Un primer ejemplo 3. Variables y constantes 4. Tipos de datos 7. Funciones y eventos En JavaScript los operadores se dividen en varios grupos: Aritméticos Lógicos De Comparación Condicionales Bit a Bit De asignación Especiales 5. Operadores Operadores

22 JavaScript índice 1. Introducción 6. Estructuras de control 5. Operadores 8. Objetos 2. Un primer ejemplo 3. Variables y constantes 4. Tipos de datos 7. Funciones y eventos Son aquellos que se encargan de realizar los operaciones básicas como suma, resta, multiplicación, división, módulo, incremento, decremento,… Operadores Aritméticos 5. Operadores

23 JavaScript índice 1. Introducción 6. Estructuras de control 5. Operadores 8. Objetos 2. Un primer ejemplo 3. Variables y constantes 4. Tipos de datos 7. Funciones y eventos Ejemplo: var v1, v2; var suma, division, modulo; v1=2; v2=11; suma=v1+v2; division=v2/v1; modulo=??? document.write("suma: "+suma+" "); document.write("division: "+division+"\n"); document.write("modulo: "+modulo+"\n"); Operadores Aritméticos 5. Operadores

24 JavaScript índice 1. Introducción 6. Estructuras de control 5. Operadores 8. Objetos 2. Un primer ejemplo 3. Variables y constantes 4. Tipos de datos 7. Funciones y eventos Incremento y decremento son operadores que suman o restan una unidad a una variable. La sintáxis es la siguiente: variable++; Ejercicio: crea el siguiente código: Declara una variable cualquiera Asígnale un valor cualquiera Muestra su valor en la página Increméntalo con este operador Muestra de nuevo su valor Operadores Aritméticos 5. Operadores

25 JavaScript índice 1. Introducción 6. Estructuras de control 5. Operadores 8. Objetos 2. Un primer ejemplo 3. Variables y constantes 4. Tipos de datos 7. Funciones y eventos Son los que operan con datos booleanos y son los siguientes. && “y lógico” ||“o lógico” !“negación” Operadores Lógicos 5. Operadores

26 JavaScript índice 1. Introducción 6. Estructuras de control 5. Operadores 8. Objetos 2. Un primer ejemplo 3. Variables y constantes 4. Tipos de datos 7. Funciones y eventos Ejercicio: Tabla de verdad de &&. Rellena los siguientes valores: true && true = true && false = false && true = false && false = true || true = true || false = false || true = false || false = !false = !true = Crea 10 variables, una para cada operación y asigna cada operación a su variable. Muestra el resultado mediante alert Operadores Lógicos 5. Operadores

27 JavaScript índice 1. Introducción 6. Estructuras de control 5. Operadores 8. Objetos 2. Un primer ejemplo 3. Variables y constantes 4. Tipos de datos 7. Funciones y eventos Sirven para comparar valores y siempre devuelven “true”o “false”. Son los siguientes: Igualdad (a==b): Devuelve “true” si los a y b son iguales No igualdad (a!=b): Devuelve “true” si a y b son distintos Mayor que (a>b): Devuelve “true” si a es mayor que b Menor que (a<b): Devuelve “true” si a es menor que b Mayor o igual que (a>=b): Devuelve “true” si a es mayor o igual que b Menor o igual que (a<=b): Devuelve “true” si a es menor o igual que b Operadores de comparación 5. Operadores

28 JavaScript índice 1. Introducción 6. Estructuras de control 5. Operadores 8. Objetos 2. Un primer ejemplo 3. Variables y constantes 4. Tipos de datos 7. Funciones y eventos Ejemplos: Indica el valor de result en cada caso: var var1,var2,result; var1=5; var2=10; result=(5==var1); result=(5!=var1); result=(var2==var1); result=(var1>var2); result=(var1<=var2); Operadores de comparación 5. Operadores

29 JavaScript índice 1. Introducción 6. Estructuras de control 5. Operadores 8. Objetos 2. Un primer ejemplo 3. Variables y constantes 4. Tipos de datos 7. Funciones y eventos Ejemplos: Indica el valor de result en cada caso: var var1,var2,result; var1=5; var2=10; var3=5; var4=8; result=(5==var1&&var2==var4); result=(5==var1||var2==var4); result=(var1 =var1); Operadores de comparación 5. Operadores

30 JavaScript índice 1. Introducción 6. Estructuras de control 5. Operadores 8. Objetos 2. Un primer ejemplo 3. Variables y constantes 4. Tipos de datos 7. Funciones y eventos Es una forma de expresar una instrucción condicional: (condicion)?instruccion1:instruccion2; Ejemplo: var i,texto; i=prompt(“Escribe una calificación"); (i<5)?texto=“superado":texto=“no superado”; document.write(“El examen está: "+texto+" "); Operadores condicionales 5. Operadores

31 JavaScript índice 1. Introducción 6. Estructuras de control 5. Operadores 8. Objetos 2. Un primer ejemplo 3. Variables y constantes 4. Tipos de datos 7. Funciones y eventos Son los que operan con los datos a nivel de bit. Algunos de estos operadores son: & operación AND | operación OR ~operación NOT Calcular el resultado de las siguientes operaciones utilizando estos operadores: 3&5= 3|5= Operadores bit a bit 5. Operadores

32 JavaScript índice 1. Introducción 6. Estructuras de control 5. Operadores 8. Objetos 2. Un primer ejemplo 3. Variables y constantes 4. Tipos de datos 7. Funciones y eventos Solución: var result; result=3&5; document.write("resultado de 3&5: "+result+" "); result=3|5; document.write("resultado de 3|5: "+result); Operadores bit a bit 5. Operadores

33 JavaScript índice 1. Introducción 6. Estructuras de control 5. Operadores 8. Objetos 2. Un primer ejemplo 3. Variables y constantes 4. Tipos de datos 7. Funciones y eventos Ya hemos visto la más sencilla de ellas que es la siguiente: v1=v2; Existen otras como: v1+=v2; v1-=v2; Ejercicio: comprueba qué efecto tienen estas dos operaciones sobre v1. Operadores de asignación 5. Operadores

34 JavaScript índice 1. Introducción 6. Estructuras de control 5. Operadores 8. Objetos 2. Un primer ejemplo 3. Variables y constantes 4. Tipos de datos 7. Funciones y eventos Existen otros operadores que no están incluidos en ninguno de los grupos anteriores. Algunos de ellos son: instanceof – indica si un objeto es de un tipo determinado, por ejemplo: var result,fecha; fecha=new Date(); result=fecha instanceof Date; document.write("resultado de 'instanceof': "+result); new – crea una instancia de un objeto, por ejemplo: fecha =new Date(); Operadores especiales 5. Operadores

35 JavaScript índice 1. Introducción 6. Estructuras de control 5. Operadores 8. Objetos 2. Un primer ejemplo 3. Variables y constantes 4. Tipos de datos 7. Funciones y eventos typeof – indica el tipo de dato que contiene una variable. La sintaxis es la siguiente: typeof variable; Ejercicio: Genera un código cuyo resultado sea el siguiente: Tipo de 'fecha': XXXXXX Tipo de 'v1': XXXXXX Tipo de 'v2': XXXXXX Tipo de 'v3': XXXXXX Donde fecha, v1, v2 y v3 son variables y tienen los siguientes valores: fecha=new Date(); v1=1; v2="10/08/79"; Nota: XXXXXX es el tipo de variable de cada una de ellas Operadores especiales 5. Operadores

36 JavaScript índice 1. Introducción 6. Estructuras de control 5. Operadores 8. Objetos 2. Un primer ejemplo 3. Variables y constantes 4. Tipos de datos 7. Funciones y eventos Nos van a servir para tomar decisiones según ciertas condiciones y para ejecutar un mismo código repetidas veces variando algún dato. En JavaScript disponemos de las siguientes instrucciones de control: if => instrucción condicional for while=> instrucciones de repetición do while switch => instrucción de selección múltiple 6. Estructuras de control Estructuras de control

37 JavaScript índice 1. Introducción 6. Estructuras de control 5. Operadores 8. Objetos 2. Un primer ejemplo 3. Variables y constantes 4. Tipos de datos 7. Funciones y eventos Instrucción if - else Se utiliza para ejecutar un conjunto de instrucciones si se cumple una condición y otro conjunto de instrucciones diferente si no se cumple. La sintaxis es la siguiente: if(condicion) {instrucciones A; } else {instrucciones B; } 6. Estructuras de control

38 JavaScript índice 1. Introducción 6. Estructuras de control 5. Operadores 8. Objetos 2. Un primer ejemplo 3. Variables y constantes 4. Tipos de datos 7. Funciones y eventos Instrucción if - else El bloque else no es obligatorio, en ese caso la instrucción quedaría de la siguiente forma: if(condicion) {instrucciones; } La condición es una operación que devuelve un resultado booleano, true o false, para ello utilizaremos los operadores lógicos, los de comparación e incluso operadores especiales como instanceof. 6. Estructuras de control

39 JavaScript índice 1. Introducción 6. Estructuras de control 5. Operadores 8. Objetos 2. Un primer ejemplo 3. Variables y constantes 4. Tipos de datos 7. Funciones y eventos Instrucción if - else Ejemplo: crear una página cuyo fondo sea de color “#ff0000” (rojo) y que contenga una imagen. Cada vez que pulsemos la imagen el color de fondo cambiará de manera que si estaba de color “#ff0000” pasará a color “#008000” (verde) y viceversa. 6. Estructuras de control

40 JavaScript índice 1. Introducción 6. Estructuras de control 5. Operadores 8. Objetos 2. Un primer ejemplo 3. Variables y constantes 4. Tipos de datos 7. Funciones y eventos Instrucción if - else Solución: function cambiafondo() { if(document.bgColor=="#ff0000") {document.bgColor="#008000"; } else {document.bgColor="#ff0000"; } 6. Estructuras de control

41 JavaScript índice 1. Introducción 6. Estructuras de control 5. Operadores 8. Objetos 2. Un primer ejemplo 3. Variables y constantes 4. Tipos de datos 7. Funciones y eventos Instrucción if - else Ejercicio: Escribe un código que solicite que escribas tu nombre con el comando prompt. A continuación solicita que escribas tu primer apellido con otro prompt, almacenándolo en variables distintas. Si tu nombre es Alberto Ruíz, aparecerá un mensaje indicando que tienes permiso para entrar en la página. De lo contrario, aparecerá un mensaje indicando que no puedes entrar. 6. Estructuras de control

42 JavaScript índice 1. Introducción 6. Estructuras de control 5. Operadores 8. Objetos 2. Un primer ejemplo 3. Variables y constantes 4. Tipos de datos 7. Funciones y eventos Instrucción if - else Solución: var nombre,apellido; nombre=prompt("Escribe tu nombre"); apellido=prompt("Escribe tu primer apellido"); if(nombre=="alberto" && apellido=="ruiz") {alert("puedes pasar"); } else {alert("no puedes pasar"); } 6. Estructuras de control

43 JavaScript índice 1. Introducción 6. Estructuras de control 5. Operadores 8. Objetos 2. Un primer ejemplo 3. Variables y constantes 4. Tipos de datos 7. Funciones y eventos Instrucción if - else Las instrucciones que introducimos dentro del bloque de instrucciones también pueden ser instrucciones de control, incluida la instrucción if (if anidados). Ejemplo: var nombre; nombre=prompt("Escribe tu nombre",""); if(nombre=="Pepe") {alert("Bienvenido/a "+nombre+". Puedes pasar"); } else {if(nombre=="Francisca") {alert("Bienvenido/a "+nombre+". Puedes pasar"); } else {alert("Lo siento. No puede pasar"); } 6. Estructuras de control

44 JavaScript índice 1. Introducción 6. Estructuras de control 5. Operadores 8. Objetos 2. Un primer ejemplo 3. Variables y constantes 4. Tipos de datos 7. Funciones y eventos Instrucción if - else Ejercicio: modificar el código anterior de manera que haga lo mismo, pero utilizando solo una estructura if 6. Estructuras de control

45 JavaScript índice 1. Introducción 6. Estructuras de control 5. Operadores 8. Objetos 2. Un primer ejemplo 3. Variables y constantes 4. Tipos de datos 7. Funciones y eventos Instrucción for Nos va a servir para ejecutar un mismo código un número determinado de veces. Para ello hay que establecer tres parámetros: Valor inicial del contador Condición, que hará que el bucle pueda llegar en algún momento a su fin Incremento del contador La sintaxis de esta instrucción es la siguiente: For(valor incial; condicion; incremento) {instrucciones; } 6. Estructuras de control

46 JavaScript índice 1. Introducción 6. Estructuras de control 5. Operadores 8. Objetos 2. Un primer ejemplo 3. Variables y constantes 4. Tipos de datos 7. Funciones y eventos Instrucción for Ejemplo: var cont; for(cont=1;cont<11;cont++) {document.write(cont+" "); } ¿Qué hace este código? 6. Estructuras de control

47 JavaScript índice 1. Introducción 6. Estructuras de control 5. Operadores 8. Objetos 2. Un primer ejemplo 3. Variables y constantes 4. Tipos de datos 7. Funciones y eventos Instrucción for Ejercicio: Modificar el código anterior para que escriba los números impares que hay entre el 1 y el 20 6. Estructuras de control

48 JavaScript índice 1. Introducción 6. Estructuras de control 5. Operadores 8. Objetos 2. Un primer ejemplo 3. Variables y constantes 4. Tipos de datos 7. Funciones y eventos Instrucción for Ejercicio: Crear un código que pida un número al usuario y repita una frase tantas veces como indique ese número 6. Estructuras de control

49 JavaScript índice 1. Introducción 6. Estructuras de control 5. Operadores 8. Objetos 2. Un primer ejemplo 3. Variables y constantes 4. Tipos de datos 7. Funciones y eventos Instrucción for Solución: var cont,n; n=prompt("escribe un número",""); document.write("Voy a escribir hola "+n+" veces "); for(cont=0;cont<n;cont++) {document.write(cont+" hola "); } 6. Estructuras de control

50 JavaScript índice 1. Introducción 6. Estructuras de control 5. Operadores 8. Objetos 2. Un primer ejemplo 3. Variables y constantes 4. Tipos de datos 7. Funciones y eventos Instrucción for Ejercicio: Crear un código que pida tres veces un número al usuario y escriba si cada uno de esos números es mayor, menor o igual a 10. 6. Estructuras de control

51 JavaScript índice 1. Introducción 6. Estructuras de control 5. Operadores 8. Objetos 2. Un primer ejemplo 3. Variables y constantes 4. Tipos de datos 7. Funciones y eventos Instrucción for Solución: var cont,n; document.write(" Mayor o menor "); for(cont=1;cont<4;cont++) {n=prompt("Escribe un número: ",""); if(n > 10) {document.write("El numero es mayor que 10"+" "); } else {if(n == 10) {document.write("El número es 10"+" "); } else {document.write("El número es menor que 10"+" "); } 6. Estructuras de control

52 JavaScript índice 1. Introducción 6. Estructuras de control 5. Operadores 8. Objetos 2. Un primer ejemplo 3. Variables y constantes 4. Tipos de datos 7. Funciones y eventos Instrucción for Ejercicio: Con la siguiente instrucción se almacena en n un número del 1 al 10: n=Math.ceil(Math.random()*10); Utilizad esta instrucción para crear un juego en el que el usuario tiene que adivinar el número indicado. Máximo se permiten 5 intentos. 6. Estructuras de control

53 JavaScript índice 1. Introducción 6. Estructuras de control 5. Operadores 8. Objetos 2. Un primer ejemplo 3. Variables y constantes 4. Tipos de datos 7. Funciones y eventos Instrucción for Solución: var cont,n,p; n=Math.ceil(Math.random()*10); for(cont=0;cont<5;cont++) {p=prompt("Introduce un número: ",""); if(p == n) {alert("enhorabuena!!! Has acertado!!!"); cont=5; } else {if(n > p) {document.write("El número es mayor que "+p+" "); } else {document.write("El número es menor que "+p+" "); } alert("El número correcto era: "+n); 6. Estructuras de control

54 JavaScript índice 1. Introducción 6. Estructuras de control 5. Operadores 8. Objetos 2. Un primer ejemplo 3. Variables y constantes 4. Tipos de datos 7. Funciones y eventos Instrucción while Sirve para ejecutar un conjunto de instrucciones mientras se cumpla una condición dada. La sintaxis es la siguiente: while(condicion) {instrucciones; } 6. Estructuras de control

55 JavaScript índice 1. Introducción 6. Estructuras de control 5. Operadores 8. Objetos 2. Un primer ejemplo 3. Variables y constantes 4. Tipos de datos 7. Funciones y eventos Instrucción while Ejemplo: var i=0; while(i<11) {alert(“Valor de i: “+i+” ”); i++; } 6. Estructuras de control

56 JavaScript índice 1. Introducción 6. Estructuras de control 5. Operadores 8. Objetos 2. Un primer ejemplo 3. Variables y constantes 4. Tipos de datos 7. Funciones y eventos Instrucción while Importante: Hay que prestar mucha atención a la condición, ya que si se cumple indefinidamente el bucle nunca finaliza y la ejecución quedará bloqueada. Ejemplo: en el código anterior, si por error olvidamos incrementar la variable, siempre se cumplirá la condición: var i=0; while(i<11) {alert(“Valor de i: “+i+” ”); i++; } 6. Estructuras de control

57 JavaScript índice 1. Introducción 6. Estructuras de control 5. Operadores 8. Objetos 2. Un primer ejemplo 3. Variables y constantes 4. Tipos de datos 7. Funciones y eventos Instrucción while Ejercicio: Solicitar una clave y comprobar si es correcta. Si no lo es, debe seguir pidiéndola hasta que sea correcta. 6. Estructuras de control

58 JavaScript índice 1. Introducción 6. Estructuras de control 5. Operadores 8. Objetos 2. Un primer ejemplo 3. Variables y constantes 4. Tipos de datos 7. Funciones y eventos Instrucción while Ejercicio: 1.- Crear un programa que solicita un nombre de un alumno y tres notas diferentes. Debe calcular la nota media e imprimirla junto con el nombre en forma de tabla: nombreNotaMedia 2.- Modificar el código anterior de manera que solicite el número de alumnos al principio y repita el código para cada uno de los alumnos creando una tabla con todos ellos 6. Estructuras de control

59 JavaScript índice 1. Introducción 6. Estructuras de control 5. Operadores 8. Objetos 2. Un primer ejemplo 3. Variables y constantes 4. Tipos de datos 7. Funciones y eventos Instrucción while Solución: var i,nombre,n1,n2,n3,media; n1=0; n=prompt("Introduce el número de alumnos",""); document.write(" Nombre Media "); for(i=1;i<=n;i++) {nombre=prompt("Nombre: ",""); n1=parseInt(prompt("Nota1","")); n2=parseInt(prompt("Nota2","")); n3=parseInt(prompt("Nota3","")); media=(n1+n2+n3)/3; document.write(" "+nombre+" "+medi a+" "); } document.write(" "); 6. Estructuras de control

60 JavaScript índice 1. Introducción 6. Estructuras de control 5. Operadores 8. Objetos 2. Un primer ejemplo 3. Variables y constantes 4. Tipos de datos 7. Funciones y eventos Instrucción do while Esta instrucción no existía en versiones antiguas de JavaScript, por lo que puede que no funcione en navegadores antiguos. Es muy similar al bucle while, la única diferencia es que antes de evaluar por primera vez la condición ejecuta el bloque de código, por lo que siempre se ejecuta al menos una vez. Sintaxis: do {instrucciones; }while(condición); 6. Estructuras de control

61 JavaScript índice 1. Introducción 6. Estructuras de control 5. Operadores 8. Objetos 2. Un primer ejemplo 3. Variables y constantes 4. Tipos de datos 7. Funciones y eventos Instrucción do while Código con while: var i=0; while(i<0) {alert(“Mensaje”); } Código con do while: var i=0; do {alert(“Mensaje”); }while(i<0); 6. Estructuras de control

62 JavaScript índice 1. Introducción 6. Estructuras de control 5. Operadores 8. Objetos 2. Un primer ejemplo 3. Variables y constantes 4. Tipos de datos 7. Funciones y eventos Funciones Una función es un conjunto de instrucciones que ejecutan una tarea concreta. Debemos diferenciar entre definición de la función y llamada a la función. La definición es la descripción de la función en sí y que será ejecutado cuando sea llamada. 7. Funciones y eventos

63 JavaScript índice 1. Introducción 6. Estructuras de control 5. Operadores 8. Objetos 2. Un primer ejemplo 3. Variables y constantes 4. Tipos de datos 7. Funciones y eventos Partes de una función Una definición de función consta de las siguientes partes: Palabra clave function Nombre de la función. Las reglas para crear este nombre son las mismas que para crear nombres de variables Argumentos. Son los valores que pasamos a una función cuando la llamamos y que pueden ser utilizados en su código. Los argumentos se separan entre sí por comas y se encierran entre llaves. La lista de argumentos puede ser vacía. Instrucciones. Van encerradas entre llaves 7. Funciones y eventos

64 JavaScript índice 1. Introducción 6. Estructuras de control 5. Operadores 8. Objetos 2. Un primer ejemplo 3. Variables y constantes 4. Tipos de datos 7. Funciones y eventos Partes de una función Sintáxis: function nombre_funcion(argumentos) {instrucciones; } La definición de las funciones se suele situar en la cabecera del documento. La función no se ejecuta hasta que es llamada por su nombre de la siguiente forma: nombre_funcion(); 7. Funciones y eventos

65 JavaScript índice 1. Introducción 6. Estructuras de control 5. Operadores 8. Objetos 2. Un primer ejemplo 3. Variables y constantes 4. Tipos de datos 7. Funciones y eventos Partes de una función Ejemplo: function saludo() {document.write(“HOLA”); } saludo(); 7. Funciones y eventos

66 JavaScript índice 1. Introducción 6. Estructuras de control 5. Operadores 8. Objetos 2. Un primer ejemplo 3. Variables y constantes 4. Tipos de datos 7. Funciones y eventos Argumentos Los argumentos son los valores que se pasan en la llamada y se podrán utilizar en las instrucciones de la función. Ejemplo: function saludo(nombre) {document.write(“HOLA ”+nombre); } n=prompt(“Nombre”,””); saludo(n); 7. Funciones y eventos

67 JavaScript índice 1. Introducción 6. Estructuras de control 5. Operadores 8. Objetos 2. Un primer ejemplo 3. Variables y constantes 4. Tipos de datos 7. Funciones y eventos Valor de una función Las funciones también pueden devolver valores. Esto se hace con la instrucción return de la siguiente forma: function Mitad(valor) {return valor/2; } La llamada a esta función sería por ejemplo; n=Mitad(10); Después de ejecutar la instrucción el valor de n es 5. 7. Funciones y eventos

68 JavaScript índice 1. Introducción 6. Estructuras de control 5. Operadores 8. Objetos 2. Un primer ejemplo 3. Variables y constantes 4. Tipos de datos 7. Funciones y eventos Eventos Los eventos son sucesos que ocurren cuando el usuario realiza una acción, como por ejemplo pulsar un botón o pasar sobre una imagen. 7. Funciones y eventos

69 JavaScript índice 1. Introducción 6. Estructuras de control 5. Operadores 8. Objetos 2. Un primer ejemplo 3. Variables y constantes 4. Tipos de datos 7. Funciones y eventos Eventos Los eventos se están asociados a elementos HTML, no a elementos JavaScript. Para asociar el evento a un conjunto de instrucciones, creamos una función y la llamamos cuando se produzca el evento utilizando los atributos de evento de las etiquetas HTML. 7. Funciones y eventos

70 JavaScript índice 1. Introducción 6. Estructuras de control 5. Operadores 8. Objetos 2. Un primer ejemplo 3. Variables y constantes 4. Tipos de datos 7. Funciones y eventos Eventos Ejemplo: function saludo() {alert("Hola"); } 7. Funciones y eventos

71 JavaScript índice 1. Introducción 6. Estructuras de control 5. Operadores 8. Objetos 2. Un primer ejemplo 3. Variables y constantes 4. Tipos de datos 7. Funciones y eventos Eventos Ejercicio: Buscar listado de eventos 7. Funciones y eventos

72 JavaScript índice 1. Introducción 6. Estructuras de control 5. Operadores 8. Objetos 2. Un primer ejemplo 3. Variables y constantes 4. Tipos de datos 7. Funciones y eventos Objetos Un objeto es algo que tiene unas características y un comportamiento particular. Es un conjunto de propiedades y funciones (llamadas métodos). 8. Objetos

73 JavaScript índice 1. Introducción 6. Estructuras de control 5. Operadores 8. Objetos 2. Un primer ejemplo 3. Variables y constantes 4. Tipos de datos 7. Funciones y eventos Objetos Ejemplo: Una persona tiene unas características o propiedades : pelo corto, altura, color de pelo, peso,... Además de propiedades una persona también tiene un comportamiento, ejecuta ciertas acciones: comer, dormir,... El conjunto de propiedades y acciones/funciones definen un objeto. 8. Objetos

74 JavaScript índice 1. Introducción 6. Estructuras de control 5. Operadores 8. Objetos 2. Un primer ejemplo 3. Variables y constantes 4. Tipos de datos 7. Funciones y eventos Objetos En JavaScript existen una serie de objetos predefinidos, con sus propiedades y funciones (métodos), algunas de las cuales ya hemos utilizado. Uno de los objetos más importantes es el objeto Window, que contiene a su vez otros objetos, estructurados en forma de árbol. 8. Objetos

75 JavaScript índice 1. Introducción 6. Estructuras de control 5. Operadores 8. Objetos 2. Un primer ejemplo 3. Variables y constantes 4. Tipos de datos 7. Funciones y eventos Objetos La estructura es la siguiente: 8. Objetos window self document navigator Screen Location History Forms Objeto document Objeto document

76 JavaScript índice 1. Introducción 6. Estructuras de control 5. Operadores 8. Objetos 2. Un primer ejemplo 3. Variables y constantes 4. Tipos de datos 7. Funciones y eventos Objetos 8. Objetos Para hacer uso de las propiedades y métodos de un objeto debemos poner el nombre del objeto seguido de un punto y la propiedad o el método a continuación, por ejemplo: window.status=“mensaje”; Los métodos son funciones que podemos ejecutar y las propiedades son simplemente variables que podemos asignar o leer.

77 JavaScript índice 1. Introducción 6. Estructuras de control 5. Operadores 8. Objetos 2. Un primer ejemplo 3. Variables y constantes 4. Tipos de datos 7. Funciones y eventos Objetos 8. Objetos Ahora veremos algunos ejemplos de propiedades y métodos de los objetos más utilizados

78 JavaScript índice 1. Introducción 6. Estructuras de control 5. Operadores 8. Objetos 2. Un primer ejemplo 3. Variables y constantes 4. Tipos de datos 7. Funciones y eventos Objeto window 8. Objetos La propiedad status del objeto window indica el mensaje que aparece en la barra de estado. Ejercicio: Crea una página que contenga un hipervínculo. Al pasar por encima aparece la dirección de destino en la barra de estado. Añade el código JavaScript necesario para que al pasar por encima aparezca el mensaje “Estás sobre el enlace” en la barra de estado. Cuestión: ¿Funciona en todos los navegadores?

79 JavaScript índice 1. Introducción 6. Estructuras de control 5. Operadores 8. Objetos 2. Un primer ejemplo 3. Variables y constantes 4. Tipos de datos 7. Funciones y eventos Objeto window 8. Objetos El método open abre una ventana nueva con las propiedades que le indiquemos. La sintaxis es: ventana=open(“URL”,”nombre”,”opciones”) donde opciones será una lista separada por comas de las siguientes propiedades: toolbar location directories statusmenubarscrollbars resizablewidthheight Ejemplo: ventana=open(“URL”,”nombre”,”toolbar=no, menubar=no,status=yes,width=200,height=200,resiza ble=yes);

80 JavaScript índice 1. Introducción 6. Estructuras de control 5. Operadores 8. Objetos 2. Un primer ejemplo 3. Variables y constantes 4. Tipos de datos 7. Funciones y eventos Objeto window 8. Objetos Ejercicio: Crea una página que contenga un botón que al pulsarlo (evento onclick) abra una página en las que no aparezca ninguna barra salvo la de estado y no se pueda redimensionar y además ponga un mensaje en la barra de estado.(prueba en distintos navegadores)

81 JavaScript índice 1. Introducción 6. Estructuras de control 5. Operadores 8. Objetos 2. Un primer ejemplo 3. Variables y constantes 4. Tipos de datos 7. Funciones y eventos Objeto window 8. Objetos Otros métodos del objeto window son: alert prompt confirm close Print setInterval setTimeout Ejercicio: utilizando la ayuda de Internet pon un ejemplo con cada uno de ellos

82 JavaScript índice 1. Introducción 6. Estructuras de control 5. Operadores 8. Objetos 2. Un primer ejemplo 3. Variables y constantes 4. Tipos de datos 7. Funciones y eventos var edad=prompt("Indica tu edad"); while(!confirm("Tu edad es: "+edad)) {edad=prompt("Indica tu edad"); } if(edad < 18) {alert("Eres menor de edad, aún no puedes desayunar en el Hollywood"); } else {alert("Eres mayor de edad, ya puedes desayunar con los profes"); } setTimeout("cerrar()",5000); document.write("Esta página se autodestruirá en 5 segundos (solo si tienes explorer)"); function cerrar() {window.close(); } Imprimir esta página

83 JavaScript índice 1. Introducción 6. Estructuras de control 5. Operadores 8. Objetos 2. Un primer ejemplo 3. Variables y constantes 4. Tipos de datos 7. Funciones y eventos Ejercicio: crea una página con un botón y que al pulsarlo la ventana tome el tamaño 600x400 píxeles y se coloque en la posición 100,100. de la pantalla

84 JavaScript índice 1. Introducción 6. Estructuras de control 5. Operadores 8. Objetos 2. Un primer ejemplo 3. Variables y constantes 4. Tipos de datos 7. Funciones y eventos Objeto navigator 8. Objetos El objeto navigator permite obtener datos del navegador que estamos utilizando. Por ejemplo, la propiedad appName facilita el nombre del navegador utilizado, y la propiedad languaje el lenguaje del mismo: alert("Navegador: "+navigator.appName); alert(“Idioma : "+navigator.language); Estas propiedades son solo de lectura

85 JavaScript índice 1. Introducción 6. Estructuras de control 5. Operadores 8. Objetos 2. Un primer ejemplo 3. Variables y constantes 4. Tipos de datos 7. Funciones y eventos Objeto navigator 8. Objetos Podemos utilizar estas propiedades para hacer uso de la versión de Javascript que más se ajuste el navegador del cliente. Aunque debemos tener en cuenta que no son datos muy fiables. Ejercicio: Instala el componente “User Agent Switcher” de Firefox y averigua para qué sirve.

86 JavaScript índice 1. Introducción 6. Estructuras de control 5. Operadores 8. Objetos 2. Un primer ejemplo 3. Variables y constantes 4. Tipos de datos 7. Funciones y eventos Objeto location 8. Objetos Este objeto contiene información sobre la página que se está visitando en ese momento. Algunas de las propiedades de este objeto solo tienen validez si la página está alojada en un servidor, no si está almacenada localmente.

87 JavaScript índice 1. Introducción 6. Estructuras de control 5. Operadores 8. Objetos 2. Un primer ejemplo 3. Variables y constantes 4. Tipos de datos 7. Funciones y eventos Objeto location 8. Objetos Algunas de sus propiedades son: href → dirección completa protocol → protocolo utilizado (http, ftp,…) host → nombre del servidor y puerto utilizados hostname → solo nombre del servidor Estas dos últimas no sirven para archivos locales search → almacena los argumentos de llamada a la página, lo que acompaña a ‘?’ (cuando existe) en la barra de direcciones Algunos de sus métodos son: reload() → recarga la página replace(url) → carga la página que se indique entre los paréntesis. Para ello hay que indicar la dirección completa, incluyendo el protocolo, por ejemplo: location.replace('file:///D:/ejemplos/status.html')

88 JavaScript índice 1. Introducción 6. Estructuras de control 5. Operadores 8. Objetos 2. Un primer ejemplo 3. Variables y constantes 4. Tipos de datos 7. Funciones y eventos Objeto location 8. Objetos Ejercicio: Crear una página que contenga un botón. Utilizando el método replace haz que al pulsar en el botón debe saltar a la página de Google.

89 JavaScript índice 1. Introducción 6. Estructuras de control 5. Operadores 8. Objetos 2. Un primer ejemplo 3. Variables y constantes 4. Tipos de datos 7. Funciones y eventos Objeto history 8. Objetos Contiene información sobre las páginas ya visitadas. La propiedad length indica el número de páginas visitadas desde esa ventana. Los métodos de los que disponemos son los siguientes: back() → carga la página anterior forward() → carga la página siguiente go(n) → salta a la página indicada por n, ejemplos: go(-1) → salta a la página anterior go(1) → salta a la página siguiente go(-2) → retrocede dos páginas

90 JavaScript índice 1. Introducción 6. Estructuras de control 5. Operadores 8. Objetos 2. Un primer ejemplo 3. Variables y constantes 4. Tipos de datos 7. Funciones y eventos Objeto history 8. Objetos Ejercicio: crea una página con cuatro botones: Uno para retroceder a la página anterior Otro para avanzar a la página siguiente Otro para retroceder dos páginas Otro para avanzar dos páginas Indica al cargar la página cuántas páginas se han visitado en esta ventana.

91 JavaScript índice 1. Introducción 6. Estructuras de control 5. Operadores 8. Objetos 2. Un primer ejemplo 3. Variables y constantes 4. Tipos de datos 7. Funciones y eventos DOM Los navegadores web transforman automáticamente todas las páginas web en una estructura más eficiente de manipular. Esta estructura se denomina DOM y tiene forma de árbol. Cada elemento del árbol se llama nodo.

92 JavaScript índice 1. Introducción 6. Estructuras de control 5. Operadores 8. Objetos 2. Un primer ejemplo 3. Variables y constantes 4. Tipos de datos 7. Funciones y eventos Ejemplo: Página sencilla Esta página es muy sencilla

93 JavaScript índice 1. Introducción 6. Estructuras de control 5. Operadores 8. Objetos 2. Un primer ejemplo 3. Variables y constantes 4. Tipos de datos 7. Funciones y eventos

94 JavaScript índice 1. Introducción 6. Estructuras de control 5. Operadores 8. Objetos 2. Un primer ejemplo 3. Variables y constantes 4. Tipos de datos 7. Funciones y eventos La raíz del árbol de nodos de cualquier página XHTML siempre es la misma: un nodo de tipo especial denominado "Documento". Del nodo raíz solamente pueden derivar los nodos HEAD y BODY. La transformación de las etiquetas XHTML habituales genera dos nodos: el primero es el nodo de tipo "Elemento" (correspondiente a la propia etiqueta XHTML) y el segundo es un nodo de tipo "Texto" que contiene el texto encerrado por esa etiqueta XHTML.

95 JavaScript índice 1. Introducción 6. Estructuras de control 5. Operadores 8. Objetos 2. Un primer ejemplo 3. Variables y constantes 4. Tipos de datos 7. Funciones y eventos Una vez construido automáticamente el árbol completo de nodos DOM, ya es posible utilizar las funciones DOM para acceder de forma directa a cualquier nodo del árbol. getElementsByTagName() var par=document.getElementsByTagName("p"); getElementsByName() var parEspecial=document.getElementsByName("especial"); getElementById() var cabecera = document.getElementById("cabecera");

96 JavaScript índice 1. Introducción 6. Estructuras de control 5. Operadores 8. Objetos 2. Un primer ejemplo 3. Variables y constantes 4. Tipos de datos 7. Funciones y eventos Acceso a los atributos desde Javascript Una vez que se ha accedido a un nodo, el siguiente paso natural consiste en acceder y/o modificar sus atributos y propiedades. Mediante DOM, es posible acceder de forma sencilla a todos los atributos XHTML y todas las propiedades CSS de cualquier elemento de la página. Los atributos HTML de los elementos de la página se transforman automáticamente en propiedades de los nodos. Ejemplo: var enlace = document.getElementById("enlace"); alert(enlace.href);

97 JavaScript índice 1. Introducción 6. Estructuras de control 5. Operadores 8. Objetos 2. Un primer ejemplo 3. Variables y constantes 4. Tipos de datos 7. Funciones y eventos Acceso a css desde Javascript El atributo style es un atributo más de los elementos HTMl, por lo tanto podremos acceder a él de la misma forma. Ejemplo: var imagen = document.getElementById("imagen"); alert(imagen.style.margin);

98 JavaScript índice 1. Introducción 6. Estructuras de control 5. Operadores 8. Objetos 2. Un primer ejemplo 3. Variables y constantes 4. Tipos de datos 7. Funciones y eventos Nombre de las propiedades del objeto style La transformación del nombre de las propiedades CSS compuestas consiste en eliminar todos los guiones medios (-) y escribir en mayúscula la letra siguiente a cada guión medio. Ejemplos: ▪ font-weight se transforma en fontWeight ▪ line-height se transforma en lineHeight ▪ border-top-style se transforma en borderTopStyle ▪ list-style-image se transforma en listStyleImage Ejemplo: document.getElementById("enlace").style.textDecoration ="none";

99 JavaScript índice 1. Introducción 6. Estructuras de control 5. Operadores 8. Objetos 2. Un primer ejemplo 3. Variables y constantes 4. Tipos de datos 7. Funciones y eventos Ejemplo Enlace a google function camba() { if(document.getElementById("enlace").style.color!="red") {document.getElementById("enlace").style.color="red"; document.getElementById("enlace").style.textDecoration="none"; } else {document.getElementById("enlace").style.color="blue"; document.getElementById("enlace").style.textDecoration="underline"; } Descripción: Al pasar sobre el enlace cambiará de color y desaparece el subrayado. Al salir vuelve a su estado anterior. Similar a la pseudoclase hover.

100 JavaScript índice 1. Introducción 6. Estructuras de control 5. Operadores 8. Objetos 2. Un primer ejemplo 3. Variables y constantes 4. Tipos de datos 7. Funciones y eventos Objeto document 8. Objetos Hace referencia al contenido del documento HTML. Es el nodo raíz del DOM. Algunas de las propiedades son: bgColor: color de fondo fgColor: color del texto vlink: color de los enlaces visitados alink: color de los enlaces activos Uno de los métodos más utilizados es write(), que ya conocemos de sobra para qué sirve.

101 JavaScript índice 1. Introducción 6. Estructuras de control 5. Operadores 8. Objetos 2. Un primer ejemplo 3. Variables y constantes 4. Tipos de datos 7. Funciones y eventos Objeto document 8. Objetos ¿Cómo accedemos a los elementos de un formulario a través del objeto document? Los elementos de un formulario se encuentran entre las etiquetas y, por ejemplo:

102 JavaScript índice 1. Introducción 6. Estructuras de control 5. Operadores 8. Objetos 2. Un primer ejemplo 3. Variables y constantes 4. Tipos de datos 7. Funciones y eventos Objeto document 8. Objetos Para utilizar el dato del cuadro de texto nombrePropietario debemos escribir: document.getElementById(“nombrePropietario”).value

103 JavaScript índice 1. Introducción 6. Estructuras de control 5. Operadores 8. Objetos 2. Un primer ejemplo 3. Variables y constantes 4. Tipos de datos 7. Funciones y eventos Objeto document 8. Objetos Si quisiéramos copiar el dato que el usuario ha escrito en el cuadroo nombreInquilino tendremos que usar la siguiente instrucción de asignación: document.getElementById(“nombreInquilino”).value = document.getElementById(“nombrePropietario”).value Ejercicio: completa el código de la página para que al pulsar el botón se copien los datos de nombre y apellidos de propietario a los del inquilino

104 JavaScript índice 1. Introducción 6. Estructuras de control 5. Operadores 8. Objetos 2. Un primer ejemplo 3. Variables y constantes 4. Tipos de datos 7. Funciones y eventos Objeto document 8. Objetos Ejercicio: Crea una página que contenga un cuadro de texto y un botón de manera que al pinchar en el botón se cargue la página que hayamos indicado en el cuadro de texto

105 JavaScript índice 1. Introducción 6. Estructuras de control 5. Operadores 8. Objetos 2. Un primer ejemplo 3. Variables y constantes 4. Tipos de datos 7. Funciones y eventos Objeto document 8. Objetos Ejercicio: Crea un formulario con dos cuadros de texto. Nombre y edad. Al pulsar el botón, se debe comprobar que ninguno de ellos sea vacío y que además, la edad sea un número entre 16 y 65. Si ésto se cumple, llamaremos al método sumbit() del objeto formulario, para que pase a la siguiente página. De lo contrario aparecerá un solo “alert” indicándonos que hay algo mal y no saltará a ninguna página.

106 JavaScript índice 1. Introducción 6. Estructuras de control 5. Operadores 8. Objetos 2. Un primer ejemplo 3. Variables y constantes 4. Tipos de datos 7. Funciones y eventos Objeto document 8. Objetos nombre: edad: function comprueba() {var n=document.getElementById("nombre").value; var e=document.getElementById("edad").value; if(n =="" || e=="") {alert("Algún campo vacío"); } else {if(e 15) {document.getElementById("formulario").submit(); } else {alert("Edad incorrecta"); }

107 JavaScript índice 1. Introducción 6. Estructuras de control 5. Operadores 8. Objetos 2. Un primer ejemplo 3. Variables y constantes 4. Tipos de datos 7. Funciones y eventos Otros objetos 8. Objetos Otros objetos: String: sirve para manejar cadenas Math: para realizar operaciones matemáticas Date: para manejar fechas Array: para manejar matrices

108 JavaScript índice 1. Introducción 6. Estructuras de control 5. Operadores 8. Objetos 2. Un primer ejemplo 3. Variables y constantes 4. Tipos de datos 7. Funciones y eventos Objeto Math 8. Objetos abs(): Devuelve el valor absoluto de un número. El valor después de quitarle el signo. ceil(): Devuelve el entero igual o inmediatamente siguiente de un número. Por ejemplo, ceil(3) vale 3, ceil(3.4) es 4. floor(): Lo contrario de ceil(), pues devuelve un número igual o inmediatamente inferior. max() Retorna el mayor de 2 números. random(): Devuelve un número aleatorio entre 0 y 1. Método creado a partir de Javascript 1.1.

109 JavaScript índice 1. Introducción 6. Estructuras de control 5. Operadores 8. Objetos 2. Un primer ejemplo 3. Variables y constantes 4. Tipos de datos 7. Funciones y eventos Objeto Math 8. Objetos Ejercicio: Crea una página en javascript que genere un número aleatorio entre 1 y 100, y pida al usuario que lo adivine (puedes utilizar el método prompt).. Seguirá preguntando hasta que el número sea adivinado. Cada vez que el usuario introduzca un número se debe indicar si el número secreto es mayor o menor.

110 JavaScript índice 1. Introducción 6. Estructuras de control 5. Operadores 8. Objetos 2. Un primer ejemplo 3. Variables y constantes 4. Tipos de datos 7. Funciones y eventos Objeto Math 8. Objetos var x=Math.ceil(Math.random()*100); var a; do {a=prompt("Adivina un número del 1 al 100"); if(a<x) {alert("El número es mayor"); } else if(a>x) {alert("El número es menor"); } else alert("Acertaste!!!"); }while(x!=a);

111 JavaScript índice 1. Introducción 6. Estructuras de control 5. Operadores 8. Objetos 2. Un primer ejemplo 3. Variables y constantes 4. Tipos de datos 7. Funciones y eventos Objeto Math 8. Objetos var x=Math.ceil(Math.random()*100); var a,min,max; min=1;max=100; do {a=prompt("Adivina un número del "+min+" al "+max); if(a<x) {alert("El número es mayor"); min=a; } else if(a>x) {alert("El número es menor"); max=a; } else alert("Acertaste!!!"); }while(x!=a);

112 JavaScript índice 1. Introducción 6. Estructuras de control 5. Operadores 8. Objetos 2. Un primer ejemplo 3. Variables y constantes 4. Tipos de datos 7. Funciones y eventos Objeto String 8. Objetos length: Longitud de la cadena split(separador): Sirve para crear un array a partir de una cadena en el que cada elemento es la parte de la cadena que está separada por el separador indicado por el parámetro. substring(inicio,fin): Devuelve el substring que empieza en el carácter de inicio y termina en el carácter de fin. ToLowerCase(): Pasa todos los caracteres de una cadena a minúsculas. toUpperCase(): Pone todas los caracteres de un string en mayúsculas.

113 JavaScript índice 1. Introducción 6. Estructuras de control 5. Operadores 8. Objetos 2. Un primer ejemplo 3. Variables y constantes 4. Tipos de datos 7. Funciones y eventos Objeto String 8. Objetos Ejemplo: nombre: function may() {var n=document.getElementById("nombre").value; document.getElementById("nombre").value=n.toUpperCase(); }