GD Capitulo 12

Programacin de documentos
12 web utilizando lenguajes de

script del cliente
Objetivos del captulo

44 Diferenciar ejecucin web del
lado del cliente y del servidor.
44 Introducir el modelo de objetos de
documento DOM.
44 Conocer el lenguaje de
programacin web del lado del
cliente: JavaScript.
44 Realizar ejemplos y prcticas
sobre dicho lenguaje.
Implantacin de aplicaciones web RA-MA
Presentacin del captulo
En el captulo se estudian las diferencias entre lenguajes del lado del servidor y lenguajes del lado del cliente.
De los lenguajes del lado del cliente, junto con HTML y CSS (estudiados en el captulo anterior), uno de los
ms importantes y conocidos es JavaScript. En este captulo se ha tratado JavaScript casi en exclusiva para la
resolucin de problemas concretos, como son la validacin de datos en los formularios y la captura de eventos.
JavaScript es mucho ms que eso, pero para el estudio de dicho lenguaje necesitaramos varios libros.
Al final del captulo hemos tratado las limitaciones y los riesgos de utilizar JavaScript. Las limitaciones
le vienen sobre todo por ser un lenguaje para uso en el cliente y por el hecho de no trabajar igual en todos los
navegadores web.
Contenidos
12.1 DIFERENCIAS ENTRE LA EJECUCIN EN LADO DEL CLIENTE Y DEL SERVIDOR

12.2 MODELO DE OBJETOS DEL DOCUMENTO DOM
12.2.1 Introduccin
12.2.2 Niveles del DOM y soporte
12.2.3 Navegadores compatibles con los estndares
12.3 JAVASCRIPT
12.3.1 Consideraciones iniciales
12.3.2 Primer ejemplo
12.4 VALIDACIN DE FORMULARIOS CON JAVASCRIPT
12.4.1 Evento onsubmit
12.4.2 El objeto this
12.4.3 Validacin de campos vacos
12.4.4 Validacin de campos numricos
12.4.5 Validacin de campos numricos de longitud fija
12.4.6 Validacin de campos de correo electrnico
12.5 COMPORTAMIENTOS DINMICOS. CAPTURA DE EVENTOS CON JAVASCRIPT
12.6 LIMITACIONES Y RIESGOS DE ATAQUES
RESUMEN DEL CAPTULO
ejercicios propuesTOS
TEST DE CONOCIMIENTOS
162
RA-MA 12 n PROGRAMACIN DE DOCUMENTOS WEB UTILIZANDO LENGUAJES DE SCRIPT
Tiempo estimado de duracin
El tiempo estimado de duracin para el desarrollo de este captulo ser de 5 horas. Su desarrollo depender
del calendario lectivo y de las caractersticas del alumnado.
Actividades de enseanza y aprendizaje
En el desarrollo de este captulo se podrn realizar las siguientes actividades:
nn Introduccin de los contenidos del captulo.

nn Realizacin de prcticas propuestas en el captulo.
nn Comprobacin de casos prcticos propuestos en el captulo.
nn Realizacin de ejercicios.
nn Realizacin del test de conocimientos y repaso de los conceptos ms importantes.
Metodologa
Para el desarrollo de este captulo resulta fundamental que los alumnos hayan adquirido correctamente los
conocimientos sobre los conceptos de la programacin de documentos utilizando lenguajes de scripts orientados
al cliente.
El trabajo en el aula consistir en la exposicin de los contenidos del captulo, siguiendo estos procedimientos:
nn Introduccin al lenguaje JavaScript

nn Validacin de formularios
nn Comportamiento dinmico.
nn Limitaciones y riesgos
Posteriormente, los alumnos deben desarrollar los ejercicios y el test de conocimientos propuestos, para lo que
dispondrn de toda la documentacin que se considere oportuna, adems de la asistencia permanente del profesor.
Actividades e instrumentos de evaluacin
La evaluacin de los alumnos se podr realizar a travs de la asistencia y el trabajo diario realizado en el
aula, los ejercicios y prcticas propuestas fuera del horario lectivo y las pruebas de contenido terico y prctico.
En este ltimo caso, deber establecerse un calendario de realizacin de estas pruebas junto con las actividades
de recuperacin para aquellos alumnos que no las superen.
163
Solucionario de ACTIVIDADES
Actividades 12.1 Aadir al ejemplo1 las siguientes caractersticas:
nn Despus del primer mensaje, se muestre otro mensaje que diga Soy el primer script.
nn Aadir algunos comentarios que expliquen el funcionamiento del cdigo.
<HTML>
<HEAD>
<TITLE>EJE1.HTML</TITLE>
</HEAD>
<BODY>
<SCRIPT LANGUAGE=JavaScript>
// primer comentario
alert(Soy el primer script);
/* segundo comentario */
alert(Hola Mundo!);
</SCRIPT>
</BODY>
</HTML>
Actividades 12.2 Hacer un formulario web con 4 campos: nombre, apellidos, DNI y telfono. No permitir
que pueda enviar la informacin si alguno de los campos ha quedado en blanco.
<html>
<head> <title>Práctica 2</title>
<script>
function Valida(formulario) {
if ((formulario.nombre.value.length == 0) ||
(formulario.apellidos.value.length ==0) || (formulario.dni.value.length ==0)
|| (formulario.telefono.value.length ==0)) {
alert(falta información);
return false
}
return true
}
</script>
</head>
<body>
<h1>Práctica 2</h2>
<form name=miFormulario action=mailto:mi@mail.com enctype=text/plain
onSubmit=return Valida(this);>
<table>
<tr>
164
<td>Nombre</td><td><input type=text name=nombre></td>

