Anda di halaman 1dari 14

Tema 02: Lenguajes script de lado del cliente web

BIENVENIDA
Apreciado estudiante, iniciemos con muchas ansias de aprender nuestro segundo tema de estudio,
los contenidos que a continuacin leers te brindar los conocimientos para programas rutinas que
se ejecuten en el navegador (cliente web).
Introduccin al Tema
El desarrollo de aplicaciones web ha permitido ofrecer a los
usuarios de Internet los servicios que buscan, los cuales pueden
ser de acceso pblico o privado, de acuerdo a los requerimientos
establecidos por las instituciones o empresas.En este contexto los
lenguajes de lado del cliente cumplen una funcion importante,
pues permiten ejecutar rutinas en el navegador, disminuyendo
considerablemente la velocidad de las operaciones de una
aplicacin web.

Aprendizajes Esperados
Conozcamos ahora las capacidades y actitudes a desarrollar en este tema:
Capacidad
Escribe rutinas utilizando JavaScript para su ejecucin en el navegador o cliente web.
Aplica adecuadamente las rutinas para optimizar la ejecucin de las operaciones de una
aplicacin web.
Actitudes
Asume una actitud responsable respecto a su labor investigativa acerca de los lenguajes
del lado del cliente.
Participa activamente a travs de sus consultas referentes a los temas estudiados.

Esquema Grfico
Observa detenidamente el siguiente esquema, en el encontrars de un vistazo de manera
sintetizada los principales concepto de la temtica que abordaremos. Qu conceptos o categoras
te llaman la atencin?

Fuente: elaboracin propia

2.1. JavaScript.
JavaScript, es un lenguaje que surge como complemento ideal a
HTML, permite darle a HTML el dinamismo a nivel de navegador
que necesita un desarrollador y diseador para darle un valor
agregado al simple HTML que toda pgina web contiene. Es
importante indicar que a diferencia de Java, el lenguaje
JavaScript no genera archivos binarios o ejecutables pues no es
un lenguaje de programacin propiamente dicho, sino que es un
lenguaje script orientado a documentos web, muy similar a las
macros en la suite de MS Office.
A partir de ahora el cdigo fuente que se mostrar deber incluirse en
la seccin HEAD de la pgina web, y los objetos HTML que invocarn
a las rutinas programadas estarn en la seccin BODY, como se
muestra en el siguiente ejemplo:
<HTML>
<HEAD>

<SCRIPT LANGUAGE="JavaScript">

Aqu escribiremos el cdigo fuente de Java Script


</SCRIPT>
</HEAD>
<BODY>

Aqu el contenido de la pgina


web
</BODY>
</HTML>
Como primer ejemplo, utilizaremos la funcin alert, la que nos mostrar un mensaje en la pgina web que
construiremos.
function HolaPEaD() {
alert("Hola, este es un mensaje de prueba. PEaD USS!");
}
Para invocar a la function, incluiremos un botn HTML.
<form>
<input type="button" id=boton name=boton value="Click aqui para probar la funcin"
onClick="HolaPEaD()">
</form>
Ahora veremos el resultado en la siguiente imagen:

Despus de haber presionado el botn, se puede observar a siguiente imagen:

2.2. Elementos Bsicos.


En JavaScript se puede usar arreglos para el almacenamiento de datos.
MiArreglo = ["dato 1", "dato 2", "otro dato"];
alert(MiArreglo[0] + MiArreglo[1] + MiArreglo[2] );
Resultado:

A las cadenas que se imprimen tambin se le pueden agregar caracteres especiales:

Carcter

Significado
Nueva lnea
Tabulador

\'

Comilla simple

\"

Comilla doble

\\

Barra invertida

Basndonos en el ejemplo anterior, tenemos a cada dato en una lnea diferente:


MiArreglo = ["dato 1", "dato 2", "otro dato"];
alert(MiArreglo[0] + " "+ MiArreglo[1] + " "+MiArreglo[2] );

2.3. Operadores.
JavaScript tiene una gran variedad de operadores, entre ellos, los aritmticos, de comparacin,
lgicos, de asignacin, etc.
Operadores aritmticos
Descripcin

Smbolo Expresin de ejemplo Resultado del ejemplo

Multiplicacin

2*5

10

Divisin

5/2

