JS Bases

Bases de Javascript
Departamento Cencias de
Computacin Ana Nieves Rodrguez
Facultad de Ciencias Exactas y
Tecnologa
Universidad Nacional de
Tucumn
Bases de JavaScript by Ana Nieves Rodrguez is licensed under a

Creative Commons Atribucin-No Comercial-Compartir Obras
Derivadas Igual 2.5 Argentina License.
Laboratorio I Carrera de Programador Universitario JavaScript
Departamento Ciencias de la Computacin FACET
Ing. Ana Rodrguez Pag:2/44

Microsoft cre el JavaScript que se desarroll para

I - Presentacin de JAVASCRIPT aprovechar las ventajas de Explorer.
Introduccin Elementos bsicos para programar en

En clases anteriores hemos aprendido a programar en
JavaScript
lenguaje HTML bsico, pero ahora queremos dar un JavaScript no es un lenguaje de programacin
poco de dinamismo a nuestras pginas, as que el propiamente dicho, es un lenguaje de Script u orientado
lenguaje estudiado es insuficiente porque solo nos sirve a documento, es una secuencia de comandos que se
para presentar el texto, definir su estilo y algo ms. evala y ejecuta sobre la marcha, es usado para crear
Hurgando un poco en la historia, vemos que el primer pequeos programas dentro de una pgina web que
ayudante del lenguaje HTML fue Java mediante el uso de permiten interactuar con el usuario. Algunas
los Applets. Los Applets son pequeos programas caractersticas son:
incrustados en las pginas web, que fueron usadas por Permite interactuar con el usuario ( a pesar de
Netscape para programar en las pginas web. Netscape haberlo dicho anteriormente, creo que es necesario
construy sus navegadores compatibles con los Applets reiterarlo).
y desarroll un lenguaje de programacin llamado Crear efectos especiales
LiveScrip, que era ms fcil de usar que java. Se pueden validar datos de un formulario.
Luego surgi una alianza entre Netscape y Sun Crear rollovers (cambia la imagen cuando se pasa el
Microsystems (creador de java), para desarrollar en mouse).
forma conjunta este nuevo lenguaje, de manera que se Crear navegadores desplegables.
cre el JavaScript, til dentro de una pgina web, fcil de Se puede realizar la apertura de ventanas
programar an para los nefitos y que permite crear secundarias.
programas pequeos dentro de una pgina, por otro lado Trabajar con la barra de estado, Etc.
se buscaba que JavaScript no necesite un kit de
desarrollo (caso de java) ni que los scripts requieran de Qu se necesita para programar un JavaScript?
un compilador, ni realizar archivos externos al cdigo 1. Cualquier editor de textos como bloc de notas ya que
HTML, como ocurre con los applets de java. los textos no necesitan ser enriquecidos, si lo hace
La sintaxis de JavaScript se parece a la de Java, pero con word, asegrese de guardar el archivo como de
son dos cosas distintas, a JavaScript se lo interpreta, solo texto.
mientras que a los programas de java se lo compila. 2. Navegador compatible con javascript.

Las rutinas de JavaScript se escriben en un documento O se puede realizar un archivo externo.

HTML, esto significa que en la pgina web conviven dos o Cuando existen varias funciones probadas
lenguajes de programacin: HTML y JavaScript. Para y que pueden servir a mas de un programa
que HTML interprete el lenguaje invasor (JavaScript) es se puede realizar un archivo externo.
necesario que se incorporen determinados tags propios o El archivo externo normalmente tiene la
de JavaScript de manera que el HTML reconozca que se extensin .JavaScript y se lo incluye de la
trata de un script de JavaScript, as se deben incorporar siguiente manera, suponiendo que el
los siguientes tags de acuerdo al navegador de que archivo con las funciones se llame externo:
disponga, las posibilidades son: <script src=externo.JS>
</script>
1. <script>.....</script>
2. <script language=JavaScript>....</script> Formas de Ejecutarlo
3. <script type="text/javascript">.....</script> Directa: se incorpora el script en el cuerpo o en la
cabecera de una pgina html de modo que el
Nota: Tenga en cuenta que JavaScript es sensible al navegador interprete cada lnea.
ingreso, por lo tanto si ingres <script> con minscula, Como respuesta a un evento:
deber realizar el cierre con minscula, si lo hizo con o Un evento es la accin que realiza el
mayscula, su cierre debe ser con mayscula, lo mismo usuario mientras visita una pgina. Por
sucede con el uso de variables. ejemplo el movimiento el mouse, pulsar un
botn, la seleccin de un texto o la carga de
Donde se escribe un JAVASCRIPT? un formulario. El programa captura el
La programacin de JavaScript se realiza en un evento realizado por el usuario, realiza una
documento HTML tarea y emite una respuesta mediante el
o Se pueden incorporar en la cabecera entre uso de manejadores de eventos. Estos
las etiquetas <HEAD> </HEAD> manejadores son funciones propias de
o En el cuerpo de la pgina entre las JavaScript.
etiquetas <BODY> </BODY>, a esto se le
llama cdigo incrustado. Forma de ocultar un JAVASCRIPT en
o Se pueden introducir varios script en una navegadores antiguos:
misma pgina con etiquetas <script> En el caso de navegadores antiguos que no comprenden
diferentes JAVASCRIPT, se escribe el cdigo como si fuese un

comentario, para ello se incorpora , como requerimientos de servicios hechos por estaciones de
hemos visto en lenguaje HTML. trabajo inteligentes o clientes, resultan en un trabajo
<script type=text/javascript> realizado por otros computadores llamados servidores.
<! --Cdigo javascript -- >
</script> 1. Es una relacin entre procesos corriendo en
Se puede indicar un texto alternativo si el navegador mquinas separadas en donde:
no permite cdigo javascript como se muestra a a. El Servidor es el proveedor de servicios.
continuacin: b. El Cliente es el consumidor de servicios.
<NOSCRIPT> 2. El Cliente y el Servidor interactan por medio de
El navegador no comprende los scripts pasajes de mensajes.
</NOSCRIPT> a. El Cliente solicita el servicio
b. El Servidor proporciona una respuesta.
Tener en cuenta que:
1. En la sintaxis de JAVASCRIPT Se respetan letras Por tanto existen dos actores: el servidor y el cliente. En
maysculas y minsculas esta arquitectura, la computadora de los usuarios
2. Las instrucciones se separan con punto y coma, si (cliente), produce una demanda de informacin a la
se escriben dos instrucciones en la misma lnea. computadora que proporciona informacin (servidor)
3. La otra forma de separarlas es mediante un salto quien da respuesta a la demanda del cliente.
de lnea
Se recomienda usar siempre el punto y coma despus de
cada instruccin Nuestro primer JavaScript
Haremos nuestro primer programa en JavaScript,
Quien interpreta las instrucciones? escriba el siguiente cdigo y gurdelo con el nombre
Incorporamos ac un concepto bsico que se primer_js.htm en su disquete
desarrollar en otras materias de la carrera: el modelo
cliente/servidor. Este modelo es definido por IBM de la <html><body>
siguiente manera: Es la tecnologa que proporciona al <script type=text/javascript>
usuario final acceso transparente a las aplicaciones, document.write(Hola programador!!!)
datos, servicios, o cualquier otro recurso, a travs de la </script>
organizacin, en mltiples plataformas. El modelo </body></html>
soporta un medio ambiente distribuido en el cual los Ejemplo 1

Un programa es una secuencia de instrucciones. Desde un evento para que muestre una ventana de
alerta:
En la pgina realizada hemos incrustado un script en el
cdigo HTML, porqu decimos esto? Porque el cdigo <html><body>
del script se encuentra en el cuerpo de la pgina, o sea <FORM>
dentro de las etiquetas <body>..</body> <INPUT TYPE="button" NAME="boton"
Explicacin del ejemplo: VALUE="Presione" onClick="alert('Hola
1. Se comienza con el tag <script> Programador!!!')">
2. La orden document.write, establece que se </FORM>
escriba en el documento html la frase Hola </body></html>
programador que debe ir entre comillas dobles o Ejemplo 3
simples.
Ejemplo mediante un evento: Este ejemplo es similar al anterior pero usando una
ventana de alerta.
<html><body>
<FORM>
<INPUT TYPE="button" NAME="boton"
VALUE="Presione" onClick="document.write('Hola
Programador!!!')">
</FORM>
</body></html>
Ejemplo 2
En este caso incorporamos una expresin javascript en
un formulario en donde declaramos un botn con el texto
presione. Al presionar el botn escribe en el documento
la frase Hola Programador.
La expresin onClick es JavaScript, fjese un detalle:
luego de onClick = la expresin documentr.write est
entre comillas dobles y el texto se encuentra en comillas
simples.

