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:

<script type=text/javascript>

</script>

Recomendacin: ponerlo dentro de <head>

Cuando el navegador va interpretando la pgina HTML, al llegar
a la etiqueta <script> 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;

alert("El resultado es " + resultado); ...
En lugar de
Mismas
operaciones
Tendramos esto (simplificado)
/* 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 () {
}
Y el resultado final sera
function suma () {
}

suma ();

suma ();

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

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

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="es" lang="es">

<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />

<script type=text/javascript>
function nuevaVentana() {
window.open('#','','width=300,height=200,resizable=yes');
}
</script>

</head>

<body>
<a href="javascript:nuevaVentana()" > Esto abre una nueva ventana </a>
</body>

</html>



<head>

<script language="JavaScript">
function nuevaVentana() {
window.open('#','','width=300,height=200,resizable=yes'); }
</script>

</head>
<body>

<a href="#" onClick=nuevaVentana() "> Esto abre una nueva ventana </a>

</body>
</html>



<head>
<script language="JavaScript">
function cambiaColor() {
document.getElementById('input').style.backgroundColor='Blue';}
</script>
<style>
input {background-color:White;}
</style>
</head>
<body>
<div onmouseover="cambiaColor();">
<input id="input">
</div>
</body>
</html>
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 <= b)
Igual que (a == b)
Distinto de (a != b)

(condicin1 Y condicin2) (condicin1 && condicin2)

(condicin1 O condicin2) (condicin1 || condicin2)
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.

<form name=miFormulario action=mailto:xxx@xxxx>

<input type=button value=Enviar onclick=validar(miFormulario)>

Conviene ponerle nombre al formulario
Ejemplo de html de formulario
que se validar
Ejemplo de script de validacin
del formulario
<form name="miFormulario" action="mailto:xxxx@xxx.xx" method="post" onsubmit="return validar();">
<table>
<tr><td>Nombre:</td>
<td><input type="text" name="nombre" size="30" maxlength="100"> </td></tr>
<tr><td>Edad: </td>
<td><input type="text" name="edad" size="4" maxlength="10"></td></tr>
<tr><td>Sexo:</td>
<td><input type="text" name="sexo" size="4"> </td></tr>
<tr><td>Salario:</td>
<td> <input type="text" name="salario" size="5"> </td></tr>
<tr><td colspan="2" align="center">
<input type="submit" value="Enviar" name="enviar"> </td></tr>
</table>
</form>
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<=18){
alert("Tiene que escribir una edad mayor o igual a 18.");
document.miFormulario.edad.focus();
return false;
}
if ((document.miFormulario.sexo.value!="H") &&
(document.miFormulario.sexo.value!="h") &&
(document.miFormulario.sexo.value!="M") &&
(document.miFormulario.sexo.value!="m")){
alert("Tiene que escribir una H o h o M o m");
document.miFormulario.sexo.focus();
return false;
}
if ((document.miFormulario.salario.value<100) ||
(document.miFormulario.salario.value>4000)){
alert("Tiene que escribir un salario comprendido entre 100 y 4000");
document.miFormulario.salario.focus();
return false;
}
alert("Muchas gracias por enviar el formulario");
return true;
}
Validar radiobutton
teora
<input type=radio" name=nombreCampo" value=1">Respuesta 1
<input type=radio" name=" nombreCampo " value=2"> Respuesta 2
<input type=radio" name=" nombreCampo value=3"> Respuesta 3
<input type=radio" name=nombreCampo" value=4"> Respuesta 4
document.nombreFormulario.nombreCampo[numOpcin].checked
numOpcin comienza por 0.
Validar radiobutton
Ejemplo
<input type="radio" name="sexo" value="M">Masculino<br>
<input type="radio" name="sexo" value="F">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<input type="checkbox" name=campo" value=1">
Respuesta 2 <input type="checkbox" name=" campo " value=2">
Respuesta 3<input type="checkbox" name=" campo value=3">
Respuesta 4<input type="checkbox" name=" campo " value=4">
document.nombreFormulario.nombreCampo[numOpcin].checked
numOpcin comienza por 0.
Validar checkbox
ejemplo
<input type="checkbox" name="aficiones" value="Deporte">Practicar algn deporte<br>
<input type="checkbox" name="aficiones" value="Msica">Escuchar msica o tocar
algn instrumento<br>
<input type="checkbox" name="aficiones" value="Cine">Ver cine <br>
<input type="checkbox" name="aficiones" value="Lectura">Leer<br>
<input type="checkbox" name="aficiones" value="Ninguna">Ninguna<br>
if (!document.miFormulario.aficiones[0].checked &&
!document.miFormulario.aficiones[1].checked &&
!document.miFormulario.aficiones[4].checked) {
alert("Elija una o ms aficiones");
return false;
}
document.nombreFormulario.nombreControl.selectedIndex
Validar select
Teora
<select name="opciones">
<option value="">- Selecciona un valor -</option>
<option value="1">Primer valor</option>
<option value="2">Segundo valor</option>
<option value="3">Tercer valor</option>
</select>
document.nombreFormulario.nombreControl[indice].selected
if (document.miFormulario.poblacion.selectedIndex==0){
alert("Elija una poblacin");
return false;
}
Validar select
Ejemplo
<select name="poblacion>
<option value="Ninguna">Elija una poblacin</option>
<option value="Valdepeas">Valdepeas</option>
<option value="Moral de Calatrava">Moral de Calatrava</option>
<option value="La Solana">La Solana</option>
<option value=Infantes">Villanueva de los Infantes</option>
<option value="Otra">Otra poblacin </option>
</select>
<form name="miFormulario" action="mailto:xxxx@xxx.xx" method="post" onsubmit="return validar();">
<table>
<tr><td>Nombre:</td>
<td><input type="text" name="nombre" size="30" maxlength="100">
</td></tr>
<tr><td>Edad (>18): </td>
<td><input type="text" name="edad" size="4" maxlength="10">
</td></tr>
<tr><td>Sexo:</td>
<td><input type="radio" name="sexo" value="M">Masculino<br>
<input type="radio" name="sexo" value="F">Femenino
</td></tr>
<tr><td>Aficiones:</td>
<td> <input type="checkbox" name="aficiones" value="Deporte">Practicar algn deporte<br>
<input type="checkbox" name="aficiones" value="Msica">Escuchar msica o tocar algn
instrumento<br>
<input type="checkbox" name="aficiones" value="Cine">Ver cine <br>
<input type="checkbox" name="aficiones" value="Lectura">Leer<br>
<input type="checkbox" name="aficiones" value="Ninguna">Ninguna<br>
</td></tr>
<tr><td>Poblacin: </td>
<td>
<select name="poblacion">
<option value="Ninguna">Elija una poblacin</option>
<option value="Valdepeas">Valdepeas</option>
<option value="Moral de Calatrava">Moral de Calatrava</option>
<option value="La Solana">La Solana</option>
<option value="Villanueva de los Infantes">Villanueva de los Infantes</option>
<option value="Otra">Otra poblacin </option>
</select>
</td></tr>
<input type="submit" value="Enviar" name="enviar">
</td></tr>
</table>
</form>
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<=18){
alert("Tiene que escribir una edad mayor o igual a 18.");
document.miFormulario.edad.focus();
return false;
}
if ((document.miFormulario.sexo[0].checked==false) &&
(document.miFormulario.sexo[1].checked==false)){
alert("Tiene que elegir un sexo");
return false;
}
if (!document.miFormulario.aficiones[0].checked &&
!document.miFormulario.aficiones[3].checked){
alert("Elija una o ms aficiones");
return false;
}
if (document.miFormulario.poblacion.selectedIndex==0){
alert("Elija una poblacin");
return false;
}
alert("Muchas gracias por enviar el formulario");
return true;
}
Ejercicio propuesto
Correccin de un examen

Scripts y Javascript Básico

Enviado por

Dados do documento

Título original

Direitos autorais

Formatos disponíveis

Compartilhar este documento

Compartilhar ou incorporar documento

Opções de compartilhamento

Você considera este documento útil?

Este conteúdo é inapropriado?

Direitos autorais:

Formatos disponíveis

Scripts y Javascript Básico

Enviado por

Direitos autorais:

Formatos disponíveis

UD 4.

Você também pode gostar