Es una idea parecida a las incógnitas de matemáticas. Pongamos el siguiente ejemplo (tranqui, que verás como lo entiendes...)
X + 1 = 3
X = 2
Creo que eso lo pueden entender ¿no?. Pues solo hace falta darle la vuelta.
X = 2
X + 1 = 3
Lo que hacemos es asignar a X el valor de 2 y cuando operamos X + 1 es como si dijeramos 2+1 que equivaldrá a decir 3. Si seguimos por ese camino
X = 2
X + 1 = 3
X = 3
X + 1 = 4
Si no lo entiendes, juega con este script...
var x = 1;
document.write(x+1);
NOTA: No es necesario poner ; al final de cada línea, pero no es una mala práctica. Así mismo, si quieres cambiar el valor de x, verás que cambia el valor del resultado.
De momento, vamos a considerar los siguientes tipos de variables:
Tipo 1 - Variables a las que damos un valor forzado y legible por seres humanos
var nombre = "Pedro";
var nombreCompleto = "Pedro Jimenez";
var edad = 33;
var saldoEnElBanco = -10.56;
NOTA: Escribir las cosa de forma que "una frase con palabras" lo pongamos como "unaFraseConPalabras" es una técnica conocida como camel writting.
Estamos considerando cadenas de texto (entre comillas dobles), números enteros (positivos y negativos) y números de coma flotante (con decimales, positivos y negativos).
document.write(nombreCompleto+" tiene "+edad+" años.");
NOTA: Podemos concatenar (representar una cadena como la suma de otras cadenas) indistintamente variables de distintos tipos. Acuérdate de poner espacios donde toque...
Tipo 2 - Variables a las que el usuario da un valor a partir de una ventana (dialogo) del navegador
var nombre = prompt("Dime como te llamas", "Escribe aquí tu nombre");
NOTA: Lo que estamos usando es una función. Esta función toma dos valores (dos cadenas de texto). El primero es el texto que nos muestra en la ventana. El segundo es el valor con el que rellena el campo de texto que aparece y que podemos editar. Las funciones, hacen cosas a partir de unos parámetros y devuelven un resultado. Esto significa que si ponemos una variable y le asignamos el valor de la función, lo que el usuario escriba se pondrá como valor de la función.
Tipo 3 - Variables más complejas que representan elementos HTML
<body>
<div id="bloque">Esto es un bloque</div>
<script>
var elBloque = document.getElementById("bloque");
</script>
</body>
No podemos actuar sobre un elemento HTML que no existe. Es por eso que antes de definir el valor de la variable elBloque hemos creado un DIV que tiene el id correspondiente.
Ahora podríamos mostrar su contenido...
alert(elBloque.innerHTML);
...escribir su contenido...
elBloque.innerHTML = "Este es el nuevo contenido";
...manipular su CSS...
elBloque.style.backgroundColor = "red";
NOTA: Para manipular el CSS necesitamos dos cosas fundamentales. La primera es SABER cómo se establecen los valores de CSS porque pasar un valor erróneo tendrá como resultado un comportamiento erróneo. La segunda es utilizar un software que autocomplete. De esta forma, cuando escribamos elBloque.style. recibiremos un listado de opciones con los nombres de los parámetros CSS que podemos modificar.
Bonus track...
En relación a la última nota. Un software que pinta bien (aunque está en desarrollo) es Brackets. Se trata de un editor opensource y gratuito que fue creado y es mantenido por Adobe.
No hay comentarios:
Publicar un comentario