Siguendo la tradición, ¡continuamos con los 101! Tenemos esta vez el 101 de Javascript, donde el curso lo he realizado también de Codecademy (aquí tenéis el enlace).

Vamos a organizarlo en unos puntos principales:

Variables

Lo que se mantiene de C

Funciones

Objetos

Miscelánea

¡Y empezamos!

Variables

var age = 16;

Así de sencillo. Crear una nueva variable es tan sencillo como poner “var”, seguido del nombre de la variable, un = y el valor de la variable. Hasta aquí todo sencillo, ¿verdad?

Sintaxis

NUEVA VARIABLE:
var + "nombre de la variable" + = + "valor de la variable" + ;

Si recordamos, en C debido a su estructura más centrada en el uso de la memoria directamente había que especificar que tipo de dato estábamos guardando y cuál tenía que ser su espacio, además que el valor del tipo de dato tenía que tener sentido (es decir, no podías poner un int y poner después un double), que reservaba todo el espacio del tipo de dato en la memoria. Hablaremos más sobre los tipos de dato en el siguiente punto, para ver los que se aplican en Javascript.

Aquí no hace falta especificar el tipo de dato con el que estamos trabajando, sino que la declaración de variables se hace implícitamente, ya que el propio lenguaje es capaz de definir de que tipo es el valor del dato que estamos asignando como variable.

Además, los que hayáis trabajado C os daréis cuenta de un detalle: vuelven los puntos y coma (;) a definir el separador de línea, por los que ya estéis acostumbrados a escribir en C no os será un gran problema. Hasta donde tengo entendido no es implícitamente necesario hoy en día, pero mejor hacerlo todo según la convención.

Tipos de dato

En Javascript se nos presentan unos 5 tipos de dato principales (no son todos, pero son los que trabajaremos en este artículo):

  • number = para números (cualquier tipo de número: natural, entero, real, imaginario…).
  • string = del inglés string, para líneas (de texto).
  • array = una tabla o un array de elementos organizados según un orden concreto.
  • boolean = un booleano, true o false de toda la vida (0 o 1 si sois más masocas).
  • object = un objeto, un elemento único de los lenguajes orientados a objeto como Javascript del que hablaremos más adelante.

Estos tipos de dato son los que entiende Javascript internamente, y son con los que trabaja. Vamos a usar un operador conocido de C, nuestro querido typeof (que si no recordáis, devuelve el tipo de dato en función del valor que le pasemos)

typeof "John"                // Devuelve "string"
typeof 3.14                  // Devuelve "number"
typeof false                 // Devuelve "boolean"
typeof [1,2,3,4]             // Devuelve "object" (no "array", mira la nota de abajo)
typeof {name:'John', age:34} // Devuelve "object"

El operador typeof devuelve “objeto” para un array porque en JavaScript, los arrays técnicamente son objetos.

(El ejemplo de arriba está sacado de ésta página de W3Schools)

Lo que se mantiene de C

Una cosa interesante de haber sufrido aprendido C es que hay muchas estructuras y operadores que se mantienen en el resto de lenguajes más modernos, al ser uno de los veteranos en el arte de la creación de lenguajes de programación. Así, vamos a ir viendo qué no tenemos que aprendernos de nuevo (o mejor dicho, qué deberíamos recordar):

Asignaciones 101

¿Alguien recuerda ésta tabla tan bonita (y tan mal diseñada duh) sobre las asignaciones y las comparaciones en C?

Bueno, el tema de las asignaciones se mantiene igual. Sigue siendo 1 igual (=) para la asignación de variables. Eso sí, a la hora de ver si 2 valores eran iguales, mientras en C usábamos 2 iguales (==), aquí usaremos 3 (===).

Comparaciones en Javascript

> Mayor que
< Menor que
<= Menor o igual que >= Mayor o igual que
=== Igual que
!== Distinto que

Como podemos ver, hay algunos elementos a la hora de comparar que cambian, como igual o distinto que.

Las comparaciones con varios elementos (conjunciones y disyunciones lógicas, && y ||) se mantienen igual, y las expresiones sin condición funcionan del mismo modo.

Sentencias if-else

Sintaxis

if ( variable + comparación (mayor, menor, igual) + variable a comparar) { // 
	// el código que se ejecuta si es verdad la condición de arriba 
}

Ejemplo: imprimir “¡Hola!”

