Cómo escribir JavaScript para principiantes: tutorial paso a paso

Elaborado por: Ing Ligia Duran

1. Escribir Usando JavaScript
1.1. ¿Qué tiene de bueno JavaScript?
Siendo breves... que es claramente multiplataforma: en casi cualquier
sistema operativo existen navegadores web, y la mayoría de ellos admiten
JavaScript, de modo que lo que hagamos en una página web que contenga
JavaScript se podrá usar desde un ordenador con Windows, con Linux, con
MacOS X, desde un tablet o smartphone, etc.
1.2. ¿Qué tiene de malo JavaScript?
No es el lenguaje más rápido, no es totalmente estándar (existen
pequeñas diferencias entre unos navegadores y otros), es menos estricto que
otros (y sí, eso puede ser malo)... aun así, su gran ventaja de ser
multiplataforma puede compensar sus desventajas.
1.3. ¿Y cómo se escribe desde JavaScript?
Vamos a lo interesante....
En este tutorial, iremos directamente a lo práctico, introduciendo los
nuevos conceptos en el momento exacto en el que sean necesarios, no antes.
Eso supondrá que también veamos unas ciertas nociones sobre cómo crear
páginas Web, pero dejaremos en el tintero bastante detalles de JavaScript y
muchos más de creación Web.
Para escribir desde JavaScript, tendremos que empezar por ver cómo se
escribe en una página Web, porque las páginas web son (con diferencia) la
forma más habitual de usar JavaScript.
Una página web básica "por dentro" es algo relativamente sencillo: un
fichero de texto, que podrías crear con cualquier editor de texto, como el bloc
de notas de Windows, pero preferiblemente no con un procesador de textos
como Word. El bloc de notas de Windows tampoco es la mejor alternativa: es
poco versátil y a veces guarda los documentos con nombres de ficheros
terminados en ".txt", lo que no nos permitirá probar correctamente nuestras
páginas. Una mejor opción sería usar un editor un poco más avanzado, y entre

los que hay muchos gratuitos para elegir, como sublime text, Geany,
Notepad++, Notepad2, SciTe, etc.
Una página Web que escribiese el texto "hola" podría ser simplemente así:
<html>
<body>
Hola
</body>
</html>
Primero vamos a ver cómo crearla y luego lo que significa cada cosa:
Para crearla, desde nuestro editor de texto (insisto: es preferible que
no sea el Bloc de notas ni Word) tecleamos lo anterior y después lo guardamos
con el nombre "ejemplo01a.html" (o cualquier otro nombre parecido; lo
importante es que termine con ".html") Para probarla, debería bastar hacer
doble clic en ese fichero "ejemplo01a.html". Se abrirá nuestro navegador y
mostrará una página que contendrá únicamente el texto "Hola".
¿Qué es lo que hemos escrito?
 Las páginas web se escriben usando un lenguaje de especificación
llamado HTML. En este lenguaje, cada página está formada por una serie
de bloques, que se encierran entre símbolos de "menor que" (<) y "mayor
que" (>). Por ejemplo, todo el cuerpo de la página se debe indicar entre y
 El cuerpo de una página web se detallará entre y
 El texto intermedio (en este caso, "Hola") será lo que se realmente se
muestre.
Esta página escribe algo en pantalla (realmente, en el navegador), pero es algo
estático. Vamos a empezar a ampliarlo usando JavaScript. Por ejemplo,
podemos mostrar una ventana de aviso así:
<html>

<body>
Hola
<script>
alert("Bienvenido!");
</script>
</body>
</html>
Apenas hay dos cambios:
 Nuestro programa empezará con <script> y termina con </script>.
 Este primer programa sólo contiene una orden: "alert", que muestra una
ventana de aviso. El texto del aviso se debe indicar entre paréntesis y
comillas.
 Cada orden de JavaScript deberá terminar con un punto y coma. En un
programa tan simple como este, se podría omitir el punto y coma.
Si no queremos mostrar una ventana de aviso, sino escribir texto en la propia
página web, también podemos hacerlo, si usamos la orden "document.write":
<html>
<body>
Hola
<script>
document.write("Bienvenido!");
</script>
</body>
</html>
Pero hay una diferencia entre lo que hemos escrito desde JavaScript
("Bienvenido") y el texto prefijado que forma parte de la página web: lo que

hacemos desde JavaScript no es estático, sino que se calcula en el momento,
por lo que, por ejemplo, podemos hacer operaciones aritméticas:
<html>
<body>
Hola. 2 + 3 es
<script>
document.write( 2+3 );
</script>
</body>
</html>
Ejercicios propuestos
 01.01 - Crea una página web que escriba tu nombre (texto estático)
 01.02 - Crea una página web que escriba tu nombre (texto estático) y
muestre una ventana de aviso que diga "Lo has conseguido!"
 01.03 - Crea una página web que escriba tu nombre (texto estático) y tu
apellido (usando "document.write")
 01.04 - Crea una página web que escriba el resultado de sumar 12345 y
67890
 01.05 - Crea una página web que muestre en una ventana el resultado de
restar 67890 - 12345
 01.06 - Crea una página web que escriba el resultado de multiplicar 123 y
456 (pista: el símbolo de la multiplicación es el asterisco: *)
2. Pedir datos al usuario

2.1. ¿Cómo pedimos datos al usuario?
Para comenzar a hacer programas un poco más serios, necesitamos datos
que manipular. Una primera alternativa sencilla para obtener esos datos es
pidiéndoselos al usuario. Igual que tenemos un "alert" que permite mostrar una
ventana de aviso, también disponemos de un "prompt" que nos servirá para
pedir datos.
Por ejemplo, podemos preguntar su nombre al usuario haciendo:
<html>
<body>
Pedir datos...
<script>
prompt("Dime tu nombre");
</script>
</body>
</html>
Ese primer dato que indicamos entre paréntesis y comillas es el texto que
queremos que aparezca como aviso para el usuario.
También podemos indicar un segundo dato, que sería un valor inicial para el
texto que va a introducir el usuario:
<html>
<body>
Pedir datos...
<script>
prompt("Dime tu nombre", "ejemplo de nombre");
</script>
</body>

