Ing. Lorena Ruhl - Marco Rapallini - Javier FabiánMódulo 5: JavaScript Ing. A. Lorena Ruhl Universidad Tecnológica Nacional Facultad Regional Córdoba Dep. Ing. en Sistemas de Información “Diplomatura Superior en Desarrollo de Páginas Web Dinámicas en PHP ” Versión 2.0 Abril de 2010 Módulo 5: Interacción de PHP con el Diseño Web

Ing. Lorena Ruhl - Marco Rapallini - Javier FabiánMódulo 5: JavaScript  Es una de las múltiples maneras que han surgido para extender las capacidades del lenguaje HTML.  JavaScript es un lenguaje interpretado que se embebe en una página web HTML. Un lenguaje interpretado significa que a las instrucciones las analiza y procesa el navegador en el momento que deben ser ejecutadas.  No se puede desarrollar un programa con JavaScript que se ejecute fuera de un Navegador.

Ing. Lorena Ruhl - Marco Rapallini - Javier FabiánMódulo 5: JavaScript // aquí se puede agregar código javascript

Ing. Lorena Ruhl - Marco Rapallini - Javier FabiánMódulo 5: JavaScript  Las instrucciones JavaScript deben ir dentro de la etiqueta script.  Cada vez que escribimos una instrucción finalizamos con el punto y coma.  JavaScript es sensible a mayúsculas y minúsculas.

Ing. Lorena Ruhl - Marco Rapallini - Javier FabiánMódulo 5: JavaScript  En JavaScript los nombres de variables, deben comenzar por una letra o un subrayado (_). No puede tener el mismo nombre de una palabra clave del lenguaje.  Una variable es de un tipo determinado cuando le asignamos un valor.  Una variable se define anteponiéndole la palabra clave var: var dia;  Se pueden declarar varias variables en una misma línea: var dia, mes, anio ;  Se puede definir e inmediatamente inicializarla con un valor: var dia=20;

Ing. Lorena Ruhl - Marco Rapallini - Javier FabiánMódulo 5: JavaScript  Para definimos un array este deber estar entre corchetes [] y separados por comas “,”. (podemos dejar elementos del array vacíos) variable = ['valor1',, 'valor3'];  O también variable = new Array(3); variable[0]='valor1'; variable[1]=''; variable[2]='valor3' ;

Ing. Lorena Ruhl - Marco Rapallini - Javier FabiánMódulo 5: JavaScript  Operadores Asignación var resultado = 50; Existen abreviaturas de algunas operaciones de asignación: x += y x = x + y x -= y x = x – y x *= y x = x * y x %= y x = x % y x /= y x = x / y  Operadores Aritméticos % Binario: devuelve el resto de una división. ++ Unitario: incrementa el valor de la variable. -- Unitario: disminuye el valor de una variable. - Unitario: cambia el signo de una variable.

Ing. Lorena Ruhl - Marco Rapallini - Javier FabiánMódulo 5: JavaScript  Operadores Comparación == Devuelve true si son iguales. != Devuelve true si son distintos. === Devuelve true si son iguales y del mismo tipo. !== Devuelve true si son distintos o de distinto tipo. > Devuelve true si la variable de la izquierda es mayor que la variable de la derecha < Devuelve true si la variable de la derecha es mayor que la variable de la izquierda >= Devuelve true si la variable de la izquierda es mayor o igual que la variable de la derecha <= Devuelve true si la variable de la izquierda es menor o igual que la variable de la derecha  Operadores Lógico and : se deben cumplir las dos condiciones or : se cumple una o la otra condición xor : es un “or” exclusivo, se debe cumplir una o la otra condición pero no ambas && : se deben cumplir las dos condiciones || : se cumple una o la otra condición ! NOT

Ing. Lorena Ruhl - Marco Rapallini - Javier FabiánMódulo 5: JavaScript  Comentarios //, Si se trata de una línea. /*...*/, si queremos tomar un bloque como comentario.  Concatenar + : Concatenación de cadenas. Nota: si queremos sumar el contenido de dos variables y usamos el operador + este nos va a concatenar el resultado de dichas variables. Para evitar esto y obtener la suma convertir el contenido de las variables en número. Esto se logra con al función parseInt(valor).

Ing. Lorena Ruhl - Marco Rapallini - Javier FabiánMódulo 5: JavaScript  En JavaScript, las funciones se definen en la cabecera del documento HTML. Su sintaxis es: function nombreFunción([parámetros]) { acciones }  Los argumentos de las funciones se gestionan con un array propio de cada una de ellas. Al array se accede con "nombreFunción.arguments[i]", donde "i" es un índice que comienza por 0.  Para conocer el número de parámetros, podemos utilizar: "arguments.length".

Ing. Lorena Ruhl - Marco Rapallini - Javier FabiánMódulo 5: JavaScript  Un objeto es una entidad con una serie de propiedades que definen su estado y unos métodos (funciones) que actúan sobre esas propiedades.  Para crear un objeto primero se crea una función constructora y luego inicializamos la instancia del objeto. function nombreObjeto(valor1, valor2, valor3) { this.oValor1 = valor1; this.oValor2 = valor2; this.oValor3 = valor3; } objeto1 = new nombreObjeto("Hola", 9, 10);  Otra forma de crear objetos de forma literal es la siguiente: objeto1 = { propiedad1:valor1; propiedad2:valor2; propiedad3:valor3};  La forma de acceder a una propiedad de un objeto es la siguiente: nombreobjeto.propiedad nombreobjeto.nombrepropiedad.nombreSubpropiedad

