Intro A Javascript

Manual de JavaScript
JavaScript
(Manual)
1
Antes de empezar:
- Manual F.V.
Significa “manual práctico de informática”, pero realmente realmente PRÁCTICO.
- En el texto me refiero continuamente a TuCarpeta, esto es un subdirectorio de tu ordenador

donde es conveniente que grabes todos los programas de este “tu manual”.
- Todos los programas y ejercicios del manual han sido probados sin problema en el Microsoft
Internet Explorer 5.0
- Mi consejo, es que escribas de nuevo tal como te indico en el texto, cada uno de los programas
utilizando el Bloc de Notas del Windows. Sólo en el caso de que el programa no te funcione y
no descubras cuál es el error, cópialo a partir del Word en el Bloc de Notas y grábalo con otro
nombre; para poder compararlo con el tuyo y así descubrir el error.
Piensa que se aprende más descubriendo los propios errores, que avanzar sin hacer ningún error.
ÍNDICE
1. Introducción a la programación en JavaScript .................................................................................... 3
Ejercicios de autoevaluación 1 ............................................................................................................... 18
2. Estructuras de Programación .............................................................................................................. 23
3. Funciones y Arrays ............................................................................................................................. 51
4. Programación Visual .......................................................................................................................... 79
5. Programación en HTML..................................................................................................................... 95
6. Programación Orientada a Objetos .....................................................................................................139
7. JavaScript y la Web ............................................................................................................................ 173
Soluciones autoevaluación 1 .................................................................................................................. 191
2
I.- Introducción a la programación en JavaScript
1.- Introducción
- De todos los servicios que ofrece INTERNET, no cabe duda de que el más popular es la WWW
(World Wide Web).
La WWW no es más que millones de páginas en formato electrónico, con los contenidos y temáticas
más diversas a las que podemos acceder gracias a un ordenador + modem + browser (navegador).
- Una página WEB no es más que un fichero de texto (ASCII), escrito en formato HTML (Hyper Text
Markup Language = lenguaje etiquetado de hipertexto).
- El HTML es un lenguaje basado en pares de tags (etiquetas). Un tag es un código entre <>, si es de
apertura o un código entre </ > si es de cierre.
Los browsers (navegadores de Internet), son capaces de traducir estas etiquetas (tags) de forma que
presentan visualmente la página.
- Estructura de un fichero HTML
Básicamente consta de cuatro pares de etiquetas:

<HTML>
<HEAD>
<TITLE>Nuestra primera página</TITLE>
</HEAD>
<BODY>
..........................
.......................... Lo que visualizará nuestra página
..........................
</BODY>
</HTML>
El par <HTML> y </HTML>

Determina que un fichero sea HTML
El par <HEAD> y </HEAD>

Determina la cabecera del fichero HTML, que puede contener un título.
El par <TITLE> y </TITLE>

Encierra el “título”: frase de texto que aparecerá en el marco del navegador (primera línea),
al ejecutar el fichero HTML
El par <BODY> y </BODY>

Encierra el contenido de la página html, es decir lo que se visualizará en el navegador.
Los navegadores (browsers) más conocidos son:

Netscape Comunicator
Microsoft Internet Explorer
3
- Ejecuta el ―Bloc de Notas‖, es decir:

[Inicio]
Programas
Accesorios
Bloc de Notas
- Escribe:
<HTML>
<HEAD>
<TITLE>PROG000.HTM</TITLE>
</HEAD>
<BODY>
<P>Esto aparecerá en el navegador porque es un párrafo</P>
<P>Esto es otro párrafo</P>
<P>Observa lo que aparece en la línea de título</P>
<P>La línea de título es la frase que aparece en el marco
del navegador, línea superior</P>
<P>¿Está claro para qué sirven los tags P, /P?</P>
</BODY>
</HTML>
- Graba el fichero anterior con el nombre PROG000.HTM en TuCarpeta
- Ejecuta el “Explorador de Windows”. Sitúate en TuCarpeta y haz un doble click en PROG000.HTM

De esta forma, se ejecuta el navegador de tu ordenador (supondré que es el Internet Explorer) y se
“carga” la página PROG000.HTM
El navegador nos muestra la página HTML “visualmente”, para ver su código debes hacer:
Menú Ver
Código fuente
- La programación en HTML no tiene ninguna utilidad para un usuario normal, ya que en el mercado
existen herramientas que evitan la necesidad de tener que introducir manualmente los “tags”:
HotMetal, FontPage, Word, etc.
Lo que sí tienen sentido es el estudio de la programación en JavaScript.
- JavaScript es un lenguaje de programación creado por la empresa Netscape (creadora de uno de los
navegadores más conocido)
Es el lenguaje de programación más utilizado en Internet para añadir interactividad a las páginas
Web
- No confundir el JavaScript con el Java. El Java es un lenguaje de programación de propósito

general como lo son el C++ o el Visual Basic.
- Un programa en JavaScript se integra en una página Web (entre el código HTML) y es el navegador
el que lo interpreta (ejecuta). Es decir el JavaScript es un lenguaje interpretado, no compilado (no
se genera ningún tipo de fichero objeto o exe).
- Para programar en JavaScript sólo necesitamos un editor de texto (utilizaremos el Bloc de Notas del
Windows) y un navegador (utilizaremos el Microsoft Internet Explorer) para ejecutarlo.
- ¿Porqué el JavaScript y no otro lenguaje de programación?

