Por: Ing.

Edwin Calle Terrazas

Versión 1.1
La única razón de ser de JavaScript son las páginas web. Con JavaScript no
pueden construirse programas independientes, sólo pueden escribirse scripts que
funcionarán en el entorno de una página web, interpretado por un explorador. De
ahí la importancia de conocer para que explorador escribimos los guiones, porque
no todos los exploradores integran en la misma forma los guiones JavaScript.

TIPOS DE DATOS
Javascript reconoce seis tipos de valores diferentes: numéricos, lógicos,
objetos, cadenas, nulos e indefinidos.
JavaScript tiene la peculiaridad de ser un lenguaje débilmente tipado, esto es,
una variable puede cambiar de tipo durante su vida, por ejemplo uno puede
declarar una variable que ahora sea un entero y más adelante una cadena.

Números Enteros o coma flotante.

Boleanos True o False.
Cadenas Los tipos de datos cadena deben ir delimitados por comillas simples
o dobles.
Objetos Obj = new Object();
Nulos Null

2
OPERADORES RELACIONALES

Operador Descripción
== " Igual a" devuelve true si los operandos son iguales
!= " No igual a" devuelve true si los operandos no son iguales
> " Mayor que" devuelve true si el operador de la izquierda es mayor que el de la
derecha.
>= " Mayor o igual que " devuelve true si el operador de la izquierda es mayor o
igual que el de la derecha.
< " Menor que" devuelve true si el operador de la izquierda es menor que el de la
derecha.
<= "Menor o igual que" devuelve true si el operador de la izquierda es menor o igual
que el de la derecha.

OPERADORES LOGICOS
Operador Descripción
&& Operador «y» se utiliza para realizar comparaciones, es decir, para comprobar
varias condiciones. El resultado sólo será true si todas las comparaciones lo son.
|| Operador «o» se utiliza para realizar comparaciones compuestas y sólo
devolverá false cuando todas las comparaciones los sean. Es decir basta que una
comparación sea true para que devuelva el valor true.

3
OPERADORES ARITMETICOS
Operador Nombre Ejemplo Descripción
+ Suma 5+6 Suma dos números
- Substracción 7-9 Resta dos números
* Multiplicación 6*3 Multiplica dos números
/ División 4/8 Divide dos números
% Módulo: el resto después Devuelve el resto de dividir ambos números,
7%2
de la división en este ejemplo el resultado es 1
++ Incremento. a++ Suma 1 al contenido de una variable.
-- Decremento. a-- Resta 1 al contenido de una variable.
- Invierte el signo de un
-a Invierte el signo de un operando.
operando.

4
FUNCIONES GLOBALES
A sí como JavaScript proporciona objetos predefinidos, también posee una serie
de funciones predefinidas. Se trata de las funciones: eval, isNan, Number,
String, parseInt, parseFloat, escape, unescape.
Eval(expr)
Se usa para evaluar una cadena con código JavaScript sin referirse a un objeto
concreto, donde expr es la cadena a evaluar.

isNaN(arg)
Determina si el argumento es un valor indefinido (el valor no es número)
parseInt(cadena, [base])
Convierte una cadena de caracteres en un valor numérico, esta función lleva
como argumento la cadena a convertir a entero y opcionalmente puede llevar un
segundo argumento para indicar la base de numeración en que está escrita la
cadena. Si se omite se supone que la cadena representa un número en base 10.
La cadena sólo podrá contener caracteres válidos para el sistema de numeración
indicado: dígitos (0..9 para la base 10, 0 1 para números binarios, 0..7 para
sistema octal, 0..9, A..F para sistema hexadecimal) y signo (+, -).
Ejemplo: var x = "14";
document.write(parseInt(x));

5
parseFloat(str)
Convierten una la cadena que se le pasa como argumento a un valor numérico
de tipo flotante. Los caracteres válidos de la cadena son los mismos que en
parseInt mas el punto decimal y el exponente (E).
Ejemplos: var x = "14.5E2";
document.write(parseInt(x));

Number(objArg) and String(objArg)

Permiten convertir el objeto pasado como argumento a un número o a una
cadena. Por ejemplo:
var hoy = new Date();
hoy.getDate();
document.write(String(hoy));

6
LA CLASE MATH
Con ella podemos usar las funciones matemáticas avanzadas y de constantes predefinidas

