SESION 12

Vista previa del material en texto

INTRODUCCIÓN A JAVASCRIPT 
¿Qué es JavaScript?
JavaScript es un lenguaje de programación que se utiliza principalmente para crear páginas web dinámicas.
Una página web dinámica es aquella que incorpora efectos como texto que aparece y desaparece, animaciones, acciones que se activan al pulsar botones y ventanas con mensajes de aviso al usuario.
Técnicamente, JavaScript es un lenguaje de programación interpretado, por lo que no es necesario compilar los programas para ejecutarlos. En otras palabras, los programas escritos con JavaScript se pueden probar directamente en cualquier navegador sin necesidad de procesos intermedios.
A pesar de su nombre, JavaScript no guarda ninguna relación directa con el lenguaje de programación Java. Legalmente, JavaScript es una marca registrada de la empresa Sun Microsystems
 
COMO FUNCIONA
El esquema general de una página web es un documento HTML donde están todas las etiquetas HTML de la página. A lo largo de ese documento, pueden existir referencias o relaciones a otros documentos, como archivos CSS o archivos Javascript.
Por ejemplo, si dentro del documento HTML se encuentra una referencia a un archivo CSS, el navegador lo descarga y lo aplica al documento HTML, cambiando su apariencia visual. De la misma forma, si encuentra una referencia a un archivo Javascript, el navegador lo descarga y ejecuta las órdenes o acciones que allí se indican.
CONCEPTOS BÁSICOS
CONSOLA DEL NAVEGADOR 
Para acceder a la consola Javascript del navegador, podemos pulsar CTRL+SHIFT+I sobre la pestaña de la página web en cuestión, lo que nos llevará al Inspector de elementos del navegador. Este inspector es un panel de control general donde podemos ver varios aspectos de la página en la que nos encontramos: su etiquetado HTML, sus estilos CSS, etc...
Concretamente, a nosotros nos interesa una sección particular del inspector de elementos. Para ello, nos moveremos a la pestaña Console y ya nos encontraremos en la consola Javascript de la página.
También se puede utilizar directamente el atajo de teclado CTRL+SHIFT+J, que en algunos navegadores nos lleva directamente a la consola.
En esta consola, podemos escribir funciones o sentencias de Javascript que estarán actuando en la página que se encuentra en la pestaña actual del navegador. De esta forma podremos observar los resultados que nos devuelve en la consola al realizar diferentes acciones. Para ello, vamos a ver algunas bases:
LA CONSOLA
El clásico primer ejemplo cuando se comienza a programar, es crear un programa que muestre por pantalla un texto, generalmente el texto «Hola Mundo». También podemos realizar, por ejemplo, operaciones numéricas. En la consola Javascript podemos hacer esto de forma muy sencilla:
console.log("Hola Mundo");
console.log(2 + 2);
En la primera línea, veremos que al pulsar enter nos muestra el texto «Hola Mundo». En la segunda línea, sin embargo, procesa la operación y nos devuelve 4. Para mostrar estos textos en la consola Javascript hemos utilizado la función console.log, pero existen varias más:
	FUNCION
	DESCRIPCION
	Console.log()
	Muestra la información proporcionada en la consola Javascript.
	Console.info()
	Equivalente al anterior. Se utiliza para mensajes de información.
	Console.warn()
	Muestra información de advertencia. Aparece en amarillo
	Console.error()
	Muestra información de error. Aparece en rojo
	Console.clear()
	Limpia la consola. Equivalente a pulsar CTRL+L o escribir clear().
La idea es utilizar en nuestro código la función que más se adapte a nuestra situación en cada caso (errores graves con console.error(), errores leves con console.warn(), etc...).
Aplicar varios datos
En el ejemplo anterior, solo hemos aportado un dato por cada línea (un texto o una operación numérica), pero console.log() y sus funciones hermanas permiten añadir varios datos en una misma línea, separándolo por comas:
console.log("¡Hola a todos! Observen este número: ", 5 + 18);
De momento nos puede parecer algo inútil, pero cuando empecemos a trabajar con variables y objetos, será muy necesario.
Aunque no es muy práctico y sólo se trata de puro divertimento, se pueden aplicar estilos CSS en la consola Javascript haciendo uso de %c, que se reemplazará por los estilos indicados:
console.log("%c¡Hola Andres!",
 "background:linear-gradient(#000, #555); color:#fff; padding: 5px 10px;");
