3.

PROGRAMACIÓN DEL LADO DEL CLIENTE

Conoce y aplica un lenguaje de
programación del lado del cliente,
para la construcción de aplicaciones
web dinámicas, considerando
Frameworks ya existentes.
3. PROGRAMACIÓN DEL LADO DEL CLIENTE
3.1 Introducción al lenguaje.
3.2 Manejo de Frameworks.
3.3 Estructuras de Control.
3.4 Manipulación de objetos.
4 PROGRAMACIÓN DEL LADO DEL CLIENTE
Actovodad Valor
Examen Teórico 20%
Proyecto Integrador 20%
Reporte de prácticas con estilos CSS. 20%
Reporte de prácticas con JavaScript 20%
Proyecto individual 20%
 4.1 LENGUAJE SCRIPT DEL CLIENTE.
• El navegador es una especie de aplicación capaz de
interpretar las órdenes recibidas en forma de código
HTML fundamentalmente y convertirlas en las páginas que
son el resultado de dicha orden.
• Cuando nosotros pinchamos sobre un enlace hipertexto, en
realidad lo que pasa es que establecemos una petición
de un archivo HTML residente en el servidor (un
ordenador que se encuentra continuamente conectado a
la red) el cual es enviado e interpretado por nuestro
navegador (el cliente).
 4.1 LENGUAJE SCRIPT DEL CLIENTE.
Así pues, podemos hablar de lenguajes de lado servidor que son aquellos
lenguajes que son reconocidos, ejecutados e interpretados por el propio
servidor y que se envían al cliente en un formato comprensible para él. Por
otro lado, los lenguajes de lado cliente (entre los cuales no sólo se
encuentra el HTML sino también el Java y el Java Script los cuales son
simplemente incluidos en el código HTML) son aquellos que pueden ser
directamente “digeridos” por el navegador y no necesitan un
pretratamiento. Cada uno de estos tipos tiene por supuesto sus ventajas y
sus inconvenientes. Así, por ejemplo, un lenguaje de lado cliente es
totalmente independiente del servidor, lo cual permite que la página
pueda ser albergada en cualquier sitio sin necesidad de pagar más ya
que, por regla general, los servidores que aceptan páginas con scripts de
lado servidor son en su mayoría de pago o sus prestaciones son muy
limitadas. Inversamente, un lenguaje de lado servidor es independiente del
cliente por lo que es mucho menos rígido respecto al cambio de un
navegador a otro o respecto a las versiones del mismo.
 4.1 LENGUAJE SCRIPT DEL CLIENTE.
Lenguajes del lado cliente
HTML
El lenguaje llamado HTML indica al navegador donde colocar cada texto, cada imagen
o cada video y la forma que tendrán estos al ser colocados en la página.
Elel lenguaje consta de etiquetas que tienen esta forma <B> o <P>. Cada etiqueta
significa una cosa, por ejemplo <B> significa que se escriba en negrita (bold) o <P>
significa un párrafo, <A> es un enlace, etc. Casi todas las etiquetas tienen su
correspondiente etiqueta de cierre, que indica que a partir de ese punto no debe de
afectar la etiqueta. Por ejemplo </B> se utiliza para indicar que se deje de escribir en
negrita. Así que el HTML no es más que una serie de etiquetas que se utilizan para
definir la forma o estilo que queremos aplicar a nuestro documento. <B>Esto está en
negrita</B>. Esta página es un claro ejemplo de uso del HTML.
 4.1 LENGUAJE SCRIPT DEL CLIENTE.
Lenguajes del lado cliente
HTML5

En 2006, el W3C indicó su interés de participar en el desarrollo de HTML5, después de todo, y

en 2007 formó un grupo de trabajo contratado para trabajar con el WHATWG en el
desarrollo de la especificación HTML5.Apple, Mozilla y Opera permitieron que el W3C para
publicar la especificación bajo el copyright W3C, manteniendo una versión con la licencia
menos restrictiva en el sitio WHATWG.

Evolución de XHTML y HTML 4.01