</html>
Pero claro, normalmente querremos guardar eso que el usuario ha
tecleado, para poder utilizarlo. Para eso usaremos "variables": un espacio de
memoria del ordenador al que damos un nombre y en el que podemos guardar
datos. Por ejemplo, podríamos pedir al usuario su nombre y guardarlo en una
variable llamada "nombre":
<html>
<body>
Tu nombre es...
<script>
var nombre = prompt("Dime tu nombre");
document.write( nombre );
</script>
</body>
</html>
2.2. Operaciones con números
Ahora que sabemos pedir datos, podemos solicitarle que introduzca dos
o más, y a continuación hacer operaciones con ellos. Por ejemplo, podemos
(intentar) pedirle dos números y mostrar su suma, así:
<html>
<body>
Sumador de numeros...
<script>
var n1 = prompt("Dime un numero");
var n2 = prompt("Dime otro numero");

document.write("La suma de "+ n1 + " y "+ n2 + " es: ");
document.write(n1+n2);
</script>
</body>
</html>
Pero esto no funciona bien. Vamos a analizar poco a poco qué sabemos hacer y
qué está fallando:
 Si escribimos document.write("hola"), se mostrará "hola" en la página
(pero sin las comillas).
 Si escribimos document.write("hola"+"tu"), se mostrará "holatu", todo
junto (también sin las comillas, claro), porque el operador de la suma (+)
se puede usar para textos, y lo que hace es crear un nuevo texto
formado por esos dos.
 Si escribimos document.write(2+3), como vimos en el apartado anterior,
aparecerá un 5 en la página, porque, al no haber comillas, se toman como
números y su suma tendrá un valor numérico.
 En cambio, en este programa, si introducimos los números 2 y 3, nos
dirán que su suma es 23...
El motivo es que los datos que introducimos se consideran textos, y aunque 2+3
sea 5, si pedimos el resultado de n1+n2 se considerará que queremos unir esos
dos textos en uno, de modo que el resultado no será un número, sino un nuevo
texto, "23".
¿Se puede solucionar? Por supuesto: basta con decirle "toma esto como un
número" antes de sumar. Eso lo conseguimos con "parseInt" (el dato que hay
que tomar como número se indicará entre paréntesis):
<html>

<body>
<script>
document.write(parseInt(n1)+parseInt(n2));
</script>
</body>
</html>
Podemos hacer más operaciones matemáticas, claro. Las más básicas son:
 + Suma (ejemplo: 2+3 es 5)
 - Resta (ejemplo: 5-3 es 2)
 * Multiplicación (ejemplo: 2*3 es 6)
 / División (ejemplo: 3/2 es 1.5)
 02.01 - Crea una página web que pida al usuario su nombre y su (primer)
apellido y escriba "Hola Sr. " seguido de su apellido, una coma y su
nombre (por ejemplo, "Hola, Sr. Cabanes, Nacho")
 02.02 - Crea una página web que pida al usuario dos números y escriba su
multiplicación
diferencia
división
 02.05 - Crea una página web que pida al usuario dos números a y b, y
escriba el resultado de a2-b2
 02.06 - Crea una página web que pida al usuario el ancho y el alto de un
rectángulo y escriba cuanto es su perímetro (la suma de todos los lados)
y su superficie (base por altura)

3. Condiciones Y Bucles
3.1 - Condiciones simples

Para comprobar condiciones básicas, usaremos la palabra "if" ("si", en
inglés). Indicaremos entre paréntesis la condición que se debe verificar, y
luego lo que hay que hacer si dicha condición se cumple:
<html>
<body>
<script>
var suma = parseInt(n1)+parseInt(n2);
document.write(suma);
if (suma > 0)
document.write(" y es positiva");
</script>
</body>
</html>
Es frecuente que haya que dar varios pasos si una condición se cumple, y en ese
caso deberemos encerrar los pasos entre llaves:
<html>
<body>
<script>

if (suma > 0)
{
if (suma > 10)
document.write(" y ademas mayor que 10");
}
</script>
</body>
</html>
Y si queremos indicar qué hacer cuando no se cumpla la condición, usaremos la
palabra "else":
<html>
<body>
<script>
if (suma > 0)
else
document.write(" y es negativa o cero");

</script>
</body>
</html>
Y, por supuesto, podemos tener varias condiciones encadenadas:
<html>
<body>
<script>
if (suma > 0)
else if (suma < 0)
document.write(" y es negativa");
else
document.write(" (cero)");
</script>
</body>
</html>
Los comparadores son:
 > - Mayor que
 >= - Mayor o igual que
 < - Menor que

 <= - Menor o igual que
 == - Igual a (CUIDADO: dos símbolos de igual, no sólo uno)
 != - Distinto de
Y este es un ejemplo que prueba todos ellos:
<html>
<body>
<script>
if (suma > 0)
if (suma >= 0)
document.write(" y es positiva o cero");
if (suma < 0)
document.write(" y es negativa");
if (suma <= 0)
document.write(" y es negativa o cero");
if (suma == 2)
document.write(" y vale 2");
if (suma != 3)
document.write(" y no vale 3");
if (suma = 5)
document.write(" y vale 5...no! error!");
</script>

</body>
</html>
Si lo pruebas, verás que en el ultimo caso se comporta incorrectamente: la
condición "if (x=5)" está mal planteada, porque tiene un único símbolo de
"igual", y siempre se interpreta como "verdadera", aunque x no valga 5.
Es importante recordar usar siempre dos símbolos de "igual" cuando se quiere
ver el valor de una variable. Finalmente, podemos enlazar varias condiciones en
una, para formar condiciones como "si ocurre esto o aquello":
 && - Y
 || - O
 ! - No
Por ejemplo:
<html>
<body>
<script>
if ((n1 == 5) || (n2 == 5))
document.write(" y uno de los números es 5");
else if ((n1 == 7) && (n2 == 7))
document.write(" y los dos valen 7");
else if ( ! (n1 > 7))
document.write(" y el primero no es mayor que 7");

</script>
</body>
</html>
 03.01.01 - Crea una página web que pida al usuario dos números y
muestre su división, pero sólo en caso de que el segundo no sea cero; si
el segundo es cero, deberá escribir "No se puede dividir entre cero"
 03.01.02 - Crea una página web que pida al usuario dos números y diga