DECLARACIÓN DE VARIALES 
Una variable en JavaScript es la forma que tiene este lenguaje de programación para nombrar un valor. Es decir, cuando declaramos una variable, le asignamos un nombre a determinada función. Esto nos permite no tener que volver a repetir este valor, sino más bien insertar el nombre cuando queramos usarlo. Además, esto facilita la acción de cambiar este valor a nivel global, pues basta con cambiar el valor en la variable para que todos los valores en los que está variable esté insertada se alteren. 
¿COMO DECLARAR UNA VARIABLE?
 Existen tres maneras de declarar variables en JavaScript, cada una utiliza una palabra clave diferente: let, var y const. A continuación, te explicamos cómo funciona cada una de estas palabras clave:
var
La palabra clave var es una abreviación de variable y es la manera antigua de declarar que lo que estamos escribiendo es este tipo de elemento. Para usar esta palabra clave, podemos escribir la siguiente línea de código:
var x=1
Una vez hemos declarado que x es una variable y vale 1, no hace falta que pongamos esta variable de nuevo si queremos darle una nueva asignación. Esto sucede porque, al declarar variables en JavaScript usando la palabra clave var, estamos usando un contexto global, también conocido como function scoped. Esto significa que, a partir del momento en el que hayamos definido la variable, esta será cierta en todo nuestro código.
let
La palabra clave let, a diferencia de la palabra clave var, nos permite declarar variables en JavaScript que son ciertas a nivel del bloque. Esto también se conoce en inglés como block scoped. Entonces, esto hace que las variables definidas con let solo sean ciertas dentro de un bloque, introducido por las llaves { }.
Para entender mejor esta diferencia entre function scoped y block scoped, pongamos un ejemplo. Digamos que definimos las siguientes dos variables:
var x = 1;
let y = 1;
Ahora, decidimos cambiar estas dos variables dentro de un bloque, como el que tenemos a continuación:
if (true) {
var x = 2;
let y =2;
}
Entonces, aunque las variables han sufrido el mismo cambio, cuando queramos pintar los elementos x e y, obtendremos resultados diferentes. Cuando pintemos console.log (x), obtendremos el número 2; mientras que cuando pintemos console.log (y), obtendremos el número 1. Esto sucede porque la variable let que definimos en el bloque anterior solo es verdadera dentro del bloque, por lo que su cambio no se aplica de manera general.
Por su parte, la variable var tiene un efecto a nivel general, por lo que cualquier cambio que sufra en el código, sea dentro de un bloque o no, se verá representado en el resultado final.
La diferencia entre estas dos palabras clave nos permite crear variables que respeten una cierta jerarquía en nuestro código. Entonces, al utilizar la palabra clave let, respetamos lo que el bloque anterior ha definido, mientras que la palabra clave var asume de manera general lo último que tengamos escrito. Esto lo podemos ver directamente en nuestro software de programación, pues la variable y en el segundo bloque se verá representada de manera más opaca, dado que no tendrá ningún efecto real. La variable x mantendrá el brillo del resto del código, porque sí se está aplicando.
const
Al igual que la palabra clave let, const nos permite establecer variables a nivel de bloque. La diferencia entre estas dos palabras clave es que const hace referencia a una constante. Entonces, supongamos que escribimos la siguiente línea de código:
const i=7
Esto quiere decir que tenemos una constante en donde i es igual a 7. Si ahora decidimos cambiar el valor de i dentro del bloque,JavaScript nos devolverá un error. Esto sucede porque el valor de i está definido como constante, un tipo de variable inmutable.
DIFERENCIAS ENTRE VAR, LET, CONST