Porque:
Es moderno (tiene pocos años)
Es sencillo (su hermano mayor: el Java, es bastante más complejo)
Es útil (el desarrollo de Internet, se prevé muy rápido en los próximos años)
Es potente: permite la moderna POO (programación orientada a objetos)
Es barato: sólo necesitamos un editor de textos (el “Bloc de Notas” está incluido en el
Windows) y un navegador (es gratuito, ya sea el “Internet Explorer” o el “Netscape”).
4
Es visual: permite la moderna “programación visual” (ventanas, botones, colores,

formularios, etc.).
En definitiva: es ideal para un primer curso de introducción a la programación.

Y has de tener en cuenta que hay un “dicho” en informática, que afirma: ―Si dominas un
lenguaje de programación, los conoces todos‖.
2.- Sintaxis básica

- Escribe, utilizando el “Bloc de Notas” del Windows, el siguiente programa:
<HTML>
<HEAD>
<TITLE>PROG001.HTM</TITLE>
<SCRIPT LANGUAGE="JavaScript">
alert("¡Hola Mundo!");
</SCRIPT>
</HEAD>
<BODY>
<P>
Programa 1 en JavaScript
</P>
</BODY>
</HTML>
- Graba el fichero anterior en TuCarpeta con el nombre Prog001.htm
- Ejecuta el programa Prog001.htm, es decir:

Ejecuta el “Explorador de Windows”
Sitúate en TuCarpeta
Clic-Click en Prog001.htm
- Estudio del Prog001.htm:

Un programa “JavaScript” se escribe integrado en una página HTML, por lo tanto no es
más que un fichero de texto que contiene una serie de pares de tags correspondientes a la
página Web (como mínimo el par: <HTML>, </HTML>), además del par de tags
característico de un programa JavaScript. Dicho fichero se ha de grabar necesariamente con
la extensión HTM (característica de una página HTML).
Un programa “JavaScript” no es más que una secuencia de ordenes, que deben terminar en
punto y coma, entre los tags:
<SCRIPT LANGUAGE=‖JavaScript‖>
y
</SCRIPT>
En nuestro Prog001.htm, hemos incluido el programa en la cabecera (HEAD) de la página,
pero podríamos colocarlo en cualquier parte del fichero htm
Nuestro primer programa JavaScript contiene una única sentencia: alert(―‖¡Hola
Mundo!‖);
Que “abre” una ventana con el mensaje que tenemos entre comillas.
Al hacer clic en el [Aceptar] de la ventana ―alert‖, se acaba el programa JavaScript (se
encuentra el tag </SCRIPT>) y continua ejecutándose la página HTML.
- Utilizando el “Bloc de Notas” escribe el siguiente programa:
5
<HTML>
// PROG002.HTM
var nom;
nom=prompt("Escribe tu nombre ","Paco");
alert("Mucho gusto "+ nom);
</SCRIPT>
</HTML>
- Grábalo en TuCarpeta con el nombre Prog002.htm
- Ejecútalo varias veces, observando detenidamente lo que sucede.
- Estudio del Prog002.htm
1º) Primera y última línea: <HTML> y </HTML>

Es decir: página html mínima que necesitamos para incluir un programa JavaScript.
2º) Segunda y penúltima líneas: <SCRIPT LANGUAGE=.....> y </SCRIPT>, es decir programa en

JavaScript
3º) Primera sentencia del programa: // PROG002.HTM

Única línea del programa que no es necesario acabarla con punto y coma.
Todas las líneas que empiezan por // son comentarios para el programador, es decir no forman parte
del programa, dicho de otra forma: el navegador si encuentra una línea que empieza por //, la salta.
4º) var nom;

Definimos una variable de nombre nom
5º) nom = prompt(―Escribe tu nombre‖,‖Paco‖);

Aparece un recuadro con un mensaje y un campo donde podemos escribir algo; el mensaje
corresponde a lo que escribimos en el primer argumento de la función prompt, encerrado entre
comillas. El segundo argumento del prompt contiene el valor que aparece por defecto en el campo
del cuadro de diálogo.
El valor del prompt es nom, es decir lo que nosotros escribamos en el cuadro será el valor que
tomará la variable nom.
Si no escribimos nada y hacemos click en [Aceptar], el prompt, es decir la variable nom tomará el
valor de Paco, porque es el valor que aparece por defecto.
6º) alert("Mucho gusto "+nom);

