6º Unidad Didáctica Javascript - UPC Universitat Politècnica de … - UD6... · 2010-07-13 ·...
Transcript of 6º Unidad Didáctica Javascript - UPC Universitat Politècnica de … - UD6... · 2010-07-13 ·...
![Page 1: 6º Unidad Didáctica Javascript - UPC Universitat Politècnica de … - UD6... · 2010-07-13 · de texto de un formulario onSelect Text, Textarea onResize window Se cambia el tamaño](https://reader034.fdocuments.us/reader034/viewer/2022042117/5e959da205f9686edd7a4bd2/html5/thumbnails/1.jpg)
1
6º Unidad Didáctica
Javascript
Eduard Lara
![Page 2: 6º Unidad Didáctica Javascript - UPC Universitat Politècnica de … - UD6... · 2010-07-13 · de texto de un formulario onSelect Text, Textarea onResize window Se cambia el tamaño](https://reader034.fdocuments.us/reader034/viewer/2022042117/5e959da205f9686edd7a4bd2/html5/thumbnails/2.jpg)
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
![Page 3: 6º Unidad Didáctica Javascript - UPC Universitat Politècnica de … - UD6... · 2010-07-13 · de texto de un formulario onSelect Text, Textarea onResize window Se cambia el tamaño](https://reader034.fdocuments.us/reader034/viewer/2022042117/5e959da205f9686edd7a4bd2/html5/thumbnails/3.jpg)
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.
![Page 4: 6º Unidad Didáctica Javascript - UPC Universitat Politècnica de … - UD6... · 2010-07-13 · de texto de un formulario onSelect Text, Textarea onResize window Se cambia el tamaño](https://reader034.fdocuments.us/reader034/viewer/2022042117/5e959da205f9686edd7a4bd2/html5/thumbnails/4.jpg)
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)
![Page 5: 6º Unidad Didáctica Javascript - UPC Universitat Politècnica de … - UD6... · 2010-07-13 · de texto de un formulario onSelect Text, Textarea onResize window Se cambia el tamaño](https://reader034.fdocuments.us/reader034/viewer/2022042117/5e959da205f9686edd7a4bd2/html5/thumbnails/5.jpg)
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
![Page 6: 6º Unidad Didáctica Javascript - UPC Universitat Politècnica de … - UD6... · 2010-07-13 · de texto de un formulario onSelect Text, Textarea onResize window Se cambia el tamaño](https://reader034.fdocuments.us/reader034/viewer/2022042117/5e959da205f9686edd7a4bd2/html5/thumbnails/6.jpg)
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
![Page 7: 6º Unidad Didáctica Javascript - UPC Universitat Politècnica de … - UD6... · 2010-07-13 · de texto de un formulario onSelect Text, Textarea onResize window Se cambia el tamaño](https://reader034.fdocuments.us/reader034/viewer/2022042117/5e959da205f9686edd7a4bd2/html5/thumbnails/7.jpg)
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.
![Page 8: 6º Unidad Didáctica Javascript - UPC Universitat Politècnica de … - UD6... · 2010-07-13 · de texto de un formulario onSelect Text, Textarea onResize window Se cambia el tamaño](https://reader034.fdocuments.us/reader034/viewer/2022042117/5e959da205f9686edd7a4bd2/html5/thumbnails/8.jpg)
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
![Page 9: 6º Unidad Didáctica Javascript - UPC Universitat Politècnica de … - UD6... · 2010-07-13 · de texto de un formulario onSelect Text, Textarea onResize window Se cambia el tamaño](https://reader034.fdocuments.us/reader034/viewer/2022042117/5e959da205f9686edd7a4bd2/html5/thumbnails/9.jpg)
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.
![Page 10: 6º Unidad Didáctica Javascript - UPC Universitat Politècnica de … - UD6... · 2010-07-13 · de texto de un formulario onSelect Text, Textarea onResize window Se cambia el tamaño](https://reader034.fdocuments.us/reader034/viewer/2022042117/5e959da205f9686edd7a4bd2/html5/thumbnails/10.jpg)
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>
![Page 11: 6º Unidad Didáctica Javascript - UPC Universitat Politècnica de … - UD6... · 2010-07-13 · de texto de un formulario onSelect Text, Textarea onResize window Se cambia el tamaño](https://reader034.fdocuments.us/reader034/viewer/2022042117/5e959da205f9686edd7a4bd2/html5/thumbnails/11.jpg)
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)
![Page 12: 6º Unidad Didáctica Javascript - UPC Universitat Politècnica de … - UD6... · 2010-07-13 · de texto de un formulario onSelect Text, Textarea onResize window Se cambia el tamaño](https://reader034.fdocuments.us/reader034/viewer/2022042117/5e959da205f9686edd7a4bd2/html5/thumbnails/12.jpg)
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
![Page 13: 6º Unidad Didáctica Javascript - UPC Universitat Politècnica de … - UD6... · 2010-07-13 · de texto de un formulario onSelect Text, Textarea onResize window Se cambia el tamaño](https://reader034.fdocuments.us/reader034/viewer/2022042117/5e959da205f9686edd7a4bd2/html5/thumbnails/13.jpg)
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
![Page 14: 6º Unidad Didáctica Javascript - UPC Universitat Politècnica de … - UD6... · 2010-07-13 · de texto de un formulario onSelect Text, Textarea onResize window Se cambia el tamaño](https://reader034.fdocuments.us/reader034/viewer/2022042117/5e959da205f9686edd7a4bd2/html5/thumbnails/14.jpg)
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»(+).
![Page 15: 6º Unidad Didáctica Javascript - UPC Universitat Politècnica de … - UD6... · 2010-07-13 · de texto de un formulario onSelect Text, Textarea onResize window Se cambia el tamaño](https://reader034.fdocuments.us/reader034/viewer/2022042117/5e959da205f9686edd7a4bd2/html5/thumbnails/15.jpg)
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);
![Page 16: 6º Unidad Didáctica Javascript - UPC Universitat Politècnica de … - UD6... · 2010-07-13 · de texto de un formulario onSelect Text, Textarea onResize window Se cambia el tamaño](https://reader034.fdocuments.us/reader034/viewer/2022042117/5e959da205f9686edd7a4bd2/html5/thumbnails/16.jpg)
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 }
![Page 17: 6º Unidad Didáctica Javascript - UPC Universitat Politècnica de … - UD6... · 2010-07-13 · de texto de un formulario onSelect Text, Textarea onResize window Se cambia el tamaño](https://reader034.fdocuments.us/reader034/viewer/2022042117/5e959da205f9686edd7a4bd2/html5/thumbnails/17.jpg)
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
![Page 18: 6º Unidad Didáctica Javascript - UPC Universitat Politècnica de … - UD6... · 2010-07-13 · de texto de un formulario onSelect Text, Textarea onResize window Se cambia el tamaño](https://reader034.fdocuments.us/reader034/viewer/2022042117/5e959da205f9686edd7a4bd2/html5/thumbnails/18.jpg)
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
![Page 19: 6º Unidad Didáctica Javascript - UPC Universitat Politècnica de … - UD6... · 2010-07-13 · de texto de un formulario onSelect Text, Textarea onResize window Se cambia el tamaño](https://reader034.fdocuments.us/reader034/viewer/2022042117/5e959da205f9686edd7a4bd2/html5/thumbnails/19.jpg)
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
![Page 20: 6º Unidad Didáctica Javascript - UPC Universitat Politècnica de … - UD6... · 2010-07-13 · de texto de un formulario onSelect Text, Textarea onResize window Se cambia el tamaño](https://reader034.fdocuments.us/reader034/viewer/2022042117/5e959da205f9686edd7a4bd2/html5/thumbnails/20.jpg)
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.
![Page 21: 6º Unidad Didáctica Javascript - UPC Universitat Politècnica de … - UD6... · 2010-07-13 · de texto de un formulario onSelect Text, Textarea onResize window Se cambia el tamaño](https://reader034.fdocuments.us/reader034/viewer/2022042117/5e959da205f9686edd7a4bd2/html5/thumbnails/21.jpg)
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
![Page 22: 6º Unidad Didáctica Javascript - UPC Universitat Politècnica de … - UD6... · 2010-07-13 · de texto de un formulario onSelect Text, Textarea onResize window Se cambia el tamaño](https://reader034.fdocuments.us/reader034/viewer/2022042117/5e959da205f9686edd7a4bd2/html5/thumbnails/22.jpg)
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()
![Page 23: 6º Unidad Didáctica Javascript - UPC Universitat Politècnica de … - UD6... · 2010-07-13 · de texto de un formulario onSelect Text, Textarea onResize window Se cambia el tamaño](https://reader034.fdocuments.us/reader034/viewer/2022042117/5e959da205f9686edd7a4bd2/html5/thumbnails/23.jpg)
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
![Page 24: 6º Unidad Didáctica Javascript - UPC Universitat Politècnica de … - UD6... · 2010-07-13 · de texto de un formulario onSelect Text, Textarea onResize window Se cambia el tamaño](https://reader034.fdocuments.us/reader034/viewer/2022042117/5e959da205f9686edd7a4bd2/html5/thumbnails/24.jpg)
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
![Page 25: 6º Unidad Didáctica Javascript - UPC Universitat Politècnica de … - UD6... · 2010-07-13 · de texto de un formulario onSelect Text, Textarea onResize window Se cambia el tamaño](https://reader034.fdocuments.us/reader034/viewer/2022042117/5e959da205f9686edd7a4bd2/html5/thumbnails/25.jpg)
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.
![Page 26: 6º Unidad Didáctica Javascript - UPC Universitat Politècnica de … - UD6... · 2010-07-13 · de texto de un formulario onSelect Text, Textarea onResize window Se cambia el tamaño](https://reader034.fdocuments.us/reader034/viewer/2022042117/5e959da205f9686edd7a4bd2/html5/thumbnails/26.jpg)
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'];">
![Page 27: 6º Unidad Didáctica Javascript - UPC Universitat Politècnica de … - UD6... · 2010-07-13 · de texto de un formulario onSelect Text, Textarea onResize window Se cambia el tamaño](https://reader034.fdocuments.us/reader034/viewer/2022042117/5e959da205f9686edd7a4bd2/html5/thumbnails/27.jpg)
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
![Page 28: 6º Unidad Didáctica Javascript - UPC Universitat Politècnica de … - UD6... · 2010-07-13 · de texto de un formulario onSelect Text, Textarea onResize window Se cambia el tamaño](https://reader034.fdocuments.us/reader034/viewer/2022042117/5e959da205f9686edd7a4bd2/html5/thumbnails/28.jpg)
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
![Page 29: 6º Unidad Didáctica Javascript - UPC Universitat Politècnica de … - UD6... · 2010-07-13 · de texto de un formulario onSelect Text, Textarea onResize window Se cambia el tamaño](https://reader034.fdocuments.us/reader034/viewer/2022042117/5e959da205f9686edd7a4bd2/html5/thumbnails/29.jpg)
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