HTML5 está en proceso de estandarización
Publicación oficial en 2014
Casi todos los navegadores soportan casi todas sus
características • Pero no todos:
 4.1 LENGUAJE SCRIPT DEL CLIENTE.
Lenguajes del lado cliente
JAVASCRIPT
Javascript es un lenguaje de programación utilizado para crear pequeños programitas
encargados de realizar acciones dentro del ámbito de una página web. Se trata de un
lenguaje de programación del lado del cliente, porque es el navegador el que soporta
la carga de procesamiento. Su uso se basa fundamentalmente en la creación de efectos
especiales en las páginas y la definición de interactividades con el usuario.
Las sentencias escritas en javascript se encapsulan entre las etiquetas <script> y
</script>. por ejemplo, si en el código de una página Web incluimos la sentencia
<script>
window.alert(“Bienvenido a mi sitio web. Gracias…”) </script>
al abrir la página con el navegador se nos mostrará una ventana de bienvenida
 4.1 LENGUAJE SCRIPT DEL CLIENTE.
Lenguajes del lado cliente
VISUAL BASIC SCRIPT
Es un lenguaje de programación de scripts del lado del cliente, pero sólo compatible con Internet Explorer. Es por
ello que su utilización está desaconsejada a favor de Javascript.
Está basado en Visual Basic, un popular lenguaje para crear aplicaciones Windows. Tanto su sintaxis como la
manera de trabajar están muy inspirados en él. Sin embargo, no todo lo que se puede hacer en Visual Basic lo
podremos hacer en Visual Basic Script, pues este último es una versión reducida del primero.
El modo de funcionamiento de Visual Basic Script para construir efectos especiales en páginas web es muy similar
al utilizado en Javascript y los recursos a los que se puede acceder también son los mismos: el navegador.
 4.1 LENGUAJE SCRIPT DEL CLIENTE.
Lenguajes del lado cliente
CSS
CSS, es una tecnología que nos permite crear páginas web de una manera más exacta. Gracias a las CSS somos
mucho más dueños de los resultados finales de la página, pudiendo hacer muchas cosas que no se podía hacer
utilizando solamente HTML, como incluir márgenes, tipos de letra, fondos, colores… Incluso podemos definir
nuestros propios estilos en un archivo externo a nuestras páginas; así, si en algún momento queremos cambiar
alguno de ellos, automáticamente se nos actualizarán todas las páginas vinculadas de nuestro sitio.
CSS son las siglas de Cascading Style Sheets, en español Hojas de estilo en Cascada.
4.1 LENGUAJE SCRIPT DEL CLIENTE.

Al crear páginas web en HTML nos damos cuenta de que estamos ciertamente restringidos a sólo poder
emplear elementos estáticos.
Hay dos soluciones a este problema, con el fin de dotar a nuestras páginas de un mayor dinamismo e
interactividad, que pasan por añadir programación o bien en la parte del cliente, o bien en la parte del
servidor. Del segundo, programas en el cliente no hablaremos en este curso, pero básicamente, lo que nos
permite es conectar nuestra web a una base de datos, de modo que los contenidos de las páginas varíen en
función de la información almacenada en la base de datos. En cuanto a añadir programación en la parte del
cliente es lo que se trata en este tema: JavaScript.
 4.1 LENGUAJE SCRIPT DEL CLIENTE.
JavaScript es un sencillo lenguaje de programación, que presenta una
característica especial: sus programas, llamados comúnmente scripts, se en las páginas
HTML y se ejecutan en el navegador (Netscape Navigator y Microsft Explorer). Estos
scripts normalmente consisten en unas funciones que son llamadas desde el propio
HTML cuando algún evento sucede. De ese modo, podemos añadir efectos como que un botón cambie de forma al
pasar el ratón por encima, o abrir una ventana nueva al pulsar en un enlace, ...
 4.1 LENGUAJE SCRIPT DEL CLIENTE.