</tr>
<tr>
<td>Apellidos</td><td><input type=text name=apellidos></td>
</tr>
<tr>
<td>DNI</td><td><input type=text name=dni></td>
</tr>
<tr>
<td> Teléfono </td><td><input type=text name=telefono></td>
</tr>
<td colspan=2>
<input type=submit value=Enviar name=enviar>
</td>
</tr>
</table>
</form>
</body>
Actividades 12.3 Aadir al formulario de la Actividad 12.2 un campo ms: edad. Comprobar que el valor
que hemos introducido en este campo es de tipo numrico.
<html>
<script>
function Valida(formulario) {
(formulario.apellidos.value.length ==0) || (formulario.dni.value.length ==0)
|| (formulario.telefono.value.length ==0)) {
alert(falta informacion);
return false
}
if (isNaN(parseInt(formulario.edad.value))) {
alert(el campo edad debe ser un número);
return false;
}
return true
}
</script>
</head>
<body>
165
<table>
<tr>
</tr>
<tr>
</tr>
<tr>
</tr>
<tr>
<td>Teléfono</td><td><input type=text name=telefono> </td>
</tr>
<tr>
<td>Edad</td><td><input type=text name=edad></td>
</tr>
<td colspan=2>
</td>
</tr>
</table>
</form>
</body>
</html>
Actividades 12.4 Sobre el formulario de la prctica 3, comprobar que el valor que hemos introducido para
el DNI y para el telfono tiene el formato correcto.
<html>
<script>
function Valida(formulario){
(formulario.apellidos.value.length ==0) ||
(formulario.dni.value.length == 0) ||
(formulario.telefono.value.length == 0) ||
(formulario.edad.value.length == 0)) {
alert(falta informacion);
return false;
}
return false;
}
166
var dni=/(^([0-9]{8,8}\-[A-Z])|^)$/
if (!(dni.test(formulario.dni.value))) {
alert(Contenido del campo DNI no es válido.);
return false; }
var telefono=/(^([0-9]{9,9})|^)$/
if (!(telefono.test(formulario.telefono.value))) {
alert(Contenido del campo Teléfono no es válido.);
return false; }
return true;
}
</script>
</head>
<body>
<table>
<tr>
</tr>
<tr>
</tr>
<tr>
</tr>
<tr>
<td> Teléfono </td><td><input type=text name=telefono></td>
</tr>
<tr>
</tr>
<td colspan=2>
</td>
</tr>
</table>
</form>
</body>
</html>
167
Actividades 12.5 Sobre el formulario de la Actividad 12.4, aadir un nuevo campo (e-mail) y comprobar que
el valor que hemos introducido para dicho campo tiene un formato de correo electrnico vlido.
<html>
<script>
function Valida(formulario){
(formulario.apellidos.value.length ==0) ||
(formulario.dni.value.length == 0) ||
(formulario.telefono.value.length == 0) ||
(formulario.edad.value.length == 0)) {
alert(falta información);
return false;
}
return false;
}
var dni=/(^([0-9]{8,8}\-[A-Z])|^)$/
if (!(dni.test(formulario.dni.value))) {
alert(Contenido del campo DNI no es válido.);
return false; }
var telefono=/(^([0-9]{9,9})|^)$/
if (!(telefono.test(formulario.telefono.value))) {
alert(Contenido del campo Teléfono no es válido.);
return false; }
var correo=/^[^@\s]+@[^@\.\s]+(\.[^@\.\s]+)+$/
if (!(correo.test(formulario.correo.value))) {
alert(Contenido del correo no es CORREO electrónico válido.);
return false; }
return true;
}
</script>
</head>
<body>
168
<table>
<tr>
</tr>
<tr>
</tr>
<tr>
</tr>
<tr>
<td>Teléfono </td><td><input type=text name=telefono></td>
</tr>
<tr>
</tr>
<tr>
<td>Correo</td><td><input type=text name=correo></td>
</tr>
<tr>
<td colspan=2>
</td>
</tr>
</table>
</form>
</body>
</html>
Actividades 12.6 Hacer una pgina al estilo de la del ejemplo donde probis el uso varias de las capturas
de eventos que hemos visto en la tabla 12.2. Al menos debes utilizar 5 funciones distintas.
<body onLoad=alert(estás en mi página web)

