Utilizando la Consola

En la consola podemos usar estas tres instancias:
- alert() → mensaje de alerta pop-up
- console.log(), console.info(), console.warn(), console.error()
- debugger → para la ejecución de la página y ver qué está pasando

Fichero HTML de ejemplo con Javascript incluido

<html lang="es">
	<head>
		<meta charset="UTF-8">
		<title>Javascript: Console</title>
	</head>
	<body>
		<script type="text/javascript">
			alert(Hello World!)
			
		</script>
	</body>
</html>

Creando variables

Hay tres tipos de variables, ya sean globales o locales:
- var → puede ser cambiado su valor, antiguo uso de variable
- let → puede ser cambiado su valor, solo en su alcance (scope) de bloque
- const → variable constante, no puede cambiar su valor

Se demuestra que let tiene un ámbito de bloque

let saludar = "dice Hola";
let tiempos = 4;
 
if (tiempos > 3) {
    let hola = "dice Hola tambien";
    console.log(hola);// "dice Hola tambien"
}
console.log(hola) // hola is not defined

Formato para escribirlas:
- var message = ‘Text whatever’
- let telephone = ‘1234567890’
- const whatever = ‘Whatever’
Nomenclatura de las variables:
- camelCase = varias palabras (Ej: let totalPrice)
- lowercase = una palabra (Ej: let total)
Nomenclatura variables constantes:
- const LOCATION = MAYÚSCULAS
- const DEFAULT_LOCATION = MAYÚSCULAS con guiones bajos

Tipos de datos primitivos

Numbers: números
Strings: textos
Booleans: true / false
Undefined: no definido
(·) Null: valor nulo

Numbers

Cualquier número positivo o negativo, con decimales o sin ellos
Se pueden hacer cualquier operación como en la vida real: sumar, restar, multiplicar, dividir… y comparación entre ellos: mayor que, igual a, menor que…

console.log(2 + 2); console.log(3 - 1); console.log(3 ** 2); console.log(4 / 2)
 
console.log(10 < 20); console.log(40 > 20); console.log(20 <= 40)
console.log(40 === '40') // Compara valor y tipo (daría false)
console.log(40 === 40) // Compara valor (daría true)
console.log(30 != 30) // Es distinto (daria false)

Operaciones con números

typeof → qué tipo de variable es [console.log(typeof whatever)] (String)
NaN y isNaN() → comprobar que no es un número [console.log(isNaN(‘whatever’))] (True)

toString() → pasar variable a string

let number = 100
console.log(number) // [100] en number
console.log(number.toString()) // [100] en string

.toFixed() → para añadir decimales y redondear números

	let number = 100.113593576
	console.log(number.toFixed(2)) // [100.11]
	```
 
## Strings
 
- Cualquier cadena de caracteres o texto. Ej: 'Hello World!'
- Se puede concatenar con otras cadenas de texto y comparación de valores.
	- Ej: 'hello' + 'Cris'
	- Igual que, distinto que...
 
### Operaciones con strings
 
- **concatenar texto** -> unir dos textos que estan en dos cadenas distintas
```javascript
	console.log('Hello ' + 'World!')

template literals → declarar plantillas y poder usar variables dinámicas

	const name = 'Daniel'
	console.log('Hello ' + name + ' whatever') // [Hello Daniel whatever]
	console.log(`Hello ${name} whatever`) // devuelve lo mismo

typeof → extraer el tipo de la variable

	console.log(typeof name) // [string]

.length → atributo, no necesita paréntesis, nos mide los caracteres del texto

	console.log(name.length) // [6]

.includes() → método, comprobar si un texto tiene alguna información

	console.log(name.includes('Da')) // [true]

.slice(start,end) → método, cortar el texto (en JS siempre empieza desde cero)

	console.log(name.slice(2, 5)) // [nie]

.replace(‘este texto’,‘por este otro’) → método, cambiar caracteres por otros

	console.log(name.replace('el','asd')) // [Daniasd]

.trim() → método, para limpiar cualquier input

	const TEXT = '    asd fr asd     '
	console.log(TEXT.trim()) // [asd fr asd]

.split(’,’) → método, para cuando la cadena de texto viene separada por comas

	const GEOLOCATION = 'Calle Whatever, 7, 1D'
	console.log(GEOLOCATION.split(,))

Booleans

Solo admite dos valores: true o false
- Muy útil para comprobar ciertos estados de nuestra aplicación
Se aconseja declararlos con texto positivo
- Ej: userIsLogged
Nos permitirá extraer el valor de ciertas variables o condiciones

