Successfully reported this slideshow.

Guia java script

1,482 views

Published on

Published in: Education
  • Be the first to comment

  • Be the first to like this

Guia java script

  1. 1. Elaborado Por: TSU Laur Vanegas JAVASCRIPT JavaScript, al igual que java, es una de las múltiples maneras que han surgido par entender las capacidades del lenguaje HTML. JavaScript no es un lenguaje de programación propiamente dicho. Es un lenguaje script orientada a documento, como pueden ser los lenguajes de marcos que tienen muchos procesadores de texto. JavaScript es un lenguaje de programación que se utiliza principalmente para crear páginas web dinámicas, es decir, paginas que incorporan efectos como texto que aparece y desaparece, animaciones, acciones que se activan al pulsar botones y ventanas con mensajes de aviso al usuario. JavaScript es un lenguaje interpretado, por lo que no es necesario compilar los programas para ejecutarlos. En otras palabras, los programas escritos con JavaScript se pueden probar directamente en cualquier navegador sin necesidad de procesos intermedios. La principal diferencia entre JavaScript y Java, es que este último es un lenguaje de programación completo. Lo único que comparten es la misma sintaxis. UTILIDAD DE JAVASCRIPT Las funciones que pueden llevarse a cabo con JavaScript son diversas permitiendo que la navegación sea más rica interactiva. Entre las que se pueden citar:  Los efectos de cambio de imágenes al pasar el ratón.  Menús desplegables, herramientas de selección de color.  Alarmas: generar mensajes que aparecen cuando el visitante hace algo, por ejemplo, antes de entrar en una página. Por ejemplo, pueden mostrar una cita o un lema diferente cada día.  Calendarios, relojes...  Cajas de texto independientes del resto de la página (utilizadas, por ejemplo, para incluir información legal, términos de servicio...)  Formularios para correo electrónico, por ejemplo para preparar una encuesta.
  2. 2. Elaborado Por: TSU Laur Vanegas  Efectos de audio y de imagen: cambio de color del fondo.  Juegos sencillos para jugar online. CARACTERISTICA DE JAVASCRIPT 1. JavaScript adopta una tecnología basada en objetos, lo que significa que proporciona un conjunto de objetos del navegador predefinidos. JavaScript permite a los usuarios definir objetos para su uso en el script.. 2. Está basado en un modelo manejado por eventos. En este tipo de modelos, se necesita una acción apropiada en respuesta a los eventos del usuario. 3. Se puede usar para hacer interactivas las paginas estáticas HTML. Se puede por ejemplo saludar al usuario de acuerdo a la hora del día o validar los campos del formulario para ver si el usuario ingresa correctamente los valores requeridos. 4. Es independiente del navegador, en consecuencia JavaScript se puede ejecutar en cualquier navegador que tenga el motor script de JavaScript 5. La sintaxis es similar a java y sus construcciones son similares a C, C++ o Java. 6. Su código se integra en las paginas HTML INCLUIR JAVASCRIPT EN HTML Existen tres formas de incluir JavaScript en páginas HTML: 1. Incluir JavaScript en el mismo documento HTML 2. Incluir JavaScript como un archivo externo al documento HTML 3. Incluir JavaScript en los elementos del documento HTML Incluir JavaScript en el mismo documento HTML: Para insertar JavaScript dentro del documento HTML, se hace uso de la etiqueta < script >…< /script > con los siguientes atributos:
  3. 3. Elaborado Por: TSU Laur Vanegas Nombre Descripción type=”…” Se utiliza para indicar el tipo de script que se va a escribir. Para JavaScript si valor es "text/javascript" Todo lo que se escriba dentro de las etiquetas <script type="text/javascript">…< /script > debe de respetar la sintaxis del lenguaje. Es una buena práctica de programación colocar esta etiqueta dentro de la etiqueta <head>…</head>. Ejemplo: Ejemplo de código JavaScript en el propio documento Este método se emplea cuando se define un bloque pequeño de código o cuando se quieren incluir instrucciones específicas en un determinado documento HTML que completen las instrucciones y funciones que se incluyen por defecto en todos los documentos del sitio web. El principal inconveniente es que si se quiere hacer una modificación en el bloque de código, es necesario modificar todas las páginas que incluyen ese mismo bloque de código JavaScript Incluir JavaScript como un archivo externo al documento HTML Al igual que en el primer caso, se hace uso de la etiqueta <script>…</script> con el atributo type="text/javascript" pero agregándosele un nuevo atributo. Nombre Descripción src=”…” Precisa el URL (dirección) del script a insertar en el documento. Este es un archivo con la extensión “.js” <html> <head> <title> Ejemplo de código JavaScript en el propio documento</title> <script type="text/javascript"> alert("Un mensaje de prueba"); </script> </head> <body> <p>Un párrafo de texto.</p> </body> </html>
  4. 4. Elaborado Por: TSU Laur Vanegas Ejemplo: Ejemplo de código JavaScript en un archivo externo Primero creamos un archivo JavaScript de nombre “ejemplo.js”, que contenga la siguiente información: Luego creamos la página HTML de nombre: Cada etiqueta <script> solamente puede enlazar un único archivo, pero en una misma página se pueden incluir tantas etiquetas <script> como sean necesarias. Los archivos de tipo JavaScript son documentos normales de texto con la extensión .js, que se pueden crear con cualquier editor de texto La principal ventaja de enlazar un archivo JavaScript externo es que se simplifica el código HTML de la página, se puede reutilizar el mismo código JavaScript en todas las páginas del sitio web y que cualquier modificación realizada en el archivo JavaScript se ve reflejada inmediatamente en todas las páginas HTML que lo enlazan. Incluir JavaScript en los elementos del documento HTML Este método es muy poco utilizado ya que consiste en incluir trozos de JavaScript dentro del código HTML de la página. El mayor inconveniente de este método es que ensucia innecesariamente el código HTML de la página y complica el mantenimiento del código JavaScript. En general, este método sólo se utiliza para definir algunos eventos. Ejemplo: Ejemplo de código JavaScript en elementos del documento HTML <html> <head> <title> Ejemplo de código JavaScript en un archivo externo </title> <script type="text/javascript" src=”ejemplo.js”> </script> </head> <body> <p>Un párrafo de texto.</p> </body> </html> alert("Un mensaje de prueba"); <html> <head> <title>Ejemplo de código JavaScript en elementos del documento HTML</title> </head> <body> <p onclick="alert('Un mensaje de prueba')"> De un Clic. </p> </body> </html>
  5. 5. Elaborado Por: TSU Laur Vanegas SINTAXIS DEL LENGUAJE Las normas básicas que definen la sintaxis de JavaScript son las siguientes:  No se tienen en cuenta los espacios en blanco y las nuevas líneas: como sucede con HTML, el intérprete de JavaScript ignora cualquier espacio en blanco sobrante, por lo que el código se puede ordenar de forma adecuada para entenderlo mejor (tabulando las líneas, añadiendo espacios, creando nuevas líneas, etc.)  Se distinguen las mayúsculas y minúsculas.  No se define el tipo de las variables: al crear una variable, no es necesario indicar el tipo de dato que almacenará. De esta forma, una misma variable puede almacenar diferentes tipos de datos durante la ejecución del script.  No es necesario terminar cada sentencia con el carácter de punto y coma: en la mayoría de lenguajes de programación, es obligatorio terminar cada sentencia con el carácter ;. Aunque JavaScript no obliga a hacerlo, es conveniente seguir la tradición de terminar cada sentencia con el carácter del punto y coma.  Se pueden incluir comentarios: los comentarios se utilizan para añadir información en el código fuente del programa. Aunque el contenido de los comentarios no se visualiza por pantalla, si que se envía al navegador del usuario junto con el resto del script, por lo que es necesario extremar las precauciones sobre la información incluida en los comentarios. VARIABLES Las variables en JavaScript como sigue: Ejemplo: Declarando variables en JavaScript Var nombreVariable = valor; <script type="text/javascript"> Var nombreEstudiante=”Juan Carlos”; Var idEstudiante, carrera; idEstudiante=”17516321” carrera=”ING SISTEMAS”; </script>
  6. 6. Elaborado Por: TSU Laur Vanegas JavaScript también permite que se declaren variables de forma implícita. Es decir que no es necesario que se declare la variable. Ejemplo: Declarando variables Implícitas en JavaScript CONSTANTES Al igual que en C++, las constantes en JavaScript se declaran mediante la siguiente sintaxis: Ejemplo: Declarando constantes Implícitas en JavaScript TIPOS DE DATOS A pesar de que en JavaScript no es necesario indicarle a un variable el tipo de dato, los valores que puede tomar son: TIPOS DE DATOS DE JAVASCRIPT TIPO EJEMPLOS DESCRIPCIÓN Number 4.5, 8.2, 10 Cualquier numero positivo, negativo o cero Boolean True, false Un verdadero o falso. Valores lógicos String “juan”, „Hola Mundo‟ Cualquier cadena dentro de las comillas Object Estudiante, instructor Cualquier entidad que tenga propiedades y métodos. undefined corresponde a las variables que han sido declaradas y todavía no se les ha asignado un valor OPERADORES Al igual que todos los lenguajes de programación, JavaScript proporciona un rico conjunto de operadores que ayudan a simplificar y darle solución a los problemas. <script type="text/javascript"> Var Codigo=”P001”; nombreProducto=”Leche Entera”; </script> const nombreConstante = valor; <script type="text/javascript"> const PI= 3.1416; </script>
  7. 7. Elaborado Por: TSU Laur Vanegas INTERACTUAR CON EL USUARIO Uno de los usos comunes de los operadores en JavaScript es el de realizar algunos cálculos en el lado del cliente y presentar los resultados a los usuarios. JavaScript tiene algunos métodos predefinidos para efectuar operaciones en el lado del cliente, como son:  alert (“cadena a mostrar”): abre una ventana con la cadena que se le pasa como parámetro. Ejemplo: Uso de la Función alert  prompt(“Texto a Mostrar”, ” Valor por defecto”): permite mostrar una ventana para que el usuario ingrese texto. Esta función retorna el dato que el usuario ingreso o el valor por defecto en caso de no haber ingresado información alguna. “” Ejemplo: Uso de la Función prompt TIPO OPERADORES SIMBOLOS Asignación = Aritméticos +, - , *, /, % Incremento y Decremento ++, -- Lógicos &&(and), | | (OR), ¡ (Negación) Relacionales >, <, >=, <=, !=, = = <html> <head> <title> Uso de la Funcion alert </title> <script type="text/javascript"> alert(“Hola Mundo”); </script> </head> <body> </body> </html> <html> <head> <title> Uso de la Funcion alert </title> <script type="text/javascript"> var usuario=prompt(“Escriba su Nombre”, “Ingrese su Nombre”); document.write(“Su Nombre es: <b>” + usuario+”</b>”); </script> </head> <body> </body> </html>
  8. 8. Elaborado Por: TSU Laur Vanegas  document.write(“cadena a imprimir en la pagina HTML”): permite escribir texto en la pagina html. CONDICIONALES Las construcciones de decisión permiten a los programadores ejecutar un bloque particular de código basado en una condición. En JavaScript existen dos bloques de construcción: 1. La sentencia if … else 2. La sentencia switch … case La sentencia if … else: La estructura más utilizada en JavaScript y en la mayoría de lenguajes de programación es la estructura if. Se emplea para tomar decisiones en función de una condición que puede ser verdadera (true) o falsa (false). Usos del Condicional Condicional Simple Condicional Dobles if (edad>=18){ alert (“Mayor de edad”); } if (edad>=18){ alert (“Mayor de edad”); } else { alert (“Menor de edad”); } Condicional Anidados if (num==1){ alert (“Romano I”); } else if (num==2) { alert (“Romano II”); } else if (num==3) { alert (“Romano III”); } else . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .
  9. 9. Elaborado Por: TSU Laur Vanegas La sentencia switch … case: Esta es similar a la construcción switch disponibles en lenguajes de programación como C, C++ o Java. La sintaxis de esta construcción es la siguiente: Ejemplo: Uso de Condicionales switch (variable) { case valor1: // sentencias a ejecutar break; case valor2: // sentencias a ejecutar break; ...... defaulf: // sentencias a ejecutar } <html> <head> <title> Ejemplo de condiciones </title> </head> <script type="text/javascript"> var num=prompt("Escriba un Numero (1-7)", "Numero"); if (num=='1') alert("Lunes") else if (num=='2') alert("Martes") else if (num=='3') alert("Miercoles") else if (num=='4') alert("Jueves") else if (num=='5') alert("Viernes") else if (num=='6') alert("Sabado") else if (num=='7') alert("Domingo"); else document.write("<b>Error Ingresaste:</b> " + num); </script> <body> </body> </html>
  10. 10. Elaborado Por: TSU Laur Vanegas Ejemplo: Uso Switch ESTRUCTURAS REPETITIVAS Permiten a los programadores ejecutar un bloque de código particular un numero dado de veces, hasta que se alcance una condición para finalizar el bucle. JavaScript proporciona tres tipos de ciclos: 1. Ciclo for 2. Ciclo while 3. Ciclo do...while <html> <head> <title> Ejemplo de condiciones </title> </head> <script type="text/javascript"> var num=prompt("Escriba un Numero (1-7)", "Numero"); switch (num) { case num=='1': alert("Lunes"); break; case num=='2': alert("Martes") break; case num=='3': alert("Miercoles") break; case num=='4': alert("Jueves") break; case num=='5': alert("Viernes") break; case num=='6': alert("Sabado") break; case num=='7': alert("Domingo"); break; default: document.write("<b>Error Ingresaste:</b> " + num); } </script> <body> </body> </html>
  11. 11. Elaborado Por: TSU Laur Vanegas Ciclo For La sintaxis del ciclo es la siguiente: La idea del funcionamiento de un bucle for es la siguiente: "mientras la condición indicada se siga cumpliendo, repite la ejecución de las instrucciones definidas dentro del for. Además, después de cada repetición, actualiza el valor de las variables que se utilizan en la condición".  La "inicialización" es la zona en la que se establece los valores iniciales de las  variables que controlan la repetición.  La "condición" es el único elemento que decide si continua o se detiene la repetición.  La "actualización" es el nuevo valor que se asigna después de cada repetición a las variables que controlan la repetición. Ejemplo: Código que imprime por Pantalla los Números del 1 al 10 Ciclo while La sintaxis se este ciclo es la siguiente: for (inicializacion; condicion; incremento o decremento) { // Sentencias a ejecutar } <html> <head> <title> Ejemplo de condiciones </title> </head> <script type="text/javascript"> alert("Se van a Imprimir los Numero del 1 al 10") document.write("<b>Listado de Numero:</b> <br>"); for (var i=1; i<=10; i++) { document.write(i + "<br>"); } </script> <body> </body> </html>
  12. 12. Elaborado Por: TSU Laur Vanegas El funcionamiento del bucle while se resume en: "mientras se cumpla la condición indicada, repite indefinidamente las instrucciones incluidas dentro del bucle". Si la condición no se cumple ni siquiera la primera vez, el bucle no se ejecuta. Si la condición se cumple, se ejecutan las instrucciones una vez y se vuelve a comprobar la condición. Si se sigue cumpliendo la condición, se vuelve a ejecutar el bucle y así se continúa hasta que la condición no se cumpla. Evidentemente, las variables que controlan la condición deben modificarse dentro del propio bucle, ya que de otra forma, la condición se cumpliría siempre y el bucle while se repetiría indefinidamente. Ejemplo: Código que imprime por Pantalla los Números del 1 al 10 Ciclo do … while La sintaxis se este ciclo es la siguiente: while (condición) { // Sentencias a ejecutar } <html> <head> <title> Ejemplo de condiciones </title> </head> <script type="text/javascript"> alert("Se van a Imprimir los Numero del 1 al 10") document.write("<b>Listado de Numero:</b> <br>"); var i=1; while (i<=10) { document.write(i + "<br>"); i++; } </script> <body> </body> </html> do { // Sentencias a ejecutar } while (condición)´;
  13. 13. Elaborado Por: TSU Laur Vanegas El bucle de tipo do...while es muy similar al bucle while, salvo que en este caso siempre se ejecutan las instrucciones del bucle al menos la primera vez. De esta forma, como la condición se comprueba después de cada repetición, la primera vez siempre se ejecutan las instrucciones del bucle. Es importante no olvidar que después del while() se debe añadir el carácter ; (al contrario de lo que sucede con el bucle while simple) Ejemplo: Código que imprime por Pantalla los Números del 1 al 10 ARREGLOS EN JAVASCRIPT En JavaScript un array es una colección de variables que pueden ser todas del mismo tipo o cada una de un tipo diferente. Es decir, un arreglo permite guardar varias variables y acceder a ellas de manera independiente, es como tener una variable con distintos compartimentos donde podemos introducir datos distintos. Para ello utilizamos un índice que nos permite especificar el compartimiento o posición a la que nos estamos refiriendo. Para crear array en JavaScript se pueden emplear dos métodos: 1. Por asignación de valores 2. Utilizando la clase Array() <html> <head> <title> Ejemplo de condiciones </title> </head> <script type="text/javascript"> alert("Se van a Imprimir los Numero del 1 al 10") document.write("<b>Listado de Numero:</b> <br>"); var i=1; do { document.write(i + "<br>"); i++; } while (i<=10) </script> <body> </body> </html>
  14. 14. Elaborado Por: TSU Laur Vanegas Crear arreglos por Asignación de Valores Este método consiste en asignarle valores a las posiciones del arreglo de manera manual. Por ejemplo: imaginemos que necesitamos almacenar los días de la semana en el arreglo diasSemanas, el código JavaScript seria el siguiente: El código anterior declara el arreglo unidimensional diasSemanas como un vector de 7 posiciones. Para acceder a los valores del arreglo se utiliza el índice que indique la posición del elemento al que se quiera acceder (la primera posición de los arreglos en JavaScript es cero, la segunda es uno y así sucesivamente). Por ejemplo: De igual forma, el arreglo diasSemanas se puede imprimir haciendo uso de ciclos repetitivos, por ejemplo: Por otro lado, los arreglos en JavaScript se pueden declarar empleando otro tipo de asignación. Suponga que se quiere almacenar en un arreglo los siguientes datos:  La cadena “Hola Mundo”, en la posición 1  El valor de la contante PI, 3.1416, en la posición 2  el valor lógico false en la posición 3 El código seria: Var diasSemanas= [“lunes”,”martes”,”miercoles”,”jueves”,”viernes”,”sabado”,”domingo”]; Document.write(diasSemanas[0]); // muestra lunes Document.write(diasSemanas[2]); // muestra martes ... ... ... ... Document.write(diasSemanas[6]); // muestra domingo for (var i=0; i<diasSemanas.length; i++){ Document.write(diasSemanas[i]); } arreglo[0]= “Hola Mundo”; arreglo[1]= 3.1416; arreglo[2]= false;
  15. 15. Elaborado Por: TSU Laur Vanegas Es decir, un arreglo en JavaScript también se puede declarar asignándole valores a cada una de las posiciones del arreglo. Asimismo, en el código anterior se muestra unas de las ricas características de los array, y es la posibilidad de almacenar diferentes datos en diferentes posiciones dentro de la misma estructura, acción que no es permitida en otros lenguajes como PASCAL, Lenguaje C, entre otros. Crear arreglos usando la Clase Array() Para crear arreglos utilizando la clase Array() se pueden emplear dos sintaxis, la primera es indicando el tamaño del arreglo y luego asignarle valores a cada posición, es decir: En la segunda se indica en la declaración los valores que debe tener el arreglo, tal como se ejemplifica: Funciones útiles para Arreglos  length: calcula el número de elementos de un array.  concat(): se emplea para concatenar los elementos de varios arrays var miArreglo = new Array(3); // declaración del arreglo // Asignando valores a cada posición arreglo[0]= “Hola Mundo”; arreglo[1]= 3.1416; arreglo[2]= false; // declaración del arreglo var miArreglo = new Array(“Hola Mundo”,3.1416, false); var vocales = ["a", "e", "i", "o", "u"]; var numeroVocales = vocales.length; // numeroVocales = 5 var array1 = [1, 2, 3]; array2 = array1.concat(4, 5, 6); // array2 = [1, 2, 3, 4, 5, 6] array3 = array1.concat([4, 5, 6]); // array3 = [1, 2, 3, 4, 5, 6]
  16. 16. Elaborado Por: TSU Laur Vanegas  join(separador): Une todos los elementos de un array para formar una cadena de texto. Para unir los elementos se utiliza el carácter separador indicado.  pop(): elimina el último elemento del array y lo devuelve. El array original se modifica y su longitud disminuye en 1 elemento.  push(): añade un elemento al final del array. El array original se modifica y aumenta su longitud en 1 elemento. (También es posible añadir más de un elemento a la vez)  shift(): elimina el primer elemento del array y lo devuelve. El array original se ve modificado y su longitud disminuida en 1 elemento.  unshift(): añade un elemento al principio del array. El array original se modifica y aumenta su longitud en 1 elemento. (También es posible añadir más de un elemento a la vez)  reverse(): modifica un array colocando sus elementos en el orden inverso a su posición original var array = ["hola", "mundo"]; var mensaje = array.join(""); // mensaje = "holamundo" mensaje = array.join(" "); // mensaje = "hola mundo" var array = [1, 2, 3]; var ultimo = array.pop(); // ahora array = [1, 2], ultimo = 3 var array = [1, 2, 3]; array.push(4); // ahora array = [1, 2, 3, 4] var array = [1, 2, 3]; var primero = array.shift(); // ahora array = [2, 3], primero = 1 var array = [1, 2, 3]; array.unshift(0); // ahora array = [0, 1, 2, 3] var array = [1, 2, 3]; array.reverse(); // ahora array = [3, 2, 1]
  17. 17. Elaborado Por: TSU Laur Vanegas Ejemplo: Uso de Arreglos en JavaScript FUNCIONES EN JAVASCRIPT Una función es un grupo de sentencias de código para lograr una determinada funcionalidad. Las funciones de JavaScript pueden recibir uno o más parámetros de entrada y devolver los resultados. El uso de funciones en JavaScript es similar al de C o C++, sin embargo la sintaxis es diferente. Las funciones en JavaScript se pueden dividir en dos grupos: 1. Funciones propias de JavaScript 2. Funciones definidas por el programador. <html> <head> <title> Uso de Arreglos en JavaScript </title> </head> <script type="text/javascript"> // Declaro los dos vectores var nombres=Array(3); var edades=Array(3); // cargo ambos vectores for (var i=0; i<=3; i++){ nombres[i]=prompt("Teclee su Nombre:","Nombre..."); edades[i]=prompt("Ahora su edad "+ nombres[i],"Edad..."); } // Genero la Salida var salida=""; for (var i=0; i<=3; i++){ salida+=(i+1)+".- "+nombres[i]+ " tiene "+edades[i]+"n"; } alert(salida) </script> <body> </body> </html>
  18. 18. Elaborado Por: TSU Laur Vanegas Funciones propias de JavaScript JavaScript incorpora una serie funciones y propiedades para el manejo de las variables. De esta forma, muchas de las operaciones básicas con las variables, se pueden realizar directamente con las utilidades que ofrece JavaScript. Algunas de las funciones incorporadas que ofrece el lenguaje son:  eval (cadena): Esta función recibe una cadena de caracteres y la ejecuta como si fuera una sentencia de JavaScript.  isNaN (numero): esta función evalúa el parámetro de entrada para determinar si NO ES UN NUMERO. Retorna trae si no es un numero y false si lo es.  parseInt (cadena, base): Recibe una cadena y una base. Devuelve un valor numérico resultante de convertir la cadena en un número en la base indicada. La base puede ser 10 para decimal, 8 para octal y 16 para hexadecimal.  parseFloat(cadena, base): Convierte la cadena en un número dependiendo de la base y lo devuelve. Los valores de base son iguales que para la función parseInt. Además de las funciones antes descritas, JavaScript proporciona otro rico conjunto de funciones para manejar cadenas, fechas, arreglos, números, entre otros; dentro de objetos. Es decir, en el lenguaje existen ciertos objetos predefinidos, llamados Objetos JavaScript, con propiedades y métodos que ayudan a lograr algunas funcionalidades. Estos objetos son:  Boolean  Array  Number  String  Date  Math.
  19. 19. Elaborado Por: TSU Laur Vanegas NOTA: Para los efectos de la guía, solo se explicaran los objetos Boolean, String, Date y Math. Los restantes objetos quedan a investigación del estudiante. El Objeto Boolean Se usa para manejar los valores lógicos dentro del lenguaje verdadero o falso (trae o false). Un objeto Boolean se crea de la siguiente manera: El objeto Boolean tiene un método valueOf(), que retorna el valor primitivo. El paso de un parámetro al constructor crea un objeto Boolean. Los objetos Boolean siguen ciertas reglas al tomar un valor particular. Estas son:  0 se toma como false. Cualquier valor distinto de cero se considera como verdadero.  Una cadena vacía es tomada como false. Cualquier otra cadena es tomada como true.  Cualquier objeto valido se toma como trae. El valor null se toma como false. Ejemplo: Uso del Objeto Boolean. El Objeto String Cualquier cadena que entre enmarcada por las comillas simples o dobles se considera como objetos String. Para crear un objeto String se puede usar: O también: miVariable = new Boolean (value); <html> <head> <title> Ejemplo de condiciones </title> </head> <script type="text/javascript"> var valorLogico = new Boolean(false); alert("El valor de la variable es: " + valorLogico); </script> <body> </body> </html> miVariable = new String (“cadena”);
  20. 20. Elaborado Por: TSU Laur Vanegas El objeto String proporciona muchos métodos útiles para manipular cadenas. Entre los cuales se destacan:  length: calcula la longitud de una cadena de texto (el número de caracteres que la forman).  concat(“cadena”): se utiliza para concatenar cadenas, es similar al uso del operador “+”.  toUpperCase(): transforma todos los caracteres de la cadena a sus correspondientes caracteres en mayúsculas.  toLowerCase(): transforma todos los caracteres de la cadena a sus correspondientes caracteres en minúsculas.  charAt(posicion): obtiene el carácter que se encuentra en la posición indicada.  indexOf(caracter): calcula la posición en la que se encuentra el carácter indicado dentro de la cadena de texto. Si el carácter se incluye varias veces miVariable = “cadena”; var mensaje = "Hola Mundo"; var numeroLetras = mensaje.length; // numeroLetras = 10 var mensaje = "Hola"; var mensaje2 = mensaje1.concat(" Mundo"); // mensaje2 = "Hola Mundo" var mensaje3= mensaje1 + " Mundo"; // mensaje3 = "Hola Mundo" var mensaje = "Hola"; var mensaje2 = mensaje1.toUpperCase(); // mensaje2 = "HOLA" var mensaje = "HOLA"; var mensaje2 = mensaje1.toLowerCase(); // mensaje2 = "hola" var mensaje = "Hola"; var letra = mensaje.charAt(0); // letra = H letra = mensaje.charAt(2); // letra = l
  21. 21. Elaborado Por: TSU Laur Vanegas dentro de la cadena de texto, se devuelve su primera posición empezando a buscar desde la izquierda. Si la cadena no contiene el carácter, la función devuelve el valor -1.  lastIndexOf(caracter): calcula la última posición en la que se encuentra el carácter indicado dentro de la cadena de texto. Si la cadena no contiene el carácter, la función devuelve el valor -1. Esta función comienza su búsqueda desde el final de la cadena hacia el principio aunque la posición devuelta es la correcta empezando a contar desde el principio de la palabra.  substring(inicio, final): extrae una porción de una cadena de texto. El segundo parámetro es opcional. Si sólo se indica el parámetro inicio, la función devuelve la parte de la cadena original correspondiente desde esa posición hasta el final.  split(separador): convierte una cadena de texto en un array de cadenas de texto. La función parte la cadena de texto determinando sus trozos a partir del carácter separador indicado. var mensaje = "Hola"; var posicion = mensaje.indexOf('a'); // posicion = 3 posicion = mensaje.indexOf('b'); // posicion = -1 var mensaje = "Hola"; var posicion = mensaje.lastIndexOf('a'); // posicion = 3 posicion = mensaje.lastIndexOf('b'); // posicion = -1 var mensaje = "Hola Mundo"; var porcion = mensaje.substring(2); // porcion = "la Mundo" porcion = mensaje.substring(5); // porcion = "Mundo" porcion = mensaje.substring(7); // porcion = "ndo" var mensaje = "Hola Mundo, soy una cadena de texto!"; var palabras = mensaje.split(" "); // palabras = ["Hola", "Mundo,", "soy", "una", "cadena", "de", "texto!"]; var palabra = "Hola"; var letras = palabra.split(""); // letras = ["H", "o", "l", "a"]
  22. 22. Elaborado Por: TSU Laur Vanegas  bold(): coloca la cadena en negrilla. Similar a la etiqueta <B> de HTML.  fontColor(color) : Pone la fuente al color indicado. Similar a la etiqueta <FONT color=el_color_indicado> de HTML.  fontSize(tamaño) : Pone la fuente al tamaño indicado. Similar a la etiqueta <FONT> con el atributo size de HTML.  italics() : Pone la fuente en cursiva. Etiqueta <I>.  sub(): Actualiza el texto como si se estuviera utilizando la etiqueta <SUB>, de subíndice.  sup() : Como si utilizásemos la etiqueta <SUP>, de superíndice. El Objeto Date Sobre este objeto recae todo el trabajo con fechas en Javascript, como obtener una fecha, el día la hora y otras cosas. Para trabajar con fechas se necesita instanciar un objeto de la clase Date y con él poder realizar las operaciones requeridas. Un objeto de la clase Date se puede crear de dos maneras distintas. Por un lado crear el objeto con el día y hora actuales y por otro crearlo con un día y hora distintos a los actuales. Esto depende de los parámetros que se le pase a la hora de construir el objeto. Para crear un objeto fecha con el día y hora actuales se colocan los paréntesis vacíos al llamar al constructor de la clase Date: Para crear un objeto fecha con un día y hora distintos de los actuales se debe de indicar entre paréntesis los formatos, una guía de cómo hacerlo serian las siguientes: var miFecha = new Date(); var miFecha = new Date(año,mes,dia,hora,minutos,segundos); var miFecha = new Date(año,mes,dia);
  23. 23. Elaborado Por: TSU Laur Vanegas NOTA: Los valores que debe recibir el constructor son siempre numéricos. El mes comienza por 0, es decir, enero es el mes 0. Si no se indica la hora, el objeto fecha se crea con hora 00:00:00. Los objetos de la clase Date no tienen propiedades pero si varios métodos listados a continuación:  getDate(): Devuelve el día del mes.  getDay(): Devuelve el día de la semana.  getHours(): Retorna la hora.  getMinutes(): Devuelve los minutos.  getMonth(): Devuelve el mes (atención al mes que empieza por 0).  getSeconds(): Devuelve los segundos.  getTime(): Devuelve los milisegundos transcurridos entre el día 1 de enero de 1970 y la fecha correspondiente al objeto al que se le pasa el mensaje.  getFullYear(): Retorna el año con todos los dígitos. Usar este método para estar seguros de que funcionará todo bien en fechas posteriores al año 2000.  setDate(dia): Actualiza el día del mes.  setHours(hora): Actualiza la hora.  setMinutes(minutos): Cambia los minutos.  setMonth(mes): Cambia el mes (0 enero, 1 febrero, …).  setSeconds(segundos): Cambia los segundos.
  24. 24. Elaborado Por: TSU Laur Vanegas  setFullYear(año): Cambia el año de la fecha al número que recibe por parámetro. El número se indica completo ej: 2005 o 1995. Utilizar este método para estar seguros que todo funciona para fechas posteriores a 2000. El Objeto Math La clase Math proporciona los mecanismos para realizar operaciones matemáticas en JavaScript. Algunas operaciones se resuelven rápidamente con los operadores aritméticos, como la multiplicación o la suma, pero hay una serie de operaciones matemáticas adicionales que se tienen que realizar usando el objeto Math como pueden ser calcular un seno o hacer una raíz cuadrada. El objeto Math proporciona un rico conjunto de propiedades y métodos que podemos acceder empleando la siguiente sintaxis: Algunas de las propiedades que nos brinda el objeto Math son:  E: Número E o constante de Euler, la base de los logaritmos neperianos.  LN2: Logaritmo neperiano de 2.  LN10: Logaritmo neperiano de 10.  LOG2E: Logaritmo en base 2 de E.  LOG10E: Logaritmo en base 10 de E.  PI: Conocido número para cálculo con círculos.  SQRT1_2: Raíz cuadrada de un medio.  SQRT2: Raíz cuadrada de 2. Math.Propiedad o Math.Metodo
  25. 25. Elaborado Por: TSU Laur Vanegas Así mismo, algunos métodos importantes del objeto son:  abs(): Devuelve el valor absoluto de un número. El valor después de quitarle el signo.  acos(): Devuelve el arcocoseno de un número en radianes.  asin(): Devuelve el arcoseno de un numero en radianes.  atan(): Devuelve un arcotangente de un numero.  ceil(): Devuelve el entero igual o inmediatamente siguiente de un número. Por ejemplo, ceil(3) vale 3, ceil(3.4) es 4.  cos(): Retorna el coseno de un número.  exp(): Retorna el resultado de elevar el número E por un número.  floor(): Lo contrario de ceil(), pues devuelve un número igual o inmediatamente inferior.  log(): Devuelve el logaritmo neperiano de un número.  max(): Retorna el mayor de 2 números.  min(): Retorna el menor de 2 números.  pow(): Recibe dos números como parámetros y devuelve el primer número elevado al segundo número.  random(): Devuelve un número aleatorio entre 0 y 1.  round(): Redondea al entero más próximo.
  26. 26. Elaborado Por: TSU Laur Vanegas  sin(): Devuelve el seno de un número con un ángulo en radianes.  sqrt(): Retorna la raíz cuadrada de un número.  tan(): Calcula y devuelve la tangente de un número en radianes. Funciones definidas por el Programador Cuando una serie de instrucciones se repiten una y otra vez, se complica demasiado el código fuente de la aplicación, ya que:  El código de la aplicación es mucho más largo porque muchas instrucciones están repetidas.  Si se quiere modificar alguna de las instrucciones repetidas, se deben hacer tantas modificaciones como veces se haya escrito esa instrucción, lo que se convierte en un trabajo muy pesado y muy propenso a cometer errores. Las funciones son la solución a todos estos problemas, tanto en JavaScript como en el resto de lenguajes de programación. Una función es un conjunto de instrucciones que se agrupan bajo un nombre para realizar una tarea concreta y que se pueden reutilizar fácilmente. Declaración de una Función en JavaScript En JavaScript las funciones se declaran de la siguiente forma: function nombreFuncion (parametro1, parametro2,...) { // Cuerpo de la Función }
  27. 27. Elaborado Por: TSU Laur Vanegas Las funciones normalmente son definidas dentro de las etiquetas <script>…</script> presentes en la etiqueta <head>…</head> y básicamente están compuestas por:  La palabra reservada function, que le indica a JavaScript que se va a definir una función.  El nombreFuncion, que debe ser único para cada función dentro de un mismo script y se utiliza para llamar a la función cuando sea necesario, es decir, para que la función ejecute las acciones que están en su cuerpo.  Los parametro1, parametro2,..., o también llamados argumentos de la función. Son variables (pueden ser cero, una o varias en cuyo caso deben de separase por comas) o datos que necesita la función para poder cumplir su cometido.  El Cuerpo de la Función, que se encuentra limitado entre las llaves { }. El mismo esta conformado por estructuras secuencias, selectivas y/o repetitivas. Cabe acotar que en el mismo pueden haber llamadas a otras funcione previamente definidas. Ejemplo: Definición de una función sin parámetros, que muestra una ventana de “Bienvenidos” El código anterior muestra la definición de la función mostrarMensaje, esta función no posee argumentos y el cuerpo solo esta conformado por la llamada a la función interna de JavaScript alert. function mostrarMensaje(){ alert(“BIENVENIDO”); }
  28. 28. Elaborado Por: TSU Laur Vanegas El código completo de HTML, en el que se define a la función es el siguiente: Si intentamos ejecutar el código, verificamos que no proporciona ninguna salida. Esto es debido a que para que una función pueda ser ejecutada hay que realizar una llamado de la misma. Es decir, se debe de colocar el nombre de la función seguido de los paréntesis ( ). En el caso de que la función reciba parámetros estos se deben de pasar en el llamado de la función. Para el ejemplo anterior, el código correcto seria: Argumentos de una función Las funciones más sencillas no necesitan ninguna información para producir sus resultados. Sin embargo, la mayoría de funciones de las aplicaciones reales deben acceder al valor de algunas variables para producir sus resultados. <html> <head> <title> Ejemplo de condiciones </title> <script type="text/javascript"> function mostrarMensaje(){ alert(“BIENVENIDO”); } </script> </head> <body> </body> </html> <html> <head> <title> Ejemplo de condiciones </title> <script type="text/javascript"> // Definicion de la funcion function mostrarMensaje(){ alert(“BIENVENIDO”); } // Llamado a la funcion mostrarMensaje(); </script> </head> <body> </body> </html>
  29. 29. Elaborado Por: TSU Laur Vanegas Las variables que necesitan las funciones se llaman argumentos. Antes de que pueda utilizarlos, la función debe indicar cuántos argumentos necesita y cuál es el nombre de cada argumento. Además, al invocar la función, se deben incluir los valores que se le van a pasar a la función. Los argumentos se indican dentro de los paréntesis que van detrás del nombre de la función y se separan con una coma (,). La función que se definió anteriormente, mostrarMensaje, se puede hacer más general, es decir, puede construirse de manera que no solo muestre el mensaje “Bienvenido” si no que muestre el mensaje dependiendo del valor que reciba como parámetro. De esta manera la función quedaría definida como sigue: En donde mensaje, es un parámetro de la función pensado para recibir una cadena que luego será mostrada al usuario a través de la función alert. Cuando se define una función con parámetros, en la llamada de función, se deben de indicar los valores de cada uno separados por comas. Ejemplo: Pagina que muestra el uso de la funciones con parámetros. function mostrarMensaje(mensaje){ alert(mensaje); } <html> <head> <title> Ejemplo de condiciones </title> <script type="text/javascript"> // Definicion de la funcion function mostrarMensaje(mensaje){ alert(mensaje); } // Llamado a la funcion mostrarMensaje("Bienvendios"); mostrarMensaje("Segundo llamado a la funcion"); mostrarMensaje("Tercer llamado a la funcion"); var texto="Ultimo llamado...n DIOSSSSSSSSSSSSS"; mostrarMensaje(texto); </script> </head> <body> </body> </html>
  30. 30. Elaborado Por: TSU Laur Vanegas Para finalizar con la discusión de los parámetros, se presentan ciertos puntos a tener en cuenta cuando se emplean en las funciones:  Los parámetros a un función se pueden pasar de manera directa o utilizando variables. Aunque casi siempre el segundo método es el mas empleado.  El número de argumentos que se pasa a una función debería ser el mismo que el número de argumentos que ha indicado la función. No obstante, JavaScript no muestra ningún error si se pasan más o menos argumentos de los necesarios.  El orden de los argumentos es fundamental, ya que el primer dato que se indica en la llamada, será el primer valor que espera la función; el segundo valor indicado en la llamada, es el segundo valor que espera la función y así sucesivamente.  Se puede utilizar un número ilimitado de argumentos, aunque si su número es muy grande, se complica en exceso la llamada a la función.  No es obligatorio que coincida el nombre de los argumentos que utiliza la función y el nombre de los argumentos que se le pasan. Valor de retorno de una función Las funciones no solamente pueden recibir variables y datos, sino que también pueden devolver los valores que han calculado. Para devolver valores dentro de una función, se utiliza la palabra reservada return. Aunque las funciones pueden devolver valores de cualquier tipo, solamente pueden devolver un valor cada vez que se ejecutan.
  31. 31. Elaborado Por: TSU Laur Vanegas Para que la función devuelva un valor, solamente es necesario escribir la palabra reservada return junto con el nombre de la variable que se quiere devolver. Suponga que se quiere crear una función de suma, que reciba como parámetros dos números y calcula su suma. La función seria: En el código anterior, cuando la ejecución de la función llega a la instrucción return suma, se devuelve el valor que posee la variable suma. Como la función devuelve un valor, en el punto en el que se realiza la llamada, debe indicarse el nombre de una variable en el que se guarda el valor devuelto: Si no se indica el nombre de ninguna variable, JavaScript no muestra ningún error y el valor devuelto por la función simplemente se pierde y por tanto, no se utilizará en el resto del programa. En este caso, tampoco es obligatorio que el nombre de la variable devuelta por la función coincida con el nombre de la variable en la que se va a almacenar ese valor. Si la función llega a una instrucción de tipo return, se devuelve el valor indicado y finaliza la ejecución de la función. Por tanto, todas las instrucciones que se incluyen después de un return se ignoran y por ese motivo la instrucción return suele ser la última de la mayoría de funciones. function suma(num1, num2){ var suma = num1 + num2; return suma; } var result = suma(10,5); // result=15
  32. 32. Elaborado Por: TSU Laur Vanegas Ámbito de las Variables Al trabajar con funciones es necesario entender el concepto de “Ámbito de variables”. El ámbito de una variable, se define como la zona del programa en la que se define la variable. JavaScript define dos ámbitos para las variables: global y local. Una variable se define como ámbito global cuando se declara fuera de cualquier función, independientemente de si se define utilizando la palabra reservada var o no. Asimismo, si en el interior de una función, las variables se declaran mediante var se consideran locales y las variables que no se han declarado mediante var, se transforman automáticamente en variables globales. Ejemplo: Pagina que lleva la conversión de grados centígrados a Fahrenheit <html> <head> <title> Ejemplos de JavaScript </title> <script type="text/javascript"> // Definicion de las funciones function calcular(tempCentigrados){ var Temperatura=(tempCentigrados*1.8)+32 return Temperatura } var Temperatura= prompt("Introduzca la Temperatura en Centígrados:", "Ingrese...") document.write("El Equivalente en Fahrenheit es: " + calcular(Temperatura)); </script> </head> <body> </body> </html>
  33. 33. Elaborado Por: TSU Laur Vanegas QUE ES EL DOM (Modelo de Objetos de Documentos) Es una interfaz de programación de aplicaciones (API) para documentos HTML y XML. Define la estructura lógica de los documentos y el modo en que se accede y manipula el mismo. Con el Modelo de Objetos del Documento los programadores pueden construir documentos, navegar por su estructura, y añadir, modificar o eliminar elementos y contenido. Se puede acceder a cualquier cosa que se encuentre en un documento HTML o XML, y se puede modificar, eliminar o añadir usando el Modelo de Objetos del Documento. Es la estructura de objetos que genera el navegador cuando se carga un documento y se puede alterar mediante JavaScript para cambiar dinámicamente los contenidos y aspecto de la página. Árbol de Nodos DOM transforma todos los documentos HTML en un conjunto de elementos llamados nodos, que están interconectados y que representan los contenidos de las páginas web y las relaciones entre ellos. Por su aspecto, la unión de todos los nodos se llaman Árbol de Nodos. Por ejemplo, la siguiendo pagina HTML <html> <head> <title> Pagina Sencilla </title> </head> <body> <p>Un párrafo de <b>texto.</b> </p> </body> </html>
  34. 34. Elaborado Por: TSU Laur Vanegas Se transforma en el siguiente árbol de nodos: En el esquema anterior, cada rectángulo representa un nodo DOM y las flechas indican las relaciones entre nodos. La raíz de cualquier documento HTML es document. A partir de ese nodo raíz, cada etiqueta HTML se transforma en un nodo de tipo element. La conversión de etiquetas en nodos se realiza de forma jerárquica. De esta forma, del nodo raíz solamente pueden derivar los nodos HEAD y BODY. A partir de esta derivación inicial, cada etiqueta HTML se transforma en un nodo que deriva del nodo correspondiente a su etiqueta padre. La transformación automática de la página en un árbol de nodos siempre sigue las siguientes reglas:
  35. 35. Elaborado Por: TSU Laur Vanegas 1. Las etiquetas HTML se transforman en dos nodos: el primero es la propia etiqueta y el segundo nodo es el hijo del primero y consiste en el contenido textual de la etiqueta. 2. Si una etiqueta HTML se encuentra dentro de otra, se sigue el mimos procedimiento anterior, pero los nodos generados serán nodos hijos de su etiqueta padre. La siguiente jerarquía, muestra los diferentes elementos del modelo de objeto del documento y sus relaciones: Tipos de Nodos En DOM existen 12 tipos de nodos, aunque para las páginas HTML se pueden manipular solamente con cuatro o cinco tipos de nodo: 1. document: es el nodo raíz de todos los documentos HTML, todos los demás nodos derivan del él. 2. element: representa cada una de las etiquetas HTML. Se trata del único nodo que puede contener atributos y el único del que pueden derivar otros nodos.
  36. 36. Elaborado Por: TSU Laur Vanegas 3. atrr: se define un nodo de este tipo para representar cada uno de los atributos de las etiquetas HTML, es decir, uno por cada par atributo=valor 4. text: almacena el contenido que se encuentra entre una etiqueta de apertura y una de cierre. 5. comment: representa los comentarios incluidos en la pagina HTML Propiedades y Métodos de los Nodos  getNodeName(): retorna el nombre del nodo, es decir, el nombre de la etiqueta  getNodeValue(): retorna el valor que almacena el nodo (etiqueta)  getAttributes(): retorna el conjunto de atributos presentes en un nodo particular.  getNodeType(): retorna el tipo de nodo. Los valores más utilizados son: Constantes Valor ELEMENT_NODE 1 ATTRIBUTE_NODE 2 TEXT_NODE 3 DOCUMENT_NODE 9 
  37. 37. Elaborado Por: TSU Laur Vanegas Acceso a los Nodos del Árbol Los nodos del árbol DOM se pueden acceder si y solo si la pagina está completamente cargada de lo contrario se producirá un error, es decir, el acceso a los nodos, modificación y su eliminación solamente es posible cuando el árbol DOM ha sido construido. Como acceder a un nodo del árbol es equivalente a acceder a un trozo de la página, una vez construido el árbol, ya es posible manipular de forma sencilla la página: acceder al valor de un elemento, establecer el valor de un elemento, mover un elemento de la página, crear y añadir nuevos elementos, etc. Los elementos (nodos) del DOM se pueden acceder por dos métodos: 1. Nombre del Elemento 2. Empleando Funciones de Acceso Directo 1. Nombre del Elemento Los diferentes elementos de una página se pueden acceder utilizando el valor del atributo NAME, por ejemplo: supóngase que se ha declarado Objeto Navigator Representa al navegador que esta usándose en la maquina cliente, es decir, en la maquina en la que se está visualizando la pagina. Este objeto tiene propiedades y métodos que pueden detectar el tipo, versión y agente de usuario del navegador.
  38. 38. Elaborado Por: TSU Laur Vanegas Propiedades  appCodeName: Cadena que contiene el nombre del código del cliente.  appName: Cadena que contiene el nombre del cliente.  appVersion: Cadena que contiene información sobre la versión del cliente.  Language: Cadena de dos caracteres que contiene información sobre el idioma de la versión del cliente.  mimeTypes: Array que contiene todos los tipos MIME soportados por el cliente. A partir de NS 3.  Platform: Cadena con la plataforma sobre la que se está ejecutando el programa cliente.  Plugins: Array que contiene todos los plug-ins soportados por el cliente. A partir de NS 3.  userAgent: Cadena que contiene la cabecera completa del agente enviada en una petición HTTP. Contiene la información de las propiedades appCodeName y appVersion. Métodos javaEnabled(). Devuelve true si el cliente permite la utilización de Java, en caso contrario, devuelve false. El Objeto window Se trata del objeto más alto en la jerarquía del navegador (navigator es un objeto independiente de todos en la jerarquía), pues todos los componentes de una página web están situados dentro de una ventana. El objeto window hace referencia a la ventana actual.
  39. 39. Elaborado Por: TSU Laur Vanegas Propiedades 1. closed: Válida a partir de Netscape 3 en adelante y MSIE 4 en adelante. Es un booleano que nos dice si la ventana está cerrada ( closed = true ) o no ( closed = false ). 2. defaultStatus: Cadena que contiene el texto por defecto que aparece en la barra de estado (status bar) del navegador. 3. frames:. Es un array: cada elemento de este array (frames[0], frames[1], ...) es uno de los frames que contiene la ventana. Su orden se asigna según se definen en el documento HTML. 4. history: Se trata de un array que representa las URLS visitadas por la ventana (están almacenadas en su historial). 5. length: Variable que nos indica cuántos frames tiene la ventana actual. 6. location: Cadena con la URL de la barra de dirección. 7. name: Contiene el nombre de la ventana, o del frame actual. 8. opener: Es una referencia al objeto window que lo abrió, si la ventana fue abierta usando el método open() que veremos cuando estudiemos los métodos. 9. parent: Referencia al objeto window que contiene el frameset. 10. self: Es un nombre alternativo del window actual. 11. Status: String con el mensaje que tiene la barra de estado. 12. top: Nombre alternativo de la ventana del nivel superior. 13. window: Igual que self: nombre alternativo del objeto window actual. Método 1. alert(mensaje). Muestra el mensaje 'mensaje' en un cuadro de diálogo 2. blur(). Elimina el foco del objeto window actual. A partir de NS 3, IE 4. 3. clearInterval(id). Elimina el intervalo referenciado por 'id' (ver el método setInterval(), también del objeto window). A partir de NS 4, IE 4.
  40. 40. Elaborado Por: TSU Laur Vanegas 4. clearTimeout(nombre). Cancela el intervalo referenciado por 'nombre' (ver el método setTimeout(), también del objeto window). 5. close(). Cierra el objeto window actual. 6. confirm(mensaje). Muestra un cuadro de diálogo con el mensaje 'mensaje' y dos botones, uno de aceptar y otro de cancelar. Devuelve true si se pulsa aceptar y devuelve false si se pulsa cancelar. 7. focus(). Captura el foco del ratón sobre el objeto window actual. A partir de NS 3, IE 4. 8. moveBy(x,y). Mueve el objeto window actual el número de pixels especificados por (x,y). A partir de NS 4. 9. moveTo(x,y). Mueve el objeto window actual a las coordenadas (x,y). A partir de NS 4. 10. open(URL,nombre,caracteristicas). Abre la URL que le pasemos como primer parámetro en una ventana de nombre 'nombre'. Si esta ventana no existe, abrirá una ventana nueva en la que mostrará el contenido con las características especificadas. Las características que podemos elegir para la ventana que queramos abrir son las siguientes:  toolbar = [yes|no|1|0]. Nos dice si la ventana tendrá barra de herramientas (yes,1) o no la tendrá (no,0).  location = [yes|no|1|0]. Nos dice si la ventana tendrá campo de localización o no.  directories = [yes|no|1|0]. Nos dice si la nueva ventana tendrá botones de dirección o no.  status = [yes|no|1|0]. Nos dice si la nueva ventana tendrá barra de estado o no.  menubar = [yes|no|1|0]. Nos dice si la nueva ventana tendrá barra de menús o no.  scrollbars = [yes|no|1|0]. Nos dice si la nueva ventana tendrá barras de desplazamiento o no.  resizable = [yes|no|1|0]. Nos dice si la nueva ventana podrá ser cambiada de tamaño (con el ratón) o no.  width = px. Nos dice el ancho de la ventana en pixels.  height = px. Nos dice el alto de la ventana en pixels.
  41. 41. Elaborado Por: TSU Laur Vanegas  outerWidth = px. Nos dice el ancho *total* de la ventana en pixels. A partir de NS 4.  outerHeight = px. Nos dice el alto *total* de la ventana el pixels. A partir de NS 4  left = px. Nos dice la distancia en pixels desde el lado izquierdo de la pantalla a la que se debe colocar la ventana.  top = px. Nos dice la distancia en pixels desde el lado superior de la pantalla a la que se debe colocar la ventana. 11. prompt(mensaje,respuesta_por_defecto). Muestra un cuadro de diálogo que contiene una caja de texto en la cual podremos escribir una respuesta a lo que nos pregunte en 'mensaje'. El parámetro 'respuesta_por_defecto' es opcional, y mostrará la respuesta por defecto indicada al abrirse el cuadro de diálogo. El método retorna una cadena de caracteres con la respuesta introducida. 12. scroll(x,y). Desplaza el objeto window actual a las coordenadas especificadas por (x,y). A partir de NS3, IE4. 13. scrollBy(x,y). Desplaza el objeto window actual el número de pixels especificado por (x,y). A partir de NS4. 14. scrollTo(x,y). Desplaza el objeto window actual a las coordenadas especificadas por (x,y). A partir de NS4. 15. setInterval(expresion,tiempo). Evalúa la expresión especificada después de que hayan pasado el número de milisegundos especificados en tiempo. Devuelve un valor que puede ser usado como identificativo por clearInterval(). A partir de NS4, IE4. 16. setTimeout(expresion,tiempo). Evalúa la expresión especificada después de que hayan pasado el número de milisegundos especificados en tiempo. Devuelve un valor que puede ser usado como identificativo por clearTimeout(). A partir de NS4, IE4.
  42. 42. Elaborado Por: TSU Laur Vanegas El Objeto Location Este objeto representa el URL cargado en la ventana. Se usa para navegar hacia una página en un sitio local u otra página en el internet. Al cambiar la propiedad de este objeto, el documento cargado en la ventana puede ser cambiado. Su finalidad principal es, por una parte, modificar el objeto location para cambiar a una nueva URL, y extraer los componentes de dicha URL de forma separada para poder trabajar con ellos de forma individual si es el caso. Recordemos que la sintaxis de una URL era: protocolo://maquina_host[:puerto]/camino_al_recurso Propiedades 1. hash. Cadena que contiene el nombre del enlace, dentro de la URL. 2. host. Cadena que contiene el nombre del servidor y el número del puerto, dentro de la URL. 3. hostname. Cadena que contiene el nombre de dominio del servidor (o la dirección IP), dentro de la URL. 4. href. Cadena que contiene la URL completa. 5. pathname. Cadena que contiene el camino al recurso, dentro de la URL. 6. port. Cadena que contiene el número de puerto del servidor, dentro de la URL. 7. protocol. Cadena que contiene el protocolo utilizado (incluyendo los dos puntos), dentro de la URL. 8. search. Cadena que contiene la información pasada en una llamada a un script, dentro de la URL. Métodos 1. reload(). Vuelve a cargar la URL especificada en la propiedad href del objeto location. 2. replace(cadenaURL). Reemplaza el historial actual mientras carga la URL especificada en cadenaURL. El Objeto History Este objeto se encarga de almacenar una lista con los sitios por los que se ha estado navegando, es decir, guarda las referencias de los lugares visitados. Se utiliza, sobre todo, para movernos hacia delante o hacia atrás en dicha lista.
  43. 43. Elaborado Por: TSU Laur Vanegas Propiedades 1. current. Cadena que contiene la URL completa de la entrada actual en el historial. 2. next. Cadena que contiene la URL completa de la siguiente entrada en el historial. 3. length. Entero que contiene el número de entradas del historial (i.e., cuántas direcciones han sido visitadas). 4. previous. Cadena que contiene la URL completa de la anterior entrada en el historial. Métodos 1. back(). Vuelve a cargar la URL del documento anterior dentro del historial. 2. forward(). Vuelve a cargar la URL del documento siguiente dentro del historial. 3. go(posicion). Vuelve a cargar la URL del documento especificado por posicion dentro del historial. posicion puede ser un entero, en cuyo caso indica la posición relativa del documento dentro del historial; o puede ser una cadena de caracteres, en cuyo caso representa toda o parte de una URL que esté en el historial. El Objeto Document El objeto document es el que tiene el contenido de toda la página que se está visualizando. Esto incluye el texto, imágenes, enlaces, formularios, entre otros. Gracias a este objeto vamos a poder añadir dinámicamente contenido a la página, o hacer cambios, según nos convenga. Propiedades 1. alinkColor. Esta propiedad tiene almacenado el color de los enlaces activos 2. anchors. Se trata de un array con los enlaces internos existentes en el documento 3. applets. Es un array con los applets existentes en el documento 4. bgColor. Propiedad que almacena el color de fondo del documento 5. cookie. Es una cadena con los valores de las cookies del documento actual
  44. 44. Elaborado Por: TSU Laur Vanegas 6. domain. Guarda el nombre del servidor que ha servido el documento 7. embeds. Es un array con todos los EMBED del documento 8. fgColor. En esta propiedad tenemos el color del primer plano 9. forms. Se trata de un array con todos los formularios del documento. Los formularios tienen a su vez elementos (cajas de texto, botones, etc) que tienen sus propias propiedades y métodos, y serán tratados en el siguiente capítulo. 10. images. Array con todas las imágenes del documento 11. lastModified. Es una cadena con la fecha de la última modificación del documento 12. linkColor. Propiedad que almacena el color de los enlaces 13. links. Es un array con los enlaces externos 14. location. Cadena con la URL del documento actual 15. referrer. Cadena con la URL del documento que llamó al actual, en caso de usar un enlace. 16. title. Cadena con el título del documento actual 17. vlinkColor. Propiedad en la que se guarda el color de los enlaces visitados Métodos 1. clear(). Limpia la ventana del documento 2. open(). Abre la escritura sobre un documento. 3. close(). Cierra la escritura sobre el documento actual 4. write(). Escribe texto en el documento. 5. writeln(). Escribe texto en el documento, y además lo finaliza con un salto de línea El Objeto Anchor Este objeto engloba todas las propiedades que tienen los enlaces internos al documento actual. Propiedades 1. name. Nombre del ancla. 2. target. Es una cadena que tiene el nombre de la ventana o del frame especificado en el parámetro TARGET
  45. 45. Elaborado Por: TSU Laur Vanegas El Objeto Link Este objeto engloba todas las propiedades que tienen los enlaces externos al documento actual. Propiedades 1. target. Es una cadena que tiene el nombre de la ventana o del frame especificado en el parámetro TARGET 2. hash. Es una cadena con el nombre del enlace, dentro de la URL 3. host. Es una cadena con el nombre del servidor y número de puerto, dentro de la URL 4. hostname. Es una cadena con el nombre de dominio del servidor (o la dirección IP) dentro de la URL 5. href. Es una cadena con la URL completa 6. pathname. Es una cadena con el camino al recurso, dentro de la URL 7. port. Es una cadena con el número de puerto, dentro de la URL 8. protocol. Es una cadena con el protocolo usado, incluyendo los : (los dos puntos), dentro de la URL 9. search. Es una cadena que tiene la información pasada en una llamada a un script, dentro de la URL El Objeto Image Este objeto representa las imágenes que aparecen en los documentos. Se pueden manipular las propiedades de las imgenes usando este objeto. Todas las imágenes dentro de un documento particular sin almacenadas en el arreglo images. La sintaxis usada para acceder a un objeto Images particular es: document.images[0].src=”imagen.jpg”
  46. 46. Elaborado Por: TSU Laur Vanegas Propiedades 1. border. Contiene el valor del parámetro 'border' de la imagen. 2. complete. Es un valor booleano que nos dice si la imagen se ha descargado completamente o no. 3. height. Contiene el valor del parámetro 'height' de la imagen. 4. hspace. Contiene el valor del parámetro 'hspace' de la imagen. 5. lowsrc. Contiene el valor del parámetro 'lowsrc' de la imagen. 6. name. Contiene el valor del parámetro 'name' de la imagen. 7. src. Contiene el valor del parámetro 'src' de la imagen. 8. vspace. Contiene el valor del parámetro 'vspace' de la imagen. 9. width. Contiene el valor del parámetro 'width' de la imagen. El Objeto Form Este objeto es el contenedor de todos los elementos del formulario. Los formularios se agrupan en el array forms dentro del objeto document. Cada elemento de este array es un objeto de tipo form. Es decir, un formulario particular puede accederse del siguiente modo: document.forms[“nombreFormulario”] document.forms[0] Propiedades 1. action. Es una cadena que contiene la URL del parámetro ACTION del form, es decir, la dirección en la que los datos del formulario serán procesados. 2. elements. Es un array que contiene todos los elementos del formulario, en el mismo orden en el que se definen en el documento HTML. Por ejemplo, si en el formulario hemos puesto, en este orden, una caja de texto, un checkbox y una lista de selección, la caja de texto será elements[0], el checkbox será elements[1] y la lista de selección será elements[2]. 3. encoding. Es una cadena que tiene la codificación mime especificada en el parámetro ENCTYPE del form. 4. method. Es una cadena que tiene el nombre del método con el que se va a recibir/procesar la información del formulario (GET/POST).
  47. 47. Elaborado Por: TSU Laur Vanegas Métodos 1. reset(). Resetea el formulario: tiene el mismo efecto que si pulsáramos un botón de tipo RESET dispuesto en el form. 2. submit(). Envía el formulario: tiene el mismo efecto que si pulsáramos un botón de tipo SUBMIT dispuesto en el form. Objetos del Campo Formulario Los objetos que representan los diversos campos de un formulario son objetos form field. Los objetos form-field son: 1. Button 2. Submit 3. Reset 4. Textbox 5. Textarea 6. Password 7. Hidden 8. Radio 9. Checkbox 10. Select Los Objetos Text, TextArea, Password Estos objetos representan los campos de texto dentro de un formulario. Además, el objeto password es exactamente igual que el text salvo en que no muestra los caracteres introducidos por el usuario, poniendo asteriscos (*) en su lugar. Propiedades 1. dafaultValue. Es una cadena que contiene el valor por defecto que se le ha dado a uno de estos objetos por defecto. 2. name. Es una cadena que contiene el valor del parámetro NAME. 3. value. Es una cadena que contiene el valor del parámetro VALUE. 4. maxlength. Número máximo de caracteres que puede contener el campo de texto. 5. type. Representa el atributo type del campo de formulario 6. form. Representa el formulario que almacena el campo de formulario.
  48. 48. Elaborado Por: TSU Laur Vanegas Métodos 1. blur(). Pierde el foco del ratón sobre el objeto especificado. 2. focus(). Obtiene el foco del ratón sobre el objeto especificado. 3. select(). Selecciona el texto dentro del objeto dado. Los Objetos Hidden, Button, Submit y Reset Tenemos tres tipos de botones: un botón genérico, 'button', que no tiene acción asignada, y dos botones específicos, 'submit' y 'reset'. Estos dos últimos sí que tienen una acción asignada al ser pulsados: el primero envía el formulario y el segundo limpia los valores del formulario. Propiedades 1. name. Es una cadena que contiene el valor del parámetro NAME. 2. value. Es una cadena que contiene el valor del parámetro VALUE. 3. type. Representa el atributo type del campo de formulario 4. form. Representa el formulario que almacena el campo de formulario. Métodos 1. click(). Realiza la acción de pulsado del botón NOTA: este método no es válido para el objeto hidden. El Objeto CheckBox Las "checkboxes" nos permiten seleccionar varias opciones marcando el cuadrito que aparece a su izquierda. El cuadrito pulsado equivale a un "sí" y sin pulsar a un "no" o, lo que es lo mismo, a "true" o "false". Propiedades 1. checked. Valor booleano que nos dice si el checkbox está pulsado o no 2. defaultChecked. Valor booleano que nos dice si el checkbox debe estar seleccionado por defecto o no
  49. 49. Elaborado Por: TSU Laur Vanegas 3. name. Es una cadena que contiene el valor del parámetro NAME. 4. value. Es una cadena que contiene el valor del parámetro VALUE. 5. type. Representa el atributo type del campo de formulario 6. form. Representa el formulario que almacena el campo de formulario. Métodos 1. click(). Realiza la acción de pulsado del botón El Objeto Radio Al contrario que con los checkbox, que nos permiten elegir varias posibilidades entre las dadas, los objetos radio sólo nos permiten elegir una de entre todas las que hay. Están pensados para posibilidades mútuamente excluyentes (no se puede ser a la vez mayor de 18 años y menor de 18 años, no se puede estar a la vez soltero y casado, etc.). Propiedades 1. checked. Valor booleano que nos dice si el radio está seleccionado o no. 2. defaultChecked. Valor booleano que nos dice si el radio debe estar seleccionado por defecto o no. 3. length. Valor numérico que nos dice el número de opciones dentro de un grupo de elementos radio. 4. name. Es una cadena que contiene el valor del parámetro NAME. 5. value. Es una cadena que contiene el valor del parámetro VALUE. Métodos 1. click(). Realiza la acción de pulsado del botón.
  50. 50. Elaborado Por: TSU Laur Vanegas El Objeto Select Este objeto representa una lista de opciones dentro de un formulario. Puede tratarse de una lista desplegable de la que podremos escoger alguna (o algunas) de sus opciones. Propiedades 1. length. Valor numérico que nos indica cuántas opciones tiene la lista 2. name. Es una cadena que contiene el valor del parámetro NAME 3. options. Se trata de un array que contiene cada una de las opciones de la lista. Este array tiene, a su vez, las siguientes propiedades: 4. defaultSelected. Valor booleano que nos indica si la opción está seleccionada por defecto. 5. index. Valor numérico que nos da la posición de la opción dentro de la lista. 6. length. Valor numérico que nos dice cuántas opciones tiene la lista. 7. options. Cadena con todo el código HTML de la lista. 8. selected. Valor booleano que nos dice si la opción está actualmente seleccionada o no. 9. text. Cadena con el texto mostrado en la lista de una opción concreta. 10. value. Es una cadena que contiene el valor del parámetro VALUE de la opción concreta de la lista. 11. selectedIndex. Valor numérico que nos dice cuál de todas las opciones disponibles está actualmente seleccionada. Eventos y Manejadores de Eventos En JavaScript, la interacción con el usuario se consigue mediante la captura de los eventos que éste produce. Un evento es una acción del usuario ante la cual puede realizarse algún proceso (por ejemplo, el cambio del valor de un formulario, o la pulsación de un enlace). Los eventos se capturan mediante los manejadores de eventos. El proceso a realizar se programa mediante funciones JavaScript llamadas por los manejadores de eventos.
  51. 51. Elaborado Por: TSU Laur Vanegas La siguiente tabla muestra los manejadores de eventos que pueden utilizarse en JavaScript, la versión a partir de la cual están soportados y su significado. Eventos Descripción onAbort El usuario interrumpe la carga de una imagen onBlur Un elemento de formulario, una ventana o un marco pierden el foco onChange El valor de un campo de formulario cambia onClick Se hace click en un objeto o formulario onDblClick Se hace click doble en un objeto o formulario onDragDrop El usuario arrastra y suelta un objeto en la ventana onError La carga de un documento o imagen produce un error onFocus Una ventana, marco o elemento de formulario recibe el foco onKeyDown El usuario pulsa una tecla onKeyPress El usuario mantiene pulsada una tecla onKeyUp El usuario libera una tecla onLoad El navegador termina la carga de una ventana onMouseDown El usuario pulsa un botón del ratón onMouseMove El usuario mueve el puntero onMouseOut El puntero abandono una área o enlace onMouseOver El puntero entra en una área o imagen onMouseUp El usuario libera un botón del ratón onMove Se mueve una ventana o un marco onReset El usuario limpia un formulario onResize Se cambia el tamaño de una ventana o marco onSelect Se selecciona el texto del campo texto o área de texto de un formulario onSubmit El usuario envía un formulario onUnload El usuario abandona una página No todos los eventos son posibles sobre todos los objetos. El resumen de la correspondencia entre eventos y objetos se muestra en la siguiente tabla. Eventos Objetos para los q están definidos onAbort Image onBlur Button, Checkbox, FileUpload, Layer, Password, Radio, Reset, Select, Submit, Text, Textarea, window onChange FileUpload, Select, Text, Textarea onClick Button, document, Checkbox, Link, Radio, Reset, Submit onDblClick document, Link
  52. 52. Elaborado Por: TSU Laur Vanegas onDragDrop Window onError Image, window onFocus Button, Checkbox, FileUpload, Layer, Password, Radio, Reset, Select, Submit, Text, Textarea, window onKeyDown document, Image, Link, Textarea onKeyPress document, Image, Link, Textarea onKeyUp document, Image, Link, Textarea onLoad Image, Layer, window onMouseDown Button, document, Link onMouseMove Ninguno (debe asociarse a uno) onMouseOut Layer, Link onMouseOver Layer, Link onMouseUp Button, document, Link onMove Window onReset Form onResize Frame, Window onSelect Text, Textarea onSubmit Form onUnload window
  53. 53. Elaborado Por: TSU Laur Vanegas http://gollum.inforg.uniovi.es/aii/ejemplos.php?id_codigo=8&codigo=DOM+HTML http://www.webestilo.com/javascript/js16.phtml Excelente

×