¿Cómo se programan los ordenadores? Magia.

Conceptos básicos

¡¡Comunicación!!

Elfos, enanos y hobbits no podrían entenderse si no fuera porque en la Tierra Media comparten un lenguaje común.

Lo mismo les pasa a los ordenadores que se comunican en internet. Esa comunicación es posible porque existen lenguajes de programación que son comunes a todos ellos independientemente del país en el que se programen.

Programar consiste en hacer que los ordenadores hagan lo que tú quieres que hagan. Para eso necesitas aprender alguno de los lenguajes que entienden los ordenadores.

Los lenguajes humanos permiten combinar palabras y frases de muchas maneras, para poder expresar ideas muy diferentes.

Los lenguajes de programación, aunque mucho mucho más simples gramáticalmente, siguen la misma filosofía.

Javascript es probablemente uno de los lenguajes más simples y breves en cuanto a su vovcabulario. Al mismo tiempo, también es uno de los más expresivos y flexibles. Permite decir muchas cosas con muy pocas palabras, si sabemos ordenarlas de la forma adecuada.

También es uno de los lenguajes más malinterpretados y peor entendidos por su base de usuarios. Tiene unas cuantas esquinas mal iluminadas, en las que a veces hay trampas muy peligrosas ocultas entre las sombras.

Nosotros vamos a intentar quedarnos en la parte bien iluminada del escenario, quedarnos con lo mejor del lenguaje. Ocasionalmente haremos alguna incursión en las sombras, pero sólo para que sepáis que existen y sepáis evitarlas.

En las siguientes páginas vamos a hablar en detalle de vocabulario, sintaxis y gramática. Sí, aunque no lo creáis la programación en cierto sentido es más de letras que ciencias.

En lengua nos armamos de un vocabulario básico para poder hablar de como organizar palabras, expresiones y frases. Conceptos como sujeto, predicado, o complemento directo nos resultan a todos familiares. Sin ellos no os hubierais podido entender con vuestro profe de lengua.

Lo mismo os va a pasar a vosotros conmigo. Para que nos entendamos cuando os ponga un ejercicio, os explique algo, o me preguntéis algo, tenemos que hablar un lenguaje común.

El lenguaje del que hablo requiere que os aprendáis algunos términos que se utilizan habitualmente en programación, como: sentencia, expresión, operador, valor, variable, función, etc.

Al principio de cada capítulo encontraréis una lista del vocabulario nuevo que debéis aprender para que nos entendamos.

Para fijar bien los conceptos y que tengáis un lugar donde buscar el significado de cada uno de ellos, encontraréis un glosario con todos ellos explicados brevemente al final de cada cada capítulo.

Si falláis en la tarea de aprenderos éste vocabulario básico tendremos un problema muy grave.

Vosotros seréis incapaces de aprobar la asignatura y yo me pondré muy triste 😦

¡Venga!, no seáis perezosos. Concededme este capricho y aprendeos el vocabulario básico, que os prometo que va a ser lo único que os tengáis que aprender de memoria.


El laberinto

Acerca de la programación

Aprender a programar está chupado. ¡En serio! ¿No veis lo fácil que es para mi?

¿No cuela?

¡Vaya! Me habéis pillado.

Está bien, admito que aprender a programar no es fácil. Es verdad que las reglas básicas son sencillas, pero a medida que construimos un programa estamos creando nuevas reglas y estás y su interrelación dentro de cada programa tienden (caprichosas ellas) a hacerse más y más complejas a medida que el programa crece. Así que la sensación de estar perdido dentro de su propio laberinto no es extraña para el que empieza a programar.

No os voy a engañar (bueno, a veces sí ;P ). Habrá ocasiones en las que os sentiréis terriblemente frustrados dentro de ese laberinto. Pero hay un truco que debéis recordar siempre.

El hilo de Ariadna

En el Laberinto del Minotauro, Teseo tenía el hilo de Ariadna. Nosotros tenemos el hilo de nuestro propio código. Si lo seguimos paso a paso, sin perder la calma y entendiéndolo, siempre encontraremos la salida.

La negrita no es accidental. Entender es fundamental. Para aprender a programar no hay que aprender casi nada de memoria, pero sin entender las reglas y como combinarlas estaremos siempre perdidos.

Lo que sí que os prometo es que programar es terriblemente divertido cuando le coges el tranquillo. ¡Y tremendamente creativo! Piensa en lo que puedes llegar a hacer.

