Tecnologa de Programacin

V Ciclo

TECNOLOGAS DE PROGRAMACIN WEB EN EL LADO DEL

CLIENTE
Conforme las aplicaciones web se hacan ms complejas por ejemplo por el uso de
formularios y aadido a esto una velocidad de navegacin lenta, surgi la necesidad
de lenguaje de programacin que se ejecutaran en el navegador del usuario. De esta
forma, si el usuario no llenaba correctamente un formulario, no se le haca esperar
mucho tiempo hasta que el servidor volviera a mostrar el formulario indicando los
errores existentes.

Las tecnologas del lado del cliente, es decir, las que se ejecutan en el navegador
del usuario son las pginas dinmicas que se procesan en el cliente. En estas pginas
toda la carga de procesamiento de los efectos y funcionalidades la soporta el
navegador. Usos tpicos de las pginas de cliente son efectos especiales para webs
como rollovers o control de ventanas, presentaciones en las que se pueden mover
objetos por la pgina, control y validacin de formularios, clculos, etc. El cdigo
necesario para crear los efectos y funcionalidades se incluye dentro del mismo archivo
HTML y generalmente son scripts, activex o plugins. Cuando una pgina HTML
contiene alguna de las tecnologas de cliente, el navegador se encarga de
interpretarlas y ejecutarlas para realizar los efectos y funcionalidades. Las pginas del
cliente son muy dependientes del sistema donde se estn ejecutando y esa es su
principal desventaja, ya que cada navegador tiene sus propias caractersticas, incluso
cada versin, y lo que puede funcionar en un navegador puede no funcionar en otro.
Como ventaja se puede decir que estas pginas descargan al servidor algunos
trabajos, ofrecen respuestas inmediatas a las acciones del usuario y permiten la
utilizacin de algunos recursos de la mquina local. Un lenguaje del lado cliente es
totalmente independiente del servidor, lo cual permite que la pgina pueda ser
albergada en cualquier sitio. Pero nuestra pgina no se ver bien si la computadora
cliente no tiene instalados los plug-in adecuados. El cdigo, tanto del hipertexto como
de los scripts, es accesible a cualquiera y ello puede afectar a la seguridad.

Las pginas dinmicas de cliente principalmente se escriben en dos lenguajes de

programacin: Javascript y Visual Basic Script (VBScript). Tambin se puede hacer
uso de las CSS o XML para tecnologas como DHTML o AJAX. Existen tecnologas de
cliente que se ejecutan a travs plugins instalados en el navegador, algunas de las
ms conocidas son Flash y los Applet de Java.

Ing. Ricardo More Reao

Tecnologa de Programacin

V Ciclo

JavaScript
JavaScript es un lenguaje de programacin
interpretado(el ordenador va leyendo cada instruccin, la
traduce y la ejecuta; pues quien traduce las instrucciones
del programa es el traductor o intrprete), por lo que no es
necesario compilar los programas para ejecutarlos. En
otras palabras, los programas escritos con JavaScript se
pueden probar directamente en cualquier navegador sin
necesidad de procesos intermedios(es soportado por la
mayora de navegadores). JavaScript fue desarrollado por
la empresa Netscape con la idea de mejorar la creacin
de pginas web para su navegador Navigator.
JavaScript es ms simple que Java; pues se puede insertar cdigo especial dentro
de HTML de una pgina o no, a travs del cual podemos realizar por ejemplo que
cuando se presente una pgina web al visitante haga cosas como poner en la pgina
la fecha del da, hacer que una imagen se mueva de un lado a otro, responder de una
determinada forma a la pulsacin del ratn, validar el texto ingresado por el usuario,
etc. Los programas escritos con este lenguaje son conocidos como scripts o guiones.
Pese a su nombre no tiene nada que ver con Java.
Como con cualquier otro lenguaje de programacin que hemos estudiado en ciclos
anteriores, con JavaScript se necesita conocer sus reglas y vocabulario.

JAVASCRIPT EN UNA PGINA WEB

Tenemos que trabajar con la etiqueta <script>.
Existen varias formas de incluir cdigo JavaScript en nuestras pginas web:
a) En el mismo documento web
Aunque podemos escribirlo en cualquier parte del documento, se recomienda
definir el cdigo dentro de la cabecera, es decir entre <head> y </head>
Podemos escribir el siguiente cdigo con cualquier editor de texto y luego
guardarlo con el nombre: ejemplo1_primeraforma.html
<html>
<head>
<title>Ejemplo de la primera forma</title>
<script type="text/javascript">
alert("Ingeniera de Sistemas");
</script>
</head>
<body>

Ing. Ricardo More Reao

Tecnologa de Programacin

V Ciclo

<p>Sesin 02: JavaScript </p>

