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?
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">
Carcter
Significado
Nueva lnea
Tabulador
\'
Comilla simple
\"
Comilla doble
\\
Barra invertida
2.3. Operadores.
JavaScript tiene una gran variedad de operadores, entre ellos, los aritmticos, de comparacin,
lgicos, de asignacin, etc.
Operadores aritmticos
Descripcin
Multiplicacin
2*5
10
Divisin
5/2
2.5
5%2
Suma
2+5
Resta
7-2
Incremento
++
++2
Decremento
--
--2
Menos unario
-(2+4)
-6
Operadores de comparacin
Descripcin
Igualdad
==
2 == '2'
Verdadero
Desigualdad
!=
2 != 2
Falso
Igualdad estricta
===
2 === '2'
Falso
2 !== 2
Falso
Menor que
<
2<2
Falso
Mayor que
>
3>2
Verdadero
<=
2 <= 2
Verdadero
>=
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
Descripcin
Smbolo
Expresin de ejemplo
Crear un objeto
new
a = new Array()
a es ahora un vector
Borrar un objeto
delete
delete a
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() {
Mtodo
Descripcin
Expresin de
ejemplo
Resultado del
ejemplo
Abs
Valor absoluto
Math.abs(-2)
sin, cos,
tan
Math.cos(Math.PI)
-1
asin, acos,
atan
Math.asin(1)
1.57
exp, log
Math.log(Math.E)
Ceil
Math.ceil(-2.7)
-2
Floor
Math.floor(-2.7)
-3
Round
Math.round(-2.7)
-3
min, max
Math.min(2,4)
Pow
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
OnLoad
<BODY...>
<FRAMESET...>
OnUnLoad
<BODY...><FRAMESET...>
<A HREF..>
<AREA...>
onMouseOut
<A HREF..>
<AREA...>
onSubmit
Enviar un formulario
<FORM...>
onClick
Pulsar un elemento
onBlur
Perder el cursor
<INPUT TYPE="text"...>
<TEXTAREA...>
OnChange
<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á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.
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?