Vous êtes sur la page 1sur 29

6 Unidad Didctica

Javascript
Eduard Lara

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 validacin de
formularios

6.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:

VBScript:

Soportado por la mayora


de navegadores

Slo puede ser interpretado por


Internet Explorer.
3

6.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)
4

6.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
5

6.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.
<script>
</script>

Etiquetas para la inclusin


de un script genrico

<script language="JavaScript">
instrucciones
</script>

Etiquetas para la
inclusin de un
script javascript

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 pgina.

6.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

6.2 SINTAXIS JAVASCRIPT


No todos los browsers soportan o tienen
habilitado el interprete JavaScript
Se recomienda insertar el cdigo javascript
entre comentarios HTML. As, si el navegador
no soporta javascript, el cdigo no aparecer
como texto HTML.
<noscript>
<noscript>

Si el navegador no soporta JavaScript,


aparecer en su defecto, el mensaje
incluido entre dichas etiquetas.

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 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 ser
distinta que MiVariable)
11

6.3 VARIABLES,
FUNCIONES Y
OPERADORES
Declaracin Variables
Declaracin Global
miVariable=555;

Declaracin Local
var miVariable;
var miVariable=555;

Habilita la variable para todo el


documento, siendo desechada
cuando se abandona la pgina

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.

12

6.3 VARIABLES,
FUNCIONES Y
OPERADORES
Declaracin Variables
Tipo

Significado

Valor

Numricas
(nmero)

Almacenan datos de tipo


numrico, ya sean enteros,
decimales, negativos, etc.

numDecimal=3.1416;
numEntero=-2;

Textuales
(texto)

Contiene una cadena de


caracteres alfanumricos

miVariable=Carlota;
mensaje="Carlota es una
nia muy 'despierta;

Booleanas
(true, false)

Almacena valores lgicos


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

Conversin entre tipos de datos (2 mtodos)


Conversin implcita. Se
utiliza el signo de suma
(+).
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
Var edad=parselnt(prompt(
Cuntos aos tienes?",""));
Se quiere convertir un dato
introducido por el usuario en forma
texto y convertirlo a numrico
14

6.3 VARIABLES,
FUNCIONES Y
OPERADORES
Matrices (Arrays)
Son variables capaces de almacenar ms de un
dato, accedidos a travs 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 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
}

Estructura
bsica de una
funcin
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 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--;

18

6.3 VARIABLES,
FUNCIONES Y
OPERADORES

Operadores Lgicos. 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
ejecucin 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 (condicin)

switch(expresion) {

case opA:
Instrucciones_if: Se ejecutan

codigoA;

slo si condicin=true;

break;

case opB:

else

codigoB;

break;
Instrucciones_else: Se

ejecutan slo si condicin=false; default:


}
Contina el resto del script.

Cdigo ejecutable defecto;


}
20

6.4 ESTRUCTURAS DE
CONTROL DE FLUJO
Bucle for

Bucle while y do-while


while(condicion)
{

for(contador = valor; condicin;


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
jerarqua, donde unos contienen a otros.
Acceso a una propiedad
de unobjeto
elemento:

Document.form.text.value

Acceso a un mtodo 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") Creacin
de nuevas ventanas.
NAVIGATOR: Representa el propio Navegador
navigator.appName Nombre navegador
navigator.appVersion Nmero de versin
navigator.platform Nombre sistema operativo
navigator.onLine Acceso a travs de Internet o en Local
navigator.connectionSpeed Velocidad actual conexin
navigator.cookieEnabled Si tiene activada admisin de cookies
23

6.5 OBJETOS
PREDEFINIDOS
EN EL NAVEGADOR
DOCUMENT: Representa la pgina web mostrada 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 documento
document.open() Abre un documento
SCREEN: Informacin sobre la pantalla
screen.width Resolucin x de la pantalla
screen.height Resolucin y de la pantalla
24

6.5 OBJETOS
PREDEFINIDOS
EN EL NAVEGADOR
LOCATION: Informacin sobre la localizacin 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 pgina
HISTORY: Permite acceder al historial del 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

25

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.
<a href="URL" onClick= "alert('Ests
abandonando el sitio web'];">
26

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="";
}
Body

Si usuario es igual a la
contrasea coinciden, se
cargar una pgina de
bienvenida, si no, aparecer
un mensaje de alerta y se
resetear el formulario.

La funcin ser activada cuando


el usuario haga clic sobre el
botn 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


VALIDACIN 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


VALIDACIN 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 botn del ratn

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 botn del ratn

onMove

window

Se mueve una ventana o un marco

onReset

Form

El usuario limpia un formulario

onResize

window

Se cambia el tamao 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 enva un formulario

onUnload

window

El usuario abandona una pgina


29