JavaScript fue desarrollado por Netscape, a partir del lenguaje
Java, el cual sigue una filosofía similar, aunque va más allá.
Java es un lenguaje de programación por sí
mismo, como lo puedan ser C, Pascal o VisualBasic. Esto quiere
decir, que se puede ejecutar un programa Java fuera de un
navegador. Se hablará más sobre Java en posteriores temas.
Pero, repetimos, que la diferencia fundamental es que Java es
un lenguaje completo, que puede ser utilizado para crear
aplicaciones de todo tipo, mientras que JavaScript sólo
“funciona” dentro de una página HTML. Por otro lado,
también se puede incluir Java en páginas HTML, tal es el caso
de los applets, que se podría traducir como “aplicacioncitas”.
 4.2 MODELO DE OBJETOS CON LENGUAJE SCRIPT.
Script tag es el tag primario que identifica Javascript. Cualquier código Javascript debe ser escrito entre estos
script tags:

<script language="javascript">
</script>

Aquí el atributo de lenguaje define el lenguaje usado. Para usuarios VBScript, será vbscript.
El script tag, puede ser escrito en cualquier lugar dentro del head (cabecera) o body tag ( cuerpo) del HTML .
COMENTARIOS
Realiza una página que contenga código JavaScript para escribir en el documento directamente el mensaje
“Hola a todos”. Introduce comentarios en el código JavaScript haciendo uso de los símbolos siguientes // y /*.
Repetir la página utilizando una función para escribir el texto, que se invoque cuando se entra en la página
(onLoad).
 VARIABLES
Las variables en los lenguajes de programación siguen una lógica similar a las variables utilizadas en otros ámbitos
como las matemáticas. Una variable es un elemento que se emplea para almacenar y hacer referencia a otro valor.
Gracias a las variables es posible crear "programas genéricos", es decir, programas que funcionan siempre igual
independientemente de los valores concretos utilizados.

Las variables en JavaScript se crean mediante la palabra reservada var. De esta forma, el ejemplo anterior se puede
realizar en JavaScript de la siguiente manera:

var numero_1 = 3;
var numero_2 = 1;
var resultado = numero_1 + numero_2;
 VARIABLES
El nombre de una variable también se conoce como identificador y debe cumplir las siguientes normas:
Sólo puede estar formado por letras, números y los símbolos $ (dólar) y _ (guión bajo).
El primer carácter no puede ser un número.
 Todos los identificadores de JavaScript son sensibles a minúsculas y mayúsculas

Las variables lastName and lastname, son diferentes

lastName = "Doe";
lastname = "Peterson";
 TIPOS DE VARIABLES
Numéricas
Se utilizan para almacenar valores numéricos enteros (llamados integer en inglés) o decimales
(llamados float en inglés). En este caso, el valor se asigna indicando directamente el número entero o
decimal. Los números decimales utilizan el carácter . (punto) en vez de , (coma) para separar la parte entera
y la parte decimal:
var iva = 16; // variable tipo entero
var total = 234.65; // variable tipo decimal

Cadenas de texto
Se utilizan para almacenar caracteres, palabras y/o frases de texto. Para asignar el valor a la variable, se
encierra el valor entre comillas dobles o simples, para delimitar su comienzo y su final:
var mensaje = "Bienvenido a nuestro sitio web";
var nombreProducto = 'Producto ABC';
var letraSeleccionada = 'c';
 TIPOS DE VARIABLES
Booleanos
Las variables de tipo boolean o booleano también se conocen con el nombre de variables de tipo lógico.
Aunque para entender realmente su utilidad se debe estudiar la programación avanzada con JavaScript del
siguiente capítulo, su funcionamiento básico es muy sencillo.
Una variable de tipo boolean almacena un tipo especial de valor que solamente puede tomar dos
valores: true (verdadero) o false (falso). No se puede utilizar para almacenar números y tampoco permite
guardar cadenas de texto.

Los únicos valores que pueden almacenar estas variables son true y false, por lo que no pueden utilizarse
los valores verdadero y falso. A continuación se muestra un par de variables de tipobooleano:

var clienteRegistrado = false; var ivaIncluido = true;

 ACTIVIDAD 1: VARIABLES
Elementos básicos del lenguaje JavaScript.
Practica: arreglos (practica_3_1_variables.html)
Indicaciones: Elaborar un documento HTML en que se incluya el siguiente código:
ACTIVIDAD 1: VARIABLES
 TIPOS DE VARIABLES