Photoshop, Maya, Chrome, Firefox, Twitter, WhatsApp, Youtube, o cualquiera de los videojuegos con los que pasais tan buenos ratos están construidos usando lenguajes de programación.

¿No os gustaría ser capaces de participar en creaciones como estas?

¡A mi sí!

Herramientas

Brackets y jslint

Brackets es un editor para desarrollo web fantástico. Ha sido creado y está soportado por la comunidad Open Source.

Es el que os recomiendo para empezar, por su facilidad de uso y configuración, pero hay otros muchos (Sublime Text, Notepad++, etc.). No dudes en investigarlos por tu cuenta si no te convence Brackets.

La consola del navegador es vuestra amiga

Todos los navegadores modernos integran varias herramientas de desarrollo para ayudar al programador en su tarea.

No seáis tímidos y usadlas. No tenéis más que pulsar F12. No importa que navegador estéis usando, todos ellos sucumbirán al hechizo y os mostrarán sus herramientas de desarrollo.

Después de pulsar F12, veréis una pestaña denominada console que deberíais tener siempre a la vista cuando estéis programando en javascript.

Console en Chrome

La consola en Chrome

Console en Firefox

La consola en Firefox


Valores, tipos de dato y operadores

  • Conceptos a aprender
    • Valores
    • Tipos de dato
    • Operadores

Ya, es verdad que el título no es muy atractivo. Tampoco lo sería cordones, tacos y medias en un libro sobre futbol ¿no? Pero para jugar cómodo hay que ir bien equipado ¿verdad?

Para programar necesitamos dominar los elementos básicos de los que están hechos los programas. Dentro del mundo del procesador sólo hay datos. Bueno, también hay algo de silicio, pero no seamos tiquismiquis.

Básicamente, programar consiste en leer datos, modificar datos, guardar datos, presentar datos. Los datos lo son todo. Y los ordenadores los representan intérnamente en forma de ceros y unos (cada uno de ellos es 1 bit).

Un ordenador moderno típico posee más de 30 billones de bits almacenados en su memoria volatil (la memoria RAM), y muchísimos más en su memoria de almacenamiento permanente (disco duro o equivalente).

Para poder trabajar con ese océano de bits sin ahogarse en los datos, podemos separarlos en pequeños trozos de información.

Cada pequeño grupo de bits que representa una unidad de información es un valor.

Puede ser un número en la calculadora, el nombre de una persona en una base de datos, o un pixel de una imágen. Aunque todos los valores están compuestos por bits, cada uno puede jugar un papel distinto en un programa.

Cada valor tiene, por tanto, un tipo que determina su rol en ese mar de bits.

En Javascript hay 6 tipos de dato básicos: números, cadenas de texto, booleanos (verdadero o falso), objetos, funciones y valores indefinidos.

A continuación hablaremos de cada uno de ellos en detalle

Números

No hay mucho misterio aquí, los valores numéricos son… números. Escribe un número en un programa en Javascript y harás que su grupo de bits (ceros y unos que lo representan) se materialicen en el mundo real, flotando el limbo que hay entre tu frente y la pantalla del ordenador 😉

Por ejemplo,

    13

es un número y da muy buena suerte.

Javascript usa 64 bits para almacenar cada número (independientemente de cuantos dígitos o decimales tenga). 64 bits permiten representar 264 números diferentes. Eso son muchos más de 1019 (un 1 seguido de 19 ceros) números diferentes.

Sí, es muchísimo.

Otros lenguajes definen diferentes tipos de números que usan menos y aveces más bits, con la intención de que el programador utilice el tipo de número adecuado, sin ocupar más bits de memoria de los estrictamente necesarios.

Esto era muy importante hace años cuando la memoria de los computadores era muy limitada, pero hoy en día no tiene mucho sentido, a no ser que estemos programando aplicaciones que demanden mucha mucha memoria. En ese caso, y sólo si el programa se va a ejecutar en un móvil, quizás tenga sentido tener cuidado con qué tipo de valores numéricos usamos en nuestro programa.

En cualquier caso, en Javascript no tenemos más opciones, sólo existe este tipo de número.

Los números no exactos se escriben usando un punto para indicar donde empiezan los decimales:

    9.81

Para expresar valores muy grandes o muy pequeos también se puede utilizar notación ciéntifica:

     2.793e9

Este número es 2.793 x 109 = 2 793 000 000.