2.5

Resto de una divisin entera %

5%2

Suma

2+5

Resta

7-2

Incremento

++

++2

Decremento

--

--2

Menos unario

-(2+4)

-6

Operadores de comparacin
Descripcin

Smbolo Expresin de ejemplo Resultado del ejemplo

Igualdad

==

2 == '2'

Verdadero

Desigualdad

!=

2 != 2

Falso

Igualdad estricta

===

2 === '2'

Falso

Desigualdad estricta !==

2 !== 2

Falso

Menor que

<

2<2

Falso

Mayor que

>

3>2

Verdadero

Menor o igual que

<=

2 <= 2

Verdadero

Mayor o igual que

>=

1 >= 2

Falso

Operadores lgicos
Descripcin Smbolo Expresin de ejemplo Resultado del ejemplo
Negacin

!(2 = 2)

Falso

&&

(2 = 2) && (2 >= 0)

Verdadero

||

(2 = 2) || (2 <> 2)

Verdadero

Operadores de asignacin
Operador Significado Operador Significado
x += y

x=x+y

x -= y

x=x-y

x /= y

x=x/y

x *= y

x=x*y

x%y

x=x%y

Para tratar con objetos disponemos de tres operadores:

Descripcin

Smbolo

Expresin de ejemplo

Resultado del ejemplo

Crear un objeto

new

a = new Array()

a es ahora un vector

Borrar un objeto

delete

delete a

Elimina el vector anteriormente


creado

Referencia al objeto actual

this

this se suele utilizar en el cdigo de los mtodos de un objeto para referirse a otros mtodos o a
propiedades de su mismo objeto.
2.4. Estructuras de control.
Bifurcaciones condicionales
Una bifurcacin condicional en una estructura que realiza una tarea u otra dependiendo del
resultado de evaluar una condicin. La primera que vamos a estudiar es la estructura if...else. Esta
estructura es la ms sencilla y antigua de todas:
a=5;
b=7;
if (a>b)
alert(a es mayor que b);
else
alert(a no es mayor que b);
Bucles
Un bucle es una estructura que permite repetir una tarea un nmero de veces, determinado por
una condicin. Para hacer bucles podemos utilizar las estructuras while y do...while. Estos bucles
iteran indefinidamente mientras se cumpla una condicin. La diferencia entre ellas es que la
primera comprueba dicha condicin antes de realizar cada iteracin y la segunda lo hace despus:
var numero=0;
while (numero==1) {
alert('Soy un while');
}
do {
alert('Soy un do...while');
} while (numero==1);
En Javascript, el bucle for es singularmente potente. No se reduce a casos numricos como en
muchos otros lenguajes sino que nos da mucha ms libertad. Tiene la siguiente estructura:
for (inicio; condicin; incremento)
cdigo
Estructuras de manejo de objetos
JavaScript dispone de dos bien distintas. La primera es el bucle for...in, que nos permitir recorrer
todas las propiedades de un objeto. Se usa principalmente con vectores. Por ejemplo:
var vector = [1, 2, 2, 5];
for (i in vector)

