Diapo04
Upcoming SlideShare
Loading in...5
×
 
  • 1,100 views

Introduccion a Javascript

Introduccion a Javascript

Statistics

Views

Total Views
1,100
Views on SlideShare
1,100
Embed Views
0

Actions

Likes
0
Downloads
13
Comments
0

0 Embeds 0

No embeds

Accessibility

Categories

Upload Details

Uploaded via as Microsoft PowerPoint

Usage Rights

© All Rights Reserved

Report content

Flagged as inappropriate Flag as inappropriate
Flag as inappropriate

Select your reason for flagging this presentation as inappropriate.

Cancel
  • Full Name Full Name Comment goes here.
    Are you sure you want to
    Your message goes here
    Processing…
Post Comment
Edit your comment

Diapo04 Diapo04 Presentation Transcript

  • JavaScript
  • ¿Qué es un lenguaje Script ?
    • Extienden las capacidades de la aplicación con la que trabajan
    • Raramente se usan para algoritmos y estructuras de datos complejas
    • Tienden a ser Typeless
      • Detección de errores en tiempo de ejecución
      • Un programa puede escribir otro y ejecutarlo.
      • Menos código y programas más flexibles
    • Problemas de SEGURIDAD
  • ¿Qué es JavaScript ?
    • Es un lenguaje Script
    • Extiende las capacidades de las páginas Web
    • Características:
      • Se interpreta en el ordenador que recibe el HTML, no se compila ( client-side )
      • No se declaran los tipos de variables
      • Muy simple
      • Basado en objetos : no es un lenguaje totalmente orientado a objetos como Java. Pero podemos definir objetos, instanciarlos y acceder a sus métodos. Objetos predefinidos
      • Dinámico : responder a eventos producidos en tiempo real
  • JavaScript, JScript, ECMAScript
    • JavaScript fue desarrollado por Netscape
    • Poco después Microsoft saco su propio lenguaje de script, VBScript , para hacer frente a NetScape.
    • Posteriormente Internet Explorer pasaría a soportar JavaScript, pero no el de Netscape, sino una interpretación del mismo: JScript
    • ECMAScript : estándar. JavaScript & JScript son ahora compatibles con la especificación ECMA-262 (aunque contienen extensiones diferentes...)
      • Algunas extensiones JavaScript sólo funcionan en Netscape (y otras extensiones JScript sólo funcionan en Internet Explorer…)
  • ¿Qué se puede hacer con JavaScript ?
    • Validar formularios
    • Realizar cálculos simples
    • Personalización de las páginas Web
    • Hacer interactiva una página Web
    • Inclusión de datos del sistema (hora…). Crear relojes animados…
    • Manipular los elementos HTML de una página
    • Juegos http://petra.euitio.uniovi.es/~mariarf/tresenraya/tresenraya.html
    • Chorradas
  • JavaScript y los Navegadores
    • Cada navegador acepta una versión de JavaScript ligeramente diferente (o no lo acepta en absoluto)
    • No existe...
      • podemos probarlo en un número razonable de navegadores:
        • NN 4 (document.layers)
        • IE 5 (document.all)
        • NN 6/7 & IE 6 (document.getElementById)
      • podemos incluir código para detectar el navegador, así como diferentes versiones de algunas funciones, una para cada navegador
    ¿SOLUCIÓN?
  • Generalidades de JavaScript
    • Elementos de una página HTML pueden causar un evento que ejecutará una acción
      • Esa acción se ejecutará a través de una serie de sentencias JavaScript
    • Comandos de JavaScript :
      • Variables
      • Expresiones
      • Estructuras de control
      • Funciones (bloques de sentencias)
      • Clases, objetos y arrays (agrupaciones de datos)
  • Funcionamiento
    • Los navegadores pueden interpretar JavaScript cliente
      • Cuando un navegador solicita una página, el servidor manda tanto el código HTML como los scripts incluidos en dicho código
      • El navegador lee la página de arriba abajo, mostrando el código HTML y ejecutando los scripts en el orden en que aparecen
    • Sintaxis
    • ¿Dónde se colocan los scripts?
      • en general, dentro de <head> ... </head>
      • si genera una salida, dentro de <body> ... </body>
      • si hace referencia a un elemento HTML, después de dicho elemento
      • en algunos casos, en los atributos de algunas etiquetas (eventos)
      • en un fichero externo
    La etiqueta <SCRIPT> </SCRIPT> < SCRIPT type =&quot;text/javascript&quot; src =&quot;fuente.js&quot;>< /SCRIPT > < SCRIPT type =&quot;text/javascript&quot; > //instrucciones javaScript < /SCRIPT >
  • Navegadores que no aceptan JavaScript
    • Resulta aconsejable escribir los scripts así:
    • También podemos incluir la etiqueta:
      • <script language=“JavaScript” type=“text/javascript”>
      • <!--
      • ...instrucciones javascript...
      • //-->
      • </script>
      • <noscript>
      • Su página no acepta Javascript. Pruebe con
      • <a href=“no_jscript.html”>esta página</a>
      • </noscript>
  • Algunos ejemplos
    • Guión: http://petra.euitio.uniovi.es/~mariarf
      • Mostrar un mensaje
      • Escribir datos en una página HTML
  • Mostrar un mensaje <html> <head> <script language=&quot;JavaScript&quot;> <!-- alert(&quot;Hola mundo!&quot;) //--> </script> </head> <body> </body> </html>
  • Visualización de errores
    • En IE :
      • Herramientas/Opciones de Internet/Opciones avanzadas/seleccionar “ Mostrar una notificación sobre cada error de secuencia de comandos ”
    • En Firefox :
      • Tareas/Herramientas/Consola de JavaScript
      • Para que se active automáticamente, incluir la siguiente línea en el fichero prefs.js :
        • user_pref(“javascript.console.open_on_error”, true);
  • Escribir datos en la página HTML <html> <head> <title>Escribir datos en la página</title> </head> <body> Texto HTML normal.<br><br> <script language=&quot;JavaScript&quot; type=&quot;text/javascript&quot;> <!-- document.write(“<h3>Texto generado con JavaScript:</h3> <br>&quot;) document.write(&quot;La página se modificó por última vez con fecha: &quot; + document.lastModified + &quot;<br><br>&quot;) //--> </script> Este vuelve a ser texto HTML normal. </body> </html>
  • Tipos de datos
    • Tipos disponibles elementales:
      • Numérico (42, 3.14159, etc)
      • Booleano ( true y false )
      • String (“Hola mundo”)
      • null , que denota el valor nulo
      • undefined / NaN , que denota un valor indefinido
      • Object
    • Tipado “dinámico”:
      • no es necesario declarar el tipo de las variables
      • se pueden convertir automáticamente de un tipo a otro durante la ejecución
  • Ejemplo <script language=“JavaScript” type=“text/javascript”> <!-- venta = prompt(“introduce el importe: ”) impuestos = venta * 0.6 total = venta + impuestos alert(“El total es: ” + total) //--> </script> alert(“El total es: ” + eval(venta + impuestos))
    • Alternativa:
  • Variables
    • Los nombres son case sensitive .
    • Deben comenzar por una letra o guión bajo. No deben coincidir con palabras reservadas
      • Se podrían definir como variables: 
        • Nombre _Opción15 mes3
    • Declaración:
      • Asignándole un valor: x = 42
      • Con la palabra reservada “var”: var x
      • O bien ambos: var x = 42
          • Estarían mal definidas las siguientes variables:  
        • 7opcion &inicio ¿nombre
  • Tiempo de vida de las variables
    • Las variables pueden ser
      • Locales : dentro de una función
        • Su valor perdura dentro de ellas
      • Globales : fuera de las funciones
        • disponible desde cualquier parte de código JavaScript que haya en la página
    • El uso de var para declarar una variable global es opcional...
      • Aunque si se introduce una variable en una función y no se declara, tendrá ámbito global !
    • Para las variables locales, el uso de var es muy recomendable para evitar problemas...
  • Sentencias condicionales
    • switch (expresion){
    • case etiqueta1: //código si la expresion = label1 break case etiqueta2: //código si la expresion = label2 break default: //código si la expresión no es ninguna de las anteriores }
    if (condicion){ //código para condición = true } else{ //código para condición = false }
  • Operadores
    • Aritméticos: +, -, *, /, %, ++, --
    • Asignación: =, +=, -=, *=, /=, %=
    • Comparación: ==, !=, >, <, >=, <=
    • Lógicos: &&, ||, !
  • Complementación ~ Complementa, o niega, una cadena binaria conviertiendo los 1 en 0 y los 0 en 1. Por ejemplo el número 38 escrito en sistema binario es 00100110 si le aplicamos este operador se convierte en 11011001, o sea el -39 (JavaScript usa codificación en complemento a 2 para los números negativos). El ordenador, internamente, trata cualquier tipo de datos como una cadena binaria ( ceros y unos). Así los números se representan en sistema binario de numeración mientras que los caracteres se convierten a código ASCII, que son números que se almacenan por tanto codificados en binario. JavaScript ofrece los operadores típicos para trabajar con estas cadenas a nivel de bit (cada uno de los ceros o unos de las cadenas binarias). Para trabajar con estos operadores es conveniente tener una idea previa sobre la codificación binaria. Operadores binarios
  • Desplazamiento izquierda << Desplaza los bits a la izquierda los lugares que se le indique rellenando con ceros por la derecha y desechando los bits de mayor peso, esto equivale a multiplicar por potencias de 2. Por ejemplo si al 00011010 (26) lo desplazamos 2 a la izquierda tendremos el 01101000 (104). var num = 26, res; res = num << 2;        /* num contendrá 104 */ Desplazamiento derecha >> Desplaza los bits a la derecha los lugares que se le indique rellenando con ceros por la izquierda y desechando los bits de menor peso, esto equivale a una división entera por potencias de 2. Por ejemplo si al 00011010 (26) lo desplazamos 2 a la derecha tendremos el 00000110 (6). var num = 26, res; res = num << 2;        /* num contendrá 104 */
  • AND lógico binario & Realiza un AND lógico bit a bit entre dos valores. El AND lógico da como resultado 1 sólo si ambos bits son 1. Por ejemplo                             0 1 1 0 1 1 0 1 (109)                      AND 0 0 1 0 0 1 1 0 (38) resultado:            0 0 1 0 0 1 0 0 (36) var op1 = 109, op2 = 38, res; res = op1 & op2;      /*res contiene 36 */ OR lógico binario | Realiza un OR lógico bit a bit entre dos valores. El OR lógico da como resultado 0 sólo si ambos bits son 0. Por ejemplo                               0 0 1 1 1 0 1 0    (58)                         OR  0 1 0 1 0 0 1 0     (82) resultado:              0 1 1 1 1 0 1 0    (122) En el ejemplo podemos ver la sintaxis del operador var op1 = 58, op2 = 82, res; res = op1 | op2;                    /*res contiene 122 */ XOR lógico binario ^ Realiza un XOR lógico bit a bit entre dos valores. El XOR lógico da como resultado 1 si uno sólo de los bits es 1. Por ejemplo                               0 0 1 1 1 0 1 0    (58)                         OR  0 1 0 1 0 0 1 0     (82) resultado:              0 0 1 0 1 0 0 0    (40) En el ejemplo podemos ver la sintaxis del operador var op1 = 109, op2 = 38, res; res = op1 ^ op2;                 /*res contiene 40*/
  • Pop ups
    • Tipo alert
      • alert(&quot;sometext&quot;)
    • Tipo confirm
      • confirm(&quot;sometext&quot;)
    • Tipo prompt
      • prompt(&quot;sometext&quot;,&quot;defaultvalue&quot;)
  • Funciones
    • Sintaxis
    • function mifuncion(argument1,argument2,etc) { //Codigo }
    • Se puede usar la palabra reservada return pero no hay que indicar nada en la declaración de la función
  • Ejemplo: Cronómetro <html> <head> <script type=&quot;text/javascript&quot;> var c=0; var t; function timedCount(){ document.getElementById('txt').value=c c=c+1 t=setTimeout(&quot;timedCount()&quot;,1000) } function stopCount(){ clearTimeout(t) } </script> </head> <body> <form> <input type=&quot;button&quot; value=&quot;Comenzar!&quot; onClick=&quot;timedCount()&quot;> <input type=&quot;text&quot; id=&quot;txt&quot;> <input type=&quot;button&quot; value=&quot;Parar!&quot; onClick=&quot;stopCount()&quot;> </form> </body> </html>
  • Bucles
    • While while (condicion){ //código }
    • Do … while do { //código }
    • while (condicion)
    • For for (inicializacion; condicion; incremento){ //código }
    • For in for (variable in object) {
            • code to be executed
            • }
  • Comentarios
    • Una línea:
    • // comentario de una línea
    • Varias líneas: /* comentario de varias líneas */
  • Modelo de Eventos de JavaScript
    • El evento es gestionado por una sección de código en JavaScript (Gestor de Eventos)
    • Declaración de Gestores de Eventos: similar a los atributos en HTML
    • Crear páginas web dinámicas
    • Las acciones son detectadas por JavaScript
    • Ejemplos:
      • Click de ratón
      • Carga de la página
      • Mandar un formulario…
  • Gestores de Eventos (Event Handlers) Evento Ocurre Cuando Gestor blur El usuario quita el cursor de un elemento de formulario onBlur click El usuario clica un link o un elemento de formulario onClick change El usuario cambia el valor de un texto, un área de texto o selecciona un elemento. onChange focus El usuario coloca el cursor en un elemento de formulario. onFocus load El usuario carga una página en el Navegador onLoad Mouseover El usuario mueve el ratón sobre un link onMouseOver Select El usuario selecciona un campo del elemento de un formulario onSelect Submit Se envía un formulario onSubmit Unload Se descarga la página onUnload
  • Ejemplo: Manipulación de eventos <html> <head> <title>manipulación de un evento</title> <script language=&quot;JavaScript&quot; type=&quot;text/javascript&quot;> <!-- function adiosHola() { //comentar la siguiente linea para salir... window.open(window.location) } //--> </script> </head> <body onUnLoad=&quot;adiosHola()&quot;> </body> </html>
  • Clases en JavaScript
    • Clases Predefinidas
      • String : Cada vez que se asigna una cadena de caracteres a una variable, se crea un objeto de la clase String
      • Math : Se usa para efectuar cálculos matemáticos
      • Date : Para el manejo de fechas y horas
      • Array : almacena un conjunto de valores
      • Boolean
    • Clases del Browser o Navegador
      • Tienen que ver con la navegación
    • Clases del Documento HTML
      • Están asociadas con cualquier elemento de una página Web (link, ancla, formulario, etc)
    • Clases definidas por el usuario
  • Métodos comunes
    • String:
      • length(): longitud del string
      • replace(): reemplaza un texto por otro
      • ToUpperCase ():pasa a mayúsculas
    • Date:
      • getTime()
      • getFullYear()
      • getDay
    • Array
      • sort(): ordena elementos
      • concat(): concatena dos arrays
    • Math
      • Round()
      • Max(), min()
  • Objetos y propiedades
    • Podemos acceder a las propiedades de un objeto:
        • nombreObjeto.nombrePropiedad
    • Las propiedades se definen asignándole un valor
    • Ejemplo . Dado el objeto miCoche , definimos las propiedades marca, modelo y año como sigue:
      • miCoche.marca = “Ford” // miCoche[“marca”] = “Ford”
      • miCoche.modelo = “Focus” // miCoche[“modelo”] = “Focus”
      • miCoche.año = 2000 // miCoche[“año”] = 2000
  • Creación de nuevos objetos
    • Es posible definir nuevos objetos de dos formas diferentes:
      • Mediante inicializadores de objeto (dando el valor inicial del mismo)
      • Mediante una función constructora y “new”
  • Inicializadores de objeto (JS>1.1)
    • Consiste en asignarle a una variable un literal de objeto:
      • nomObj = { prop1: val1, prop2: val2, ..., propN: valN }
    • donde
      • nomObj es el nombre del nuevo objeto
      • prop1,...,propN son identificadores que representan las propiedades del objeto
      • val1,...,valN son los valores asignados a cada propiedad del objeto
    • Si no vamos a volver a necesitar el objeto, no es necesario asignarle un nombre
    • Pero, JavaScript debe interpretar el objeto cada vez que aparezca una referencia al mismo en el código (lento...)
  • Funciones constructoras
    • La creación de un objeto mediante una función constructora consiste en dos pasos:
      • 1.- definimos el perfil del objeto mediante una función (constructora)
      • 2.- creamos un objeto usando “new”
    • function persona(nom, edad, sexo) {
    • this .nombre = nom
    • this .edad = edad
    • this .sexo = sexo
    • }
    • Juan = new persona(“Juan García”,31,“H”)
    • Rosa = new persona(“Rosa Martínez”,28,“M”)
    • ...
  • Funciones constructoras (2)
    • Es posible definir propiedades que sean a su vez objetos:
    • function coche(marca, modelo, prop) {
    • this.marca = marca
    • this.modelo = modelo
    • this.propietario = prop
    • }
    • coche1 = new coche(“Ford”, “Focus”, Juan)
    • coche2 = new coche(“Seat”, “Toledo”, Rosa)
    • ...
    • Para acceder al nombre del propietario de coche1:
    • coche1.propietario.nombre // “Juan García”
  • Acceso a las propiedades
    • Podemos acceder de dos formas:
      • mediante un índice miCoche[5]
      • mediante el nombre miCoche.color / miCoche[“color”]
    • Sin embargo,
      • si se creó con un índice, sólo se puede acceder con dicho índice
      • si se creó con un nombre, sólo se puede acceder con dicho nombre
    • Excepción : objetos predefinidos de HTML (por ej., forms)
    • document.forms[0].listaCoches // índice
    • document.forms[“formCoches”].listaCoches // nombre
    • document.formCoches.listaCoches
  • Definición de métodos
    • Un método es una función asociada a un objeto:
      • se definen como cualquier otra función
      • se asocian a un objeto mediante la sentencia:
        • objeto.nombreMétodo = nombreFunción
      • donde “objeto” debe ser un objeto existente
      • y se pueden invocar así:
        • objeto.nombreMétodo(parámetros)
    • Si asociamos el método en la función constructora para un tipo de objetos, estará disponible para todos ellos
  • Definición de métodos: Ejemplo
    • function verDatos() {
    • var str = “Datos del coche: ” + this.marca + “ ” +
    • this.modelo + “ de color ” + this.color
    • document.write(str + “<br>”)
    • }
    • function coche(marca, modelo, color) {
    • this.marca = marca
    • this.modelo = modelo
    • this.color = color
    • this.verDatos = verDatos
    • }
    • coche2 = new coche(“Seat”, “Toledo”, “rojo”)
    • coche2.verDatos()
    • // “Datos del coche: Seat Toledo de color rojo”
  • JavaScript & DHTML
    • DHTML (HTML + CSS + DOM + JavaScript)
    • JavaScript interactúa con los elementos HTML a través del DOM del navegador
    • Básicamente, existen 4 modelos de DOM:
      • DOM nivel 0 (>NN2.x, >IE 3.x)
        • el modelo original, introducido por Netscape
        • muy compatible, debería usarse siempre que fuera posible
      • DOM Netscape (sólo NN 4.x)
        • introduce document.layers (capas)
      • DOM Internet Explorer (>IE 4.x)
        • introduce document.all
        • (acceso a todos los elementos)
      • W3C DOM nivel 1/2/… (>NN 6.x, >IE 5.x)
        • introduce document.getElementById
    Guerra de los navegadores!!
  • DOM
    • Cuando se carga una página, se crean una serie de objetos JavaScript asociados con los “principales” elementos HTML de la página:
    • window Texarea
    • Frame Text
    • document Link FileUpload
    • Location Image Password
    • History Anchor Hidden
    • Embed Submit
    • Applet Reset
    • navigator Plugin Radio
    • appName ... Checkbox
    • mimeTypes Form Button
    • Select
  • Acceso a los elementos
    • Cuando se carga la página, se crea una jerarquía de objetos que refleja el contenido de la misma:
      • <html>
      • <h1>Ejemplo</h1>
      • <img src=“logoupv.gif” name=“xxx”>
      • <form name=“formulario”>
      • <input type=“text” name=“campo1”>
      • ...
    • de forma que podemos acceder a ellos (desde JavaScript) indicando la “trayectoría” completa:
      • window.document.xxx // window.document.images[0]
      • window.document.formulario // window.document.forms[0]
    • el atributo “name” es esencial para acceder a los elementos
  • Operaciones
    • Cada elemento dispone de
      • propiedades : que se pueden consultar y, en ocasiones, modificar
        • window.document.bgColor
      • métodos : que nos permiten ejecutar acciones relacionadas con el objeto
        • window.open()
    • Limitaciones :
      • no hay acceso a todos los elementos de la página
      • la mayor parte de las propiedades son de “sólo lectura”
  • Ejemplo < HTML > < HEAD > < TITLE >Ejemplo sencillo de página HTML< /TITLE > < /HEAD > < BODY > < A name =&quot;principio&quot;>Este es el principio de la página< /A > // ancla < HR > < FORM method = &quot; POST&quot;> < P > Introduzca su nombre:<INPUT type=&quot;text&quot; name=&quot;me&quot; size=&quot;70&quot;> < /P > < INPUT type =&quot;reset&quot; value =&quot;Borrar Datos&quot;> < INPUT type =&quot;submit&quot; value =&quot;OK&quot;> < /FORM > < HR > Clica aquí para ir al < A href =&quot;#principio&quot;>principio< /A > de la página // link < /BODY > < /HTML > document.title document.anchors[0].name document.forms[0].method document.forms[0].elements[1].value document.links[0].href
  • Ejemplo
    • Cambiar el color de letra y de fondo
    • Script:
    • function colores(fondo, frente) {
    • document.bgColor = fondo
    • document.fgColor = frente
    • HTML:
    • <form>
    • <input type=“button” value=“Fondo rojo, texto blanco”
    • onClick=“colores(‘red’, ‘white’”>
    • <input type=“button” value=“Fondo blanco, texto rojo”
    • onClick=“colores(‘white’, ‘red’)”>
    • </form>
  • DOM W3C
    • ESTANDAR
    • La principal ventaja es que dispone de facilidades para
      • mover parte del documento a otro lugar
      • crear nuevos elementos y añadirlos en cualquier punto
      • organizar y manipular fragmentos del documento antes de insertarlos en el mismo
    • Algunos cambios:
        • var oParent = oNode.parentElement DHTML
        • var oParent = oNode.parentNode W3C DOM
        • oNode.innerHTML=&quot;The new label&quot;; DHTML
        • oNode.childNodes[0].nodeValue=&quot;The new label&quot;; WC3 DOM
  • Acceso a los elementos
    • La principal novedad es el método getElementById:
      • por ejemplo, dado un documento:
        • ...
        • <div id=“div1”>
        • ...
        • </div>
        • ...
      • oNode = getElementById(“div1”) devuelve
      • en oNode una referencia al objeto div
  • Creación de nodos
    • Existen dos formas básicas:
      • createElement:
        • createElement + innerText + appendChild
        • createElement + innerText + insertBefore
      • createTextNode
        • createTextNode + childNodes + replaceNode
    • Ejemplos:
      • Insertar cabecera, insertar item
      • Modificar valor de un nodo
  • Recorrer el árbol
    • Aparecen 2 métodos para recorrer nodos:
      • nextSibling y previousSibling
        • <SCRIPT>
        • // devuelve el item etiquetado “List Item 2”
        • var oSibling = oList.childNodes(0).nextSibling;
        • // devuelve el item etiquetado “List Item 1”
        • var oSiblingP = oSibling.previousSibling;
        • </SCRIPT>
        • <BODY>
        • <UL ID = oList>
        • <LI>List Item 1</LI>
        • <LI>List Item 2</LI>
        • <LI>List Item 3</LI>
        • </UL>
        • <BODY>
  • Referencias
    • W3schools. http://www.w3schools.com
    • “ Standard ECMA-262: ECMAScript Language Specification”. http://www.ecma-international.org/publications/standards/Ecma-262.htm
      • Explorer: http://msdn.microsoft.com/library/default.asp?url=/workshop/author/dhtml/reference/dhtml_reference_entry.asp
      • Mozilla: http://developer.mozilla.org/en/docs/Gecko_DOM_Reference
      • Tabla de compatibilidad: http://www.quirksmode.org/