En los 90’s las páginas eran estáticas, eso quiere decir que solo podíamos leer texto o ver imágenes. Pero los usuarios necesitaban algo de dinamismo para poder empezar a interactuar.
Así nace un lenguaje de programación con el que la gente podía interactuar con el mismo contenido o empezar a generar su propio contenido en otras plataformas. Es un lenguaje interpretado, orientado a objetos, débilmente tipado y dinámico, Javascript.
Se pueden hacer operaciones entre tipos de datos distintos (enteros con strings, booleanos con enteros, etc). A cualquier variable se le puede asignar (y reasignar) valores de todos los tipos.
Ejemplo:
4 + "7"; // 474 * "7"; // 282 + true; // 3false - 3; // -3Corre directamente en la etapa de Runetime sin una etapa de compilación previa. Esto permite probar nuestro código inmediatamente; pero también es lo que hace que los errores se muestren hasta que se ejecuta el programa.
<h1>¿Realmente es Javascript un lenguaje interpretado?</h1>Si. La razón es que el navegador lee línea por línea nuestro código el cuál le indica lo que tiene que hacer, sin tener la necesidad de compilar. Todo esto es controlado por el motor de Javascript V8 del navegador.
<h1>Backwards y Forwards</h1>Forwards
Ser compatible con versiones futuras significa que incluir una adición al lenguaje en un programa no causaría que se rompa si se ejecuta en un motor de JS anterior. Js no sería compatible con versiones futuras. Esto no funciona así.
Javascript es Backwards compatible
La compatibilidad con versiones anteriores significa que cuando se acepta un JS válido, no habrá un cambio a futuro que haga que el código deje de funcionar.
<h1>Comentarios</h1>Existen dos tipos de comentarios en JavaScript.
Multilínea
La forma correcta de hacer comentarios multilínea en JavaScript es usando “/* */”
Ejemplo:
/*
alert("Hola, Mundo");
*/console.log("Hola, Mundo!");
En línea
La forma correcta de hacer comentarios en línea es usando “//”
Ejemplo:
//alert("Hola, Mundo");//console.log("Hola, Mundo!");Las variables son la representación de un lugar en la memoria que nosotros vamos a representar para poder guardar un valor que puede tener diferentes tipos.
Var
Es una palabra reservada de JavaScript, cuando el navegador la lee, comprende que debe reservar un espacio en su memoria para poder guardar un valor.
var nombre = "Iris";
Si llegáramos a pedir el dato de la variable en la consola, se vería algo así.
>Nombre
>"Iris"Se guardan los datos o valores que estamos ocupando, para ocuparlos después. Al momento de que se generan variables, existen 2 estados:
Declarar
En el estado de declarar una variable, lo que debemos hacer es generar la palabra reservada “Var” y le ponemos un nombre a ese espacio en la memoria.
Ejemplo:
//Declarandovar edad;
Inicializar
Al momento de que ya tengamos declarada la variable, ya que le vayamos a poner un valor, mandamos traer el nombre de ese espacio y le ponemos un valor. Quiere decir que nuestra variable ya fue declarada, ya tiene un valor, ya puedo inicializarla.
//Inicializarvar edad;
edad = 19;
Podemos generar variables más complejas, como de Array, son un conjunto de elementos.
Ejemplo:
var elementos = ["Computador", "Celular"];
De igual forma podemos generar una variable tipo objeto:
var persona = {
nombre: "Iris",
edad: 19
}
Cuando quiera llamar a esta variable:
persona;
Y directamente nos imprime todo lo que tiene la variable.
<h1>Funciones</h1>Las funciones son como un conjunto de sentencias que nosotros podemos utilizar para generar ciertas acciones con los valores que ya guardamos antes en las variables. Hay 2 tipos de funciones:
Declarativas
Para mandarlas llamar o para generar una función declarativa, vamos a usar una palabra clave llamada “function” una vez que tengamos esta palabra clave, debemos darle un nombre a esa función.
//DeclarativasfunctionmiFuncion() {}
La función de igual forma va a guardar ciertos valores, así que cuando Javascript y el navegador ve la palabra reservada “Function” lo que hará es guardar el valor utilizando el nombre de la función para reservar un espacio en memoria y guardar el cálculo o la operación que estemos haciendo dentro de la función.
//DeclarativasfunctionmiFuncion() {
return3;
}
Expresión
La forma de generar una función de expresión, lo haremos con una variable. Las variables también pueden guardar otro tipo de valores. Este valor será una Función. Vamos a usar la palabra reservada de “Var” y lo que hacemos es mandar a llamar la palabra reservada “Function”
//Expresiónvar miFuncion = function() {
return a + b;
}
En este ejemplo estamos mandando a llamar 2 elementos que no sé cuáles son. La función no entiende a qué nos referimos porque no estamos declarando variables adentro de mi función. Las funciones también necesitan parámetros que vamos a usar al momento de estar trabajando con estas funciones. Lo que vamos a hacer es poner los parámetros que yo espero y al momento de llamar esta función tengo que darle los parámetros esperados para recibir como valor.
var miFuncion = function(a,b) {
return a + b;
}
miFuncion();
Diferencias:
A las funciones declarativas se les aplica hoisting, y a la expresión de función, no. Ya que el hoisting solo se aplica en palabras reservadas var y function.
Esto quiere decir que con las funciones declarativas, podemos mandar a llamar la función antes de que ésta sea declarada, y con la expresión de función, no. Tendríamos que declararla primero para después mandarla a llamar.
<h1>Estructuras y Tipos de datos</h1>Valores primitivos
En JavaScript, un valor primitivo, son datos que no son un objeto y no tienen métodos. Existen 6 tipos los cuales son:
Tipo boolean
Representa a una entidad lógica que puede tener dos tipos de valores, true y false. Cualquier objeto cuyo valor no sea undefined o null, incluido un objeto Boolean cuyo valor sea false, se ****evalúa como true
var x = newBoolean(false);
if (x) {
// este código se ejecuta
}
Si entendemos que es el Scope, podemos evitar muchos problemas a futuro cuando estemos trabajando con código o con un equipo.
El Scope es el alcance que tienen las variables, depende mucho de dónde declaremos e inicialicemos variables, de si vamos a tener acceso a ellas o no.
Scope Global
Cuando estamos trabajando en un archivo de JavaScript y tenemos el código, este código y este archivo se inicializa en el navegador, en ese momento se va a inicializar algo llamado Scope Global. Existen 2 tipos de Scope, el global y el local.
En este Scope Global van a existir todas las variables, todas las validaciones que nosotros tengamos.
En nuestro Scope Global tenemos una variable de nombre que se llama “Iris”
//Scope globalvar nombre ="Iris";
Scope Local
En el momento que inicializamos una función, se va a generar algo llamado Scope Local. Quiere decir que solo lo que está adentro de la función va a tener acceso a eso mismo.
Aquí le estamos pidiendo a la función que nos regrese la variable que está en Scope global que se llama “Iris” y la variable que está en local que se llama “Apellido”
functionfun() {
var apellido ="Barrios";
return nombre+""+apellido
}
Si yo mando a llamar la función nos regresaria
fun(); //Iris BarriosComo decíamos, esto pasa porque se genera un Scope local y en este Scope Local podemos tener acceso a las variables que están en Scope Global. Pero esto es muy diferente si en Scope Global intento acceder a las variables de Scope Local, no se podría. Todo lo que está en Global, no puede acceder a lo que está en Local.
Si generaramos un console.log con “Apellido” desde nuestro Scope Global, nos mostraría que no está definido.
functionfun(){
var apellido ="Barrios"return nombre+""+apellido
}
//console.log(apellido); //apellido is not definedPor esto es importante entender que tenemos 2 Scope, Global y Local. Lo que está en Local puede acceder a lo que tenemos en Global. Pero lo que tenemos en Global, no va a poder acceder a lo que tenemos en Local.
<h1>Hoisting</h1>Es cuando las variables y las funciones se declaran antes de que se procese cualquier tipo de código. El hoisting solo pasa con versiones de Ecmascript5 hacía abajo. De Ecmascript6 en adelante ya no sucede, porque el hoisting solo sucede con dos palabras clave “Variable” y “Función”. En las nuevas versiones presentaron 2 nuevas variables que son “Const” y “Let”.
Vamos a declarar la variable e inicializarla.
//Declararvar miNombre;
//Inicializar
miNombre ="Iris";
Si en el navegador hiciéramos esto
console.log(miNombre)
var miNombre ="Iris";
Sucedería el hoisting, porque estamos mandando a llamar una variable, antes de declararla e inicializarla.
<h1>Coerción</h1>JavaScript es un lenguaje débilmente tipado. Lo que sucede al sumar 4 más el string “7” se llama coerción.
4 + "7"; // 474 * "7"; //282 + true; //3false - 3; // -3Hay 2 tipos de coerción:
Coerción implícita
Es cuando el lenguaje nos ayuda y cambia de un tipo de valor a otro tipo de valor. Coerción significa que es la forma en la que podemos cambiar un tipo de valor a otro tipo de valor. Tenemos un valor tipo número y podemos cambiarlo a un valor tipo String. Tenemos un valor tipo String y podemos cambiarlo a un valor tipo número.
Coerción explicita
Es la forma en la que nosotros obligamos a que un valor de un tipo, cambie a otro valor de otro tipo si es que necesitamos que ese valor sea de un tipo distinto.
<h1>Valores: Truthy & Falsy</h1>¿Qué valores Boolean nos devuelve como “Falso”?
Boolean(0); //false
Boolean(null); //false
Boolean(NaN); //false
Boolean(undefined); //false
Boolean(false); //false
Boolean(""); //false
¿Qué valores Boolean nos devuelve como “Verdadero”?
Boolean(1); //true para 1 o cualquier número diferente de cero (0).
Boolean(“a”); //true para cualquier carácter o espacio en blanco en el string.
Boolean([]); //true aunque el array esté vacío.
Boolean({}); //true aunque el objeto esté vacío
Boolean(function(){});//Cualquier función es verdadera también
Operadores: Asignación, Comparación y Aritméticos.
Aritméticos
Suma (+)
. Suma dos números:
3 + 2 = 5
. Si en lugar de números se suman cadenas, como por ejemplo
“A” + “B” = “AB”
se produce una concatenación. Si alguno de los elementos a concatenar no es una cadena de texto, queda convertido a cadena:
“AB” + 123 = “AB123”
.
Resta (-). Halla la diferencia entre dos números. Ejemplo A: 3-2 = 1 . Ejemplo B: (-1)-(-2) = 1 .
Negativo (-). Indica el signo negativo de un número o una expresión: -3.
División (/). Divide dos números, obteniendo un cociente de coma flotante: 5 / 2 = 2.5 . Fíjate en que el separador decimal es el punto.
Módulo aritmético %. Divide dos números, obteniendo un resto entero: 5 % 2 = 1 .
Multiplicación (*). Multiplica dos números: 3 * 2 = 6 .
Incrementos y decrementos (++ --). Incrementa o decrementa el valor de una variable numérica en una unidad. No puede aplicarse a un literal. Pueden darse dos casos:
var A, B; B = 2;
A = ++B
A = B++
En el primer caso,
A = 3
Es decir, que el incremento de B ha sido el correcto, pero no así el segundo, en el que
A = 2
. Esto se debe a que, en el primer caso, el incremento se efectúa
antes
de que la expresión sea evaluada, y en el segundo, se incrementa
después
de la evaluación según indica el orden de precedencia de los operadores (ver tabla al final de esta página). De igual forma, para decrementos:
var A, B; B = 2;
A = --B
A = B--
En el primer caso resulta:
A = 1
y en el segundo:
A = 2
Comparación
Igualdad (
==
) Verifica la igualdad de dos expresiones sin tener en cuenta el tipo de dato.
Por ejemplo:
2
==
“2”
devuelve
True
Igualdad estricta (===) Hace lo mismo que el anterior, pero verificando también que coincidan los tipos de datos.Por ejemplo: 2 === “2” devuelve False
Desigualdad (!=) Funciona de la misma forma que la igualdad, pero negándola.Por ejemplo: 2 != “2” devuelve False
Desigualdad estricta (!==) Lo mismo que la igualdad estricta, pero negándola.Por ejemplo: 2 !== “2” devuelve True
Y estos cuatro, seguro que ya sabes cómo funcionan:
Mayor que (>)
Mayor o igual que (>=)
Menor que (<)
Menor o igual que (<=)
Asignación
Asignación simple (
=
) Asigna un contenido a una variable o a un objeto.
Por ejemplo:
mivariable
=
“Saludos”
En JavaScript el operador de asignación tiene la particularidad de que puede combinarse con algunos de los operadores aritméticos, dando lugar a toda una familia de nuevos operadores:
A += B Ejemplo equivalente: A = A + B
A -= B Ejemplo equivalente: A = A - B
A /= B Ejemplo equivalente: A = A / B
A *= B Ejemplo equivalente: A = A * B
A %= B Ejemplo equivalente: A = A % B
A &= B Ejemplo equivalente: A = A & B
A ^= B Ejemplo equivalente: A = A ^ B
A |= B Ejemplo equivalente: A = A | B
<h3>Unos operadores atípicos</h3>typeof
Este operador nos indica el tipo de dato contenido en un variable, un literal o el resultado de una expresión. Puede devolver seis valores diferentes:
number, string, object, function, boolean o undefined
. Por ejemplo:
typeof 2 devuelve number
void Este es un curioso operador que se limita a impedir que todo funcione normalmente, es decir, que una vez evaluadas la instrucciones, sus efectos o presentación de resultados serán anulados. En principio podemos dudar de su utilidad, pero puede resultar muy útil en las ocasiones en que, dependiendo de una evaluación previa, haya que deshabilitar algun objeto o impedir alguna acción. Por ejemplo, bloqueando un formulario donde no se han cumplimentado algunos campos obligatorios, o si algun valor es erróneo. El siguiente ejemplo genera un link que no funciona:
Y se escribe: <A HREF=“javascript:void(0)”>Este link no funciona</A>
new Sirve para crear una instancia de un objeto definido por el usuario, o también, para crear alguno de los objetos intrínsecos de javaScript:, como son: Array, Boolean, Date, Function, Math, Number o String. Lo veremos con más detalle en la página dedicada a los objetos.
Como puedes ver, JavaScript dispone de una gran variedad de operadores. Cuando se escriben expresiones lógicas complejas es recomendable usar los paréntesis para cada sub expresión participante, y no olvides tener siempre en cuenta el orden de evaluación de los operadores. Es relativamente fácil equivocarse al escribir expresiones complicadas, y es buena idea probar siempre lo escrito con cuantas variaciones sea posible para asegurarse de que no se producen resultados inesperados
Condicional IF
Las condicionales son las reglas que vamos a aplicar para poder validar si algo es verdadero o falso.
if (true) {
console.log("Hola")
}
if (false){
console.log("hola")
}
Como al usar el ''False" no pasa nada, podemos usar “Else”
if (true) {
console.log("Hola");
} else {
console.log("Soy falso")
Para usar la condicional If else if, lo hacemos así.
var edad = 18;
if(edad === 18) {
console.log("Puedes votar, será tu 1ra votación");
} elseif (edad > 18) {
console.log("Puedes votar, de nuevo");
}else {
console.log("Aún no puedes votar");
}
Si quisieramos generar el “If y el Else” en una sola línea, lo haríamos así.
condition ? true : false;
var numero = 1;
var resultado = numero === 1 ? "Sí, soy un uno" : "No, no soy un uno";
Switch
El switch funciona por casos, si el caso es “True” pasará esa parte, si no, crearemos otros casos como el “Else If” y si ninguno es “True”, entramos a una etapa default, que sería nuestro “Else”.
var numero = 1;
switch (numero) {
case1:
console.log("Soy uno!");
break;
case10:
console.log("Soy un 10!");
break;
case100:
console.log("Soy un 100!");
break;
default:
console.log("No soy nada");
}
Arrays
Los arrays en Javascript son una estructura de datos y un tipo objeto porque es un valor que guardará más valores adentro, no solo 1, como un string. Guardará más valores que pueden ser tipo número, tipo string. Incluso pueden haber más arrays dentro de un array.
var frutas = ["Manzana", "Plátano", "Cereza", "Fresa"];
Si queremos ver los elementos del array, usamos:
console.log(frutas.length);
4Y si queremos acceder a uno de los elementos, hacemos esto:
console.log(frutas[2]);
Cereza
Si quisiéramos añadir los elementos:
Push “empujará” más elementos al final del array.
var frutas = ["Manzana", "Plátano", "Cereza", "Fresa"];
var masFrutas = frutas.push("Uvas");
["Manzana", "Plátano", "Cereza", "Fresa", "Uvas"];
Para agregar al inicio del array, usamos:
var nuevaLongitud = frutas.unshift("Ciruelas")
["Ciruelas", "Manzana", "Plátano", "Cereza", "Fresa", "Uvas"];
Para eliminar usamos:
Pop lo que hará es eliminar el último elemento que existe en el array.
var ultimo = frutas.pop("Uvas");
["Manzana", "Plátano", "Cereza", "Fresa"];
Para eliminar el elemento del inicio usamos:
var borrarFruta = frutas.shift("Manzana")
["Plátano", "Cereza", "Fresa"];
Cuando queremos saber la posición de un elemento
var position = frutas.indexOf("Cereza");
1Loops: For y For…of
Los ciclos son una forma de hacer que una tarea se repita, sin tener que hacerlo de forma normal.
var estudiantes = ["Maria", "Sergio", "Rosa", "Daniel"];
functionsaludarEstudiantes(estudiante){
console.log('Hola, ${estudiante}');
}
for(var i = 0; i < estudiantes.length; i++){
saludarEstudiantes(estudiantes[i]);
}
Otra forma sería
var estudiantes = ["Maria", "Sergio", "Rosa", "Daniel"];
functionsaludarEstudiantes(estudiante){
console.log('Hola, ${estudiante}');
}
for(var estudiante of estudiantes){
saludarEstudiantes(estudiante);
}
While
var estudiantes = ["Maria", "Sergio", "Rosa", "Daniel"];
functionsaludarEstudiantes(estudiante){
console.log('Hola, ${estudiante}');
}
while(estudiantes.length > 0){
console.log(estudiantes);
var estudiante = estudiantes.shift();
saludarEstudiantes(estudiante);
}
Objects
En los objetos podemos poner una serie de características
var miAuto = {
marca: "Toyota",
modelo: "Corolla",
annio: 2020
};
Si queremos acceder una de las características lo haríamos así:
miAuto.marca
"Toyota"
miAuto.annio
2020A las propiedades que llevan funciones como valor, se le llaman métodos de objetos:
var miAuto = {
marca: "Toyota",
modelo: "Corolla",
annio: 2020
detalleDelAuto: function(){
console.log('Auto ${this.modelo} ${this.annio}');
miAuto.detalleDelAuto();
//Auto Corolla 2020
}
};
El “This” es una variable que hace referencia al objeto, en este caso, a su padre “miAuto”
Objects: Función constructora
Si queremos automatizar nuestros objetos, podemos hacer lo siguiente. Usando una función constructora.
function auto(marca, modelo, annio) {
this.marca = marca;
this.modelo = modelo;
this.annio = annio;
}
//generará una nueva instancia, un objeto que deriva de otro objeto.
var autoNuevo = new auto("Tesla, "Model 3", "2020");
//podemos generar varias
var autoNuevo2 = new auto ("Tesla", "Model X", "2018");
var autoNuevo3 = new auto ("Toyota, "Corolla", "2020");
Métodos de recorridos de Arrays
Método de filter
var articulos = [
{nombre: "Bici", costo: 3000},
{nombre: "TV", costo: 2500},
{nombre: "Libro", costo: 320},
{nombre: "Celular", costo: 25000},
{nombre: "Laptop", costo: 80000},
{nombre: "Teclados", costo: 10000},
{nombre: "Audifonos", costo: 90000},
];
var articulosFiltrados = articulos.filter(function(articulo)){
return articulos.costo <= 500
}};
Método de Map
var nombreArticulos = articulos.map(function(articulo){
return articulos.nombre
});
Método find
var encuentraArticulo = articulos.find(function(articulo){
return articulo.nombre === "Laptop"
});
Método forEach
articulos.forEach(function(articulo){
console.log(articulo.nombre);
});
Método some
var articulosBaratos = articulos.some(function(articulo){
return articulo.costo <= 700;
});
Eliminando elementos de un Array
.push()
El método .push() nos permite agregar uno o más elementos al final de un array.
.shift()
Ahora pasemos a la otra cara de la moneda donde necesitamos eliminar un elemento del array. .shift() eliminar el primer elemento de un array, es decir, elimina el elemento que esté en el índice 0.