vector[i] += 2;
Este ejemplo sumara dos a todos los elementos del vector. Sin embargo, conviene tener cuidado
ya que, de los navegadores de Microsoft, slo la versin 5 lo soporta.
La otra estructura es with, que nos permitir una mayor comodidad cuando tengamos que tratar
con muyas propiedades de un mismo objeto. En lugar de tener que referirnos a todas ellas con un
objeto.propiedad podemos hacer:
with (objeto) {
propiedad1 = ...
propiedad2 = ...
...
}
2.5. Objetos.
Un objeto es una estructura que contiene tanto variables (llamadas propiedades) como las
funciones que manipulan dichas variables (llamadas mtodos).
A partir de esta estructura se ha creado un nuevo modelo de programacin (la programacin
orientada a objetos) que atribuye a los objetos propiedades como herencia o polimorfismo.
Como veremos, JavaScript simplifica en algo este modelo.
Creacin mediante constructores
Un constructor es una funcin que inicializa un objeto. Cuando creamos un objeto nuevo del tipo
que sea, lo que hacemos en realidad es llamar al constructor pasndole argumentos. Por ejemplo,
si creamos un objeto Array de esta manera:
vector = new Array(9);
En realidad, estamos llamando a un constructor llamado Array que admite un parmetro. Sera
algo as:
function Array(longitud) {
...
}
Vamos a crear nuestro primero objeto. Supongamos que queremos codificar en Javascript una
aplicacin que lleve nuestra biblioteca de libros tcnicos de Informtica. Para lograrlo, crearemos
un objeto Libro que guarde toda la informacin de cada libro. Este sera el constructor:
function Libro(titulo, autor, tema) {
this.titulo = titulo;
this.autor = autor;
this.tema = tema;
}
Como vemos, accederemos a las propiedades y mtodos de nuestros objetos por medio de la
referencia this. Ahora podemos crear y acceder a nuestros objetos tipo Libro:
miLibro = new Libro("JavaScript Bible", "Danny Goodman", "JavaScript");
alert(miLibro.autor);
Los mtodos tambin podemos incluirlos de la siguiente forma:
function escribirLibro() {

alert("El libro " + this.titulo + " de " + this.autor +


" trata sobre " + this.tema);
}
Para incluirlo en nuestro objeto aadimos la siguiente lnea a nuestra funcin constructora:
this.escribir = escribirLibro;
Y podremos acceder al mismo de la manera normal:
miLibro.escribir();
Objetos predefinidos
Objeto Array
Como dijimos antes, este objeto permite crear vectores. Se inicializa de cualquiera de las
siguientes maneras:
vector = new Array(longitud);
vector = new Array(elemento1, elemento2, ..., elementoN);
En el primer caso crearemos un vector con el nmero especificado de elementos, mientras que en
el segundo tendremos un vector que contiene los elementos indicados y de longitud N. Para
acceder al mismo debemos recordar que el primero elemento es el nmero cero.
El objeto Array tiene, entre otros, los siguientes mtodos y propiedades:
length: Propiedad que contiene el nmero de elementos del vector.
sort(funcionComparacion): Ordena los elementos del vector alfabticamente. Si se aade una
funcin de comparacin como parmetro los ordenar utilizando sta. Dicha funcin debe aceptar
dos parmetros y devolver 0 si son iguales, menor que cero si el primer parmetro es menor que el
segundo y mayor que cero si es al revs.
Objeto Date
Este objeto nos permitir manejar fechas y horas. Se invoca as:
fecha = new Date();
fecha = new Date(ao, mes, dia);
fecha = new Date(ao, mes, dia, hora, minuto, segundo);
Objeto Math
Es un objeto contenedor de diversas constantes (como Math.E y Math.PI) y los siguientes mtodos
matemticos:

Mtodo

Descripcin

Expresin de
ejemplo

Resultado del
ejemplo

Abs

Valor absoluto

Math.abs(-2)

sin, cos,
tan

Funciones trigonomtricas, reciben el


argumento en radianes

Math.cos(Math.PI)

-1

asin, acos,
atan

Funciones trigonomtricas inversas

Math.asin(1)

1.57

exp, log

Exponenciacin y logaritmo, base E

Math.log(Math.E)

Ceil

Devuelve el entero ms pequeo mayor o


igual al argumento

Math.ceil(-2.7)

-2

Floor

Devuelve el entero ms grande menor o


igual al argumento

Math.floor(-2.7)

-3

Round

Devuelve el entero ms cercano o igual al


argumento

Math.round(-2.7)

-3

min, max

Devuelve el menor (o mayor) de sus dos


argumentos

Math.min(2,4)

Pow

Exponenciacin, siendo el primer argumento


Math.pow(2,4)
la base y el segundo el exponente

16

Sqrt

Raz cuadrada

Math.sqrt(4)

Objeto String
Eventos
Un evento, como su mismo nombre indica, es algo que ocurre. Para que una rutina nuestra se
ejecute slo cuando suceda algo extrao deberemos llamarla desde un controlador de eventos.
Estos controladores se asocian a un elemento HTML y se incluyen as:
<input type="button" id=boton name=boton value="Ver Arreglo" onClick="HolaPEaD()">
Lista de eventos
Aqu tienes una pequea gua de eventos definidos en JavaScript.
Evento

Descripcin

Elementos que lo admiten

OnLoad

Terminar de cargarse una pgina

<BODY...>
<FRAMESET...>

OnUnLoad