Arrays
En ocasiones, a los arrays se les llama vectores, matrices e incluso arreglos. No obstante, el término array es el más
utilizado y es una palabra comúnmente aceptada en el entorno de la programación.
Un array es una colección de variables, que pueden ser todas del mismo tipo o cada una de un tipo diferente. Su utilidad
se comprende mejor con un ejemplo sencillo: si una aplicación necesita manejar los días de la semana, se podrían crear
siete variables de tipo texto:
var dia1 = "Lunes";
var dia2 = "Martes"; ...
var dia7 = "Domingo";

En este tipo de casos, se pueden agrupar todas las variables relacionadas en una colección de variables o array. El
ejemplo anterior se puede rehacer de la siguiente forma:

var dias = ["Lunes", "Martes", "Miércoles", "Jueves", "Viernes", "Sábado", "Domingo"];

 TIPOS DE VARIABLES
Arrays

Ahora, una única variable llamada dias almacena todos los valores relacionados entre sí, en este caso los
días de la semana. Para definir un array, se utilizan los caracteres [ y ] para delimitar su comienzo y su final
y se utiliza el carácter , (coma) para separar sus elementos:

var nombre_array = [valor1, valor2, ..., valorN];

Una vez definido un array, es muy sencillo acceder a cada uno de sus elementos. Cada elemento se accede
indicando su posición dentro del array. La única complicación, que es responsable de muchos errores cuando
se empieza a programar, es que las posiciones de los elementos empiezan a contarse en el 0 y no en el 1:

var diaSeleccionado = dias[0]; // diaSeleccionado = "Lunes" var otroDia = dias[5]; //

otroDia = "Sábado"
ARREGLOS
Elementos básicos del lenguaje JavaScript.
 OPERADORES
Los operadores se dividen en:
operadores de asignación;
operadores aritméticos;
operadores relacionales;
operadores lógicos;
operadores sobre bit, que suelen utilizarse sólo para generar colores;
operadores cadenas.
 OPERADORES
Los operadores aritméticos son binarios o unitarios. Los operadores unitarios modifican el valor al que se aplican y
son:

Los operadores unitarios matemáticos pueden colocarse

antes (prefijos) odespués (sufijos) del operando y su valor varía
según esta posición, ya que eloperador prefijo modifica el
operando antes de utilizar su valor, mientras eloperador sufjo
modifica el operando después de haber utilizado el valor. Un
ejemplo puede facilitar la comprensión:
 OPERADORES
Los operadores binarios matemáticos no cambian el valor de los operandos, sino que memorizan el resultado en un
tercer operando. Incluyen las principales operaciones aritméticas:
 OPERADORES
Con operador relacional entendemos la relación que tiene un valor respecto a otro. Se basan en el concepto de
verdadero o falso y en todos los casos operan con sólo dos estados diversos (0/1, encendido/apagado,
verdadero/falso).
Los operadores relacionales son:
 OPERADORES
Los operadores lógicos son muy parecidos a los relacionales, en el sentido de que dan también como output sólo dos
valores que, en este caso, son: 0 si la expresión lógica es verdadera, 1 si es falsa.
Los operadores lógicos son (el NOT es un operador unitario):
 OPERADORES LOGICOS
Los operadores lógicos son comúnmente utilizados con valores booleanos; estos operadores
devuelven un valor booleano. Sin embargo, los operadores && y || realmente devuelven el
valor de uno de los operandos, asi que si estos operadores son usados con valores no
booleanos, podrían devolveran un valor no booleano. En la siguiente tabla se describen los
operadores lógicos:
 OPERADORES LOGICOS
Los operadores lógicos son comúnmente utilizados con valores booleanos; estos operadores
devuelven un valor booleano. Sin embargo, los operadores && y || realmente devuelven el
valor de uno de los operandos, asi que si estos operadores son usados con valores no
booleanos, podrían devolveran un valor no booleano. En la siguiente tabla se describen los
operadores lógicos:

Operador Uso Descripción