Ejemplos:
var valor = Math.sqrt(36); //devuelve la raiz cuadrada de 36
var valor = Math.abs(- 45); //devuelve el valor absoluto, o sea sin signo.
var x = Math.floor(4.75); //redondea el número
var mayor = Math.min(12, 5); //devuelve el menor valor
var potencia = Math.pow(2, 4); //devuelve el valor de 2^4
var azar = Math.random()*10; //devuelve un número randómico entre 0 y 10
var x = Math.cos(60); //devuelve el coseno de 60

7
DONDE INTRODUCIR EL CODIGO DE JAVA SCRIPT

Existen distintos modos de incluir lenguaje JavaScript en una página.

La forma mas frecuente de hacerlo es utilizando la directiva <script> en un documento
HTML (se pueden incluir tantas directivas <script> como se quiera en un documento).
El formato es el siguiente:

<html> <html>
<head> <head>
<script type="text/javascript"> </head>
document.write("Este es un mensaje de javascript"); <body>
</script>
</head> <script type="text/javascript">
<body> document.write("Este es un mensaje de javascript");
</script>
</body>
</html> </body>
</html>

8
CODIGO JAVA SCRIPT A TRAVÉS DE UN ARCHIVO

Podemos trabajar con javascript desde otro archivo. Esto lo realizamos con SRC, donde
escribimos la ubicación y nombre del archivo con la extensión js.
<html>
<head>
<script type="text/javascript" src="script1.js">
</script>
</head>
<body>

</body>
</html>

---------------------------------- script1.js --------------------------------

document.write("Esto es desde un archivo JS externo");

9
EJEMPLO

<html>
<head> <title>Variables</title> </head>
<body>
<script language="JavaScript">
var a = 8;
var s="hola mundo";
var f=2.3;
var b=false;
var x=-35;
var d=new Date();
var p = Math.pow(2, 3);
document.write(a); document.write("<br>");
document.write(s); document.write("<br>");
document.write(f); document.write("<br>");
document.write(b); document.write("<br>");
document.write(x); document.write("<br>");
document.write("Hoy es:" + d.getDate() + "/" + d.getMonth() + "/" + d.getYear());
document.write("<br>");
document.write(p);
</script>
</body>
</html>

10
ESTRUCTURAS DE SELECCIÓN SIMPLE Y MÚLTIPLE

if (x > y)
alert(‘ x es mayor que y’);
else
alert(‘y es mayor que x’);

switch (numero) {
case 1: {
alert(‘soy el numero uno’);
}break;

case 2: {
alert(‘soy el numero dos’);
}break;

case 3: {
alert(‘soy el numero tres’);
}break;

default :{
alert(‘soy otro número’);}
}

11
ESTRUCTURAS DE CONTROL WHILE, DO WHILE Y FOR

var i=1; var i =1;

while (i <= 3) { do{
document.write(i); document.write(i);
i++; i++;
} }
while (i <= 10)

for (i=0; i < 10; i++){

document.write(i);
}

FUNCIONES
La creación de una función puede realizarse por el método tradicional y común a la mayoría de
lenguajes de programación:
function sumar(a, b) {
return a+b;
}

function mensaje(){
alert(‘esta función no retorna un valor’);
}

12
 MANEJO DE FUNCIONES

<html> var n=5;

<head> <title>Funciones</title> </head> f=factorial(n);
<body> document.write("El factorial de " + n + " es: " + f);
document.write("<br>");
<script type="text/javascript">
var x=2; var y=5;
function factorial(n) {
p=potencia(x,y);
i=1; f=1;
document.write("La potencia de " + x + " elevado a "
while(i<=n) { + y + " es: " + p);
f=f * i; </script>
i++;
} </body>
return f; </html>
}

function potencia(x,y) {
p=1;
for(i=1;i<=y;i++)
p=p * x;

return p;
}

13
QUE ES UN EVENTO
Los eventos ocurren cuando algún tipo de interacción tiene lugar en una página web.
Puede ser el usuario haciendo click sobre algo, moviendo el ratón sobre un
determinado elemento, o presionando determinadas teclas del teclado. Un evento
también puede ser algo que ocurre en el navegador, como cuando la página haya
terminado de cargarse, o que usuario se mueve por el scroll, o redimensione la
página.
A través del uso de JavaScript, podemos detectar cuando determinados eventos
ocurren, y realizar acciones en respuesta a esos eventos.
Ejemplos:

 Presionar una tecla en una caja de texto

 Seleccionar un item de un comboBox
 Al cerrar una página se muestra mensaje
 Al pulsar botón se limpian casillas de texto
 Al seleccionar un item de un combo cambia de color el fondo de la página, etc.

