JavaScript o JS, para abreviar, busca agregar interactividad a los sitios web. Los scripts se ejecutan en el navegador del usuario y no en el servidor y, por lo general, se conectan a bibliotecas de terceros para proporcionar funciones avanzadas sin que el desarrollador tenga que codificarlas desde cero cada vez.
En la presente Unidad Didáctica, aprenderemos algunos conceptos básicos de programación necesarios para trabajar con el lenguaje JavaScript.
Estructuras de decisión
La estructura de decisión clásica es:
<?php
if (condition) {
# code1...
} else {
# code2...
}
?>
Donde la cláusula else es opcional.
Debemos entender esta estructura del siguiente tipo:
Si condición es verdadera, se ejecutará code1, en otro caso, se ejecutará code2.
Veamos este código:
<!DOCTYPE html>
<html>
<head>
<title></title>
</head>
<body>
<script type="text/javascript">
var respuesta
respuesta = prompt("Introduzca su nombre:", "Anónimo")
if (respuesta == "Juan") {
document.write ("Bienvenido" + respuesta)
} else {
document.write ("Acceso denegado")
}
</script>
</body>
</html>
Hay que destacar que podemos hacer estructuras más complejas de este tipo, sin más que introducir más if/else dentro de otros if/else.
Estructura lógicas
Las condiciones también suelen llamarse expresiones lógicas porque sólo pueden dar como resultado los valores verdadero o falso.
Usted puede utilizar los operadores de comparación siguientes para crear expresiones de este tipo:
- == (igual a),
- != (distinto a),
- < (menor que),
- > (mayor que),
- <= (menor o igual que),
- >= (mayor o igual que).
Además de estos operadores, también pueden utilizar los operadores lógicos AND, OR y NOT.
En JavaScript el operador AND se representa con los símbolos &&, OR con || y NOT con !.
Así, una expresión del tipo exp1 AND exp2 se evalúa a verdadero sólo en el caso de que tanto exp1 como exp2 se evalúen a verdadero. En cualquier otro caso, la expresión se evaluará a falso.
Sin embargo, exp1 OR exp2 se evalúa a verdadero en el caso de que bien exp1 o bien exp2 se evalúen a verdadero (observe que es suficiente con que lo haga una de las dos o las dos al mismo tiempo). En el caso de que ninguna se evalúa a verdadero, la expresión total se evaluará a falso.
Finalmente, NOT exp1 se evalúa a verdadero si exp1 se evalúa a falso y se evalúa a falso si exp1 se evalúa a verdadero. Es decir, realiza la negación de exp1.
¿Cómo se comparan las cadenas en JavaScript?
Cuando se comparan cadenas de caracteres, el primer carácter de la primera cadena es comparado con el primer carácter de la segunda cadena. Los segundos caracteres solo se evalúan si la comparación de los primeros se ha realizado con éxito. El proceso continúa hasta que todos los caracteres se comparan con éxito o hasta que uno falle. Esto permite utilizar los operadores ==, >, < , etc. para establecer relaciones de comparaciön entre cadenas de texto.
Estructuras de repetición
Otro tipo de estructuras que pueden modificar el flujo de ejecución son las estructuras de repetición o también conocidas como bucles. Estas estructuras sirven para repetir un conjunto de instrucciones.
En este sentido, puede querer repetir un número determinado de veces el conjunto de instrucciones o, sin conocer dicho número, desear repetirlas mientras se cumpla cierta condición.
Esto quiere decir que existen dos tipos de estructuras de repetición: aquellas en que el número de repeticiones es conocido y aquellas en las que no lo es.
Utilizando la estructura for, usted especifica el número de veces que quiere que se repita un conjunto de instrucciones. Por lo tanto, ese número debe ser conocido.
La sintaxis correcta de esta estructura de repetición es:
<script type="text/javascript">
for (var i = 0; i < Things.length; i++) {
Things[i]
}
</script>
Debemos entender esta estructura como:
La “var” suele consistir en dar un valor inicial a una variable.
Este valor se va comparando en cada una de las repeticiones según la “Things.length” establecida. “Things” permite acercar el valor inicial al valor final, es decir, en el cual ya no se realizarán más repeticiones.
En cada vuelta del bucle se ejecutará 1 vez lo que diga “acciones”.
Veamos este código:
<!DOCTYPE html>
<html>
<head>
<title></title>
</head>
<body>
<script type="text/javascript">
for (var i = 1; i < 10; i++) {
document.write (i)
document.write ("<br>")
}
</script>
</body>
</html>
Y el resultado en pantalla será:
Es decir, i vale 1 al principio, como 1 es < que 10, se ejecuta lo que hay dentro de las { }.
Imprime lo que vale i (vale 1), imprime un salto de línea y cuando a terminado de imprimir todo el cuerpo del bucle, hace i++, es decir, ahora i = 2, y vuelve al principio…
Así hasta que i=10, que al comprobar si 10<10, esta condición es igual a FALSE y se sale del bucle.
Por ejemplo, piense en este escenario: usted pide al usuario que introduzca un número e imprime los números que van desde el 1 hasta dicho número.
Observe cómo, de antemano, usted no sabe cuántas veces se va a repetir el bucle.
Utilizando la estructura while, usted podrá repetir un conjunto de instrucciones mientras se cumpla cierta condición. La sintaxis correcta de esta estructura es:
<script type="text/javascript">
while (condición)
{
acciones
}
</script>
Que lo que hará será ejecutar las acciones hasta que la condición sea Falsa.
Veamos el siguiente código:
<!DOCTYPE html>
<html>
<head>
<title></title>
</head>
<body>
<script type="text/javascript">
var respuesta = prompt ("Introduce un número:")
var i = 1
while ( i < respuesta)
{
document.write (i)
document.write ("<br>")
i++
}
</script>
</body>
</html>
Observamos en la línea 8 que le pedimos al usuario mediante un prompt un número de veces a ejecutar el bucle while.
Ésta se almacena en la variable respuesta, y luego podremos ejecutar el bucle while tantas veces como diga respuesta.
Notar que al estar programando la función, no sabíamos el valor exacto de respuesta, por lo que no podíamos utilizar un for.
En ocasiones, usted deseará salir de un bucle aunque la condición de prueba no se haya cumplido.
En estos casos puede utilizar la sentencia break si desea salir completamente del bucle o continúe si lo que quiere es no ejecutar el resto de sentencias del cuerpo del bucle, sino pasar a la siguiente repetición. Al igual que ocurría con las estructuras de decisión, puede anidar bucles en el interior de otros bucles. En estos casos, para cada repetición del bucle exterior, se ejecuta completamente el bucle interior.
Tenga en cuenta que la incorporación de bucles en el interior de otros bucles puede hacer que la ejecución del código consuma mucho tiempo.
Definir funciones
Una función no es más que un conjunto de instrucciones que realiza una tarea bien definida.
La ventaja principal es la reutilización, ya que al descomponer el programa en funciones, podremos utilizar estas funciones en más de un sitio, y por lo tanto no tener que volver a escribir el mismo código.
Pero para poder utilizar una función, lo primero es definirla.
Es decir, debemos comenzar con la palabra function, seguida del nombre que le queramos poner y entre paréntesis una lista de parámetros.
Entre las { }, están las acciones (tareas) a realizar.
Realicemos una función muy simple la cual valida si un número introducido está entre 1 y 20.
Si es afirmativo devolverá verdadero, en otro caso, devolverá falso.
Abramos Notepad++ y escribamos esto:
<!DOCTYPE html>
<html>
<head>
<title></title>
</head>
<body>
<script type="text/javascript">
function validar(numero) {
if ((numero>=1) && (numero<20))
return true;
else
return false;
}
</script>
</body>
</html>
Y observemos varios detalles:
- La lista de parámetros ahora es un valor, llamado número.
- La función devolverá un valor, que la utilizar a través de la instrucción return.
- Una función puede llamar a otra función para realizar su cometido (en este ejemplo no es su caso).
Pero si guardamos el archivo y lo ejecutamos, vemos que no sucede nada.
Esto es, porque después de definirla, necesitamos llamarla.
Llamadas a funciones
Como se ha comentado, la definición de una función sirve para especificar que es lo que hace una función, pero, la definición por sí sola no sirve de nada si no la llamamos.
Para llamar a una función debemos indicar el nombre de la función e introducirle los que llamamos argumentos que son la lista de parámetros con los que definíamos la función.
Es decir:
Definición = nombre (lista de argumentos).
Llamada = nombre (argumentos)
Estos argumentos por tanto deben concordar con la lista de argumentos de la función que vamos a utilizar.
Por ejemplo, en el código anterior serviría algo como validar(5).
Si la función devuelve algún valor, nosotros podremos asignarlo a una variable o utilizarlo en alguna expresión lógica.
Veamos este ejemplo, en el que utilizamos el código anterior como condición lógica.
<!DOCTYPE html>
<html>
<head>
<title></title>
</head>
<body>
<script type="text/javascript">
function validar(numero) {
if ((numero>=1) && (numero<20))
return true;
else
return false;
}
</script>
<script type="text/javascript">
var numero= 4;
if (validar(numero))
document.write("El cuadrado de "+numero+" es ="+numero*numero);
else
document.write("El valor introducido está fuera de rango");
</script>
</body>
</html>
Como vemos, ahora, tenemos 2 script, uno para la definición de la función y otro que nos sirve para llamar a la función (Nota: también podríamos haberlo hecho todo sobre el mismo script).
Veamos el siguiente código en el que una función llamada cuadrado, llama en su interior a la función validar, y un script que pide un número al usuario y muestra el resultado del cuadrado (validado) en la página web.
<!DOCTYPE html>
<html>
<head>
<title></title>
</head>
<body>
<script type="text/javascript">
function validar(numero) {
if ((numero>=1) && (numero<20))
return true;
else
return false;
}
function cuadrado(numero) {
if (validar(numero))
return numero*numero;
else
return -1;
}
</script>
<script type="text/javascript">
var numero = prompt ("Introduzca un número")
document.write(cuadrado(numero));
</script>
</body>
</html>
Ámbito de las variables
En la definición de una función se puede utilizar cualquier sentencia de JavaScript, incluida la declaración de variables.
En estos casos, se dice que la variable es local ya que sólo puede ser conocida en el interior de la función.
A diferencia de las variables locales, las variables declaradas fuera de las funciones son globales. Esto quiere decir que pueden ser conocidas y, por lo tanto, utilizadas, tanto dentro como fuera de las funciones.
Pero, ¿qué sucede si declara una variable global y una variable local con el mismo nombre?
<!DOCTYPE html>
<html>
<head>
<title></title>
</head>
<body>
<script type="text/javascript">
function SumaN(x) {
var cuenta = 0;
for (var i = 1; i <=x; i++) {
cuenta = cuenta + i;
}
return cuenta;
}
var cuenta = 5;
document.write("La suma es:" + SumaN(cuenta));
</script>
</body>
</html>
Observe cómo esta situación la tenemos en este sencillo script.
Así, se ha declarado una variable de nombre cuenta tanto en el interior de la función como a nivel del script. Es decir, una es local y la otra es global.
Dentro de la función siempre tiene preferencia la variable local respecto a la global. Por lo tanto, en el código asociado a la función SumaN, cuando se utiliza el identificador cuenta, se está refiriendo a la variable local que ha declarado en su interior.
Además, observe cómo el parámetro x actúa como una variable local más de la función. Por ello, podemos comparar el valor de i con el de x. En definitiva, el script lo único que hace es obtener el resultado de 1 + 2 + 3 + 4 + 5 = 15.
Observe la figura siguiente: la caja exterior representa el script, mientras que las cajas interiores son funciones definidas en el script.
Las funciones conocen todo lo que está fuera de ellas y lo que está en su interior, mientras que fuera de las funciones sólo se pueden utilizar las variables declaradas a nivel de script.
Recordar
- Un código en JavaScript se ejecuta normalmente de izquierda a derecha y de arriba debajo de forma secuencial.
- Las condiciones también suelen llamarse expresiones lógicas porque sólo pueden dar como resultado los valores verdadero o falso.
- Otro tipo de estructuras que pueden modificar el flujo de ejecución son las estructuras de repetición o también conocidas como bucles. Estas estructuras sirven para repetir un conjunto de instrucciones.
- Utilizando la estructura while, usted podrá repetir un conjunto de instrucciones mientras se cumpla cierta condición. La sintaxis correcta de esta estructura es:
- Una función no es más que un conjunto de instrucciones que realiza una tarea bien definida.
- Para llamar a una función debemos indicar el nombre de la función e introducirle los que llamamos argumentos que son la lista de parámetros con los que definíamos la función.
- Un parámetro actúa exactamente igual que una variable local.
- En la definición de una función se puede utilizar cualquier sentencia de JavaScript, incluida la declaración de variables.
- Se dice que la variable es local ya que sólo puede ser conocida en el interior de la función.