</body>
</html>
Tambin podemos escribirlo entre <body> y </body>
Escribir el siguiente cdigo con cualquier editor de texto y luego guardarlo
con el nombre: ejemplo2_primeraforma.html
<html>
<head>
<title> Otro ejemplo de la primera forma</title>
</head>
<body>
<p onclick="alert('hemos escrito JavaScript dentro del body en la pgina')">
Ejemplo de un prrafo de texto
</p>
</body>
</html>

b) JavaScript en un archivo externo

Las instrucciones pueden escribirse en un archivo cuya extensin es js, que
va a ser enlazado por un documento HTML.
Escribir en un editor de texto lo siguiente:
alert("La presente instruccin muestra un mensaje ");
Luego guardarlo como: archivoexterno.js
En nuestro documento web, que guardaremos con el nombre:
enlazararchivoexterno.html
<html>
<head>
<title>Ejemplo de la segunda forma</title>
<script type="text/javascript" src="/archivoexterno.js">
</script>
</head>
<body>
<p>Hemos enlazado un archivo externo, de extensin js</p>
</body>
</html>
Se ha utilizado el atributo src para realizar el enlace.
En una pgina web se pueden incluir tantas etiquetas <script> como sean
necesarias para enlazar varios archivos externos. Como se pueden haber dado cuenta
representa una ventaja utilizar archivos externos.

Ing. Ricardo More Reao

Tecnologa de Programacin

V Ciclo

Podemos utilizar la etiqueta <noscript>, dentro del body para mostrar un

mensaje al usuario cuando el navegador no puede ejecutar JavaScript, observemos el
siguiente ejemplo:
<body>
<noscript>
<p>La pgina no puede ejecutar contenido JavaScript</p>
<p>Si lo has deshabilitado, por favor activarlo.</p>
</noscript>
</body>
Sintaxis
Algunas de sus normas bsicas son las siguientes:
Se distinguen las maysculas y minsculas.
No se tienen en cuenta los espacios en blanco.
No se define el tipo de las variables.
No es necesario terminar cada sentencia con el carcter de punto y coma (;).
Se pueden incluir comentarios.
Formas de escribir un comentario

De una sola lnea

// de esta manera se escribe el comentario de una sola lnea.

De varias lneas
/* de esta manera se escribe comentarios de varias lneas,
son tiles cuando se necesita mostrar
o registrar referencias importantes respecto al trabajo que se realiza
*/

Mensajes
Son ventanas que desde el cdigo se lanzan al usuario, nos informan algo o
para que se reaccione ante una determinada situacin, ya hemos utilizado alguno en
ejemplos anteriores.
Alert.Muestra un mensaje en pantalla que slo da la oportunidad de aceptarle.
Su sintaxis es:
alert(se_escribe_el_mensaje);
Ejemplo: (escrito en el primer ejemplo)
alert("Ingeniera de Sistemas");
Prompt.Muestra una ventana que permite ingresar datos al usuario. Devuelve un valor
que puede ser asignado a una variable.
La ventana posee 2 botones: Aceptar y Cancelar.

Ing. Ricardo More Reao

Tecnologa de Programacin

V Ciclo

Su sintaxis es:
prompt(mensaje,valor_por_defecto);
Ejemplo:
prompt(Ingresar nombre: );
Ejemplo:
prompt(Ingresar nombre: , Juan);
Ejemplo:
resp=prompt(Ingresar nombre: );
Confirm.Muestra un mensaje de confirmacin, tiene 2 botones: Aceptar y Cancelar.
Su sintaxis es:
confirm(mensaje);
Ejemplo:
confirm(Esta seguro..? );
Adems podemos utilizar document.write(mensaje) para mostrar en el mismo
documento nuestros mensajes o resultados.
Un ejemplo completo de uso de mensajes:
Escribir el siguiente cdigo con cualquier editor de texto y luego guardarlo con el
nombre: mensajes.html
<html>
<head>
<title>Ejemplo de la primera forma</title>
<script type="text/javascript">
resp=prompt("Ingresar nombre: ");
document.write("Hola: ",resp);
</script>
</head>
<body>
<p>Programacin </p>
<p> JavaScript </p>
</body>
</html>

Ing. Ricardo More Reao

Tecnologa de Programacin

V Ciclo

