CURSO DE JAVASCRIPT
PRIMERA PARTE

1. INTRODUCCIÓN

En un principio las páginas Web disponían de un contenido estático, tan sólo permitían que el usuario utilizase enlaces para moverse entre las distintas partes de su contenido. Con el paso del tiempo se ha visto la necesidad de desarrollar tecnologías que permitan dotar a las páginas de internet de interactividad, es decir, dar la posibilidad al usuario de interactuar con la información que se presenta en los navegadores.

El primer lenguaje utilizado para crear páginas Web fue el sencillo y manejable lenguaje de hipertexto llamado HTML. Este lenguaje permite mostrar texto e imágenes en los navegadores, así como crear enlaces entre todos sus elementos. Posteriormente, se Netscape Corporation creo el lenguaje JavaScript para permitir, de una manera sencilla, introducir una mayor interactividad en las páginas Web. El código JavaScript puede ser incorporado directamente en las páginas HTML y no se requieren complejos conceptos de programación para su uso.

2. PRIMEROS PASOS CON JAVASCRIPT

Para añadir JavaScript se limita el código con la la etiqueta SCRIPT. Este puede estar en cualquier lugar de la página. El código se ejecuta en el lugar donde se encuentra.

<SCRIPT LANGUAGE="JavaScript">
<!--
	Aquí va el código
//-->
</SCRIPT>

Ejemplo 2.1: Mostrar un texto por pantalla utilizando la instrucción document.write(texto)

<SCRIPT LANGUAGE="JavaScript">
<!--
	document.write ("Este texto está escrito con JavaScript");

//-->
</SCRIPT>

[Ejecución]

Ejemplo 2.2: Utilizar las intrucciones: navigator.appName, que indica el nombre del navegador y navigator.appVersion, que nos indica la versión, para ver esta información por pantalla.