AND Lógico expr1 && Devuelve expr1 si puede ser convertido a false de lo contrario devuelve expr2.
(&&) expr2 Por lo tanto, cuando se usa con valores booleanos, && devuelve true si ambos
operandos son true, en caso contrario devuelve false.
OR Lógico expr1 || Devuelve expr1 si puede ser convertido a true de lo contrario devuelve expr2.
(||) expr2 Por lo tanto, cuando se usa con valores booleanos, || devuelve true si alguno de
los operandos es true, o false si ambos son false.
NOT Lógico !expr Devuelve false si su operando puede ser convertido a true, en caso contrario,
(!) devuelve true.
OPERADORES
 PRACTICA 2: OPERADORES
En un nuevo documento titularlo como practica-2-operadores.html. Copiar los
siguientes códigos sobre operadores.

El siguiente
código muestra
ejemplos del
operador !
(NOT Lógico).
 PRACTICA 2: OPERADORES
El siguiente
código muestra
ejemplos del
operador &&
(AND Lógico).

El siguiente código
muestra ejemplos del
operador || (OR
Lógico).
 ESTRUCTURAS DE CONTROL DE FLUJO
Los programas que se pueden realizar utilizando solamente variables y operadores son una simple sucesión
lineal de instrucciones básicas.
Para realizar este tipo de programas son necesarias
las estructuras de control de flujo, que son instrucciones del
tipo "si se cumple esta condición, hazlo; si no se cumple, haz esto
otro". También existen instrucciones del tipo "repite esto mientras
se cumpla esta condición".

Estructura if
La estructura más utilizada en JavaScript y en la mayoría de lenguajes de programación es la estructura if.
Se emplea para tomar decisiones en función de una condición. Su definición formal es:
 ESTRUCTURAS DE CONTROL DE FLUJO
Estructura if
La estructura más utilizada en JavaScript y en la mayoría de lenguajes de programación es la estructura if.
Se emplea para tomar decisiones en función de una condición. Su definición formal es:

if(condicion)
{ ... }

Ejemplo

var mostrarMensaje = true;

if(mostrarMensaje == true)
{ alert("Hola Mundo"); }
 ESTRUCTURAS DE CONTROL DE FLUJO
Estructura if...else
En ocasiones, las decisiones que se deben realizar no son del tipo "si se cumple la condición, hazlo; si no se cumple, no
hagas nada". Normalmente las condiciones suelen ser del tipo "si se cumple esta condición, hazlo; si no se cumple, haz esto
otro".

if(condicion) { ... } else {

... }

Ejemplo

var edad = 18;

if(edad >= 18)
{ alert("Eres mayor de edad"); }
else { alert("Todavía eres menor de edad"); }
 ESTRUCTURAS DE CONTROL DE FLUJO
Estructura for
a estructura for permite realizar este tipo de repeticiones (también llamadas bucles) de una forma muy sencilla. No
obstante, su definición formal no es tan sencilla como la de if():

for(inicializacion; condicion; actualizacion)

{ ... }

Ejemplo

var mensaje = "Hola, estoy dentro de un bucle";

for(var i = 0; i < 5; i++)
{ alert(mensaje); }
 ESTRUCTURAS DE CONTROL DE FLUJO
Estructura Case
En estos casos, la estructura
switch es la más eficiente, ya
que está especialmente
diseñada para manejar de
forma sencilla múltiples
condiciones sobre la misma
variable. Su definición formal
puede parecer compleja,
aunque su uso es muy sencillo:
 PRACTICA 3: ESTRUCTURAS DE CONTROL
En un nuevo documento titularlo
como practica-3-estructuras.html.
Copiar los siguientes códigos
sobre las estructuras de control.
PRACTICA 3: ESTRUCTURAS DE CONTROL
PRACTICA 3: ESTRUCTURAS DE CONTROL
PRACTICA 3: ESTRUCTURAS DE CONTROL
PRACTICA 3: ESTRUCTURAS DE CONTROL
 FUNCIONES
