Capítulo 3 - console.log("Hola Mundo");

JSHint

Es una herramienta clave para nuestro día a día, ya que nos permite detectar errores comunes en el código JavaScript que desarrollemos.

Para usuarios más avanzados es recomendable utilizar esLint, ya que nos proporciona múltiples configuraciones avanzadas.

JSHint puede ser utilizado directamente desde la web o como un plugin más en tu editor favorito.

Más información:

Consola

La herramienta más utilizada será la consola de JavaScript, que es una de las múltiples utilidades que nos ofrecen los navegadores para depurar nuestro código.

Si ya desarrollas habitualmente utilizando CSS y HTML, estarás familiarizado con este conjunto de herramientas y su potencial, si no deberías seguir estos sencillo pasos.

Yo personalmente, prefiero utilizar Google Chrome aunque sin duda Mozilla Firefox, también es una buena opción para depurar y desarrollar nuestro código.

Para hacer uso de la consola... necesitamos llamar al objeto console.

Más información:

Métodos destacados:

Hacemos una recopilación simplificada de los métodos más utilizados, aunque existen muchos más.

.assert()

Aparece un mensaje de error en la consola si la afirmación es falsa.

var controlador = false;
console.assert(controlador, "\"controlador\" es igual a \"false\"");

.clear()

Limpia la consola.

console.clear()

.dir()

Retorna una lista interactiva de las propiedades de un objeto.

console.dir(document.body);

.dirxml()

Retorna una representación HTML del objeto.

console.dirxml(document.body);

Agrupadores

.groupCollapsed()

Crea un grupo de mensajes de consola minimizados por defecto.

console.groupCollapsed("bucleFor");
for(var i=100; >0; i--){
    console.info("Iteración numero %i", i)
}
console.groupEnd();

Tablas

.table()

Muestra los datos dentro de una tabla.

var lenguajes = [
    { nombre: "JavaScript", extension: ".js" },
    { nombre: "TypeScript", extension: ".ts" },
    { nombre: "CoffeeScript", extension: ".coffee" }
];

console.table(lenguajes);
console.table(lenguajes, "extension");

Gestión del tiempo

.timeEnd()

Para el contador y devuelve el resultado.

console.time("Medición de miArray");
var miArray = new Array(1000000);
for (var i = miArray.length - 1; i >= 0; i--) {
    miArray[i] = new Object();
};
console.timeEnd("Medición de miArray");

Notificadores

.log()

Saca un mensaje por consola.

console.log("Hola en formato clásico");

.info()

Saca un mensaje por consola con un estilo informativo.

console.info("Hola en formato informativo");

.warn()

Saca un mensaje por consola con un estilo alerta.

console.warn("Hola en formato alerta");

.error()

Saca un mensaje por consola de error, con los mismos estilos, creando confusión.

No se recomienda su uso.

console.error("Hola en formato error");

Formateadores

Formato	Descripción
%s	Cadena
%d o %i	Número entero
%f	Decimal
%o	DOM
%O	Objeto js
%c	CSS

Ejemplos:

%o para estructuras del DOM:

var parrafos = document.getElementsByTagName("p");
console.log("DOM: %o", parrafos);

%O para objetos JS:

var objeto = {"nombre":"Yo","Apellido":"Mismo"};
console.log("Objeto: %O", objeto);

Usando CSS:

console.log('Esto es aburrido...');
console.log('%c Pero se puede mejorar fácilmente! ', 'background: #3EBDFF; color: #FFF; font-size:25px;');

Caracteres especiales:

Incluyendo ciertos caracteres especiales en nuestras cadenas de texto, podemos maquetar el resultado que se imprimirá por la consola.

\t Tabulador
\' Comillas Simples
\" Comillas Dobles
\n Salto de línea

console.log("Hasta aquí... todo correcto. Ahora vamos a \"tabular\":\tves? Ya estamos más lejos.\n\'Otra linea ;-)\'")

Comentarios

Consejo

Los comentarios nos ayudan a entender nuestro código, en ocasiones podemos utilizarlos para silenciar temporalmente partes del código.

