DWEC02. - Estructura Del Lenguaje Javascript
DWEC02. - Estructura Del Lenguaje Javascript
Caso práctico
En BK Programación han decidido ponerse manos a la obra y Antonio comienza a
estudiar los fundamentos del lenguaje JavaScript, (siempre bajo la tutoría de Juan,
que estará ahí para ayudarle en todo momento).
En la unidad anterior Antonio analizó las posibilidades de los lenguajes de script, decidió
qué lenguaje emplearía para la programación en el entorno cliente y vio cómo insertar en
la página HTML dicho lenguaje de script.
Cómo han decidido emplear el lenguaje Javascript, lo primero que hará Antonio es ver
los fundamentos de dicho lenguaje, y cuál es la estructura básica para comenzar a
programar lo más pronto posible.
Ada está muy entusiasmada con este proyecto y está convencida de que Antonio será
capaz de hacer ese trabajo sin ningún problema.
En esta unidad se hace una introducción a los fundamentos de JavaScript. Para ello se hará hincapié
en la definición de variables, los tipos de datos soportados en JavaScript, conversiones, los
operadores y terminaremos con las estructuras de control y bucles.
Al final de la unidad realizaremos nuestro primer ejemplo de JavaScript poniendo en práctica algunos
de los contenidos aquí vistos.
Caso práctico
Como creo que a cualquiera, a mí me gusta saber de dónde venimos y, en la medida de lo posible,
hacia dónde nos dirigimos. Por ello, te muestro esta línea de tiempo en la que se incluyen los
principales hitos en el desarrollo y estandarización de JavaScript.
Mostrar
— Evolución de JavaScript
‒ Mayo de 1995
‒ Septiembre de 1995
‒ Año 1997
‒ Año 1998
‒ Año 1999
‒ Año 2011
‒ Año 2015
Pero, seguramente, algunos os estaréis preguntando: ¿qué es JavaScript o ECMAScript y qué nos
aporta?
La respuesta es fácil: es simplemente otra capa más en el ciclo de vida del desarrollo de nuestras
páginas web. Como bien ya conocéis, hasta ahora estabais utilizando una capa para la estructura y
otra para la presentación; pues JavaScript añade otra capa para el desarrollo web que es la del
comportamiento.
HTML: es el lenguaje que define la estructura para dar un sentido al contenido web,.
CSS: es el lenguaje utilizado para formatear cada uno de los elementos o grupos de elementos.
JavaScript: Es un lenguaje de programación que te permite controlar el comportamiento de tu
página web. ¡No sabes lo que podrás lograr utilizando JavaScript!
Pasemos ya a ver cómo utilizar JavaScript, que seguro que estás impaciente.
Autoevaluación
¿Quién desarrolló JavaScrip?
Microsoft.
Oracle Corporation.
Brendan Eich.
Muy bien. El nombre original fue Mocha, luego LiveScript, para pasar a ser
finalmente JavaScript.
Solución
1. Incorrecto
2. Incorrecto
3. Opción correcta
1.1.- Comentarios en el código.
A la hora de programar en cualquier lenguaje de programación,
es muy importante que comentes tu código. Aunque hoy día se
aconseja que el propio código sea el que esté
autodocumentado. Es decir, si una serie de sentencias realizan
una determinada acción o función, es mejor y más claro crear
una función para dicho propósito con un identificador lo
suficientemente claro, que poner el comentario en el código.
Pero todo eso lo veremos más adelante.
Los comentarios ocupan espacio dentro de tu código de JavaScript, por lo que cuando alguien se
descargue vuestro código necesitará más o menos tiempo, dependiendo del tamaño de vuestro
fichero.
JavaScript permite dos estilos de comentarios: de una sola línea o de varias. Ejemplos de comentarios
de una única línea o de varias líneas:
// Mi primer comentario
/*
Mi segundo comentario,
éste un poco más largo.
*/
1.2.- Constantes y variables.
Una variable es un contenedor de un valor de un tipo dado al que le damos
un identificador. El valor de una variable puede cambiar en el tiempo.
También existen las constantes que, al contrario de las variables, su valor
no puede cambiar.
dicha variable para que nuestro código sea legible y entendible. También es
conveniente seguir la convención lower camel case en la que se utilizan minúsculas para nombrarlas y
si es la unión de varias palabras éstas se unen y se distingue entre palabras utilizando la primera letra
en mayúscula.
Antes de utilizar una variable deberemos declararla y luego darle un valor, ya que si no su valor será
undefined.
Para declarar constantes y variables debemos utilizar las palabras reservadas const, var y let (la primera
para las constantes y las otras para las variables en las que ahora nos detendremos).
const pi = 3.14;
var edad = 18;
let nombre = "Bob Esponja";
La palabra var declara una variable y se sigue utilizando por motivos históricos ya que genera algunos
problemas que viene a solucionar let.
Debido al hoisting, era posible declarar una variable con var después de ser utilizada y eso
funcionaba. Por ejemplo:
edad = 18;
...
...
var edad;
Ese código era válido, pero la verdad es que se hace confuso y más complejo de entender. Pues el
hoisting ya no funciona con let, por lo que para utilizar una variable que vamos a declarar con let,
primero debemos declararla o de lo contrario nos dará un error.
let edad;
...
edad = 18;
Además con el uso de var, una variable se podía declarar varias veces y era correcto, pero como ves
en el ejemplo vuelve a ser confuso.
JavaScript es un lenguaje "débilmente tipado", lo cual significa que, a diferencia de otros lenguajes, no
es necesario especificar el tipo de dato que vamos a almacenar en una variable y además éste puede
cambiar. Esto deberíamos evtarlo para evitar confusiones.
let edad;
edad = '18'; // En este caso contiene una cadena
edad = 18; // En este caso contiene un número
Autoevaluación
Para definir una variable hoy día es más conveniente utilizar var que let. ¿Verdadero
o falso?
Verdadero Falso
Falso
Es mejor que nos acostumbremos a utilizar siempre let por las ventajas que
hemos mencionado.
1.3.- Tipos de datos.
Funciones: Esto lo veremos más adelante, así que por ahora no os liaré mas.
Autoevaluación
Verdadero Falso
Falso
Los arrays en JavaScript comienzan en el índice 0.
1.3.1.- Conversiones de tipos de datos.
Aunque los tipos de datos en JavaScript son muy sencillos, a veces te podrás
encontrar con casos en los que las operaciones no se realizan correctamente, y
eso es debido a la conversión de tipos de datos. JavaScript intenta realizar la
mejor conversión cuando realiza esas operaciones, pero a veces no es el tipo
de conversión que a ti te interesaría.
Si uno de esos números está en formato de cadena de texto, JavaScript lo que hará es intentar
convertir el otro número a una cadena y los concatenará, por ejemplo:
Esto puede resultar ilógico pero sí que tiene su lógica. La expresión se evalúa de izquierda a derecha.
La primera operación funciona correctamente devolviendo el valor de 3 pero al intentar sumarle la
cadena de texto 3, JavaScript lo que hace es convertir ese número a una cadena de texto y se lo
concatenará al otro 3.
Por ejemplo:
Si lo que deseas es realizar la conversión de números a cadenas, es mucho más sencillo, ya que
simplemente tendrás que concatenar una cadena vacía al principio, y de esta forma el número será
convertido a su cadena equivalente:
Cualquier valor sobre el cuál se realiza una acción (indicada por el operador), se
denomina un operando. Una expresión puede contener un operando y un
operador (denominado operador unario), como por ejemplo en b++, o bien
dos operandos, separados por un operador (denominado operador binario),
como por ejemplo en a + b. Incluso exsite algún operador ternario, como luego
veremos. Everaldo Coelho (GNU/GPL)
Comparan los valores de 2 operandos, devolviendo un resultado de true o false (se usan
extensivamente en sentencias condicionales.
Comparación.
== != === !== > >= < <=
Unen dos operandos para producir un único valor que es el resultado de una
operación aritmética u otra operación sobre ambos operandos.
Aritméticos.
+ - * / % ++ - - +valor -valor
Asignación.
= += -= *= /= %= <<= >= >>= >>>= &= |= ˆ = []
Lógicos.
&& || !
Bit a Bit.
& | ˆ ∼ << >> >>>
Tipo Qué realizan
Objeto.
. [] () delete in instanceOf new this
Otros.
, ?: typeof void
Debes conocer
En el siguiente enlace podrás encontrar más información sobre los operadores de
JavaScript, por lo que no nos detendremos más en ellos, aunque sí veremos algunos
ejemplos que merecen la pena destacar
Operadores en JavaScript
1.4.1.- Algunos operadores de interés.
Plantillas de cadenas (template string)
Con ES6 podemos definir cadenas de una forma más sencilla que como
estábamos haciendo hasta ahora. Fíjate en este ejemplo, en el que para utilizar
la plantilla de cadenas utilizamos la comilla invertida ` y ponemos las variables
encerradas entre ${}.
En ES6 también podemos definir cadenas en varias líneas, sin necesidad de utilizar el operador de
concatenación +.
Desestructuración
En ES6 también tenemos nuevas formas de asignar valores a variables a partir de un array.
?:
typeof
Este operador unario se usa para identificar el tipo de una variable o expresión.
let indefinido;
let cadena = '5'
let numero = 5;
console.log(typeof indefinido); // Muestra por consola: undefined
console.log(typeof cadena); // Muestra por consola: string
console.log(typeof numero); // Muestra por consola: number
1.5.- Condiciones y bucles.
En esta sección te mostraremos cómo los programas pueden tomar decisiones,
y cómo puedes lograr que un script repita un bloque de instrucciones las veces
que quieras.
Cuando te levantas cada día tomas decisiones de alguna clase; muchas veces
ni te das cuenta de ello, pero lo estás haciendo. Por ejemplo, imagínate que vas
a hacer la compra a un supermercado; desde el momento que entras en el
supermercado ya estás tomando decisiones: ¿compro primero la leche o
compro la verdura?, ¿ese precio es barato o es caro?, ¿el color de ese tinte es Everaldo Coelho (GNU/GPL)
azul claro u oscuro?, ¿tengo suficiente dinero para pagar o no?, ¿me llegan
estos kilogramos de patatas o no?, ¿pago en efectivo o con tarjeta?, etc.
Otras veces repites un ejercicio físico un número determinado de veces para estar en forma. O realizas
cambios a un documento hasta que crees que está perfecto. O preguntas a tus amigos mientras uno
no te responda que él es el que tiene ese libro que tanto querías leer.
Es decir, tomamos innumerables decisiones a lo largo del día y la mayor parte de las veces no nos
damos ni cuenta de ello. Pero también realizamos acciones repetitivas sin casi darnos ni cuenta.
En las siguientes secciones, verás cómo puedes ejecutar unas u otras instrucciones, dependiendo de
ciertas condiciones, y cómo puedes repetir una o varias instrucciones, las veces que te hagan falta.
1.5.1.- Estructuras de control.
En los lenguajes de programación, las instrucciones que te permiten
controlar las decisiones y bloques de ejecución, se denominan
"Estructuras de Control". Una estructura de control, dirige el flujo de
ejecución a través de una secuencia de instrucciones, basadas en
decisiones simples y en otros factores.
Sentencia if
if (condicion) {
sentencias;
}
Si la condición evalúa a true se ejecutarán las sentencias dentro del bloque encerrado entre llaves.
Sentencia if - else
En este tipo de construcción, decidimos si ejecutar una secuencia u otro en función de que la condición
evalúe a true o false.
if (condicion) {
sentenciasV;
} else {
sentenciasF;
}
Verdadero Falso
Falso
La claúsula else puede estar presente o no.
1.5.2.- Bucles.
Los bucles son estructuras repetitivas, que se ejecutarán un número
de veces fijado expresamente, o que dependerá de si se cumple una
determinada condición.
Bucle for.
Primero se ejecuta la expresión inicial o de inicialización. En cada repetición del bucle se evalúa la
condición y si ésta evalúa a true, se ejecutan las instrucciones, se ejecuta la sentencia de incremento y
se repite el proceso de evaluación, ejecución e incremento hasta que la condición evalúe a false.
let numero = 5;
for (let i = 0; i <= 10; i++) {
console.log(numero * i);
}
Bucle while.
Este tipo de bucles se utilizan cuando queremos repetir la ejecución de unas sentencias un número
indefinido de veces, siempre que se cumpla una condición. Es más sencillo de comprender que el
bucle for, ya que no incorpora en la misma línea la inicialización de las variables, su condición para
seguir ejecutándose y su actualización. Sólo se indica, como veremos a continuación, la condición que
se tiene que cumplir para que se realice una iteración o repetición.
while (condicion) {
sentencias;
}
Se ejecutan las sentencias mientras la condición evalúe a true. Por tanto, dentro de dichas sentencias
deberá darse la situación para que en algún momento la condición evalúe a false o de lo contrario
estaríamos ante un bucle infinito.
let numero = 5;
let i = 0;
while (i <= 10) {
console.log(numero * i);
i++;
}
Bucle do - while.
Este tipo de bucle es la última de las estructuras para implementar repeticiones de las que dispone
JavaScript, y es una variación del bucle while visto anteriormente. Se utiliza generalmente, cuando no
sabemos el número de veces que se habrá de ejecutar el bucle. Es prácticamente igual que el bucle
while, con la diferencia, de que sabemos seguro que el bucle por lo menos se ejecutará una vez.
do {
sentencias;
} while (condicion);
Al igual que en el caso anterior, siempre debe darse que las sentencias en el algún momento hagan
que la condición evalúe a false, para evitar el bucle infinito.
let numero = 5;
let i = 0;
do {
console.log(numero * i);
i++;
} while (i <= 10);
También existen otras funciones para recorrer colecciones u objetos iterables que veremos más
adelante (foreach, map, filter, reduce, ...).
Autoevaluación
Un bucle for es imposible que se convierta en un bucle infinito ya que lleva
implícita la sentencia de incremento. ¿Verdadero o falso?
Verdadero Falso
Falso
Eso depende de la condición y la sentencia de incremento y si no lo hacemos
bien sí es posible que se convierta en un bucle infinito.
1.6.- Ejemplo sencillo con JavaScript.
En este apartado pretendo mostrarte un ejemplo completo y totalmente
funcional de lo visto hasta ahora.
Cierto es, que para entender el ejemplo tendrás que hacer algunos actos de fe,
ya que hay cosas que aún no hemos explicado, pero que creo que son
fácilmente entendibles. La idea es que vayas familiarizándote con el entorno que
utilices, con la forma de trabajar y sobre todo con la forma de pensar.
Everaldo Coelho (GNU/GPL)
Si hay alguna cosa que aún no entiendas no te desesperes, pregunta en el foro,
que encantado te responderé a tus dudas. Pero lo que sí quiero es que te
centres en las cosas que ya conoces y cómo y por qué las he utilizado. Os animo a todos y todas a
que implementéis este ejemplo, utilizando el editor o entorno de vuestra preferencia, lo visualices en el
navegador o navegadores que tenéis instalados y que vayáis familiarizándoros con todo.
El ejemplo es muy simple. Un formulario en el que se pide al usuario que introduzca un número entre 0
y 10, ambos inclusive, y una vez que envíe el formulario le muestra la tabla de multiplicar para dicho
número introducido.
Una vez vista la estructura, pasemos a ver el formulario y la inclusión de nuestro fichero .js en el
archivo index.html.
1 <!DOCTYPE html>
2 <html lang="es-ES">
3 <head>
4 <meta charset="UTF-8">
5 <title>Tabla de multiplicar</title>
6 <script src="js/tablaMultiplicar.js"></script>
7 </head>
8 <body>
9 <h1>
10 Tabla de multiplicar
11 </h1>
12 <form onsubmit="mostrarTabla()">
13 <label for="numero">Introduce el número:</label>
14 <input id="numero" type="number" required/>
15 <input type="submit" value="Mostrar tabla" />
16 </form>
17 <div id="tabla">
18 </div>
19 </body>
20 </html>
Como podéis apreciar, simplemente incluimos el archivo tablaMultiplicar.js para que su contenido esté
accesible. Creamos la estructura del documento, en la que básicamente creamos dos elementos:
Un formulario para que el usuario introduzca el número del que quiere visualizar su tabla de
multiplicar. Este formulario, cuando es enviado (aunque no es enviado a ningún lado,
simplemente se valida en lado del cliente), mediante el evento onSubmit del mismo, simplemente
llama a la función mostrarTabla() que está definida en nuestro archivo tablaMultiplicar.js.
Un bloque vacío cuyo id es tabla y en el que luego mostraremos los resultados.
Primero de todo previene que el evento se propague. Todo eso lo entenderás mejor más
adelante, pero si no lo hiciese, al terminar limpia los campos y no nos deja ver el resultado (te
animo a que comentes dicha línea -línea número 2- para que veas lo que sucede).
Pasa el valor del campo de texto a número y luego comprueba mediante una sentencia
condicional si está entre los valores aceptados o no.
Si lo está, rellena lo que se quiere mostrar en el bloque cuyo id es tabla mediante un bucle.
Si no lo está, alerta al usuario del error y elimina el contenido del campo de texto.
La visualización del mismo en el navegador, es el que muestro a continuación, aunque te animo a que
lo visualices tú en el tuyo.
Verdadero Falso
Verdadero
En este caso sabemos las iteraciones justas que debe dar el bucle, por que sí
sería el más adecuado, aunque se podría haber llevado a cabo con cualquiera de
los otros.