¿Alguna vez habéis usado jQuery, scriptaculous, etc, verdad? Todo es muy intuitivo ($('selector').animate() para animar, .hide() para ocultarlo, etc). Pero todo se basa en un lenguaje muy utilizado en la web, el Javascript.

Javascript es un lenguaje pensado para interactuar con el usuario en la web, es lo que hace que se muestren los posts relacionados, que se puedan leer los feeds del blog, editar elementos, etc.No hace falta decir que se escribe entre etiquetas <script></script>.

Aviso: Este post es largo, pero la información que se va a ver es la básica para poder hacer cosas más interesantes con este lenguaje de programación. Si tenéis alguna duda, o me he explicado mal, o cualquier cosa, dejad un comentario abajo y será respondido lo antes posible.

En javascript todo es un objeto (tal vez ahora no entendáis esto, pero es un concepto clave en javascript). Hay varios objetos predefinidos en javascript:

String

El objeto String es una cadena, un texto. Este objeto (mas bien su prototipo) nos permite acceder a una gran cantidad de métodos como, por ejemplo, split,toUppercase,substring,indexOf.... Ni idea, no? pues vamos a ver cómo aplicarlo (estáte atento a los comentarios).

//Con la palabra var, definimos una variable. A partir de ahora 
//cada vez que pongamos miString, será igual que si pusiéramos "Hola mundo"
var miString = "Hola mundo";
//Con split separamos la cadena en base a un carácter para convertirlo en una Array (lista de valores)
//Entre las comillas hay un espacio!
var miArray = miString.split(" ")//devuelve ["Hola","mundo"]
//Para acceder a lo que hay en una Array usamos los corchetes indicando la posición.
//OJO!, en javascript casi siempre 0 indica el primer item, 1 el segundo, etc.
miArray[0] //"Hola"
miArray[1] //"mundo"
//toUpperCase nos devuelve la String en mayúsculas
var miStringEnMayusculas = miString.toUpperCase()\\"HOLA MUNDO"
//idexOf devuelve la posición del primer carácter o string que sea igual a lo que pasas a la función
//Si no encuentra nada devuelve -1
miString.indexOf("a")//Devuelve 3 (a es el cuarto carácter)
//substring devuelve una cadena que va desde el primer argumento hasta el segundo, o hasta el final si no hay segundo
miString.substring(2)//Devuelve "la mundo"
miString.substring(1,4)//Devuelve "ola" (sin "h", no es una errata)

¿Quieres probarlo? Si usas Firefox con Firebug, pulsa F12 (abre firebug), pulsa Consola, y a la derecha hay un recuadro para introducir texto. Vete introduciendo el texto del ejemplo de arriba y mira lo que sale por la izquierda.
Si usas Chrome, pulsa F12 y pulsa la pestaña «Console». Allí, en la última línea podrás ir introduciendo el código.
Si usas IE los pasos son similares, pero no lo recomiendo, ya que IE no ha sido precisamente un navegador que cumpla con los estándars, y su consola es «diferente», vamos a dejarlo ahí.

Array

Una array es una cadena de valores, que podemos recorrer gracias a loops. Por ejemplo, en el feed de blogger, nuestras entradas están en una array. Se puede crear de varias maneras. Una es usando el objeto constructor y otra es escribiéndola literalmente. Por ejemplo, para almacenar en una variable llamada miArray una array con los números 1, 2 y 3, podríamos escribir: var miArray = new Array(1,2,3) o var miArray = [1,2,3].

Para acceder a los valores (ver ejemplo de arriba), usaremos una notación de corchetes. El número que pongamos entre corchetes es la posición del elemento (tened en cuenta que el primero es 0). Así, miArray[0] sería igual a 1, miArray[1] sería 2 y miArray[2] sería 3. También posee métodos muy útiles.:

var miArray = [1,"Hola mundo",5]//En una array se pueden almacenar cualquier tipo de datos (strings, arrays, objetos, funciones, etc)
//Los valores de una array se pueden modificar así
miArray[1] = "Adiós" 
//Para obtener el número de items usamos length
miArray.length //3
//con push insertamos al final de la array algo, en este caso, una string
miArray.push("Este es el cuarto valor")
console.log(miArray)//Esto es sólo para que veáis en la consola cómo es. Se vería algo así como [1,"Adiós",5,"Este es el cuarto valor"]
//unshift lo inserta como primer valor
miArray.unshift("primero")//["primero",1,"Adiós",5,"Este es el cuarto valor"]

Objeto

En un objeto podemos guardar diferentes datos. Al igual que una persona tiene un nombre, un apellido, una altura, etc, un objeto puede tener infinitas propiedades. Para crear un objeto, al igual que para crear una Array, hay dos métodos. El primero es escribirlo con la función constructora (var persona = new Object()), el segundo es escribirlo con json, una notación perfectamente válida y mucho más simple (var persona = {}).

Para configurar las propiedades de un objeto podemos usar la notación de puntos, o la de corchetes. Así, si escribimos persona.altura = '1.79m', es lo mismo que si escribimos persona['altura'] = '1.79m'. Igualmente, para acceder a la propiedad, usamos la misma notación: var laAltura = persona.altura, que es igual a var laAltura = persona['altura']. Normalmente se suele preferir la notación de puntos, pero hay que tener en cuenta que con ella no podemos usar algunos caracteres especiales como «-» , «/», etc.

Por qué usar JSON si es posible

Os vais a dar cuenta en cuanto lo veáis:

/*==================================
 * SIN USAR JSON
 */
var persona = new Object();
persona.altura = "1.80m";
persona.nombre = "Jose";
persona.apellido = "noExiste";
persona.deporteFavorito = "Futbol";
persona.ciudadesPreferidas = ["Madrid","Barcelona","Pekin","cualquierOtra"]
/*==================================
 * USANDO JSON
 */
var persona = {
       "altura" : "1.80m",
       "nombre" : "Jose",
       "apellido" : "noExiste",
       "deporteFavorito" : "Futbol",
       "ciudadesPreferidas" : ["Madrid","Barcelona","Pekin","cualquierOtra"]
    } 
//Supongamos que ahora quiero escribir su país de residencia, no tengo que reescribirlo todo, sólo tengo que poner
persona.pais = "Italia"

Como supongo que os habréis fijado, con JSON el lenguaje es mucho más comprensible y menos repetitivo, sobre todo para objetos grandes.

Los objetos no acaban aquí, hay prototipos, funciones constructoras, pero por ahora vamos a dejarlo.

Funciones

Una función nos sirve para poder ejecutar código repetitivo sin tener que copiarlo millones de veces. Se define así: function nombreDeLaFuncion(parametro1, parametro2,...){/*código a ejecutar*/}, o así: nombreDeLaFuncion = function(parametro1, parametro2,...){/*código a ejecutar*/}.

Los parámetros son datos que podemos pasar a la función. Son opcionales (si se quiere hacer algo siempre con los mismos valores, no hace falta). Vamos a verlo:

/*Sin parámetros*/
function sumarCincoMasOcho(){
    return 5 + 8
}
/*Con parámetros*/
function sumarNumeros(num1,num2){
    //Return => Devuelve un valor. Si no usamos esto, no podríamos hacer:
    //var laSuma = sumarNumeros(5,6)//11
    //Siempre que queráis quedaros con un dato, usad return.
    return num1 + num2
}
/*La usamos*/
//La función alert saca un mensaje por pantalla
alert( sumarCincoMasOcho() )//Por tu pantalla debería salir el número 11 cuando lo uses
var laSuma = sumarNumeros(1,2)//Ahora la suma vale 3
//Ahora a laSuma le hemos sumado 9 => vale 12
//podríamos haber usado laSuma += sumarNumeros(4,5), que hace lo mismo
laSuma = laSuma + sumarNumeros(4, 5)
alert(laSuma)//12

Como anotación, en una función dentro de un objeto puedes usar this para referirte al objeto. Por ejemplo, en el caso de la persona:

persona.mostrarNombre = function(){
    alert(this.nombre)
}
persona.mostrarNombre()//Jose

Finalmente, decir que una función también tiene métodos muy interesantes (call,apply), pero que por ahora no los voy a explicar.

Math

Por último, y antes de poner un ejemplo fácil con lo que hemos aprendido, voy a explicaros el objeto Math. El objeto Math es un objeto con funciones para realizar diversas operaciones y comparaciones. Aquí tenéis una lista completa, pero yo voy a explicar random, round, floor y ceil.

//Math.floor devuelve el número redondeado a la baja
Math.floor(1.77)//1
//Math.ceil hace lo mismo, pero a la alta
Math.ceil(5.2244)//6
//Math.round redondea el número normalmente
Math.round(5.6)//6
Math.round(5.4)//5
//Math.random devuelve un número aleatorio entre 0 y 1
Math.random() //Eso, un número aleatorio

Ejemplo práctico: típico widget de frases aleatorias

Ahora vamos a construir el típico widget de frases aleatorias, basándonos en una array, el objeto Math, y una función para cargar otra frase (vale, usaremos una cosilla más, pero sólo para mostrarlo en la página). Recordad que tiene que ir entre etiquetas <script></script>. Nota: Esta es la forma más fácil de haacerlo, hay otras maneras para no crear variables globales, etc, pero se verá más adelante.

El lugar donde mostraremos las frases será un div con la id ‘contenedor-frases’. Recordad que tiene que ir antes del script, porque si no no lo encontrará.

<div id='contenedor-frases'></div>

Ahora el script:

//Podríais poner las que quisiérais
var frasesWidget = ['Primera frase', 'Segunda frase', 'Tercera Frase', 'Cuarta frase', 'Quinta frase','Sexta frase'],
    //Esta es una de las cosas que (aún) no sabéis. con esto seleccionamos el elemento con id="contenedor-frases"
    contenedorFrases = document.getElementById('contenedor-frases');
function mostrarFrase(){
    //Obtenemos un número aleatorio, multiplicado por el número de frases. El máximo con 6 frases sería 5.9999999
    //En ese caso, si redondeáramos con Math.round, nos saldría 6, y miArray[6] no existe (el primer elemento es 0, recuerdas?)
    //Así que lo redondeamos hacia abajo
    var elIndex = Math.floor( Math.random() * frasesWidget.length );
    //Con innerHTML configuramos el contenido del elemento (no teníais por qué saberlo)
    contenedorFrases.innerHTML = frasesWidget[elIndex]
}
//Llamamos por primera vez a la función
mostrarFrase();

Ahora, si queremos recargar la frase tenemos que añadir un elemento que, cuando se haga click, la recargue: <a href='javascript:;' onclick='mostrarFrase();return false;'>Muestra otra</a>.

En funcionamiento

Muestra otra

Conclusión

Sí, ha sido largo, pero esto es una parte básica de lo que tienes que saber sobre javascript. Si sabes si he cometido algún error (nunca se sabe), comenta y será corregido inmediatamente.