Algunos desarrolladores aconsejan utilizar JSDoc, como un sistema para determinar como debe comentarse de manera sistemática nuestro código.

Al utilizar JSDoc puedes exportar esos comentarios como un fichero Html, que nos permitirá documentar nuestro proyecto fácilmente.

Como regla general es mejor poner comentarios, que no ponerlos. También puedes usar los comentarios de una forma más eficiente si referencias (urls) a la documentación en el caso de las librerías.

Una línea

// Comentario en una línea

Multiples líneas

/*
Una Línea....
Otra linea...
Etc...
*/

JSDoc

/**
* Represents a book.
* @constructor
* @param {string} title - The title of the book.
* @param {string} author - The author of the book.
*/
function Book(title, author) {
}

Nombres de variables

Las variables tienen unas reglas muy especificas que debemos seguir a la hora de designar sus nombres.

Debemos usar nombres que expliquen que aporta esa variable a nuestro código.
No se pueden usar espacios.

var con espacios = 1;

No usar un número delante.

var 1numero = 1;

Evitar símbolos y snake_case.

var con_guiones_bajos = 1; //snake_case es poco común en JavaScript
var dame$ = 1; // en serio?

Usar camelCase.

var otraOpcion = 1;
var opcionCon123123 = 1;

Truco

Si estas realizando cambios en un código que sigue una pauta distinta a cameCase. ¡Síguelo!

La coherencia en el código es más importante, recuérdalo.

Tipos de variables

Un primer paso para dominar los tipos de variables es utilizar el operador typeof, y conocer su especificación.

Tipado Debil vs. Tipado Fuerte

Las variables en JavaScript no necesitan ser declaradas teniendo en cuenta el tipo de dato que contienen, como sucede en otros lenguajes

Es importante conocer los tipos de variables disponibles:

Undefined

typeof undefined
typeof noDefinido
typeof tampocoCreado

Object

typeof null
typeof [15, 4]
typeof new Date()
typeof {a:1}

Boolean

typeof false
typeof true
typeof Boolean(false)

Number

typeof 3
typeof 3.14
typeof NaN
typeof Infinity

String

typeof "hola"

Function

typeof function(){}

Existe un tipo más... Symbol pero pertenece a ECMA6, es por ello, que no lo desarrollamos aquí.

Matemáticas Básicas

Las matemáticas básicas en JavaScript son muy similares a cualquier lenguaje.

El único operador matemático que puede resultarnos extraño es el módulo.

var suma = 5 + 4;
var resta = 10 - 6;
var multiplicacion = 3 * 3;
var division = 6 / 2;
var modulo = 43 % 10;

Trabajando con Decimales

En JavaScript el decimal 1.0 y el entero 1, son iguales.

console.log((5.0+1) === (5+1)) // true

Matemáticas Básicas (Agrupando operaciones)

Con los paréntesis fácilmente se pueden priorizar operaciones.

El orden de ejecución empieza por los parentesis, luego multiplicaciones y divisiones... para terminar con sumas y restas.

var expresion1 = (3 + 7) * 10;
var expresion2 = (-56 * 6) - 74 * -25;
var expresion3 = (3 * 3) + 10 - 12 / 2;
var expresion4 = 44 + (83 % (33 + 100));
var expresion5 = -145 + (500 / 10 - 5) + 10 * 10 ;

Matemáticas Básicas (crecimiento y decrecimiento)

El crecimiento y decrecimiento, puede suceder antes o después que el valor de la variable sea leído por el navegador, en función de dónde se sitúa el operador (++antes o después++).

var numero = 5;

console.log(--numero); // 4
console.log(numero--); // 5 (luego 4)
console.log(++numero); // 6
console.log(numero++); // 5 (luego 6)

Operadores de asignación

Estos operadores, nos permiten alterar de manera sencilla y controlada el valor de una variable.

Asignación =

var x = 1;
var y = 2;
x = y;
console.info("\"x\" vale ", x);

Suma +=

var x = 1;
var y = 2;
x += y; // x = x + y
console.info("\"x\" vale ", x);

Resta -=

var x = 1;
var y = 2;
x -= y; // x = x - y
console.info("\"x\" vale ", x);