<SCRIPT LANGUAGE="JavaScript">
<!--
	document.write ("El navegador utilizado actualmente es "+navigator.appName+ "
			,versión "+navigator.appVersion);

//-->
</SCRIPT>

[Ejecución]

3. VARIABLES Y VALORES

Las variables son elementos del lenguaje que permiten almacenar distintos valores en cada momento. Se puede almacenar un valor en una variable y consultar este valor posteriormente, también podemos modificar su contenido siempre que queramos.

Definir variables

Para declarar las variables en JavaScript se utiliza la instrucción var. A cada variable se le asigna un nombre, y opcionamente, un valor inical. Si no se trata de una función, la instrucción var es opcional, pero se recomienda utilizarla.

Nombrar variables

Cada variable es identificada por un nombre. Al asignar un nombre a una variables se deben tener en cuenta las siguientes reglas:

• Se pueden utilizar todas las letras del alfabeto en mayúsculas y minúsculas, los números del 0 al 9 y el guión subrayado.
• Los nombres de las variables no pueden contener puntos ni espacios en blanco.
• El primer carácter ha de ser una letra o el guión subrayado.
• En el nombre se hace distinción entre mayúsculas y minúsculas.
• No se puede utilizar como nombre ninguna de las palabras reservadas para JavaScript, es decir, no se pueden utilizar palabras que coincidan con las que que pertenecen al lenguaje JavaScript.
• Oficialmente no hay restricciones en cuanto a la longitud del nombre, pero éste debe caber en una sola línea.

Tipos de variables

Los tipos de valores que puede contener una variable JavaScript son:

• Números: puede contener cualquier tipo de número real o entero.
• Operadores lógicos o boolean: puede contener uno de los siguiente valores: true, false, 1 y 0.
• Cadenas de caracteres o String: cualquier combinación de caracteres (letras, numeros, signos especiales y espacios). Las cadenas se delimitan mediante comillas dobles o simples. Las comillas simples, por norma, serán utilizadas dentro de fragmentos de código delimitados por comillas dobles o viceversa.

Conversión

Los números pueden incluirse facilmente en strings, pero los strings no se pueden incluir directamente en numeros, para eso existen funciones explicitas de conversión, parseInt() y parseFloat() son las funciones encargadas de hacerlo.

parseFloat(cadena) transforma en número una cadena de caracteres que se ha de transmitir y la devulve como valor numérico. Si el número se puede interpertar como número decimal, la función lo tiene en cuenta. Como signo decimal se interpreta el punto. La función resulta muy útil, por ejemplo, para transformar las entradas del usuario en valores numéricos que permitan hacer cálculos. Devulve NaN cuando la cadena de caracteres empieza con caracteres que no se pueden interpretar como parte de un número. Si la cadena contiene caracteres no numéricos hacia el final, el número se interpreta sólo hasta donde empiezan los caracteres no numéricos, y se devulve como valor la parte interpretada como número.

parseInt(cadena) funciona de forma similar a la función anterior, pero el valor devuelto siempre es un entero y considera el punto como un carácter.

A continuación veremos unos ejemplos de conversión de variables:

var aPartirde = 1;
var hastaAqui = 10,frase;
var hacerQue = "Contar desde ";
frase=hacerQue + aPartirde + " a " + hastaAqui + ".";
 

Despues de ejecutar estas sentencias, la variable frase contendrá "Contar desde 1 a 10." Los datos numéricos han sido obligados a tomar la forma de un string.

var ahoraQue = 0, frase;
frase = ahoraQue + 1 + "10"; // En este caso, porque "10" es un string,
// el operador "+" concatena los valores.

Despues de su ejecución, la variable ahoraQue contiene "0110". Para llegar a este resultado se siguen los siguientes pasos:

1. Mira los tipos de 1 y "10" y ahoraQue. El "10" y ahoraQuees un string, el 1 es un número, entonces el numero es obligado a convertirse en string.
2. Como en la expersión hay valores strings, se efectua una concatenacion de string. El resultado es "0110"
3. Almacena este resultado en frase.

En el ejemplo siguiente se realiza una conversión de la cadena "10" número entero, por lo que la operación se realiza como si todos los operandos fuesen números.

var ahoraPues = 0;
ahoraPues = ahoraPues + 1 + parseInt("10"); // En este caso, "+" realiza una suma.

Despues de la ejecución, la variable ahoraPues contiene el entero 11.

Ejercicios

Ejercicio 3.1: Introducir el siguiente código utilizando por los menos 4 variaciones en la definición y declaración de variables, con la condición de que el resultado sea el mismo. Explicar los cambios.

<SCRIPT LANGUAGE="JavaScript">
<!--
	var edad=23, nueva_edad, incremento;
	var nombre="Rosa García";
	incremento=4;
	nueva_edad=edad+incremento;
	document.write(nombre+ " dentro de "+incremento +" años tendrá "+
			nueva_edad+" años")
//-->
</SCRIPT>

Ejercicio 3.2: Detectar, corregir y explicar los errores en el siguiente código (hacerlo en papel).

<SCRIPT LANGUAGE="JavaScript">
<!--
	var texto.inic="Presentamos el producto";
	var 3aux=4,numero,aux1="ana";
	var emp est=true,var=5;
	var aux3_1=5;Nom_Primero;
	var _texto=entrada;
	aux3_1="Pedro";
	Nom_Primero=aux3_1;
	aux1=aux3_1;
//-->
</SCRIPT>

Ejercicio 3.3: Indicar qué salidas (document.write) se obtendrían del siguiente código (hacerlo en papel).

<SCRIPT LANGUAGE="JavaScript">
<!--
	var aux1="Oveja que bala",aux2="bocado que pierde";
	var num1=8, num2=5,resultado,operando="20";
	document.write(aux1+aux2+"<br>");
	document.write (num1+num2+"<br>");
	num1=num1+num2;
	resultado=num1+num2;
	document.write (num1+"-"+num2+"-"+resultado); 
	resultado=operando+num1;
	document.write (resultado);
	resultado=parseInt(operando)+num1;
	document.write (resultado);
//-->
</SCRIPT>

Ejercicio 3.4 Sustituir los comentarios por las órdenes apropiadas

<SCRIPT LANGUAGE="JavaScript">
<!--
	var puntos="340";
	var descuento=20;
	//Hacer lo necesario para restar "puntos" de "descuento"
	//Mostrar por pantalla un mensaje del tipo:
	//Los puntos obtenidos son 340, el descuento es 20 y el resultado final es 320
//-->
</SCRIPT>

Ejercicio 3.5Sustituir los comentarios por las órdenes apropiadas

<SCRIPT LANGUAGE="JavaScript">
<!--
	var nombre="Elena";
	var años="20";
	var aux=2;
	/*Hacer lo necesario para que se vea el siguiente mensaje utilizando 
		las variables correspondientes:
		Elena tiene 20 años y dentro de 2 años tendrá 22*/
//-->
</SCRIPT>

4. MOSTRAR Y LEER EN PANTALLA

alert()

El método alert() permite mostrar al usuario información literal o el contenido de variables en una ventana independiente. La ventana contendrá la información a mostrar y el botón Aceptar.

Su sintaxis es:

alert(mensaje)

Ejemplo 4.1: Muestra un mensaje literal en una ventana.

<SCRIPT LANGUAGE="Javascript">
<!--//Método Alert()
	alert("Bienvenido a Bulanladia");
// -->
</SCRIPT>

[Ejecución]

Caracteres especiales

En los mensajes se pueden introducir determinados caracteres que permiten realizar funciones especiales dentro de los valores de tipo string. Éstos son:

Ejemplo 4.2: Muestra un mensaje, que es la combinación de una variable y un literal, en una ventana. Además se produce un salto de línea pues se utiliza un caracter especial que la provoca.

<SCRIPT LANGUAGE="Javascript">
<!--//Método Alert()
var nombre="María";
alert(nombre+"\nbienvenida a Bulanladia");
// -->
</SCRIPT>

[Ejecución]

confirm()

A través del método confirm() se activa un cuadro de diálogo que contiene los botones Aceptar y Cancelar. Cuando el usuario pulsa el botón Aceptar, este método devuelve el valor true; Cancelar devuelve el valor false. Con ayuda de este método el usuario puede decidir sobre preguntas concretas e influir de ese modo directamente en la página.

Su sintaxis es:

confirm(mensaje)

Ejemplo 4.3: Solicita la confirmación de una operación

<SCRIPT LANGUAGE="Javascript">
<!--//Método Confirm()
	var respuesta;
	respuesta=confirm ("¿Desea cancelar la subscripción?");
	document.write("Usted ha contestado que "+respuesta)
// -->
</SCRIPT>

[Ejecución]

prompt()

El método prompt() abre un cuadro de diálogo en pantalla en el que se pide al usuario que introduzca algún dato. Si se pulsa el botón Cancelar, el valor de devolución es false/null. Pulsanto en Aceptar se obtiene el valor true y la cadena de caracteres introducida se guarda para su posterior procesamiento.

Su sintaxis es:

prompt(pregunta, respuesta)

Siendo pregunta la información que se muestra y respuesta la información por defecto que la orden tomará de entrada.

Ejemplo 4.4: Solicita la provincia, dando como opción por defecto "Asturias". Se puede introducir otra provincia a la mostrada. Si se pulsa Aceptar se muestra la provincia introducida y si no se muestra una ventana que indica lo sucedido.

<SCRIPT LANGUAGE="Javascript">
<!--//Método Prompt()
  var provincia;
  provincia=prompt("Introduzca la provincia ","Asturias");
  document.write("Usted ha introducido la siguiente información "+provincia)
// -->
</SCRIPT>

[Ejecución]

Ejercicios

Ejercicio 4.1: Haz un programa que pregunte por el nombre de la persona y por los apellidos y después los muestre en una ventana. A continuación debe preguntar si quiere salir, dando opción, solamente, a una contestación afirmativa o negativa y la respuesta en el documento.

[Ejecución]

5. LOS OPERADORES 

Combinando variables y valores, se pueden formular expresiones más complejas.
Las expresiones son una parte esencial de los programas.
Para formular expresiones se utilizan los operadores.

Operadores de asignación

Los operadores de asignación se utilizan para asignar valores a las variables. Alguno de ellos también incluyen operaciones.

Ejemplo 5.1: Se muestra el funcionamiento de los distintos operadores de asignación.

<SCRIPT LANGUAGE="Javascript">
<!--//Operadores de asingación
	var num1=3;
	var num2=5;
 	num2+=num1;
	num2-=num1;
	num2*=num1;
	num2/=num1;
	num2%=num1;
// -->
</SCRIPT>

[Ejecución]

Operadores aritméticos

Los operadores aritméticos se utilizan para hacer cálculos aritméticos.

Además de estos operadores, también existen operadores aritméticos unitarios: incremento (++), disminución (--) y la negación unitaria (-). Los operadores de incremento y disminución pueden estar tanto delante como detrás de una variable. Estos operadores aumentan o disminuyen en 1, respectivamente, el valor de una variable. La diferencia entre ambas posiciones reside en el momento en que se ejecuta la operación.

Ejemplo 5.2: Se muestra el funcionamiento de los operadores aritméticos

<SCRIPT LANGUAGE="Javascript">
<!--//Operadores aritméticos
	var num1=5, num2=8,resultado1, resultado2; 
 	resultado1=((num1+num2)*200)/100;
	resultado2=resultado1%3;
	resultado1=++num1;
	resultado2=num2++;
	resultado1=--num1;
	resultado2=num2--;
	resultado1=-resultado2;
// -->
</SCRIPT>

[Ejecución]

Operadores de comparación

Para comparar dos valores entre sí, se utiliza el operador de comparación. Como valor de retorno se obtiene un valor lógico o booleano: true o false.

Ejemplo 5.3: Se muestra el resultado de distintas expresiones lógicas.

<SCRIPT LANGUAGE="Javascript">
<!--//Operadores de comparación
	var a=4;b=5;
	document.write("<BR>El resultado de la expresión 'a==b' es igual a "+(a==b));
	document.write("<BR>El resultado de la expresión 'a!=b' es igual a "+(a!=b));
	document.write("<BR>El resultado de la expresión 'a>b' es igual a "+(a>b));
	document.write("<BR>El resultado de la expresión 'a<b' es igual a "+(a<b));
	document.write("<BR>El resultado de la expresión 'a>=b' es igual a "+(a>=b));
	document.write("<BR>El resultado de la expresión 'a<=b' es igual a "+(a<=b));
// -->
</SCRIPT>

[Ejecución]

Operadores lógicos

Los operadores lógicos se utilizan para el procesamiento de los valores booleanos. A su vez el valor que devuelven también es booleano: true o false.

Suponemos para los ejemplos la siguiente instrucción var a=3;b=4;c=5;

Ejemplo 5.4: Se muestra el resultado de distintas operaciones realizadas con operadores lógicos.

<SCRIPT LANGUAGE="Javascript">
<!--//Operadores lógicos
document.write("<BR>El resultado de la expresión 'false&&false' es igual a "+(false&&false));
  document.write("<BR>El resultado de la expresión 'false&&true' es igual a "+(false&&true));
  document.write("<BR>El resultado de la expresión 'true&&false' es igual a "+(true&&false));
  document.write("<BR>El resultado de la expresión 'true&&true' es igual a "+(true&&true));
  document.write("<BR>El resultado de la expresión 'false||false' es igual a "+(false||false));
  document.write("<BR>El resultado de la expresión 'false||true' es igual a "+(false||true));
  document.write("<BR>El resultado de la expresión 'true||false' es igual a "+(true||false));
  document.write("<BR>El resultado de la expresión 'true||true' es igual a "+(true||true));
  document.write("<BR>El resultado de la expresión '!false' es igual a "+(!false));
// -->
</SCRIPT>

[Ejecución]

Operador typeof

El operador typeof variable devuelve una cadena de texto que describe el tipo de datos al que pertenece la variable.

Ejemplo 5.5. Describe el tipo de datos de distinas variables.

<HTML>
 <HEAD>
  <SCRIPT LANGUAGE="Javascript">
    var ciudad="Oviedo";
    var edad=6;
    var carnet=true;
    document.write("<BR>La variable ciudad es de tipo: "+typeof ciudad+ "<BR>");
    document.write("La variable edad es de tipo: "+typeof edad + "<BR>");
    document.write("La variable carnet es de tipo: "+typeof carnet + "<BR>");
  </SCRIPT>
 </HEAD>
 <BODY>
 </BODY> 
</HTML>

[Ejecución]

eval()

La función eval() calcula la cadena de caracteres que se ha de transmitir y devuelve el resultado como valor. si la cadena contiene caracteres que no se pueden interpretar como parte de la operación de cálculo, emite un mensaje de error.

Ejemplo 5.6. Se pide una expresión numérica y se averiguará el resultado utilizando la función eval().

var expresion,resultado;
expresion=prompt("Introduce la operación a realizar","");
resultado=eval(expresion);
alert ("El resultado de la operacion es "+resultado);

[Ejecución]

Ejercicios

Ejercicio 5.1: Completar el siguiente código con las sentencias indicadas en los comentarios.

<HTML>
 <HEAD>
 <SCRIPT LANGUAGE="Javascript">
  var precioOrdenador,nombre;
  precioOrdenador=150000;
 	//Calcular el 16% del precio del ordenador y mostar por pantalla
	//Mostrar una expresión lógica con operadores de comparación cuyo resultado sea True
	//Mostrar una expresión lógica con operadores de comparación cuyo resultado sea False
	//Mostrar una expresión lógica con operadores lógicos cuyo resultado sea True
	//Mostrar una expresión lógica con operadores lógicos cuyo resultado sea False
 	/*Pedir el nombre de un animal por pantalla y después mostrar el tipo de la 
		variable en la que se almacenó el dato y el de "precioOrdenador*/
 </SCRIPT>
 </HEAD>
 <BODY>
 </BODY> 
</HTML>

Ejercicio 5.2: Escribir las instrucciones necesarias para realizar las siguientes operaciones:

1. Incrementar en 1 el contenido de una variable llamada precio
2. Decrementar en 1 el contenido de una variable llamada precio
3. Tenemos una variable llamada total y otra precio1, conseguir acumular en la variable total el contenido de precio1.
4. Tenemos una variable llamada aux1 y otra llamada aux2, conseguir asignar el valor de aux2 a aux1 e incrementar, posteriormente, el valor de aux2 en 1.
5. Tenemos una variable llamada aux1 y otra llamada aux2, conseguir incrementarel valor de aux2 en 1 y, posteriormente, asignar el valor de aux2 a aux1.

Ejercicio 5.3: Supongamos el siguinte fragmento de código

var aux1=7;
var aux2=10;
var aux3=17;
var aux4=20;

¿Qué devolvería el siguiente código?: alert((aux1<aux3)&&(aux2<aux4));
¿Qué devolvería el siguiente código?: alert((aux1>aux3)||(aux2<aux4));
¿Qué devolvería el siguiente código?: alert((aux1<aux3)||(aux2!=aux4));

Ejercicio 5.4. Dada la declaración inicial de variables siguiente:

var aux1=7;
var aux2="perro";
var aux3=17;
var aux4="20";
var total1,total2,total3,total4,total5,total6;

Hacer un programa donde se muestre el resultado de las siguentes operaciones, mostrar también el tipo de datos resultante de cada operación (typeof). Fijarse en los resultados: datos y tipo de dato.

total1=aux1+aux2
total2=aux1+aux3
total3=aux1+aux4
total4=aux2+aux3
total5=aux2+aux4
total6=aux3+aux4

Ejercicio 5.5. Hacer la traza del siguiente código e indicar que valores se muestran por pantalla.

var porcentaje=12;
var apuesta;
apuesta=prompt("Introduce la apuesta ","");
apuesta=parseInt(apuesta);
porcentaje=(apuesta*12)/100;
porcentaje+=1;
apuesta-=porcentaje;
document.write("La casa se queda con el 12%+1 que se corresponde con "+porcentaje+" euros");
document.write("<BR>Tu apuestas "+apuesta+" euros");

Ejercicio 5.6. Hacer la traza del siguiente código e indicar que valores se muestran por pantalla. Hacer una traza suponiendo que se introduce el nombre de Ana y otra introduciendo el nombre de Pedro.

var veces,puntos=3,total=100;
var nombre,auxLog;
nombre=prompt("Introduce tu nombre","");
veces=prompt("¿Cuantas veces has entrado aquí","");
auxLog=(nombre=="Ana");
alert("¿Eres Ana?="+auxLog);
veces=parseInt(veces);
veces+=1;
puntos=++veces;
total=total+puntos+veces;
auxLog=(nombre=="Pedro")&&(veces==3);
alert ("El valor total es "+total+"\n¿Eres Pedro y has entrado 3 veces?:"+auxLog);

6. BUCLES/ESTRUCTURAS

Para controlar el flujo de información en los programas JavaScript existen una serie de estructuras condicionales y bucles que permiten alterar el orden secuencial de ejecución.

if-else

La instrucción if es permite la ejecución de un bloque u otro de instrucciones en función de una condición.

Sintaxis:

If (condición) {
bloque de instrucciones que se ejecutan si la condición se cumple
}
else{
bloque de instrucciones que se ejecutan si la condición no se cumple
}

Las llaves sólo se han de utilizar cuando haya varias instrucciones seguidas pertenecientes a la ramificación.

Puede existir una instrucción if que no contenga la parte else. En este caso, se ejecutarían una serie de órdenes si se cumple la condición y si esto no es así, se continuaría con la órdenes que están a continuación del bloque if.

Ejemplo 6.1. Pide un día de la semana y emite un mensaje en el caso de que la variable xdia sea domingo.

<SCRIPT LANGUAGE="Javascript">
<!--//Instrucción if-else
  var xdia;
  xdia=prompt("Introduce el día de la semana ", "");
  if (xdia == "domingo") alert("Hoy es festivo");
  else alert ("Hoy no es domingo, es muy problable que tengas que trabajar");
</SCRIPT>

[Ejecución]

Ejemplo 6.2: Analiza la edad de Luis y Ana, las cuales se piden por pantalla.

<SCRIPT LANGUAGE="Javascript">
<!--//Instrucción if-else
  var edadAna,edadLuis;
  edadAna=parseInt(prompt("Introduce la edad de Ana",""));
  edadLuis=parseInt(prompt("Introduce la edad de Luis",""));
  if (edadAna > edadLuis){
	document.write("Ana es mayor que Luis.");
	document.write(" Ana tiene ",edadAna," años y Luis ", edadLuis);
  }
  else{
	document.write("Ana es menor o de igual edad que Luis.");
	document.write(" Ana tiene ",edadAna," años y Luis ", edadLuis);
  } 
</SCRIPT>

[Ejecución]

Ramificaciones anidadas

Para las condiciones ramificadas más complicadas, a menudo se utilizan las ramificaciones anidadas. En ellas se definen consultas if dentro de otras consultas if.

Ejemplo 6.3: Analiza, de una forma precisa, la edad de Luis y Ana, las cuales se piden por pantalla.

<SCRIPT LANGUAGE="Javascript">
<!--//Instrucción if-else anidadas
  var edadAna,edadLuis;
  edadAna=parseInt(prompt("Introduce la edad de Ana",""));
  edadLuis=parseInt(prompt("Introduce la edad de Luis",""));
  if (edadAna > edadLuis){
	document.write("Ana es mayor que Luis.");
  }
  else{
	if (edadAna<edadLuis){
		document.write("Ana es menor que Luis.");
	}else{
		document.write("Ana tiene la misma edad que Luis.");
	}
  } 
  document.write(" Ana tiene ",edadAna," años y Luis ", edadLuis);

</SCRIPT>

[Ejecución]

El operador ?

La construcción ? se conoce también como operador condicional. La ventaja de este operador es que permite comprobar dos valores distintos tomando como base una condición.

Sintaxis: (condición) ? verdadero:falso;

La condición puede ser una expresión o cualquier valor booleano. En base al resultado se ejecutará a continuación o bien la instrucción contenida en verdadero(true) o la contenida en falso (false).

Ejemplo 6.4: Averigua el navegador utilizado y muestra el nombre en pantalla.

<SCRIPT LANGUAGE="Javascript">
<!--//Instrucción condicional ?
  var navegador, aviso;
  navegador=navigator.appName;
  aviso=(navegador=="Microsoft Internet Explorer")? 
     "Está utilizando el navegador IE":"Está utilizando un navegador distinto a IE";
  document.write(aviso);  
</SCRIPT>

[Ejecución]

La instrucción switch

En la instrucción switch se calcula la expresión indicada en ella y, según el resultado, se ejecuta una instrucción determinada dentro del grupo de comandos.

Sintaxis:

switch (variable){
	case valor1:
	  instrucción1;
  	break
	case valor2:
	  instrucción2;
	  break
	etc…
	default: instrucciónI
}

Con esta estructura se puede evitar el uso de intrucciones if anidadas. Primero se comprueba un valor para ver si concuerda con los bloques case, y si la equivalencia es positiva se ejecuta la instrucción correspondiente. Si el valor no concuerda, la instrucción se ejecuta en la parte default, lo que corresponde a la rama else de una consulta if-else. Este último bloque es opcional.

Ejemplo 6.5: Pide un nombre por pantalla y muestra un mensaje personalizado.

<SCRIPT LANGUAGE="Javascript">
<!--//Instrucción condicional swith
 var nombre;
 nombre=prompt("Introduce tu nombre","");
 switch (nombre){
	case "Alberto":
		alert ("Hola "+nombre+" te esperaba");
		break
	case "Gonzalo":
		alert ("Hola "+nombre+" ya te envié lo que me pediste");
		break
 	default: {
		alert ("Hola "+nombre+" bienvenid@");
	}
 }
</SCRIPT>

[Ejecución]

Bucle for

Cuando la ejecución de un programa llega a un bucle for, lo primero que hace es ejecutar la Inicialización del índice, a continuación analiza la Condición de prueba y si esta se cumple ejecuta las instrucciones del bucle. Cuando finaliza las ejecución de las instrucciones del bucle se realiza la Modificación del índice y 

las líneas de cógigo que contiene el bucle y cuando éstas finalizan, se retorna a la cabecera del bucle for y se realiza la después la Condición de prueba, si la condición se cumple se ejecutan las instrucciones y si no se cumple la ejecución continúa en las líneas de código que siguen al bucle.

Sintaxis:

for (Inicialización del índice; Condición de prueba; Modificación en el índice){
	…instrucciones…
}

Ejemplo 6.6: Escribe los números pares de 0 a 30

<SCRIPT LANGUAGE="Javascript">
<!--//Bucle for
  for (i=2;i<=30;i+=2) {
    document.write ("<BR>"+i);
  } 
  document.write("<BR> Ya se han escrito los números pares del 0 al 30");
</SCRIPT>

[Ejecución]

Ejemplo 6.7: Escribe los números pares de 0 a 30

<SCRIPT LANGUAGE="Javascript">
<!--//Bucle for
  for (i=30;i>=2;i-=2) {
    document.write ("<BR>"+i);
  } 
  document.write("<BR> Ya se han escrito los números pares del 0 al 30");
</SCRIPT>

[Ejecución]

Ejemplo 6.8: Escribe las potencias de 2 hasta 3000

<SCRIPT LANGUAGE="Javascript">
<!--//Bucle for
  aux=1;
  for (i=2;i<=3000;i*=2) {
	document.write ("<BR> 2 elevado a "+aux+" es igual a "+i);
	aux++;
  } 
  document.write("<BR> Ya se han escrito las potencias de 2 menores de 3000");
</SCRIPT>

[Ejecución]

El bucle while

Con el bucle while se pueden ejecutar un grupo de instrucciones mientras se cumpla una condición. Si la condición nunca se cumple, entonces tampoco se ejecuta ningúna instrucción. Si la condición se cumple siempre, nos veremos inmersos en el problema de los bucles infinitos, que pueden llegar a colapsar el navegador, o incluso el ordenador. Por esa razón es muy importante que la condición deje de cumplirse en algún momento.

Sintaxis:

while (condición){
…instrucciones…
}

Ejemplo 6.9: Escribe los números pares de 0 a 30

<SCRIPT LANGUAGE="Javascript">
<!--//Bucle while
  i=2;
  while (i<=30) {
	document.write (i);
	i+=2;
  } 
  document.write("<BR> Ya se han escrito los números pares del 0 al 30");  
</SCRIPT>

[Ejecución]

Ejemplo 6.10: Pregunta una clave hasta que se corresponda con una dada.

<SCRIPT LANGUAGE="Javascript">
<!--//Bucle while
  auxclave="";
  while (auxclave!="anonimo"){
  	auxclave=prompt("introduce la clave ","anonimo")
  }
  document.write ("Has acertado la clave");
</SCRIPT>

[Ejecución]

El bucle do-while

La diferencia del bucle do-while frente al bucle while reside en el momento en que se comprueba la condición: el bucle do-while no la comprueba hasta el final, es decir, después del cuerpo del bucle, lo que significa que el bucle do-while se recorrerá, una vez, como mínimo, aunque no se cumpla la condición.

Sintaxis:

do {
  …instrucciones…
} while(condición)

Esta orden fue introducida en las versiones JavaScript 1.2. Esto significa que los programas que contienen este bucle sólo funcionan con los navegadores de cuarta generación o superiores de Netscape y Microsoft.

Ejemplo 6.11: Preguntar por una clave hasta que se introduzca la correcta

<SCRIPT LANGUAGE="Javascript">
<!--//Bucle do-while
  do {
	auxclave=prompt("introduce la clave ","anonimo")
  } while (auxclave!="anonimo")
  document.write ("Has acertado la clave");
</SCRIPT>

[Ejecución]

Las instrucciones break y continue

En los bucles for y while se pueden utilizar las instrucciones break y continue para modificar el comportamiento del bucle. La instrucción break dentro de un bucle hace que éste se interrumpa inmediatamente, aun cuando no se haya ejecutado todavía el bucle completo. Al llegar la la instrucción, el programa se sigue desarrollando inmediatamente a continuación del bucle.

Ejemplo 6.12: Pregunta por la clave y permitir tres respuestas incorrectas

<SCRIPT LANGUAGE="Javascript">
<!--//instrucciones break
  var auxclave=true;
  var numveces=0;
  //Mientras no introduzca la clave y no se pulse Cancelar
  while (auxclave != "anonimo" && auxclave){ 
	auxclave=prompt("Introduce la clave ","");
	numveces++;
	if (numveces == 3)break;
  }
  if (auxclave= ="anonimo") document.write("La clave es correcta");
  else document.write("La clave no es correcta correcta");
</SCRIPT>

[Ejecución]

El efecto que tiene la instrucción continue en un bucle es el de hacer retornar a la secuencia de ejecución a la cabecera del bucle, volviendo a ejecutar la condición o a incrementar los índices cuando sea un bucle for. Esto permite saltarse recorridos del bucle.

Ejemplo 6.13: Presenta todos los números pares del 0 al 50 excepto los que sean múltiplos de 3

<SCRIPT LANGUAGE="Javascript">
<!--//instrucciones continue
  var i;
  for (i=2;i<=50;i+=2){
	if ((i%3)==0) continue;
	document.write("<br>"+i);
  }
</SCRIPT>

[Ejecución]

Ejercicios

Ejercicio 6.1: Hacer la traza del siguente script, para los siguientes casos:

1. Que el usuario quiera ejecutar el programa e introduzca un número par.
2. Que el usuario quiera ejecutar el programa e introduzca un número impar.
3. Que el usuario no quiera ejecutar el programa.

var x,y,ejecutar;
ejecutar=confirm("¿Desea ejecutar el programa?");
if (ejecutar){
  alert("Practica de la estructura if"); 
  x=prompt("Introduce un número ","");
  x=parseInt(x);
  y=x%2;
  if (y==0){
    alert("El número "+x+" es par ");
  } 
  else{
    alert("El número "+x+" es impar");
  }
}
else{
   alert("Perdiste una oportunidad");
}

Ejercicio 6.2: Escribir un script que permita introducir un nombre por pantalla y que en el caso de que sea "Ramón" muestre un mensaje felicitándolo por su regreso. En todos los casos se muestra un mensaje informando de que la página Web hoy no está disponible.

Ejercicio 6.3: Escribir un script que permita introducir un país y si no es España muestre el siguiente mensaje: "Bienvenido a nuestro país". En cualquier otro caso no debe hacer nada.

Ejercicio 6.4: Escribir un script que permita introducir un número de año y que nos diga si pertenece al segundo milenio o no.

Ejercicio 6.5: Escribir un script que permita introducir un número y que muestre un mensaje si el número es múltiplo de 3 (si el resto de dividirlo por 3 es 0) y otro si no lo es.

Ejercicio 6.6: Escribir un script que permita introducir el nombre del mes y el día. Por pantalla se debe mostrar un mensaje indicando si es el día de Navidad o no.

Ejercicio 6.7: Escribir un script que pregunte si ya quiere dar sus datos personales utilizando la ventana confirm(), en caso de que acepte se deben ejecutar las siguientes intrucciones:

1. Preguntar su nombre.
2. Preguntar la edad que tendrá al final del año actual.
3. Calcular el año de nacimiento.
3. Mostar una ventana dando las gracias y el año en el que nació.

En el caso de que no acepte se deben ejecutar las siguientes instrucciones:

1. Mostar en una ventana el navegador que utiliza.

Ejercicio 6.8: Escribir un script que permita introducir dos números y que muestre un mensaje indicando cual es el mayor. En el caso de que sean iguales mostrar un mensaje indicándolo.

Ejercicio 6.9: Escribir un script que permita introducir tres números y que muestre un mensaje indicando cual es el menor.

Ejercicio 6.10: Escribir un script que pregunte por el nombre de dos personas (una orden para cada caso) y por la edad de cada uno (una orden para cada caso). A continuación se debe mostrar por pantalla el nombre de la persona mayor y en el caso de que tengan la misma edad se debe indicar en pantalla.

Ejercicio 6.11: Escribir un script que pregunte si quiere ver la frase del dí utilizando la orden confirm(). En el caso de que pulse Aceptar se debe mostrar por pantalla la frase: "No por mucho madrugar amanece más temprano" y en el caso de pulsar Cancelar se debe mostrar por pantalla el siguiente mensaje: "¡Vaya falta de curiosidad!"

Ejercicio 6.12: Escribir un script que pregunte por la ciudad de nacimiento del usuario utilizando la orden prompt(). Si el usuario pulsa Cancelar mostar el siguiente mensaje:"Pues me quedo sin saber donde naciste", si el usuario pulsa Aceptar se debe comprobar si la ciudad es Oviedo y en caso afirmativo mostar el mensaje:"Naciste en Oviedo, como yo" y si no mostar un mensaje indicando la ciudad de nacimiento.

Ejercicio 6.13: Hacer los ejercicios 4 y 6 utilizando el operador ?

Ejercicio 6.14: Hacer un script que al introducir el nombre de uno de los trabajadores de la oficina (Pedro, Dácil, Rosa o Carmen) muestre un recado distinto para cada uno de ellos. En el caso de que el nombre introducido no sea de ningún trabajador entonces debe mostrar una pantalla con un mensaje de bienvenida. Utiliza la instrucción switch. 

Ejercicio 6.15: Analizar el código del script siguiente utilizando una traza para ello. Indicar que es lo que se ve en pantalla en cada caso.

<SCRIPT LANGUAGE="Javascript">
var x=3;
var y=3;
var i,resultado;
resultado=x;
for (i=resultado;i<y;i++){
	resultado*=y;
}
document.write("El resultado es "+resultado);
</SCRIPT>

    Hacer de nuevo la traza anterior en el caso de que x se inicialice en 1 en la primera instrucción.

Ejercicio 6.16: Hacer un script que pregunte por la nota de 4 asignaturas y después nos muestre la media.Utilizar el bucle for.

Ejercicio 6.17: Hacer un script que pregunte el número de mes en el que estamos, en función de ello debe pedir al usuario la cantidad que ha ingresado cada uno de los meses. Al final debe mostrar la suma total de los ingresos en lo que va de año y el iva de esa cantidad.Utilizar el bucle for.

Ejercicio 6.18: Hacer un script que muestre en pantalla los números pares de 0 a 50 excepto el 20. Utilizar el bucle for.

Ejercicio 6.19: Hacer un script que muestre en pantalla los números pares de 50 a 0 excepto el 22.Utilizar el bucle for.

Ejercicio 6.20: Hacer un script que lea un número por teclado y calcule su factorial. El factorial de un número se calcula multiplicando el número por todos sus antecesores hasta el 1. Por ejemplo: el factorial de 5 es 5*4*3*2*1.Utilizar el bucle for.

Ejercicio 6.21: Hacer un script pida los ingresos y los gastos de los meses del primer trimestre. Al final debe mostrar un mensaje indicando si se ha ganado dinero o se está en números rojos. Utilizar el bucle for.

Ejercicio 6.22: Hacer el mismo script que el ejercicio anterior pero utilizando el bucle while en vez de el bucle for.

Ejercicio 6.23: Analizar el código del script siguiente utilizando una traza para ello. Indicar que es lo que se ve en pantalla en cada caso.

<SCRIPT LANGUAGE="Javascript">
var x,a;
var n=20000;
x=1;
a=10;
while (a<n){
	x+=1;
	a*=10
}
document.write(x);
</SCRIPT>

Ejercicio 6.24: Analizar el código del script siguiente utilizando una traza para ello. Indicar que es lo que se ve en pantalla en cada caso.

<SCRIPT LANGUAGE="Javascript">
var a,b,p;
a=3;
b=4;
p=0;
while (b!=0){
	p+=a;
	b-=1;
}
document.write(p);
</SCRIPT>

Ejercicio 6.25: Hacer un script que muestre en pantalla los números pares de 0 a 50 excepto el 20. Utiliza la instrucción while.

Ejercicio 6.26: Hacer un script que muestre en pantalla los números pares de 50 a 0 excepto el 22.Utiliza la instrucción while.

Ejercicio 6.27: Analizar el código del script siguiente utilizando una traza para ello. Indicar que es lo que se ve en pantalla en cada caso.

<SCRIPT LANGUAGE="Javascript">
var a,b,r;
a=10;
while (a>0){
	b=a;
	r=1;
	if (a==4){
		document.write("a es 4");
		a-=4;
		continue;
	}
	for (b;b>0;b--){
		r*=b;
		if (b==2)break;
	}
	a=b*2;
	document.write(a+"--->"+r+"<br>");
}
</SCRIPT>

Ejercicio 6.28: Hacer un script que pregunte por la clave de entrada. El programa sólo finalizará cuando se introduzca la clave correcta, entonces se mostrará por pantalla el siguiente mensaje:"Clave correcta". Utiliza el bucle while.

Ejercicio 6.29: Añadir al siguiente script las órdenes necesarias para que sólo pregunte por la clave 3 veces cómo máximo.Utiliza el bucle break.

7. FUNCIONES

Una función es un conjunto de instrucciones que se agrupan bajo un nombre de función, sólo cuando es llamada por su nombre en el código del programa se provoca la ejecución de las órdenes que contiene.

Las funciones son muy importantes por diversos motivos:

• Ayudan a estructurar los programas para hacerlos su código más comprensible y más fácil de modificar.
• Permiten repetir la ejecución de un conjunto de órdenes todas las veces que sea necesario sin necesidad de escribir de nuevo las instrucciones.

Una función consta de las siguientes partes básicas:

• Un nombre de función
• Los parámetros pasados a la función separados por comas y entre paréntesis
• Las llaves de inicio y final de la función

Sintasix de la definición de una función

function nombrefuncion (parámetro1, parámetro2…){
  …instrucciones…
  //si la función devuelve algún valor añadimos:
  return valor;
}

Sintasix de la llamada a una función

1. La función se ejecuta siempre que se ejecute la sentencia.

nombrefuncion (parám1, parám2…);

1. La función se ejecuta cuando se activa el enlace con el ratón

<A HREF="javascript:nombrefuncion (parám1, parám2…)">…Texto…</A>

Es importante entender la diferencia entre definir una función y llamarla. Definir una función es simplemente especificar su nombre y definir qué acciones realizará en el momento en que sea invocada, para ello se emplea la palabra reservada function. Para llamar a una función es necesario especificar su nombre e introducir los parámetros que queremos que utilice. Ésta llamada se puede efectuar en una línea de órdenes o bien a la derecha de una sentencia de asignación en el caso de que la función devuelva algún valor debido al uso de la instrucción return.

La definición de una función se puede realizar en cualquier lugar del programa, pero se recomienda hacerlo en la cabecera del código HTML. La llamada a una función se realizará cuando sea necesario, es decir, cuando se demande la ejecución de las instrucciones que hay dentro de ella.

Ejemplo 7.1: Función que devuelve la suma de dos valores que se pasan por parámetros.

<HTML>
  <HEAD>
   <SCRIPT>
   <!— 
     function suma (a,b){ //definición de la función
	return a+b;
     }
     function autora (){
	document.write ("La autora es: Rosa Rodríguez");
     }
   // -->   
   </SCRIPT>
  </HEAD>  
  <BODY>
    <SCRIPT>
    <!— 
      var op1=5;op2=25;
      var resultado;
      resultado=suma(op1,op2); //llamada a la función
      document.write (op1+"+"+"op2"+"="+resultado);
    // -->
   </SCRIPT>
	<A HREF="javascript:autora()">Ver autora</A>
  </BODY>
</HTML>

[Ejecución]

Variables locales y globales

Ahora que ya conocemos las funciones es muy importante diferenciar entre variables globales y locales:

• Variables globales: pueden utilizarse en cualquier parte del código y son declaradas fuera de toda función la instrucción var.
• Variables locales: se definen con la instrucción var dentro de una función y sólo pueden ser utilizadas dentro de ésta.

Ejemplo 7.2:

<SCRIPT LANGUAGE="JavaScript">
<!--
<!--//Definición de una vble global
  var vbleglobal1=20;
	function prueba(){
	  var vblelocal1=10; //Definición de vble local
	  var vblelocal2=vbleglobal1+vblelocal1;
	    //En la funcíón se puede acceder a las vble globales y locales 
	    //definidas dentro de ella
	    alert ("La suma de la vble local (10) y la global (20) es "+ vblelocal2);
	}
  prueba();
  alert ("La variable global es "+vbleglobal1);
  //Desde fuera de la función las vbles locales definidas en ella no son accesibles
//-->
</SCRIPT>

[Ejecución]

Ejercicios

Ejercicio 7.1: Crear una página web con enlace que active una ventana que muestre el texto de un provervio.

Ejercicio 7.2: Crear una página web que al entrar pregunte por el nombre y la dirección, después muestre un título y una imagen. Debajo de la imagen debe aparecer un enlace que al activarlo muestre en una ventana el nombre y la dirección introducida al cargarse la página.

Ejercicio 7.3: Crear una página web que al entrar pregunte por la edad y el nombre de tres personas, después muestre un título y una imagen. Debajo de la imagen debe existir los siguientes enlaces:

• que muestre el nombre y la edad de la persona mayor
• que muestre el nombre y la edad de la persona menor
• que muestre la media de las edades introducidas
• que muestre el año de nacimiento y el nombre de la persona mayor
• que muestre el año de nacimiento y el nombre de la persona menor 

Ejercicio 7.4: Crear un programa muestre el siguiente menú utilizando la orden document.write:

• 1. Suma
• 2. Multiplicación
• 3. División
• 4. Resta
• 5. Calcular el resto de la división

El programa debe permitir introducir una opción. Al elegir una de las opciones nos debe pedir los números con los que realizar la operación, ejecutarla y mostrar el resultado. Hacer la estructura de funciones de tal manera que los números se soliciten y se muestren en el programa principal, en las respectivas funciones sólamente se deben realizar las operaciones.

Ejercicio 7.5: Modificar el programa anterior para que el menú se componga de enlaces, los cuales deben activar las respectivas operaciones.