Las funciones son la base de la modularidad en JavaScript. Son utilizadas para reutilizar
código, ocultar información y abstracción. Por norma general, las funciones son utilizadas para
especificar el comportamiento de los objetos, aunque pueden definirse funciones al margen
de los objetos.
Las funciones en JavaScript se definen mediante la palabra reservada function, seguida del
nombre de la función. Su definición formal es la siguiente

Su definición formal es la siguiente:

function nombre_funcion() { ... }

FUNCIONES DECLARACIONES Y EXPRESIONES
En Javascript dos de las formas más habituales de usar funciones son :
Declaración de una función
Declaración de una expresión como función
Cada uno de estos tipos tiene un formato diferente:
 FUNCIONES DECLARACIONES Y EXPRESIONES
El compilador de Javascript realiza dos pasadas al código que tiene que interpretar para realizar todas las
optimizaciones posibles. La primera pasada revisa todas y cada una de las declaraciones, ya sean de
funciones o de variables . Por lo tanto si tenemos una función declarada como la siguiente:

function suma (a,b) { return a+b; }

<html> Por eso aunque en JavaScript

Será alcanzada en la
primera revisión del código.
Esta revisión convertirá la
declaración en una
expresión y ubicará la
expresión al principio del
código. De tal forma que si
en un primer momento
teníamos este código:
<head> hagamos uso de una función
<script type="text/javascript"> antes de declararla el código
console.log(suma(2,2)); El motor de Javascript para el compilador sigue
function suma (a,b) { lo convertirá en este siendo válido.
return a+b; otro después de
realizar la primera
} optimización:
</script>
</head>
<body>
</body>
</html>
 FUNCIONES
La llamada a la función se realiza simplemente indicando su nombre, incluyendo los paréntesis
del final y el carácter ; para terminar la instrucción:

function suma_y_muestra()
{ resultado = numero1 + numero2;
alert("El resultado es " + resultado); }
var resultado;
var numero1 = 3;
var numero2 = 5;
suma_y_muestra();
ARGUMENTOS Y VALORES DE RETORNO
Las funciones más sencillas no necesitan ninguna información para producir sus resultados. Sin
embargo, la mayoría de funciones de las aplicaciones reales deben acceder al valor de
algunas variables para producir sus resultados.
Las variables que necesitan las funciones se llaman argumentos. Antes de que pueda
utilizarlos, la función debe indicar cuántos argumentos necesita y cuál es el nombre de cada
argumento. Además, al invocar la función, se deben incluir los valores que se le van a pasar a
la función. Los argumentos se indican dentro de los paréntesis que van detrás del nombre de
la función y se separan con una coma (,).
ARGUMENTOS Y VALORES DE RETORNO
Siguiendo el ejemplo anterior, la función debe indicar que necesita dos argumentos, correspondientes a los dos
números que tiene que sumar:

function suma_y_muestra(primerNumero, segundoNumero) { ... }

A continuación, para utilizar el valor de los argumentos dentro de la función, se debe emplear el mismo nombre con
el que se definieron los argumentos:

function suma_y_muestra(primerNumero, segundoNumero)

{ ... }
var resultado = primerNumero + segundoNumero;
alert("El resultado es " + resultado); }
ARGUMENTOS Y VALORES DE RETORNO
Dentro de la función, el valor de la variable primerNumero será igual al primer valor que se le pase a la función y
el valor de la variable segundoNumero será igual al segundo valor que se le pasa. Para pasar valores a la función,
se incluyen dentro de los paréntesis utilizados al llamar a la función:

// Definición de la función
function suma_y_muestra(primerNumero, segundoNumero)
{
var resultado = primerNumero + segundoNumero;
alert("El resultado es " + resultado); }
// Declaración de las variables
var numero1 = 3;
var numero2 = 5;
// Llamada a la función suma_y_muestra(numero1, numero2);
 ARGUMENTOS Y VALORES DE RETORNO
A continuación se muestra otro ejemplo de una función que calcula el precio total de un producto a partir de su
precio básico:

/ Definición de la función
function calculaPrecioTotal(precio)
{
var impuestos = 1.16;
var gastosEnvio = 10;
var precioTotal = ( precio * impuestos ) + gastosEnvio;
} // Llamada a la función
calculaPrecioTotal(23.34);
 ARGUMENTOS Y VALORES DE RETORNO