Salir de una pgina (descargarla)

<BODY...><FRAMESET...>

onMouseOver Pasar el ratn por encima

<A HREF..>
<AREA...>

onMouseOut

Que el ratn deje de estar encima

<A HREF..>
<AREA...>

onSubmit

Enviar un formulario

<FORM...>

onClick

Pulsar un elemento

<INPUT TYPE="button, checkbox, link,


radio"...>

onBlur

Perder el cursor

<INPUT TYPE="text"...>
<TEXTAREA...>

OnChange

Cambiar de contenido o perder el


cursor

<INPUT TYPE="text"...>
<TEXTAREA...>

OnFocus

Conseguir el cursor

<INPUT TYPE="text"...>
<TEXTAREA...>

OnSelect

Seleccionar texto

<INPUT TYPE="text"...>
<TEXTAREA...>

Como ejemplo, vamos a hacer que una ventana aparezca automticamente en cuanto pasemos un
cursor por encima de un elemento <A> (e impidiendo, de paso, que quien est viendo la pgina
pueda hacer uso del mismo).
Eventos
<HTML>
<HEAD>
<SCRIPT LANGUAGE="JavaScript">
<!-- Los comentarios esconden el cdigo a navegadores sin JavaScript
function Alarma() {
alert("Se activo la funcin Alarma");
return true;
}
// -->
</SCRIPT>
</HEAD>
<BODY>
<A HREF="eventos.html" onMouseOver="Alarma()">
Pasa por aqu encima
</A>
</BODY>
</HTML>
Objeto Window
Es el objeto principal. Define la ventana sobre la que estamos trabajando e incluye los objetos
referentes a la barra de tareas, el documento o la secuencia de direcciones de la ltima sesin. En
este captulo veremos los mtodos y propiedades ms utilizadas, al menos por m, dejando el
estudio de dichos objetos para sus captulos correspondientes.
An cuando el objeto se llame Window, disponemos siempre de una referencia a l
llamada window (recuerde que Javascript distingue entre maysculas y minsculas). Ser con esa
referencia con la que trabajemos.
Por ltimo, indicar que en Javascript, se supone que todas las propiedades y mtodos que
llamamos sin utilizar ninguna referencia, en realidad se hacen utilizando esa referencia window.
As, por ejemplo, cuando ejecutamos el mtodo alert en realidad lo que estamos haciendo es
ejecutar el mtodo window.alert.
[Variable=][window.]open(URL, nombre, propiedades)
Permite crear (y abrir) una nueva ventana. Si queremos tener acceso a ella desde la ventana
donde la creamos deberemos asignarle una variable, si no simplemente invocamos el mtodo: el
navegador automticamente sabr que pertenece al objeto window. El parmetro URL es una
cadena que contendr la direccin de la ventana que estamos abriendo: si est en blanco, la
ventana se abrir con una pgina en blanco. El nombre ser el que queramos que se utilice como
parmetro de un TARGET y las propiedades son una lista separada por comas de algunos de los
siguientes elementos:
toolbar[=yes|no]
location[=yes|no]
directories[=yes|no]

