UD 4. SCRIPTS de cliente

Javascript

SCRIPTS

Utilizando ciertos lenguajes de programacin se pueden

realizar programas (scripts) dentro de una pgina web

(html) que permitirn aadir contenido dinmico a dichas

pginas.

Contenido dinmico es el que puede cambiar en funcin de

las operaciones que realiza el usuario a lo largo de la

ejecucin de dicho programa.

Lenguajes de scripts: JavaScript, VisualBasic Script,

JavaScript

En cualquier parte del documento o en otro documento

externo se incluyen las etiquetas:

Recomendacin: ponerlo dentro de

Cuando el navegador va interpretando la pgina HTML, al llegar

a la etiqueta sabe que lo que hay dentro es cdigo

JavaScript y lo ejecutar.

Salida de datos por pantalla alert (mensaje);

Prctica 1

Prctica 2

Variables var nombre, edad; Entrada de datos variable=prompt(mensaje); Salida de datos por pantalla alert (mensaje); Escritura de datos en la pgina web

document.write(mensaje);

Ejercicio Realiza una pgina web donde pregunte tu nombre, poblacin y estudios y

los ponga en una tabla, cada uno en una fila distinta.

Sugerencia: introduce el cdigo html de la tabla dentro de

document.write(texto);

Funciones

Una funcin es un conjunto de instrucciones que se

agrupan para realizar una tarea concreta y que se

pueden reutilizar fcilmente.

function nombreFuncion() {

instrucciones;

}

var resultado, numero1 = 3, numero2 = 5;

resultado = numero1 + numero2;

alert("El resultado es " + resultado);

numero1 = 10; numero2 = 7;

resultado = numero1 + numero2;

alert("El resultado es " + resultado);

numero1 = 5; numero2 = 8;

resultado = numero1 + numero2;

alert("El resultado es " + resultado); ...

En lugar de

Mismas

operaciones

Tendramos esto (simplificado)

var resultado, numero1 = 3, numero2 = 5;

/* Llamada a la funcin que suma 2 nmeros y muestra el resultado */

numero1 = 10; numero2 = 7;

/* Llamada a la funcin que suma 2 nmeros y muestra el resultado */

numero1 = 5; numero2 = 8;

/* Llamada a la funcin que suma 2 nmeros y muestra el resultado */

...

Y cul podra ser la funcin que

sume y muestre los resultados?

function suma () {

resultado = numero1 + numero2;

alert("El resultado es " + resultado);

}

Y el resultado final sera

function suma () {

resultado = numero1 + numero2;

alert("El resultado es " + resultado);

}

var resultado, numero1 = 3, numero2 = 5;

suma ();

numero1 = 10; numero2 = 7;

suma ();

numero1 = 5; numero2 = 8;

suma (); ...

Argumentos de funciones

Valores de variables que se mandan a las funciones

(en la llamada) para que los utilice en sus operaciones.

Las variables que necesitan las funciones se

llaman argumentos o parmetros.

function NombreFuncion([argumento1, argumento2,]) {

...

}

Argumentos de funciones

//Definicin de la funcin

function sumaYMuestra(primerNumero, segundoNumero) {

var resultado = primerNumero + segundoNumero;

alert("El resultado es " + resultado);

}

// Declaracin de las variables

var numero1 = 3;

var numero2 = 5;

// Llamada a la funcin

sumaYMuestra(numero1, numero2);

Valores devueltos por la funcin Las funciones no solamente puede recibir variables y

datos, sino que tambin pueden devolver los valores

que han calculado.

Para devolver valores dentro de una funcin, se utiliza

la palabra reservada return.

Aunque las funciones pueden devolver valores de

cualquier tipo, solamente pueden devolver un valor

cada vez que se ejecutan.

function nombreFuncion ([argumento1, ]) { var variableADevolver;

operaciones;

; return variableADevolver;

}

Valores devueltos por la funcin

function calculaPrecioTotal(precio) {

var impuestos = 1.21;

var gastosEnvio = 10;

var precioTotal = ( precio * impuestos ) + gastosEnvio;

return precioTotal;

}

var precio= calculaPrecioTotal(23.34);

JavaScript

Tambin se puede incluir cdigo JavaScript como

argumentos de la etiqueta HREF, que se evaluar

cuando el usuario pinche sobre el enlace o pase el

ratn sobre l.

function nuevaVentana() {

window.open('#','','width=300,height=200,resizable=yes');

}

