History: Javascript

Revision made 7 years ago by Francisco Presencia. Go to the last revision.

Ap­renderás cómo usar este len­guaje de in­terac­ción y a que oc­ur­ran cam­bios en la web a medida que el usuario vaya in­terac­tuan­do con la misma.

Si ya sabes algún len­guaje de pro­gramación, puedes leer­te por en­cima la parte de sin­taxis común de len­guajes de pro­gramación e ir di­rec­tamen­te al apar­tado jQue­ry.

Vari­ables

Hay muc­has for­mas de re­presen­tar la in­for­mación. Se puede re­presen­tar el número de es­tudian­tes con un en­tero, tu nombre con un str­ing (texto), etc. Para pro­gramar los puedes quer­er al­macenar en algún sitio: en vari­ables.

Una vari­able es una re­feren­cia donde se guar­da in­for­mación. Im­agina que quieres guar­dar el hipotético número de es­tudian­tes de una clase de Libre Uni­vers­ity, 80. Podrías hacer­lo así en Javascript:

var students = 80;

Es­tamos crean­do la vari­able students usan­do la palab­ra var y le as­ig­namos el valor de 80. Si despu'es queremos saber el número de es­tudian­tes para el año que viene, podríamos hacer­lo así:

var students = 80;
var graduating = 20;
var joining = 30;
var nextyear = students + joining - graduating;

Tipos de vari­ables

Al­gunos ejemplos ex­plicados de cómo de­finir vari­ables en Javascript:

// Number:
var years = 24;

// Boolean:
var married = true;

// String:
var address = "Street 24, New York";

// Array (of strings):
var friends = ["Mary", "John", "July"];

// Object
var friend = { firstname: "Peter", lastname: "Smith" };

Para mostrar­los, podríamos usar la función alert() y un pop-up mostrará su valor.

Estructuras de control

Los programas normalmente se ejecutan de arriba abajo, linea por linea. Sin embargo hay varios tipos de estructuras en javascript que pueden cambiar esto, incluyendo las estructuras de control. La característica de las estructuras de control es que son una operación seguida por un bloque de código delimitado por un {}, y este bloque es el que se ve afectado.

if ( con­di­tion )

Cuando usamos las variables mencionadas previamente a veces quieres que cierto código se ejecute sólo en una situación pero no en otra. Para conseguirlo usamos un if() condicional:

var name = "John";

if (name == "Peter") {
  alert("Hello Peter");
}

if (name == "John") {
  alert("Hello John");
}

Atentos a cómo usamos == en lugar de =, ya que el igual único se usa para asignar una variable mientras que el doble (o triple) se usa para comparar dos valores o variables.

¿Y qué haces cuando también quieres hacer algo cuando la condición no se ha cumplido? Puedes usar la estructura else:

var name = "Peter";
if (name == "Peter") {
  alert("Hello Peter");
}
else {
  alert("You are not Peter!");
}

Podemos comparar cualquier tipo de variable. Por ejemplo, también podemos comparar números y operaciones como mayor que o menor que como estas:

var age = 17;
if (age >= 18) {
  alert("You are allowed to see this page");
}
else {
  alert("This page is only for adults");
}

for ( in­iti­al ; con­di­tion ; chan­ge )

There's an­oth­er im­por­tant con­trol struc­ture cal­led for. It is used when you want to per­form an op­era­tion many times but you don't want to write the same code over and over again. For ex­am­ple, say Bloody Mary 3 times:

for(var i = 0; i < 3; i++) {
  alert("Bloody Mary");
}

Note how we put i < 3 to dis­play it three times, since it will be ex­ecuted when i is 0, when i is 1 and when i is 2. If we had said i <= 3 then we'd also ex­ecute the block when i is 3, so it'd be 4 times in total.

.forEach(func­tion(){})

A similar one would be .forEach(). It is used to loop an array, howev­er we'll see it later since it in­vol­ves met­hod and callbacks, some more ad­vanced tech­niques.

Func­tions

A func­tion is a piece of code that takes an input and re­turns an out­put. Let's see a typ­ical ex­am­ple, the func­tion "sum":

function sum (a, b) {
  return a + b;
}

This func­tion ac­cepts two ar­gu­ments and re­turn the sum of them. To use it you can test this code:

function sum (a, b) {
  return a + b;
}
var result = sum(5, 7);
alert(result);

Ob­jects and met­hods

An ob­ject is a type of vari­able that can con­tain other ele­ments cal­led pro­pert­ies. It is dif­ferent from an array in that each ele­ment has a name. For ex­am­ple, you can have the ob­ject per­son:

var person = {
  firstname: "John",
  lastname: "Doe",
  age: 21
};

To read or write one of the pro­pert­ies of per­son you can ac­cess them using a .:

var person = {
  firstname: "Jonh"
};

// Oops, we made a typo in firstname. Fix it:
person.firstname = "John";

// Display the name of the person
alert(person.firstname);

Ob­jects can also store func­tions. Let's allow for the pre­vi­ous per­son to say his name:

var person = {
  firstname: "John",
  sayHi: function(){
    alert("Hi, I'm John");
  }
};

// It shows "Hi, I'm John"
person.sayHi();

this

To ac­cess a vari­able with­in an ob­ject or func­tion, you can use this keyword. For the last ex­am­ple:

var person = {
  firstname: "John",
  sayHiTo: function(to){
    var name = this.firstname;

    // Join the string with the name
    alert("Hi " + to + ", I'm " + name);
  }
};

// It shows "Hi Peter, I'm John"
person.sayHiTo("Peter");

Async

There are some times that we want to ex­ecute an ac­tion when some­th­ing speci­al hap­pens. For ex­am­ple, let's say we want to ex­ecute a func­tion after 1 second. In other lan­guages you'd do some­th­ing like this:

some actions
sleep(1000) // sleep 1000ms
actionAfter1s()
other actions

Howev­er, we would­n't be able to ex­ecute "other ac­tions" until after we have ex­ecuted the sleep(1000). This is bad to do many th­ings at the same time, so javascript uses async func­tions to do that. There are some func­tions de­fined as async that ac­cept a func­tion as a vari­able and then ex­ecute it when the con­di­tion is met. For the same ex­am­ple as above, we would do this in javascript:

alert(1);

function actionAfter1s(){
  alert(3);
};

// Async function, 'setTimeout'
setTimeout(actionAfter1s, 1000);

alert(2);

In this way, we would see "1", "2" and then "3" after 1 second in that order on the scre­en. This is great so scripts don't block each other and many th­ings can be ex­ecuted in­depen­dent­ly.

Howev­er, you should also be care­ful, as if you are ac­ces­ing out­side vari­ables they might have chan­ged by the time you use them. This will dis­play "3" three times in­stead of 1, 2 and 3:

for(var i = 0; i < 3; i++) {
  setTimeout(function(){
    alert(i);
  }, 1000);
}

jQue­ry

Por ahora hemos visto cómo func­iona javascript como len­guaje de pro­gramación. Pero este también se usa para in­terac­tuar con la web, por lo que podemos ac­ced­er al HTML di­rec­tamen­te desde el mismo. Nor­malmen­te se usa la li­brería jQue­ry, ya que facilita mucho las cosas.

La misma usa selec­tores de CSS para en­contrar elemen­tos en el html.

// Encuentra todos los parrafos en la web
var parrafos = $('p');

// Encuentra todos los elementos con la clase "button" (usamos ".")
var botones = $('.button');

Tras esto, podemos in­terac­tuar con los mis­mos. Por ejemplo, di­gamos que queremos cam­biar todos los pár­rafos por un "Hola Mundo!". Podríamos hacer­lo de la siguien­te forma:

var parrafos = $('p');
parrafos.html('Hola Mundo!');

O podemos simplificar­lo a:

$('p').html('Hola Mundo!');

Esta pro­piedad se llama chain­able, que quiere decir que podemos, con un mismo selec­tor, ap­licar­le varias op­eraciones. Ahora añadiremos una clase a todos los pár­rafos, a parte de cam­biar­les el con­tenido:

$('p').html('Hola Mundo!').addClass('superparagraph');

Estos métodos (func­iones), html() y addClass(), son de­finidos por jQue­ry y puedes en­contrar una lista en la Documen­tación Of­ici­al, pero estos son de los más usados:

.html(), .append(), .prepend()

.addClass(), .hasClass(), .removeClass()

Y no sólo eso, sino que al­gunos de estos métodos tien­en varios usos. Por ejemplo, si usamos el método .html() sin ningún parámetro nos de­volv­erá el con­tenido del [prim­er] elemen­to selec­cionado, mientras que si le ponemos algo de­ntro cam­biará el html a todos los elemen­tos selec­cionados:

// Recupera el texto del primer párrafo
var texto = $('p').html();

// Cambia el texto de todos los párrafos
$('p').html('Hola mundo!');

También podemos hacer uso de even­tos. Uno de los métodos más usados, .on(), se usa para cuan­do el usuario hace algo. Como por ejemplo click. Como esto es un even­to as­íncrono, le pasamos una función que será la que se ejecute cuan­do el usuario haga click en el elemen­to selec­cionado:

$('button').on('click', function(){
  alert('Hola Mundo!');
});

Hacien­do Like

Esto re­sul­ta muy útil cuan­do, por ejemplo, queremos cam­biar algo cuan­do el usuario le da click a Like. Para esto, nos de­finiremos el siguien­te HTML:

<button>Like<button>

Con el siguien­te es­tilo en CSS:

button {
  color: #000000; /* negro */
  background: #ffffff; /* blanco */
}

.liked {
  color: #ffffff; /* blanco */
  background: #ff0000; /* rojo */
}

Y el siguien­te javascript:

// Cuando el usuario hace click en un elemento button
$('button').on('click', function(){

  // Le toggleamos (añadir/quitar) la clase "liked"
  // this es el elemento sobre el que has hecho click
  $(this).toggleClass('liked');
});

Puedes ver el re­sul­tado en jsfiddle.

AJAX, llamadas al ser­vidor

Pero si nos fijamos, si hacemos "Like" y re­fres­camos la página el es­tado se habrá bor­rado. Esto es por­que el ser­vidor no sabe qué es­tamos cam­bian­do, sólo lo sabe nuestro navegador. Para en­viar­le esta in­for­mación al ser­vidor usaremos AJAX (As­ynchron­ous JavaScript and XML):

// Cuando el usuario hace click en un elemento button
$('button').on('click', function(){

  // Le toggleamos (añadir/quitar) la clase "liked"
  // "this" es el elemento sobre el que has hecho click
  $(this).toggleClass('liked');

  // Recuperamos el id del elemento
  var id = $(this).data('id');

  // Vemos si le hemos dado a like o lo hemos cancelado (true/false)
  var isLiked = $(this).hasClass('liked');

  var url = '/like';
  var data = { id: id, like: isLiked };
  var done = function(){
    alert('Hecho!');
  }

  // Enviamos la petición al servidor
  $.post(url, data, done);
});

Sin em­bar­go, si lo pro­bamos no func­ionará ya que la url /like no ex­is­te ahora mismo. Es im­por­tante que veamos cómo en­viar las peticiones, pero cómo y dónde re­cibir­las lo veremos en el siguien­te capítulo.