1. VARIABLES
JavaScript es un potente lenguaje interpretado que proporciona interactividad a un sitio web.
Como todo lenguaje de programación trabaja con variables, es decir, pequeños almacenes de memoria.
Las variables identifican el espacio en el que está almacenado un dato determinado. A partir del nombre de la variable podemos recuperar un dato almacenado, mientras que el programa se encuentra en ejecución.
Cómo se crean variables en JavaScript?
Abrir el documento 01variables.html. Introducir dentro del div con id=caja1, el código siguiente:
<script>
var numero;
</script>
Mientras la etiqueta <script> indica que el código contenido en su interior es un código JavaScript, la palabra var indica que vamos a declarar una variable Así, en la única instrucción de este script, declamáramos la variable (var) y le damos el nombre de (numero).
Si creamos esta variable, es para asignarle un número. Esto puede hacerse en la misma línea del modo siguiente:
<script>
var numero=8;
</script>
Ahora podemos acceder a ese valor, utilizando el nombre de la variable numero. Lo haremos mediante la función alert(), que abre una ventana con un mensaje. Insertemos en la siguiente línea este código, antes del cierre </script>, esta instrucción:
alert(numero);
El texto entre paréntesis es el que será mostrado en la ventana de alerta.
Guardar los cambios en el archivo html y abrir la página en el navegador. Al momento de cargar la página se abre un cuadro de alerta que efectivamente muestra el valor de la variable.
Este valor puede cambiarse en cualquier momento, por eso se llaman variables. Pulse Aceptar en el cuadro de alerta y regresemos al código. En el mismo código, añadamos antes de la instrucción con la función alert() la declaración siguiente:
numero=8000;
Guardar los cambios y refrescamos la pantalla del navegador. Efectivamente el valor mostrado en el mensaje ha cambiado y corresponde al nuevo valor (8000). Pulsar el botón Aceptar del cuadro de la alerta.
La Función alert() despliega un cuadro, en el que se muestra el mensaje indicado entre los paréntesis de la misma.
Más adelante conoceremos mejor la función alert(), que permite incluir otros parámetros para, entre otras cosas, personalizar su botón y su título.
2. CALCULAR CON OPERADORES MATEMÁTICOS
Si trabajamos con números, normalmente es para realizar operaciones numéricas. En el caso de las variables sucede lo mismo, y se hace mediante el uso de operadores aritméticos.
Vamos a hacer que la variable de nuestro ejemplo, se calcule a partir de una operación aritmética y luego sea mostrado en un cuadro de alerta. Comencemos por una suma.
Para ello, cambiemos el valor de la variable numero asignada en la declaración por 8000+6 y guardemos los cambios.
Como podemos ver, efectivamente, en el cuadro de alerta se muestra el resultado de la operación en sí:
Importante: el signo más (+), también permite concatenar texto. Así la operación
“hola”+”Luís” da como resultado holaLuís, y “hola “+”Luís” da como resultado hola Luís.
Ahora cambiemos el valor de la variable numero por el siguiente: 8000-30. Guardar los cambios en el documento y actualizar la página en el navegador.
Podemos comprobar que el operador menos (-) representa una resta y el resultado mostrado es, efectivamente el resultado de restar 8000-30.
En la misma instrucción, sustituyamos el signo menos (-), por el signo asterisco (*).
Ahora hagamos que el valor de la variable numero sea el resultado de dividir 1000/6 usando la barra inclinada (/) como operador numérico.
Comprobemos el resultado en el navegador:
Cambiemos el operador por el signo de %. No se trata de calcular el 6% de mil, ni nada parecido, sino el resto de la división de 1000/6 que es 4.
Pulsar aceptar y regresar al código.
En la misma instrucción en la que hemos estado trabajando sustituiremos la expresión de cálculo de la operación por esta:
numero1=numero*10; y en la función alert()de la siguiente línea cambie el nombre de la variable por numero1.
También podemos realizar cálculos a partir del nombre de la variable. Remplazar el valor de la variable numero1 por ++numero y guardar los cambios.
El valor de la variable se incrementa en 1.
Ahora remplacemos los signos ++ por --, y de nuevo guardemos los cambios y refresquemos en el navegador.
Mientras el conmutador ++ suma 1 al valor, el conmutador -- resta 1 al valor de origen.
3. MATRIZ. ASIGNAR MULTIPLES VALORES
Una matriz es una estructura que contiene una serie de valores. Estos valores se indican entre corchetes en lugar de paréntesis y separados entre sí por comas. Si tenemos que almacenar varios valores, podemos hacerlo en una serie o grupo de variables, sin embargo puede ser más conveniente hacerlo en una sola variable. Para esto están las matrices.
En el código de ejemplo siguiente, crear una matriz como se detalla a continuación:
var matriz=[1001, 1002, 1003, 1004, 1005];
Acabamos de crear una matriz que contiene 6 valores. La forma de declarar esa matriz es similar a la declaración de una variable simple,salvo que los valores son encerrados entre corchetes.
Para ver los valores de esa array, vamos a utilizar la función alert() La instrucción debe quedar asi:
alert(matriz);
Pulsemos aceptar para cerrar la ventana de alerta.
También es posible recuperar solo uno de los valores de la matriz.
Para ello conviene saber que a cada uno de sus valores se le asigna un número de índice a partir del 0. Es decir, el índice el primer valor es 0, del segundo es 1…
Los valores de una matriz, como los de una variable, también pueden ser cadenas de texto y debe introducirse el texto entre comillas.
Accedamos de nuevo al ejemplo anterior y cambiemos los valores del array y a la función alert(), añadamos la referencia [4] de la siguiente forma:
Si desde la función alert(), estamos llamando al índice 4, estamos pidiendo al elemento que ocupa el cuarto lugar, en este caso al elemento5
Guardar los cambios y acceder al navegador.
4. DATOS POR TECLADO. FUNCION PROMPT
MOSTRAR CONTENIDO EN EL DOCUMENTO. FUNCION DOCUMENT.WRITE
Hasta el momento el valor de las variables lo hemos introducido nosotros a mano, pero en ocasiones necesitamos que sea el propio usuario el que introduzca los valores de ciertas variables.
Para ello utilizaremos la función prompt.
Vamos a crear 2 variables, "nombre" y "altura" y hagamos que el usuario sea el que introduzca los valores. Se realiza de la siguiente forma:
A continuación, vamos a mostrar esas variables a partir de la función write:
Se muestra el valor de cada variable. El "<br>" en HTML significa salto de línea, por eso lo ponemos así, para que se muestre de forma más visual, un valor por línea.
Ahora, si abrimos este ejemplo en el navegador, rellenando las dos ventanas de entrada de datos, obtendremos el siguiente resultado:
Pulsamos aceptar y obtenemos:
5. CONDICIONALES CON IFY ELSE
Las condicionales if y else permiten crear una estructura condicional. Si se cumple la condición planteada por la declaración if, se ejecuta la instrucción contenida en la declaración else.
Para el siguiente ejercicio coloquemos el siguiente código entre las etiquetas script:
var numero;
numero=10;
if(numero<15){
alert('Es menor que 15');}
else {
alert('Es mayor que 15');}
Si guardamos el archivo y comprobamos el resultado en la ventana de alerta nos saldrá:
Cambiemos este código por el siguiente:
<script>
var nombre;
var edad;
nombre = prompt('Introduce tu nombre: ','');
edad = prompt('Introduce tu edad: ','');
if (edad >= 18) {
document.write(nombre + ' es mayor de edad.');
} else{
Si guardamos y comprobamos el ejemplo en el navegador:
Aceptamos la primera ventana de alerta
Entonces, en el documento html, nos deberá quedar algo así:
