Download - Scripts y javascript básico
-
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