6º unidad didáctica javascript - upc universitat politècnica de … - ud6... · 2010-07-13 ·...
TRANSCRIPT
1
6º Unidad Didáctica
Javascript
Eduard Lara
2
6.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 validación de formularios
ÍNDICE
3
6.1 LENGUAJES DE SCRIPT
Las páginas web basadas en HTML + CSS son páginas estáticas, sin dinamismo
Los lenguajes de script permiten crear páginas web de mayor funcionalidad y vistosidad,
Un script es un lenguaje de programación interpretado por el navegador en tiempo real.
JavaScript:Soportado por la mayoría
de navegadores
VBScript:Sólo puede ser interpretado por
Internet Explorer.
4
6.1 LENGUAJES DE SCRIPT
JavaScript es un lenguaje orientado a objetos: Permite la definición de elementos que poseen propiedades o atributos y métodos para actuar sobre ellos.
Los objetos pueden estar predefinidos en JavaScript (por ejemplo, la ventana del navegador) o ser creados mediante código.
JavaScript permite controlar y manejar los eventos: Acciones que el usuario realiza sobre los elementos de la página web (pasar el ratón por encima, hacer clic en un elemento)
5
6.1 HISTORIA JAVASCRIPT
En 1996, la empresa Netscape, sacó la versión de su popular browser Netscape 2.0.
Ofrecía nuevas funcionalidades como los marcos (frames) y el lenguaje Javascript
Su sintaxis básica se basaba en Java (lenguaje desarrollado por Sun Microsystems).
JavaScript resultó muy sencillo de utilizar:No necesita kits de desarrollo o compiladoresDotaba de dinamismo a los estáticos documentos HTMLEs soportado por todos los navegadores del mercado
6
6.2 SINTAXIS JAVASCRIPT
Los scripts (tanto en JavaScript o VBScript) van incrustados en el código HTML de la misma forma que se hace en CSS.
<script></script>
<script language="JavaScript">instrucciones </script>
Etiquetas para la inclusión de un script genérico
Etiquetas para la inclusión de un
script javascript
7
6.2 SINTAXIS JAVASCRIPT
<head> <script language="JavaScript"></script></head>
<body> <script language="JavaScript"></script></body>
El programa JavaScript se
ejecutará siempre que sea llamado
El programa se ejecutará mientras se
carga la página.
8
6.2 SINTAXIS JAVASCRIPT
Las funciones se deben incluir en la cabecera. Para ser utilizadas en cualquier momento.Toda línea de código javascript debe acaba en punto y coma “;”Los comentarios en javascript se realizan de la misma forma que en C:// Para comentar una sola línea/* * / Si ocupan más de una línea
9
6.2 SINTAXIS JAVASCRIPT
No todos los browsers soportan o tienen habilitado el interprete JavaScript Se recomienda insertar el código javascriptentre comentarios HTML. Así, si el navegador no soporta javascript, el código no aparecerácomo texto HTML.
<noscript>
<noscript>
Si el navegador no soporta JavaScript, aparecerá en su defecto, el mensaje incluido entre dichas etiquetas.
10
6.2 EJEMPLO JAVASCRIPT
<html><head> <title>JAVASCRIPT</title></head><body><script language="JavaScript">
alert("Hola en JavaScript"); </script><noscript>
Su navegador no soporta JavaScript</noscript></body> </html>
11
6.3 VARIABLES, FUNCIONES Y OPERADORES
VariablesPermiten el almacenamiento temporal de datos
para su posterior utilización o referencia.Cada variable esté identificada por un nombre,
que cumpla las siguientes reglas:- Comience por una letra o «guión bajo»- No coincida con palabras reservadas (break…) JavaScript es case sensitive: Distingue entre
mayúsculas y minúsculas (miVariable serádistinta que MiVariable)
12
6.3 VARIABLES, FUNCIONES Y OPERADORES
Declaración Variables
Limita el ámbito de acción de la variable. Si la variable se declara dentro de una función, sólo tendrá efecto en ella; cuando se abandone la función, se abandonará así mismo la variable.
Habilita la variable para todo el documento, siendo desechada cuando se abandona la página
var miVariable; var miVariable=555;
miVariable=555;Declaración LocalDeclaración Global
13
6.3 VARIABLES, FUNCIONES Y OPERADORES
Declaración Variables
Almacena objetos predefinidos por JavaScript o por el desarrollador.
Almacena valores lógicos tipo «sí» o «no»
Contiene una cadena de caracteres alfanuméricos
Almacenan datos de tipo numérico, ya sean enteros, decimales, negativos, etc.
Significado
Document.form1.value();De objeto
var repetidor=false;Booleanas(true, false)
miVariable=‘Carlota’;mensaje="Carlota es una niña muy 'despierta‘”;
Textuales(texto)
numDecimal=3.1416;numEntero=-2;
Numéricas (número)
ValorTipo
14
6.3 VARIABLES, FUNCIONES Y OPERADORES
Conversión entre tipos de datos (2 métodos)
Var edad=parselnt(prompt(“¿Cuántos años tienes?",""));
Se quiere convertir un dato introducido por el usuario en forma texto y convertirlo a numérico
var DNI=12345678;LETRA_NIF="M";NIF=DNI+LETRA_NIF;
Se convierte el dato numérico en uno de tipo texto
Conversión explícita. La conversión se realiza mediante una orden
Conversión implícita. Se utiliza el signo de «suma»(+).
15
6.3 VARIABLES, FUNCIONES Y OPERADORES
Matrices (Arrays)Son variables capaces de almacenar más de un
dato, accedidos a través 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 básica de una
función
FuncionesUna función 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 través de variables para que realice cálculos con ellos.
function nombre (parámetros){
código }
17
<html><head>
</head><body>
</body></html>
<script language="JavaScript">function Suma(a,b){
return a+b; }</script>
<script language="JavaScript">alert ("El resultado es " + Suma (1,9));
</script>
6.3 VARIABLES, FUNCIONES Y OPERADORES
18
OperadoresSon símbolos que indican la operación que se debe realizar. Hay diferentes categorías:
Operadores aritméticos:- Resta z=x-y;- Dividir z=x/y;- Aumentar z=x++; - Reducir z=y--;
6.3 VARIABLES, FUNCIONES Y OPERADORES
19
Operadores Lógicos. 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 ejecución 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:Código ejecutable defecto;
}
if (condición){
Instrucciones_if: Se ejecutan sólo si condición=true;
}else{
Instrucciones_else: Se ejecutan sólo si condición=false;
}Continúa 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; condición; incremento){
Cuerpo_del_bucle;}
Bucle while y do-whileBucle for
22
6.5 OBJETOS PREDEFINIDOS
EN EL NAVEGADORLos navegadores constan de un conjunto de
objetos predefinidos, relacionados mediante una jerarquía, donde unos contienen a otros.
objeto
Acceso a una propiedad de un elemento:
Acceso a un método 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") Creación de nuevas ventanas.
WINDOW: Representa la ventana del navegador.
navigator.appName Nombre navegadornavigator.appVersion Número de versiónnavigator.platform Nombre sistema operativonavigator.onLine Acceso a través de Internet o en Localnavigator.connectionSpeed Velocidad actual conexiónnavigator.cookieEnabled Si tiene activada admisión 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 Página desde la que se ha accedido a la actual.document.title Devuelve el título del documento.document.URL Devuelve la URL del documento.document.write() Inserta texto en el documentodocument.open() Abre un documento
DOCUMENT: Representa la página web mostrada en el navegador
screen.width Resolución x de la pantallascreen.height Resolución y de la pantalla
SCREEN: Información sobre la pantalla
25
6.5 OBJETOS PREDEFINIDOS
EN EL NAVEGADOR
history.back() Retrocede a la página anterior history.forward() Avanza a la página 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 página
LOCATION: Información sobre la localización del documento que se está visualizando en la ventana.
26
6.6 LOS EVENTOS Y LA VALIDACIÓN DE FORMULARIOS
JavaScript permite controlar diversos eventos: cambios contenido, click, pasar ratón,
El manejador de evento permite indicar el código 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 más.<a href="URL" onClick= "alert('Estás
abandonando el sitio web'];">
27
6.6 LOS EVENTOS Y LA VALIDACIÓN 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="";
}
<input type="text" name="usuario"><input type="password" name="clave"><input type="submit" onClick="comprobar ();">
La función será activada cuando el usuario haga clic sobre el botón submit del formulario.
Si usuario es igual a la contraseña coinciden, se cargará una página de bienvenida, si no, apareceráun mensaje de alerta y se reseteará el formulario.
Body
28
6.6 LOS EVENTOS Y LA VALIDACIÓN 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 VALIDACIÓN DE FORMULARIOS
El usuario abandona una páginawindowonUnloadEl usuario envía un formularioFormonSubmit
Se selecciona el texto del campo texto o área de texto de un formulario
Text, TextareaonSelectSe cambia el tamaño de una ventana o marcowindowonResizeEl usuario limpia un formularioFormonResetSe mueve una ventana o un marcowindowonMoveEl usuario libera un botón del ratónButton, 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 botón del ratónButton, document, LinkonMouseDownEl navegador termina la carga de una ventanaImage, Layer, windowonLoad
Se produce cuando...ElementoManejador