Desarrollo web para no iniciados – Parte 4 JavaScript (introducción)

Esta introducción esta planteada con la idea de que sirva como mini introducción al mundo de la programación. Para ello usaremos como apoyo nuestro navegador para conseguir grandes resultados, que nos sirvan de “feedback” para despertar más nuestro interés por el siempre vasto mundo de la programación.

Intentando recordar cuales, de los muchos libros, que he leido, sentó mejor las bases del mundo de la programación, me vino a la mente un buscaminas, en un libro de turbo pascal, con el que además de aprender, jugué, y mucho. Así que como todavía no se cuanto va a durar esto, lo mejor es ponerse a ello, por que a programar solo se aprende, programando.

¿Que es un programa? Podemos ver un programa como la serie de instrucciones que ejecutará un ordenador. Los ordenadores a su nivel más básico, solo pueden hacer cosas realmente simples, sumar números, ir de un sitio de nuestro programa a otro, leer y escribir datos, etc…

Hacer que un enlace te lleve de una web a otra hace que el programa del navegador tenga que hacer muchísimas de estas instrucciones simples, sí, picar en un enlace, entre otras cosas, tiene muchas sumas de números.

Si todos los programas fueran secuencias de instrucciones que ejecuta directamente el ordenador, serian enormes y muy complejos de mantener. Las herramientas, básicas que usaremos, serán los lenguajes de programación, que nos proveen de una sintaxis para de forma abstracta comunicarnos con un ordenador. ¿Qué significa esto? Normalmente querremos que nuestros programas hagan cosas interesantes, por lo menos mas que sumar dos números. Lo que nos permitirá hacer un lenguaje de programación sera estructurar las intrucciones de forma que (a veces) sea entendible por las personas.

Nuestro lenguaje de programación podria permitirnos escribir un programa que fuera:

hacer_algo

Y al ejecutarlo decirnos que no conoce hacer_algo. Nosotros veremos javascript, el lenguaje que inyectamos en la web para hacerla dinámica. Hemos visto que los navegadores tienen herramientas para analizar nuestras webs, una de ellas es una consola de javascript, en el caso de chrome, boton derecho, inspeccionar elemento y seleccionamos el último panel (Console)

Si picamos al lado del mayor que, >, debería aparecernos un cursor a modo de barra vertical parpadeante, que tiene como objetivo invitarnos a darle cosas que hacer.

Provemos con el ejemplo anterior. Escribimos hacer_algo y pulsamos enter o intro. Nuestro interprete javascript, nos contesta en un rojo error lo que habiamos predicho, que no conoce hacer_algo. Si supieramos javascript podríamos explicarle que es haz_algo. Vamos a aprenderlo.

Pero antes hagamos una parada en unos aspectos básicos de javascript. Como vimos en la parte de HTML, es muy útil poder dejar comentarios para hacer algunas partes más entendibles, podremos usar un doble barra “//” para que el resto de una linea sea ignorado, o encerrar un trozo con barra asterisco, /* comentario */, para que también sea ignorado. Nuestros programas la mayor parte de las veces ocuparán más de una línea. En javascript podemos separarlas con una nueva linea o con un punto y coma ;

haz_algo // Esto es un comentario
/*
  Esto tambien
*/
hacer_algo;
hacer_algo;hacer_algo
hacer_algo
// llamanos cuatro veces a hacer_algo

Podemos escribir un programa en javascript que sume dos números. Prueba en la consola a poner 2+3.
Le hemos dicho al interprete que cojiera “2″ y le sumara “3″ y esta vez no nos ha dicho que no sabe ;) Hemos usado el dato 2, el dato 3 y se ha generado el dato 5. Aunque sigamos viéndolos en nuestra consola su vida solo duró unos micro segundos, pasaron sin pena ni gloria, hicieron estupendamente su trabajo, pero no quedó nada para recordarlos, solo su esquela en la pantalla. En los lenguajes de programación hay un concepto muy importante, las variables, podemos verlas como las etiquetas que le ponemos a los datos para no perder los. En javascript hay una palabra reservada, “var”, que sirve para indicar estas etiquetas. Si quisieramos guardar nuestra suma para la posteridad podemos volver a nuestra consola y poner:

var suma = 2+3

Y respondernos con un feo “undefined”. Esto es porque al ejecutarlo desde la consola siempre que pulsamos enter nos ejecuta nuestro programa y nos imprime su resultado, en este caso crear una variable no devuelve nada (undefined). Pero hemos conseguido nuestro objetivo, nuestro 5, ahora único entre todos los cincos tiene como nombre suma y podremos seguir jugando con el, escribe suma y observa que nos lo tiene localizado.

Al principio cuando intentamos hacer_algo elegimos este nombre no de forma totalmente arbitraria. Como dijimos más arriba, los lenguajes de programación nos dan una sintaxis abstracta. Abstracta por que, en principio es independiente del tipo de ordenador y de lo que haga. Pero sintaxis al fin y al cabo. Las etiquetas de las variables no pueden ser de cualquier forma. Pueden contener caracteres alfanuméricos, letras y números, guiones bajos _ y algunos símbolos más que todavía no veremos para no afeantar la cosa. No pueden contener espacios ya que serían identificados como variables distintas. Son sensibles a mayúsculas y minúsculas con lo que suma es distinto de SUMA o de SuMa. No pueden empezar por un numero, pero si tenerlos. No pueden ser una palabra reservada, como var o las demas que veamos.

// Ejemplos validos
suma_total
sumatotal
sumaTotal
total25
_total_absoluto_
// Ejemplos no validos
suma-total // Caracter no permitido
33total // Empieza con numero.
var // Palabra reservada

Dentro de nuestro lenguaje de programación estos elementos son conocidos como identificadores.

Sabemos hacer muy pocas cosas. Sabiendo sumar podemos sospechar que podremos hacer mas operaciones basicas: Restar -, Multiplicar * o Dividir /

Provemos:

2+3-1*2/4

4.5, puede que no fuera el resultado que esperabais, observad que la fórmula se aplica siguiendo la preferencia aritmética. Podemos usar paréntesis para delimitarla, el ejemplo anterior sería equivalente a:

(2+3)-((1*2)/4)

Estos simbolos junto al = son operadores y es uno de los mecanismos que tenemos para hacer cosas en javascript. Al igual que hemos usado valores concretos para hacer operaciones podemos usar las variables, puedes sumarle 3 a la suma anterior con

suma+3

A parte de números nuestras variables pueden ser, cadenas de texto, encerrando un texto entre dobles comillas o comillas simples:

var cadena = "esto es texto"
var cad2 = 'esto es texto'

Listas o arrays que pueden contener cualquier cosa, encerrados sus elementos entre corchetes y separados por comas:

var lista = [ 1, 2, 3, 4, 5]
var list2 = [ "1", 2, "3", 4, "5"]

Podemos acceder a sus elementos por su posición teniendo en cuenta que el primer elemento es 0:

lista[1]+lista[2] // 5, sumar el segundo y el tercer elemento
list2[0]+list2[2] // "13", sumar cadenas las concatena

El ultimo tipo de dato de javascript son los objetos. Si quisieramos almacenar información sobre un coche podriamos crear unas variables como:

var color = "rojo"
var velocidad= 100
...

Pero si quisieramos tener mas de un coche ya es mas dificil. Lo mejor es usar un objeto y agrupar las propiedades sobre una sola variable.

var coche = {
  color : "rojo",
  velocidad : 100,
  ...
}

Ahora podemos acceder a sus propiedades usando el simbolo especial . que tampoco se puede usar como identificador.

coche.color+coche.velocidad // "rojo100" al sumar si hay una cadena todas se tratan como cadenas

Bueno, si, tenemos datos, que son eternos y maravillosos, que los podemos sumar, pero al pricipio dijimos de decirle al ordenador que hacer y si solo puedo sumar números, esto no me parece tan entretenido.

