03 JavaScript

JavaScript
Luis Zarza
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, nunca en el servidor
No es (muy) extensible
Parte de un conjunto limitado de objetos y
clases
No permite interaccin cliente-servidor,
nicamente opera en el cliente
(Relativamente) integrado a HTML
Aplicaciones de JavaScript
Diseado
para programas sencillos y
pequeos
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
(Relativamente) fcil de aprender
Independencia de plataforma
Gastos mnimos
Desventajas de JavaScript
Rango
limitado de mtodos integrados

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
persona
marca
modelo
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
Cadenas
"Hola!"
Boleanos
17, 21.3, 34e3 (decimales)

056 (octal)
0x5F (hexadecimal)
true
false
Nulos
null
Variables
Son identificadores que pueden contener
valores, y stos pueden variar su valor
No es preciso declararlas, pero se recomienda
Declaracin
Declaracin y asignacin
var ejemplo = "Hola";
Asignacin
var ejemplo;
ejemplo = "Hola";
Invocacin
document.write( ejemplo );
Expresiones
Coleccin de variables, operadores y otras

expresiones que se evalan a un solo valor
Asignacin
Aritmticas
evalan un nmero
Cadenas
asigna un valor a una variable
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
Evala
+= expresin
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
"Hola,
la unin de cadenas
" + "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
click
Cuando el usuario cambia el valor de un campo
focus
Cuando el usuario hace click en una liga o en un elemento de un

formulario
change
Cuando el usuario hace click fuera de un campo en un formulario
Cuando se activa el foco en una entrada
load
Cuando se carga una pgina del navegador
Eventos
Ms ejemplos
mouseover
select
Cuando el usuario selecciona un campo de un elemento

en un formulario
submit
Cuando el cursor (ratn) pasa por encima de una liga
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='st
uff/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>

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

para programas sencillos y

limitado de mtodos integrados

Caractersticas que distinguen objetos del mismo tipo o

Tareas que se pueden efectuar con las propiedades de un

Una clase de objeto especifica qu propiedades y

Una instancia de objeto es un objeto de

objetos pueden estar referidos a

La mayora parte del objeto base del navegador

Otros objetos no estn relacionados con la ventana

Creacin de objetos propios

Se pueden definir y crear objetos propios

Se definen, estableciendo su propiedades y sus

Se crean, generando instancias y asignando

incorporacin se hace con la

el URL del archivo con

el lenguaje de guiones utilizado,

pueden agrupar comandos

bloques se pueden anidar

Se pueden incluir marcas

aparecer ventanas adicionales

alert( "Haz click en OK para

prompt( "Cul es tu color

Para representar la informacin, se utilizan cuatro tipos

17, 21.3, 34e3 (decimales)

var ejemplo = "Hola";

Coleccin de variables, operadores y otras

asigna un valor a una variable

evalan una cadena

evalan un valor booleano

la expresin, y el resultado mas el

meses = edad * 12;

"y" lgico, devuelve true cuando ambos

"o" lgico, devuelve true cuando alguno de los

"no" lgico, devuelve true si el operando es falso,

iguales, devuelve verdadero si los operandos son

Permite evaluar una expresin lgica, y

(condicin) ? valor1 : valor2

( nombre == "Luis" ) ? "Hola, Jefe" : "Hola,

" + "qu tal!"

utilizan para que el programa tome

considera el caso de que no se

Utilizacin de bloques con el if

Si se desean ejecutar varios comandos en

agrupar cdigo para

La definicin establece qu es lo que hace la

los entornos de programacin, a las

general el cdigo de Java puede ir

hacer que las funciones hagan su

devuelven resultado, pueden formar

Funciones: un ejemplo (cont)

generadas cuando ocurren

Cuando el usuario cambia el valor de un campo

Cuando el usuario hace click en una liga o en un elemento de un

Cuando el usuario hace click fuera de un campo en un formulario

Cuando se activa el foco en una entrada

Cuando se carga una pgina del navegador

Cuando el usuario selecciona un campo de un elemento

Cuando el cursor (ratn) pasa por encima de una liga

Cuando el usuario enva un formulario

Cuando un usuario abandona una pgina (para cerrar la

Los manejadores de eventos son las instrucciones

<MARCA ATRIBUTOS manejador="Programa

<input type="text" onChange="checaCampo(this)">