II - Elementos bsicos document.write('texto que saldr en el script')

</script></BODY></HTML>
Al escribir un programa JavaScript, se deben respetar Ejemplo 5
las maysculas y las minsculas.
Las rdenes o instrucciones dadas a JavaScript se En el ejemplo propuesto, se realiza un script que escribe
separan con punto y coma, si se escriben dos en el documento HTML una frase. Para que realice esta
instrucciones en la misma lnea. tarea escribimos la instruccin document.write que
Otra forma de separarlas es mediante un salto de significa que escriba en el documento lo que se
lnea encuentra dentro del parntesis. Cuando combinamos
Se recomienda usar siempre el punto y coma frases y contenido de variables, se usa el operador de
despus de cada instruccin. concatenacin +, como veremos mas adelante.
Uso de Document: Luego veremos que document es un
Comentarios: objeto. El document es muy usado en JavaScript, en
Cuando se escribe un programa, muchas veces es casos en que no es conveniente trabajar con ventanas.
necesario documentar las tareas que realiza, muchas
veces son lneas importantes que no hacen tareas de Variables y Operadores en JavaScript
programacin en s: En este captulo veremos algunos elementos muy
<script type=text/javascript> importantes a la hora de trabajar con JavaScript
//comentario de una lnea acompaados de ejemplos que ustedes podrn realizar
/*Comentario que puede abarcar para probar lo que se dice. Los tems a tratar son:
Ms de una lnea*/ 1. Qu son las Variables
</script> 2. Qu son los operadores
Ejemplo 4
1. Qu son las variables:
Textos Una Variable es un espacio de memoria en donde se
Los textos que deseamos que se muestren en el alberga un dato. Las variables deben tener un nombre,
programa deben ir encerrados entre comillas que que puede ser cualquiera, por ejemplo pepe, respuesta,
pueden ser dobles o simples. consulta, etc.
Se forman con caracteres alfanumricos o guin bajo.
<HTML><HEAD></HEAD> o ejemplos: sumando_1, A, B, sumando2, _A,
<script type=text/javascript> etc.

o DEBEN comenzar con un carcter o Locales: cuando son declaradas en un tramo de

alfabtico o guin bajo. programa acotado por { }, por ejemplo una funcin
Prohibidos: o un bucle.
o +, $, espacio
o palabras reservadas como for, return, while, NOTA: Si no se usa la palabra var, la variable ser
if, var, etc global.
Se aconseja que el nombre represente al dato que
alberga, de esta manera es fcil convocarlas. Tipos de datos
Ejemplo: Los datos pueden ser de diferentes tipos, por ejemplo:
A=14 o Nmeros
B=13 o Cadenas de caracteres: texto que puede estar
Suma = A + B compuesto de letras y nmeros, encerrado en
En este ejemplo tenemos tres variables: A, B y suma. comillas dobles o simples.
o Valores booleanos: las variables de este tipo
Declaracin de variables pueden tomar solo los valores true o false, o sea o
No es obligatorio, aunque es conveniente, declarar una es verdadera (true) o falsa (false).
variable mediante la indicacin de la palabra reservada
var, de la siguiente manera: Tipos de variables
o Var suma1 El Operador typeof devuelve una cadena de textos que
o Var suma2, suma3 varias variables separadas describe el tipo de variable que estamos comprobando.
por coma.
Se puede asignar el valor a una variable de la siguiente Var confirma = true
manera: Var numero = 67
o Var suma1 = 14 document.write(tipo1: + typeof confirma + <br>)
document.write(tipo2: + typeof numero + <br>)
Ambito de las variables Ejemplo 6
mbito de la variable, es el lugar en donde se encontrar
disponible esa variable, existen variables globales y 2.Qu son los operadores
locales: Los operadores son smbolos que se utilizan para
o Globales: se encuentran disponibles en toda la trabajar con las variables, tal como se trabaja en la
pgina, incluidos los manejadores de eventos. aritmtica elemental, los signos mas y menos son

operadores. A continuacin se listan los operadores a=prompt("ingrese numero a","");

usados en JavaScript con un ejemplo correspondiente. b=prompt("ingrese numero b","");
s=a+b;
Aritmticos: alert(s);
o Suma: + </script>
o Resta: -
o Multiplicacin: * Ejemplo 8
o Divisin: /
o Resto de la divisin: % Vista en el Browser:
<HTML><HEAD><TITLE>LABORATORIO
1</TITLE></HEAD>
<script>
document.write('texto que saldr en el script<br>')
var a=6 , b=2
c= a*b;
d= a/b;
e= a%b;
f= a+b; Figura 1
document.write('a= '+ a + '<br>b= ' + b + '<br>c= ' + c);
document.write('<br>d= ' + d +'<br>e= ' + e + '<br>f='+f)
</script>
</BODY></HTML>
Ejemplo 7
NOTA1: en muchos navegadores, el operador de suma

es interpretado como la concatenacin de caracteres
como se muestra en el siguiente ejemplo
Figura 2
<script type="text/javascript">
var a,b,s;
Resultado:

Ejemplo de operadores unarios:

<HTML><HEAD>
<TITLE>LABORATORIO 1</TITLE>
</HEAD>
<script type=text/javascript>
document.write('texto que saldr en el script<br>')
var a=3 , b=1
a++; b--
Figura 3: Sin ParseInt
//se incrementa la variable a y se decrementa b
document.write('a= '+ a + '<br>b= ' + b)
Para solucionar momentneamente se har uso de 2 </script>
funciones propias de JavaScript: ParseInt o ParseFloat, </BODY>
las que se describen en el captulo de funciones </HTML>
Ejemplo 10
De Asignacin
var a,b,s;
a=prompt("ingrese numero a","");
b=prompt("ingrese numero b",""); o = Asignacin simple
o += Asignacin con suma
s=parseInt(a)+parseInt(b); o -= Asignacin con resta
alert(s); o *= Asignacin con multiplicacin
</script> o /= Asignacin con divisin
</body> o %= Obtiene el resto y asigna
</html>
Ejemplo 9: con ParseInt
Ejemplo de asignacin:
Unarios: <html>
o Incremento de la variable en una unidad: ++, <body>
(A++) <script type="text/javascript">
o Decremento de la variable en una unidad: -- (A- num1 = 2; //asignacin simple
-) document.write('Numero original--> '+num1+'<br>');

num1 += 4; // asignacin con suma, en este caso se