Una de las cosas que los programadores con poca experiencia suelen olvidar es que la forma en la que se almacenan los valores en los ordenadores (grupos de bits) hacen que tengan una determinada precisión. O sea, una precisión no infinita.

Esto puede provocar errores en los cálculos que hacen los programas, a veces muy graves, especialmente si el programa se equivoca a favor del banco al darnos el saldo de nuestra cuenta.

Nosotros no nos vamos a preocupar demasiado por ello. Los programas que haremos durante el curso van a ser fundamentalmente de entretenimiento. Pero conviene tenerlo siempre presente, aún así esta imprecisión nos puede jugar una mala pasada.

Recuerda:

Si el valor de un número es un entero, no hay problema

Si el valor de un número tiene decimales, es probable que no sea super, super exacto.

Aritmética. Conoce a tus enemigos, digooo, a tus primeros operadores.

Sí, ya lo sé. Estarás pensando: Esto va de mal en peor. Ahora la clase de programación se está empezando convertir en una clase de matemáticas. Estás acabando de animarme a seguir leyendo, profe…

¡Ay! Lo siento. Los datos son ceros y unos, la base del mundo digital (por cierto digital viene de dígito, número). Los números se suman, restan, multiplican y dividen. Tenemos que aprender a hacer operaciones con los datos y éstas son las más básicas.

Además te gustará saber que todos los lenguajes de programación tienen una calculadora incrustada en el… (¡Uy! casi se me escapa)

O sea que no te voy a enseñar matemáticas de nuevo, eso ya pasó. Lo que te voy a enseñar es como escribir las operaciones para que las haga el programa por ti. Mola ¿no?

Y de paso introducimos el concepto de operador que es muy importante en programación.

Un operador es una especie de máquina que realiza operaciones. Toma uno o dos valores y produce uno nuevo.

El operador + toma los dos valores que tiene a izquierda y derecha y los suma, produciendo un nuevo valor. Por ejemplo, si escribimos en un programa:

100 + 7

Recordatorio:

Puedes probar todos los ejemplos que voy a poner a partir de ahora directamente en la consola de Chrome o Firefox. De hecho, te recomiendo que lo hagas 🙂

El operador + producirá el valor 107. De hecho, en el programa donde la expresión anterior esté escrita, al ejecutarse el programa, ésta expresión será sustituida por valor del resultado.

Se dice que el operador + devuelve el valor de la suma de los dos números y *sustituye a la expresión.

Este concepto de sustitución será muy importante más adelante, cuando hablemos de funciones que devuelven un valor. Los operadores y las funciones, aunque tienen una sintaxis muy diferente, tienen esto en común, la capacidad de devolver un valor.

Creo que no hace falta que te explique lo que hacen los operadores - (resta), * (multiplicación), y / (división), ¿verdad?

Si creo que hace falta que tengáis claro que ocurre primero cuando escribimos expresiones como:

3 + 5 * 4

Aquí la regla es igual que en matemáticas, por si no te acuerdas: multiplicación y división siempre se hacen primero. O sea que la expresión anterior devuelve 23.

Si queremos cambiar este orden de precedencia debemos usar paréntesis. Así:

(3 + 5) * 4

devuelve 32.

Nos queda un operador aritmético por ver: %

No, no calcula el tanto por ciento. Es el operador módulo y devuelve el resto de la división del valor que tenga a su izquierda entre en valor que tenga a su derecha.

O sea que

10 % 6

devuelvolverá 4, que es el resto de la división. Y

6 % 2

devolverá 0, ya que 6 / 2 es 3 exáctamente y el resto es 0.

La prioridad del operador % es la misma que la de los operadores *, y /.

Números especiales

En Javascript hay tres valores especiales a los que se considera números, aunque no se comportan como números normales:

Infinity, -Infinity y NaN.

Infinity - 1 devuelve Ìnfinity, lo mismo que Infinity + 1. Si eres de los que les va las emociones duras que tienen que ver con las matemáticas del infinito, no pongas demasiada confianza en estos números, no operan de forma matemática correcta. Existen únicamente para comprobar si hemos dividido un valor numérico entre cero, que como sabrás es una operación que hay que evitar a toda costa en la mayoría de los casos. Y si no hay forma de hacerlo, al menos nuestro programa debería ser capaz de detectar esa situación para corregirla, o escupir un error y admitir ante el usuario que no somos lo suficientemente buenos como programadores y aceptar la vergüenza.

