Java script(diapositivas)

2,275 views

Published on

0 Comments
2 Likes
Statistics
Notes
  • Be the first to comment

No Downloads
Views
Total views
2,275
On SlideShare
0
From Embeds
0
Number of Embeds
10
Actions
Shares
0
Downloads
76
Comments
0
Likes
2
Embeds 0
No embeds

No notes for slide

Java script(diapositivas)

  1. 1. JavaScript IntegrantesJonathan Roberto Mejía Corona Gerardo Gil Villareal Salvador flores Chávez Juan Carlos Brígido Albino
  2. 2. Índice1. Introducción2. Un primer ejemplo3. Constantes y variables4. Tipos de datos5. Operadores6. Estructuras de control7. Funciones y eventos8. Objetos
  3. 3. 1. Introducción JavaScript es un lenguaje deprogramación creado por Netscape que se integra dentro de HTML y nos permitirá crear páginas interactivas.
  4. 4. JavaScript ≠ JAVA JavaScript es un lenguaje quefunciona como extensión HTML y que esinterpretado por el navegador, esindependiente del servidor donde estáalojado. JAVA es un lenguaje independienteno necesita HTML para funcionar. Elcódigo no se interpreta en el navegador
  5. 5. Al ser (JavaScript) interpretadoen el navegador, una vez cargado elcódigo se puede ejecutar cuantas vecessea necesario sin acceder al servidor. Por ejemplo, podemos crear unafunción que compruebe un campo fechade un formulario. Si el usuario introduceuna fecha incorrecta, saldrá un mensajede error sin tener que cargar una nuevapágina.
  6. 6. Como ocurre con CSS lainterpretación que cada navegador hacede un código puede ser muy particular. Iexplorer soporta una especie deJavaScript llamado jscript, que es muysimilar a JavaScript, pero no escompatible 100%. Por este motivodebemos comprobar el código querealicemos en distintos navegadores,sobre todo en este último, al ser el másextendido.
  7. 7. 1. Inserción en HTML En una misma página podemosinsertar distintos trozos de códigoJavaScript, cada uno de ellos encerradoentre las directivas:<SCRIPT languaje=“JavaScript”>Y</SCRIPT>
  8. 8. <HTML><HEAD> código HTML de cabecera<SCRIPT> código JavaScript</SCRIPT><BODY>código HTML<SCRIPT> código JavaScript</SCRIPT>código HTML<SCRIPT> código JavaScript</SCRIPT>código HTML
  9. 9. El atributo “languaje” de la etiquetaSCRIPT indica el lenguaje que vamos autilizar, que por defecto es JavaScript,por lo que podemos omitirlo.Ejercicio: Lo siguiente es códigoJavaScript. Insértalo en una páginaHTML de manera correcta y observa elresultado: alert(“Esto es una nota informativa”);
  10. 10. Nota importante: JavaScript es unlenguaje sensible a las mayúsculas (CaseSensitive) por lo que los siguientesnombres de variables son diferentes: Resultado RESULTADO resultado
  11. 11. 1. Inserción en HTML. Archivo ExternoAl igual que CSS podemos crear unfichero externo que contenga códigoJavaScript.Su extensión será .jsPara llamarlo utilizaremos el atributo srcde la etiqueta SCRIPT
  12. 12. 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 Resultado “+Anio);
  13. 13. ComentariosSe pueden introducir de dos formasdistintas:// Comentarios en una sola línea/* En varias líneas: todo lo queescribamos entre estos dos símbolos noserá tenido en cuenta por el navegador*/
  14. 14. LlavesPodemos encerrar cualquier trozo decódigo entre llaves. Más adelanteveremos que el código de una función vaencerrado entre llaves {} Punto y coma ;El símbolo ; se utiliza para separarsentencias. Pondremos uno al finalizarcada línea de instrucción. Si lainstrucción es larga y ocupa más de unalínea, no pondremos uno en cada línea,sino de la misma forma, al finalizar lainstrucción.
  15. 15. 2. Un primer ejemplo<html><body><script language="JavaScript">imagen1=new Imageimagen1.src="imagenes/dedo.jpg"imagen2=new Imageimagen2.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; } }</script><div align="center"><img src="imagenes/dedo.jpg" name="icono"onMouseover="cambio_icono()" onMouseOut="cambio_icono()"></div></body></html> Resultado
  16. 16. 3. Variables y constantes VariablesSon elementos que se utilizan en todos loslenguajes y sirven para almacenar datostemporalmente.A la hora de asignar un nombre a una variabletenemos que tener en cuenta lo siguiente:• Primer carácter: letra ó _• Resto caracteres: letras, números ó _ sinespacios intermedios• No utilizar palabras reservadas• Diferencia entre mayúsculas y minúsculas.Conviene seguir una norma.
  17. 17. ResultadoSuma, Resultadosuma yresultadosuma son tres variables distintas.En los navegadores antiguos era necesariodeclara las variables antes de usarla. En losactuales no.Para declarar una variable basta con poner“var” y seguidamente su nombre: var nombre1;
  18. 18. ConstantesEn JavaScripts las constantes se tratancomo una variable a la que no se lecambia nunca el valor.
  19. 19. 4. Tipos de datos Tipos de VariablesExisten distintos tipos de variables:•De cadena: son aquellas que contienen unacadena de texto. Se definen mediantecomillas simples o dobles. Existen una seriede caracteres especiales que podemos usaren ellas: n, t, , ”, ’Ejemplo:<script>var cadena1=“ntEjemplo de ncadena”;alert (cadena1);</script>
  20. 20. •Numérica: son aquellas que conienennúmeros.Ejemplos: var numero=100; var numero=-100;•Booleanas: son aquellas que solo tienendos valores posibles, verdadero o falso(true / false).var abierta=true;
  21. 21. •Undefined: son aquellas que han sidodeclaradas pero no tienen ningún valorasignado:
  22. 22. 5. OperadoresEn JavaScript los operadores se dividenen varios grupos: •Aritméticos • Lógicos • De Comparación • Condicionales • Bit a Bit • De asignación • Especiales
  23. 23. Operadores AritméticosSon aquellos que se encargan de realizarlos operaciones básicas como suma,resta, multiplicación, división, módulo,incremento, decremento,…
  24. 24. Ejemplo:var v1, v2;var suma, division, modulo;v1=2;v2=11;suma=v1+v2;division=v2/v1;modulo=???document.write("suma: "+suma+"<br>");document.write("division: "+division+"n");document.write("modulo: "+modulo+"n");
  25. 25. Incremento y decremento sonoperadores que suman o restan unaunidad 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
  26. 26. Operadores LógicosSon los que operan con datos booleanos yson los siguientes. && “y lógico” || “o lógico” ! “negación”
  27. 27. Ejercicio: Tabla de verdad de && . Rellena lossiguientes 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 asignacada operación a su variable. Muestra el resultadomediante alert
  28. 28. Operadores de comparaciónSirven para comparar valores y siempredevuelven “true”o “false”.Son los siguientes:Igualdad (a==b): Devuelve “true” si los a y b sonigualesNo igualdad (a!=b): Devuelve “true” si a y b sondistintosMayor que (a>b): Devuelve “true” si a es mayorque bMenor que (a<b): Devuelve “true” si a es menorque bMayor o igual que (a>=b): Devuelve “true” si a esmayor o igual que bMenor o igual que (a<=b): Devuelve “true” si a esmenor o igual que b
  29. 29. Ejemplos: Indica el valor de result en cada caso:<script>var var1,var2,result;var1=5;var2=10;result=(5==var1);result=(5!=var1);result=(var2==var1);result=(var1>var2);result=(var1<=var2);</script>
  30. 30. Ejemplos: Indica el valor de result en cada caso:<script>var var1,var2,result;var1=5;var2=10;var3=5;var4=8;result=(5==var1&&var2==var4);result=(5==var1||var2==var4);result=(var1<var2&&var3>=var1);</script>
  31. 31. Operadores condicionalesEs una forma de expresar una instruccióncondicional:(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+"<br>");
  32. 32. Operadores bit a bitSon los que operan con los datos a nivelde bit. Algunos de estos operadores son: & operación AND | operación OR ~ operación NOTCalcular el resultado de las siguientesoperaciones utilizando estos operadores: 3&5= 3|5=
  33. 33. Solución:var result;result=3&5;document.write("resultado de 3&5:"+result+"<br>");result=3|5;document.write("resultado de 3|5: "+result);
  34. 34. Operadores de asignaciónYa hemos visto la más sencilla de ellas que esla siguiente: v1=v2;Existen otras como: v1+=v2; v1-=v2;Ejercicio: comprueba qué efecto tienenestas dos operaciones sobre v1.
  35. 35. Operadores especialesExisten otros operadores que no están incluidos enninguno de los grupos anteriores. Algunos de ellosson:instanceof – indica si un objeto es de un tipodeterminado, 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();
  36. 36. 6. Estructuras de controlNos van a servir para tomar decisionessegún ciertas condiciones y para ejecutarun mismo código repetidas veces variandoalgún dato.En JavaScript disponemos de las siguientesinstrucciones de control:if => instrucción condicionalforwhile => instrucciones de repeticióndo whileswitch => instrucción de selección múltiple
  37. 37. Instrucción if - elseSe utiliza para ejecutar un conjunto deinstrucciones si se cumple una condición yotro conjunto de instrucciones diferente sino se cumple.La sintaxis es la siguiente: if(condicion) { instrucciones A; } else { instrucciones B; }
  38. 38. El bloque else no es obligatorio, en ese casola instrucción quedaría de la siguienteforma: if(condicion) { instrucciones; }La condición es una operación que devuelveun resultado booleano, true o false, paraello utilizaremos los operadores lógicos, losde comparación e incluso operadoresespeciales como instanceof.
  39. 39. Solución:<html><head><script>function cambiafondo(){ if(document.bgColor=="#ff0000") { document.bgColor="#008000"; } else { document.bgColor="#ff0000"; }}</script></head><body> <img src="boton.JPG" onclick="cambiafondo()"></body></html>
  40. 40. Ejercicio:Escribe un código que solicite que escribas tunombre con el comando prompt. A continuaciónsolicita que escribas tu primer apellido con otroprompt, almacenándolo en variables distintas.Si tu nombre es Alberto Ruíz, aparecerá unmensaje indicando que tienes permiso para entraren la página. De lo contrario, aparecerá unmensaje indicando que no puedes entrar.
  41. 41. Solución:<script>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");}</script>
  42. 42. Las instrucciones que introducimos dentro del bloque deinstrucciones 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+". Puedespasar"); } else { alert("Lo siento. No puede pasar"); }}
  43. 43. Ejercicio: modificar el código anterior de maneraque haga lo mismo, pero utilizando solo unaestructura if
  44. 44. Instrucción forNos va a servir para ejecutar un mismo código unnúmero determinado de veces. Para ello hay queestablecer tres parámetros:• Valor inicial del contador• Condición, que hará que el bucle pueda llegar enalgún momento a su fin• Incremento del contadorLa sintaxis de esta instrucción es la siguiente:For(valor incial; condicion; incremento){ instrucciones;}
  45. 45. Ejemplo:var cont;for(cont=1;cont<11;cont++){ document.write(cont+"<br>");}¿Qué hace este código?
  46. 46. Ejercicio:Modificar el código anterior para que escriba losnúmeros impares que hay entre el 1 y el 20
  47. 47. Ejercicio:Crear un código que pida un número al usuario yrepita una frase tantas veces como indique esenúmero
  48. 48. Solución:var cont,n;n=prompt("escribe un número","");document.write("Voy a escribir hola "+n+"veces<br>");for(cont=0;cont<n;cont++){ document.write(cont+" hola<br>");}
  49. 49. Ejercicio:Crear un código que pida tres veces un número alusuario y escriba si cada uno de esos números esmayor, menor o igual a 10.
  50. 50. Solución:var cont,n;document.write("<u><b>Mayor o menor<br></u></b>");for(cont=1;cont<4;cont++){ n=prompt("Escribe un número: ",""); if(n > 10) { document.write("El numero es mayor que10"+"<br>"); } else { if(n == 10) { document.write("El número es10"+"<br>"); } else { document.write("El número es menor que10"+"<br>"); } }}
  51. 51. Ejercicio:Con la siguiente instrucción se almacena en n unnúmero del 1 al 10: n=Math.ceil(Math.random()*10);Utilizad esta instrucción para crear un juego en elque el usuario tiene que adivinar el númeroindicado. Máximo se permiten 5 intentos.
  52. 52. 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+"<br>"); } else { document.write("El número es menor que"+p+"<br>"); } }}alert("El número correcto era: "+n);
  53. 53. Instrucción whileSirve para ejecutar un conjunto de instruccionesmientras se cumpla una condición dada.La sintaxis es la siguiente: while(condicion) { instrucciones; }
  54. 54. Ejemplo:var i=0;while(i<11){ alert(“Valor de i: “+i+”<br>”); i++;}
  55. 55. Importante:Hay que prestar mucha atención a la condición, yaque si se cumple indefinidamente el bucle nuncafinaliza y la ejecución quedará bloqueada.Ejemplo: en el código anterior, si por errorolvidamos incrementar la variable, siempre secumplirá la condición:var i=0;while(i<11){ alert(“Valor de i: “+i+”<br>”); i++;}
  56. 56. Ejercicio:Solicitar una clave y comprobar si es correcta. Si nolo es, debe seguir pidiéndola hasta que sea correcta.
  57. 57. Ejercicio:1.- Crear un programa que solicita un nombre de unalumno y tres notas diferentes. Debe calcular la notamedia e imprimirla junto con el nombre en forma detabla: nombre NotaMedia2.- Modificar el código anterior de manera quesolicite el número de alumnos al principio y repita elcódigo para cada uno de los alumnos creando unatabla con todos ellos
  58. 58. Solución:var i,nombre,n1,n2,n3,media;n1=0;n=prompt("Introduce el número de alumnos","");document.write("<tableborder=2><tr><td>Nombre</td><td>Media</td></tr>");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("<tr><td>"+nombre+"</td><td>"+media+"</td></tr>");}document.write("<table>");
  59. 59. Esta instrucción no existía en versiones antiguas deJavaScript, por lo que puede que no funcione ennavegdores antiguos.Es muy similar al bucle while, la única diferencia esque antes de evaluar por primera vez la condiciónejecuta el bloque de código, por lo que siempre seejecuta al menos una vez.Sintaxis:do{ instrucciones;}while(condición);
  60. 60. 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);
  61. 61. 7. Funciones y eventosUna función es un conjunto de instrucciones queejecutan una tarea concreta.Debemos diferenciar entre definición de lafunción y llamada a la función. La definición esla descripción de la función en sí y que seráejecutado cuando sea llamada.
  62. 62. Partes de una funciónUna definición de función consta de lassiguientes partes:• Palabra clave function• Nombre de la función. Las reglas para creareste nombre son las mismas que para crearnombres de variables• Argumentos. Son los valores que pasamos auna función cuando la llamamos y que puedenser utilizados en su código. Los argumentos seseparan entre sí por comas y se encierran entrellaves. La lista de argumentos puede ser vacía.• Instrucciones. Van encerradas entre llaves
  63. 63. Sintáxis: function nombre_funcion(argumentos) { instrucciones; }La definición de las funciones se suele situar enla cabecera del documento.La función no se ejecuta hasta que es llamadapor su nombre de la siguiente forma: nombre_funcion();
  64. 64. Ejemplo: <head> <script> function saludo() { document.write(“HOLA”); } </script> </head> <body> <script> saludo(); </script> </body>
  65. 65. ArgumentosLos argumentos son los valores que se pasan enla llamada y se podrán utilizar en lasinstrucciones de la función.Ejemplo: <head> <script> function saludo(nombre) { document.write(“HOLA ”+nombre); } </script> </head> <body> <script> n=prompt(“Nombre”,””); saludo(n); </script>
  66. 66. Valor de una funciónLas funciones también pueden devolver valores.Esto se hace con la instrucción return de lasiguiente 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 nes 5.
  67. 67. EventosLos eventos son sucesos que ocurren cuando elusuario realiza una acción, como por ejemplopulsar un botón o pasar sobre una imagen.
  68. 68. Los eventos se están asociados a elementosHTML, no a elementos JavaScript.Para asociar el evento a un conjunto deinstrucciones, creamos una función y lallamamos cuando se produzca el eventoutilizando los atributos de evento de las etiquetasHTML.
  69. 69. EventosEjemplo:<script>function saludo(){ alert("Hola");}</script><img src=boton.jpg onmouseover=saludo() >
  70. 70. 8. ObjetosUn objeto es algo que tiene unascaracterísticas y un comportamientoparticular. Es un conjunto depropiedades y funciones (llamadasmétodos).
  71. 71. Ejemplo:Una persona tiene unas característicaso propiedades : pelo corto, altura, colorde pelo, peso,...Además de propiedades una personatambién tiene un comportamiento,ejecuta ciertas acciones: comer,dormir,...El conjunto de propiedades yacciones/funciones definen un objeto.
  72. 72. En JavaScript existen una serie de objetospredefinidos, con sus propiedades yfunciones (métodos), algunas de las cualesya hemos utilizado.Uno de los objetos más importantes es elobjeto Window, que contiene a su vez otrosobjetos, estructurados en forma de árbol.
  73. 73. La estructura es la siguiente: self self document document Objeto Objeto document document navigator navigatorwindow window Screen Screen Forms Forms History History Location Location
  74. 74. Para hacer uso de las propiedades y métodos de un objetodebemos poner el nombre del objeto seguido de un punto yla propiedad o el método a continuación, por ejemplo: window.status=“mensaje”; Los métodos son funciones que podemos ejecutar y laspropiedades son simplemente variables que podemosasignar o leer.
  75. 75. Ahora veremos algunos ejemplos depropiedades y métodos de los objetos másutilizados
  76. 76. Objeto windowLa propiedad status del objeto window indica elmensaje 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 destinoen la barra de estado.Añade el código JavaScript necesario para que alpasar por encima aparezca el mensaje “Estás sobre elenlace” en la barra de estado.Cuestión: ¿Funciona en todos los navegadores?
  77. 77. El método open abre una ventana nueva con laspropiedades que le indiquemos.La sintaxis es: ventana=open(“URL”,”nombre”,”opciones”)donde opciones será una lista separada por comas delas siguientes propiedades: toolbar locationdirectories status menubar scrollbars resizable width heightEjemplo:ventana=open(“URL”,”nombre”,”toolbar=no,menubar=no,status=yes,width=200,height=200,resizable=yes);
  78. 78. Ejercicio:Crea una página que contenga un botón queal pulsarlo (evento onclick) abra una páginaen las que no aparezca ninguna barra salvola de estado y no se pueda redimensionar yademás ponga un mensaje en la barra deestado.(prueba en distintos navegadores)
  79. 79. Otros métodos del objeto window son:alertpromptconfirmclosePrintsetIntervalsetTimeoutEjercicio: utilizando la ayuda de Internetpon un ejemplo con cada uno de ellos
  80. 80. <script>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 puedesdesayunar en el Hollywood");}else{ alert("Eres mayor de edad, ya puedes desayunarcon los profes");}setTimeout("cerrar()",5000);document.write("Esta página se autodestruirá en 5segundos (solo si tienes explorer)");function cerrar(){ window.close();}</script><br><a href="javascript:window.print()">Imprimir estapágina</a>
  81. 81. Ejercicio: crea una página con un botóny que al pulsarlo la ventana tome eltamaño 600x400 píxeles y se coloque enla posición 100,100. de la pantalla
  82. 82. Objeto navigatorEl objeto navigator permite obtener datos delnavegador que estamos utilizando.Por ejemplo, la propiedad appName facilita elnombre del navegador utilizado, y la propiedadlanguaje el lenguaje del mismo:alert("Navegador: "+navigator.appName);alert(“Idioma : "+navigator.language);Estas propiedades son solo de lectura
  83. 83. Podemos utilizar estas propiedades para haceruso de la versión de Javascript que más se ajusteel navegador del cliente. Aunque debemos teneren cuenta que no son datos muy fiables.Ejercicio:Instala el componente “User Agent Switcher” deFirefox y averigua para qué sirve.
  84. 84. Objeto locationEste objeto contiene información sobre la páginaque se está visitando en ese momento. Algunasde las propiedades de este objeto solo tienenvalidez si la página está alojada en un servidor,no si está almacenada localmente.
  85. 85. 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 archivoslocales search → almacena los argumentos de llamada a lapágina, lo que acompaña a ‘?’ (cuando existe) en la barra dedireccionesAlgunos de sus métodos son:reload() → recarga la páginareplace(url) → carga la página que se indique entre losparéntesis. Para ello hay que indicar la dirección completa,incluyendo el protocolo, por ejemplo: location.replace(file:///D:/ejemplos/status.html)
  86. 86. Objeto historyContiene información sobre las páginas ya visitadas.La propiedad length indica el número de páginas visitadasdesde 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
  87. 87. Objeto historyEjercicio: 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áginasIndica al cargar la página cuántas páginas se han visitado enesta ventana.
  88. 88. Acceso a css desde JavascriptEl atributo style es un atributo más de los elementosHTMl, por lo tanto podremos acceder a él de la mismaforma.Ejemplo:var imagen = document.getElementById("imagen");alert(imagen.style.margin);
  89. 89. Nombre de las propiedades del objeto styleLa transformación del nombre de las propiedades CSScompuestas consiste en eliminar todos losguiones medios (-) y escribir en mayúscula la letrasiguiente 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 listStyleImageEjemplo:document.getElementById("enlace").style.textDecoration="none";
  90. 90. Ejemplo<a href=http://wwws.google.com id=enlace onmouseover=camba()onmouseout=camba()>Enlace a google</a><script>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"; }}</script>Descripción:Al pasar sobre el enlace cambiará de color y desapareceel subrayado. Al salir vuelve a su estado anterior. Similara la pseudoclase hover.
  91. 91. Objeto documentHace referencia al contenido del documento HTML. Esel 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 activosUno de los métodos más utilizados es write(), que yaconocemos de sobra para qué sirve.
  92. 92. Para utilizar el dato del cuadro de textonombrePropietario debemos escribir:document.getElementById(“nombrePropietario”).value
  93. 93. Si quisiéramos copiar el dato que el usuario ha escritoen el cuadroo nombreInquilino tendremos que usar lasiguiente instrucción de asignación:document.getElementById(“nombreInquilino”).value=document.getElementById(“nombrePropietario”).valueEjercicio: completa el código de la página para que alpulsar el botón se copien los datos de nombre yapellidos de propietario a los del inquilino
  94. 94. Ejercicio:Crea un formulario con dos cuadros de texto. Nombrey edad.Al pulsar el botón, se debe comprobar que ninguno deellos sea vacío y que además, la edad sea un númeroentre 16 y 65. Si ésto se cumple, llamaremos almétodo sumbit() del objeto formulario, para que pase ala siguiente página. De lo contrario aparecerá un solo“alert” indicándonos que hay algo mal y no saltará aninguna página.
  95. 95. <form action=datos.html id=formulario method=get>nombre:<input type=text id=nombre><br>edad:<input type=text id=edad><br><input type=button onclick=comprueba() value=Aceptar><script>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<66 && e>15) {document.getElementById("formulario").submit(); } else { alert("Edad incorrecta"); } }}</script>
  96. 96. Otros objetosOtros objetos:String: sirve para manejar cadenasMath: para realizar operaciones matemáticasDate: para manejar fechasArray: para manejar matrices
  97. 97. Objeto Mathabs(): Devuelve el valor absoluto de un número. Elvalor después de quitarle el signo.ceil(): Devuelve el entero igual o inmediatamentesiguiente 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.
  98. 98. Ejercicio:Crea una página en javascript que genere un númeroaleatorio entre 1 y 100, y pida al usuario que lo adivine(puedes utilizar el método prompt)..Seguirá preguntando hasta que el número seaadivinado.Cada vez que el usuario introduzca un número se debeindicar si el número secreto es mayor o menor.
  99. 99. <script>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);</script>
  100. 100. <script>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);</script>
  101. 101. Objeto Stringlength: Longitud de la cadenasplit(separador): Sirve para crear un array a partir de unacadena en el que cada elemento es la parte de la cadena queestá separada por el separador indicado por el parámetro.substring(inicio,fin): Devuelve el substring que empieza en elcarácter de inicio y termina en el carácter de fin.ToLowerCase(): Pasa todos los caracteres de una cadena aminúsculas.toUpperCase(): Pone todas los caracteres de un string enmayúsculas.
  102. 102. Ejemplo:<form action=datos.html id=formulario method=get>nombre:<input type=text id=nombre name=nombre><br><input type=button onclick=may() value=Aceptar><script>function may(){ var n=document.getElementById("nombre").value;document.getElementById("nombre").value=n.toUpperCase();}</script>

×