status[=yes|no]
menubar[=yes|no]
scrollbars[=yes|no]
resizable[=yes|no]
width=pixels
height=pixels
Debemos tener cuidado con las propiedades que modifiquemos, es posible que algunas
combinaciones de los mismos no funcionen en todos los navegadores. El Explorer 4, por ejemplo,
da error ante la combinacin toolbar=no, directories=no, menubar=no. Veamos un ejemplo:
function AbrirVentana() {
MiVentana=open("","MiPropiaVentana",
"toolbar=no,directories=no,menubar=no,status=yes");
MiVentana.document.write(
"<HEAD><TITLE>Una nueva ventana</TITLE></HEAD>");
MiVentana.document.write("<CENTER><H1><B>" +
"Esto puede ser lo que tu quieras</B></H1></CENTER>");
}
close()
Cierra la ventana. A no ser que hayamos acabado de abrirla nosotros mostrar al usuario una
ventana de confirmacin para que decida l si quiere o no cerrarla. Esto se hace por motivos de
seguridad, ya que sera demasiado fcil hacer un script de esos mal intencionados que nos cerrase
la ventana del navegador, con lo que fastidia eso.
alert(mensaje)
Muestra una ventana de dilogo con el mensaje especificado.
confirm(mensaje)
Muestra una ventana de dilogo con el mensaje especificado y dos botones. Si el usuario pulsa
OK, el mtodo devuelve true. Si, en cambio, pulsa Cancelar, devolver false.
prompt(mensaje, sugerencia)
Muestra una ventana de dilogo con el mensaje especificado y un campo de texto en el que el
usuario pueda teclear, cuyo valor inicial ser igual a sugerencia. Si el usuario pulsa OK, el mtodo
devuelve la cadena introducida en el campo de texto. Si, por el contrario, pulsa Cancelar, devolver
el valor null. Dado que este valor se considera igual a false, podemos comprabarlo directamente
en una condicin para ver que ha hecho el usuario.
Por ejemplo, el siguiente cdigo muestra un saludo slo si el usuario ha pulsado el botn de
Aceptar:
var contestacion = prompt("Cmo te llamas, criatura?", "");
if (contestacion)
alert("Hola, " + contestacion);
status
Define la cadena de caracteres que saldr en la barra de estado en un momento dado.
defaultStatus
Define la cadena de caracteres que saldr por defecto en la barra de estado. Cuando no la
especificamos, defaultStatus ser igual al ltimo valor que tomstatus.
setTimeout("funcin",tiempo)
Llama a funcin cuando hayan pasado tiempo milisegundos. Imprescindible a la hora de realizar
cualquier rutina que deba ejecutarse a cierta velocidad.

La barra de estado
En muchas pginas web se puede observar cmo sus creadores controlan por completo la barra
de estado del navegador.
Para empezar vamos con lo ms sencillo: escribir mensajes diversos en la barra de estado. Para
poner un mensaje en la barra de estado nada ms cargar el documento y que se mantenga ah
mientras no haya otro ms importante haremos:
<BODY onLoad= "window.defaultStatus='El documento ya se ha ledo';return true">
El cdigo lo nico que hace es modificar defaultStatus y devolver true como resultado del
controlador de eventos. Por alguna misteriosa razn es obligatorio hacer esto cuando modificas
algo de la barra de estado. Ahora veremos cmo se puede definir el valor de la barra de estado
cuando el ratn pasa por encima de un elemento <A>:
<A HREF="MiPagina.html" onMouseOver= "window.status='Vente a mi psgina';return true">
Scrolls con javascript
scrolls.html
<HTML>
<HEAD>
<TITLE>Ejemplo</TITLE>
<SCRIPT LANGUAGE="JavaScript">
var texto=" Aqu est el mensaje que espero " +
"observes y leas con suma atencin ";
var longitud=texto.length;
function scroll() {
texto=texto.substring(1,longitud-1)+texto.charAt(0);
window.status = texto;
setTimeout("scroll()",150);
}
</SCRIPT>
</HEAD>
<BODY onLoad="scroll();return true;">
Esta es la mejor p&aacute;gina.
</BODY>
</HTML>
Simplemente escribe el texto en la barra de estado y luego coge el caracter ms a la izquierda del
mismo y lo pone a la derecha, para despus volver a escribirlo. La nica pega que tiene es cmo
hago para que la funcin se llame cada cierto tiempo predeterminado para ir desplazando el texto a
una velocidad constante. Y la respuesta esta en el mtodo setTimeout.
Objeto Document
Este objeto representa el documento HTML en el que estamos. Se accede a l por medio de la
referencia document. Su mayor importancia viene por el nmero de vectores que posee, que
referencian a objetos Image, Form o Link, los cuales permiten acceder a las imgenes,
formularios y enlaces del documento, respectivamente.
lastModified
Contiene la fecha y hora en que se modific el documento por ltima vez y se suele usar en
conjuncin con write para aadir al final del documento estas caractersticas.
bgColor
Modifica el color de fondo del documento. El color deber estar en el formato usado en HTML. Es
decir, puede ser red o FF0000.