cuántos de ellos son positivos
 03.01.03 - Crea una página web que pida al usuario tres números y diga si
son iguales o, en caso contrario, cual es el mayor de ellos
 03.01.04 - Crea una página web que pida al usuario dos números y diga
cual es el mayor de los tres
 03.01.05 - Crea una página web que pida al usuario una letra y diga si ha
escrito una vocal o algún otro carácter
 03.01.06 - Crea una página web que pida al usuario cinco números y diga
cuántos de ellos son negativos
3.2. Condiciones repetitivas 1: while
Si queremos que algo se repita no sólo una vez, sino mientras se cumpla
una condición, bastará cambiar la palabra "if" por "while" ("mientras", en
inglés). Por ejemplo, podemos pedir al usuario dos números y mostrar su

división, comprobando antes que el divisor no sea cero. Como el usuario puede
equivocarse más de una vez, es más razonable usar "while" que "if":
<html>
<body>
Dividiendo numeros...
<script>
while (n2 == 0)
{
n2 = prompt("No debe ser cero. Dime otro");
}
document.write(n1 + " dividido entre "+ n2 + " es: ");
var resultado = parseInt(n1) / parseInt(n2);
document.write(resultado);
</script>
</body>
</html>
En el fuente anterior, no era necesario incluir llaves, porque sólo hay una
orden que repetir. Aun así, puede ser recomendable incluir llaves como
precaución incluso en ese caso: si luego se complica la lógica de la parte
repetitiva, y pasamos a necesitar varias órdenes, podríamos olvidar añadir las
llaves en ese momento, y el programa no se comportaría correctamente.
También podemos usar "while" cuando queramos contar. Necesitaremos una
variable que empiece en uno (o cero, o el valor con el que vayamos a empezar a
contar) y que aumente de valor en cada pasada:
<html>

<body>
Vamos a contar...
<script>
var contador = 1;
while (contador <= 10)
{
document.write(contador + " ");
contador = contador + 1;
}
</script>
</body>
</html>
3.3. Operaciones abreviadas
Operaciones como ese "aumentar en uno el valor de una variable" son
tremendamente frecuentes. Por eso, existen formas abreviadas de escribirlas:
 n++; Es lo mismo que n = n + 1;
 n--; Es lo mismo que n = n - 1;
 n += 5; Es lo mismo que n = n + 5;
 n -= 3; Es lo mismo que n = n - 3;
 n *= 2; Es lo mismo que n = n * 2;
 n /= 10; Es lo mismo que n = n / 10;
<html>
<body>
Operaciones abreviadas...
<script>
var n = 1;

document.write("n vale " + n + "<br />");
n ++;
document.write("Tras n++, ahora vale " + n + "<br />");
n +=5 ;
document.write("Tras n+=5, ahora vale " + n + "<br />");
n --;
document.write("Tras n--, ahora vale " + n + "<br />");
n -= 3;
document.write("Tras n-=3, ahora vale " + n + "<br />");
n *= 2;
document.write("Tras n*=2, ahora vale " + n + "<br />");
n /= 10;
document.write("Tras n/=10, ahora vale " + n + "<br />");
n = 6;
document.write("Tras n=6, ahora vale " + n + "<br />");
</script>
</body>
</html>
Esos "<br />" permiten saltar de una línea a la siguiente, para que se lea mejor.
No es JavaScript, sino otro tipo de "etiqueta" que se puede usar en el lenguaje
de descripción de páginas HTML. Pronto veremos algunas etiquetas más.

3.4. Números al azar
Para obtener números al azar, podemos usar "Math.random", que
devuelve un número entre 0 y 1. Si queremos que sea entre 0 y otro número,
podemos conseguirlo multiplicando por ese número. Si queremos que empiece en
1 (o en otro valor), lo podemos sumar. Y si no queremos que tenga decimales,
usaremos "Math.floor" para quedarnos sólo la parte entera. Veámoslo con un
ejemplo:
<html>
<body>
<script>
var azar1 = Math.random();
document.write("Al azar entre 0 y 1: " + azar1 + "<br />");
var azar2 = Math.random() * 5;
document.write("Al azar entre 0 y 5, con decimales: "
+ azar2 + "<br />");
var azar3 = Math.floor( Math.random() * 6 );
document.write("Al azar entre 0 y 5, entero: "
+ azar3 + "<br />");
var azar4 = Math.floor( Math.random() * 8 )+1;
+ azar4 + "<br />");

+ azar5 + "<br />");
</script>
</body>
</html>
 03.04.01 - Crea una página web que muestre los números pares del 10 al
20 (ambos incluidos), usando "while"
 03.04.02 - Crea una página web que muestre los números del 15 al 5,
descendiendo (ambos incluidos), usando "while"
 03.04.03 - Crea una página que pida al usuario pares de números y
muestre su suma. Deberá terminar cuando el usuario introduzca cero en
vez del primer número.
 03.04.04 - Crea una página que pida al usuario una serie de números,
hasta que se pulse Intro sin escribir nada (se introduzca una cadena
vacía), momento en el que se dejará de pedir datos y se mostrará la
suma de todos ellos.
 03.04.05 - Crea una página que pida al usuario un número entero positivo
y diga cuántas cifras tiene (pista: se puede conseguir dividiendo varias
veces entre 10).
 03.04.06 - Crea una página web que genere un número al azar entre el 1
el 10 y dé al usuario 4 oportunidades para acertarlo, indicando en cada
paso si el número que ha tecleado es el correcto, es mayor o es menor.
 03.04.07 - Crea una página web que pida al usuario su nombre y su
contraseña, y se repita hasta que introduzca como nombre "Juan" y
como contraseña "1234"

3.5. Condiciones repetitivas 2: do-while
Cuando queremos que algo se repita al menos una vez, lo que hemos
hecho es "dar una primera pasada" y luego repetir con "while":
<html>
<body>
Dividiendo numeros...
<script>