onResize=alert(has cambiado el tamantilde;o de la página)>
Ejemplo de onclick <br>
<a href=http://www.google.es onclick=alert(Hasta la vista)>Ir a google </a>
<br><br>
<br><br>
<img src=http://www.google.es/intl/es_ALL/images/logos/images_logo_lg.gif onmous
eover=alert(Estás encima de la imagen)>
169
Solucionario de ejercicios
1 Por qu cree que se usa tanto hoy en da JavaScript?

Algunas de las razones por las que se usa hoy en da JavaScript pueden ser:
nn Es moderno (tiene pocos aos).
nn Es sencillo (su hermano mayor: el Java, es bastante ms complejo).
nn Es til (el desarrollo de Internet, ha sido muy rpido en los ltimos aos).
nn Es potente: permite la POO (Programacin Orientada a Objetos).
nn Es barato: solo necesitamos un editor de textos y un navegador. Permite la programacin visual
(ventanas, botones, colores, formularios, etc.).
2 A qu lenguaje de programacin web complementa y ampla sus posibilidades?
A HTML
3 Qu ventajas tiene JavaScript con respecto a Java?
nn JavaScript es un lenguaje de programacin utilizado para aadir interactividad a las pginas web.
nn Java es un lenguaje de programacin de propsito general como lo son el C++ o el Visual Basic.
4 Busque alguna pgina en Internet con recursos en JavaScript para utilizarlos en sus webs.
5 Algunos navegadores por defecto bloquean el cdigo JavaScript, a qu puede deberse?

Cmo se habilita?
Al ser un lenguaje orientado al cliente, debido a errores de programacin, o incluso de forma intencionada,
podemos producir el ralentizaciones y llegar al bloqueo del equipo cliente.
Algunos navegadores como Internet Explorer bloquean por defecto el soporte de JavaScript en las pginas
web. Para poder activarlo debemos permitir el soporte de controles ActiveX en el navegador (JavaScript, JScript,
etc.) reduciendo la seguridad de nuestro navegador.
Solucin al test de conocimientos
Tabla 12.1 Soluciones al test

de conocimientos del captulo 12
1: e 2: e 3: d
4: d 5: c
170

GD Capitulo 12

Cargado por

Información del documento

Derechos de autor

Formatos disponibles

Compartir este documento

Compartir o incrustar documentos

Opciones para compartir

¿Le pareció útil este documento?

¿Este contenido es inapropiado?

Copyright:

Formatos disponibles

GD Capitulo 12

Cargado por

Copyright:

Formatos disponibles

Programacin de documentos

12 web utilizando lenguajes de

Objetivos del captulo

Presentacin del captulo

12.1 DIFERENCIAS ENTRE LA EJECUCIN EN LADO DEL CLIENTE Y DEL SERVIDOR

Tiempo estimado de duracin

Actividades de enseanza y aprendizaje

En el desarrollo de este captulo se podrn realizar las siguientes actividades:

nn Introduccin de los contenidos del captulo.

nn Introduccin al lenguaje JavaScript

Actividades e instrumentos de evaluacin

Actividades 12.1 Aadir al ejemplo1 las siguientes caractersticas:

<td>Nombre</td><td><input type=text name=nombre></td>

<body onLoad=alert(estás en mi página web)

1 Por qu cree que se usa tanto hoy en da JavaScript?

2 A qu lenguaje de programacin web complementa y ampla sus posibilidades?

3 Qu ventajas tiene JavaScript con respecto a Java?

5 Algunos navegadores por defecto bloquean el cdigo JavaScript, a qu puede deberse?

Solucin al test de conocimientos

Tabla 12.1 Soluciones al test

También podría gustarte

GD Capitulo 12

Cargado por

Información del documento

Derechos de autor

Formatos disponibles

Compartir este documento

Compartir o incrustar documentos

Opciones para compartir

¿Le pareció útil este documento?

¿Este contenido es inapropiado?

Copyright:

Formatos disponibles

GD Capitulo 12

Cargado por

Copyright:

Formatos disponibles

Programacin de documentos

12 web utilizando lenguajes de

Objetivos del captulo

Presentacin del captulo

12.1 DIFERENCIAS ENTRE LA EJECUCIN EN LADO DEL CLIENTE Y DEL SERVIDOR

Tiempo estimado de duracin

Actividades de enseanza y aprendizaje

En el desarrollo de este captulo se podrn realizar las siguientes actividades:

nn Introduccin de los contenidos del captulo.

nn Introduccin al lenguaje JavaScript

Actividades e instrumentos de evaluacin

Actividades 12.1 Aadir al ejemplo1 las siguientes caractersticas:

<td>Nombre</td><td><input type=text name=nombre></td>

<body onLoad=alert(est&aacute;s en mi p&aacute;gina web)

1 Por qu cree que se usa tanto hoy en da JavaScript?

2 A qu lenguaje de programacin web complementa y ampla sus posibilidades?

3 Qu ventajas tiene JavaScript con respecto a Java?

5 Algunos navegadores por defecto bloquean el cdigo JavaScript, a qu puede deberse?

Solucin al test de conocimientos

Tabla 12.1 Soluciones al test

También podría gustarte

<body onLoad=alert(estás en mi página web)