Portales - Ud6 - Javascript

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


El programa JavaScript se

ejecutar siempre que sea llamado

El programa se ejecutar mientras se

carga la pgina.


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


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


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


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


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


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


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));


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--;


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


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


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


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


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


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


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


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

Portales - Ud6 - Javascript

Documents

Transcript of Portales - Ud6 - Javascript