Las funciones o subprogramas son las herramientas de las que disponemos para agrupar nuestras piezas reusables de código. Las definimos usando la palabra reservada function:

var sumar_dos_numeros = function() {
 2+3
}

Hemos puesto con la etiqueta sumar_dos_numero una función de código a la que podemos llamar siempre que queramos. Si escribimos su nombre veremos que nos muestra su código. Para ejecutarlo le añadimos unos paréntesis, ()

> sumar_dos_numeros
function () {
 2+3
}
> sumar_dos_numero()
undefined

Como nos pasaba al principio cuando no conociamos las variables, estos datos pasan sin pena ni gloria por en medio de nuestros gigas de RAM. Podemos indicar el valor devuelto por una función usando la palabra reservada return.

sumar_dos_numeros = function() {
 return 2+3
}

Ahora al ejecutarla ya podemos acceder a su resultado. Tener una función que siempre devuelva lo mismo no parece un gran avance hacia la utilidad de todo este rollo. Podemos pasarle parámetros a nuestras funciones, indicando sus nombres al definirla entre los paréntesis:

sumar_dos_numeros = function(a,b) {
 return a+b
}
numero = 2
sumar_dos_numeros(numero,3) // devuelve 5

Apuntad que podemos guardar nuestras funciones como cualquier otro tipo de dato. Incluso como propiedad de un objeto, probad:

console.log("Hola, Mundo!\n")

Llamamos a la funcion log del objeto console, que es la consola en la que estamos escribiendo nuestro código. Y nos imprime la cadena que le pasamos en ella.

Si quisieramos imprimir una serie de números podriamos escribir una secuencia de instrucciones

console.log(1)
console.log(2)
console.log(3)
...

Pero si este fuera el único acercamiento, mejor apaga y vamonos, si tuvieses que imprimir 100 y no te quiero contar 10000. Una estructura basica en los lenguajes de programación son los bucles, que sirven para repetir instrucciones. Uno de los tipos son los bucles for

for(var i=0; i<10; i++) {
  console.log(i)
}

Este código nos mostrará los números entre 0 y 9, para ello usa una variable i, que actua a modo de contador interno, el bucle se ejecuta mientras sea cierta la expresion i<10, como empieza siendo 0 la primera vez 0<10 y se ejecuta el código encerrado entre las llaves. Cuando termina ejecuta la ultima parte de nuestro bucle for i++, que lo que hace es incrementar nuestro contador en 1, con lo que ahora es 1 y se ejecuta el bloque, se incrementa 2, asi hasta que es 10 y entonces como ya no 10<10 termina nuestro bucle. La última estructura que veremos antes de empezar a sacarle partida a toda esta charla, serán las condiciones, que sirven para tomar decisiones y rutas alternativas durante la ejecución de nuestros programas

for(var i=0; i<10; i++) {
  if(i==0) {
    console.log("primero!")
  } else {
    console.log(i)
  }
}

Ahora conseguimos que cuando se cumpla la condicion que si i es igual (==) a 0, imprimimos una cadena o si no el número. El else es optativo y podemos encadenarlos:

for(var i=0; i<10; i++) {
  if(i==0) {
    console.log("primero!")
  } else if(i==1) {
    console.log(i)
  }
}

Ahora la salida solo seria la cadena y un 1.

Hemos visto unos tipos de datos y algunas estructuras de control básicas, tenemos todos los elementos necesarios para contruir nuestro primer programa, un buscaminas.

  • Andre Dos santos

    Hola cartuchoGL,
    Dificil saber tu nombre.
    Te escribo desde una empresa en Barcelona. Me gustaría saber si te gustaría saber más a cerca de un aoferta de Experto en JS.
    Gracias y un saludo,
    André

  • Anónimo

    Hola Andre Dos santos,
    Ahora me encuentro trabajando en una serie de proyectos, pero si me contactas por twitter, puedo valorarlo.