Nuestro siguiente amigo es NaN que es el valor que toma algo que debería ser un número pero que resulta que no lo es. Obtendrás este resultado cuando intentes dividir 0entre 0, sumar Infinityy -Infinity u operaciones similares que no den un resultado preciso o con significado.

Cadenas de texto

Las cadenas de texto, cadenas o strings en inglés, son el tipo de valor que nos permite explayarnos y aburrir al personal con textos tan largos como queramos.

Una cadena de texto se distingue de todos los demás valores porque va encerrada entre comillas simples o dobles:

"Mi mama me mima mucho"
'Mi profe me obliga a pensar demasiado' 

Cualquiera de las dos opciones es válida, siempre que si se abre una cadena con un tipo de comilla se cierre con el mismo tipo.

Mete cualquier valor entre comillas y Javascript lo convertirá en un valor de cadena de texto. Así que ten cuidado porque 5 es un número y "5" es una cadena de texto, aunque para ti, ser humano, pueda significar lo mismo, para Javascript no.

Sin embargo, hay algunos valores que es más difícil expresar como cadena de texto. ¿Como pongo unas comillas dentro de una cadena? ¿Así?

"Me pregunto cómo se pondrán unas " dentro de una cadena de texto"

Las comillas sirven precisamente para indicar que lo que hay entre ellas es una cadena. Si el intérprete de Javascript se encuentra dentro de un par de ellas con otras comillas del mismo tipo, ¿no pensará que estoy cerrando la cadena, indicando que ahí es donde acaba la misma?

Correcto esto es lo que pasa.

Si hay más texto detrás, producirá un error, porque cualquier texto fuera de un par de comillas es interpretado como una palabra reservada, un nombre de variable o una función.

Es aquí donde nos podemos aprovechar de que hay dos formas de poner límite a una cadena de texto. Si queremos poner unas comillas dobles dentro de una cadena podemos utilizar la comilla simple como delimitador:

'Me pregunto cómo se pondrán unas " dentro de una cadena de texto'

Si queremos utilizar una comilla simple dentro de una cadena, podremos hacerlo, siempre que hayamos usado comillas dobles para delimitar dicha cadena de texto.

"Me pregunto cómo se pondrá una ' dentro de una cadena de texto"

Los dos ejemplos de cadena anteriores son válidos y no producen ningún error, como el anterior a ellos.

Existe un tercer método de resolver este dilema, y éste es la solución también otros problemas que nos podemos encontrar al querer escribir ciertos caracteres dentro de una cadena de texto. Uno de ellos es el caracter de salto de línea, el otro es el de tabulador. Sí, ambos se codifican como cualquier otro caracter internamente, pero para expresarlos en Jvascript necesitamos dos. El primero ha de ser la contrabarra (\), también denominado caracter de escape.

  • Si después de el caracter de escape escribimos una n, o sea si esceibimos \n, estarémos introduciendo un salto de línea en la cadena de texto.Por ejemplo:
    "Esto es una línea. \nY esto es otra, dentro de la misma cadena de texto."

    El texto contenido en la cadena anterior sería en realidad:

    Esto es una línea.
    Y esto es otra, dentro de la misma cadena de texto.
  • Si después de el caracter de escape escribimos una t, o sea si esceibimos \t, introduciremos un tabulador en la cadena de texto.
    "\t Me gusta el texto tabulado."

    O sea:

          Me gusta el texto tabulado.

    Fíjate en que el texto anterior empieza más a la derecha de lo normal, porque tiene un tabulador delante.

  • Y si detrás de esa contrabarra ponemos unas comillas, \", impediremos que se acabe la cadena de texto (si la habíamos empezado con con unas comillas). Lo mismo se aplica a la comilla simple, '.Por ejemplo:
    "Y Pedro dijo: \"¡Que viene el lobo!\", pero ya nadie le creyó..."

    Produciría una cadena como esta:

    Y Pedro dijo: "¡Que viene el lobo!", pero ya nadie le creyó...

Concatenado de cadenas

Concatenar significa unir. Aunque parezca confuso, todos los lenguajes suelen utilizar el operador + para unir también cadenas:

"con" + "ca" + "te" + "nar"

Devolverá la cadena:

concatenar

Puede surgirnos la duda de cuando + funciona como operador suma y cuando como operador de concatenación.

Es muy fácil, sólo si está rodeado de valores numéricos funciona como operador suma.

Si cualquiera de los valores a izquierda o derecha es una cadena funcionará como operador de concatenado.

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