Ing. Lorena Ruhl - Marco Rapallini - Javier FabiánMódulo 5: JavaScript  Los métodos son funciones asociadas a un objeto. nombreObjeto.nombreMétodo = nombreFunción;  Ejemplo function verObjeto() { var mostrar = "El valor 1 :" + this.valor1; return mostrar; }  En la función constructora añadimos: this.verObjeto = verObjeto;  Ya tenemos un método llamado verObjeto que nos permite ver las propiedades de cualquier objeto de tipo objeto1.  Si queremos eliminar un objeto, tenemos que llamar al operador "delete". delete objeto1; Devuelve "true" si a sido borrado satisfactoriamente.

Ing. Lorena Ruhl - Marco Rapallini - Javier FabiánMódulo 5: JavaScript  Condicionales if switch  Bucles for do while while

Ing. Lorena Ruhl - Marco Rapallini - Javier FabiánMódulo 5: JavaScript  Métodos y Propiedades length: Retorna la cantidad de caracteres de un objeto String. charAt(pos):Retorna el carácter del índice especificado. Comienzan a numerarse de la posición cero. substring (posinicial, posfinal): Retorna un String extraído de otro, desde el índice 'posinicial' hasta el 'posfinal'. El carácter en la 'posfinal' es omitido. indexOf (subCadena): Devuelve la posición de la subcadena dentro de la cadena, o -1 en caso de no estar. Retorna 0 si la subcadena coincide desde el primer carácter. toUpperCase(): Convierte todos los caracteres del String a mayúsculas. toLowerCase(): Convierte todos los caracteres del String a minúsculas.

Ing. Lorena Ruhl - Marco Rapallini - Javier FabiánMódulo 5: JavaScript  Métodos Math.abs(): valor absoluto Math.max(v1,..,vn): valor máximo Math.min(v1,..,vn): valor mínimo Math.round(): redondear Math.exp(): exponencial Math.log(): logaritmo Math.pow(base,exponente): potencia Math.sqrt(): raíz cuadrada Math.[sin(), cos(), tan()] :Funciones trigonométricas, reciben el argumento en radianes Math.[asin(), acos(), atan()]:Funciones trigonométricas inversas. Math.random(): Genera un valor aleatorio comprendido entre 0 y 1.

Ing. Lorena Ruhl - Marco Rapallini - Javier FabiánMódulo 5: JavaScript  alert: muestra el contenido de lo que le pasamos en una ventana con un botón de aceptar. alert("Esto es una prueba");  confirm: muestra un mensaje como "alert", pero con dos botones: aceptar y cancelar. Al pulsar aceptar devuelve true y con cancelar, false.  prompt: muestra una ventana donde podemos escribir un valor, de modo que después pueda ser asignado a una variable. prompt("mensaje",valor por defecto);  open y close: abre o cierra una ventana del navegador. Podemos especificar el tamaño de la ventana, su contenido, etc.

Ing. Lorena Ruhl - Marco Rapallini - Javier FabiánMódulo 5: JavaScript  Métodos write(). Escribe texto en el documento. writeln(). Escribe texto en el documento, y además lo finaliza con un salto de línea. getElementById().Tomar un tag html con el ID especificado. getElementsByTag() Retorna un vector con la referencia a todos los tags html de dicho tipo.

Ing. Lorena Ruhl - Marco Rapallini - Javier FabiánMódulo 5: JavaScript onClick: Se asocia a casi todos los elementos e indica que hemos hecho click sobre ellos con el mouse onDblClick: cuando efectúa un doble click sobre algún elemento de un documento HTML. onDragDrop: arrastrar un objeto a la ventana del navegador. onError: se produce un error en la carga de un documento. onFocus: el usuario se posiciona en una ventana o cuadro de texto de un formulario. onKeyDown: se pulsa una tecla. onKeyPress: se pulsa o libera una tecla onKeyUp: se libera una tecla onLoad: se carga un documento en el navegador onMouseDown: se pulsa un botón del ratón onMouseMove: se mueve el cursor onMouseOver: el puntero del ratón se posiciona sobre un enlace onMouseOut: el puntero del ratón sale de un enlace o imagen mapa onMouseUp: se libera un botón del ratón. onMove: se mueve la ventana. Esta acción también la puede realizar el script. onReset: se pulsa sobre el botón reset del formulario. onResize: las dimensiones de la ventana cambian. onSelect: se selecciona una de las opciones de un cuadro combo del formulario. onSubmit: se pulsa el botón submit del formulario. onUnLoad: el usuario sale de la página.

Ing. Lorena Ruhl - Marco Rapallini - Javier FabiánMódulo 5: JavaScript  Métodos blur(). Pierde el foco del ratón sobre el objeto especificado. focus(). Obtiene el foco del ratón sobre el objeto especificado. select(). Selecciona el texto dentro del objeto dado.  Propiedades dafaultValue. Es una cadena que contiene el valor por defecto que se le ha dado a uno de estos objetos. name. Es una cadena que contiene el valor del parámetro NAME. value. Es una cadena que contiene el valor del parámetro VALUE. maxlength. Número máximo de caracteres que puede contener el campo de texto. Los objetos text, textarea y password