forms[]
Vector que contiene los formularios del documento. El primero ser el nmero 0, el segundo el 1,
etc..
images[]
Vector que contiene las imgenes del documento. Se ordenan igual que en el anterior caso,
aunque tambin permiten ser accedidas con el nombre como ndice. Es decir, a una imagen
definida como <IMG SRC=".." NAME="miImagen"> se puede acceder
con document.inages["miImagen"].
links[]
Vector que contiene los enlaces del documento. Se ordenan igual que en los dos anterioers,
aunque no se suele utilizar en el cdigo Javascript. Su razn de ser es que, al ser los enlaces
objetos, permiten incluir cdigo Javascript en ellos por medio de la pseudo-URL javascript:codigo.
write(cadena) y writeln(cadena)
Escribe el cdigo HTML indicado en cadena en nuestro documento HTML. writeln hace lo mismo,
pero incluyendo al final un retorno de carro.
close()
Cierra el documento, impidiendo escribir de nuevo en l.
Cmo escribir en el documento
A la hora de escribir en un documento por medio de write o writeln hay que tener en cuenta un
hecho fundamental. Para poder escribir en un documento, ste debe estar abierto y, al abrirlo, se
destruye todo el cdigo que haya en l.
Un documento se abre automticamente cuando empieza a cargarse y se cierra cuando termina de
hacerlo. As pues, si deseamos escribir en un documento sin sobreescribir su contenido,
deberemos hacerlo antes de que ste termine de cargar. Si lo hacemos despus,
sobreescribiremos su contenido. Por lo tanto:
Objeto Form
El vector document.forms contiene todos los formularios de un documento. As, se accedera al
primer formulario definido como document.forms[0]. Sin embargo, si usamos el
parmetro NAME en la etiqueta HTML:
<FORM NAME="miFormulario">
Entonces podremos acceder al formulario con document.miFormulario, que resulta bastante ms
cmodo y estable ante la posibilidad de variacin del nmero y posicin de formularios en el
documento. Estos son los mtodos y propiedades del objeto Form:
submit()
Enva el formulario.
reset()
Devuelve los valores de un formulario a su estado inicial.
elements[]
Contiene todos y cada uno de los elementos de los que consta el formulario, es decir, los botones,
cajas de textos, listas desplegables, etc. que componen un formulario. Cada elemento puede ser
un objeto distinto, por lo que deberemos averiguar de qu tipo son por medio de la propiedad
comn type.
Referencias Bibliogrficas

Mohedano, Jorge Saiz, Jos Miguel Salazar Romn, Pedro (2012). Iniciacin a
JavaScript.Espaa: Ministerio de Educacin de Espaa.

Javier Eguiluz (2013). Introduccin a JavaScript. Recuperado el 15 de junio del 2013 en


http://librosweb.es/javascript/

Lecturas Recomendadas
Para saber ms
Ponemos a tu disposicin y te invitamos a revisar dos interesantes documentos que te ayudaran a
reforzar y ampliar los temas que hemos estudiado, estos los encontrars en la base de datos elibros que utiliza nuestra universidad:
Documento 1: "Programacin web del lado del cliente"
Direccin: http://prezi.com/0ubdrmg3dnww/lenguajes-de-programacion-web-del-lado-de-cliente-ydel-lado-del-servidor/
Breve descripcin: ste archivo muestra la comparacin de la programacin web de lado del
cliente y del lado del servidor, sus ventajas y desventajas de una forma muy dinmica y fcil de
entender.
Documento 2: Procesamiento al lado del Cliente
Direccin: http://itch2leonardo.galeon.com/archivos/ProgWebUni4.ppt".
Breve descripcin: este archivo menciona sobre la programacin en JavaScript, conceptos, como
fue desarrollado, que se puede hacer en JavaScript y algunos ejemplos para validar formularios.
Conclusiones
Podemos concluir esta semana manifestando que el desarrollo de aplicaciones web es una
de las reas que ms importancia ha ganado en estas ltimas dcadas y cuyo crecimiento
ha permitido evolucionar la forma en que se realizan muchos procesos de negocio en la
actualidad.
Metacognicin
Las siguientes preguntas te ayudarn a reflexionar sobre tus propios aprendizajes, es un ejerci
recomendado para razonar e identificar nuestro esfuerzo intelectual, la finalidad es regular nuestras
acciones y procesos mentales
De la temtica abordada que te llam ms la atencin?
Consideras que aprendiste con los contenidos abordados?
Tuviste dificultad con algn tema o actividad? Cmo los solucionaste?
Qu acciones realizaste para aprender?

Anda mungkin juga menyukai