Esto abre una nueva ventana

function nuevaVentana() {

window.open('#','','width=300,height=200,resizable=yes'); }

function cambiaColor() {

document.getElementById('input').style.backgroundColor='Blue';}

input {background-color:White;}

Instruccin if

Permite tomar decisiones en funcin de una condicin.

En pseudocdigo sera:

Si (condicin) entonces

accin a realizar

En JavaScript sera:

if (condicin) {

accin1;

accin2;

}

accin3;

Condiciones

Mayor que (a > b)

Mayor o igual que (a >= b)

Menor que (a < b)

Menor o igual que (a

Veamos cmo comparar dos nmeros n1 y n2:

if ( n1 > n2) {

alert(El nmero mayor es +n1); }

if (n2 > n1) {

alert(El nmero mayor es +n2); }

if (n2 == n1) {

alert(Los dos nmeros son iguales); }

Ejemplo1

Instruccin ifelse

Permite realizar ciertas acciones si se cumple una condicin, y otras

determinadas acciones si la condicin resulta falsa.

En pseudocdigo sera:

Si (condicin) entonces

acciones a realizar

si no

acciones a realizar

En JavaScript sera:

if (condicin) {

accin1;

accin2;

} else {

accin3;

accin4;

}

accin5;

Cmo sera el cdigo de comparar dos nmeros n1 y n2 ahora?

if ( n1 > n2) {

alert(El nmero mayor es ;n1); } else {

if (n2 > n1) {

alert(El nmero mayor es ;n2); }

else {

alert(Ambos nmeros son iguales); }

}

Ejemplo2

Ejercicio

Escribir el cdigo de una funcin a la que se pasa como

parmetro un nmero entero y devuelve como resultado una

cadena de texto que indica si el nmero es par o impar.

Mostrar por pantalla el resultado devuelto por la funcin.

Ejercicio

Validacin de formularios Los formularios se utilizan para enviar informacin desde el

cliente al servidor web.

Los campos del formulario obedecen a un formato

determinado y conviene revisarlos para evitar errores en el

servidor.

Javascript permite realizar esta revisin antes de que llegue al

servidor.

Conviene ponerle nombre al formulario

Ejemplo de html de formulario

que se validar

Ejemplo de script de validacin

del formulario

Nombre:

Edad:

Sexo:

Salario:

function validar(){

if (document.miFormulario.nombre.value.length==0){

alert("Tiene que escribir su nombre.");

document.miFormulario.nombre.focus();

return false;

}

if (document.miFormulario.edad.value

Validar radiobutton teora

Respuesta 3

Validar radiobutton Ejemplo

Masculino

Femenino

if (!document.miFormulario.sexo[0].checked &&

!document.miFormulario.sexo[1].checked){

alert("Tiene que elegir un sexo");

return false;

}

Validar checkbox teora

Respuesta 1 Respuesta 2

document.nombreFormulario.nombreCampo[numOpcin].checked

numOpcin comienza por 0.

Validar checkbox ejemplo

Practicar algn deporte

Escuchar msica o tocar

algn instrumento

Ver cine

Leer

Ninguna

if (!document.miFormulario.aficiones[0].checked &&

!document.miFormulario.aficiones[1].checked &&

!document.miFormulario.aficiones[2].checked &&

!document.miFormulario.aficiones[3].checked &&

!document.miFormulario.aficiones[4].checked) {

alert("Elija una o ms aficiones");

return false;

}

document.nombreFormulario.nombreControl.selectedIndex

Validar select Teora

- Selecciona un valor -

Primer valor

Segundo valor

Tercer valor

document.nombreFormulario.nombreControl[indice].selected

if (document.miFormulario.poblacion.selectedIndex==0){

alert("Elija una poblacin");

return false;

}

Validar select Ejemplo

Villanueva de los Infantes Otra poblacin

Nombre:

Edad (>18):

Sexo:

Masculino

Femenino

Aficiones:

Practicar algn deporte

Escuchar msica o tocar algn

instrumento

Ver cine

Leer

Ninguna

Poblacin:

Elija una poblacin

Valdepeas

Moral de Calatrava

La Solana

Villanueva de los Infantes

Otra poblacin

function validar(){

if (document.miFormulario.nombre.value.length==0){

alert("Tiene que escribir su nombre.");

document.miFormulario.nombre.focus();

return false;

}

if (document.miFormulario.edad.value

Ejercicio propuesto Correccin de un examen