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>

Etiquetas para la inclusión de un script genérico

<script language="JavaScript"> instrucciones

Etiquetas para la inclusión de un script javascript

6

6.2 SINTAXIS JAVASCRIPT <script language="JavaScript"> <script language="JavaScript">

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.

Si el navegador no soporta JavaScript, aparecerá en su defecto, el mensaje incluido entre dichas etiquetas.

9

6.2 EJEMPLO JAVASCRIPT JAVASCRIPT <script language="JavaScript"> alert("Hola en JavaScript"); Su navegador no soporta JavaScript 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







6.3 VARIABLES, FUNCIONES Y OPERADORES <script language="JavaScript"> function Suma(a,b) { return a+b; } <script language="JavaScript"> alert ("El resultado es " + Suma (1,9));

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



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