Aparece un cuadro con el mensaje "Mucho gusto" y a continuación el valor de la variable "nom", que
será lo que hemos escrito en el primer cuadro que nos ha aparecido.
En definitiva:
- La función prompt nos permite introducir "valores", dichos valores se han de guardar en variables,
que previamente hemos de declarar con la palabra reservada "var"
- La función "alert" muestra mensajes y/o valores de variables.
- Utilizando el "Bloc de Notas del Windows" escribe el siguiente programa:
<HTML>
// PROG003.HTM
/*Programa que sirve para calcular
el área de un rectángulo */
6
var base,altura;
base=prompt("Escribe la base del Rectángulo","");
altura=prompt("Escribe la altura del Rectángulo","");
alert("El área del Rectángulo es = "+(base*altura));
</SCRIPT>
</HTML>
- Ejecútalo varias veces. Sería conveniente utilizar números enteros y también decimales (5.72, 0.531:
observa que has de utilizar el punto decimal inglés).
- Si has ejecutado el programa una vez, para volverlo a ejecutar, no es necesario que "cierres" el
navegador, basta que hagas:
Menú Ver
Actualizar
o si quieres ir más rápido, pulsa la tecla [F5]
- Es importante que tengas claro este programa:

Declaramos dos variables (var), que necesitamos para introducir la base y la altura del
rectángulo, a través de dos "prompts":
base= prompt......
altura= prompt.....
Por último necesitamos dos "alerts" que nos muestre el resultado del programa, que es
simplemente el producto base * altura
- El único elemento nuevo que aparece en el Prog003.htm es:

/*Programa que sirve para calcular
el área de un rectángulo */
Todo lo que aparece escrito entre /* y */ no es más que un comentario para el programador, igual
que pasaba con las líneas que empezaban por //
La diferencia entre // y /* */ está en que esta última forma de incluir un comentario, nos permite
colocarlo de forma que ocupe más de una línea.
3.- Variables
- Declaración de variables
Una variable se puede declarar en JavaScript, de dos formas:
Forma Explícita: var nombre Variable;
Forma Implícita: var nombre Variable= valor;
En el último caso no es imprescindible escribir var, pero es conveniente, ya que de esta forma
localizamos rápidamente todas las variables del programa.
El "JavaScript" es un lenguaje de programación "Case Sensitive", esto es: no es lo mismo las

mayúsculas que las minúsculas. Es decir, para el JavaScript: pepe es distinto de Pepe y distinto de pEpe.
- Escribe el siguiente programa:
<HTML>
<SCRIPT LANGUAGE=''JavaScript''>
7
// PROG004.HTM
/* Programa que utiliza una variable explícita
y dos implícitas */
var Expli;
var pi=3.141592;
var radio=7;
Expli=pi*radio*radio;
alert("Área del Círculo = "+Expli);
</SCRIPT>
</HTML>
- Ejecútalo
4.- Tipos de Datos

Cuando declaramos una variable, ésta no pertenece a ningún tipo de dato en concreto, se dice que es
Undefined. Es al asignarle un valor cuando pasa a ser de uno u otro tipo, según el dato que albergue.
Existen 6 tipos de datos:

String: cadenas de texto Object: objetos
Number: valores numéricos Null: nulo
Boolean: true o false Undefined: no definido.
Podemos averiguar el tipo de dato que contiene una variable si utilizamos la función incorporada typeof

<HTML>
// PROG005.HTM
var Pepe;
var PEPE="Hola que tal ";
var pepE=75.47;
var pEpe=" ¿Como estás?";
Pepe=PEPE+pEpe;
alert("PEPE="+PEPE);
alert("PEPE es "+typeof(PEPE));
alert("pepE="+pepE);
alert("pepE es "+typeof(pepE));
alert("pEpe="+pEpe);
alert("pEpe es "+typeof(pEpe));
alert("Pepe="+Pepe);
alert("Pepe es "+typeof(Pepe));
</SCRIPT>
</HTML>
- Ejecútalo tantas veces como quieras.
8
5.- El tipo de dato "String":

En JavaScript los textos se denotan por comillas dobles o comillas simples, pero no ambas a la vez.
Variable1 = "Pepito"
Variable2 = 'Paquito'
Podemos incluir un carácter de control en una cadena de texto, si utilizamos el llamado carácter de
escape que es: \
Los caracteres de control más usados son:
\n salto de línea
\t tabulador

<HTML>
// PROG006.HTM
var num;
alert("Hola que tal");
alert("Hola \nque tal");
alert("Hola\t"+"que"+"\n"+"tal");
alert("Hola\n que\n t\nal");
num=prompt("Escribe un número: ","");
alert("El \ndoble\n es: \n"+(num*2));
</SCRIPT>
</HTML>
- Ejecútalo, observando detenidamente la acción de \n y \t
- Si no introducimos un número en el "prompt", en el "alert" correspondiente al doble del número,

aparecerá NaN, que quiere decir que no es un número.
6.- El tipo de datos "Number"

Podemos guardar indistintamente en una variable number un número entero, decimal, positivo o
negativo.
Ejemplos:
var numNatural= 1234;
var numEntero = -479;
var numDecimal = 3.141592;
var numDecimal2 = -0.123;
- Bases de Numeración en JavaScript (números enteros)

Por defecto, el sistema de numeración es el decimal.
Base Hexadecimal (base 16): anteponemos el prefijo 0X
Base Octal (base 8): anteponemos un cero
9
Dígitos del sistema decimal: 0, 1, 2, 3, 4, 5, 6, 7, 8, 9