PROGRAMACIN BSICA
Variables
Variable es un espacio en memoria donde se almacena un dato, podemos
guardar cualquier tipo de informacin que necesitemos para realizar las acciones de
nuestros programas. Se escriben teniendo en cuenta las mismas reglas que en java.
Ejemplo:
Tenemos tres variables: minuendo, sustraendo, diferencia
minuendo = 9
sustraendo = 5
diferencia = minuendo sustraendo
Declaracin de variables en JavaScript
En JavaScript no obligatorio declarar explcitamente las variables; pero es
aconsejable declararlas antes de utilizarlas. Para declarar una variable se usa la
palabra: var
Por ejemplo:
var minuendo;
var sustraendo;
Puede escribirse tambin: var minuendo, sustraendo;
Tambin se puede asignar un valor a la variable cuando se declara:
var minuendo = 9;
var sustraendo = 5;
var diferencia = minuendo sustraendo;
Ejemplo:
<html>
<head>
<title>Variables en JavaScript</title>
<script type="text/javaScript">
var minuendo; // Se crea la variable "minuendo", actualmente no
tiene ningn valor
minuendo=25; // ahora "minuendo" tiene el valor numrico 25
var sustraendo=10; //Se crea la segunda variable y se le asignado un
valor
//las variables guardan datos con lo que se puede realizar operaciones
var diferencia=minuendo-sustraendo;
//Se ha creado la variable diferencia y asignado la diferencia de
minuendo y sustraendo
alert(diferencia);
// muestra el valor de la variable diferencia
</script>
</head>
<body>
<h1>Ejemplo con variables</h1>
Hemos usado "var", el resto es similar a otros lenguajes de programacin
</body>
</html>

Ing. Ricardo More Reao

Tecnologa de Programacin

V Ciclo

Operadores
Las variables por s solas son de poca utilidad, para hacer programas
realmente tiles son necesarios los operadores, ya que estos permiten manipular el
valor de las variables, realizar operaciones matemticas con sus valores y comparar
diferentes variables. De esta forma, los operadores permiten a los programas realizar
clculos complejos y tomar decisiones lgicas en funcin de comparaciones y otros
tipos de condiciones.
Los operadores se dividen en:
) Operadores de asignacin

Su signo es el igual (=).

Tiene un uso distinto del que posee en matemtica, porque sirve para asignar
un valor y no a establecer relaciones de igualdad, para el cual de utiliza este
otro operador (= =).
Ejemplo:
var sustraendo=10;
) Operadores aritmticos

Los operadores aritmticos toman los valores numricos como sus operandos
y devuelve un solo valor numrico.
Suma +
Resta Multiplicacin *
Divisin /
Resto de la Divisin(mdulo) %
Incremento ++
Decremento -Los primeros operadores son binarios, es decir que se aplican sobre dos
argumentos.
Ejemplo:
var diferencia=minuendo-sustraendo;
) Operadores relacionales

Permiten comparar variables.

Mayor que
'>'
Menor que
'<'
Igual
'=='
Distinto
'='
Mayor o igual que '>='
Menor o igual que '<='
) Operadores lgicos

Permiten construir expresiones lgicas.

Devuelve true si ambos operandos son true
'&&'
Devuelve true si alguno de los operandos son true '||'
Niega el operando que se le pasa
'!'
) Operadores cadenas

Ing. Ricardo More Reao

Tecnologa de Programacin

V Ciclo

Las cadenas de caracteres, o variables de texto, tambin tienen sus propios

operadores para realizar acciones tpicas sobre cadenas. Aunque javascript
slo tiene un operador para cadenas se pueden realizar otras acciones con una
serie de funciones predefinidas en el lenguaje.
+ Concatena dos cadenas, pega la segunda cadena a continuacin de la
primera.
Ejemplo
dato1="Bienvenidos"
dato2="estudiantes"
cadena=dato1+dato2 //cadena sera " Bienvenidosestudiantes"
El operador + sirve para dos usos distintos, si los operandos son nmeros
los suma, pero si se trata de cadenas las concatena. Javascript es
suficientemente listo para entender que tipo de operacin realizar mediante una
comprobacin de los tipos que estn implicados.
Ejemplo: Elaborar un programa en JavaScript que defina e inicialice una variable de
tipo cadena de caracteres donde almacenemos el nombre de una empresa, otra
variable de tipo real donde almacenar la altura de una persona, una variable de tipo
entero donde almacenemos una edad. Imprimir cada variable en una lnea distinta en
pantalla.
<html>
<head>
<title>Variables</title>
</head>
<body>
<script type="text/javascript">
var nombre_empresa="Ventas Generales S.A";
var altura=1.61;
var edad=19;
document.write(nombre_empresa);
document.write("<br>");
document.write("La edad es: ",edad+" aos");
document.write("<br>");
document.write(altura);
</script>
</body>
</html>
Ejemplo: Elaborar un programa en JavaScript que permita ingresar dos nmeros por
teclado e imprimir la suma y su producto.
<html>
<head>
<title>Operadores</title>
<script type="text/JavaScript">
var valor1, valor2;
valor1=parseInt(prompt('Ingrese primer nmero:',''));
valor2=parseInt(prompt('Ingrese segundo nmero',''));
var suma=valor1+valor2;
var producto=valor1*valor2;
document.write('La suma es: ',suma);
document.write('<br>');

Ing. Ricardo More Reao

Tecnologa de Programacin

V Ciclo

