2.1. Filosofía general

JavaScript toma su sintaxis de los lenguajes de programación más conocidos, fundamentalmente C, aunque también algo de Pascal.

Aunque existen diversas formas de añadir código Javascript a una página web, una de las más usadas es utilizar la etiqueta de HTML llamada <SCRIPT>.

Así, para hacer los ejemplos y ejercicios que se proponen se debe seguir el siguiente procedimiento:
  1. Abrir un editor de textos y comenzar un fichero HTML nuevo (o cargar uno ya existente)
  2. Introducir una etiqueta <SCRIPT>
  3. Escribir el código del programa Javascript
  4. Cerrar con la etiqueta </SCRIPT>
  5. Guardar el fichero (con extensión .htm o .html)
  6. Abrirlo en un navegador para ver el resultado
Se propone copiar el siguiente ejemplo para comprobar el uso de Javascript en nuestro ordenador:

<HTML>
<HEAD>
<TITLE>Comprobación de uso de Javascript</TITLE>
</HEAD>
<BODY>
A continuación debería ver la frase: HOLA MUNDO <BR>
<SCRIPT>
document.write( "HOLA MUNDO" )
</SCRIPT>
</BODY>
</HTML>
Que en el navegador debería quedar de la siguiente forma:

Página web de comprobación de Javascript habilitado

2.2. Las variables

Como en la mayoría de los lenguajes de programación, Javascript utiliza una serie de instrucciones para operar sobre ciertos datos. Los datos pueden representarse de forma explícita en una instrucción, como por ejemplo:

document.write( "Hola Mundo!" )
document.write( 3+5 );

O bien ser almacenados en una variable y posteriormente usar el contenido de dicha variable, como en el siguiente trozo de código:

document.write( texto )
document.write( anioActual - anioNacimiento )

Podemos trabajar con los datos más habituales tales como números enteros, números reales, cadenas de caracteres y valores lógicos o booleanos. No obstante, en Javascript NO hay tipificación de las variables, ni tampoco constantes. Por ende, tampoco se pueden definir nuevos tipos de variables, aunque sí nuevos tipos de objetos, como veremos.

Para usar una variable, hemos de empezar por darle un valor con el signo =:

foo=15;
bar="Hola, viejo";

El punto y coma del final NO es realmente necesario si se separan las instrucciones líneas distintas, como suele ser el caso. No obstante, si deseamos escribir varias de ellas en la misma línea debemos usar el ; para separarlas.

Dado que lo que contendrán son daros, las variables también pueden almacenar números enteros, números reales, cadenas (las cadenas se escriben entre comillas dobles o simples, es indiferente), valores booleanos (es decir, los valores true o false), objetos, y por supuesto matrices de cualquiera de los datos descritos.

El tipo de la variable será el del valor que en cada momento le hayamos asignado. En los ejemplos anteriores foo es de tipo numérico (porque es un número entero), y bar lo es de tipo cadena.

En Javascript se intenta hacer conversiones de tipo siempre que haga falta. Así por ejemplo, si escribimos la siguiente sentencia:

foobar=foo+bar;

no obtendremos ningun error debido a tipos no compatibles ni nada de eso, sino que concatenará foo y bar cual si de dos cadenas se tratara.

Es más, si escribiéramos algo como;

bar="Esto es una cadena";
bar=15*2;
bar=bar*3;

el resultado final de la variable bar es 90. Es decir, también convierte cadenas a números cuando hace falta.

Para poder utilizar una variable debemos saber cuál es el ámbito de validez de la misma, es decir, las porciones del programa en las que esa variable está definida. Hay que tener en cuenta que un programa en javascript está compuesto por muchas porciones de código, muchas de ellas recogidas en forma de subprogramas o funciones

Para Javascript, el ámbito de una variable es siempre el más amplio posible. Es decir, si comenzamos a usar una variable fuera de cualquier función (en lo que llamaríamos el "programa principal"), desde ese momento estará disponible dentro de cualquier función como variable global.

En el siguiente ejemplo, la función suma_20_a_edad modifica la variable edad sumándole el número 20, pero sin que la variable se le pase como parámetro, sino que se usa como variable global (ya que la variable en sí, la variable edad, está siendo definida fuera de la función).

edad=27; // Defino el valor de la variable
suma_20_a_edad(); // llamoda a función en que modificará dicha variable

Esto puede causar problemas de efectos laterales y podría darse el caso de que modificáramos una variable global en una función pensando que solo estamos cambiando una variable local a dicha función, y todo por el hecho de haberles dado a ambas el mismo nombre.

Para evitar esto, podemos ponerle la palabra var antes de usar por primera vez la variable, para indicar que dicha variable es local a la función en que se está usando. Veamos un ejemplo:

function modifica_edad() {
edad=edad+100;
}

function no_modifica_edad() {
var edad=edad+100;
}