suma 4 al nmero num1 Operadores de incremento
document.write('Numero mas cuatro (num1 += 4)--> Estos operadores se pueden colocar antes o despus de
'+num1+'<br>'); la expresin, pero solo modifican si se encuentran
num1 -=1; // asignacin con resta, en este caso se resta delante, ejemplo:
1 al nmero num1
document.write('Numero menos uno (num1 -=1)--> <html>
'+num1+'<br>'); <body>
num1 %=2;// resto de la divisin del nmero por dos <script type="text/javascript">
document.write('Resto de dividir en dos (num1 %=2)--> a = 1;
'+num1+'<br>'); document.write('a = 1<br>')
</script> b = ++a;
</body> document.write('(b = ++a) a--> '+a +'<br>b-->'+ b +'<br>--
</html> -------<br>');
Ejemplo 11 a = 1;
document.write('a = 1<br>')
Vista en el browser c =a++;
document.write('(c = a++) a--> '+ a +'<br>c-->'+ c +' b--
>'+b);
</script>
</body>
</html>
Ejemplo 12
Operadores lgicos
o ! : operador de negacin
o && : operador AND (si los dos valores son
verdaderos, el resultado es verdadero)
o || : Operador OR ( si uno de los valores es
verdadero, devuelve el valor verdadero)
Figura 4: asignacin

<html><body>
<script type="text/javascript"> <html><body>
num1 = true; <script type="text/javascript">
document.write('Num1: '+num1+'<br>-------<br>'); a = false;
num1 = !num1; b = false;
document.write('Negacin (num1 = !num1): _a = !a;
'+num1+'<br><b>---Vuelvo num1 al valor original--- _b = !b;
</b><br>'); document.write('<center><table border=
num1 = !num1; 2><caption><h2>Funcin AND</h2></caption>');
num2 = true; document.write('<tr><td>A</td><td>B</td><td>Y</td></tr
num3 = false; ><tr><td>');
document.write('Num1= '+num1+'<br>Num2= //00
'+num2+'<br>Num3= '+num3+'<br>--------<br>'); document.write(a +'</td><td>');
num4 = num1 && num2; document.write(b +'</td><td>');
document.write('And con true (num4 = num1 && num2): c = a&&b;
'+num4+'<br>-------<br>'); document.write(c +'</td></tr><tr><td>');
num4 = num1 && num3; //0 1
document.write('And con false (num4 = num1 && num3): document.write(a +'</td><td>');
'+num4+'<br>-------<br>'); document.write(_b +'</td><td>');
c = a&&_b;
//or document.write(c +'</td></tr><tr><td>');
num4 = num1 || num2; //1 0
document.write('OR dos true (num4 = num1 || num2): document.write(_a +'</td><td>');
'+num4+'<br>-------<br>'); document.write(b +'</td><td>');
num4 = num1 || num3; c = _a&&b;
document.write('OR con false (num4 = num1 || num3): document.write(c +'</td></tr><tr><td>');
'+num4+'<br>--------<br>'); //1 1
document.write(_a +'</td><td>');
</script></body></html> document.write(_b +'</td><td>');
Ejemplo 13 c = _a&&_b;
document.write(c +'</td></tr><tr><td>');

//fin de tabla escriba lo que se encuentra entre parntesis en un

document.write('</table></center>'); documento HTML.
</script></body></html> Este anexo es para los ms ansiosos y quieren ver un
Ejemplo 14 resultado inmediatamente.
Operadores de Comparacin Efectos rpidos

Se usan para comparar los valores de las variables. Entre los efectos rpidos haremos uso del objeto window,
x == y Devuelve verdadero si x es igual a y en el que se mostrarn ventanas de:
x != y devuelve verdadero si x es distinto de y 1. Alert
x > y devuelve verdadero si x es mayor que y 2. Confirm
x < y devuelve verdadero si x es menor que y 3. Prompt
x <= y devuelve verdadero si x ees menor o igual que 1. Uso de ventanas de alerta
y Veamos algunos ejemplos simples y rpidos:
Copie el siguiente cdigo con el bloc de notas y
Orden de Precedencia de los operadores guarde en una carpeta llamada JAVASCRIPT en su
Orden en el que se realizarn las operaciones disquet, con el nombre segundoJS.html
Se evalan de izquierda a derecha
1. ( ) [ ] .: Parntesis, corchete y punto de objeto <html>
2. ! - ++ --: Negacin, negativo, incremento. <body>
3. * / %: Multiplicacin, divisin, mdulo <script type="text/javascript">
4. + -: Suma, resta wdow.alert("Bienvenido a Laboratorio 1 - Carrera de
5. Operadores condicionales: menor, <=,mayor, >= Programador!")
6. Condicionales de igualdad y desigualdad: = =, != </script>
7. Lgicos booleanos: && || </body>
8. Asignacin: =, +=, -=, *=, /=, etc </html>
Ejemplo 15
en este caso incrustamos el cdigo de javascript dentro

Anexo 1 del body de una pgina web.
Ya se vieron algunos ejemplos, en los que hemos usado Window es un objeto usado por javascript, y alert es un
la orden document.write(), que le dice a JavaScript que mtodo de window que al decir window.alert le decimos

que muestre una ventana de alerta con el mensaje que Como en el caso anterior, confirm se puede usar con
se encuentra en el parntesis, como en este caso se window.Confirm. El detalle que se debe tener en cuenta
trata de un texto, se debe incluir entre comillas dobles o en estos casos, es que confirm solicita una respuesta
simples. Cabe aclarar que la orden de alert puede ir sola que se carga en una variable que hemos llamado resp,
siempre y cuando se encuentre dentro del bloque los valores posibles que tomar la variable resp son
<script>...</script>, ya que JavaScript asume que se trata True o False. Para saber el valor elegido, se muestra en
de una ventana de alerta. una ventana de alert, la visualizacin se muestra de la
Al ejecutar la pgina, se ver la siguiente pantalla: siguiente forma:
Figura 5: ventana de alerta Figura 6: ventana Confirm
2. Interactuando con el usuario ventana de 3. Ventana de Prompt

confirmacin Otro ejemplo tpico que permite interactuar con el
En este apartado trataremos de mostrar dos ejemplos usuario, es el de solicitar por pantalla el ingreso de datos.
simples en los que el programador interacta con el Esta tarea se realiza usando la ventana prompt de la
usuario. siguiente forma:
<html><body> <html><body>
<script type="text/javascript"> <script type="text/javascript">
resp = confirm("Carrera de Programador?"); nombre = prompt("Ingrese su nombre", "")
alert(v) alert(v)
</script> </script>
</body></html> </body></html>

Figura 7: Ventana de Prompt
El comando Prompt posee dos lugares a los que

llamamos parmetros.
Los parmetros, como se ver mas adelante, son
variables que se ingresan a un programa, separados por
coma:
Parmetro 1: en este lugar se escribe la frase que
deseamos ver en la pantalla del prompt, en el caso del
ejemplo: Ingrese su nombre,
Parmetro 2: en el que podemos escribir un texto que
deseamos que se muestre como valor predeterminado.
Este valor puede ser ignorado pero mostrar la palabra
undefined o sea valor no definido, si no queremos que
se muestre esta palabra, simplemente se abren y
cierran las dobles comillas, en el caso que deseamos
ver una palabra predeterminada, la escribimos entre
comillas dobles.

Un detalle que debe tener en cuenta es que si dentro de

III - Flujo del Programa la rama if posee mas de una orden, estas deben
encerrarse entre llaves: { }, lo mismo sucede con el else,
Estructuras de control siendo de buena costumbre usar las llaves siempre tanto
en if como en else.
Toma de decisiones o bifurcacin Recuerde que el else es opcional.
condicionales
<html><body>
Realiza una u otra accin dependiendo del valor de la <script type="text/javascript">
variable que se evale, en esta categora se encuentran 
Acciones a realizar en caso negativo </script>
} </body></html>
Ejemplo 16 Ejemplo 17
En el siguiente ejemplo se solicita al usuario una Estructura Switch

respuesta, mediante el uso de una ventana de Bifurca segn el valor que tome la variable, se utiliza
confirmacin. para seleccionar un valor entre diferentes alternativas.
Debe tener en cuenta que: if (conf) significa si la
variable conf posee el valor true (verdadero), entonces Switch (expresin) {
escriba en el documento con la orden document.write: case valor1:
Presion Aceptar, de otro modo (else) escriba en el Tarea1
documento document.write: Presion Cancelar break

case valor2: case "3":

Tarea2 fto = 'foto'+num+'.jpg';
break document.write(fto);
Default: document.write("<img src="+fto+">");
tarea break;
} case "4":
La expresin a evaluar se escribe junto a la palabra fto = 'foto'+num+'.jpg';
switch Switch (expresin) document.write(fto);
Si la expresin tiene el valor1, realiza la tarea1. document.write("<img src="+fto+">");
Para que salga de la estructura se incorpora la orden break;
break, de otro modo contina realizando la tarea2.
Si no encuentra valor vlido, ingresa a la opcin default:
default. alert("Esa foto no existe")
-->
Pruebe el siguiente ejemplo: </SCRIPT>
<html> </body>
<body> </html>
<SCRIPT> Ejemplo 18: Este ejemplo solicita el ingreso de un nmero de
foto y la muestra

</SCRIPT>
</body>
</html>
Ejemplo 19
Figura 9: prompt, switch e imagen En el ejemplo se dice:

Para la variable i: desde i=1, hasta que la variable i
Bucles sea menor que 6 en 5 tendr que salir, esta es la
Se usan para realizar una tarea repetidamente, de condicin: en este punto se dir hasta cundo se
acuerdo a una condicin determinada. Se utilizan: FOR realizar la iteracin, incrementando i en 1 en cada
WHILE DO WHILE. iteracin (cada vuelta del bucle) for (i=1;i<6;i++). El
bucle for, se encarga de iterar o sea de realizar la tarea
Bucle FOR una y otra vez, incrementando la variable cada vez
hasta que se cumpla la condicin, una vez que cumple
Se usa para realizar tareas repetitivas un nmero
la condicin sale del bucle y contina con el programa.
determinado de veces:
Escriba en el documento(...) document.write("<H" +
Sintaxis:
i +">Encabezado "+ i+ "</H><br>");
for (desde (inicio);hasta (condicin);cmo_se_actualiza
(incremento)) {
Tareas a realizar
}
Ejemplo:

Bucle WHILE Bucle while: primero se evala la condicin y luego

Se usa para repetir una tarea un nmero indefinido de realiza la tarea.
veces, MIENTRAS se cumpla una condicin.
Bucle do..while
Sintaxis: Este bucle se ejecuta por lo menos una vez
while (condicin){
tarea a ejecutar Sintaxis:
} do {
tareas
Ejemplo: } while (condicin)
<HTML><BODY>
<SCRIPT> <html><body>
 "</H><br>");
</SCRIPT> i += 1;
</BODY></HTML> } while (i <= j)
Ejemplo 20 -->
</SCRIPT>
En el ejemplo se dice: </body></html>
Mientras i sea menor que 5, entonces: Ejemplo 21
o Incremente i en 1 El ejemplo dice:
o Escriba en el Do Realice determinadas tareas, en este caso
documento(..)document.write("<H" + i escribe el documento y luego incrementa j en uno
+">Encabezado "+ i+ "</H><br>") document.write("<H" + i +">Encabezado "+ i+
"</H><br>"); j += 1;

While Mientras no se cumpla la condicin, en el

momento en que se cumpla la condicin debe salir, en
este caso da vueltas mientras la variable i sea menor
que la variable j.
NOTA: En el caso del bucle do..while, la tarea se realiza

al menos una vez, mientras que en el bucle while, evala
la expresin y luego ingresa al bucle.
Realice el siguiente ejemplo para comprobar lo que se

dice en la NOTA:
<script>
var num=0
while (num==1) {
alert(Ingreso al while);
}
do {
alert(Ingreso a do..while);
} while (num==1);
Ejemplo 22
Este ejemplo muestra claramente que NUNCA ingresar

al bucle while, porque la variable num jams toma el
valor 1, pero s ingresar al menos una vez al bucle do..
while.

2. En otra parte de la pgina

IV - Funciones 3. Desde un evento
Realice los siguientes ejemplos:
Qu es una funcin?
<html> <body>
Una funcin es pequeo programa (subprograma) <script type="text/javascript">
que realiza una o varias tareas determinadas. function alarma(){
o Conj. de instrucciones englobadas en un alert(ERRORRRR!")
mismo proceso: este proceso es una }
funcin y tiene un nombre. alarma()
o Pueden ser convocados por su nombre </script>
desde diferentes lugares. De modo que
</body></html>
sirven para evitar la repeticin del cdigo Ejemplo 23
Sintaxis Otra forma de llamar a la funcin:

Las funciones poseen la siguiente estructura: <html><body>
Function nombre(parmetro_1, parmetro_2, <script type="text/javascript">
....,parmetro_n) { function alarma(){
Cdigo de tareas que realizar la funcin alert("ERRORRRR!")
} }
Se escribe la palabra function, luego el nombre de la </script>
funcin y entre parntesis los parmetros, si no los tiene,
igual se incorporan los parntesis() . <h1>veamos que pasa</h1>
Ejemplo:
function alarma(){ <script>
Window.alert(ERROR!!!!) alarma()
} </script>
Formas de ejecutar una funcin: </body></html>
solo necesita invocar su nombre entre tags de script de la Ejemplo 24
siguiente manera:
1. Luego de la funcin invocando su nombre: Llamar a la funcin desde un evento:
alarma()

<html><body> Sintaxis:
<script type="text/javascript"> function hola(nombre){
function alarma(){ alert(Hola +nombre)
alert("ERRORRRR!") }
}
</script> Nota: Para incorporar un parmetro en la funcin,
tenemos que poner el nombre de la variable que
<h1>veamos que pasa</h1> almacenar el dato que se ingresa, por otro lado la
variable tendr vida durante la ejecucin de la funcin y
<form> dejar de existir cuando la funcin se termine de
<input type=button value="Presione el botn" ejecutar. Los parmetros pueden recibir cualquier tipo de
onclick=alarma()> datos, textos, nmeros, bolanos, u objetos.
</form>
</body></html> <html>
Ejemplo 25 <head>
<script>
A tener en cuenta cuando se trabaja con funciones: 
NO llamar a la funcin y luego declararla </script>
</head>
Parmetros de las funciones <body>
Las funciones tienen una entrada y una salida, que se <h1>veamos que pasa</h1>
pueden usar para recibir y devolver datos. <script>
Los parmetros se usan para mandar valores a la v1 = prompt("Escriba su nombre","");
funcin, con estos parmetros realizar acciones. alarma(v1)
Entonces los parmetros: </script>
Se usan para enviar valores a la funcin </body></html>
Ejemplo 26

Mltiples parmetros: Nota: Los parmetros de las funciones se pasan por

Se pueden ingresar mas de un parmetro, separados valor, o sea que aunque se modifiquen los parmetros
por coma: ,. en una funcin, la variable original no cambia su valor.
Veamos en un ejemplo:
function alarma(num1,num2){
document.write("producto= "+num1*num2) Function valor(mivar){
} mivar= 10
Llamado: document.write(Variable dentro de la funcion: + mivar)
v1 = (prompt("num1","")); }
v2 = (prompt("num2","")) var mivar= 3
alarma(v1,v2) valor(mivar)
document.write(Variable fuera de la funcion: + mivar)
Ejemplo: Ejemplo 28
<html><head>
<script> Analice el ejemplo.
 valor de la variable, este cambio no se ve reflejado a
</script> menos que se utilice la palabra reservada return
</head> La funcin realiza un conjunto de acciones y devuelve
<body> un valor.
<h1>veamos que pasa</h1> Se usa la palabra return seguida por el valor que se
<script> desea retornar.
v1 = (prompt("num1","")); Cuando se la convoca se asigna a una variable.
v2 = (prompt("num2",""))
alarma(v1,v2) Pruebe los siguientes Ejemplos:
</script> Sin_return.htm
</body></html> <html><body>
Ejemplo 27 <script type="text/javascript">

function suma(num) { Lgicamente slo habr un valor que cumple con las
num++; condiciones de la funcin y ese es el valor que
alert(num); retornar.
}
var a=1;
d=suma(a); Funciones bsicas
alert(d); JAVASCRIPT posee funciones predefinidas algunas de
alert(a) las cuales enumeramos a continuacin:
</script> eval(string): recibe una cadena de caracteres y la
</body></html> evala.
Ejemplo 29 <html><body>
Con_return.htm var miTexto = "3 * 5 + 4
<html><body> document.write(Var miTexto: +miTexto + "= ");
<script type="text/javascript"> eva= eval(miTexto);
function suma(num) { document.write(eva)
num++; </script>
alert(num); </body></html>
return num; Ejemplo 31
}
var a=1; parseInt(cadena,base): Devuelve un valor numrico
d=suma(a); resultante de convertir la cadena en un nmero entero
alert(d); en la base indicada.
</script> <html><body>
</body></html> <script type="text/javascript">
Ejemplo 30 
valor2 +" = "); </script>
p_i_valor = parseInt(valor); </body></html>
p_i_valor2 = parseInt(valor2); Ejemplo 33
sum_val = p_i_valor+p_i_valor2;
document.write(sum_val + "<br>") isNaN(nmero): (is Not a Number = Si no es un
--> nmero) Devuelve un booleano dependiendo de lo que
</script> recibe por parmetro. Si no es un nmero devuelve un
</body></html> true, si es un numero devuelve false.
Ejemplo 32
<html><body>
parseFloat(cadena): Convierte la cadena en un <script type="text/javascript">
nmero (no necesariamente entero) y lo devuelve. 
+ "+ valor2 +" = "); </script>
sum_str = valor+valor2; </body></html>
document.write(sum_str + "<br>"); Ejemplo 34
//los valores sern sumados

document.write("Con ParseFloat (suma) "+ valor + " + "+
valor2 +" = ");

En resumen se puede decir que un objeto de software es

V - Objetos en JavaScript un conjunto de variables (llamadas propiedades) y
JavaScript utiliza objetos, de hecho hemos venido funciones (llamadas mtodos) relacionadas. Recuerde
trabajando con ellos, cuando decimos document.write() que los mtodos son funciones que manipulan las
estamos trabajando con el objeto document. Haremos variables, o sea las propiedades.
ahora un pequeo resumen de lo que necesitamos para Los objetos se dividen en clases e instancias, una clase
trabajar con los objetos de JavaScript, sin complicarnos define a los objetos en forma general por ejemplo la
demasiado. clase perro, pero su perro es una instancia de la clase
perro.
Una clase es una descripcin de la forma y
Qu es un objeto? funcionamiento de los objetos, con las clases no se
Aunque hemos venido trabajando con objetos, en este realiza ningn trabajo, sino con los objetos que creamos
apartado trataremos de explicar en forma simple e a partir de una clase.
intuitiva qu son los Objetos. Bsicamente el modelo de
objetos se basa en los objetos del mundo real: un perro, Cmo instanciar un objeto?
una planta, una ventana, etc. Como se dijo en el prrafo anterior una clase define a un
Los objetos de la vida real poseen dos caractersticas: objeto en forma general, o sea posee la definicin de sus
propiedades y comportamientos, los propiedades del caractersticas y su funcionalidad.
perro podran ser: nombre, color, casta y el Sabemos ya que no se trabaja con clases, son solo
comportamiento sera menear la cola, ladrar, etc. definiciones, para trabajar con una clase de objetos, se
Los objetos de software son modelos tomados de objetos debe crear un objeto instanciado de esa clase.
de la vida real y tambin poseen propiedades y La creacin de objetos de una determinada clase se
comportamiento. realiza mediante el uso de la instruccin new. En el
Un objeto de software: siguiente ejemplo crearemos un objeto de la clase Date,
Mantiene sus propiedades en una o ms variables. que permite manejar fechas y horas, y lo cargaremos en
Recuerde que una variable es un tem de datos que la variable fecha.
posee un nombre o identificador. fecha = new Date();
Y su comportamiento es implementado mediante
mtodos, un mtodo es una funcin o subrutina Al no ingresar parmetros, el objeto fecha contendr
asociada al objeto. A menos que se diga lo contrario fecha y hora actuales. Pruebe el siguiente ejemplo:
una funcin no es esttica.

<html> Clases predefinidas

<body>
JavaScript posee clases predefinidas, en este apartado
mostraremos las ms usadas.
fecha=new Date();
Las clases se escriben con la primera letra en
dia = fecha.getDate();
mayscula.
ao = fecha.getYear();
document.write('fecha: '+ fecha+ '<br>Dia: '+dia +
Clase Array
'<br>Ao: '+ ao)
</script> Esta clase permite crear vectores que son tipos de datos
</body> complejos, es un conjunto ordenado de elementos en
</html> donde cada elemento es una variable.
Ejemplo 35 Por ejemplo se puede tener un Array de das de la
semana, el Array contendr siete elementos, del cero al
En este ejemplo, se crea un objeto fecha y se utilizan los seis (los arrays comienzan siempre en la posicin cero),
mtodos getDate y getYear para obtener da y ao. cada uno correspondiente a un da de la semana.
Cmo se accede a las propiedades y mtodos Declaracin de un Array

de un objeto? Siguiendo con el ejemplo de los das de la semana,
declaramos el Array (la primera letra con mayscula)
Ya hemos estado accediendo a mtodos de objetos, el semana de la siguiente manera:
que ms hemos usado es el objeto document y el Semana = new Array(7)
mtodo write: document.write(texto). Generalizando
entonces, para acceder a un mtodo se escribe: En este caso decimos que el array poseer siete (7)
objeto.metodo(parmetros), si no se tienen parmetros elementos aunque se puede dejar abierta la posibilidad,
para ingresar, igual hay que incorporar los parntesis. sin asignar la cantidad de elementos.
De la misma forma se accede a las propiedades, pero
tenemos que tener en cuenta que las propiedades son Asignar valores al Array:
variables, por lo tanto no tenemos parmetros, entonces
Para asignar valores al array, hay que tener en cuenta
se simplifica de la siguiente manera: objeto.propiedad.
que se debe indicar el ndice de la posicin del dato entre
corchetes como se muestra a continuacin:
Semana[0] = lunes

Semana[1] = martes dentro de sus casillas distintos tipos de datos, o sea en

..... una casilla se puede introducir texto, en otro un valor
semana[6] = domingo booleano, en otra un nmero, etc.
Longitud de un Array
Captar valores de un Array Los arrays adems de almacenar el valor de cada
Para obtener los valores de las diferentes posiciones del posicin, almacena el nmero total de posiciones o sea
array se procede de igual manera, poniendo entre en el caso del Array semana, la longitud es de 7
corchetes el ndice de la posicin a la que queremos posiciones.
acceder. Para obtener esta longitud usamos una propiedad length
Realice el siguiente ejemplo: del objeto array, recuerde que la propiedad de un objeto
<html><body> es una variable, veamos en un ejemplo:
var semana = new Array(7) <html><body>
semana[0] = "lunes" <script type="text/javascript">
semana[1] = "martes" var semana = new Array(7)
semana[2] = "miercoles" semana[0] = "lunes"
semana[3] = "jueves" semana[1] = "martes"
semana[4] = "viernes" semana[2] = "miercoles"
semana[5] = "sabado" semana[3] = "jueves"
semana[6] = "domingo" semana[4] = "viernes"
for (i=0;i<7;i++){ semana[5] = "sabado"
document.write('Indice ' + i + ' de la semana: ' + semana[6] = "domingo"
semana[i] + '<br>') }
</script> for (i=0;i<7;i++){
</body></html> document.write('Indice ' + i + ' de la semana: ' +
Ejemplo 36 semana[i] + '<br>')
}
Tipos de datos en un Array
Se pueden introducir cualquier tipo de datos en un Array, document.write("<h1>Longitud del array: " +
los datos del tipo carcter deben ir entre comillas. A semana.length + " </h1>" )
pesar de la improlijidad, los arrays pueden contener </script>

</body></html> Propiedades del Array

Ejemplo 37 length: propiedad que contiene la cantidad de elementos
del vector
Otra forma de inicializar el Array semana sera:
Semana = new Array(lunes, martes, mircoles, Mtodos del Array
jueves, viernes,sabado, domingo) concat(vector2): mtodo que concatena los elementos
del vector2 al final del vector convocante. No funciona
En este caso se reduce la tarea y se crea un array con 7 con Explorer 3
posiciones y el contenido de cada posicin se declara sort(compara): mtodo que ordena alfabticamente
entre parntesis, separada con comas. los elementos del vector. Se puede aadir como
Ejemplo: parmetro una funcin de comparacin (compara), para
ordenar de acuerdo a sta. La funcin debe aceptar dos
<html><body> parmetros:
<script type="text/javascript"> o devuelve cero si son iguales
semana = new Array("lunes", o menor que cero si el primer parmetro es
"martes","mircoles","jueves","viernes","sabado", menor que el segundo
"domingo") o mayor que cero si el segundo parmetro es
menor que el primero
for (i=0;i<7;i++){
document.write('Indice ' + i + ' de la semana: ' + Clase Date
semana[i] + '<br>')
Permite manejar fechas y horas.
}
Declaracin de un objeto de la clase Date
document.write("<h1>Longitud del array: " +
semana.length + " </h1>" ) Fecha = new Date();
</script> En este caso, como vimos anteriormente si no
</body></html> agregamos parmetros, el objeto Fecha contendr la
Ejemplo 38 fecha y horas actuales, obtenidos segn el reloj del
sistema.
Si queremos asignar una fecha a una variable se
procede utilizando parmetros, se debe tener en cuenta
que los meses comienzan en cero.

Ejemplo: cumple = new Date(2000,11,23) WIDTH: ancho de la imagen

HEIGTH: alto de la imagen
Mtodos de Date BORDER: ancho del borde que se establece a la
El objeto Date utiliza en sus mtodos, para asignar imagen
valores el prefijo set y para obtener valores el prefijo get. ALT: utilizado para navegadores que no visualizan la
getTime() - setTime(mls): obtiene y asigna, imagen
respectivamente, fecha y hora tomados como HSPACE: espacio horizontal entre imgenes
milisegundos transcurridos desde el 1 de enero de 1970 VSPACE: espacio vertical entre imgenes
getYear() setYear(ao):obtiene y asigna el ao de la
fecha, entre 1900 y 1999 en dos dgitos, no es Declaracin del objeto imagen:
recomendable. Activa = new Image() la primera letra en mayscula.
getFullYear() setFullYear(ao): obtiene y asigna el
ao de la fecha, en cuatro dgitos. Luego se establece el lugar en donde se encuentra la
getMonth() setMonth(mes) imagen. Si se encuentra en el mismo directorio de la
getDate() setDate(dia) pagina, se procede de la siguiente manera:
getHours() setHours(horas) Activa.src = nombrImagen.gif
getMinutes() setMinutes(minutos) Para saber si el navegador entiende los objetos de
getSeconds() setSeconds(segundos) imagen, se usa la siguiente lnea:
getDay(): devuelve el da de la semana en formato if (document.images), si devuelve true (verdadero),
nmero del 0 al 6. entonces realiza la tarea
Clase Image Ejemplo de Rollover o imgenes de sustitucin:

Esta clase representa una imagen. Est disponible desde en este ejemplo se cuenta con dos imgenes, una de las
Netscape 3 y Explorer 4. cuales se carga junto a la pgina. Al pasar el mouse por
la imagen se cambia por una segunda.
Propiedades de Image <HTML><HEAD>
SRC: contiene la direccin del archivo con la imagen <SCRIPT LANGUAJE="JavaScript">
LOWSRC: es la imagen que se cargue antes que la  propiedades y mtodos, por ejemplo: saber la longitud en
</SCRIPT> caracteres o extraer una porcin del texto o cambiar el
</HEAD> texto a maysculas, etc.
<BODY>
<A HREF = "valida.htm" Declaracin del objeto String:
onMouseOver="activar('prueba');" Cadena = Esta es un objeto de la clase string
onMouseOut="noactivar('prueba');">
<IMG NAME ="prueba" SRC = "right.gif" BORDER = 0> Propiedades de String
</A>
length: Esta clase solo tiene la propiedad length, que
</BODY></HTML>
Ejemplo 39
guarda el nmero de caracteres del string.
Esto se hace dentro de un vnculo <A HREF...., la

Mtodos de String
razn es que los eventos onMouseOver y onMouseOut Presentamos ac los mtodos ms usados para
son admitidos por la etiqueta <IMG. manipular los strings, existen otros que sirven para
No olvidar el atributo NAME=nombre_de_imagen, aplicar estilos a los textos, y es como usar lenguaje
esto es para identificarla posteriormente. HTML.
Tal vez este cdigo parezca un poco reiterativo, ya que charAt(indice): devuelve el carcter que hay en la
se declara dos veces document[nombreimg], pero posicin indicada por indice, las posiciones comienzan
recuerde que cada vez que se convoca una imagen, el en cero.

indexOf(carcter,desde): Devuelve la posicin en que <script>

se encuentra el carcter , el segundo parmetro es  log(): Logaritmo neperiano de un nmero
</script> max(): devuelve el mayor de dos nmeros dados.
</body></HTML> Min(): devuelve el menor de dos nmeros dados.
Ejemplo 40 Pow(): trabaja con dos parmetros y devuelve el
primer nmero elevado al segundo.
Clase Math en JavaScript random(): Devuelve un nmero aleatorio entre 0 y 1.
Proporciona mecanismos para realizar operaciones round(): Redondea al entero ms prximo
matemticas complejas. Trabaja directamente con la sin(): devuelve el seno del nmero en radianes
clase Math, por lo que no usaremos la instruccin new. sqrt(): raiz cuadrada de un nmero
tan(): Tangente de un nmero en radianes
Propiedades de Math Ejemplo de la clase math:
E: constante de Euler.
LN2: Logaritmo neperiano de 2 <HTML><HEAD><TITLE>
LN10: Logaritmo neperiano de 10 Ctedra de Laboratorio 1 - Carrera de Programador
LOG2E: Logaritmo en base 2 de E Universitario
LOG10E: Logaritmo en base 10 de E </TITLE></head>
PI: nmero PI 3,1416... <body>
SQRT1_2: Raiz cuadrada de <script>
SQRT2: Raiz cuadrada de 2  historial o los distintos frames de la ventana.

</script> JavaScript sabe que todos los objetos comienzan en
</body></HTML> window, aunque no lo especifiquemos, podramos
Ejemplo 41 escribir: window.document.write(hola) y estara muy
bien.
VI - Jerarqua de Objetos del navegador En la figura se muestra un esquema elemental de la
jerarqua de objetos:
Al cargar una pgina, el navegador crea una jerarqua de
objetos en memoria que permite controlar los elementos
de dicha pgina. Es fundamental conocer esta jerarqua
Propiedades de los objetos
para poder controlar la pgina con Javscript. Las propiedades de los objetos pueden ser otros objetos,
Encabeza esta jerarqua el objeto window, que ofrece el ejempllo ms claro es el objeto document, como
una serie de propiedades y mtodos para controlar el describimos anteriormente.
aspecto de la ventana, la barra de estado, abrir ventanas
secundarias, etc. Por otro lado da acceso a otros objetos Objeto Window
como el objeto document que, como ya hemos visto, El principal objeto de JavaScript es el objeto window, de
trabaja sobre la pgina web que se est visualizando, el hecho ya hemos trabajado con l, y es el nico que
puede ejecutar tareas sin ser llamado, por ejemplo
window decimos alert(algo) en lugar de decir
window.ALER(algo).
Este objeto define ventanas e incluye los objetos
referentes a la barra de tareas, al documento, etc.
location document history
Propiedades del objeto window
Solo nombraremos las propiedades ms usadas:
link form image closed: ventana cerrada
defaultStatus: Texto por defecto en la barra de estado
document: contiene la pgina web sobre la que se
Elementos de formulario est trabajando
frame: frame de una pgina wweb se accede por su
Figura 10: Jerarqua de objetos nombre.

history: objeto historial de las pginas visitadas. Close(mensaje): cierra la ventana.

locationbar: objeto barra de direcciones de la ventana. Alert(mensaje): Muestra una ventana de dilogo,
menubar: objeto barra de mens de la ventana. como se explic anteriormente
name: Nombre de la ventana Confirm(mensaje): ventana de dilogo con el mensaje
self: ventana o frame actual y con dos posibles opciones.
status: texto de la barra de estado Prompt(mensaje,sugerencia): anteriormente usado.
toolbar: objeto barra de herramientas. Muestra el mensaje, siendo sugerencia el valor inicial.
La opcin OK el mtodo devuelve la cadena ingresada,
Muchas de estas propiedades no funcionan en algunos si oprime Cancelar, devuelve el valor null (false)
navegadores SetTimeout(funcin,tiempo): Llama a funcin cuando
haya pasado el tiempo establecido en milisegundos.
Mtodos de window back(): ir una pgina atrs en el historial
[variable] = window.open(URL, nombre, propiedades) blur(): Quitar el foco de la ventana actual
Esta frase permite crear y abrir una nueva ventana. En focus(): coloca el foco de la aplicacin en la ventana.
este caso, que es opcional, se asigna la ventana a una forward(): Ir una pgina adelante
variable para poder acceder a ella. home(): ir a la pgina de inicio del explorador.
Qu significa lo que est entre parntesis? MoveBy(pixelsX,pixelsY): mueve la ventana de
Recuerde que la direccin URL es la direccin de la acuerdo a los pixeles que se indican por parmetro.
ventana que estamos abriendo. print(): muestra la ventana de impresin del
El nombre es el que queremos que se utilice como navegador.
parmetro de un TARGET. resizeBy(ancho,alto): redimensiona la ventana del
Propiedades navegador para que ocupe el espacio indicado por
o Toolvar[= yes/no] parmetros
o Location[=yes/no]
o directories[=yes/no] Barra de Estado
o status[=yes/no] Sirve para controlar la barra de estado. Si deseamos que
o menubar[=yes/no] la pgina tenga un mensaje en la barra de estado,
o scrollbars[=yes/no] podemos hacerlo de dos formas diferentes:
o resizable[=yes/no] Con precarga en la declaracin de body:
o width[=yes/no]
o heigth[=yes/no]

<BODY onLoad="window.defaulStatus='Esta es mi barra Anchor: ancla o marcador de una pgina, trabaja

de estado';return true"> como en HTML.
O dentro de un script como se muestra a fgColor: color del texto
continuacin: lastModified: fecha de la ltima modificacin
<script> linkColor: Color de los enlaces
window.status='Barra de estado!!!! vlinkColor: color de los enlaces visitados.
</script>
Ejemplo 42: Barra de estado Mtodos de document
Solo nos ocuparemos de los mtodos ms usados.
Por medio de un botn: close(): cierra el flujo del documento
<HTML> open(): abre el flujo del documento.
<BODY> write(): Escribe dentro de la pgina web
<form> writeln(): escribe en el documento e inserta un salto
<input type="button" value="Mirame" de lnea al final.
onclick="window.status='barra de estado'">
</form>
</BODY> Pruebe los siguientes ejemplos:
</HTML> 1) Ultima modificacin: lastModifiied
Ejemplo 43
<html><HEAD>
Objeto document <script type=text/javascript>
Representa al documento HTML en que estamos function ultima(){
trabajando. document.write('Ultima modificacin:
'+document.lastModified)
Propiedades de document }
Se muestran a continuacin las propiedades ms </SCRIPT>
usadas: </HEAD>
alinkColor: color de los enlaces activos <body>
bgColor: color de fondo del documento <script>
ultima()
</script>

</body></html> En el ejemplo, se supone que se dispone de cuatro

Ejemplo 44 imgenes, la salida sera:
VII Ejemplos con Imgenes

Una forma fcil de trabajar con imgenes es embebiendo
cdigo HTML con JavaScript de la siguiente forma:
<html>
<body>
cual=parseInt(prompt("ingrese un nmero:",""));
p=isNaN(cual);
/*en este caso debe ingresar un nmero entre 1 y 4, en
caso de que no ingres un nmero o est fuera de
rango, devuelve error*/
if (p) {
alert("error no ingres numero")
}else{
if (cual<1||cual>4){
alert("fuera de rango")
}else{
document.write('<img
src="fotos/img'+cual+'.jpg">')
}
}
</script>
</body>
Ejemplo 45 Figura 11: HTML + JavaScript

Con botones y window.open Ejemplo 46

Vista en el Browser:
En este ejemplo se muestra un catlogo de fotos que
permiten motrar otra, al presionar el botn ver.
<html><head>
<link rel="StyleSheet" href="estilo.css" type="text/css">
</head>
<body>
<h1><b>Fotos</b></h1>
<table>
<tr><td>
<img src="fondo_chico.jpg"><br>
<input type= button value=ver
onclick="window.open('fondo.jpg','ventana1','width=500,h
eight=300')">
</td><td> Al presionar el botn ver:
<img src="auto_chico.jpg"><br>
onclick="window.open('auto1.1.jpg','ventana2')"><br>
</td><td>
<img src="auto2_chico.jpg"><br>
onclick="window.open('auto2.jpg','ventana3','')">
</td><td>
<img src="che_chico.jpg"><br>
onclick="window.open('che.jpg','ventana4','width=500,hei
ght=400, top=0, left=0, toolbar=no,location=no,
status=no,menubar=no,scrollbars=no, resizable=no')">
</td><tr></table>
</body>
</html> Figura 12: Foto activada luego de presionar botn ver

Convocar imgenes mediante document <body text=white>

Una forma fcil de convocar imgenes es mediante el <center><h1>Fotos</h1></center>
uso de document, de la siguiente manera: <form>
<center>
document.nombre_imagen.src=imagen.jpg <img src="img1.jpg" width="600" heigth="75"
name="kkk"><br>
Siendo nombre_imagen, coincidente con el nombre <input type=button name="_foto" value="<<--"
de la imagen convocada en el documento html: onClick="cambia(-1,6)"> <input type=button
name="_foto" value="-->>" onClick="cambia(1,6)">
<img src="img1.jpg" name=" nombre_imagen "> </center>
</form>
Ejemplos con funciones Carrusel de Fotos </body>
En este ejemplo se trabaja con las siguientes variables: </html>
Foto: definir la foto que se ver Ejemplo 48: Carrusel de fotos
Total: es el nmero total de fotos
Mas: definir si el carrusel va hacia adelante o hacia
atrs.
foto = 1;
function cambia(mas, total){
foto = foto + mas;
if (foto > total){
foto = 1}
if (foto < 1){
foto = total;}
document.kkk.src = "img"+foto+".jpg"
}
</script>
Ejemplo 47: funcin para navegar entre las fotos

Vista en el Browser <img src="img1.jpg" width="600" heigth="75"

name="kkk"><br>
<input type=button name="_foto" value="<<--"
onClick="cambia(-1,6)">
<input type=button name="_foto" value="-->>"
onClick="cambia(1,6)"></center>
</form>
</body>
</html>
Ejemplo 49: HTML que llama a EXT.JS
foto = 1;
function cambia(mas, total){

foto = foto + mas;
if (foto > total){
foto = 1}
if (foto < 1){
foto = total;}
Figura 13: vista en el browser del carrusel document.kkk.src = "img"+foto+".jpg"
Carrusel de fotos con funcin en archivo externo }
<html>
<head> Ejemplo 50: EXT.JS
<script src="_EXT.JS">
</script>
</head>
<body text=white>
<center><h1>Fotos</h1></center>
<form>
<center>

Indice Tipos de datos ........................................................................ 8

Tipos de variables .................................................................. 8
I - PRESENTACIN DE JAVASCRIPT .......................... 3 2.Qu son los operadores ......................................................... 8
Aritmticos:............................................................................ 9
INTRODUCCIN ............................................................. 3 Unarios: ............................................................................ 10
De Asignacin ...................................................................... 10
Elementos bsicos para programar en JavaScript ............... 3 Operadores de incremento ............................................... 11
Qu se necesita para programar un JavaScript? .................... 3 Operadores lgicos........................................................... 11
Donde se escribe un JAVASCRIPT? .................................... 4 Operadores de Comparacin ............................................ 13
Formas de Ejecutarlo ............................................................. 4 Orden de Precedencia de los operadores ............................. 13
Forma de ocultar un JAVASCRIPT en navegadores
antiguos: ................................................................................ 4 ANEXO 1 ....................................................................... 13
Tener en cuenta que: .......................................................... 5 Efectos rpidos ..................................................................... 13
Quien interpreta las instrucciones? ........................................ 5 1. Uso de ventanas de alerta ............................................. 13
2. Interactuando con el usuario ventana de confirmacin
Nuestro primer JavaScript ..................................................... 5
.......................................................................................... 14
3. Ventana de Prompt ....................................................... 14
II - ELEMENTOS BSICOS ............................................ 7
III - FLUJO DEL PROGRAMA ...................................... 16
II - ELEMENTOS BSICOS ............................................ 7
Comentarios: ............................................................................ 7 ESTRUCTURAS DE CONTROL ................................... 16
Textos ........................................................................................ 7 Toma de decisiones o bifurcacin condicionales ................. 16

Estructura IF......................................................................... 16
Estructura Switch ................................................................. 16
VARIABLES Y OPERADORES EN JAVASCRIPT......... 7 Vista en el Browser .......................................................... 17
1. Qu son las variables:.......................................................... 7 Bucles ...................................................................................... 18
Declaracin de variables........................................................ 8 Bucle FOR ........................................................................... 18
Ambito de las variables ......................................................... 8 Bucle WHILE ...................................................................... 19

Bucle do..while .................................................................... 19 Clase Date ............................................................................... 29

Declaracin de un objeto de la clase Date ........................... 29
IV - FUNCIONES ........................................................... 21 Mtodos de Date .................................................................. 30
Clase Image............................................................................. 30
QU ES UNA FUNCIN? ............................................. 21 Propiedades de Image .......................................................... 30
Sintaxis ................................................................................ 21 Declaracin del objeto imagen: ........................................... 30
Parmetros de las funciones ................................................ 22 Activa.src = nombrImagen.gif...................................... 30
Sintaxis: ........................................................................... 22 Ejemplo de Rollover o imgenes de sustitucin: ................. 30
Retorno de la funcin: ..................................................... 23
Mltiples retornos: .......................................................... 24 Clase String............................................................................. 31
Funciones bsicas ............................................................ 24 Declaracin del objeto String: ............................................. 31
Propiedades de String .......................................................... 31
V - OBJETOS EN JAVASCRIPT .................................. 26 Mtodos de String ................................................................ 31
Ejemplo de string: ............................................................ 32
QU ES UN OBJETO? ................................................. 26 Clase Math en JavaScript ..................................................... 33
Propiedades de Math ............................................................ 33
Cmo instanciar un objeto?.................................................. 26
Mtodos de Math ................................................................. 33
Cmo se accede a las propiedades y mtodos de un objeto? Ejemplo de la clase math: ................................................ 33
................................................................................................. 27
VI - JERARQUA DE OBJETOS DEL NAVEGADOR .. 34
CLASES PREDEFINIDAS ............................................ 27
Propiedades de los objetos..................................................... 34
Clase Array ............................................................................ 27
Asignar valores al Array: .................................................... 27 OBJETO WINDOW ....................................................... 34
Captar valores de un Array .................................................. 28
Tipos de datos en un Array.................................................. 28 Propiedades del objeto window ............................................ 34
Otra forma de inicializar el Array semana sera: ................. 29
Propiedades del Array ......................................................... 29 Mtodos de window................................................................ 35
Mtodos del Array .............................................................. 29 Qu significa lo que est entre parntesis? ...................... 35
Barra de Estado .................................................................... 35

OBJETO DOCUMENT .................................................. 36 Ejemplo 16 .................................................................... 16

Ejemplo 17 .................................................................... 16
Propiedades de document ..................................................... 36 Ejemplo 18: Este ejemplo solicita el ingreso de un
nmero de foto y la muestra .......................................... 17
Mtodos de document ........................................................... 36 Ejemplo 19 .................................................................... 18
Ejemplo 20 .................................................................... 19
VII EJEMPLOS CON IMGENES ................................. 37 Ejemplo 21 .................................................................... 19
Con botones y window.open ............................................... 38 Ejemplo 22 .................................................................... 20
Vista en el Browser: ........................................................ 38 Ejemplo 23 .................................................................... 21
Convocar imgenes mediante document ......................... 39 Ejemplo 24 .................................................................... 21
Ejemplos con funciones Carrusel de Fotos .................. 39 Ejemplo 25 .................................................................... 22
Vista en el Browser ......................................................... 40 Ejemplo 26 .................................................................... 22
Carrusel de fotos con funcin en archivo externo ........... 40 Ejemplo 27 .................................................................... 23
Ejemplo 28 .................................................................... 23
Ejemplo 29 .................................................................... 24
Tabla de Ejemplos Ejemplo 30 .................................................................... 24
Ejemplo 31 .................................................................... 24
Ejemplo 1......................................................................... 1
Ejemplo 32 .................................................................... 25
Ejemplo 2......................................................................... 6
Ejemplo 33 .................................................................... 25
Ejemplo 3......................................................................... 6
Ejemplo 34 .................................................................... 25
Ejemplo 4......................................................................... 7
Ejemplo 35 .................................................................... 27
Ejemplo 5......................................................................... 7
Ejemplo 36 .................................................................... 28
Ejemplo 6......................................................................... 8
Ejemplo 37 .................................................................... 29
Ejemplo 7......................................................................... 9
Ejemplo 38 .................................................................... 29
Ejemplo 8......................................................................... 9
Ejemplo 39 .................................................................... 31
Ejemplo 9: con ParseInt ................................................. 10
Ejemplo 40 .................................................................... 33
Ejemplo 10 ..................................................................... 10
Ejemplo 41 .................................................................... 34
Ejemplo 11 ..................................................................... 11
Ejemplo 42: Barra de estado ......................................... 36
Ejemplo 12 ..................................................................... 11
Ejemplo 43 .................................................................... 36
Ejemplo 13 ..................................................................... 12
Ejemplo 44 .................................................................... 37
Ejemplo 14 ..................................................................... 13
Ejemplo 45 .................................................................... 37
Ejemplo 15 ..................................................................... 13
Ejemplo 46 .................................................................... 38

Ejemplo 47: funcin para navegar entre las fotos .......... 39

Ejemplo 48: Carrusel de fotos........................................ 39
Ejemplo 49: HTML que llama a EXT.JS ........................ 40
Ejemplo 50: EXT.JS....................................................... 40
Tabla de Figuras
Figura 1 ........................................................................... 9
Figura 2 ........................................................................... 9
Figura 3: Sin ParseInt .................................................... 10
Figura 4: asignacin ...................................................... 11
Figura 5: ventana de alerta ............................................ 14
Figura 6: ventana Confirm ............................................. 14
Figura 7: Ventana de Prompt ......................................... 15
Figura 8: ejemplo con prompt y switch .......................... 17
Figura 9: prompt, switch e imagen ................................. 18
Figura 10: Jerarqua de objetos ..................................... 34
Figura 11: HTML + JavaScript ....................................... 37
Figura 12: Foto activada luego de presionar botn ver.. 38
Figura 13: vista en el browser del carrusel .................... 40

JS Bases

Cargado por

Información del documento

Título original

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

JS Bases

Cargado por

Copyright:

Formatos disponibles

Bases de Javascript

Bases de JavaScript by Ana Nieves Rodrguez is licensed under a

Ing. Ana Rodrguez Pag:2/44

Microsoft cre el JavaScript que se desarroll para

Introduccin Elementos bsicos para programar en

Ing. Ana Rodrguez Pag:3/44

Las rutinas de JavaScript se escriben en un documento O se puede realizar un archivo externo.

Ing. Ana Rodrguez Pag:4/44

Ing. Ana Rodrguez Pag:5/44

Ing. Ana Rodrguez Pag:6/44

II - Elementos bsicos document.write('texto que saldr en el script')

Ing. Ana Rodrguez Pag:7/44

o DEBEN comenzar con un carcter o Locales: cuando son declaradas en un tramo de

Ing. Ana Rodrguez Pag:8/44

operadores. A continuacin se listan los operadores a=prompt("ingrese numero a","");

NOTA1: en muchos navegadores, el operador de suma

Ing. Ana Rodrguez Pag:9/44

Ejemplo de operadores unarios:

Ing. Ana Rodrguez Pag:10/44

num1 += 4; // asignacin con suma, en este caso se

Ing. Ana Rodrguez Pag:11/44

Ing. Ana Rodrguez Pag:12/44

//fin de tabla escriba lo que se encuentra entre parntesis en un

Operadores de Comparacin Efectos rpidos

en este caso incrustamos el cdigo de javascript dentro

Ing. Ana Rodrguez Pag:13/44

Figura 5: ventana de alerta Figura 6: ventana Confirm

2. Interactuando con el usuario ventana de 3. Ventana de Prompt

Ing. Ana Rodrguez Pag:14/44

Figura 7: Ventana de Prompt

El comando Prompt posee dos lugares a los que

Ing. Ana Rodrguez Pag:15/44

Un detalle que debe tener en cuenta es que si dentro de

En el siguiente ejemplo se solicita al usuario una Estructura Switch

Ing. Ana Rodrguez Pag:16/44

case valor2: case "3":

Ing. Ana Rodrguez Pag:17/44

Figura 9: prompt, switch e imagen En el ejemplo se dice:

Ing. Ana Rodrguez Pag:18/44

Bucle WHILE Bucle while: primero se evala la condicin y luego

Ing. Ana Rodrguez Pag:19/44

While Mientras no se cumpla la condicin, en el

NOTA: En el caso del bucle do..while, la tarea se realiza

Realice el siguiente ejemplo para comprobar lo que se

Este ejemplo muestra claramente que NUNCA ingresar

Ing. Ana Rodrguez Pag:20/44

2. En otra parte de la pgina

Sintaxis Otra forma de llamar a la funcin:

Ing. Ana Rodrguez Pag:21/44

Ing. Ana Rodrguez Pag:22/44

Mltiples parmetros: Nota: Los parmetros de las funciones se pasan por

Ing. Ana Rodrguez Pag:23/44

Ing. Ana Rodrguez Pag:24/44

sum_str = valor+valor2; p_i_valor = parseFloat(valor);

//los valores sern sumados

Ing. Ana Rodrguez Pag:25/44

En resumen se puede decir que un objeto de software es

Ing. Ana Rodrguez Pag:26/44

<html> Clases predefinidas

Cmo se accede a las propiedades y mtodos Declaracin de un Array

Ing. Ana Rodrguez Pag:27/44

Semana[1] = martes dentro de sus casillas distintos tipos de datos, o sea en

Ing. Ana Rodrguez Pag:28/44