var hi = 2;
if (hi < 3) { // Comprueba si hi (2) es menor que 3, que es TRUE y el if se cumple
	console.log("¡Hola!"); // Devuelve "¡Hola!"
}

Para que entendáis el ejemplo de arriba, console.log(“valor”) es la manera de escribir en la consola de desarollo en Javascript (un pseudo-equivalente a printf).

Bucles for

Sintaxis

for (var i = principio; i < fin; i++) { => hacer algo
}

Ejemplo: imprimir en la consola del 1 al 10

for (var i = 1; i < 11; i = i + 1){
	console.log(i);
}

Sentencias switch

Sintaxis

switch (/*una variable*/) {
    case 'option1':
        => Haz una cosa
        break;
    case 'option2':
        => Haz otra cosa
        break;
    case 'option3':
        => Haz una tercera cosa
        break;
    default:
        => Haz algo si la variable no tenía como valor ninguna de las opciones anteriores

Ejemplo: distingue entre notas

var Grade = 'B';
switch(Grade)
{
   case 'A' : console.log( "Excellent" );
              break;
   case 'B' : console.log( "Good" ); // Devuelve "Good" y termina por el break
              break;
   case 'C' : console.log( "OK" );
              break;
   case 'D' : console.log( "Mmmmm...." );
              break;
   case 'F' : console.log( "You must do better than this" );
              break;
   default  : console.log( "What is your grade anyway?" );
              break;
}

(Ejemplo adaptado de esta página de TutorialsPoint)

Bucles while y do-while

Sintaxis

// while
while(condición){
    => Se aplica el contenido
}
// do-while 
do {
    => Se aplica el contenido
} while (condición)

// Recuerda, while (condición) = while (condición = true)

Si recordáis bien, la diferencia principal entre el while y el do-while es que mientras que el while primero comprobaba la condición y si se cumplía, aplicaba el contenido, el do-while primero aplicaba el contenido y antes de repetir el bucle comprobaba la condición, siendo el segundo bastante útil para menús o interfaces de ese estilo.

Ejemplo: while

var understand = true;

while(understand === true){
	console.log("I'm learning while loops!");
	understand = false;
}

Ejemplo: do-while

var loopCondition = false;

do {
	console.log("I'm gonna stop looping 'cause my condition is " + loopCondition + "!");	
} while (loopCondition);

(Ejemplos sacados de “Introduction to “While” Loops in JS”, de Codecademy)

Arrays

Ok, vale, me habéis pillado. Los arrays cambian bastante con respecto a C (no hace falta especificar cuan grande es el array, puede tener cualquier tipo de objeto, se declaran como una variable, pueden tener objetos…) pero oye, la sintaxis es prácticamente la misma, y eso me sirve para justificar que lo puedo decir que es algo heredado de C.

Ejemplo

var miArray = ["Hola", "Mundo"]
miArray[0] => hola
// Los strings funcionan como ¡arrays de letras!
var miNombre = "Ernesto";
miNombre[0] => E

Además, como existían en C, aquí también existen los arrays multidimensionales, presentados por filas:

var twoDimensional = [[1, 1], [1, 1]];

Funciones

Para aquellos despitados: una función es un elemento que recibe unos argumentos (unas variables) y que suele ejecutar un trozo de código, normalmente dando un valor de respuesta según los argumentos.

Sintaxis básica

Sintaxis

// 1ª manera (declarándolo como variable) :
var nombredelafunción = function (argumento1, argumento2) { 
    => código a ejecutar, se pueden usar los argumentos que se han pasado
};

// 2ª manera (declarándolo como función implícita):
function nombredelafunción (argumento1, argumento2) {
   => código a ejecutar, se pueden usar los argumentos que se han pasado
};

Nota: ambas maneras de crear una función son válidas y se pueden usar cualquiera de las 2.

Ejemplo: dividir entre 3

var divideByThree = function (number) { // declara la función y le da un nombre
    var val = number / 3; // el código entre los corchetes es la función per-sé
    console.log(val);
};
divideByThree(5); // llamada a la función, devuelve 2

Una cosa que se puede apeciar es que a la hora de definir una función, el nombre del argumento puede ser cualquiera: x, argumento1, nombre…

Otro aspecto es que como en C, puede devolver un valor para así poder usarse en el calculo de alguna operación como un área, un peso, etc.

var divideByThree = function (number) {
    var val = number / 3; 
    return val;
};
console.log(divideByThree(5)); // sigue devolviendo 2

Variables dentro de funciones: scope

Ya hablamos de este concepto en su momento en C 101, pero sigue igual: si declaramos una variable dentro de una función, solamente será accesible dentro de la función, y por lo tanto, no estará disponible para usarse fuera de ésta. Este es un concepto llamado “variable scope”, o alcance de la variable.

Ejemplo: scope

// code here can not use carName

function myFunction() {
var carName = "Volvo";

// code here can use carName

}

(Ejemplo sacado de nuevo de W3Schools)

Objetos

Aquí es donde llegamos a la crema de este lenguaje de progrmaación, los objetos. En los fundamentos de la programación orientada a objeto (o POO), se define prácticamente todo como un objeto, excepto expresiones primitivas, que son:

  • strings
  • números
  • true / false
  • null
  • undefined

Lo que nos quiere decir esto, que los objetos pueden ser variables dentro de variables: unas variables muy grandes que contienen sub-variables llamadas llaves con un valor. También a las llaves se les puede llamar “propiedades”.

Sintaxis básica y constructores

Debido a la naturaleza flexible del lenguaje de programación, hay varias maneras de definir un objeto.

La primera manera es mediante la keyword “new”: creamos una variable que es un nuevo objeto y definimos sus propiedades.

Ejemplo: “new”

var person = new Object();
// añadir propiedades al objeto 
person.firstName = "John";
person.lastName = "Doe";
person.age = 50;
person.eyeColor = "blue";

Fíjate que a cada propiedad se le añade el nombre del objeto (person.age) seguido de un igual y el valor, separado por punto y coma.

La segunda manera es mediante la notación literal del objeto como una variable:

Ejemplo: notación literal

var person = {
    firstName:"John",
    lastName:"Doe",
    age:50,
    eyeColor:"blue"
};

// es lo mismo que la siguiente línea:

var person = {firstName:"John", lastName:"Doe", age:50, eyeColor:"blue"};

Fíjate que aquí lo puedes poner todo en una sola línea, lo importante es la dualidad propiedad:valor del formato separado por una coma.

La tercera manera es usando un constructor, de los cuales son lo siguiente: son funciones que hacen la labor de objetos, y por lo tanto tienen unas propiedades y unos valores.

Si definimos mediante los argumentos de la función las propiedades del objeto, podemos crear un nuevo objeto sin necesidad de repetir toda la sintaxis mediante este “esquemático” que nos permite hacer Javascript.

Una vez hecho el constructor, se usa la keyword “new” para definir el tipo de dato nuevo: un objeto creado a partir de un constructor.

Además aparece aquí una keyword nueva: el this, que es el objeto al que pertenece el código.

W3Schools tiene una explicación bastante buena que traduciré a continuación:

  • El valor de this en una función es el objeto al que pertenece la función.
  • El valor de this en un objeto es el objeto.
  • El keyword this en un constructor de objetos no tiene valor, sino que es un sustituyente del nuevo objeto (equivalente al argumento1, argumento2 cuando creamos funciones)
  • El valor de this será el nuevo objeto cuando el constructor se use para crear un objeto

Y recuerda, this es una keyword, como new, no una variable, y por lo tanto no puedes cambiar su valor.

Ejemplo: constructor

function person(first, last, age, eye) { // Creamos el constructor
    this.firstName = first; // Asignamos sus propiedades
    this.lastName = last;
    this.age = age;
    this.eyeColor = eye;
}
var myFather = new person("John", "Doe", 50, "blue"); // Creamos el objeto nuevo
var myMother = new person("Sally", "Rally", 48, "green");

¿Cómo accedemos a las propiedades del objeto?

Pues tenemos 2 maneras, por la notación por punto (“dot notation”), o por la notación por corchetes (“bracket notation”):

ObjectName.PropertyName // dot notation
ObjectName["PropertyName"] // bracket notation

¿Podemos hacer que variables nuevas tomen valores de objetos?

¡Claro!

var name1 = bob.name;
var age1 = bob.age;

Por qué todo es un objeto

Vamos a ver un ejemplo bastante curioso encontrado, como de custumbre, en la página de W3Shools.

var x1 = new Object();    // A new Object object
var x2 = new String();    // A new String object
var x3 = new Number();    // A new Number object
var x4 = new Boolean()    // A new Boolean object
var x5 = new Array();     // A new Array object
var x6 = new RegExp();    // A new RegExp object
var x7 = new Function();  // A new Function object
var x8 = new Date();      // A new Date object

Como podemos ver, mediante el uso de un constructor podemos construir incluso expresiones primitivas como String, Number y Boolean.

Realmente los valores primitivos (es decir, var número = 3) es mucho mejor, ya que se ejeuta mucho más rápido.

Y no hay necesidad de ninguno de los otros elementos:

  • ¿Quieres un array?: créalo a base de [].
  • ¿Quieres una función?: créalo a base de function () {}.
  • ¿Quieres un objeto?: creálo a base de {}.
var x1 = {};            // new object
var x2 = "";            // new primitive string
var x3 = 0;             // new primitive number
var x4 = false;         // new primitive boolean
var x5 = [];            // new array object
var x6 = function(){};  // new function object

Funciones y métodos

Ya hemos visto antes cómo podíamos llamar una función:

divideByThree(5);

Pero tenemos que ver que aparte de las funciones, en JavaScript existe un nuevo tipo de función: los métodos.

Un método es una función que está ligada a un objeto. ¿Recordáis cuando para llamar a strcmp teníamos en C que añadir string.h? C también tiene su propia biblioteca de “metodos” o funciones elementales que ayudan a la programación.

Entonces, los métodos llegan con el propósito de hacer esta misma función. Sin embargo, al ser funciones ligadas a objetos, cuando hagamos nuestros objetos podemos añadir también unas propiedades que sean funciones, y que se convertirán entonces en métodos del objeto en cuestión.

Veamos unos cuantos ejemplos:

var square = new Object();
square.sideLength = 6;
square.calcPerimeter = function() { // ej. de método
  return this.sideLength * 4;
};
square.calcArea = function(){ // ej. de método
    return this.sideLength * this.sideLength;
}

console.log(square.calcPerimeter); // devuelve 24
console.log(square.calcArea); // devuelve 36

Podemos ver que la sintaxis es la siguiente:

=> creamos un objeto
=> una de las propiedades del objeto la definimos como una función
=> llamamos al método de la siguiente manera: objeto.metodo(argumentos)

¡Sin quererlo ya hemos visto muchos métodos! Vamos a hablar de los métodos que ya hemos visto antes, y de algunos interesantes:

  • console.log (arg)

En efecto chicos, la propia consola de desarollo es un objeto, el cual tiene unos métodos especiales. Uno bastante útil es el log, que permite exportar el argumento (ya sea una variable o el resultado de una función).

  • string.length ()

Sirve como os podréis imaginar, para medir la longitud de cualquier string ¡o de cualquier array! (Recordad que los strings son arrays de letras…)

  • Math.random ()

Existe un objeto en JavaScript llamado Math (algún veterano que haya usado math.h que levante la mano), y que sirve para realizar calculos varios relacionados con las matemáticas. En este por ejemplo nos encuentra un número real aleatorio entre 0 y 1.

Número entre 0 y 5 sin decimales

No me voy a molestar en explicarlo mal, y voy a dejar literal esta buena explicación sacada de codecademy:

Math.floor(Math.random() * 5 + 1);
First we use Math.random() to create a random number from 0 up to 1. For example, 0.5
Then we multiply by 5 to make the random number from 0 up to 5. For example, 0.5 * 5 = 2.5
Next we use Math.floor() to round down to a whole number. For example, Math.floor( 2.5 ) = 2
Finally we add 1 to change the range from between 0 and 4 to between 1 and 5 (up to and including 5)

Math.floor(Math.random() * 2) => número que es 1 o 0 (= true o false)
Math.floor(Math.random() * 5 + 1) => número que es (1,2,3,4,5)

  • Math.floor (arg)

Como podéis haber supuesto antes, quita los decimales del número que pongamos como argumento.

  • array.push (arg)

Una función bastante útil en mi opinión, sirve para coger una variable nueva y ponerla al final de un array ya existente. No es necesario especificar un número, JavaScript solito llegará al final de la tabla y pondrá el nuevo elemento ahí.

  • string.toUpperCase (arg) y string.toLowerCase (arg)

Como habréis podido adivinar, la primera sirve para poner todo el texto de un string en MAYÚSCULAS y la otra para poner todo en minúsculas.

Hay muchos más, pero nos quedaremos con estos.

Prototipos

En Javascript es posible hacer una jerarquía de objetos. Es más, todos los objetos que creamos mediante el constructor de objetos se crean a partir de un objeto llamado Object que tiene todos estos métodos y propiedades predeterminadas. ¿Cómo creamos esta jerarquía entonces? Con los prototipos.

El primer ejemplo nos sirve para mostrar cómo aunque no esté incluido en la definición del objeto, podemos añadir un método al objeto “on the fly”, en el momento, y a partir de ese momento ese objeto y todos los objetos que creeemos de ese tipo tendrán esa propiedad.

function Dog (breed) {
  this.breed = breed;
};

// here we make buddy and teach him how to bark
var buddy = new Dog("golden Retriever");
Dog.prototype.bark = function() {
  console.log("Woof");
};
buddy.bark();

// here we make snoopy
var snoopy = new Dog("Beagle");
/// this time it works!
snoopy.bark();

El segundo ejemplo nos enseña que podemos usar un constructor ya hecho como prototipo, y el nuevo objeto adquiere todas las propiedades del constructor:


Penguin.prototype = new Animal(); // adquiere todas las propiedades de Animal

Bucle for-in

Hay un nuevo bucle relacionado con los objetos, por eso no lo habíamos visto en C. Se llama bucle for-in, y permite hacer un barrido o un parseo de todas las propiedades de un objeto.
Realmente se parece más a un while que a un for: mientras haya propiedades de un objeto, corre el código y vete a la siguiente propiedad.

Sintaxis

for (var "propiedad" in "objeto") {
    => código
}; 

Ejemplo: imprimir las propiedades de un objeto

for (var prop in nyc) {
    console.log(prop)
};     

Ejemplo: imprimir el valor de las propiedades de un objeto

for (var prop in nyc) {
    console.log(nyc[prop]);
}

Miscelánea

Aquí hablaré de algunas cosas que no he sabido categorizar en ninguno de los puntos anteriores pero que pueden ser de utilidad.

Variables públicas vs variables privadas

A la hora de definir un objeto, si hacemos que en vez de this definimos una variable con var, esa variable será privada: es decir, no se podrá acceder desde fuera de la propia función (excepto que se haga alguna otra función para exportarla con un return o algo así).

Ejemplo

function Person(first,last,age) {
   this.firstname = first;
   this.lastname = last;
   this.age = age;
   var bankBalance = 7500;
}

// create your Person 
var john = new Person ("John", "Doe", 54);

// try to print his bankBalance
console.log(john.bankBalance) // devuelve "undefined", no sabe el valor.

Con pequeñas modificaciones al código podemos acceder a los valores de las variables privadas:

function Person(first,last,age) {
   this.firstname = first;
   this.lastname = last;
   this.age = age;
   var bankBalance = 7500;
  
   this.getBalance = function() {
      return bankBalance;
      
   };
}

var john = new Person('John','Smith',30);
console.log(john.bankBalance); // devuelve "undefined"

// create a new variable myBalance that calls getBalance()
var myBalance = john.getBalance();
console.log(myBalance); // devuelve "7500"

prompt, confirm, isNaN…

Estas funciones de Object son un tanto particulares, y las vamos a definir aquí:

  • prompt (string)

Hace que te salga un popout en el navegador que pone el texto que le hayas pasado por argumento y te permite introducir un texto. Prompt enconces devuelve como resultado el texto que hayas escrito.

  • confirm (string)

Igual que prompt pero en vez de permitirte introducir un texto solamente te deja poner confirmar o rechazar. Devuelve un boolean true o false, dependiendo del caso.

  • isNaN (object)

Le introduces un elemento cualquiera y te dice si su valor es un número o no. Si no es un número, devuelve true, y si lo es devuelve false.

Anuncios

Responder

Introduce tus datos o haz clic en un icono para iniciar sesión:

Logo de WordPress.com

Estás comentando usando tu cuenta de WordPress.com. Cerrar sesión / Cambiar )

Imagen de Twitter

Estás comentando usando tu cuenta de Twitter. Cerrar sesión / Cambiar )

Foto de Facebook

Estás comentando usando tu cuenta de Facebook. Cerrar sesión / Cambiar )

Google+ photo

Estás comentando usando tu cuenta de Google+. Cerrar sesión / Cambiar )

Conectando a %s