Operaciones con booleans

Los que devuelven True

	console.log(Boolean(1)) // [true]
	console.log(Boolean('Whatever')) // [true]
	console.log(Boolean(3.14)) // [true]
	console.log(Boolean(100 > 5)) // [true]
	console.log(Boolean(1 < 100)) // [true]
	console.log(Boolean('1' == 1)) // [true]

Los que devuelven False

	console.log(Boolean(0)) // [false]
	console.log(Boolean(-0)) // [false]
	console.log(Boolean('') // [false]
	console.log(Boolean(NaN) // [false]
	console.log(Boolean(null) // [false]
	console.log(Boolean(undefined) // [false]
	console.log(Boolean('1' === 1)) // [false]

Undefined

Ausencia de valor

var a;
console.log(a)
console.log(typeof a) // undefined

Null

Tiene valor, pero es nulo

var a = null;
console.log(a)
console.log(typeof a) // object

Funciones

Una función es una tarea donde se engloba tu lógica y se determina un ámbito (scope)
Se define y se ejecuta la función así:

// Se define
function sayHello() {
	console.log('Hello World!')
}
// Se ejecuta
sayHello()

Declarando una variable global

const message = 'Say Hello' // Se declara la variable global
 
function sayHello() {
	console.log(message)
}
sayHello()

Parámetros de las funciones

Las funciones pueden recibir parámetros aunque no son obligatorios
Pueden ejecutar lógica gracias a ellos
Pueden retornar esos valores modificados
Pueden tener un valor por defecto

Ejemplo con la función de suma:

function sum(a,b) {
	console.log(a + b)
}
 
sum(2, 5) // 7
sum(10, 5) // 15
sum(20, 50) // 70
sum(3, 8) // 11

Funciones con retorno

Tiene unos datos de entrada
Ejecuta una lógica
Tiene unos datos de salida

function sayHello(name = 'world') {
	return `Hello ${name}`;
}
console.log(sayHello()) // Hello world
console.log(sayHello('Daniel')) // Hello Daniel

Funciones anónimas por defecto

No tienen nombre
Se pueden asociar a una variable

var sayHello = function(name = 'world') {
	return `Hello ${name}`;
}
console.log(sayHello()) // Hello world
console.log(sayHello('Daniel')) // Hello Daniel

Funciones anónimas flecha (arrow)

No tienen nombre
Sintaxis reducidas y mantenimiento del ámbito (scope)
Podemos usar el objeto global de la aplicación this
Con o sin body

const MESSAGE = 'Text example'
var sayHello = (name) => `Hello ${name}`
var sayBye = (name) => { return `Bye ${name}`}
 
console.log(sayHello('Daniel')) // Hello Daniel
console.log(sayBye('Daniel')) // Bye Daniel

Aplicando lógica con JS

El ejemplo aplicando un diagrama de flujo es: Quiero irme de viaje (sentencia), ¿tengo suficiente dinero? (Incógnita) Dos posibilidades, sí o no.

Operando con condicionales

Comprobar si una condición se da
- if, else, else if…
Comparar valores
- == (compara valor únicamente)
- === (compara valor y tipo)
- && (AND unir una comprobación con otra, solo true si las dos condiciones se dan)
- || (OR si se da la condición primera, o si es la secundaria, sigue el flujo)
- >, <, >=, <=

const FLIGHT = 100;
const HOTEL = 50;
const TOUR = 30;
const TOTAL = FLIGHT + HOTEL + TOUR;
const BUDGET = 300;
 
if (BUDGET > TOTAL) {
	console.log('Sí, me voy de viaje')
} else if (BUDGET === TOTAL) {
	console.log('Sí, pero tengo un presupuesto muy ajustado')
} else {
	console.log('No, tengo que seguir ahorrando')
}

Operadores ternarios

Comprueba una condición
- Respuesta positiva → ?
- Respuesta negativa → :

const FLIGHT = 100;
const HOTEL = 50;
const TOUR = 30;
const TOTAL = FLIGHT + HOTEL + TOUR;
const BUDGET = 300;
 
const RESULT = BUDGET > total
	? console.log('Sí, me voy de viaje')
	: console.log('No, no me voy de viaje')

Resumiendo la lógica con JS

Puedes utilizar los diagramas de flujo para entender un problema y sus posibles soluciones.
Puedes operar con condicionales para hacer comprobaciones de esas posibles soluciones.
Puedes usar los operadores ternarios para cuando tienes dos caminos posibles.

Daniel Barcelona

Explorer

Aprendiendo Javascript