PORTALES - UD6 - Javascript - Pagina Personal de Eduard Lara
Anuncio
6º Unidad Didáctica
Javascript
Eduard Lara
1
ÍNDICE
6.1 Lenguajes de script
6.2 Sintaxis de Javascript
6.3 Variables, funciones y operadores
6.4 Estructuras de control de flujo
6.5 Objetos predefinidos en el
navegador
6.6 Eventos y validación de
formularios
2
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:
VBScript:
Soportado por la mayoría
de navegadores
Sólo puede ser interpretado por
Internet Explorer.
3
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)
4
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 compiladores
Dotaba de dinamismo a los estáticos documentos HTML
Es soportado por todos los navegadores del mercado
5
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>
Etiquetas para la inclusión
de un script genérico
<script language="JavaScript">
instrucciones
</script>
Etiquetas para la
inclusión de un
script javascript
6
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.
7
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
8
6.2 SINTAXIS JAVASCRIPT
No todos los browsers soportan o tienen
habilitado el interprete JavaScript
Se recomienda insertar el código javascript
entre 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.
9
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>
10
6.3 VARIABLES,
FUNCIONES Y
OPERADORES
Variables
Permiten 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)
11
6.3 VARIABLES,
FUNCIONES Y
OPERADORES
Declaración Variables
Declaración Global
miVariable=555;
Declaración Local
var miVariable;
var miVariable=555;
Habilita la variable para todo el
documento, siendo desechada
cuando se abandona la página
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.
12
6.3 VARIABLES,
FUNCIONES Y
OPERADORES
Declaración Variables
Tipo
Significado
Valor
Numéricas
(número)
Almacenan datos de tipo
numérico, ya sean enteros,
decimales, negativos, etc.
numDecimal=3.1416;
numEntero=-2;
Textuales
(texto)
Contiene una cadena de
caracteres alfanuméricos
miVariable=‘Carlota’;
mensaje="Carlota es una
niña muy 'despierta‘”;
Booleanas
(true, false)
Almacena valores lógicos
tipo «sí» o «no»
var repetidor=false;
De objeto
Almacena objetos
predefinidos por JavaScript
o por el desarrollador.
Document.form1.value();
13
6.3 VARIABLES,
FUNCIONES Y
OPERADORES
Conversión entre tipos de datos (2 métodos)
Conversión implícita. Se
utiliza el signo de «suma»
(+).
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
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
14
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.
var temperaturas=new Array(30,28,27);
var temperaturas=new Array();
temperaturas[0]=30;
temperaturas[1]=28;
temperaturas[2]=27;
Las «celdas» comienzan a contarse desde 0
15
6.3 VARIABLES,
FUNCIONES Y
OPERADORES
Funciones
Una 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
}
Estructura
básica de una
función
16
<html>
<head>
</head>
<body>
</body>
</html>
6.3 VARIABLES,
FUNCIONES Y
OPERADORES
<script language="JavaScript">
function Suma(a,b)
{
return a+b;
}
</script>
<script language="JavaScript">
alert ("El resultado es " + Suma (1,9));
</script>
17
6.3 VARIABLES,
FUNCIONES Y
OPERADORES
Operadores
Son 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--;
18
6.3 VARIABLES,
FUNCIONES Y
OPERADORES
Operadores Lógicos. Permiten realizar
operaciones en las que el resultado deba ser true
o false.
- ANDÆ A&&B
Se utilizan para tomar
decisiones simples en la
- OR Æ A||B
ejecución de scripts
- NOT Æ !A
Operadores relacionales.
- Dos valores iguales Æ ==
- Dos valores distintos Æ !=
- Mayor o igual Æ >=
19
6.4 ESTRUCTURAS DE
CONTROL DE FLUJO
Estructura if-else
Estructura switch-case
if (condición)
switch(expresion) {
{
case opA:
Instrucciones_if: Se ejecutan
codigoA;
sólo si condición=true;
break;
}
case opB:
else
codigoB;
{
break;
Instrucciones_else: Se
…
ejecutan sólo si condición=false; default:
}
Continúa el resto del script.
Código ejecutable defecto;
}
20
6.4 ESTRUCTURAS DE
CONTROL DE FLUJO
Bucle for
Bucle while y do-while
while(condicion)
{
for(contador = valor; condición;
incremento)
{
Cuerpo_del_bucle;
}
Cuerpo_del_bucle;
}
----------------------------------do
{
Cuerpo_del_bucle;
}
while(condicion)
21
6.5 OBJETOS
PREDEFINIDOS
EN EL NAVEGADOR
Los navegadores constan de un conjunto de
objetos predefinidos, relacionados mediante una
jerarquía, donde unos contienen a otros.
Acceso a una propiedad
de unobjeto
elemento:
Document.form.text.value
Acceso a un método de
un elemento:
Document.form.text.focus()
22
6.5 OBJETOS
PREDEFINIDOS
EN EL NAVEGADOR
WINDOW: Representa la ventana del 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.
NAVIGATOR: Representa el propio Navegador
navigator.appName Æ Nombre navegador
navigator.appVersion Æ Número de versión
navigator.platform Æ Nombre sistema operativo
navigator.onLine Æ Acceso a través de Internet o en Local
navigator.connectionSpeedÆ Velocidad actual conexión
navigator.cookieEnabledÆ Si tiene activada admisión de cookies
23
6.5 OBJETOS
PREDEFINIDOS
EN EL NAVEGADOR
DOCUMENT: Representa la página web mostrada 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 documento
document.open() Æ Abre un documento
SCREEN: Información sobre la pantalla
screen.width Æ Resolución x de la pantalla
screen.height Æ Resolución y de la pantalla
24
6.5 OBJETOS
PREDEFINIDOS
EN EL NAVEGADOR
LOCATION: Información sobre la localización del documento que se
está visualizando en la ventana.
window.location.href Æ Devuelve o establece la URL del documento.
Propiedad de lectura y escritura
window.location.reload() Æ Recarga la página
HISTORY: Permite acceder al historial del 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
25
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'];">
26
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="";
}
Body
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.
La función será activada cuando
el usuario haga clic sobre el
botón submit del formulario.
<input type="text" name="usuario">
<input type="password" name="clave">
<input type="submit" onClick="comprobar ();">
27
6.6 LOS EVENTOS Y LA
VALIDACIÓN DE
FORMULARIOS
Manejador
Elemento
Se produce cuando...
onBlur
Button, Checkbox, FileUpload,
Layer, Password, Radio, Reset,
Select, Submit, Text, Textarea
Un elemento de formulario, una ventana o un
marco pierden el foco
onChange
FileUpload, Select, Text,
Textarea
El valor de un campo de formulario cambia
onClick
Button, document, Checkbox,
Link, Radio, Reset, Submit
Se hace click en un objeto o formulario
onDblClick
document, Link
Se hace click doble en un objeto o
formulario
onFocus
Button, Checkbox, FileUpload,
Layer, Password, Radio, Reset,
Select, Submit, Text, Textarea
Una ventana, marco o elemento de
formulario recibe el foco
onKeyDown
document, Image, Link, Textarea El usuario pulsa una tecla
onKeyPress
document, Image, Link, Textarea El usuario mantiene pulsada una tecla
onKeyUp
document, Image, Link, Textarea El usuario libera una tecla
28
6.6 LOS EVENTOS Y LA
VALIDACIÓN DE
FORMULARIOS
Manejador
Elemento
Se produce cuando...
onLoad
Image, Layer, window
El navegador termina la carga de una ventana
onMouseDown
Button, document, Link
El usuario pulsa un botón del ratón
onMouseMove
Ninguno (debe asociarse a
uno)
El usuario mueve el puntero
onMouseOut
Layer, Link
El puntero abando una área o enlace
onMouseOver
Layer, Link
El puntero entra en una área o imagen
onMouseUp
Button, document, Link
El usuario libera un botón del ratón
onMove
window
Se mueve una ventana o un marco
onReset
Form
El usuario limpia un formulario
onResize
window
Se cambia el tamaño de una ventana o marco
onSelect
Text, Textarea
Se selecciona el texto del campo texto o área
de texto de un formulario
onSubmit
Form
El usuario envía un formulario
onUnload
window
El usuario abandona una página
29
