m2
m2
logoshort
Xwhite
x1
La mecánica de JavaScript

Para aprender a programar en cualquier lenguaje, es necesario comprender la mecánica del mismo, lo que básicamente implica aprender la sintaxis, el funcionamiento, y la aplicación de lo que queremos aprender.

En este caso, he nombrado los tres conceptos (para mí) más descriptivos de lo que considero la mecánica de un lenguaje por orden de importancia, pero para entender la relación que tienen entre sí en el caso de JavaScript, hablare de ellos en el orden inverso al que los he enumerado.

En primer lugar, creo que es fundamental saber para qué sirve este lenguaje, pues normalmente todo conocimiento va de la mano de otros, y eso nos condiciona. En el caso de JavaScript, el objetivo es dar comportamiento o permitir la interacción de un usuario con una página web, y por tanto, eso hace que sea necesario conocer los lenguajes básicos como HTML y CSS).

Bien, una vez tenemos claro para que nos puede servir JavaScript, vamos a hablar de su funcionamiento ¿y a qué me refiero al decir funcionamiento? Pues básicamente al proceso que permite que el usuario interactúe con el programa, que en el caso de JavaScript sería: yo como visitante doy datos a la página, y la página en función de los datos que le doy me da una respuesta. ¿Y cómo se gestiona la entrada, salida, y retención de datos en JavaScript? Pues por ahora, diremos que esto se realiza mediante las variables (almacenes de datos), y las funciones (canales de entrada, construcción, y salida de datos).

Más adelante hablare también sobre el procedimiento que utiliza un código JavaScript para dar respuestas predefinidas por el programador utilizando las variables con condicionales como por ejemplo el famoso “if”, o sobre cómo funcionan los eventos, los operadores etc.

De momento, todo lo que a funcionamiento se refiere, vamos a dejar-lo en las funciones y variables, ya que el resto del “esquema” es mejor ampliarlo a medida que se avanza, de forma que sea posible imaginar sintácticamente aquello a lo que nos referimos conceptualmente.

Ahora, voy a empezar a hablar más en profundidad de lo que son estas dos ideas (funciones y variables), a la vez que añado ejemplos sintácticos.

Vamos a empezar por las variables. En primer lugar, es estrictamente necesario saber que (en JavaScript) hay 3 tipos de variables, los strings (son datos de texto plano que pueden contener números y letras), las variables numéricas (son datos únicamente numéricos, que permiten realizar cálculos si es necesario) y las variables booleanas (son datos de true/false).

Como se ve en el código, para crear una variable únicamente es necesario escribir var nombre_de_la_variable; y posteriormente, con empezar una línea de código con el nombre de la variable y poner un “=” ya puedes dar un valor a dicha variable, aunque también puedes darle valor en la línea en la que la defines (ejemplo a continuación).

Es importante saber que la diferencia entre poner un número en un string y en una variable numérica está en que en el string siempre se entrecomilla el valor, en cambio en las variables numéricas no.

*Las variables JavaScript no se registran en una base de datos, se almacenan en la memoria RAM del usuario que está ejecutando el programa web, por tanto al actualizar la página todo lo que ha registrado el usuario se pierde, puesto que el objetivo es dar datos para obtener una respuesta a tiempo real. Para poder almacenar datos en una BDD es necesario utilizar PHP.

Vamos ahora, a hablar de las de las funciones. Como he dicho antes las funciones se encargan de permitir que un objeto recoja datos al usuario, y también de que posteriormente en base a estos datos, se cree una respuesta (en los casos más simples la respuesta puede ser mostrar la información almacenada en una variable).

JavaScript es un lenguaje orientado a objetos, y por tanto lo que programamos consiste en dar funcionabilidad a estos, permitiendo así que la interacción gráfica del usuario con el programa, esto es posible como he dicho utilizando las funciones.

Bien, pues como hemos visto en el esquema, hay funciones como el prompt(), o el alert() que ya están predefinidas, pero en el momento en el que queramos hacer algo mínimamente útil tendremos que crear las nuestras propias. Veamos un ejemplo.

En este caso lo primero que he hecho ha sido determinar con cuantas variables voy a trabajar en un principio (esto puede resultar complicado si se está empezando, pero en cuanto uno se familiariza con el lenguaje ya es mucho más fácil). Al tener como fin el crear un “programa” que me calcule el área de un cuadrado, automáticamente yo sé que estoy trabajando con dos datos diferentes, el lado del cuadrado (que nos lo dará el usuario), y el área (que lo calcularemos en base a la primera variable lado_del_cuadrado).

En la siguiente línea, vemos ya que estoy creando una nueva función, en este caso, la función será el cálculo que nos permitirá dar valor a la segunda variable, el área. Para ello, primero escribo function y a continuación el nombre que le voy a dar a la función, después creo un parámetro llamado “numero” que será el valor en base al cual luego trabajemos, es decir, primero le decimos a la función que vamos a trabajar con el valor que ocupe el lugar del concepto abstracto “numero”, y luego dentro de los siguientes símbolos: {} le indicaremos en que consiste ese parámetro que hemos creado

Dentro de las llaves {}  introducimos en que consiste la función. Vemos escrito el termino return, esto quiere decir que vamos a devolver o a redefinir el parámetro sobre el que trabajemos dando así un resultado, a continuación indico el cálculo que quiero realizar.

Una vez creada la función (en este caso muy sencillita), ya podemos empezar a utilizarla, pero para poder operar, primero tenemos que dar un valor numérico a la variable sobre la que calculemos (lado_del_cuadrado). Para eso, vamos a pedirle al usuario con la función prompt() que nos de esa información. *El texto del paréntesis de la función (en el caso de prompt() es el mensaje que acompañara el aviso emergente).

Bien, ahora vamos ya con la parte fundamental del código, la igualdad que nos dará el resultado, un resultado que almacenaremos en la variable area_del_cuadrado, y que lo calcularemos con la función que hemos creado basándonos en el número que tenga almacenado lado_del_cuadrado, cuyo valor sustituirá el parámetro conceptual “numero”.

Finalmente, utilizamos la última función del programa para crear una respuesta alert(), que como he dicho antes, puede ser simplemente mostrar lo que hay dentro de una variable, en este caso el resultado previamente operado por la función personalizada.

Quiero dejar claro, que aunque haya funciones predefinidas que aparentemente por sí solas ya permitan la entrada o salida de datos, estas igualmente siempre trabajan con objetos (generalmente cajas de texto).

En este artículo hemos visto cómo funciona JavaScript. Más adelante profundizare más en el esquema sobre el que hemos trabajado en este caso, puesto que la mecánica ha quedado clara, pero el lenguaje tiene muchísimos conceptos que no he explicado.

Si tienes cualquier duda, puedes hacérmelo saber en contact@sannynotes.com

 

RECOMENDADO
Conecta PhpMyAdmin con dreamweaver y configura tu BDD
Tras finalizar el proyecto, hemos sido galardonados con el primer premio de nuestra categoría
¿Quieres saber más sobre el desarrollo de software? No te lo pierdas
Té explico cómo crear un menú, que se despliegue haciendo un clic...
Después de un año regresa, esta vez en Barcelona...
Este es mi blog personal, en el cual comparto contenido acerca de mis proyectos, escribo sobre el desarrollo digital y de software, y sobre todo aquello que me apasiona. ¡Espero que disfrutes! Bienvenido.
© 2017 sannynotes · Jordi San Nicolás