Javascript Pau Barceló Forteza Creación de páginas Web (II)

Presentación del tema: "Javascript Pau Barceló Forteza Creación de páginas Web (II)"— Transcripción de la presentación:

1 Javascript Pau Barceló Forteza barcelo@sithex.com Creación de páginas Web (II)

2 Introducción  Desarrollado por Brendan Eich sobre 1995  Lenguaje de parte de cliente  Interpretado  Sintaxis similar a Java y C  Solucionar problemas de ancho de banda

3 Ejemplo I document.write('Hola Mundo');

4 Variables en Javascript  Valores enteros (57)  Valores reales (45.32)  Cadenas de caracteres (‘perro’)  Otras (punteros, estructuras, …)  Declaración: var edad= 20; var edad; edad= 20;

5 Ejemplo variables var nombre='Juan'; var edad=10; var altura=1.92; var casado=false; document.write(nombre); document.write(' '); document.write(edad); document.write(' '); document.write(altura); document.write(' '); document.write(casado);

6 Entrada y Salida de datos var nombre; var edad; nombre=prompt('Ingrese su nombre:',''); edad=prompt('Ingrese su edad:',''); document.write('Hola '); document.write(nombre); document.write(' asi que tienes '); document.write(edad); document.write(' años');

7 Función Alert var mensaje; mensaje=prompt('Ingrese Mensaje:',''); alert(mensaje);

8 Operaciones matemáticas var valor1; var valor2; valor1=prompt('Ingrese primer número:',''); valor2=prompt('Ingrese segundo número',''); var suma=parseInt(valor1)+parseInt(valor2); var producto=valor1*valor2; document.write('La suma es '); document.write(suma); document.write(' '); document.write('El producto es '); document.write(producto);

9 Control de flujo  If var nombre; var nota; nombre=prompt('Ingrese nombre:',''); nota=prompt('Ingrese su nota:',''); if (nota>=4){ document.write(nombre+' está aprobado con un '+nota); }else{ document.write(nombre+' está cateado con un '+nota);  While var x = 1; while (x "); x++; }

10 Funciones código de función function datos_personales(nombre, apellidos, edad) { return 'Hola, ' + nombre + ' ' + apellidos + ', tienes ' + edad + ' años.'; } alert(datos_personales("Pepito", "Perez", 25))

11 Control de Select function cambiarColor() { document.form1.text1.value = document.form1.select1.selectedIndex; document.form1.text2.value = document.form1.select1.options[document.form1.select1.selectedIndex].text; document.form1.text3.value = document.form1.select1.options [document.form1.select1.selectedIndex].value; } Rojo Verde Azul Número de índice seleccionado del objeto SELECT:<input type="text" name="text1"> Texto seleccionado: Valor asociado:

12 Eventos OnMouseOver, OnMouseOut function pintar(col) { document.bgColor=col; } <a href="pagina1.html" onMouseOver="pintar('#ff0000')" onMouseOut="pintar('#ffffff')">Rojo - <a href="pagina1.html" onMouseOver="pintar('#00ff00')" onMouseOut="pintar('#ffffff')">Verde - Azul

13 Uso de archivos externos (I)  Librería Javascript (lib.js) function retornarFecha() { var fecha fecha=new Date(); var cadena=fecha.getDate()+'/'+(fecha.getMonth()+1)+'/'+fecha.getYear(); return cadena; } function retornarHora() { var fecha fecha=new Date(); var cadena=fecha.getHours()+':'+fecha.getMinutes()+':'+fecha.getSeconds() ; return cadena; }

14 Uso de archivos externos (II)  Llamada desde fichero html Problema document.write('La fecha de hoy es:'+retornarFecha()); document.write(' '); document.write('La hora es:'+retornarHora());

15 Efectos con Javascript Ejemplos Javascript var id,pause=0,position=0; function rotaTexto() { var i,k,msg=" Ultimo día de clase "; k=(100/msg.length)+1; for(i=0;i<=k;i++) msg+=" "+msg; document.form2.rotaText.value=msg.substring(position,position+100); if(position++==100) position=0; id=setTimeout("rotaTexto()",100); }