COMO CAPTURAR UN EVENTO

Con ‘handlers’ o manejadores
Ejemplos: onClick, onLoad, onDblClick,…etc

14
 ‘Handlers’ mas importantes
 Tipo de manejador  Etiquetas

- onClick, cuando el usuario hace Button, document, Checkbox, Link,

‘clic’ Radio, Reset, Submit
- onLoad, al terminar de cargar una
Image, Layer, window
página

- onFocus, al coger el foco un Button, Checkbox, FileUpload,

control Layer, Password, Radio, Submit,
Reset, Select, Textarea….
- onResize, al modificar el tamaño window
de la ventana

15
 ‘Handlers’ mas importantes

 Tipo de manejador  Etiquetas

- onBlur, cuando un elemento Button, Checkbox, Layer, Password,

pierde el foco Radio, Select, Submit, Text, Textarea, etc
- onChange, el valor de un FileUpload, Select, Text, Textarea
campo de formulario cambia

- onKeyPress, cuando el document, Image, Link, Textarea

usuario pulsa una tecla

- onKeyDown, cuando el document, Image, Link, Textarea

usuario mantiene la tecla
presionada

16
 ‘Handlers’ mas importantes

 Tipo de manejador  Etiquetas

- onSelect, cuando se selecciona Text, Textarea

texto o área de texto

- onUnload, el usuario cierra la

window
página

- onReset, cuando el usuario Form

limpia el formulario

-onMouseDown, cuando el Button, document, Link

usuario pulsa el boton del raton

17
 ‘Handlers’ mas importantes

 Tipo de manejador  Etiquetas

- onMouseUp, cuando el usuario Button, document, Link

suelta el boton del mouse
- onMove, cuando se mueve una window
ventana o un marco

- onDblClick, cuando el usuario document, Link

hace doble click
--onDragDrop, cuando el usuario window
arrastra y suelta

18
◦ El código manejador esta en el interior del
código html

◦ Patrón
<‘Etiqueta’ ‘manejador’=‘código a ejecutar’>

◦ Ejemplo
<input type="button" value="Pulsar boton "
onClick="window.alert('Hola mundo..!!!')";>

19
<html>
<head> <title>Ejemplo onClick</title> </head>
<body>
<center>
<input type="button" value="Pulsar boton"
onClick="window.alert('Hola mundo!')">
</center>
</body>
</html>

<html>
<head> <title>Ejemplo onLoad</title> </head>
<body onLoad="alert('Hola mundo')">
</body>
</html>

20
<html>
<head> <title>Ejemplo onFocus</title> </head>
<body>
<center>
<input type=“text" value="Al agarrar el foco muestra mensaje"
onFocus="window.alert('Hola mundo')">
</center>
</body>
</html>

<html>
<head> <title> Ejemplo onResize </title> </head>
<body onResize="alert('Hola mundo')">
</body>
</html>

21
<html>
<head> <title> Ejemplo onBlur </title> </head>
<body>
<center>
<input type="text" size=30 name="texto" value="Al perder foco
muestra mensaje" onBlur=" alert('Hola mundo!');">
</center>
</body>
</html>

22
<html>
<head> <title> Ejemplo onChange </title> </head>
<body>
<center>
<input type="text" size=30 name="texto" value="Al modificar texto
mensaje" onChange = " alert('Hola mundo')">
</center>
</body>
</html>

23
<html>
<head> <title> Ejemplo onKeyPress </title> </head>
<body>
<center>
<input type="text" size=30 name="texto" value="pulsar una tecla"
onKeyPress = "alert(‘Presionaste una tecla')">
</center>
</body>
</html>

24
<html>
<head> <title> Ejemplo onMove </title> </head>
<body>
<center>
<input type="text" size=30 name="texto" value="Al mover muestra
mensaje" onMove = " alert('Hola mundo!');">
</center>
</body>
</html>

25
<html>
<head> <title> Ejemplo onLoad </title> </head>
<body>
<center>
<input type="text" size=30 name="texto" value="selecciona el texto"
onSelect = " alert('Hola mundo!')">
</center>
</body>
</html>