while (n2 == 0)
{
n2 = prompt("No debe ser cero. Dime otro");
}
</script>
</body>
</html>
Pero tenemos también otra construcción un poco más natural: do-while, en la
que la condición se comprueba al final, no al principio, de modo que no es
necesaria esa "primera pasada":
<html>
<body>
Dividiendo numeros con do-while...
<script>
var n1 = prompt("Dime un primer numero");
var n2;
do
{
n2 = prompt("Dime el segundo numero (no debe ser cero)");
}
while (n2 == 0);

</script>
</body>
</html>
 03.05.01 - Crea una página web que muestre los números pares del 10 al
20 (ambos incluidos), usando "do-while"
 03.05.02 - Crea una página que pida al usuario una serie de números,
hasta que se pulse Intro sin escribir nada (se introduzca una cadena
vacía), momento en el que se dejará de pedir datos y se mostrará la
suma de todos ellos. Esta variante debe usar do-while, en vez de while.
 03.05.03 - Crea una página web que pida al usuario su nombre y su
contraseña, y se repita hasta que introduzca como nombre "Juan" y
como contraseña "1234", usando do-while en vez de while.
3.6. Contadores con "for"
Existe una tercera forma de comprobar condiciones repetitivas: la orden
"for". Internamente, se parece muchísimo a un "while", como veremos en los
próximos dos ejemplos, pero se use usar para contar, por analogía con otros
lenguajes de programación. Primero veamos esa analogía: en lenguajes como
BASIC, se puede contar del 1 al 10 con la orden "FOR X = 1 TO 10", que se
podría traducir como "para x que va a tomar valores desde 1 hasta 10". Si
queremos avanzar de 2 en 2, sería algo como "FOR X = 1 TO 10 STEP 2". En
lenguajes que derivan de C (como es el caso de JavaScript), la sintaxis, aunque
recuerda a ésta, es un poco más complicada: la orden "for" tendrá 3 partes,
separadas por "punto y coma":
 La primera parte dará un valor incial a una variable (por ejemplo, "x = 1")

 La segunda detallará qué condición se debe repetir (por ejemplo, " x <=
10")
 La tercera parte será la que se encargue de pasar de un valor de la
variable al siguiente (como podría ser "x = x+1" o bien "x++" si queremos
avanzar de uno en uno, y "x = x+2" o "x+=2" para avanzar de dos en dos.
Suena difícil, pero no lo es tanto. Primero vamos a recordar cómo podíamos
contar usando "while" (usando la forma abreviada para incrementar el valor de
la variable que hace de contador):
<html>
<body>
Vamos a contar con "while"...
<script>
var contador = 1;
while (contador <= 10)
{
contador++;
}
</script>
</body>
</html>
Convertir esto a un "for" es relativamente sencillo:
<html>
<body>
Vamos a contar con "for"...
<script>
var contador;

for (contador = 1; contador <= 10; contador++)
{
}
</script>
</body>
</html>
 03.06.01 - Crea una página web que muestre los números del 1 al 20
(ambos incluidos), usando "for"
 03.06.02 - Crea una página web que muestre los números del 1 al 16,
(ambos incluidos), saltando de 3 en 3, usando "for"
 03.06.03 - Muestra los números pares del 10 al 20 (ambos incluidos),
usando "for"
 03.06.04 - Muestra los números del 15 al 5, descendiendo (ambos
incluidos), usando "for"
 03.06.05 - Escribe los múltiplos del 5 que hay entre el 5 y el 50 (ambos
incluidos), usando "for"
 03.06.06 - Escribe los múltiplos de 3 que hay entre el 50 y el 5 (ambos
incluidos), descendiendo, usando "for"
Pista: para hallar los múltiplos de 5, se puede comenzar en 5, y sumar 5 en cada
pasada. Otra alternativa es calcular el resto de la división: si al dividir el
número entre 5 se obtiene resto 0, quiere decir que era un múltiplo de 5.
Tenemos un operador para calcular el resto de la división (que también se
conoce como "la operación módulo"): el símbolo de porcentaje. "5 % 3" es la
forma de escribir "el resto de dividir 5 entre 3", o simplemente "5 módulo 3":
<html>
<body>
Multiplos de 5...

 03.07.01 - Crea una página web que pida un número al usuario y muestre
cuáles son sus divisores.
 03.07.02 - Pide un número y muéstralo como producto de sus factores
primos (por ejemplo: 24 = 2*2*3). Para hacerlo de forma más mecánica,
puede ayudarte que termine en "*1": 24 = 2*2*3*1
 03.07.03 - Genera al azar un número del 1 al 100 y da al usuario 6
oportunidades para adivinarlo.
 03.07.04 - Pide al usuario dos números y calcula cuanto es el primero
elevado al seguno, usando multiplicaciones sucesivas. Por ejemplo. 2
elevado a 3 es lo mismo que 2*2*2, y su resultado es 8
 03.07.05 - Pide al usuario un ancho y un alto y dibuja un rectángulo
formado por asteriscos, que tenga ese ancho y ese alto. Por ejemplo,
para anchura 4 y altura 3 podría ser:
****
****
****
 03.07.06 - Crea un página web que calcule el cambio de una compra,
utilizando monedas (o billetes) del mayor valor posible. Supondremos que
tenemos una cantidad ilimitada de monedas (o billetes) de 100, 50, 20,
10, 5, 2 y 1, y que no hay decimales. La ejecución podría ser algo como:
Precio? 44
Pagado? 100
Su cambio es de 56: 50 5 1
Precio? 1
Pagado? 100
Su cambio es de 99: 50 20 20 5 2 2

Apariencia
Lo que hemos hecho hasta ahora nos ha permitido ir cogiendo algunos
fundamentos, pero todavía hacemos "cosas que no son bonitas", e incluso cosas
que quizá no funcionen, porque muchos navegadores bloquean las "ventanas
emergentes", de modo que nuestros "alert" y nuestros "prompt" quizá no
siempre se comporten como esperamos.
Por eso, vamos a ver algo más de HTML que nos permita hacer "cosas un
poco menos feas", y también veremos nociones básicas de cómo modificar esa
apariencia y de cómo leer datos usando la propia página (por ejemplo, con
"casillas de texto", lo que nos permitirá evitar las ventanas emergentes).
4.1. Apariencia básica

Algunos cambios de apariencia que podemos hacer en HTML son muy simples y
pueden hacer que el resultado final sea más vistoso. Por ejemplo:
 Podemos escribir en negrita un texto, encerrándolo entre <b> y </b>.
 Podemos escribir en cursiva un texto, usando entre <i> y </i>.
 Podríamos subrayar, pero no es recomendable, para que no se confunda
con un enlace entre páginas.
 Podemos indicar que algo forma parte de un mismo párrafo,
delimitándolo entre <p> y </p>.
 Se puede forzar un salto a la línea siguiente dentro de un párrafo,
usando <br />
 Si tenemos distintos párrafos, es posible que se trate de un documento
largo, dividido en varios apartados. En ese caso, podríamos tener varios
niveles de títulos: el más importante se destacaría entre <h1> y </h1>, los
subtítulos irían entre <h2> y </h2>, si estos contienen subapartados, sus
títulos irían entre <h3> y </h3>, y así sucesivamente.
 Para crear listas, las encerraremos entre <ul> y </ul>. Cada elemento de
la lista estará entre <li> y </li> .
 Si la lista debe tener números en vez de viñetas usaremos <ol> para
indicar dónde comienza y </ol> para indicar el final (los elementos se
siguen delimitando con <li> y </li>).
 Si los datos deben estar colocados en forma de tabla, tendremos que
detallar a tres niveles: la tabla empezará con <table> y </table>, cada fila
empezará por <tr> y terminará con </tr>, y cada casilla de una fila
empezará con <td> y terminará con </td>.
 Podemos usar colores, por ejemplo comenzando con <font color="blue;"> y
terminando con </font>, o incluso indicando la cantidad de rojo-verde-
azul (desde 0 hasta 255) que debe tener un elemento, si usamos la
sintaxis <font color=rgb(0,0,255)>, pero esta forma de trabajar puede
dar lugar a páginas difíciles de mantener, así que dentro de poco dentro
de poco veremos la alternativa elegante, las "hojas de estilo". Además,
en navegadores modernos (que usen "HTML versión 5"), puede que no se
haga caso a ese "font", que hoy en día se considera una característica
obsoleta.
Vamos a ver un ejemplo y su resultado: el fuente de la página podría ser:
<html>

<body>
<h1>Ejemplo de apariencias</h1>
<h2>Apariencia del texto</h2>
<p>Este es un parrafo</p>
<p>y este es otro, que tiene texto en <b>negrita</b> y texto en <i>cursiva</i>,
e incluso <font color=rgb(0,0,255)>texto azul (si el navegador lo
permite)</font>.</p>
<p>Podemos... <br/> partir un parrafo</p>
<h2>Listas</h2>
<ul>
<li>Este es el primer elemento de una lista</li>
<li>Y este es el segundo</li>
</ul>
<ol>
<li>Esta lista tiene numeros</li>
<li>Y mas numeros</li>
</ol>
<h2>Tablas</h2>
<table>

<tr><td>Enero</td><td>Febrero</td></tr>
<tr><td>234</td><td>325</td></tr>
</table>
</body>
</html>
y el resultado sería:
Nota 1: Se pueden hacer muchas más cosas con HTML, pero este no pretende
ser un curso de HTML. Para nosotros, HTML será una herramienta auxiliar, así

que no profundizaremos más en apariencia básica, sino en otros detalles que
nos interesan más, como los formularios o los estilos.
Nota 2: ¿Demasiadas abreviaturas? Para quien habla un poco de inglés no
serán tan duras: no es sólo que "table" sea la traducción de "tabla", sino que
"tr" es la abreviatura de "table row" (fila de tabla), "br" es la de "break"
(partir), "li" lo es de "list item" (elemento de la lista), "ul" viene de "unordered
list"... En la práctica, hay que memorizar mucho menos de lo que puede parecer
en un principio. Además, es frecuente usar herramientas que nos permitan
diseñar la parte visible de la página sin tener que teclear nada, y así centrarnos
en la lógica. Pero de esas herramientas hablaremos más adelante. Cuando uno
empieza, es preferible "teclear todo", para memorizar las estructuras básicas;
más adelante llegará el momento de ahorrar trabajo (y tiempo).
 04.01.01 - Crea una página web con tres párrafos. El primero contendrá
3 palabras (separadas) en negrita. El segundo tendrá toda una frase
(pero no todo el párrafo) en cursiva. El tercero tendrá dos saltos de
línea intermedios. Debe haber un título antes del primer párrafo.
 04.01.02 - Crea una página web que muestre una lista ordenada con los
días de la semana y una lista sin numerar con los meses de año
 04.01.03 - Crea una tabla con un "horario": columnas para representar
los días del lunes al viernes, otra columna inicial para las horas; los datos
intermedios serán las tareas que hay que realizar a cada hora de cada
día

4.2. Formularios
Una forma habitual de pedir datos al usuario es mediante un "formulario", que
tenga casillas para introducir textos, para escoger entre varias opciones...
 El formulario comenzará con <form> y acabará con </form>
 Las casillas de introducción de texto se indicarán con <input type="text"
/>. Podemos darle un nombre ("name"), que será necesario si esa página
se va a comunicar con otra, pero en nuestro caso, que "jugaremos" desde
la misma página, no lo será tanto. También podemos indicar un valor por
defecto ("value"), que aparezca ya escrito, antes de que el usuario
introduzca nada: <input name="nombre" type="text" value="Nacho" />
 Las casillas para contraseñas se crean de la misma forma, pero serán del
tipo "password", en vez de "text": <input name="clave" type="password"
/>
 Las "casillas de selección múltiple" (checkbox) se indican de forma
similar: <input name="intereses" type="checkbox" value="Viajes"
/>Interesado en los viajes<br /> <input name="intereses"
type="checkbox" value="Deporte" />Aficionado a los deportes
 Las "casillas de selección única" (radio buttons) son parecidas, pero sólo
una de ellas podrá estar seleccionada simultáneamente: <input

name="sexo" type="radio" value="Hombre" /> <input name="sexo"
type="radio" value="Mujer" />
 Las listas desplegables se indican entre <select> y </select>, y cada una
de sus opciones entre <option> y </option>: <select name="ciudad"><option
value="m">Madrid</option><option value="se">Sevilla</option></select>
 La forma habitual de crear un botón que termine un formulario es con
un <input name="Enviar" type="submit" />, pero estos botones hacen que
el formulario se dé por terminado y se salte a una segunda página que lo
procese. Como nosotros no vamos a usar una segunda página (al menos
por ahora), sino que será la propia página la que manipule esos datos, por
ahora usaremos un <button>: <button type="button">Enviar</button>
Un ejemplo:
<html>
<body>
<form>
Dime tu nombre:
<input type="text" name="nombre" value="Nacho" />
<br />
Y tu clave:
<input type="password" name="clave" />
<br />
Intereses:<br />
<input type="checkbox" name="intereses" value="Viajes">
Interesado en viajar
<br />
<input type="checkbox" name="intereses" value="Deporte">

Aficionado a los deportes
<br />
Sexo: <br />
<input type="radio" name="sexo" value="Hombre" />
Hombre <br />
<input type="radio" name="sexo" value="Mujer" />
Mujer <br />
Ciudad:
<select name="ciudad">
<option value="m">Europa</option>
<option value="se">Asia</option>
</select>
<br />
<button type="button">Enviar</button>
</form>
</body>
</html>
que se vería:

 04.02.01 - Crea un formulario que muestre que pida al usuario su nombre
y su contraseña, e incluya un botón para "Enviar" esa información (que,
por ahora, no se enviará realmente a ningún sitio).
 04.02.02 - Crea un formulario para que el usuario introduzca una fecha:
el día será una casilla de texto, el mes será una lista desplegable y el año
será una serie de "radio buttons" que permita escoger los años 2012,
2013, 2014 o 2015.
 04.02.03 - Crea un formulario que permita indicar al usuario su nombre
(en un casilla de texto), sus años de experiencia como programador (en
otra casilla de texto) y los lenguajes de programación que conoce (a
escoger uno o varios entre C, C++, C#, Java, JavaScript, Pascal. Debes
usar una tabla de dos columnas: en la primera columna estará el texto
que explica lo que el usuario debe introducir en cada campo y en la
segunda columna aparecerá el correspondiente campo. Esto ayudará a
que los datos queden alineados y la apariencia en pantalla sea más
elegante.
4b. Estilos, clicks y modificación de la página
4.3. Nociones mínimas de estilos
Desde hace muchos años, los procesadores de texto (como Word, o
LibreOffice Writer) permiten crear textos largos de dos formas: la mala y la
buena. La mala es empezar a escribir, e ir cambiando cada tipo de letra cuando

lo necesitamos: si queremos un título un poco más grande, cambiamos su
tamaño; si queremos que tenga otro tipo de letra, lo escogemos; si queremos
otro color, lo seleccionamos en la lista desplegable de colores... La forma buena
es escribir todo el texto, y después cambiar "los estilos" que nos interesen: si
decimos que el estilo "Título 1" debe tener tipo de letra Tahoma, en tamaño 15,
estar centrado y en color azul, todos aquellos párrafos que habíamos definido
como "Título 1" cambiaran inmediatamente. Esto ahorra trabajo y evita
inconsistencias (además de otras muchas ventajas "secundarias", como el
hecho de que podamos crear índices sólo con un clic).
Esta misma idea se puede aplicar a una página web: podemos hacer
fácilmente que todos los estilos "Título 1" estén centrados, o usen cierto color,
o tengan un cierto margen, o tal tipo de letra, o un borde en la parte superior...
Para eso utilizaremos "hojas de estilo en cascada" (CSS). Nuevamente, apenas
veremos una mínima parte de las posibilidades de CSS, pero será suficiente
para hacer documentos un poco más atractivos y para ver cómo modificar la
apariencia de una página "al vuelo" con la ayuda de JavaScript.
Es frecuente que una "hoja de estilo" sea un fichero aparte de la página
HTML (de hecho, esto también es frecuente para los programas en
JavaScript), pero por ahora, para que todo quede en un mismo sitio, dejaremos
la definición de los estilos al principio de nuestra página: antes del cuerpo
(body) de la página, incluiremos una cabecera (head), que por ahora sólo
contendrá los detalles estilos, entre y . Vamos a ver un ejemplo, y luego
comentaremos los detalles:
<html>
<head>
<style>
body
{
background-color: rgb(200,200,200);
font-family: Sans-Serif;
}

h1
{
font-size: 1.4em;
color: blue;
}
h2
{
margin-left: 10px;
}
p
{
margin-left: 20px;
text-align: justify;
}
table
{
border: 2px solid black;
border-collapse: collapse;
}
td
{
border: 1px solid rgb(120,120,120);
padding: 5px;

}
</style>
</head>
<body>
<h1>Ejemplo de apariencias</h1>
<h2>Apariencia del texto</h2>
<p>Este es un parrafo</p>
<p>y este es otro, que tiene texto en <b>negrita</b> y texto en <i>cursiva</i>,
e incluso <font color=rgb(0,0,255)>texto azul (si el navegador lo
permite)</font>.</p>
<p>Podemos... <br/> partir un parrafo</p>
<h2>Listas</h2>
<ul>
<li>Este es el primer elemento de una lista</li>
<li>Y este es el segundo</li>
</ul>
<ol>
<li>Esta lista tiene numeros</li>
<li>Y mas numeros</li>
</ol>

<h2>Tablas</h2>
<table>
<tr><td>Enero</td><td>Febrero</td></tr>
<tr><td>234</td><td>325</td></tr>
</table>
</body>
</html>
En este caso, tenemos:
 Para todo el cuerpo de la página (body), el tipo de letra será "Sans-
Serif" (sin adorno, como la Arial o la Helvetica) y el fondo será de un
color gris bastante claro (tanto la cantidad de rojo, como la de verde y
la de azul son 200 de un máximo de 255).
 Los títulos 1 (h1) tienen un tamaño de un 140% del texto normal (1.4em)
y color azul.
 Los títulos 2 (h2) tienen un margen a la izquierda de 10 píxeles.
 Cada párrafo (p) tendrá un margen izquierdo de 20 píxeles y alineación
justificada (el texto "se estirará" para llegar desde el margen izquierdo
hasta el margen derecho).
 Las tablas tendrán un borde exterior, que será sólido (no punteado ni de
"rayitas"), de color negro y de 2 píxeles de grosor. Además, las líneas
que bordean dos casillas adyacentes se juntarán (collapse) en una única
línea.
 Cada casilla de una tabla tendrá un borde de un píxel en un color gris
intermedio, y un relleno (padding) de 5 píxeles entre el texto y el borde.
El resultado sería

4.4. Respondiendo a clicks
La mayoría de elementos de una página aceptan que añadamos un dato adicional,
llamado "onclick", y en el que podríamos indicar un fragmento de programa en
JavaScript que queremos que se ponga en marcha cuando hagamos click en ese
elemento:
<html>
<body>
<p onclick="document.write('Hola... ');">Haz clic aqui!</p>
</body>
</html>
Como se ve en este ejemplo, no hace falta que se trate de un botón. En nuestro
caso, se escribe algo cuando se hace clic sobre un cierto párrafo. Para que esta
posibilidad sea útil, tendremos que aprender a crear "funciones" en

JavaScript, de modo que el fragmento de programa que incluyamos sea breve y
conciso. A eso nos dedicaremos dentro de muy poco.
4.5. Modificando elementos de la página
Desde JavaScript podemos acceder a los elementos que contiene una página,
leer su contenido y cambiarlo. Nos ayudará añadirles un nuevo detalle, un
"identificador" (id): . A partir de entonces, podemos acceder a ese
elemento mediante su identificador, usando "getElementById": var
casilla1=document.getElementById("num1"); Y podemos leer o cambiar sus
detalles. Por ejemplo, si es una casilla de texto, podríamos leer su ".value", y si
es un párrafo podríamos cambiar su ".innerHTML" (el texto que contiene).
Incluso podríamos cambiar su color o cualquier otra característica de su estilo:
".style.color = ..." Vamos a ver un primer ejemplo, que sume dos números
introducidos por el usuario, pero no utilizando ventanas emergentes, sino
leyendo lo que se ha tecleado en dos casillas de texto que son parte de un
formulario, y modificando el contenido de un párrafo para escribir el
resultado:
<html>
<body>
<form>
Primer numero:
<input type="text" name="num1" id="num1" />
<br />
Segundo numero:
<br />
<p id="resultado">Suma: </p>

<button type="button" onclick='
var casilla1=document.getElementById("num1");
var n1 = casilla1.value;
var resultado=document.getElementById("resultado");
resultado.innerHTML = "Suma: " +(parseInt(n1)+parseInt(n2));
resultado.style.color = "blue";
'>Calcular suma</button>
</form>
</body>
</html>
 04.05.01 - Crea una página web que cambie el color del fondo cada vez
que el usuario haga clic sobre ella.
 04.05.02 - Crea una página web con un párrafo y dos botones que sirvan
para hacer el tamaño del texto más grande y más pequeño,
respectivamente.
 04.05.03 - Crea una página web con un párrafo y dos botones que sirvan
para hacer ocultar y mostrar ese párrafo (pista, puedes cambiar el
color, para que sea igual que el del fondo, o bien usar "display:none" para
ocultar y "display:inline" para mostrar).

 04.05.04 - Crea una página web con tres casillas de texto y un botón que
sume los números que haya escritas en esas tres casillas.
 04.05.05 - Crea una página web con dos casillas de texto y cuatro
botones, que permitan calcular su suma, su diferencia, su multiplicación y
su división.
5.Funciones
Podemos asociar un fragmento de programa a un clic sobre un elemento
de una página web. El problema es que si el fragmento es muy grande, el
resultado puede resultar difícil de leer. Una alternativa más compacta es crear
pequeños "bloques de programa", que llamaremos funciones.
5.1. Una función básica
En su forma más básica, una función nos permite agrupar varias órdenes
y dar un nombre a ese conjunto. Así, el ejemplo del apartado 4.5 se podría
reescribir así:
<html>
<body>
<script>

function calcularSuma()
{
var resultado=document.getElementById("resultado");
}
</script>
<form>
Primer numero:
<br />
Segundo numero:
<br />
<button type="button" onclick='calcularSuma()'>Calcular suma</button>
</form>
</body>
</html>

 05.01.01 - Crea una versión usando funciones del ejercicio que cambia el
color del fondo cada vez que el usuario haga clic sobre ella (ejercicio
04.05.01).
 05.01.02 - Crea una versión usando funciones del ejercicio que muestra
un párrafo y dos botones para hacer el tamaño del texto más grande y
más pequeño, respectivamente (ejercicio 04.05.02).
 05.01.03 - Crea una versión usando funciones del ejercicio que crea un
párrafo y dos botones que sirvan para hacer ocultar y mostrar ese
párrafo (ejercicio 04.05.03).
tres casillas de texto y un botón que sume los números que haya escritas
en esas tres casillas (04.05.04).
dos casillas de texto y cuatro botones, que permitan calcular su suma, su
diferencia, su multiplicación y su división (04.05.05).
5.2. Funciones "personalizables"
No siempre querremos que una función maneje los mismos datos. Por
ejemplo, si queremos que una función compruebe si los datos que el usuario ha
introducido en una casilla son válidos, es innecesario crear una función para
cada casilla. Es preferible crear una única función a la que le podamos indicar
qué casilla concreta ha de verificar. Para ese, podemos indicar "parámetros" a
la función, que detallaremos en el paréntesis que sigue a su nombre, así:
<html>
<body>
<script>
function calcularSuma(numero1, numero2, posicionResultado)
{
var casilla1=document.getElementById( numero1 );

var resultado=document.getElementById( posicionResultado );
}
</script>
<form>
Primer numero:
<br />
Segundo numero:
<br />
<button type="button"
onclick="calcularSuma('num1', 'num2', 'resultado');">
Calcular suma</button>
</form>
</body>
</html>
En este caso, la función "calcularSuma" recibe tres datos: la primera
casilla, la segunda casilla y la posición en la que queremos mostrar el resultado;
al llamar a la función, deberemos rellenar esos detalles con los datos reales de

las casillas que queramos usar. Así, podemos aplicar esa misma función a
bloques distintos de casillas, como en este ejemplo:
<html>
<body>
<script>
function calcularSuma(numero1, numero2, posicionResultado)
{
}
</script>
<form>
Primer numero:
<br />
Segundo numero:
<br />

onclick="calcularSuma('num1', 'num2', 'resultado');">
</form>
<form>
Primer numero alternativo:
<br />
Segundo numero alternativo:
<br />
<p id="resultado2">Suma: </p>
onclick="calcularSuma('num3', 'num4', 'resultado2');">
</form>
</body>
</html>
 05.02.01 - Crea una variante del ejemplo previo, que multiplique los
números de las casillas, en vez de sumarlos. La función deberá llamarse
"calcularProducto".

 05.02.03 - Crea una versión mejorada del ejercicio 05.01.02, que
muestre tres párrafos distintos, cada uno de ellos con dos botones para
hacer el tamaño su texto más grande o más pequeño.
 05.02.03 - Crea una versión mejorada del ejercicio 05.01.03, que
muestre tres párrafos distintos, con dos botones para cada uno, que
sirvan para hacer ocultar y mostrar el párrafo correspondiente.
5.3. Valor devuelto por una función
Una función no sólo es un bloque de órdenes. También puede devolver un
resultado, como ocurre "en el mundo real" con las funciones matemáticas. Ese
valor devuelto se podrá usar en cualquier punto de un programa en el que
pudiéramos emplear una variable. Por ejemplo, podemos crear una función que
calcule (y devuelva) la suma de tres números y usarla para sumar lo que el
usuario teclee en 3 casillas:
<html>
<body>
<script>
function sumar(num1, num2, num3)
{
var suma = parseInt(num1)+parseInt(num2)+
parseInt(num3);
return suma;
}
function sumarCasillas(numero1, numero2, numero3, posicionResultado)

{
resultado.innerHTML = "Suma1: " +sumar(n1,n2,n3);
}
</script>
<form>
Primer numero:
<br />
Segundo numero:
<br />
Tercer numero:
<br />
onclick="sumarCasillas('num1', 'num2', 'num3', 'resultado');">

</form>
</body>
</html>
 05.03.01 - Crea una función que calcule el mayor de 3 números. Con ella,
crea una página que muestre tres casillas al usuario, permita que éste
introduzca tres valores y escriba cuál es el mayor de ellos.
 05.03.02 - Crea una función que calcule el perímetro de un cuadrado, a
partir de su lado. Crea también otra función que calcule la superficie de
un cuadrado a partir de su lado. Con ellas, crea una página que muestre
una casilla al usuario, en la que éste deberá introducir el lado del
cuadrado, y cuando se haga clic en un botón, se mostrará el perímetro y
el área de ese cuadrado.
 05.03.03 - Crea un programa similar al 05.03.02, pero que calcule la
longitud de una circunferencia y la superficie de un círculo, ambos a
partir de su radio.
5.4. Algunas funciones predefinidas
Tenemos muchas funciones predefinidas, que nos pueden hacer la vida
más sencilla. Bastantes de ellas son numéricas, y otras, que veremos en el
próximo apartado, permiten manipular textos. Entre las numéricas, ya
habíamos visto las que permiten generar números al azar (Math.random) y
quedarnos con la parte entera de un número (Math.floor):
<html>
<body>
<script>
var azar1 = Math.random();
document.write("Al azar entre 0 y 1: " + azar1 + "<br />");

var azar2 = Math.random() * 5;
document.write("Al azar entre 0 y 5, con decimales: "
+ azar2 + "<br />");
var azar3 = Math.floor( Math.random() * 6 );
+ azar3 + "<br />");
+ azar4 + "<br />");
+ azar5 + "<br />");
</script>
</body>
</html>
Otras funciones matemáticas que pueden resultar útiles son:
<html>
<body>
<script>
document.write("Raiz de 5: " + Math.sqrt(5) + "<br />");
document.write("Valor absoluto de -1: " + Math.abs(-1) + "<br />");

