03 JavaScript
03 JavaScript
03 JavaScript
JavaScript, Historia
Inicialmente se llamaba LiveScript
Lenguaje de guiones (script)
Respaldado por SUN en 1995: JavaScript
Caractersticas
generales
Es un lenguaje interpretado
Se ejecuta en el cliente, rara vez en el servidor
Es muy extensible
Parte de un conjunto limitado de objetos y clases
Permite interaccin cliente-servidor
Fuertemente integrado a HTML y CSS
Aplicaciones de
JavaScript
Diseado para programas sencillos o avanzados
Realiza tareas repetitivas
Diseado para programar eventos de usuario
Muy utilizado para validacin de datos
Muy utilizado para poner efectos en las pginas de Web
Ventajas de JavaScript
Desarrollo rpido, y ms an con los frameworks ms
actuales.
(Relativamente) fcil de aprender
Independencia de plataforma
Gastos mnimos
Desventajas de
JavaScript
No cuenta con ocultacin de cdigo
Objetos
La utilizacin de "objetos" es un medio de organizar la
informacin
Se utilizan para describir entidades reales o imaginarias
En su descripcin se especifican:
Propiedades
Caractersticas que distinguen objetos del mismo tipo o clase
Mtodos
Tareas que se pueden efectuar con las propiedades de un tipo de
objeto
Clases de objetos
Una clase de objeto especifica qu propiedades y mtodos
caracterizan a sus objetos, pero no asigna valores
automvil
marca
modelo
persona
nombre
edad
estudiante
nombre
edad
carrera
Instancias de objetos
Una instancia de objeto es un objeto de alguna clase, con
valores en su propiedades
persona
Nombre: Luis
Edad: 36
alumno
Nombre: Juan
Edad: 19
Carrera: Diseo Grfico
Jerarquas de objetos
Los objetos pueden estar referidos a atributos de otros
objetos
mediosdetransporte.bicicleta.manubrio
Objetos integrados en el
Navegador
La mayora parte del objeto base del navegador
window
Location
History
Document
Forms
Anchors
Programa en JavaScript
<body>
<script language="JavaScript">
<!-- Ocultar
// Salida "Funciona!"
document.writeln( "Funciona!<br>" );
</script>
</body></html>
Bloques de comandos
Se pueden agrupar comandos utilizando las llaves { y }
{
comando
comando
}
Bloques de comandos
Los bloques se pueden anidar
{
un comando
{
otro comando
otro comando
}
}
Salida de texto
La funcin bsica de casi cualquier programa es producir
texto con resultados
En JavaScript, la operacin bsica es la salida de texto en
la ventana del navegador
Se utilizan dos comandos
document.write( )
document.writeln( )
variable += expresin
Evala la expresin, y el resultado mas el valor de la variable
se asigna a la variable
Operadores aritmticos
+ Suma
- Resta
* Multiplicacin
/ Divisin
% Mdulo (residuo de una divisin)
Ejemplo
meses = edad * 12;
Combinados
suma += dato;
Operadores lgicos
&&
"y" lgico, devuelve true cuando ambos operandos son
verdaderos y falso en otro caso
||
"o" lgico, devuelve true cuando alguno de los operandos es
verdadero
!
"no" lgico, devuelve true si el operando es falso, y false si el
operando es verdadero
Operadores de
comparacin
==
iguales, devuelve verdadero si los operandos son iguales
!=
diferentes
>
<
>=
<=
Operador condicional
Permite evaluar una expresin lgica, y devolver valores
diferentes en consecuencia
(condicin) ? valor1 : valor2
Ejemplo
( nombre == "Luis" ) ? "Hola, Jefe" : "Hola, extrao"
Dependiendo del nombre, la expresin se evaluar como "Hola,
Jefe" o "Hola, extrao"
respuesta = ( edad<18 ) ? "Eres menor" : "Ya ests grandecito" ;
Operadores de cadena
Permiten la unin de cadenas
"Hola, " + "qu tal!"
bienvenida += ", se bienvenido"
si (control de flujo)
Se utilizan para que el programa tome decisiones de qu
instrucciones ejecutar
if condicion
comando;
Ejemplo
if( da == "domingo" )
document.write( "Hoy es domingo" );
si-sino
Se considera el caso de que no se cumpla la condicin
if condicion
comando;
else
otro comando;
Utilizacin de bloques
con el if
Si se desean ejecutar varios comandos en lugar de slo
uno, se utilizan bloques
if condicion {
comando
comando
} else {
comando
comando
}
Funciones
Permiten agrupar cdigo para desempear una tarea o
funcin especfica y que puede usarse muchas veces en un
programa
Funciones: definicin
La definicin establece qu es lo que hace la funcin
function nombre_de_funcion( parmetros, argumentos ) {
bloque de comandos
}
Ejemplo
function despNombre( nombre ) {
document.write( "<hr>tu nombre es<b>" );
document.write( nombre )
document.write( "</b><hr>" );
}
Retorno de resultados
En los entornos de programacin, a las funciones que no
retornan resultados se les llama "procedimientos"
Si retornan resultados son "funciones"
function cubo( numero ) {
return numero * numero * numero;
}
Funciones: definicin en
el encabezado
En general el cdigo de Java puede ir en cualquer parte
Si va a generar texto para la pgina, el cdigo debe estar
donde debe generar el texto
Se recomienda poner la definicin de las funciones en el
encabezado
Funciones: invocacin
(ponerlas a trabajar)
Para hacer que las funciones hagan su trabajo, se les
invoca desde el programa
despNombre( "Luis" );
XHTML
2000 aprobacin de XHTML 1.0
2002 XHTML segunda edicin
Origen del DOM
ECMAScript
(European Computer Manufacturers Association)
Normas ECMA-262 y ECMA-357 (1998/2004)
Javascript 1.0 incorporaba una forma de acceder y manipular
los elementos de la pgina y recibi el nombre de DOM nivel 0.
DHTML
Requerimientos
generales
No dependiende del lenguaje y de la plataforma
Un ncleo aplicable a HTML, CSS y XML
Construccin y destruccin del documento
No se requiere IU para implementar el modelo
DOM nivel 1- Navegacin
Estructural
Ncleo: La seccin del Ncleo DOM1 provee un conjunto de
bajo nivel de interfaces que pueden representar a cualquier
documento estructurado
1. Elemento Raz
2. Cualquier nodo excepto el raz tiene exactamente un nodo padre
3. Un nodo puede tener cualquier nmero de hijos
4. Una hoja es un nodo con ningn hijo
5. Siblings. Son nodos con el mismo nodo padre
DOM-DOCUMENT
DOM-NODO (TIPOS)
DOM-NODO(DEFINICION)
NODOS-COMPARATIVO
DOM-NODELIST
DOM-NAMEDNODEMAP
COM-CHARACTERDATA
DOM-ATTRIBUTE
DOM-ELEMENT
DOM-TEXT
DOM-COMMENT Y CDATA
DOM nivel 2- Modelo de
eventos
El modelo deber ser lo suficientemente rico para crear
documentos completamente interactivos.
Todos los elementos sern capaces de generar eventos
Proveer eventos de interfaz y lgicos
El mecanismo de eventos permitir el overriding del
comportamiento por default
El modelo de eventos proveer un mecanismo por el cual
eventos para elementos especficos podrn ser recibidos
por un ancestro en la jerarqua DOM
Los eventos debern ser sincronos
Tipos de eventos
UI events
Eventos de la inerfaz de usuario, generados por un dispositivo externo
UI Logical events
Independientes del usuario,como focus, cambio de mensajes o triggers.
Mutation events
Eventos causados por una accin que modifica la estructura del
documentos.
Capturing
El proceso por el cual un evento puede ser manejado por un padre del
objetivo del evento antes que sea manejado por este.
Bubbling
El proceso por el cual un evento se propaga a traves de los ancestros
despues de haber sido manejado por el objeto generador.
DOM nivel 2- Modelo de hojas de
estilo
El modelo deber ser extensible a otros formatos en un
futuro
Habra un modelo de hojas de estilos embedido, donde el
core podr ser aplicable a otros lenguajes de estilos.
Los estilos podran ser agregados, removidos o modificados
Lo anterior aplica para hojas de estilos ligadas, importados
o alternativas.
DOM nivel 2- Modelo de
rangos
Vista lineal
Permitir consultas y ediciones de funcionalidad
basados en un rango de texto en lugar de un rbol de
nodos
Live
Ediciones en el rango modificando el rbol subyacente
Operaciones
Creacin de un objeto rango
Extraccin de texto desde un rango con o si etiquetas
Insercin y borrado de texto dentro de un rango
Insercin borrado de cierta estructura dentro de un
rango
DOM nivel 2- Modelo de
recorrido
Deber de ser capaz de visualizar vistas filtradas sin
comentarios o referencias.
Tener un iterador robusto