JavaScript toma su sintaxis de los lenguajes de programación más conocidos, fundamentalmente C, aunque también algo de Pascal.
<HTML>
<HEAD>
<TITLE>Comprobación de uso de Javascript</TITLE>
</HEAD>
<BODY>
A continuación debería ver la frase: HOLA MUNDO <BR>
<div id="mensaje"></div>
<SCRIPT>
document.getElementById("mensaje").innerHTML="HOLA MUNDO";
</SCRIPT>
</BODY>
</HTML>
Que en el navegador debería quedar de la siguiente forma:
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.getElementById("mensaje").innerHTML= "Hola Mundo!"; document.getElementById("mensaje").innerHTML= 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.getElementById("mensaje").innerHTML= texto document.getElementById("mensaje").innerHTML= 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.
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 la asignación a la propiedad innerHTML que poseen la mayoría de elementos de una página web.
Mostramos a continuación algunos ejemplos en los que se usa la asignación y la escritura en un programa de Javascript.
<div id="mensaje"></div> <script> document.getElementById("mensaje").innerHTML= "<h2> Ejemplo de uso de sentencias de escritura</h2>"; document.getElementById("mensaje").innerHTML+= "<P>"; anioActual=2014; document.getElementById("mensaje").innerHTML+= "Estamos en "+ anioActual; anioNacimiento=1971 document.getElementById("mensaje").innerHTML+= " por lo que si usted nació en "+anioNacimiento; document.getElementById("mensaje").innerHTML+= " su edad es de "+ (anioActual-anioNacimiento)+" años"; document.getElementById("mensaje").innerHTML+= "</P>"; </script>
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ó:
<div id="mensaje"></div> <script> document.getElementById("mensaje").innerHTML= "<h2>Ejemplo de uso de sentencias de escritura</h2>" document.getElementById("mensaje").innerHTML+= "<P>"; fecha=new Date(); anioActual=fecha.getFullYear() anioNacimiento=prompt( "¿En qué año nació usted?", "" ) * 1; document.getElementById("mensaje").innerHTML+= "Estamos en "+anioActual+ " por lo que si usted nació en "+anioNacimiento+ " su edad es de "+(anioActual-anioNacimiento)+" años"+ "</P>"; </script>
Hola, NOMBRE DEL USUARIO
APELLIDOS, NOMBRE............(NOTA 1er PARCIAL) (NOTA
2o PARCIAL) (NOTA
FINAL)
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.getElementById("mensaje").innerHTML= "Usted es un menor de edad.<br>"; document.getElementById("mensaje").innerHTML+= "No olvide adjuntar el documento de autorización."; } else { document.getElementById("mensaje").innerHTML= "Usted es mayor de edad.<br>"; document.getElementById("mensaje").innerHTML+= "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.getElementById("mensaje")="No convalidan créditos"; }; break; case "Malaga" : case "Cordoba": { document.getElementById("mensaje")="Convalidan 50% de créditos"; }; break; case "Jaen" : case "Almeria": case "Granada": { document.getElementById("mensaje")="Convalidan 70% de créditos"; }; break; default: { document.getElementById("mensaje").innerHTML= "No reconozco la Universidad que usted indica"; } }
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.getElementById("mensaje").innerHTML= "<h2>Tabla de multiplicar del 17</h2>"; cont=1; while( cont<=50 ) { document.getElementById("mensaje").innerHTML+= 17+"*"+cont+"="+(17*cont)+"<br/>"; cont=cont+1; } // OTRA FORMA DE HACERLO for( cont=1; cont<=50; cont=cont+1 ) { document.getElementById("mensaje").innerHTML+= 17+"*"+cont+"="+(17*cont)+"<br/>"; }
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.