03 JavaScript

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
Otros objetos no estn relacionados con la ventana actual

string
math
date
Creacin de objetos
propios
Se pueden definir y crear objetos propios para describir
informacin
Se definen, estableciendo su propiedades y sus mtodos
Casa
# de cuartos
metros cuadrados
precio
define_precio()
Se crean, generando instancias y asignando valores
Incorporacin a HTML
La incorporacin se hace con la etiqueta SCRIPT
<script>
Cdigo en JavaScript
</script>
Atributos de la etiqueta
SCRIPT
SRC
Especifica el URL del archivo con JavaScript, de no estar en la
misma pgina. El archivo deber tener la extensin .js
LANGUAGE
Especifica el lenguaje de guiones utilizado, ya que JavaScript
no es el nico que se puede utilizar
Ocultamiento de guiones
Algunos navegadores no soportan scripts, por lo que
ignorarn la marca <SCRIPT>, pero no el contenido
Solucin: ocultarlo como comentario
<script language="JavaScript">
<! Ocultar guion
Programa en JavaScript
// fin de ocultamiento -->

</script>
Un ejemplo de un script
<html><head><title>Un ejemplo</title></head>
<body>
Aqu hay un script:

</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( )
Se pueden incluir marcas

document.write( "<b>Hola</b>" );
Ventanas de dilogo
Hacen aparecer ventanas adicionales con mensajes o
entradas de datos
Advertencia:
alert( "Haz click en OK para continuar" );
Entrada:
prompt( "Cul es tu color favorito?", "azul" );
document.write( prompt( "Tu edad", "19" ) );
Tipos de datos
Para representar la informacin, se utilizan cuatro tipos de
dato
Nmeros
17, 21.3, 34e3 (decimales)
056 (octal)
0x5F (hexadecimal)
Cadenas
"Hola!"
Boleanos
true
false
Nulos
null
Variables
Son espacios de almacenamiento para guardar datos, y
estn asociados a identifcadores. Estos pueden variar su
valor.
No es preciso declararlas, pero se recomienda
Declaracin
var ejemplo;
Declaracin y asignacin
var ejemplo = "Hola";
Asignacin
ejemplo = "Hola";
Invocacin
document.write( ejemplo );
Expresiones
Coleccin de variables, operadores y otras expresiones que
se evalan a un solo valor
Asignacin
asigna un valor a una variable
Aritmticas
evalan un nmero
Cadenas
evalan una cadena
Lgicas
evalan un valor booleano
Expresiones de
asignacin
variable = expresin
Evala la expresin, y el resultado se asigna a la variable
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" );
Si devuelven resultado, pueden formar parte de una

expresin
a=cubo( 4 )+1;
Funciones: un ejemplo
<html><head><title>Ejemplo</title>