Multiplicación *=

var x = 1;
var y = 2;
x *= y; // x = x * y
console.info("\"x\" vale ", x);

División /=

var x = 1;
var y = 2;
x /= y; // x = x / y
console.info("\"x\" vale ", x);

Módulo (Resto) %=

var x = 1;
var y = 2;
x %= y;  // x = x % y
console.info("\"x\" vale ", x);

Jugando con variables

Si ejecutas el siguiente fragmento de código, verás lo fácil que resulta perder el control de nuestras variables, si no tenemos mucho cuidado.

var empezoComo3 = 3;
era3();

empezoComo3 = 35;
era3();

empezoComo3 = empezoComo3 + 30;
era3();

empezoComo3 += 4;
era3();

empezoComo3++;
era3();

empezoComo3 -= 12;
era3();

empezoComo3--;
era3();

empezoComo3 *= 10;
era3();

empezoComo3 /= 11;
era3();

empezoComo3 += "texto";
era3();

empezoComo3 += 20;
era3();

empezoComo3++;
era3();


function era3 () {
    console.log("empezoComo3 debería ser 3, ahora su valor es " + empezoComo3);
};

Interacción Básica con el Usuario

Puedes interactuar con el usuario desde JavaScript, utilizando unos métodos sencillos que ya vienen implementados en todos los navegadores. Esto hace unos años era muy común y poco a poco se convirtió en una mala práctica.

Información

El propio navegador, ofrece al usuario la posibilidad de bloquear esta interacción. Lo ideal es gestionar esta interacción con el usuario desde el HTML, como veremos en próximos capítulos.

En el caso de depuración y prototipado de código puede ser un recurso muy útil.

Window.alert()

Muestra nuestro mensaje en una ventana.

alert("¡Bienvenido a esta web!");

Window.confirm()

Pregunta al usuario y ofrece dos botones que se traducen en valores booleanos. Aceptar (true) y cancelar o cerrar la ventana (false).

confirm("¿Está seguro que desea abandonar esta web?");

Ejemplo:

var respuesta = confirm("presiona un botón!");
if (respuesta === true) {
    console.log("Has aceptado!");
} else {
    console.log("Has cancelado");
}

Window.prompt()

Pregunta al usuario y permite la escritura devolviendo el mensaje.

prompt("¿Como te llamas?");

Registremos los datos en una variable:

var nombre = prompt("¿Como te llamas?");

Capítulo 3 - console.log("Hola Mundo");

JSHint

Más información:

Consola

Más información:

Métodos destacados:

.assert()

.clear()

.dir()

.dirxml()

Agrupadores

.group()

.groupCollapsed()

.groupEnd()

Tablas

.table()

Gestión del tiempo

.time()

.timeEnd()

Notificadores

.log()

.info()

.warn()

.error()

Formateadores

Ejemplos:

Caracteres especiales:

Comentarios

Consejo

Nombres de variables

Truco

Tipos de variables

Tipado Debil vs. Tipado Fuerte

Matemáticas Básicas

Trabajando con Decimales

Matemáticas Básicas (Agrupando operaciones)

Matemáticas Básicas (crecimiento y decrecimiento)

Operadores de asignación

Interacción Básica con el Usuario

Información

JSHint​

Más información:

Consola​

Más información:

Métodos destacados:​

Agrupadores​

Tablas​

Gestión del tiempo​

Notificadores​

Formateadores​

Ejemplos:​

Caracteres especiales:​

Comentarios​

Consejo

Nombres de variables​

Truco

Tipos de variables​

Trabajando con Decimales

Matemáticas Básicas (Agrupando operaciones)​

Matemáticas Básicas (crecimiento y decrecimiento)​

Interacción Básica con el Usuario​

Información

JSHint

Consola

Métodos destacados:

Agrupadores

Tablas

Gestión del tiempo

Notificadores

Formateadores

Ejemplos:

Caracteres especiales:

Comentarios

Nombres de variables

Tipos de variables

Matemáticas Básicas (Agrupando operaciones)

Matemáticas Básicas (crecimiento y decrecimiento)

Interacción Básica con el Usuario