No obstante, el código anterior no es demasiado útil, ya que lo ideal sería que la función pudiera devolver el
resultado obtenido para guardarlo en otra variable y poder seguir trabajando con este precio total:

function calculaPrecioTotal(precio)
{ var impuestos = 1.16;
var gastosEnvio = 10;
var precioTotal = ( precio * impuestos ) + gastosEnvio;
return precioTotal; }

var precioTotal = calculaPrecioTotal(23.34);

 PRACTICA 4:
FUNCIONES
En un nuevo documento titularlo
como practica-4-funciones.html
Copiar los siguientes códigos
sobre las funciones.
 4.3 OBJETOS LENGUAJE SCRIPT ÍNTER CONSTRUIDOS.
Una primera clasificación del modelo de objetos lo dividiría en dos grandes grupos. Por una parte, tendríamos los
objetos directamente relacionados con el navegador y las posibilidades de programación HTML (denominados,
genéricamente, objetos del navegador) y por otra parte un conjunto de objetos relacionados con la estructura del
lenguaje, llamados genéricamente objetos del lenguaje.

Las clases que se encuentran disponibles de manera nativa en Javascript, y que vamos a ver a
continuación, son las siguientes:
String, para el trabajo con cadenas de caracteres.
Date, para el trabajo con fechas.
Math, para realizar funciones matemáticas.
Number, para realizar algunas cosas con números
Boolean, trabajo con boleanos.
 4.4 EVENTOS CON LENGUAJE SCRIPT.
1. Eventos en JavaScript
En JavaScript, la interacción con el usuario se consigue mediante la captura de los eventos que éste produce. Un
evento es una acción del usuario ante la cual puede realizarse algún proceso (por ejemplo, el cambio del valor de
un formulario, o la pulsación de un enlace).
Los eventos se capturan mediante los manejadores de eventos. El proceso a realizar se programa mediante
funciones JavaScript llamadas por los manejadores de eventos.
La siguiente tabla muestra los manejadores de eventos que pueden utilizarse en JavaScript, la versión a partir de
la cual están soportados y su significado.

La siguiente tabla resume los

eventos más importantes
definidos por JavaScript:
Evento Descripción Elementos para los que está definido
onblur Deseleccionar el elemento <button>, <input>, <label>, <select>, <textarea>, <body>
onchange Deseleccionar un elemento que se ha modificado <input>, <select>, <textarea>
onclick Pinchar y soltar el ratón Todos los elementos
ondblclick Pinchar dos veces seguidas con el ratón Todos los elementos
onfocus Seleccionar un elemento <button>, <input>, <label>, <select>, <textarea>, <body>
onkeydown Pulsar una tecla (sin soltar) Elementos de formulario y <body>
onkeypress Pulsar una tecla Elementos de formulario y <body>
onkeyup Soltar una tecla pulsada Elementos de formulario y <body>
onload La página se ha cargado completamente <body>
onmousedown Pulsar (sin soltar) un botón del ratón Todos los elementos
onmousemove Mover el ratón Todos los elementos
onmouseout El ratón "sale" del elemento (pasa por encima de otro elemento) Todos los elementos

onmouseover El ratón "entra" en el elemento (pasa por encima del elemento) Todos los elementos
onmouseup Soltar el botón que estaba pulsado en el ratón Todos los elementos
onreset Inicializar el formulario (borrar todos sus datos) <form>
onresize Se ha modificado el tamaño de la ventana del navegador <body>
onselect Seleccionar un texto <input>, <textarea>
onsubmit Enviar el formulario <form>
onunload Se abandona la página (por ejemplo al cerrar el navegador) <body>
4.4 EVENTOS CON LENGUAJE SCRIPT.
Manejadores de eventos como atributos XHTML
Se trata del método más sencillo y a la vez menos profesional de indicar el código JavaScript que se debe ejecutar
cuando se produzca un evento. En este caso, el código se incluye en un atributo del propio elemento XHTML. En el
siguiente ejemplo, se quiere mostrar un mensaje cuando el usuario pinche con el ratón sobre un botón:

<input type="button" value="Pinchame y verás" onclick="alert('Gracias por

pinchar');" />

En este otro ejemplo, cuando el usuario pincha sobre el elemento <div> se muestra un mensaje y
cuando el usuario pasa el ratón por encima del elemento, se muestra otro mensaje:

<div onclick="alert('Has pinchado con el ratón');" onmouseover="alert('Acabas de

pasar el ratón por encima');"> Puedes pinchar sobre este elemento o simplemente
pasar el ratón por encima </div>
 4.4 EVENTOS CON LENGUAJE SCRIPT.
Manejadores de eventos como funciones externas
La definición de los manejadores de eventos en los atributos XHTML es el método más sencillo pero menos aconsejable
de tratar con los eventos en JavaScript. El principal inconveniente es que se complica en exceso en cuanto se añaden
algunas pocas instrucciones, por lo que solamente es recomendable para los casos más sencillos.
Si se realizan aplicaciones complejas, como por ejemplo la validación de un formulario, es aconsejable agrupar todo
el código JavaScript en una función externa y llamar a esta función desde el elemento XHTML.

function muestraMensaje()
{ alert('Gracias por pinchar'); }
<input type="button" value="Pinchame y verás"
onclick="muestraMensaje()" />
 PRACTICA 5: EVENTOS
En un nuevo documento
titularlo como
practica-5-
eventos.html
Copiar los siguientes
códigos sobre las
funciones.
PRACTICA 6: EVENTOS
PRACTICA 6: EVENTOS
 4.5 VALIDACIÓN DE ENTRADA DE DATOS DEL LADO DEL
CLIENTE.
Una de las grandes aportaciones de JavaScript a la creación de

.
interfaces web es la posibilidad de acceder al contenido de los campos
de los formularios para realizar acciones sobre los valores introducidos
por el usuario, modificarlos y, en última instancia, validarlos. La
validación de los datos de un formulario mediante scripts JavaScript no
sustituye a la validación que debe realizarse, por motivos de seguridad,
en la aplicación del servidor que recibe la información. Sin embargo, al
añadir una validación local con JavaScript, la experiencia de usuario
mejora notablemente, al no ser necesario enviar los datos al servidor y
esperar su respuesta para obtener sólo un mensaje informando de la
incorrección de la información suministrada. Resulta frustrante
cumplimentar un formulario, pulsar el botón enviar, y esperar 30 o 40
segundos para saber que hemos introducido mal un campo.
 4.5 VALIDACIÓN DE ENTRADA DE DATOS DEL LADO DEL
CLIENTE.
JavaScript, desde sus comienzos, introdujo los mecanismos necesarios para validar campos de formulario. Estas son
algunas de las validaciones típicas:

Comprobar que se han suministrado todos los campos obligatorios

Comprobar que el formato de un campo es el esperado (fechas, teléfonos, etc.)
Comprobar la validez (sintáctica) de las direcciones de correo y URLs
Comprobar que no se sobrepasa la longitud, número de líneas o tamaño de la entrada
4.6 CONSIDERACIONES DEL SOPORTE DEL
NAVEGADOR.
Existen unos organismos que definen cómo deben de ser interpretados lenguajes
como HTML, CSS o Javascript.
A veces las interpretaciones son distintas por parte de las empresas desarrolladoras
de software, o incluso estas se permiten el lujo de crear nuevas etiquetas o
funcionalidades, incluso decidir cuáles soportan.
4.6 CONSIDERACIONES DEL SOPORTE DEL
NAVEGADOR.
En las aplicaciones Web se deben considerar los
diferentes navegadores que los usuarios usarán para
acceder a la aplicación.

La aplicación se debe probar con los navegadores más

frecuentes, con el propósito de comprobar la correcta
visualización y funcionamiento de las páginas.
 PRACTICA 6: VALIDACIÓN
En un nuevo documento
titularlo como
practica-6-
validacion.html
Copiar los siguientes
códigos sobre las
funciones.