16 Unidad Didctica
Javascript
Eduard Lara
26.1 Lenguajes de script6.2 Sintaxis de Javascript6.3 Variables, funciones y operadores 6.4 Estructuras de control de flujo6.5 Objetos predefinidos en el navegador6.6 Eventos y validacin de formularios
NDICE
36.1 LENGUAJES DE SCRIPT
Las pginas web basadas en HTML + CSS son pginas estticas, sin dinamismo Los lenguajes de script permiten crear pginas web de mayor funcionalidad y vistosidad, Un script es un lenguaje de programacin interpretado por el navegador en tiempo real.
JavaScript:Soportado por la mayora
de navegadores
VBScript:Slo puede ser interpretado por
Internet Explorer.
46.1 LENGUAJES DE SCRIPT
JavaScript es un lenguaje orientado a objetos: Permite la definicin de elementos que poseen propiedades o atributos y mtodos para actuar sobre ellos. Los objetos pueden estar predefinidos en JavaScript (por ejemplo, la ventana del navegador) o ser creados mediante cdigo. JavaScript permite controlar y manejar los eventos: Acciones que el usuario realiza sobre los elementos de la pgina web (pasar el ratn por encima, hacer clic en un elemento)
56.1 HISTORIA JAVASCRIPT
En 1996, la empresa Netscape, sac la versin de su popular browser Netscape 2.0. Ofreca nuevas funcionalidades como los marcos (frames) y el lenguaje Javascript Su sintaxis bsica se basaba en Java (lenguaje desarrollado por Sun Microsystems). JavaScript result muy sencillo de utilizar: No necesita kits de desarrollo o compiladores Dotaba de dinamismo a los estticos documentos HTML Es soportado por todos los navegadores del mercado
66.2 SINTAXIS JAVASCRIPT
Los scripts (tanto en JavaScript o VBScript) van incrustados en el cdigo HTML de la misma forma que se hace en CSS.
instrucciones
Etiquetas para la inclusin de un script genrico
Etiquetas para la inclusin de un
script javascript
76.2 SINTAXIS JAVASCRIPT
El programa JavaScript se
ejecutar siempre que sea llamado
El programa se ejecutar mientras se
carga la pgina.
86.2 SINTAXIS JAVASCRIPT
Las funciones se deben incluir en la cabecera. Para ser utilizadas en cualquier momento.
Toda lnea de cdigo javascript debe acaba en punto y coma ;
Los comentarios en javascript se realizan de la misma forma que en C:// Para comentar una sola lnea/* * / Si ocupan ms de una lnea
96.2 SINTAXIS JAVASCRIPT
No todos los browsers soportan o tienen habilitado el interprete JavaScript
Se recomienda insertar el cdigo javascriptentre comentarios HTML. As, si el navegador no soporta javascript, el cdigo no aparecercomo texto HTML.
Si el navegador no soporta JavaScript, aparecer en su defecto, el mensaje incluido entre dichas etiquetas.
10
6.2 EJEMPLO JAVASCRIPT
JAVASCRIPT
alert("Hola en JavaScript");
Su navegador no soporta JavaScript
11
6.3 VARIABLES, FUNCIONES Y OPERADORES
Variables Permiten el almacenamiento temporal de datos
para su posterior utilizacin o referencia. Cada variable est identificada por un nombre,
que cumpla las siguientes reglas:- Comience por una letra o guin bajo- No coincida con palabras reservadas (break)
JavaScript es case sensitive: Distingue entre maysculas y minsculas (miVariable serdistinta que MiVariable)
12
6.3 VARIABLES, FUNCIONES Y OPERADORES
Declaracin Variables
Limita el mbito de accin de la variable. Si la variable se declara dentro de una funcin, slo tendr efecto en ella; cuando se abandone la funcin, se abandonar as mismo la variable.
Habilita la variable para todo el documento, siendo desechada cuando se abandona la pgina
var miVariable; var miVariable=555;
miVariable=555;Declaracin LocalDeclaracin Global
13
6.3 VARIABLES, FUNCIONES Y OPERADORES
Declaracin Variables
Almacena objetos predefinidos por JavaScript o por el desarrollador.
Almacena valores lgicos tipo s o no
Contiene una cadena de caracteres alfanumricos
Almacenan datos de tipo numrico, ya sean enteros, decimales, negativos, etc.
Significado
Document.form1.value();De objeto
var repetidor=false;Booleanas(true, false)
miVariable=Carlota;mensaje="Carlota es una nia muy 'despierta;
Textuales(texto)
numDecimal=3.1416;numEntero=-2;
Numricas (nmero)
ValorTipo
14
6.3 VARIABLES, FUNCIONES Y OPERADORES
Conversin entre tipos de datos (2 mtodos)
Var edad=parselnt(prompt(Cuntos aos tienes?",""));
Se quiere convertir un dato introducido por el usuario en forma texto y convertirlo a numrico
var DNI=12345678;LETRA_NIF="M";NIF=DNI+LETRA_NIF;
Se convierte el dato numrico en uno de tipo texto
Conversin explcita. La conversin se realiza mediante una orden
Conversin implcita. Se utiliza el signo de suma(+).
15
6.3 VARIABLES, FUNCIONES Y OPERADORES
Matrices (Arrays) Son variables capaces de almacenar ms de un dato, accedidos a travs de un ndice.
Las celdas comienzan a contarse desde 0
var temperaturas=new Array();temperaturas[0]=30;temperaturas[1]=28;temperaturas[2]=27;
var temperaturas=new Array(30,28,27);
16
6.3 VARIABLES, FUNCIONES Y OPERADORES
Estructura bsica de una
funcin
Funciones Una funcin es un conjunto de instrucciones con entidad propia dentro del script. Puede ser ejecutado cuantas veces se desee, y se le puede pasar datos a travs de variables para que realice clculos con ellos.
function nombre (parmetros){
cdigo }
17
function Suma(a,b){
return a+b; }
alert ("El resultado es " + Suma (1,9));
6.3 VARIABLES, FUNCIONES Y OPERADORES
18
OperadoresSon smbolos que indican la operacin que se debe realizar. Hay diferentes categoras: Operadores aritmticos:
- Resta z=x-y;- Dividir z=x/y;- Aumentar z=x++; - Reducir z=y--;
6.3 VARIABLES, FUNCIONES Y OPERADORES
19
Operadores Lgicos. Permiten realizar operaciones en las que el resultado deba ser trueo false.
- AND A&&B- OR A||B- NOT !A
Operadores relacionales. - Dos valores iguales ==- Dos valores distintos !=- Mayor o igual >=
Se utilizan para tomar decisiones simples en la ejecucin de scripts
6.3 VARIABLES, FUNCIONES Y OPERADORES
20
6.4 ESTRUCTURAS DE CONTROL DE FLUJO
Estructura switch-caseEstructura if-elseswitch(expresion) {case opA:
codigoA; break;
case opB: codigoB;break;
default:Cdigo ejecutable defecto;
}
if (condicin){
Instrucciones_if: Se ejecutan slo si condicin=true;
}else{
Instrucciones_else: Se ejecutan slo si condicin=false;
}Contina el resto del script.
21
6.4 ESTRUCTURAS DE CONTROL DE FLUJO
while(condicion){
Cuerpo_del_bucle;}-----------------------------------do{
Cuerpo_del_bucle;}while(condicion)
for(contador = valor; condicin; incremento){
Cuerpo_del_bucle;}
Bucle while y do-whileBucle for
22
6.5 OBJETOS PREDEFINIDOS
EN EL NAVEGADOR Los navegadores constan de un conjunto de objetos predefinidos, relacionados mediante una jerarqua, donde unos contienen a otros.
objeto
Acceso a una propiedad de un elemento:
Acceso a un mtodo de un elemento:
Document.form.text.value
Document.form.text.focus()
23
6.5 OBJETOS PREDEFINIDOS
EN EL NAVEGADOR
window.status='Bienvenido a la web'; Texto barra de estado.window.open("http://mipagina.com", "Ventana_informa", "toolbar=no, location=no, top=100, left=100, width=200, height=200") Creacin de nuevas ventanas.
WINDOW: Representa la ventana del navegador.
navigator.appName Nombre navegadornavigator.appVersion Nmero de versinnavigator.platform Nombre sistema operativonavigator.onLine Acceso a travs de Internet o en Localnavigator.connectionSpeed Velocidad actual conexinnavigator.cookieEnabled Si tiene activada admisin de cookies
NAVIGATOR: Representa el propio Navegador
24
6.5 OBJETOS PREDEFINIDOS
EN EL NAVEGADOR
document.bgColor Establece color de fondo del documento.document.fgColor Establece color del texto del documento.document.referrer Pgina desde la que se ha accedido a la actual.document.title Devuelve el ttulo del documento.document.URL Devuelve la URL del documento.document.write() Inserta texto en el documentodocument.open() Abre un documento
DOCUMENT: Representa la pgina web mostrada en el navegador
screen.width Resolucin x de la pantallascreen.height Resolucin y de la pantalla
SCREEN: Informacin sobre la pantalla
25
6.5 OBJETOS PREDEFINIDOS
EN EL NAVEGADOR
history.back() Retrocede a la pgina anterior history.forward() Avanza a la pgina siguiente history.go(n) Avanza o retrocede n veces en el historial
HISTORY: Permite acceder al historial del navegador
window.location.href Devuelve o establece la URL del documento. Propiedad de lectura y escriturawindow.location.reload() Recarga la pgina
LOCATION: Informacin sobre la localizacin del documento que se est visualizando en la ventana.
26
6.6 LOS EVENTOS Y LA VALIDACIN DE FORMULARIOS
JavaScript permite controlar diversos eventos: cambios contenido, click, pasar ratn, El manejador de evento permite indicar el cdigo a ejecutar cuando se produzca el evento:
on+nombre_evento=codigo_a_ejecutar; Un manejador de evento se asigna a un elemento como si fuera un atributo ms.
27
6.6 LOS EVENTOS Y LA VALIDACIN DE FORMULARIOS
function comprobar() {if(document.form1.usuario.value==
document.form1.clave.value)window.location="bienvenido.htm";
else {alert ("Son distintos");document.forml.usuario.value="";document.forml.clave.value="";
}
La funcin ser activada cuando el usuario haga clic sobre el botn submit del formulario.
Si usuario es igual a la contrasea coinciden, se cargar una pgina de bienvenida, si no, aparecerun mensaje de alerta y se resetear el formulario.
Body
28
6.6 LOS EVENTOS Y LA VALIDACIN DE FORMULARIOS
El usuario libera una tecladocument, Image, Link, TextareaonKeyUpEl usuario mantiene pulsada una tecladocument, Image, Link, TextareaonKeyPressEl usuario pulsa una tecladocument, Image, Link, TextareaonKeyDown
Una ventana, marco o elemento de formulario recibe el foco
Button, Checkbox, FileUpload, Layer, Password, Radio, Reset, Select, Submit, Text, Textarea
onFocus
Se hace click doble en un objeto o formulario
document, LinkonDblClick
Se hace click en un objeto o formularioButton, document, Checkbox, Link, Radio, Reset, Submit
onClick
El valor de un campo de formulario cambiaFileUpload, Select, Text, Textarea
onChange
Un elemento de formulario, una ventana o un marco pierden el foco
Button, Checkbox, FileUpload, Layer, Password, Radio, Reset, Select, Submit, Text, Textarea
onBlurSe produce cuando...ElementoManejador
29
6.6 LOS EVENTOS Y LA VALIDACIN DE FORMULARIOS
El usuario abandona una pginawindowonUnloadEl usuario enva un formularioFormonSubmit
Se selecciona el texto del campo texto o rea de texto de un formulario
Text, TextareaonSelectSe cambia el tamao de una ventana o marcowindowonResizeEl usuario limpia un formularioFormonResetSe mueve una ventana o un marcowindowonMoveEl usuario libera un botn del ratnButton, document, LinkonMouseUpEl puntero entra en una rea o imagenLayer, LinkonMouseOverEl puntero abando una rea o enlaceLayer, LinkonMouseOut
El usuario mueve el punteroNinguno (debe asociarse a uno)
onMouseMoveEl usuario pulsa un botn del ratnButton, document, LinkonMouseDownEl navegador termina la carga de una ventanaImage, Layer, windowonLoad
Se produce cuando...ElementoManejador