Dígitos del sistema hexadecimal: 0, 1, 2, 3, 4, 5, 6, 7, 8, 9, A (que corresponde al 10 en base decimal), B
(que corresponde al 11 en decimal), C (12), D (13), E (14), F (15)
Ejemplo:
FF32 en base 16 es 2 + 3*16 + 15*162 + 15*163 = 65330 en sistema decimal
Es decir: 0xFF32 (número en base 16, según notación de JavaScript) = FF32 16 = 6533010
123458 = 5 + 4*8 + 3*82 + 2*83 + 1*84 = 534910

Es decir: 012345 (número en base 8, según notación de JavaScript) = 12345 8 = 534910
<HTML>
// PROG007.HTM
var n1=57; // número en base 10

var n2=012345; //base 8, porque empieza por 0
var n3=0xFF32; //base 16, porque empieza por 0x
alert("número decimal= "+n1);
alert("el 12345 en base 8 es en decimal= "+n2);
alert("el FF32 en base 16 es en decimal= "+n3);
/* Observa que al escribir una variable numérica en un "alert"

siempre nos da el número en decimal,
aunque sea en octal o hexadecimal */
</SCRIPT>
</HTML>
- Grábalo en TuCarpeta con el nombre Prog007.htm y ejecútalo.
En el programa anterior aparecen 3 “alerts”, uno para cada uno de los tres números. No hay ningún
problema para incluir los tres “alerts” en uno solo....
- En efecto, escribe el siguiente programa:
<HTML>
// PROG007b.HTM
var n1=57; // número en base 10

var n2=012345; //base 8, porque empieza por 0
var n3=0xFF32; //base 16, porque empieza por 0x
alert("número decimal= "+n1+"\n"+
"el 12345 en base 8 es en decimal= "+n2+"\n"+
"el FF32 en base 16 es en decimal= "+n3);
</SCRIPT>
</HTML>
- Grábalo en TuCarpeta con el nombre Prog007b.htm y ejecútalo.
10
- Observa que la solución de nuestro problema está:

Unir texto (entre comillas) y variables (sin comillas), con el signo “+”
Cada vez que deseemos un cambio de línea, incluimos “\n”
Veamos otra forma de incluir en un “alert” muchos datos ...
- Escribe:
<HTML>
// Prog007bb.htm
var x,y,z;
salida="";
var x1="Pepito Grillo", y1="Paquita González";
var num1=37, num2=3.752;
x=prompt("Escribe tu nombre:","");
y=prompt("Escribe tu primer apellido:","");
z=prompt("Escribe tu segundo apellido:","");
salida=salida+"Ahora un alert largo ";
salida=salida+x+y+z;
salida=salida+x1+" "+y1;
salida=salida+num1+" "+num2;
salida=salida+" ,ya me he cansado";
alert(salida);
</SCRIPT>
</HTML>
- Grábalo en TuCarpeta con el nombre Prog007bb.htm y ejecútalo.
- Observa de qué forma acumulamos muchos datos en un solo “alert” (ésta será la forma de proceder,
cuando necesitemos una “salida” con muchos valores):
definimos una variable “vacía”: var salida=‖‖;
acumulamos a la variable salida todo lo que queramos: salida=salida+ lo que sea
“lo que sea” puede ser una cadena (un texto) o una variable (sea numérica o de texto).
salida=salida + x1 + “ “ + y1;
salida=salida + “ya me he cansado”;
Para acabar, un solo “alert”: alert(salida);
Variables nulas
Cuando una variable no contiene ningún valor, su contenido es nulo
Ejemplo: miVariable = "Hola";
miVariable= null; // la vaciamos para que no ocupe memoria.
Valores especiales para variables numéricas

NaN: no es un número.
Infinity: infinito, por ejemplo 3/0
11
<HTML>
// PROG008.HTM
var var1="Pepe";
var var2="Paquito";
var var3=5/0;
alert("Pepe es "+var1);
alert("Paquito + 2 es ="+(var2+2));
alert("5/0 es ="+var3);
</SCRIPT>
</HTML>
7.- Contadores
Uno de los instrumentos más utilizados en todo lenguaje de programación es el llamado contador
Observa:
var x= 10;
x = x+1;
x = x-5;
Declaramos una variable "x", que es numérica y que inicialmente es 10.
La línea "x = x+1" es un contador, que hemos de leer: El nuevo valor de "x" es igual al anterior valor
de "x" más una unidad. Es decir, que en estos momentos nuestra variable "x" es igual a 11.
La siguiente línea: "x = x-5" es otro contador que hemos de leer: el nuevo valor de "x" es igual al
anterior valor de "x" menos 5 unidades. Es decir, que el valor de la variable "x" es ahora 11 - 5 = 6
- Haz un programa para comprobar lo que hemos dicho sobre los contadores, es decir:
<HTML>
// PROG009.HTM
var x=10;
alert("El valor inicial de x es "+x);
x=x+1;
alert("Después de x=x+1, x="+x);
x=x-5;
alert("Después de x=x-5, x="+x);
</SCRIPT>
</HTML>
12
8.- Conversión entre tipos de datos