26
<html>
<head> <title> Ejemplo onReset </title> </head>
<body>
<input type="text" size=30 name="texto" value= "Mi texto" onReset = " alert('Hola mundo!')">
<input type="reset" size=30 name="boton" value="Borrar" onClick = "texto.value = ' ' " >

</body>
</html>

27
<html>
<head> <title>Ejemplo onMouseDown</title> </head>
<body>
<center>
<input type="text" size=30 name="texto" value="Pulsa el boton raton aqui para
mensaje" onMouseDown = "alert('Hola mundo…!!!')">
</center>
</body>
</html>

28
<html>
<head>
<script language=javascript>
function openwindow() {
m = window.open("http://www.uagrm.edu.bo");
}
function closewindow() {
m.close()
}
</script>
</head>
<body>
<form>
<input type=button value="Abrir ventana" onclick="openwindow()">
<input type=button value="Cerrar ventana" onclick="closewindow()">
</form>
</body>
</html>

29
30
 FUNCIONES CON CONTROL BUTTON

<html>
<head> <title> Formulario con funciones</title> </head>
<script>
function factorial(n) {
var f=1;
for(i=1;i<=n;i++)
f=f * i;

return f;
}
</script>

<body>
<input type="text" size="10" name="t1">
<input type="button" size="30" name="boton" value="Calcular"
onClick = "t1.value=factorial(t1.value)" >
</body>
</html>

31
 FUNCIONES CON CONTROL BUTTON
<html>
<head> <title>Ejemplo onLoad</title> </head>
<script>
function potencia(x,y) {
var p=1;
for(i=1;i<=y;i++)
p=p * x;

return p;
}
</script>

<body> <center>
<form name="f1" method="post">
<input type="text" size=10 name="t1"> <br>
<input type="text" size=10 name="t2"> <br>
<input type="text" size=10 name="t3"> <br>
<input type="button" size=30 name="boton" value="Calcular"
onClick = "t3.value=potencia(t1.value,t2.value)">
</form> </center>
</body>
</html>

32
 FUNCIONES CON CONTROL RADIO
<HTML>
<BODY>
<script>
function potencia(x, y) {
f=1;
for(i=1;i<=y;i++)
f=f * x;
return f;
}
function suma(x,y) {
return x+y;
}
</script>
<FORM name="f1">
X <input type="text" name="t1" size="8"><br>
Y <input type="text" name="t2" size="8"><br>
R <input type="text" name="t3" size="8"><br>
<input type="radio" name="grupo" onClick="t3.value=potencia(t1.value,t2.value)"> Potencia
<input type="radio" name="grupo"
onClick="t3.value=suma(parseInt(t1.value),parseInt(t2.value))"> Sumar
</FORM>
</BODY></HTML>

33
 CONTROL SELECT, EVENTO ONCHANGE

<html>
<head> </head>
<body>
<form name="f1" action='6-Eventos2' method="Post">
Probar evento de select
<select name="s2" onChange="if(this.options[0].selected) alert('Has seleccionado A');
else if(this.options[1].selected) alert('Has seleccionado B');
else if(this.options[2].selected) alert('Has seleccionado C') ">
<option> valor A
<option> valor B
<option> valor C
</select>
</form>
</body>
</html>

34
<html>
<body>
<script>
function verificar(e) {
if(e.options[0].selected){
document.body.bgColor='#FF2200';
}
if(e.options[1].selected){
document.body.bgColor='#22FF00';
}
if(e.options[2].selected){
document.body.bgColor='#0022FF';
}
}
</script>
<form name="f1">
Seleccionar <br>
<SELECT name="s1" onChange="verificar(this)">
<OPTION>Rojo</OPTION>
<OPTION>Verde</OPTION>
<OPTION>Azul</OPTION> </SELECT>
</form>
</body> </html>

35
 OPCION COMFIRM

<html>
<head> </head>
<body>
<script>
function validar() {
var ok = confirm("¿Enviar los datos?");
if( ok == true ){
alert('dijiste que si');
}
else{
alert('dijiste que NO');
}
}
</script>

<input type="button" value="Boton" onClick="validar()"

</body>
</html>

36
 OPCION PROMPT

<html>
<head> </head>
<body>

<script>
function leer() {
var x = prompt('Introducir un numero:', ' ');
document.write("El valor leido es: " + x);
}
</script>

