Propiedades Basicas Javascript: Herramientas

TUTORIAL REALIZADO POR PYRITE WOLF DE SOURCECODE

Este tuto te instruirá sobre varias herramientas que JavaScript nos ofrece para facilitarnos la vida. La verdad es que tendría que haberlo explicado antes, pero soy así de vueltera y olvidadiza y no son conocimientos imprescindibles para aprender todo lo anterior xD
Cabe decir que como en la mayor parte de js, todo lo que se explica aquí es case-sensitive (es decir, que distingue mayúsculas de minúsculas).


Javascript diferencia varios tipos de contenidos: strings, números, arrays, elementos booleanos y objetos. Veamos a algunos de ellos:

Se llama string (cordel o hilo, aunque nunca lo vi traducido para JS) a una serie de contenidos escritos entre comillas, que serán leídos por el JS como texto plano. Dentro de los strings se puede escribir HTML (es lo que hacemos para las inserciones DOM, por ejemplo) pero es importante no emplear las mismas comillas que usas para rodear el string que las que usas dentro del HTML: si rodeas al string con comillas simples (') debes escribir el HTML con comillas dobles ("). Uses lo que uses, debes definir tu equipo desde un principio y usarlo siempre así, para evitarte problemas. Tampoco debes insertar enters en los strings, ni backslashes (\): si te ves obligado a insertar comillas que no deberías, o enters, o backslashes, recurre a esta tabla de equivalencias:

¿Qué necesitas?	Lo que debes usar
"	\"
'	\'
Enter (linebreak)	\n
\	\\

Los números son... números. Interpretan su valor numérico. La cuestión aquí es que no se escriben entre comillas, y sirven para realizar cuentas numéricas.

Los elementos booleanos son elementos de valor verdadero o falso, sobre los cuales hablaremos un poco más en el próximo tuto. En cuanto a los Arrays y los Objetos,... los verán a continuación


*se traga un buda y considera cómo demonios explicar esto*
Ok. A ver. ¿Recuerdan la primaria? ¿Ecuaciones? Bueno, esto es algo parecido: tenemos una x (o variable) que puede adoptar el valor que ustedes deseen o necesiten. Esto se escribe, por ejemplo, así:

var nombre = valor;
Por ejemplo:
var color = 'azul'; >> cuando el valor es un texto, va entre comillas
var x = 0; >> cuando el valor es un número, va simple
var n = true; >> también le podemos dar valores booleanos, sin comillas

A estas variables las puedes llamar sin necesidad de emplear comillas ni nada dentro del JavaScript, por ejemplo:

Esto haría que el nombre de usuario salga antes del #wrap del foro.
var nombreuser = 'Invitado';
$(nombreuser).insertBefore('#wrap');

Sin embargo, si quiero que salga en medio de un texto, tenemos que emplear algunos conectores: emplearemos comillas para rodear el texto y + para unir a los textos con la variable:
var nombreuser = 'Invitado';
$('Hola,'+ nombreuser +', ¿cómo vas?').insertBefore('#wrap');

También puedes crear arrays o conjuntos de variables:

var colores=new Array();
colores[0]='Azul';
colores[1]='Rojo';
colores[2]='Verde';

Y si quieres llamar a alguno de estos elementos dentro del array, los llamas como variables:

colores[2]

Otra cosa que puedes crear es objetos, que te permiten tener varios pares de datos en una sola variable:

var personaje={
nombre: 'Oyuki Buenaonda',
edad: '¿22?',
trabajo: 'ser genial'
};

Como verás, va entre llaves y cada par se separa con una coma simple. Luego, para llamar a cada dato, haces simplemente:

personaje.nombre

Todo esto puede parecerte una estupidez, pero esto realmente te puede servir para muchas cosas, por ejemplo cuando quieres saber cuántas veces alguien clickeó algo, o cual es el valor de algún elemento, etc., en especial si lo combinas con lo que viene a continuación.


Los operadores nos permiten realizar operaciones de todo tipo con variables y otras cosas :3 Por ejemplo:

a = 1
b = 2
c = a+b
En este caso, el valor de c será 3. Si tenemos variables con valor de texto, en cambio:
a = 'Nel Silenzio'
b = 'Skaôi'
c = a+b
El valor de c será Nel SilenzioSkaôi (sin espacios, porque luego de Silenzio no puse un espacio).

Los operadores son varios y nos permiten jugar mucho. Asumid que a = 2 y b = 4:

Operador	Interpretación	Ejemplo
+	Suma	a+b = 2+4 = 6
-	Resta	a-b = 2-4 = -2
*	Producto	a*b = 2*4 = 8
/	División	a/b = 2/4 = 0.5
++	Aumentar en 1	a++ = 2+1 = 3
--	Disminuir en 1	a-- = 2-1 = 1
=	Es igual a	a == 2 (verdadero)
===	Es exactamente igual a	a === '2' (falso) a === 2 (verdadero)
!=	Es diferente a	a != 3 (verdadero)
!==	Es absolutamente diferente a	a !== 3 (falso) a !== '3' (verdadero)
>	Es mayor que	b > a (verdadero)
<	Es menor que	b < a (falso)
>=	Es mayor o igual que	a >= b (falso)
<=	Es menor o igual que	a <= b (verdadero)
&&	Y	a = 2 && b = 4 (verdadero) a = 0 && b = 4 (falso)
||	O	a = 2 || b = 4 (verdadero) a = 0 || b = 4 (verdadero)
!	Negación	!(a = 2) (falso) !(a = 0) (verdadero

Las funciones realmente no vienen mucho a cuento con los operadores y las variables peeeeero en algún lado las tengo que explicar y son muy breves para ponerlas en otro lugar. Básicamente, son grupos de códigos JS que se ejecutarán cuando tú escribas su nombre.

Forma básica de la función:
function nombre() {
código;
}

Se ejecuta cuando colocas:
nombre()

Veamos un ejemplo práctico: supongamos que tengo una función que hace que #cajita se oculte. Llamaremos a esa función muestracajita porque somos shuer cool:

function muestracajita() {
$('#cajita').show(500);
}

Es importante que esto vaya FUERA del document-ready, porque sino se ejecutará por defecto al cargar la página. Ahora supongamos que queremos que #cajita se muestre cuando hagamos click en #shalala. El código sería, esta vez DENTRO del document-ready:

$('#shalala').click(muestracajita());

Sé que este tuto os puede parecer inútil, pero les aseguro que no lo es, para nada. De hecho, más adelante creo que haré un tuto de Posibles Aplicaciones de los Tutos xDD porque individualmente ninguno sirve, pero en conjunto se pueden hacer cosas divertidas.
Nos vemos en el próximo tuto cualquier duda, recuerden dejar mensaje aquí mismo.