- Conversión implícita de tipos
Observa: var var1 = "75";
var var2 = 25;
var var3, var4;
var3 = var1 + var2;
var4 = var2 + var1;
Las varibles var3 y var4 contienen ¿números o textos?
Cuando se suman cadenas de texto con cualquier otra cosa, los otros tipos de datos se convierten en
cadenas de texto. Pero si restamos, multiplicamos o dividimos "cadenas de texto", ¿sucede lo mismo?.
Vamos a descubrirlo en los siguientes programas.
<HTML>
// PROG010.HTM
var num1="30";
var num2="15";
// Observa que definimos dos cadenas de texto
alert("30+15= "+(num1+num2));
alert("30*15= "+(num1*num2));
</SCRIPT>
</HTML>
- Graba el programa en TuCarpeta con el nombre Prog010.htm
- Ejecútalo.
- La conclusión está clara:

Si sumamos dos cadenas (aunque contengan números) de texto se produce la concatenación
(unión) de los dos textos.
Si multiplicamos (o hacemos cualquier operación aritmética que no sea la suma), dos
cadenas de texo que en realidad contienen números, se produce una conversión implícita
de las cadenas a números y aparece el producto aritmético de los números.
- ¿Qué sucede si introducimos dos números a través de la función prompt?. Vamos a verlo:
<HTML>
//PROG011.HTM
var num1,num2;
num1=prompt("Escribe un número","");
num2=prompt("Escribe otro número","");
alert("La suma es ="+(num1+num2));
</SCRIPT>
</HTML>
13
- Grábalo en TuCarpeta, con el nombre Prog011.htm
- Ejecútalo. No funciona como deseamos debido a que el resultado de un prompt, siempre es una
cadena de texto.
El problema que tenemos pendiente, es ¿cómo sumar en JavaScript?
- Conversión explícita de tipos
parseFloat(cadena)
Toma la "cadena" y la transforma en un número en coma flotante, si es posible.
parseFloat ("123.456") = 123.456
parseFloat ("123ABC") = 123
parseFloat ("ABC") = NaN
parseInt(cadena, número)
Devuelve números enteros, el segundo argumento nos permite escoger la base de numeración
(entre 2 y 36)
parseInt ("ABC",16) = 2748 ABC16 = 274810
Si no especificamos el segundo argumento, por defecto es 10.
Si la cadena empieza por 0x y no existe el segundo argumento, se entiende que es 16.
Si la cadena empieza por 0 y no existe el segundo argumento, se entiende que es 8
toString(argumento)
Si argumento = número
Devuelve una cadena que contiene el número
Puede haber un argumento opcional:
(13).toString(16) =”d” siendo 1310 = d16
(13).toString(2) = “1101” siendo 1310 = 11012
- Vamos a hacer un programa que sume números en JavaScript. Escribe:
<HTML>
//PROG012.HTM
var num1,num2;
num1=prompt("Escribe un número","");
num1=parseFloat(num1);
num2=prompt("Escribe otro número","");
num2=parseFloat(num2);
alert("La suma es ="+(num1+num2));
</SCRIPT>
</HTML>
- Ejecútalo, utilizando números enteros, naturales y decimales.
A partir de este momento hemos de tener claro si los “prompts” corresponden a números enteros,
decimales o de texto:
14
- Si “x” ha de ser un número entero escribiremos:

x = parseInt(prompt(―Escribe un número entero‖,‖‖));
- Si “x” ha de ser un número decimal escribiremos:

x = parseInt(prompt(―Escribe un número entero o decimal‖,‖‖));
- Si “x” ha de ser una cadena de texto escribiremos:

x = prompt(―Escribe el texto correspondiente‖,‖‖);
<HTML>
// Prog012b.htm
var x,y;
x=parseInt(prompt("Escribe un entero ",""));
y=parseInt(prompt("Escribe otro entero ",""));
alert("La suma de "+ x +" + " + y +" es =" + (x+y) +"\n"+
"El producto de "+ x +" y "+ y +" = "+(x*y)+"\n"+
"El promedio de "+ x +" y "+ y +" es "+ (x+y)/2);
</SCRIPT>
</HTML>
- Grábalo con el nombre Prog012b.htm, y ejecútalo.
En el ejercicio Prog007.htm habíamos visto una forma de convertir un número en base 8 o base 16 en
base 10. Pero dichos números debíamos de escribirlos implícitamente, es decir en el programa. Nos
gustaría hacer un programa que:
- Nos preguntara un número en base 16 (prompt)
- Nos diera como resultado el número anterior pero en base 10
Vamos a ver si lo conseguimos:
- Escribe:
<HTML>
// Prog012bb.htm
var m,n,x;
m=prompt("Escribe un número en base 16","");
n=parseInt(m,16);
alert("El número "+m+" en base 16, es igual a "+n+" en base 10");

</SCRIPT>
</HTML>
- Grábalo con el nombre Prog012bb.htm en TuCarpeta y ejecútalo para el número “FF32”, a ver si es
verdad que nos da “65330” como resultado.
Observa el funcionamiento del programa Prog012bb.htm:

m = prompt(―Escribe un número en base 16‖, ―‖)
Lo que escribamos (un número en base 16), se guardará en la variable “m” como texto (ya que
no hemos puesto ningún “parseInt” ni “parseFloat”).
15
n =parseInt(m,16)
La variable “n” guardará el número en base 10
Es decir: parseInt(cadena, 16), transforma la “cadena”, en nuestro ejemplo un número escrito
en base 16, en el correspondiente número (no cadena) pero en base decimal.
Vamos a ver si el procedimiento sirve para cualquier otra base...
Antes de todo veamos unos cuantos números en diferentes bases:
367 = 6 + 3.7 = 27 en base 10

1234 = 3 + 2.4 + 1.42 = 27 en base 10
51346 = 4 + 3.6 + 1.62 + 5.63 = 1138 en base 10
- Escribe:
<HTML>
// Prog012bbb.htm
var m7,n7;
var m4,n4;
var m6,n6;
m7=prompt("Escribe un número en base 7","");
n7=parseInt(m7,7);
n4=parseInt(m4,4);
n6=parseInt(m6,6);
alert("El número "+m7+" en base 7, es igual a "+n7+" en base 10\n"+

"El número "+m4+" en base 4, es igual a "+n4+" en base 10\n"+
"El número "+m6+" en base 6, es igual a "+n6+" en base 10");
</SCRIPT>
</HTML>
- Grábalo con el nombre Prog012bbb.htm y ejecútalo, probándolo con los números anteriores.
Veamos el problema inverso: dado un número en base 10, nos interesa convertirlo a base 7, por ejemplo.
Matemáticamente:
Sea 593 un número en base 10
59310 = 15057 , porque:
En JavaScript deberíamos hacerlo de la siguiente forma, escribe:
16
<HTML>
// Prog012bbbb.htm
var m,n;
n=parseInt(prompt("Escribe un número entero en base 10",""));
m=(n).toString(7);
alert("El número "+n+" en base 10, es igual a "+m+" en base 7");
</SCRIPT>
</HTML>
- Grábalo con el nombre Prog012bbbb.htm y ejecútalo, probando su funcionamiento con el número

