Está en la página 1de 28
ae SJ cursovisuatyerActico & PLT acodkomacolan<=1iko mn s backend Introduccion a JavaSript Nuestra primera aplicacion \ Sintaxis y estructura \ Control del flujo de! programa 7 2 Ga @® ox 8 O Ont craw (BES S5FF curso viSuaL Y PRACTICO Direccién Edina —_Atanci6n a eetr, IMiguolLodertremer —_suseripcionasy ventas ae usershop@redusers.com rs #54011) 4110-8700 Nv +52-58-8121-9560 Publicidad ublidade@redusers.com Produecion graiea —*54/011/41108700 Gustavo De Matteo Fernando Ojam Autor Matias tacono WEB Full Stack oY Taned ICOM icedsnesdice| backend tinue Agni Cp Von await ch ste. R908) ie Bare el 54471) 4506 96/08 De ‘altplnas Si OND sSiew Pea 1:2) 1SSHEM, Ben Aes tO 4806-0114 Mee DF reo OicacaSA dN, Nt? Ieee ache Pda - a Gt, S68 Men ler Coup suc de perits bes is SA CV Cero W 58D Cl Gras Mic, Deleon IAC) Ds eal (ono T5167. ane Cebu Skea SA, apie Para E35 pa 2 Sar ee Lr St «1290 rem 21 ray Ea SAL, Py 182, engi re e30 9¢ a6 Vesa Derbi Carrs Bou Aas. Eco Bo oe as 29° Sa Nowe al La Pa Cas, 80212-4840 Gove y cis Savi Tc, st zest; Fox oa SA Novice d 1880, 1390, CTSOBE, Gund Auipona do Bucs Aves. Arr Fata Wain mgt © BANA. 2515-85 Ts cos enact pb raps ea nen par po in mato.emel pas pep oe sacar edi Laetrd e sune esa alr ye crsacaeta de eaci ncuron els ens yous ese abe, {nano ptt at avs ean pn bss ab eee We, UE le SRERS OS mn EN mR SRS. (ase 225 ya, un aa, Ac, Introducci6n a JavaScript BIBI Frontend evanzado: JavaScript IE] Sintaxis, seméntica y estructura EIEI Control de flujo del programa HIE] Funciones y encapsulamiento de codigo BGI Funciones recursivas oral oe IG Funciones natives CONTENIDO ADICIONAL ONLINE Codigo fuente, elementos graficos utilizados en los ejemplos y otros contenidos 011-4110-8700 | USERSHOP.REDUSERS.COM adicionales se pueden descargar en TERRE the tsk ceo) Peete esreneceane Frontend avanzado: JavaScript En la caja de herramientas de todo desarrollador web, se encuentran los lenguajes que les dardn vida a las ‘Paginas, agregandoles interactividad y comportamientos personalizados. JavaScript es alli uno de los lenguajes dominantes. Para programar con JavaScript, no nocesitamos ningiin compilador o motor particular: un navegador, un editor de texta y nuestra imaginacién para crear funcionalidad. Usemos el entorno Brackets para ‘rear nuestra primera aplicacion JavaSeript. El navegador es el encargado no solo de leer e interpretar los tags HTML y CSS de nuestra pagina, Crear una aplicaci6n JavaScript Crearemos una pagina web que, ademas de los tags HTML sino también de interpretar y ejecutar cualquier cédigo JavaScript que coloquemos en ella. Cada navegador contiene su propio motor de interpretacion y ejecucion de JavaScript. Los motores intentan seguir los lineamientos del estandar de JavaScript. estandares, contendré nuestro primer cédigo JS ejecutandose en el navegador. i En Brackets creamos un nuevo archivo HTML [conel nombre de index html. En el eddigo hemos creado cinco diferentes variables (var) «que contienen distintos tipos de datos, desde néimeros (10) hasta variables booleanas (true, false) con solo asignar el valordeseado @ una variable particular. Aunque podemos asignarles cualquier nombre a nuestras variables (aqui simplemente las hemos nombrado a,b, c,d ye), es preferible que ese nombre tenga algiin sentidao significado para hosotras.javaSeript es un lenguaje dindraico no tipado por lo que sus variables se adaptarén alos valores que puedan contener, Para poder ver los resultados de la ejecucién de nuestro cécigo, usaremos la instruccién console log, de JavaScript. La escribiremos debajo de las variables declaradas en el cbdigo anterior Esta instruceién nas permite eseribir en la consola det desarrollador del navegador el contenido de variables creadas por nosotros. Para poder ver los resultados, necesitaremos abrir la consala desde el navegador web presionando la tecla Fi2. aca oacran > Los lenguajes de tipado eens fuerte son aquellos que el esperan explicitamente re definir un tipo de dato Waagen tt. para una variable. ‘Al presionar F12, la . consola de desarrollo La variable y su ejecucién 5 aparece y nos muestra < 2 AV itaee estan asociadas a su — una de les. tipo de dato y solo puede a contener ese tipo de valor. Clase 05 JavaScript rn ee Pr ‘Una variable con valores numérico (sin importar la Number nee vara=5 longitu, Se forma a asignarto un nGimero une vaiabla, Variables con datos que solo Bool a var a = false; pueden ser verdaderasofalsos. Las variables de este tipo representan cadenes ce texto, String ‘como palabras o frases, Se forma encerrando un conjunto var a = ‘hola’ do caracteres entre comillas simples odobles. Tanto coma tipo de dato o en une variable, Null me var a = nul: representa un valor nuo. En JavaScript existe une diferencia entre un valor nuloy Undefined unvalar ne defnido. Sino hemos defnido implicramente var a; une variable, esta seré indetinida Tabla. En JavaScript podemos tener diferentes tipos de variables. Cada una de elias contiene un tipo de datos diferente, aunque las declararemos de igual forma sin importar cual eontendrén en definitiva Algunos de los diferentes tipos de datos que encontraremos en JavaScript aparecen ddscriptosy eemplificados en la Tabla 01, Todas las variables en JavaScript deben declararse ‘mediante el uso de la palabra reservada var. Si bien ppoclemos omitir esta palabra reservada, se considera una buena practica hacer uso de ella, Uf Forma adecuada de declarar una variable var valorl = 10; J No arr modo anterior */ valor? = 20; ura error pero se reconienda el console.log(‘La euma \ + (valor + valer2)): console. log(c)3 console. 1og(d); 38 console. logte);*/ po te cane) | Ba Consote Enla consola © ¥ tp ¥ Ci Presene _ Podomos eral resultado de la suma La suma es: 38 REDUSERS Ei PROGRAMADOR WEB Full Stack datos en JavaScript. a COMENTARIOS EN JS Dena sola linea: se escribe dos barras (/) al principio de la linea por comentar. Por cada linea que se comentaré, deberemos agregar un par de barras invertides. De miltiples lineas: comienzan con una barra soguida de 0 (/*)y cierran mediante un sterisco y una barra (/). Este tipo de comentarios, ‘os permitiré abarcar mayor cantidad de cédigo. Una variable puede tomar diferentes valores en el transcurso del tiempo. En JavaScript, cada nuevo valor modificard el tipo de dato contenido por dicha variable, Para conocer el tipo de dato que contiene una variable, deberemos usar typeof. Probemos ahora cambiar el contenido de nuestro bloque 37) Genes El manejo de 4 Line 1, Column 1 expresiones booleanas por medio de operadores | = légicos es clave para © Preserve crear aplicaciones ccomplejas. © ¥ wp ¥ 2 es igual a 10 REDUSERS Ei PROGRAMADOR WEB Full Stack a switch..case Esta estructura nos permite cjecutar diferentes bloques de cdg sobre la base de una coincidencia previamente cevaluada. diferencia del if donde podemos colocar una expresidn booleana para evalua, en el switch haremos todas las comparaciones contra una misma expresin con diferentes aciones basadas en el resultado de esa expresién var texto ‘Hola Javascript switch( texto) ‘care "hola: ‘Console, tog(“El texto no es gual a Drea, case HOLA: ‘onsole.1og("El texto no ex igual a "HOLA™'); breaks, case Wola Javascript’: Console,Tog("El texto no es igual a "Hola JavaScript") breaks, ‘efaul console.tog( "El texto no es gual a otra cosa! BESESSEUEERED IS 7 mp ¥ GB Preenelog EL texto no es igual a “Hola Javascript” 3 | CIERRE DEL BLOQUE CASE Para cerrar un bloque case, al final de nuestro cédigo, deberemos agro palabra reservada break. De no hacerlo, el cédigosiguionte soguirasjecuténdose, incluso sifuese una instruccién case no coincidente con la expresién provista, while La funciGn vite nos permite ejecutar una misma aecién una cantidad particular de veees La duracin de las epediiones estara dada por una expresién booleana, Mientras esta se cumpla (arroje verdadero), nuestro while seguird active. Debemos tener mucho cuidado con las funciones del estilo Se i onary bucle como el while ya , que, sino controlamos ees cranes correctamente su salida, podemos caer en un bucle infinito; esto har que © V top ¥ O Presenelog nuestra aplicaci6n deje =e de funcionar. Clase 05 JavaScript do..while ALigual que while, nos permite ejecutar bloques de cédigo una cantidad definida de veces, La principal diferencia sera que siempre ejecutaremos el bloque de c6digo por lo menos una vez, for Este tipo de bucle es uno de los més versatiles, En un bbucle del tipo for podremos, ademas de ejecutar un Dloque de cédigo de forma reiterada, crear nuevas variables, analizar expresiones tras cada interaccidn incluso ejecutar cédigo independientemente del bloque que portenece al bucle Una funcién de! tipo forse divide en 3 partes, cada una de ellas separadas por un ; (punto y coma). La primera parte hace referencia ala inicializacién de variables que seusaran dentro del bucle; podremos inicializar tantas como necesitemos. La segunda parte se refiere a la expresidn booleana por evaluar; la ditima seccién se utiliza para manipular las variables declaradas en la primera seccién o ejecutar ‘codigo independiente. En un bucle de este tipo ninguna de las tres secciones es obligatorias. Es posible dejarlas vacias y manipular el bucle nosotros mismos, varvecesASumar = 10; var i= 0; for (1) ( uma = suma + 1; ieien Af (i >= 10) ( break: ) REDUSERS Ei PROGRAMADOR WEB Full Stack we Le eS Systran St cone. tg(otal:* + sm) tsrtn 3) sa HO} Line 1, Column 1 cnc © ¥ top v Gi Presenelog rea Be vette - 0; Swen ¢ G) er (or 1 = 05 1c vecetsmars Lo) ¢ Seria, | > 5 GG] consre-tog Tras * + sme) S| Gl epsriee | «nes Line 1, Column 1 const] OV top v G Preserve log Total: 38 , eee ee ee En el c6digo anterior, podemos ver que no definimos ninguna de las tres seeciones en la declara del bucle, pero manipulamos su salida mediante el incremento de forma manual de la variable i y su verificacién mediante un if. Al cumplirse la condicién del if, el bucle se termina, for. in Esta funcién es utilizada cominmente para recorrer colecciones de datos. Si bien es posible realizar este recorrido con cualquiera de las estructuras de bucle anteriores, con esta podremos ahorrarnos escribir cédigo adicional varmisbatos = (1, 2, 4, 3, 6, 7, 20); for (var dato in misDatos) { console. log(dato); 2 [| Aujotnemt x var misDatos = [1, 2, 4 console. 1og(misdatos[0}); Console. 1og(misDatos(31); [for (var dato in misdat console 1og(dato); od 4) Line 1, Column 1 U1 Escribimos el cuarto elemento 3,67, 11 EserSbinos el priner et 0s) break y continue Tanto break (‘interrumpir’) como continue (‘continuar’) son instrucciones que nos permiten detener el flujo de un ebdigo en particular oInterrumpirl para darle paso al siguiente bloaue for (var i = 0; console. 10g(3); £< 20; HH) /* Si la variable i es igual a 5 interrumpimos 1a ejecucién */ 3f == 5) 1 break: ) ) console.1og(‘E1 bucle finaliz6'); for (var i = 0; i < 10; i¢#) { // Si 1a variable i es igual 2 5 // texminamos el bloque actual // y continuamos con el siguiente valor af (== 5) 1 continue; » console. logti): y console.log(*Fi bucle finalizé'); Como resultado del cédigo anterior, eseribiremos cen la cansola los niimeros del 0 al 9 exceptuando el 5, ‘ya que el fragmento de cécdigo encargado de ejecutarlo fue interrumpido por la sentencia continue. Clase 05 JavaScript Funciones y encapsulamiento de codigo Es natural que debamos ejecutar un fragmento de cédigo ‘ms de una ve2. Por ejemplo, si necesitamos sumar ‘nGimeros, la mejor alternativa seré contar con un eédigo genérico que pueda mancjar esta situacién, yutilizarlo cada vez que sea necesario, Una funcién es una forma de agrupar una determinada cantidad de funcionalidad o bloques de cédigo bajo un nombre, para luego poder ejecutarlo tantas veces como sea necesarlo, Una funelén posee particularidades {que la diferencian de otras estructuras del lenguaje’ poder recibir parémetros en el momento de ejecutarse, retornar cualquier tipo de dato, objeto u otra funcién, convertirse en un objeto, y hasta delimitar el alcance de si misma y las variables que contiene. a] 2) heady “title Prograndor fullstackc/titie> ‘beay> “Funciones an JavaSeripte7h> sseript> > 5 6 7 8 3 30) function AC) ( u 2 3 aa) 405, 16 17 yet }> Line 1, Column 1 © VY wp ¥ Gi Presevelog ‘Texto en consola cesde Javeserint [ES | oncionesuml x oneole,2og( ‘Texto en console desde 2evaScript'); La dectaracién do una funcién ‘on JavaScript raquiore de la palabra reservada function ‘seguida por el nombre de la ‘uncidn,en este caso, A. Para ejacutar una funcién, tendremos que escribir el nombre ‘quelle hemos colocado sequido ‘de un paréntesis de apertura vyuno de cierre. 4 Alejecutarsela funcién A, esta scribe eltexto en la consola. Enel desarrollo de software, uno de los pilares de las buenas practicas enel momento de escribir codigo es no repetir el mismo cédigo una y otra vez. REDUSERS Ei PROGRAMADOR WEB Full Stack DE Las funciones, como hemos dicho, tienen como objetivo encapsular funcionalidad 0 bloques de e6digo, para que podamos ejecutarla tantas veces como queramos sin necesidad de repetir el mismo cédigo una y otra ver. (Hl funciones:html x 15 16 17 38 function sumar(vator1, valor2) { 19) console.log(valor1 + valor2); 2) > 22 sumar(10, 20); sumar(34, 15) resultado de las suas es escrito enla console. Debido a que JavaScript es un lenguaje dindmico, y como hemos aprendido, las variables adquieren su tipo de datos sobre la base del valor que le asignemos, en este caso, la funcién sumar no esta limitada a sumar niimeros, sino que podré, también, aplicar el operador de suma a cualquier otra tipo valido, *mundo!"); sumar(‘Hola °, sumar(false, true); 1 Sumamos un texto y un numero sumar('Un texto’, 20); JavaScript se encargara, en la mayoria de los casos, de resolver las operaciones, para conseguir un resultado vilido. En los casos anteriores, todos son posibles, y todos escribiran el resultado en la consola, Por lo tanto, un punto clave para poder generar este encapsulamiento de c6digo es la posibilidad de pasarle valores, también llamados pardmetros, ala funcién en el momento de Ilamarla Lafuncidn sumar recibe dos pardmetros. Estos pparémetros son representados por variables y deben ‘colocarse dentro de ls paréntesis que definen Ia {unolén. En nuestro easo, intentamas sumar dos valores, que estarén representados por las variables valorly valor2. neste punto, podemos llamar: ‘veces como necesitemos sumer dos valo pparématros son afiadidos desde la tamad funolny deben ser colocados enol misma orden en ‘el que queramos que se asignen a las variables de entrada de [a funcién. De esta forma 1034 serén ‘lojados en la variable vator1tras cada llamada, y20y15, en valor2. la funcién tantas Los Hola mundo! 2 Un texto20 Pats ol primer caso, obtenemos una coneatenacién detos dos textos; para el segundo, un valor numérica que representa la suma de un valor 0 (falso) y un 1 (verdadero); y una concatenacin entre el texto y el inimero para el timo caso Ea BITS BOOLEANOS Un valor booleano es representado por un solo bit binario, Esto es, o.un 10.un 0. Los tipos booleanos pueden, entonces, contener solo estos dos tipos. Cuando el valor es equivalente a1, decimos que su valor es verdadero y decimos que es also cuando ‘su valores 0. También se hace alusion a prendido (verdadero) o apagado (falso), como si se tratase de tuna bombilla eléctrica en sus dos posibles estados. Clase 05 JavaScript Argumentos indefinidos en funciones Debido al dinamismo de JavaScript y a diferencia de otros lenguajes de programa: los parémetrosen la firma de la funcidn pueden Hlegara ser un simple formalismo. Sibien es una buena practica definir la firma de una funcién de forma correcta, podemos encontrar un caso en el que la funcién no tenga firma alguna, pero igual pueda recibir parémetros. function sumar() { sumax(10, 20, 30, 40); sumaz(’A!, °BY, C%, °D!, TB, FD: En el ejemplo anterior, tenemos la misma funcién sumar, pero en el momento de llamarla intentamos enviarle una cantidad diferente de parémetros y, al mismo tiempo, nuestra funciéa no contiene, en su firma, una lista de variables para alojar dichos parémetros. b)oa es menor que b(a ° 5 Si) function estenor(a, b) { Se return @ cbs 3) > G1) 4¢ (estayor(1e, 5)) ¢ 62) console. 1og( ‘18 es mayor que 5*); 8} 5) 4¢ (eshenor(5, 10)) ¢ 56) console. 1og(“18 no es menor que 5); o One 1,Column 1 ¥ [Console © FV wp + G Preseveles we mare we 5 1o no cs aeror que Sl Enambos casos as > foncionesretonen un valor verdadero yhacen {ue el bogue nical dels sontoncia ise ejecute, Funciones y variables Cuando le colocamos un nombre a una funei6n no soo lo hacemos para poder electarla luego En JavaScript, ese nombre es utlizado como una variable que contiene una referencia a dinde se encuentra dicha funci6n.Pensemos que es como si conociéramos la direccidn de e-mail de una persona. Podemos envarle un mensaje, pero no Somos los duehos de cha caslla; sabemos cima llegar «ella por medio del nombre de a casilla,Por est, es posible almacenar una funcién en una variable. var sunar = function(valort, valor2) ( return valorl + valor2; ye sumar(10, 20); En este cédigo, a declaracién de la funcién ya no pose un nombre, pero es contenida en la variable sumer. Esta variable se transforma en el elemento de referencia para poder llegar ala funcién. Siestd almacenada en una variable, podremos tratar esta funcién como si fuese un dato mas. var sumar = function(valori, valor2) ( return valorl + valor2; » sumar(10, 20); r be (40, 30); La variable b toma el valor de sumar para ejecutarla funcion enlallinea siguiente, Notemos que a asignacién de sumar ‘ab se realiza sin los paréntesis; de esta forma, se toma ta referencia a la funcién y no su efecuciéin, Ahora tenemos, tanto en la variable sumar como en b, la referencia ala Una funcién que no posee nombre es considerada anénima. Debido ala ausencia de nombre, no es posible ejecutarla salvo por medio de una variable que la referencie. Clase 05 JavaScript funcién. El objetive final de esto es que podemos generar ‘igo que nos permita ejecutar diferentes funciones baséndonas en el comportamiento del cédigo. function ejecutar(tn, valort, valor?) ( returnfn(valorl, valor2); ) functionobtene:Funcionalidad(tipo) { switch(tipo) ( return function(vi, v2) ( return vi ¢ v2; iB break: case ‘resta’: return function(vi, v2) ( return vi = v2; ‘multiplicacien’: return function(vi, v2) { return vi * v2; eae! sureeeese Ciarercres 0 tp + G Pmmetas REDUSERS Ei PROGRAMADOR WEB Full Stack return function() ( return ‘Esta funcién no es matematic: b break; > » var £ = obtenerFuncionalidad('resta’); var resultado = ejecutar(f, 10, 20); £ = obtenerFuncionalidad(‘otza’); resultado = ejecutar(f, 10, 20); console. logis pultado); La funcién ejecutar se limita a ejecutar una funcién pasada por parimetro, paséndole los dos valores que se le envian a ella. La siguiente funcién, obtenerFuncionalidad, retorna diferentes funciones anénimas dependiendo del valor analizado por la sentencia switch. Como estas funciones son anénimas pero retornadas por la funciéin ‘obtenerFuncionalidad, cada retorno es almacenado en a variable variable que sabe c6mo llegar a dicha funcién. Elresultado final es la ejecueion de cada funcion 1yla eseritura de su resultado en la consola I Imagen 1. Cada resultado Scorresponde una de “tas fnsonesretradas por la sentencia such Yalmacenadas en una var Funciones recursivas Eneapsular cédigo es una de las tareas mas comunes cen laescritura de cédigo. Ast como podemos agrupar ‘un comportamiento légico dentro de una funcién y reutilizarla, existen funclones que pueden llamarse a si mismas para conseguir comportamientos particulares, Una funcién recursiva es una funcién que, dentro de ‘su cuerpo, se ama a si misma pasdndose diferentes pardmetros para conseguir un resultado distinto al de Ia llamada anterlor. El objetivo de este tipo de funciones es obtener resultados que, de otra forma, necesitariamos lograr a través de una légica mucho ‘mas complejao, incluso, imposible. Un caso comin es la creacién de arboles de navegacién, como menis, las carpetas en nuestra computadora, en los que una carpeta puede contener una o varias carpetas hijas, Yy sus hijas, otras hijas, y asf sucesivamente, W verazquia de carpetas impresas en consola carpeta Padre aija 1 Bija 2 Hija 2.2 Hija 2.2.2 Hija 2.2 Enel ejemplo anterior, podemos ver una estructura de carpetas que necesitamos representar en la consola. Es importante destacar que este arbol podria tener tantos subnodos como queramos y que estos puedan modificarse en cualquier momento, Podriamos ‘optar por crear bucles anidados, pero esto haria que necesitéramos tantos posibles bucles como profundidad posea nuestro arbol, yo harfa imposible de programar. var cazpetas = { Nombre: ‘Cazpeta Padre’, SubCarpetas: [{ Nombre: ‘Hija 1, SubCarpetas: (1 de Wombre: Subcarpeta: ‘Hija 2’, u Nombre: “Hija 2.1', SubCazpetas: [{ Nombre: ‘Hija 2.1.1', SubCarpetas: (] y del Nombre: ‘Hija 2.2’, Subcazpetas: [] ul n » El c6digo anterior es una representacién de la estructura de carpetas esperadas en formato de objetos de JavaScript. Cada objeto cuenta con dos propiedades. La propiedad Nombre representa el nombre de la carpeta, yla propiedad SubCarpetas, un array de objetos que representa otras carpetas. El siguiente paso ser escribir una funcién que pueda obtener este objeto ¥y comenzar a escribir los diferentes resultados, xe Si console. 1op(carp.tonbre); Bo 35 esertntr_carpetas(carpetas); O- bne Golan TncRion coer corprtastem) € Const © V ep + G Preeneles Carpeta Padre podemos escribir “el nombre de la Elsiguiente paso sera poder escribir todas las subcarpetas contenidas en la carpeta enviada ala funcién. functionescribir _carpetas(carp) { console. log(carp.Nombre); for (var i= 0; i 0) ( if ((exponente & 1) resultado *= b; ) exponente>>= 1; b t= by ) return resultado; ) El cédigo anterior muestra otra implementacién, 0 t Funciones matematicas Si tenemos en cuenta que ls computadoras estén constantementerealizandocélculos mateméticos, es indispensable conta con funciones que nos ayuden en estos céculos dentro de nuestras aplicaciones. Las funciones de la Tabla 04 se encuentran dentro del objeto math. Para acceder a ellas, no necesitaremos crear ningun objeto adicional. mas robusta, de la misma funcién, que realiza eélculos desplazando bits yejecutando la misma funcién de forma recursiva fo abs (x) aces (x) asin (x) atan (x) ceil (x) cos (x) floor (x) Jog (x) max(x, ¥, 2/0) min(x, ¥, 2).) Pow(x, y) random() round (x) sin(x) sqrt (x) tan (x) Pr Elobjeto math, asi como sus funciones, siempre estan disponibles en el contexto de trabajo. Pr Retomna el valor absolut del valor dado en X. Retoma el arcocoseno del valor X en radianes ‘Arcoseno del valor X. Elvalor es retornado en radianes. Retorna ol valor arcotangente da X. Este valor se encontrard entre los valores de Pl rnegativo sobre 2 y Pl positivo sobre 2 El valores expresado en radianes. Retorna el valor de X reaizando un redondes lo mas cercano al valor entero mas alto del nimero dado. Caleula ol coseno de X. Retorna el valor de X reaizando un redondao lo més eercano al valor entero més bajo del nimero dado. Presenta un comportamiento opuesto a Cedi. (2x) Caleula el logaritmo natural de X. Cealeula y retora el valor més alto de une serie de nimeros dados. Caleula yretome elvair més bajo de une serie de nimeros dados Retorna el valor de X elevado ala potencia¥. Realize un céleuloaletoro entre el valr Oy el. Realize un redondeo sobre la base del nimero entero ms cercano 8 X. Caleulao sono de xX Caleuala ral evadrade del nimero dado en X Retoma le tangente de un éngulo dado en X Retomn el valor aproximado de Pl. ‘Table 08, Funciones nativas matemiticas. REDUSERS Ei PROGRAMADOR WEB Full Stack Bo Sin Bstas funclones matemdticas pueden se usadas de riltiples formas. Sin embargo, na de las mejores maneras de poder verlas en accién es dibujande sus resultados en la pantalla, Construyamos, entonces, una funcién que nos ayude adibuar el senode x. var periodo var amplitud = 50; varsobre _eje_y = 200; function seno(tiempo) ( periods += 0.1; return [tiempo, (Math.sin(periodo) * amplitud) + sobre _eje_ yl; El c6digo anterior nos permite calcular el seno de un periodo dado, multiplicandolo por la emplitus de onda, Este caleulo nos permite obtener, para un perfodo de tiempo particular, una onda sinusoidal. Para poder graficar, necesitaremos agregar las siguientes lineas de cédigo al principio de nuestro cédigo. var canvas = document.createElenent(‘canvas’): eanvas.width = 800; canvas.height = 600; document .getBlementsByTagName (‘body’) 0], appendchild(canvas); varctx = canvas.getContext('2d’); functiondibujar(t) ( etx.clearRect(0, 0, 800, 600); var p= 0; for (var i = 0; i < 800; a44) { var r= £(i); etx.Mlitext('x’, r{0], r{1]); ’ Funciones nativas en JavaScript ) ‘Imagen 12. Alaplicarel céleulo —/\ N desenosobrelas | | diferentes variables, / V btenemos una onda ‘que variaré sogan los valores provstos. Cos Al igual que la funcion sin, esta funcion nos permite talculirel coseno den valodad Aglicandiral miso esquema de dibujo, pdrermosdibujar ua ond, ahora sobre eleje Yde nuestro grafico, varsobre_eje_x = 400; var periodo = 0; var amplitud = 50; function cos ote) ( periods += 0.01 return [(fath.cos(periodo) * amplitud) + ese sobre x, x}; Funclones nativas ‘Amnagen 13 < Laonda se dibuja > sobre el eje Y < ‘amedida que se ws * aplica ta funcién > nativa de cosena, sd x | CIRCULOS Las funciones matemi ‘combinadas entre ellas para producir diferentes resultados. Combinar el seno y el coseno sobre ul as dos ondas se ‘superpongan para generar un circulo perfecto. f\ i \ f\ ANAANAA AVA V Clase 05 JavaScript max y min Debido aque estas dos fenciones EIS SSAA STIS noe SESS aciojrun esifinda pont; pero son simflaes en uso, tas trataremos en conjunto, Come vimos antes, estas Friern caked elvalor maximo y minimo, i : console. 1og("S(tath.max(numerol, numero2)} es el mayor”); console-log(*S(Hath-rin(numercl, numero2)} es el menor’ Seats respectivamente, de un lista de valores numéricos dads. // 81 nimero 10 es el vaior menor de 1a serie Wf 4&3 sera e1 valor mostrado en 1a conscla console. 1og(*${Math.min.apply(nul1, argumentos)} es el menor” W/ 8 seré el valor minimo mostrado en 1a conscla © ¥ top ¥ B Preserve log 20 es el mayor 30 es el menor 43 es 1 mayor 5 es e1 menor La funci6n apply es parte de cualquier otra funcidn en JavaScript. Con ella podremos Ulamar a la funci6n principal, pero modificando su contexto de ejecucién y pasandole parametros en forma de array. REDUSERS El PROGRAMADOR WEB Full Stack Be pow sqrt Alinicio vimos dos funciones para obtener el valor de —_Asf coma es posible obtener la potencia de un niimero, ‘un mimero elevado a otro nimero, Para ahorrarnosel también puede encontrarse la de la raf cuadrada, trabajo de pensar en la mejor solucién, JavaScript nos provee la funcién pow. W Obtendremos 2 comoresuitado console.log(Math. sqrt (4)); // BL resultado sera igual a ¢ console. log(Math_pow(2, 2)); WH Obtendremes 3 comoresultado console.log(Math. sqrt (9)); 1 EL resultade seré igual a 9 console.log(Math.pow(3, 2); W] Obtendremos 10 comoresultado console.log(Math.sqrt (100); // BL resultado sera igual a 10000000000 console.log(Math.pow(10, 10)); random La funn random nos permite obtener un nimero aleatoria con el que podremos interactuar para adaptaroa las necesidades de nuestro programa Supongamos que tiramos un dado de 6 caras le pedimos al usuaria que adivine el nimero que saldré. / Calculames ei dado de 6 caras | var valor elegico = 45 var caras-dado = 6; ‘Yar Fesuliado dado’ parselnt(Math.randoa() * caras dado) + 1; console-Log( "Valor del dado: S{resultado_dado)"); 4 (valor elepico == resuttado dado) { ‘console log(‘Acertaste"); pense f ‘Console. 2o¢(‘No acertaste’); suuawasesnszen 4) tine 71, Column 13 Clase 05 JavaScript EN LA PROXIMA CLASE.. (Oa curso visual PRACTICO Passe tie [ R Pre LN yesh) Domina las dltimas Perenier cee seu eka Press en Le dinamicos @® ainx 8.0 Heit mscvey (23753 curso visuat v prActico ey WEB Full Stack Desarrollo frontend y backend Porque desde cero, y sin ningun conocimiento previo, este curso te ensefiaa disefiar un simple sitio que luego transformaremos en uno dinémico, interactivo y responsivo, conociendo y aprovechando las tiltimas tecnologias de desarrollo. Porque alo largo de 24 fasciculos, repletos de ejemplos, ejercicios y explicaciones visuales, aprenderas tanto los lenguajes y tecnologias frontend como backend: HTML, CSS, JavaScript, PHP, MySQL, JQuery y mas. {Son varios cursos en uno solo! Porque actualmente el perfil FULL STACK es uno de los mas demandados en el mercado laboral Te ensefaremos a darles vida a tus propios proyectos, generar un portfolio y a dar tus primeros pasos laborales como desarrollador. —_ oo SP Explicaciones Guias jercicios practicos pasoapaso visuales eintegradores Servicio de profesores en linea profesores@reduserscom Clases anteriores Puede adquirirlas escribiendo a usershop@redusers.com ee Le OTSA GMI Ecosistema web GB HTMLS EI Css3 EI Disefio Ul con CSS Introduccién a JavaScript IG JavaScript orientado a objetos Integracién de HTMLS y JavaScript 1G Formularios web HEI Multimedia y APIs CSS Avanzado Disefio web responsive Sitios multiplataforma con Bootstrap PHP MysaL PHP y MySQL Webs dindmicas con Ajax y PHP Buenas précticas: analisis, tests y optimizacion HIG Fundamentos del ecosistema mobile Jquerymobile: la web mévil BGI Funcionalidades extendidas en mobile web Potenciando la faceta full stack EI Webapps y plataformas amigables BEI Versionando el desarrollo: GIT y Github Salida laboral 00005 Ut 3506! > TOU

También podría gustarte