edad = 30;
modifica_edad();
no_modifica_edad();

En este ejemplo, tras llamar a modifica_edad() la variable global edad pasa de valer 30 a valer 130. Sin embargo, tras llamar a no_modifica_edad sigue con el valor 130.

Como se puede oberservar NO se le ha puesto la palabra var a la variable global dado que, en efecto, no es necesario pues va a ser global.

Para conocer más acerca de la definición de funciones y uso de las variables en ella, ver el apartado Sintaxis II.

2.3. Sentencias

Los lenguajes de programación suelen definir tres tipos de sentencias o instrucciones: secuenciales, selectivas e iterativas. javascript también lo hace. Además, la sintaxis de sus sentencias es muy similar a la sintaxis del lenguaje C.

Sentencias Secuenciales

Podemos describir tres sentencias secuenciales en Javascript: asignación, escritura y lectura.

Hemos visto un poco más arriba que la asignación se realiza con el símbolo =, es decir:

 variable=expresion

Esta sentencia, por si misma, no ejecuta ninguna acción "visible" para el usuario de nuestra página web, pero es fundamental para que nuestros programas puedan ir haciendo poco a su trabajo, realizando cálculos que se van almacenando en las variables.

Si queremos interactuar con el usuario, habremos de utilizar las otras dos sentencias secuenciales: la escritura y la lectura.

Por simplificar un poco, la sentencia de escritura podemos que considerar que es write. En realidad, debemos decir que es document.write ya que es un método de un objeto que se llama document. Como hemos dicho, este es uno de los mecanismos que podemos usar para escribir cosas desde JavaScript para que se puedan ver a través del navegador (normalmente, el otro mecanismo que se ha impuesto como estándar es el de utilizar capas y su propiedad innerHTML, como también veremos al estudiar el objeto document).

Mostramos a continuación algunos ejemplos en los que se usa la asignación y la escritura en un programa de Javascript.

document.write( "<h2>Ejemplo de uso de sentencias de escritura</h2>" )

document.write( "<P>" )
anioActual=2010
document.write( "Estamos en ", anioActual )

anioNacimiento=1971
document.write( " por lo que si usted nació en ", anioNacimiento )
document.write( " su edad es de ", anioActual-anioNacimiento, " años" )
document.write( "</P>" )

La sentencia de lectura permite al usuario darle datos al programa, o si se prefiere, permite al programa preguntarle datos al usuario. En Javascript esta asignatura no existe como tal, aunque el objeto window tiene un método llamado prompt que se puede usar para tales menesteres. Lo normal, no obstante, es usar elementos de formularios (especialmente campos text) para solicitar datos al usuario.

Hemos modificado el ejemplo anterior para que calcule automáticamente el año en que estamos y para que le pregunte al usuario en qué año nació:

document.write( "<h2>Ejemplo de uso de sentencias de escritura</h2>" )

document.write( "<P>" )
fecha=new Date()
anioActual=1900+fecha.getYear() // Se suman 1900 para Firefox
anioNacimiento=prompt( "¿En qué año nació usted?", "" ) * 1
document.write( "Estamos en ", anioActual )
document.write( " por lo que si usted nació en ", anioNacimiento )
document.write( " su edad es de ", anioActual-anioNacimiento, " años" )
document.write( "</P>" )

Ejercicios
  1. Realizar un programa que pida el nombre del usuario y lo salude diciéndole:

    Hola, NOMBRE DEL USUARIO

  2. Realizar un programa que pida 3 números y escriba en pantalla el valor de la media aritmética.

  3. Realizar un programa que pida dos números y escriba en pantalla el valor de la suma, la resta, la multiplicación y la división de los mismos.

  4. Realizar un programa que pida, por este orden: Nombre del usuario, apellidos, nota del primer parcial y nota del segundo parcial. Posteriormente que escriba en pantalla:

    APELLIDOS, NOMBRE............(NOTA 1er PARCIAL) (NOTA 2o PARCIAL) (NOTA FINAL)

    donde la Nota Final es la suma de las dos notas parciales.

  5. Realizar un programa que pida los valores de dos colores: colorFondo y colorTexto. Ambos colores debe introducirlos el usuario con valores válidos en HTML (es decir, o bien el nombre del color o bien su codificación hexadecimal). Posteriormente, que el programa cree un párrafo (o una capa, es exactamente igual) con color de fondo igual a colorFondo y con un texto dentro de él (el que se desee) que sea de color colorTexto.

Sentencias Condicionales

Las sentencias secuenciales permiten evaluar una condición y ejecutar un grupo de instrucciones si la condición resulta ser verdadera, y otro grupo de instrucciones distinto si la condición resulta ser falsa. A este tipo de sentencias se les suele denominar if...then...else... porque tienen la siguiente forma:

if ( condicion ) {
sentencias_true;
} else {
sentencias_false;
}
Por ejemplo, podemos comprobar un usuario es o no mayor de edad:
edad=prompt( "Indique su edad, por favor", "" )
if ( edad < 18 ) {
document.write( "Usted es un menor de edad.<br>" )
document.write( "No olvide adjuntar el documento de autorización." )
} else {
document.write( "Usted es mayor de edad.<br>" )
document.write( "No olvide adjuntar fotocopia del DNI." )
}


Existen casos en los que deseamos comprobar para una misma variable distintos valores; en esas ocasiones conviene utilizar ota sentencia llamada switch que opera de la siguiente forma:
switch( variable ) {
case valor :
case valor : { sentencias; break; }
case valor :
case valor : { sentencias; break; }
default: { sentencias; }
}
Por ejemplo:

universidad=prompt( "Indique su Universidad andaluza de origen: ", "" )
switch( universidad ) {
case "Huelva" :
case "Sevilla" :
case "Cadiz" : { document.write ("No convalidan créditos" ) }; break;
case "Malaga" :
case "Cordoba": { document.write ("Convalidan 50% de créditos" ) }; break;
case "Jaen" :
case "Almeria":
case "Granada": { document.write ("Convalidan 70% de créditos" ) }; break;
default: { document.write( "No reconozco la Universidad que usted indica" ) }
}

Ejercicios
  1. Realizar un programa que pida dos números al usuario. Posteriormente, que el programa indique cuál de los dos números es el menor y cuál es el mayor

  2. Realizar un programa que pida un número y escriba en pantalla su valor absoluto
  3. Realizar un programa que pregunte al usuario su nombre y también si ha nacido o no en Granada. Si no ha nacido en Granada, que le pregunte en qué ciudad nació. Al final, que el programa escriba en pantalla: 

    NOMBRE nació en CIUDAD
  4. Realizar un programa similar al ejercicio 5 anterior. En esta ocasión, en vez de pedir los dos colores al usuario, le pediremos una "configuración". El valor que el usuario puede indicar para la variable configuracion sólo puede ser: BN, azul o rojo. A continuación, al igual que en el ejercicio 5, se debe escribir un párrafo con un texto dentro, de modo que si el valor elegido por el usuario ha sido BN, el fondo será blanco y el texto negro. Si el valor elegido es azul, el texto será de color azul oscuro y el fonfo de color azul muy claro. Y si el valor elegido es rojo, el texto será rojo oscuro y el fondo rojo claro. 

Sentencias Iterativas

Finalmente, javascript permite ejecutar varias veces un mismo trozo de código, haciendo más fácil repetir una misma tarea escribiéndola una sola vez.

Las sentencias que incorporar para hacer los denominados bucles son:

while( condicion ) {
sentencias;
}

// *****************************

do {
sentencias;
} while ( condicion );

// *****************************

for( inicializacion; condición; incremento ) {
sentencias;
}

A modo de ejemplo, realizamos un programa que escribe en pantalla la tabla de multiplicar del 17, aunque en vez de multiplicar hasta 10, lo hace hasta 50.

document.write( "<h2>Tabla de multiplicar del 17</h2>" )
cont=1;
while( cont<=50 ) {
document.write( 17, "*", cont, "=" )
document.write( 17*cont )
document.write( "<BR>" )
cont=cont+1;
}

// OTRA FORMA DE HACERLO
for( cont=1; cont<=50; cont=cont+1 ) {
document.write( 17, "*", cont, "=" )
document.write( 17*cont )
document.write( "<BR>" )
}


Ejercicios
  1. Modificar el programa anterior para que pregunte un número al usuario y dé la tabla de multiplicar de ese número (en vez de dar siempre la del 17 como en el ejemplo)

  2. Realizar un programa que pida números hasta que la suma de los mismos sea mayor que 100.

  3. Realizar un programa que pregunte al usuario números entre 0 y 100. Si el número introducido por el usuario es menor que 23, que el programa le diga que el número buscado es mayor. Si el número introducido por el usuario es mayor que 23, que el programa le diga que debe introducir un número menor. Si el número introducido por el usuario es el 23, que el programa le diga que ha acertado y acabe. El programa debe estar pidiendo números hasta que el usuario acierte. 

  4. Realizar un programa que escriba en pantalla una tabla de 16 filas por 16 columnas. El color de fondo de cada celda debe ser igual al color gris que se consigue poniendo cada componente RGB al valor fila*16+columna de cada celda. Es decir, la primera celda tendrá color rgb(0,0,0), la siguiente rgb( 1,1,1 ), la siguiente rgb (2,2,2), etc.

Incrementos y operaciones con variables

variable++; ++variable; variable--; --variable;
variable+=valor; variable-=valor; variable*=valor; variable/=valor;
variable=(condicion)?valor_true:valor_false;

Comentarios

Con // obtendremos comentarios hasta el final de la línea.

Con /* .... */ obtendremos comentarios de varias líneas.