</script>
</head>
Funciones: un ejemplo
(cont)
<body>
<! ocultar
var res=prueba( "10 + 10" );
document.write( res );
//deja de ocultar -->
</script>
</body>
</html>
Eventos
Seales generadas cuando ocurren acciones especficas
Brindan la base para la interactividad
Se disparan en el visualizador por acciones del usuario
(principalmente)
Se pueden construir acciones que reacciones a los eventos
Eventos
Ejemplos de eventos:
blur
Cuando el usuario hace click fuera de un campo en un formulario
click
Cuando el usuario hace click en una liga o en un elemento de un
formulario
change
Cuando el usuario cambia el valor de un campo
focus
Cuando se activa el foco en una entrada
load
Cuando se carga una pgina del navegador
Eventos
Ms ejemplos
mouseover
Cuando el cursor (ratn) pasa por encima de una liga
select
Cuando el usuario selecciona un campo de un elemento en un
formulario
submit
Cuando el usuario enva un formulario
unload
Cuando un usuario abandona una pgina (para cerrar la ventana o
cambiar de pgina)
Eventos: manejadores
Los manejadores de eventos son las instrucciones que se
ejecutan cuando ocurre un evento
<MARCA ATRIBUTOS manejador="Programa JavaScript">
Poniendo funciones:
<input type="text" onChange="checaCampo(this)">
Poniendo varias instrucciones
<input type="text" onChange="
if( parseInt(this.value) <= 5 ) {
alert( 'Ponga un nmero mayor que 5.' );
}
">
Eventos: palabra clave
"this"
Hace referencia al objeto que produjo el evento
Eventos: onLoad y
onUnload
<html>
<head><title>Ejemplo</title></head>
<body
onLoad="alert('Bienvenido!');"
onUnload="alert('Adios!');">
<h1>Pgina efusiva</h1>
</body>
</html>
Eventos: Guacamole
onUnload="
window.open(
'maliciosa.html' );"
Eventos: onMouseOver
<a href="#"
onMouseOver="document.the_image.src='stuff/js_on.gif';"
onMouseOut="document.the_image.src='stuff/js_off.gif';">
<img src="stuff/js_des.gif" name="the_image" border="0"></a>
Posicin de objetos y
capas
Podemos definir objetos y asignarles atributos de posicin
y capas (entre otras cosas)
Se utiliza la marca <div>
<div id="mono">
<img src="monito.gif">
</div>
Ejemplo
<html><head><title>Capas y Posicion</title>
<style type="text/css">
#aaron {position: absolute;
left: 8px; top: 300px;
width: 79px; height: 73px;
z-index: 3;}
#desk {position: absolute;
left:8px; top: 324px;
width: 10px; height: 73px;
z-index: -1;}
</style>
</head>
Ejemplo (cont)
<body bgcolor="#aaaaaa" text="#4444ff">
<h1>Capas y posicion</h1>
<div id="aaron">
<img src="aaron.gif">
</div>
<div id="desk">
<img src="desk.gif">
</div>
</body>
</html>
Que es DOM
Dom es una plataforma o interfaz neutral que permite a los
programas y scripts accesar o modificar el contenido,
estructura y estilo de los documentos.
Una interfaz de programacin para XML
Un estandar W3C
Un modelo de objetos para XML
Origen del DOM
Recomendaciones HTML (HTML 2.0-4.0)
1995/1999
Separar el contenido de la presentacin mediante hojas de
estilo
Respuesta a las demandas de usuarios, por lo que se
aumentaba el nmero de etiquetas
Origen del DOM
Recomendaciones XML
1998 se aprob la recomendacin XML 1.0
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
HTML: La seccin de HTML nivel 1 provee interfaces

adicionales de ms alto nivel que se utilizan junto con las
interfaces definidas en el nivel 1 del ncleo para
proporcionar una vista conveniente de un documento
HTML.
Interfaces DOM1: incluyen la interfaz para el Documento,

Nodos, Atributos, Elementos, y el texto.
DOM nivel 1- Manipulacin de
documentos
Proveer una manera de agregar, remover y

cambiar elementos y/o etiquetas en la estructura
del documento.
Proveer una manera de aadir, remover o
cambiar los atributos en a estructura del
documento.
Las operaciones o su combinacin debern
asegurar y restaurar la consistencia antes de que
hagan el return.
DOM nivel 1- Manipulacin de
contenido
Proveer una manera de determinar el elemento contenedor
desde cualquier parte del documento
Proveer una manera de navegar el contenido
Estructura DOM
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.
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
recorrido
Deber de ser capaz de visualizar vistas filtradas sin
comentarios o referencias.
Tener un iterador robusto

03 JavaScript

Cargado por

Información del documento

Derechos de autor

Formatos disponibles

Compartir este documento

Compartir o incrustar documentos

Opciones para compartir

¿Le pareció útil este documento?

¿Este contenido es inapropiado?

Copyright:

Formatos disponibles

03 JavaScript

Cargado por

Copyright:

Formatos disponibles

JavaScript

Otros objetos no estn relacionados con la ventana actual

// fin de ocultamiento -->

Aqu hay un script:

//Dejar de ocultar -->

Se pueden incluir marcas

Si devuelven resultado, pueden formar parte de una

HTML: La seccin de HTML nivel 1 provee interfaces

Interfaces DOM1: incluyen la interfaz para el Documento,

Proveer una manera de agregar, remover y

También podría gustarte