document.write("Dos elevado al cubo: " + Math.pow(2,3) + "<br />");
document.write("Logaritmo natural de 10: " + Math.log(10) + "<br />");
document.write("Coseno de 45 grados (PI/4 radianes): " +
Math.cos( Math.PI/4 ) + "<br />");
document.write("Seno de 60 grados: " +
Math.sin( 60 * (Math.PI / 180) ) + "<br />");
</script>
</body>
</html>
Y también tenemos muchas funciones para manejar fechas y horas, como por
ejemplo:
<html>
<body>
<script>
var hoy = new Date();
document.write("Dia del mes: " + hoy.getDate() + "<br />");
document.write("Numero de mes: " + (hoy.getMonth()+1) + "<br />");
document.write("Anyo con 4 cifras: " + hoy.getFullYear() + "<br />");
document.write("Dia de la semana (0=domingo): " + hoy.getDay() + "<br />");
document.write("Hora (0 a 24): " + hoy.getHours() + "<br />");
document.write("Minutos: " + hoy.getMinutes() + "<br />");
document.write("Segundos: " + hoy.getSeconds() + "<br />");
document.write("Milisegundos: " + hoy.getMilliseconds() + "<br />");
var otraFecha = new Date(2000, 2, 1);
document.write("Dia de la semana del 1-feb-2001: " +

otraFecha.getDay() + "<br />");
</script>
</body>
</html>
 05.04.01 - Crea un programa que permita convertir de grados a radianes
(usando la equivalencia: PI radianes = 180 grados).
 05.04.02 - Crea un programa que pida al usuario una fecha (día, mes y
año) y diga a qué día de la semana corresponde (como cifra del 0 -
domingo- al 6 -sábado).
 05.04.03 - Mejora el programa 05.04.02 para que muestre el nombre del
día de la semana, en vez de la cifra numérica.

Cómo escribir JavaScript para principiantes: tutorial paso a paso

Recomendados

Recomendados

Más contenido relacionado

La actualidad más candente

La actualidad más candente (20)

Similar a Cómo escribir JavaScript para principiantes: tutorial paso a paso

Similar a Cómo escribir JavaScript para principiantes: tutorial paso a paso (20)

Más de ljds

Más de ljds (20)

Último

Último (20)

Cómo escribir JavaScript para principiantes: tutorial paso a paso