593
17
Autoevaluación I
1) Haz un programa de nombre Eval1A.htm, que has de grabar en TuCarpeta que sirva para restar dos
números cualesquiera, sean enteros o reales. ¿Qué sucede si en lugar de restar dos números,
intentamos restar dos textos?.
Haz un programa de nombre Eval1Ab.htm, que demuestre el único caso en que podemos restar dos
cadenas de texto.
2) Haz un programa de nombre Eval1B.htm, que has de grabar en TuCarpeta, que sirva para dividir
dos números.
¿Qué sucede si en lugar de dividir dos números, intentamos dividir dos textos?
¿Qué sucede si el divisor es el número 0?
3) Haz un programa de nombre Eval1C.htm, que has de grabar en TuCarpeta, que funcione de la
siguiente forma:
- El programa nos pregunta nuestro nombre.
- El programa nos pregunta nuestra edad.
- El programa da como resultado nuestro nombre y a continuación los días que hemos vivido hasta el
momento (deberás multiplicar la edad por 365).
4) Haz un programa de nombre Eval1D.htm, que has de grabar en TuCarpeta, que funcione de la
siguiente forma:
- El programa nos pide un número.
- El programa nos muestra en una única pantalla (un único “alert”), el doble, el triple y cuadrúple del
número que habíamos introducido.
5) El siguiente programa tiene errores. Escríbelo (grábalo con el nombre Eval1E.htm en TuCarpeta) y
corrígelo para que funcione y explica para qué sirve:
<HTML>
<SCRIPT LANGUAGE="JavaScrip">
/* EVAL1E.HTM
var a,b;
a=prompt("Escribe la base:")
b=promp("Escribe la altura:")
alert("Área= "+(a*b/2);
</SCRIP>
</HTML>
6) Haz un programa de nombre Eval1F.htm, que has de grabar en TuCarpeta, que sirva para calcular la
longitud de una circunferencia y el área del círculo correspondiente.
7) Haz un programa de nombre Eval1G.htm, que has de grabar en TuCarpeta, que sirva para calcular
un determinante de 2º orden.
8) Haz un programa de nombre Eval1H.htm, que has de grabar en TuCarpeta, igual que el Eval1G,
pero que presente los 4 elementos del determinante tabulados en 2 filas y 2 columnas.
18
9) Haz un programa de nombre Eval1I.htm, que has de grabar en TuCarpeta, que funcione de la
siguiente forma:
- El programa nos pide nuestro nombre.
- El programa nos pide nuestro primer apellido.
- El programa nos pide en qué población vivimos.
- El programa presenta una pantalla aproximadamente igual a la siguiente:
==================================
Hola nombre Apellido
Adiós habitante de Población
==================================
10) Haz un programa de nombre Eval1J.htm, que has de grabar en TuCarpeta, que funcione de la
siguiente forma:
- El programa nos pide un número.
- Utiliza tres contadores:
Un contador: suma 5
Otro contador: suma 21
Otro contador: resta 4
- El programa nos presenta los 4 números de la siguiente forma:
La primera línea: el número introducido.
La segunda línea: los tres números tabulados, que han resultado de los tres contadores.
De forma que si introducimos el nº 5 debería aparecer:
11) Haz un programa de nombre Eval1K.htm, que has de grabar en TuCarpeta, que funcione de la
siguiente forma:
- El programa nos pide un número entero.
- El programa nos da como resultado el mismo número pero en base 16
- Y por último nos lo escribe en base 5
Comprueba el programa para el número 52. Deberás calcular en primer lugar matemáticamente el valor
de 52 en base 16 y en base 5.
12) Haz un programa de nombre Eval1L.htm, que has de grabar en TuCarpeta, que funcione de la
siguiente forma:
- El programa nos pide un número en base ocho
- El programa nos lo escribe en base decimal.
- Y por último en base 2.
Comprueba el programa para el número 6561 8. Deberás resolver en primer lugar el problema
matemáticamente.
13) Haz un programa de nombre Eval1M.htm que has de grabar en TuCarpeta, que funcione de la
siguiente forma:
- El programa nos pide un número entero.
- El programa nos pide la base
- El programa nos escribe el número introducido en la "base" deseada.
19
Comprueba el programa para el número 100, en base 2, 3 y 11. Deberás resolver en primer lugar el
problema matemáticamente.
14) ¿Qué es la WWW?
15) Cuáles son los "browsers" más conocidos.
16) Escribe un fichero HTML (que no sea un programa JavaScript), que presente la frase: "Hola que tal"
y debajo tu nombre y apellidos.
17) ¿Qué encierra el par de tags: <BODY>, </BODY>?
18) ¿Qué relación hay entre el Java y el JavaScript?
19) ¿Quién creó el lenguaje de programación JavaScript?
20) ¿Cuáles son las características del JavaScript?
21) El JavaScript es un lenguaje ¿compilado o interpretado?. ¿Qué programa hace de compilador o

interprete?
22) ¿Porqué decimos que el JavaScript es un lenguaje de programación barato?
23) ¿Qué indican las siglas POO?
24) ¿Cómo se llaman y cómo funcionan las dos formas de definir una variable en JavaScript?
25) ¿Porqué el JavaScript es un lenguaje "Case Sensitive"?
26) Nombra todos los tipos de datos que existen en JavaScript.
27) ¿Para qué sirve la función typeof?. Inventa un par de ejemplos.
28) ¿Qué es el carácter de escape? ¿Qué es un caráter de control?. Escribe dos caracteres de control e
indica para qué sirven.
29) ¿Qué dará por resultado el siguiente programa, y porqué?

<HTML>
// EVAL1N.HTM
var num=0xA;
alert("Número= "+num);
</SCRIPT>
20
</HTML>
Grábalo con el nombre Eval1N.htm en TuCarpeta.
30) Calcula el número 9AC1 que está en base 16 a base 10, matemáticamente
31) Calcula el número 7640 que está en base 8 a base 10, matemáticamente.
32) Utiliza programas ya hechos para comprobar los dos ejercicios anteriores.
33) ¿Qué diferencia hay entre null y NaN
34) ¿Qué problema hay al sumar en JavaScript?. Explica cómo solucionarlo.
35) Indica a qué es igual los siguientes valores:

a) parseInt("A",16)=
b) parseFloat("31H")=
c) toString(13)=
d) toString(4.273,49)=
36) Haz un programa de nombre Eval1o.htm, que sirva para calcular el producto escalar de dos vectores
del plano.
La “salida” ha de ser de la siguiente forma:
Comprueba el funcionamiento del programa,

utilizando el caso concreto que aparece en la
ilustración.
37) Haz un programa de nombre Evalip.htm, que sirva para calcular el coseno del ángulo que forman
dos vectores del plano, sabiendo que Math.sqrt(x) calcula la raíz cuadrada de “x”.
Comprueba el funcionamiento del

programa, utilizando el caso concreto que
aparece en la ilustración.
38) Haz un programa de nombre Eval1q.htm que sirva para

calcular el punto medio de un segmento.
Comprueba el funcionamiento del programa,

utilizando el caso concreto que aparece en la ilustración.
21
22
II.- Estructuras de Programación

1.- Operadores Lógicos y Relacionales
>, <, <=, >=
== igualdad
!= diferente
&& y
|| o
! No
2.- La estructura ―if-else‖

<HTML>
// PROG013.HTM
var num;
num=parseFloat(prompt("Escribe un número",""));
if(num==100)
{
alert("El número que has escrito es 100");
}
else
{
alert("El número que has escrito no es 100");
}
if(num>0)
{
alert("El número que has escrito es positivo");
}
else
{
alert("El número es negativo o 0");
}
</SCRIPT>
</HTML>
- Grábalo con el nombre Prog013.htm en TuCarpeta
- Ejecútalo.
- La Estructura de programación ―if-else‖

Sintaxis:
if(condición)
{
sentencia1;
sentencia2;
sentencia3;
}
else
{
sentencia4;
sentencia5;
sentencia6;
}
23
Significado:
Si se cumple la condición, se ejecutan las sentencias 1, 2 y 3 y si no se cumple se ejecutan las sentencias
4, 5, 6. La opción “else” es opcional.
- Observa la diferencia entre “=” y “==”

a = 3*9 es una asignación, es decir la variable “a” es 27. En cambio if(a==5) es una condición: si “a” es
idéntico a 5 (si el valor de “a” es el número 5)…
<HTML>
// PROG014.HTM
var a,b;
a=parseFloat(prompt("Escribe el primer número",""));
b=parseFloat(prompt("Escribe el segundo número",""));
if(a==b) alert("Los dos números son iguales");
if(a != b) alert("Los dos números son distintos");
if(a>b)
{
alert("El primer número es mayor que el segundo");
}
else
{
alert("El primer número no es mayor que el segundo");
}
if((a>b) && (100>a))
{
alert("El primero es mayor que el segundo");
alert("Además los dos son menores de 100");
}
else
{
alert("El primero no es mayor que el segundo");
alert("O uno de los dos números es mayor o igual a 100");
}
</SCRIPT>
</HTML>
- Grábalo con el nombre Prog014.htm en TuCarpeta.
- Ejecuta el programa para los siguientes casos, observando detenidamente lo que aparece:
1) a=70, b=2
2) a=50, b=30
3) a=7, b=11
4) a=100, b=50
5) a=50, b=100
- Observa:
a==b “a” es igual a “b”
a != b “a” es diferente a “b”
(a>b) && (100>a)
“a” es mayor que “b” y además “100 es mayor que –a-“
El else correspondiente a la condición anterior, sería equivalente a no(a>b) || no(100>a), es decir
la negación de la primera condición o la negación de la segunda (o las dos negaciones a la vez).
24

Intro A Javascript

Cargado por

Copyright:

Formatos disponibles

Intro A Javascript

Cargado por

Información del documento

Descripción original:

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

Intro A Javascript

Cargado por

Copyright:

Formatos disponibles

Manual de JavaScript

- En el texto me refiero continuamente a TuCarpeta, esto es un subdirectorio de tu ordenador

Ejercicios de autoevaluación 1 ............................................................................................................... 18

2. Estructuras de Programación .............................................................................................................. 23

Ejercicios de autoevaluación 2 ............................................................................................................... 46

3. Funciones y Arrays ............................................................................................................................. 51

Ejercicios de autoevaluación 3 ............................................................................................................... 74

4. Programación Visual .......................................................................................................................... 79

Ejercicios de autoevaluación 4 ............................................................................................................... 93

Ejercicios de autoevaluación 5 ............................................................................................................... 136

6. Programación Orientada a Objetos .....................................................................................................139

7. JavaScript y la Web ............................................................................................................................ 173

Soluciones autoevaluación 1 .................................................................................................................. 191

Soluciones autoevaluación 2 .................................................................................................................. 199

Soluciones autoevaluación 3 .................................................................................................................. 211

Soluciones autoevaluación 4 .................................................................................................................. 227

Soluciones autoevaluación 5 .................................................................................................................. 237

I.- Introducción a la programación en JavaScript

- Estructura de un fichero HTML

Básicamente consta de cuatro pares de etiquetas:

El par <HTML> y </HTML>

El par <HEAD> y </HEAD>

El par <TITLE> y </TITLE>

El par <BODY> y </BODY>

Los navegadores (browsers) más conocidos son:

- Ejecuta el ―Bloc de Notas‖, es decir:

- Graba el fichero anterior con el nombre PROG000.HTM en TuCarpeta

- Ejecuta el “Explorador de Windows”. Sitúate en TuCarpeta y haz un doble click en PROG000.HTM

- No confundir el JavaScript con el Java. El Java es un lenguaje de programación de propósito

- ¿Porqué el JavaScript y no otro lenguaje de programación?

Es visual: permite la moderna “programación visual” (ventanas, botones, colores,

En definitiva: es ideal para un primer curso de introducción a la programación.

2.- Sintaxis básica

- Graba el fichero anterior en TuCarpeta con el nombre Prog001.htm

- Ejecuta el programa Prog001.htm, es decir:

- Estudio del Prog001.htm:

- Utilizando el “Bloc de Notas” escribe el siguiente programa:

- Grábalo en TuCarpeta con el nombre Prog002.htm

- Ejecútalo varias veces, observando detenidamente lo que sucede.

- Estudio del Prog002.htm

1º) Primera y última línea: <HTML> y </HTML>

2º) Segunda y penúltima líneas: <SCRIPT LANGUAGE=.....> y </SCRIPT>, es decir programa en

3º) Primera sentencia del programa: // PROG002.HTM

4º) var nom;

5º) nom = prompt(―Escribe tu nombre‖,‖Paco‖);

6º) alert("Mucho gusto "+nom);

- Utilizando el "Bloc de Notas del Windows" escribe el siguiente programa:

- Grábalo en TuCarpeta con el nombre Prog003.htm

- Es importante que tengas claro este programa:

- El único elemento nuevo que aparece en el Prog003.htm es:

El "JavaScript" es un lenguaje de programación "Case Sensitive", esto es: no es lo mismo las

- Escribe el siguiente programa:

- Grábalo en TuCarpeta con el nombre Prog004.htm

4.- Tipos de Datos

Existen 6 tipos de datos:

- Escribe el siguiente programa:

- Grábalo en TuCarpeta con el nombre Prog005.htm

- Ejecútalo tantas veces como quieras.

123458 = 5 + 48 + 382 + 283 + 184 = 534910