<input type="button" value="Boton" onClick="leer()">

</body>
</html>

37
 VECTORES
<html> <form name="f1">
<body> <center> VECTORES </center> <p> Dimensionar: <input type="text" name="t1" size="4">
<script> <p>
var v = [ ]; <input type="button" value="Cargar"
function cargar(n){ onClick="cargar(t1.value)">
for(i=0;i<n;i++) { <input type="button" value="Mostrar"
var x=prompt('Ingrese los elementos del vector',''); onClick="mostrar(t1.value)">
v[i]=x; </form>
}
} </body>
</html>
function mostrar(n){
document.write("<table border='3'>");
document.write("<tr>");
for(i=0;i<n;i++){
document.write("<td>");
document.write(v[i]);
document.write("</td>");
}
document.write("</tr>");
document.write("</table>");
}
</script>

38
39
 MENU DESPLEGABLE
<HTML>
<HEAD> <!-- Definimos estilos para el menu -->
<style type="text/css">
.itMenu { position: absolute; clip: rect( ); background: #99FF99;
visibility: hidden}
.cabMenu { position: absolute; clip: rect( ); color: #FFFF66;
background: #0033FF}
.itMenuAct { background: #CCFFFF; width: 140px }
.itMenuDes { background: #11AAFF; width: 140px }
</style>

<script type="text/javascript">
var mie =(navigator.appName.indexOf("Microsoft")>=0)
var itemOrig;
function despMenu(nombre,sn) {
obj = document.all[nombre];
if (sn>0)
obj.style.visibility = "visible";
else
obj.style.visibility = "hidden";
}
function destacar(obj, val) {
if (val==1) {
itemOrig = obj.style.backgroundColor;
obj.style.backgroundColor="Aqua"; }
else
obj.style.backgroundColor= itemOrig;
}
</script>
</HEAD> 40
<BODY>
<div id="Menu1" style="width:140px; height:21px; z-index:2;
left: 39px; top: 23px" class="cabMenu"
onMouseOver="despMenu('itMenu1',1)"
onMouseout="despMenu('itMenu1',0)">Menu desplegable
</div>
<div id="itMenu1" style="width:103px; height:75px; z-index:1; left:
39px; top: 44px" class="itMenu"
onMouseOver="despMenu(this.id,1)" onMouseout="despMenu(this.id,0)">
<div id="itMenu11" class="itMenuDes" onMouseover="destacar(this,1)"
onMouseout="destacar(this,0)" >
<a href="1-Llamada.html" >Item primero</a>
</div>
<div id="itMenu12" class="itMenuDes" onMouseover="destacar(this,1)"
onMouseout="destacar(this,0)" >
<a href="2-variables.html" >Item segundo</a>
</div>
<div id="itMenu13" class="itMenuDes" onMouseover="destacar(this,1)"
onMouseout="destacar(this,0)" >
<a href="destino1.htm" >Item tercero</a>
</div>
<div id="itMenu14" class="itMenuDes" onMouseover="destacar(this,1)"
onMouseout="destacar(this,0)" >
<a href="destino1.htm" >Item cuarto</a>
</div>
</BODY> </HTML>

41
 BUSCADOR DE PALABRAS
<html>
<head>
<title>Buscando </title>
<script language="Javascript">
function buscarTxt(texto){
if(!document.all) return
var contenido = document.body.createTextRange();
var seguir = true;
var temporal = contenido.duplicate();
var existe = temporal.findText(texto,0,0)
while(existe && seguir) {
temporal.scrollIntoView(true)
temporal.select();
//Modifica contenido para que comience al final de la palabra encontrada
contenido.setEndPoint("StartToEnd", temporal);
seguir = confirm("¿Continuar la búsqueda?")
if (seguir) {
temporal = contenido.duplicate(); //Repite la búsqueda
existe = temporal.findText(texto,0,0)
}
}

42
if (seguir)
alert("Fin del documento");
}
</script>
</head>
<body color ="#FFFFFF" >
<form name="form1" method="post" action="">
<input type="text" name="texto">
<input type="button" name="Button" value="Buscar"
onclick="buscarTxt(this.form.texto.value)">
</form>
Esta es una pagina para buscar textos. Si tienes que buscar textos, tienes que utilizar esta
pagina. Recuerda que debes probar el buscador de textos.
</body>
</html>

43