JS JavaScript Started Mar 9, 2021 = Mar 11, 2021 Done éQué es JavaScript? éComo nace Javascript? Nace con la necesidad de generar dinamismo en las paginas web y que a su vez los usuarios y las empresas pudieran interactuar unos con otros. éQué es Javascript? Es un lenguaje interpretado, orientado a objetos, débilmente tipado y dindmico. Débilmente tipado Se pueden hacer operaciones entre tipos distintos de datos (enteros con strings, booleanos con enteros, etc). Ejemplo 447"; // AT 4 * "7"; // 282+ true; // 3 false - 3; // -3Dinamico Corre 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. éRealmente es Javascript un lenguaje interpretado? Si,y la razén es que le navegador lee linea por linea nuestro cédigo el cual le indica lo que tiene que hacer, sin la necesidad de compilar. Todo esto es controlado por el motor de JavaScript V8 del navegador. JavaScript es Backwards Compatible Todas las funciones nuevas que salen de JavaScript no dafiaran el trabajo ya hecho, pero no se podré utilizar en nuestro entomo de trabajo inmediatamente. Para solucionar esto est Babel que permite utilizar las nuevas caracteristicas del lenguaje pero lo transforma a una versién que el navegador pueda entender. éPor qué JavaScript? * FRONT: Tiene opciones como Angular, React y VUE * BACK: Tiene NodeJS * MOVIL: Tiene React Native (Aplicaciones de Android y IOS) WEB DESKTOP: Tiene Electron HTML: Para maquetar la informacién. Texto, imagenes, videos, etc. CSS: Para darle estilo a la informacién, JS: Programacién para que la pagina sea dindmica o generar una app web. Elementos de un Lenguaje de Programacion// Tipos primitivos 48 // Numeros 3.14 "Diego De Granda” // Strings (cade nas de texto), Esto es la forma en la que puedo crear algo que se pueda i mprimir en la pantalla, o escribir informacién, que el usuario pueda ente nder y leer. utilizar palabras, o frases. ‘Diego De Granda‘ true // Boole anos, estos fueron inventados por George Boole, un Matenatico britdnico. y esto hace referencia a cosas que podamos validar. false null // Valores vacios (Empty values), es como un placeholder (espacio reservado para alg un valor) de algun valor faltante. undefined // Tipos de objetos o no pri mitivos (1, 2, 3, 4] // arrays { nombre: ‘Diego’ } // objetos NOMBRE —DESCRIPCION [Link] Sting Cadenas de texto Number Valores numéricos TIPOs PRIMITIVOS. Boslean —_Verdaderoo falso Nut Tipo especial, contone null Undefined Tipo especial, cntiene undefined Date (fechas) ‘TIPOS DE DATOS EN Tipos predefrides de) Rlegexo (expresiones requlares) JAVASCRIPT JavaScript Error (Gatos de err) Tipos definidos por el | Funciones simples progiamadsist2rio) Clases TIPOS OBJETO Sete de elementos 0 7 formadion tipo vector 0 ‘ArayS 4) ratz. Lo considerarems un objeto expecial. Objet global Objetos to proto ectiete Objet prtatno Otros Variables Variable es un lugar en memoria, Es una representacién de algtin lugar en la memoria para guardar datos.var nombre "Diego"; // Nonbre apuntara en algin lugar en la memoria, pe ro dird la sefial de = tonard ese string y lo guardard en ese lugar. y des pués si querenos utilizar ese valor, utilizarenos 1a variable Nombre para pedir que nos traigan ese string de memoria. // = es igual a operador de asignacién var edad; // Declarar edad = 30; // Inicializar var elementos = [‘Computadora’, ‘Celular']; // Aqui la variable seleccionaré toda una s eccién para los elementos del array, y después tendrenos acceso a toda la seccién destinada en memoria. var persona = { // de igual forma para el 0 bjeto nombre: "Diego", edad: 30 } Funciones Las funciones son las tareas que va a llevar a cabo el navegador. Existen 2 tipos de funciones 1. Declarativas 2. De expresién Ambas pueden llevar parametros, que son los datos que necesitan para ejecutarse. Cada parametro va separado por una coma, Cada instruccién que tenga la funcién debe terminar con ; // el nombre reservado de function y paranetros que recibira esa function function miFuncion() { // function declaration Declarativas expresién ret urn 3; } miFuncion(); // mandamos llamar la funcion var miFuncion = funct ion(a,b) { // function Expression (también conocidas como funciones andéni mas) return a + b; } mifuncion(); // mandamos llamar la variable como fun Sintaxis de cada tipo de funcién function saludarEstudiante(estudiante) { [Link](“Hola ${estudiante)~ )s // template strings (Plantillas de cadena de texto) } function suma(a, b) { // esta funcion recibe 2 parémetros, que se convierten en un placeho Ider de valores que se pueden utilizar dentro de la funcién. var resultad 0 = a+b; } // Return, cémo regresamos un valor con una function. functi on suma(a,b) { var resultado = a + b; return resultado; } function suma(a yb) { return a +b; } suma(2@, 38); Parémetros de una funcién.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 las palabras reservadas var y function, Lo que quiere decir que con las funciones declarativas, podemos mandar llamar la funcién antes de que ésta sea declarada, y con la expresién de funcién, no, tendriamos que declararla primero, y después mandarla llamar. Scope Scope es igual a, donde buscar por cosas (estas cosas son las variables), el Scope es el alcance que tienen las variables, depende de donde las declaremos y las mandamos llamar si tendremos acceso a ellas 0 no. Existen 2 tipos de scopes: * Global: Puede ser llamada a lo largo de nuestro programa * Local: Solo puede ser llamada dentro del bloque de cédigo en el que se declaro. var miNombre ‘Diego"; functi on nombre() { miNombre = “Alon so"; return miNombre; } nombre ()5 console. 1og(miNombre) ; nplo de lo que es ur Scope Global. var miNombre = "Diego" functio n nombre() { var miApellido = "De Granda"; return miNonbre + * "+ miapellido } nombre(); ¢ onsole. og (miNombre); console Log (miApellido) ; Ejemplo de lo que es un Scope Local, el Scope loc asa al momento de crear una funcién, esto genera un ambito diferente al global, al cual no se podra tener acceso desde el Ambito global. Ejemplos de como puede ayudar o crear error el tema del scope// Ejemplo 1, cémo con una funcion podemos canbiar el valor de la variabl e global var miNonbre = "Diego" function nombre(usuario) { miNombre = usu ario; console. log(miNombre); } nonbre(“Oscar"); console. log(*Hola ${miNom bre}, cémo estés?”); // Ejemplo 2, cémo podemos evitar reescribir el valo r de una variable gracias al scope, var miNombre = “Diego” function nombr e(usuario) { var miNombre = usuario; console. log(miNombre); } nombre("Osc ar"); console. log("Hola ${miNombre}, cémo estds?”); // Ejemplo 3, cémo si creamos un scope local, y mandamos llamar la variable fuera de la funcio n, nos puede crear un problema. function nonbre(usuario) { var miNombre = usuario; console. log(miNombre); } nombre("Oscar"); console. log(*Hola ${mi Nombre}, cémo estas?”); Hoisting Hoisting es cuando las declaraciones de variables y funciones se procesan antes de ejecutar cualquier cédigo, al momento de que se genere el hosting, las funciones se declaran primero, y después las variables. // Qué resultado esperas que n os aparezca si corremos este e Jemplo? "undefined" console.1o g(miNombre); var miNonbre = "D iego"; // Lo que sucede con el hoisting var miNombre = undefi ned; [Link](miNombre + "s oy hoisting"); miNombre = "Die go"; Hoisting con variables Hoisting Hoisting es un término que no encontraré utilizado en ninguna especifcacién previa a EF hrtosv/developer mozaorges/docs/6 hey(); function hey() { consol [Link]('Hola ' + miNonbre); }; var miNonbre = ‘Diego’; // Lo que sucede con hoisting functi ‘on hey() { //La funcién se dec Jara hasta arriba, y después s e declaran las variables. cons ole. log("Hola * 5 var miNonbre e = 'Diego'; + miNombre) ; 5 hey(); miNombr Hoisting con funciones.{Qué es el hoisting? does not visualize the output En JavaScript, las declaraciones (por ejemplo, de variables o funciones) se mueven al principio de su scope 0 ambito. Este & httpsi/[Link]/@anamartinezaguilar/qué-es-el-hoist. Coerci6n Coercién es la forma en la que podemos cambiar un tipo de valor a otro, existen dos tipos de coercion: * Coercién implicita: es cuando el lenguaje nos ayuda a cambiar el tipo de valor. * Coercién explicita: es cuando obligamos a que cambie el tipo de valor. //Ejemplos de Coercién: var a = 4 + "7"; //Convierte a 4 en un string y 1 © concatena con el "7", por esto regresa un string de valor "47" 4 * //Convierte al "7" en un niimero y realiza la operacién, por esto devuelve 28 var a = 20; var b= a+ ""; //Aqui concatenamos para convertir la vari able a string (coercién implicita) [Link](b); var c = String(a); //A qui obligamos a la variable a convertirse en string (coercién explicita) console. log(c); var d = Number(c); //Aqui obligamos a la variable a conve rtirse en niimero (coercién explicita) console. log(d); Valores: Truthy y Falsy Son valores que son verdaderos o falsos Boolean(@); //false Boolean(null); //false Boolean(NaN); //false Boolean( undefined); //false Boolean(false); //false Boolean(""); //false Ejemplos en los que Boolean devuelve Falso.Boolean(1); //true para 1 o cualquier nimero diferente de cero (@) Boolea ("a"); //true para cualquier caracter 0 espacio en blanco en el string B oolean([]); //true aunque el array esté vacio Boolean({}); //true aunque el objeto esté vacio Boolean(function(){}); //Cualquier funcién es verdad era tanbién Sjemplos en los que Boolean devuelve verdadero Operadores: Asignacioén, Comparacion y Aritméticos // Légicos !false // operador not (no) // Asignacién var a = 45 // comparacién 3 == '3' // es igual 3 === '3' // es estri ctamente igual 5 < 3, 5 <= 3, 5 > 3, 5>=3// menor, menor © igual, mayo, mayor o igual a && b // operador and (y), este operador genera una valicacién siempe y cuando anbas variable s sean verdad, “var 1 y var 2" true || false // operador or (0), este operador genera una validacion siempre y cuando cu aquier de as variables sea ver dad, “var 1 0 var 2" Unary operator, aqui es porque hay solo 1 operando involucrado // de operacién 3 + 2 50 - 16 10 * 3 20 / 2 ‘Diego ' + ‘De G anda’ Binary operators, y esto es porque significa que estan 2 operandos involucrado. var edad = 40; edad++; // oper ador de incremento por 1 edad = 2; edad; Operador que solo se pueden utilizar con variables Expressions and operators This chapter describes JavaScript’ expressions and operators, including assignment GF itpss7devetopermozilaorg/en-US/doc. Condicionales: If, Else, else if Esto nos ayudaré para poder hacer decisiones.var esUsuario = true; if(esusu ario) { // con el if validamos que 1a condici ole. 1og(‘Tiene acceso al conte ido"); In sea true cons Condicional a#. var edad = 18; var accion; if( edad >= 18) { accion = ‘Puede votar’ } else { // call back a ccion = ‘No puede votar’ } con sole. log(accion) ; Sjemplo de validacién. var numero = 1; var resultado; if(numero === 1) { resultado = "Si son un 1"; ) else { result ado = ‘No soy un 1"; } condita on ? true : false; var numero 1; var resultado = numero = 12 ‘Si son un 2° : ‘No soy un 1°; console. log(resultado) ; Operador ternario. Switch var esUsuario = false; if(esus uario) { console.1og(‘Tiene ac ceso al contenido’); } else ( console. log(‘Tienes que crear una cuenta para poder acceder al contenido’); } Condicional else var edad = 18; var accion; if( edad === 18) { accion = "Puede votar, seré su ira votacién’ } else if(edad > 18) { accion ‘Puede votar’ } else { // call back accion = ‘Aun no puede vo tar’ } console. 1og(accion) ; Ejemplo de else iF Operador condicional (temnario) Sila condicién es true, el operador retorna e! valor de la expri; de lo contrario, devuelve el GF inps//developermosilaorg/as/docsW. ‘Switch es una forma diferente de validar, esta depende del caso que sea verdadvar numero = 1; var resultado; /* Switch compara con un === por esa razén los elementos tiene que ser idénticos */ switch (numero) { case 1: result ado = "Si es uno"; break; case 10: resultado = "Si es diez"; break; case 100: resultado = "Si es cien"; break; default: resultado = "No match"; } console. log (resultado) ; Arrays Un Array es un tipo de estructura de datos, es un objeto tipo lista de alto nivel Puede guardar datos distintos dentro, guarda los datos en forma de lista, var frutas = []; // Array Literal Syntax var frutas = ["Manzana", “Platan 0", “Cereza", "Fresa"]; [Link](frutas); console. log(frutas. length) ; // length es una propiedad del array // Acceder (por indice) a un elenent o del Array console. log(frutas[@]); // Los arrays iician en "9" // .push(); var masFrutas = [Link](“Uvas"); // Esté metodo afadira “uvas" al final del array [Link](frutas); // -pop(); var utlimo = fr [Link]("Uvas"); // Eliminard "Uvas" del final console. log(frutas); // u nshift() var nuevaLogitud = [Link]("Uvas"); // Afiade "vas" al in icio [Link](frutas); // shift() var borrarfruta = [Link] ("Manz ana"); // Elimina “Manzana” del inico [Link](frutas); // .indexOf(); var posicion = [Link]("Platano”); // te dard la posicién de ese i tem en el array console. log(frutas); Métodos para mutar arrays JavaScript Arrays Wall orga with zed and easy to understand V e HTML, 3b building tutorials 5S, JavaScript, SQL, LW httpsy/[Link]/js/s_arrays.asp sof examples of how to u JavaScript Array Methods ‘The JavaScript method tostring() ‘comma separated) array values. nverts an array to a string of sult WW hittpsi/[Link]/js/js_array_methods.aspLoops Los loops (buucles), son manera rapida y sencilla de hacer algo (una tarea) repetidamente For For of var estudiantes = [ ‘Maria’, var estudiantes “Maria’, ‘Sergio’, ‘Rosa’, ‘Daniel’ ]; ‘Sergio’, ‘Rosa’, ‘Daniel’ J; function saludarestudiante(est function saludaréstudiante(est udiante) { console. log(*Hola, udiante) { console. log(*Hola, S{estudiante)"); ) for (var i ${estudiante}"); } for (var es = @; 4 < estudiantes. length; 4 tudiante of estudiantes) { sal ++) { saludarEstudiante(estudi udarEstudiante(estudiante) ; antes[i]); While var estudiantes = [ ‘Maria’, ‘Sergio’, ‘Rosa’, ‘Daniel’ ]; function salud arEstudiante(estudiante) { [Link](“Hola, $(estudiante}’); } while (e [Link] > @) { // Aqui la tarea se hard siempre y cuando sea tr ue, cuando Llegué a false, dejard de hacer 1a tarea var estudiante = estu [Link](); // shift() es un método que saca un elemento del array d e la posicién @ a la Ultima, Pop() comienza de la Ultima a la primera. sa ludarestudiante(estudiante) ; } Objects Un objeto es una coleccién de propiedades, y una propiedad es una asociacién de key (nombre, o clave) y valores. var objecto Object Literal Syntaxvar miAuto = { marca: "Toyota", // key - value modelo: “Corolla”, annio: 2020, detallesDelauto: function() { // Metodo de un objeto (una funcién d entro de un objeto) return “Auto ${[Link]} ${[Link])”; } }; miAu [Link] [Link] [Link](); function auto(marca, modelo, annio) { // Creas una funcién con los parame tros que va a recibir, [Link] = marca; // Utilizanos el "this" para a signar valores a las propiedades del objeto [Link] = modelo; [Link] nio = annio; } var newAuto = new auto("Tesla", "Model 3", 2020); Funcién constructora Métodos de recorridos de Arrays Método Filter Valida si es un true o false para poder meterlos al nuevo array, y éste método no modifica el array original. var articulos = [ { nombre: "Bici’, costo: 3000 }, { nombre: 'TV', costo: 2580 }, ( nombre: ‘Libro’, costo: 326 }, { nombre: ‘Celular’, costo: 1000 @}, { nombre: ‘laptop’, costo: 20080 ), { nombre: ‘teclado’, costo: 500 }, (nombre: ‘audifonos", costo: 1780 } } var articulosFiltrados = articu los. filter (function(articulo){ return [Link] val a 108 */ }); console. log(articulosFiltrados) ; 500 /* Menor o ig Método Map var articulos = [ { nombre: "Bici’, costo: 3000 }, { nombre: 'TV', costo: 2580 }, ( nombre: ‘Libro’, costo: 32@ }, { nombre: ‘Celular’, costo: 1000 @ }, { nombre: ‘laptop’, costo: 20080 }, { nombre: ‘teclado', costo: 500 }, (nombre: ‘audifonos", costo: 1700 } ] var nombreArticulos = articulos -map(function(articulo){ return [Link] }); console. 1og(nombreart iculos);Método Find De igual forma, con este método se valida un true o false para encontrar un elemento y si esté lo regresa y si no, no pasa nada. var articulos = [ { nombre: 'Bici’, costo: 3000 }, { nombre: 'TV', costo: 2580 }, ( nombre: ‘Libro’, costo: 32@ }, { nombre: ‘Celular’, costo: 1000 ey, ¢ ‘laptop’, costo: 2¢00@ }, ( nombre: ‘teclado’, costo: 500 }, (nombre: ‘audifonos", costo: 1700 } ] var encuentraarticulos = articu los. find(function(articulo){ return [Link] “Laptop'; }); con sole. log(encuentraArticulos) ; Método forEach var articulos = [ { nombre: 'Bici', costo: 3000 }, { nombre: 'TV', costo: 2500 }, { nombre: ‘Libro’, costo: 320 { nombre: ‘Celular’, costo: 1000 @}, { nombre: ‘laptop’, costo: 20000 nombre: ‘audifonos", costo: 1700 nombre: ‘teclado’, costo: 500 articulos. forEach(function(arti culo){ console. 1log([Link]); }); Método Some Este método nos regresa un false o un true para validar si hay 0 no articulos que cumplan la validacién. var articulos = [ { nombre: "Bici’, costo: 3000 }, { nombre: ‘TV’, costo: 2500 } “Libro’, costo: 328 }, { nombre: ‘Celular’, costo: 1600 @}, { nombre: ‘laptop’, costo: 20000 nombre: ‘teclado’, costo: 500 }, (nombre: ‘audifonos", costo: 1788 ) ] var articulosBaratos = articulo [Link](function(articulo){ return [Link] <= 788; }); console. log articulosBaratos) ; ( nombr Método Every Este método checa que todos los elementos en el array cumplan con la validacién que ponemos, y al final nos regresa un true o un false.var articulos = [ { nombre: "Bici’, costo: 3000 }, { nombre ‘Libro’, costo: 320 }, { nombre: ‘Celular’, costo: 1000 ‘laptop’, costo: 2¢¢e@ ), { nombre: ‘teclado’, costo: 500 { nombre: ‘audifonos*, costo: 1788 } | var articulosBaratos = articulo [Link](function(articulo){ return [Link] <= 700; }); console. log (articulosBaratos) ; TV", costo: Método Reduce Este método corre una funcién en cada elemento del array, para comenzar a sumar los costos de cada elemento. var articulos = [ { nombre: "Bici’, costo: 3000 }, { nombre: ‘TV', costo: 2580 }, { nombre: ‘Libro’, costo: 32@ }, { nombre: ‘Celular’, costo: 1000 @ }, { nombre: ‘laptop’, costo: 20088 }, { nombre: ‘teclado’, costo: 500 }, (nombre: ‘audifonos", costo: 1788 } ] var costoTotal = [Link] ce(function(totalActual, articulo){ return [Link] + totalActual; , @); // £1 @ sera 1a cantidad inicial con 1a que comenzard el totalactu al console. 1og(costoTotal) ; Método Includes var articulos = [ { nombre: "Bici’, costo: 3000 }, { nombre: ‘TV’, costo: ‘Libro’, costo: 328 }, { nombre: ‘Celular’, costo: 1000 ‘laptop’, costo: 2¢¢8@ ), { nombre: ‘teclado’, costo: 500 nombre: ‘audifonos", costo: 17@@ } ] var numeros = (1, 2, 3, 4, 5, 6 ]; var incluyeNumero = [Link](2); console. log (incluyeNumero) ; Array Los arrays son objetos similares a una lista cuyo prototipo proporciona métodos para efectuar operaciones de recortido y de mutacion, Tanto la longitud como el tipo de los elementos de un array son variables. Ey itosudeveloper mola orges/docsWeb/avaScriptReference/Global Object/Aray