document.write('El producto es: ', producto);

alert("La suma es: "+suma+"\n"+"El producto es: "+producto);
</script>
</head>
<body>
</body>
</html>
Ejemplo: Programa en JavaScript que utiliza operadores lgicos.
<html>
<head>
<title>Operadores lgicos</title>
</head>
<body>
<script type="text/JavaScript">
a = 9;
b = 5;
c = 3;
document.write( (a != b) && (b > c) );document.write("<br>");
document.write( (a == b) || (b == c) );document.write("<br>");
document.write( !(b <= c) );document.write("<br>");
</script>
</body>
</html>

Estructuras de control de flujo

Los programas que se pueden realizar utilizando solamente variables y
operadores son una simple sucesin lineal de instrucciones bsicas; sin embargo, no
se pueden realizar programas que muestren un mensaje si el valor de una variable es
igual a un valor determinado y no muestren el mensaje en el resto de casos, tampoco
se puede repetir de forma eficiente una misma instruccin, como por ejemplo sumar un
determinado valor a todos los elementos de un array. Para realizar este tipo de
programas son necesarias las estructuras de control de flujo, que son instrucciones del
tipo "si se cumple esta condicin, hazlo; si no se cumple, haz esto otro". Tambin
existen instrucciones del tipo "repite esto mientras se cumpla esta condicin".
Estructuras de decisin condicional
Las estructuras de decisin condicional nos permiten decidir mediante
expresiones condicionales qu sentencias de nuestro cdigo han de ser ejecutadas.
Estructura if
Es la estructura ms utilizada en JavaScript y en la mayora de lenguajes de
programacin, se emplea para tomar decisiones en funcin de una condicin.
Su definicin formal es:

Ing. Ricardo More Reao

Tecnologa de Programacin

V Ciclo

if(condicin)
{
...
}
Estructura if...else
En ocasiones, las decisiones que se deben realizar no son del tipo "si se
cumple la condicin, hazlo; si no se cumple, no hagas nada". Normalmente las
condiciones suelen ser del tipo "si se cumple esta condicin, hazlo; si no se cumple,
haz esto otro".
Para este segundo tipo de decisiones, existe una variante de la estructura if
llamada if...else.
Su definicin formal es:
if(condicin)
{
...
}
else
{
...
}
La estructura if...else se puede encadenar para realizar varias comprobaciones
seguidas:
if(condicin)
{
...
}
else if(condicin)
{
...
}
else if(condicin)
{
...
}
else {

}
Bucles
Permiten repetir un nmero determinado o indeterminado de veces ciertas
sentencias de nuestro cdigo.
for(i = inicio; expresin condicional; i++)
{

Ing. Ricardo More Reao

Tecnologa de Programacin

V Ciclo

Ejemplo: escribir y guardar con extensin js y luego lo enlazan desde un archivo

html
var m;
m = "casa";
for(i = 0; i < 5; i++)
{
alert(m+" "+(i+1));
}
Ejemplo: escribir y guardar con extensin js y luego lo enlazan desde un archivo
html
var
dias=["Lunes","Martes","Mircoles","Jueves","Viernes","Sbado","Domingo" ];
for(i=0;i<7;i++)
{
document.write(dias[i]+"<br>");
}
Ejemplo: Lo escriben y guardan como: edad.js y luego lo enlazan desde un archivo
html
var edad;
edad=parseFloat(prompt("Ingresar edad: "));
if(edad >= 0 && edad < 18)
document.write('No participa de elecciones municipales y presidenciales');
Ejemplo: Lo escriben y guardan como: edad2.js y luego lo enlazan desde un
archivo html
var edad;
edad=parseFloat(prompt("Ingresar edad: "));
if(edad >= 0 && edad < 18)
{
document.write('No participa de proceso electoral');
}
else
{
document.write('Si participa de proceso electoral');
}

Ejemplo: Lo escriben y luego lo guardar como: nota.js

var nota;
nota=parseFloat(prompt("Ingresar nota: "));
if(nota >= 0 && nota < 5) {
document.write('muy mal');
} else if(nota >= 5 && nota < 11) {
document.write('Mal');
} else if(nota >= 11 && nota < 14) {
document.write('Regular');
} else if(nota >= 14 && nota < 17) {
Ing. Ricardo More Reao

Tecnologa de Programacin

V Ciclo

document.write('Notable');
} else if(nota >= 17 && nota <= 20) {
document.write('Sobresaliente');
} else {
document.write('La nota no es vlida. Tiene que estar entre 0 y 20');
}
Luego el siguiente cdigo lo escriben y guardan como: llamarnota.html
<html>
<head>
<title>Estructuras de control</title>
<script type="text/javaScript" src="nota.js">
</script>
</head>
<body>
<h1>Ejemplo de estructura if</h1>
</body>
</html>

Ing. Ricardo More Reao