, por exemplo, anda no fo caregada eno esta presente na drvore DOM, ‘caso queira manter 0 seu cédigo no inicio eter 0 mesmo resultado de quando ele fica 20 fina, énecessério utlizar um evento dentro dele, 0 “onload” © modifier seu cig para utilize itpsiistecino azuraedge.netrepositorio/002121/0038S/indox hint 9482209/2023, 19:40 Linguagem Javascript Teoria na pratica ‘ho longo deste tema os exerciios prétics sero fundamentals para a fxago do conteudo visto, Partindo do cédigoutlizado no tépico incorporando 0 JavaScript & HTML, modifiquea da seguinte forma Pea ao usustio para inset dois metas intelos postivos; ‘Armazene 0s niimeros ineridos pelo usuario em duas variaves; (tie uma fungo para divide nimerosinteiros; Exiba na tela uma caixa de ddlogo com o resultado da dvi precedido pela frase “O resultado da dvsio ¢ igual ‘caso queria ir alm, crie uma calculadora para realizar a quatro operagées matemdlicas. Nesse caso, voce preciaré pedir ao usuério que escolha a operagio a ser alizada, além dos nimeros de entrada, Mostrar soligfo © Falta pouco para atingir seus objetivos. Vamos praticar alguns conceitos? uestéo1 Alinguager JavaSerpt 6 uma inguagem tpicamente do lado cen vila ‘embora também usada, mais recentemente, no lado servidor. Sobre sua 1 lado cliente, e mais prec'samente sobre sua elaglo com © DOM, assinale a afirmatva correta: JavaScript permite que a estruturaincial de uma pagina HTML seja modifica. Além disso, como também é umallinguagem com suporte do lado servidor, cla permite que esses cédigos HTML madificados sejam salvos na pagina HTML orginal Um script JS pode ser nelude tanto dietamente ne carge de documento HTML come pot mela de um arquivo externo. A diferenga 5 piincipal entre essas cuas formas esta no fato de que o cig inserido dlretamente na HTML faz parte da arvore DOM ~ sendo, portanto, ania forma de manipula os elementos dessa interface ‘Com a utiizagao da linguagem JavaScript, ¢ possivel te acesso a drvore DOM. Com sso, tarefas como a mosificago de elementos ‘existentes ea inclusdo de novos elementos, assim como contetidos, tomam:se possivels. itpsiistecino azuraedge.netrepositorio/002121/0038S/indox hint 01882209/2023, 19:40 Linguagem Javascript 0s cédigos JavaScript incorporades ao final da pina néo permitem a manipulagdo da vore DOM, é que so inte ap6s ocarregamento de todos os elementos. JavaScript permite que novos elementos sejam inserdos dinamicamente na rvore DOM, desde que esses elementos fagam parte da cestrutra ileal da pagina Parabéns! A alternativa C esté correta, ‘través de JavaScript, épossivel manipula a drvare DOM, independentemente do mado de incorporagio a0 documento HTML. A nica ressalva diz respelto a eventos de manipulagso que enter acessar 0816s @ 0 elementos DOM antes que toda a pagina sea renderzada, como visto em um os exemplos demonstrados. Questéo 2 -Arespeto dos tipose da ullizaglo de variavels em JavaScript, assinale 2 armativaincorata: (0 valores poem ser atribuldos no momenta om que a varive édeclarada, 5 Valores de qualquer tip podem ser atribuldos da mesma forma JavaScript 6 uma linquagem fracamente tipada. Logo, ndo 6 necessério formar o tipo de dado no momento de crlagdo da varével. DAs atidvelsprecisam ser declaradas antes de serem utilzadas, Uma vardvelédeclarada por meio do uso da palava reservada “var, cucedida pelo nome escalhide para a vativel em questo. Entretanto,caracteres especiais no podem ser usados coma nomes de vardvels. Parabéns! A alternativa B esta correta, JavaScript 6 uma linguagem bastante flexivel em relago declaragdo e a utlizagdo de vardvels. Enretanto, alguns culdados sio necessérios, entre lesa atribuigdo de valores do tipo sting, que precisam ser englobados por aspas ~ duplas ou simples. itpsiistecino azuraedge.netrepositorio/002121/0038S/indox hint 18829/09/2028, 18:40 Linguagem Javascript carvers cur (‘bs.° i 2 - Estruturas de decisdo e de repeticao Ao final deste médulo, voc8 sera capaz de aplicar as estruturas de decisao e de repeticao. Estruturas condicionais Estruturas de decisdo ‘Segundo Flanagan (2011), as estrturas de deciel, também conhecidas como ‘condicionals’, so instugSes que executam ou pulam outras instrugBes ido do valor de uma expressio especificada, Séo os pontos de decisdo do cédigo, também conhecidos como ramos, uma ve que podem tera fuxo do eédigo, criando um ou mais caminhos. Para melhor assimilagao do conceito, vamos usar um exemplo a pati do cédigo consiuido no médulo anterior que vamnos a seguir: itpsiistecino azuraedge.netrepositorio/002121/0038S/indox hint 121882209/2023, 19:40 Linguagem Javascript ‘As orientagdes do programa dizer que deve ser realizada a dvisdo de dots nlmeras interos postivos. 0 que acontece se o usuario inserir um nimero inteiro que nao seja positive? Ou como forga-lo a inserir um niimero positivo? Para e2sa fungi, pademos tilizr uma conciggo. Ou sea, so usudro inserr um nimera inti no positive, avisar que © nimera no é valida, solctando que sejainserido um ndmerovéldo. 'Nesse caso o fluxo normal do programa é receber dois nimeros posits, calcula dvsio e exbiro resultado, Perceba que a condicéo eria um novo ‘ux0, um novo ramo, em que out dilogo 6 exbido e o usudrio,evado ainserirnovamente o numero. © fuxo normal eo fuxo resultado da condicional podem ser vistos na imagem a seguir. Nela, so apresentades os passos correspondentes a0 nosso exercicio, separand as ages do programa e também as do usuasio, Repare que a verficagia“é umn inteto positive" permite apenas dues respostas ‘sim e nc, Tal condigéo, mediante aresposta forecida, € responsive por seguiro fuxo normal do cédigo ou o aterativo, Dica © fuxograma de exemplo fol simplificado pare fomecer mais detalhes, Logo, respectva nota padiro nfo fol utiizada em sua confecg! itpsiistecino azuraedge.netrepositorio/002121/0038S/indox hint 13148220912023, 19:40 Linguagem Javascript Nas linguagens de programagao, ulizaros as instrugGes condicionais para implementar 0 tpo de decis ao apresentado no exemplo. Em JavaScript, sido disponivels as instrugées "ffelse'e “switch” como veremos a seguir If A sintaxe da instruc “it/else" em JavaScript possui lgumas formas. A primera e mais simples 6 apresentada do seguinte modo: if (condigao) instruc. Nessa forma, évericada uma dnica condi 0. Caso sea verdadeira, a instrugso seré executada, Do contéro, nfo, Antes de continuarmos, é importante destacar 08 elementos da instrucio + Einiciada com a palavra reservada “i + Einserda, dentro de parénteses, a condi¢do (ou condigdes, como veremos mais adiante). + Einserida a instruglo a ser executada caso a condigéo soja verdadeira (Outro deta importante: caso exista mais de uma instugio par 1 executada, énecessério envolvédas em chaves, Veja o exemple: sovaserint hitpsistecine azureedge.netrepositoro/002121/0098S/index html2209/2023, 19:40 Linguagem Javascript esse segunda caso, além de mais de uma instrugo, também terios mais de uma condigso. Quando é necessitio verfcar mais de uma condigi, em ‘que cada uma delas precisar ser verdade'ta,utlizamos os caracteres "88" Na prética, as insrugées 1 ©? 66 serdo executadas caso as conclcdes 1 € 2 sejam verdadeiras. Vamos @ outro exemple vase o Repare que, nesse cédigo, os caracteres "&&” foram substituldos por I. Fsses iltimos slo util2ados quando uma ou ovtra consi¢lo precisa ser verdadeira para que as instugées condicionals sejam executadas. E o que acontece se quisermos verficar mais condigdes? 'Nesse caso, podemas fazer isso tanto para a forma em que todas precisam ser verdadeiras,separadas por "28", quanto para a forma em que apenas uma deve eer verdadeira, ceparadas por “IT lm disso, époseivel ombinar os dois casos na mesma verficagio, Vea o exemple: nvaserpt a "esse fragment, temos as duas primeiras condigbes agrupada por parénteses. A légica aqui & Execute as instrugées 1 2 SE ambas forem verdadelras OU se a condiglo 3 for verdadelra Por im, hi outa forma: ade negagéo. Como verificar se uma condicao ¢ falsa (ou néo verdadeira)? Veremos a seguir devas 5 itpsiistecino azuraedge.netrepositorio/002121/0038S/indox hint 191482209/2023, 19:40 Linguagem Javascript O sinal"Yé utlizado para negar a condigdo. As instrugdes 1 e 2 serdo executadas caso a condigéo 1 ndo sejaverdadeira ‘Agora vamos praticar um pouco. Nos ts emuladores de eédigo a segut, apresentamos as estuturas de deciso vistas até aqul No primeira emulador, temas 0 uso da estrutura de decisdo if de maneira simples, contendo apenas uma tnica condiqso:” exerci reroan Fyoorur sovasergt rll null Jno emulador seguinte a estrtura de deciséo If é implementada com duas condigées, além dos operadores légicos AND ( && )€ OR (I): vec rvrona. (Pycosua ovasergt rll null Por fin, no emulador a seguir temos a estrutura if sendo usada de uma maneira mais elaborada, com mais de duas condligbes, combinago dos ‘operadores && el, assim como o use do operadorIigico de negaco NOT (1) xe rvroan Fjoorur itpsiistecino azuraedge.netrepositorio/002121/0038S/indox hint 161482209/2023, 19:40 Linguagem Javascript rash ull ull else if. Emibora no seja obrigatria, como vimos nas exemplos, sempre que a primeira for uilizada, deve ve ida. Vojamos: Ainstrugo “else” acompanha a instru acompanhada da segunda, 0 “else indica se alguma instugio deve ser executada caso a verificago feta com o "if no soja ator mvaserpt 0 Perceba que o “else” (sendo) acompanha o ‘I (se) Loge, SE as condiqdes forem verdadeiras,faga isto, SENAO, faga aqullo, importante mencionar que no timo fragmento fl utlizado, de modo proposital, narluguis-estruturada nas condigSes e instrugdes. Isso porque, mais adiante, voc# mesmo codificaré esse ‘if/else" em JavaScript ortugués-estruturado Linguagem de programagio ou pseudocédigo que utliza comandos expressos em portugues. itpsiistecino azuraedge.netrepositorio/002121/0038S/indox hint 71882209/2023, 19:40 Linguagem Javascript else if Velamos 0 exemple a seguir: Jens o Repare que uma nova instru fo utlizada no fragmento, Trata-se da "else utlizada quando queremos fazer veificagSes adicionais sem agrupé-las todas dentro de um nico "i". Além disso, repare que ao utlizarmos essa forma, caso nenhuma das condigdes constantes no i" © no(s) “ies” seja atendida, ainsvugso ‘else seré executada obrigatoriamente ao final Otimize os eédigos presentes nos emuladores antetiores, usando o ele If, Come exemalo, apresentamos o eédige do primeito emulador medificada, no {qual as 4 estruturas de decis lo com if foram transformadas em uma nica estrutura de deci. Note que antes eram geradas duas saidas redundantes (‘a é maior que b" e "b é menor que a”), pois tratavam-se de 4 estruturas independentes e por isso todas elas eram avaliadas. Isso no ocorreré mais com o uso de uma estrutura de deciséo composta de if e elseif, pois quando a primeira condiqdo verdadeira for encontrada ("2 & ‘ator que b”),nenhuma das outras condlges seréavalada ovaserpt a switch Ainsirugao “switch” € bastante atl quando uma série de condigbes precisa ser vericada, € bastante similar else i. Vejamos: itpsiistecino azuraedge.netrepositorio/002121/0038S/indox hint 181482209/2023, 19:40 Linguagem Javascript Joneses 5 Demaneira geral 0 switch éusado quando temos uma série de condigSes, nas quals dversos valores para a mesma vardvel so avallados, A segui, etalhamos 0 e6digo anterior [No cédigo anterior, aps o “swict’ dentro de parénteses, mos a condigéo a ser verificada, A seguir, dentro de cada “ease, temos a(s instugdio(Ses) e 0 comando "b | | ‘A seguir temas os “case’, em quantidade equivalent as condigdes que queremos veriicr. | Por im, temos a instrugao “default”, que seré executada caso nenhuma das condigdes representadas pelos “case” selam atendidas, | \Vamas colocar a do na massa? Modifique o eécigo do emulador sequinte fazendo uso da instrugéo switch: carlo row. jeoour evesergt itpsiistecino azuraedge.netrepositorio/002121/0038S/indox hint 191482209/2023, 19:40 Linguagem Javascript null null [A solugéo da aterago pedida no emuladr antetiar est no cédigo modulo2 codigos que se encontra nos cédigas-ontes originals disponibilzades na Preparaco do tema, Estruturas de decisdo creotearneees fC versio online deste conteido Lagos: estruturas de repeticao Estruturas de repetigao ‘xecutada de forma repatitva. Em nosso exerci, por exer sas estruturas~ também chamadas de lagos ~ permitem que uma agio s temos uma ago recorrente, ue &a de solctar ao usudrio que insra um nimero, Se fosse executada dentro de um laco, o nosso cédiga diminuii,faciltando co tabaho. A simeaxe de uma estrtura de repeticso pode ser vista no fragmento de c6digo apresentado no emulador seguinte. Apés lero cédigo € 0s comentarios explcativos, execute-oe vee o resutads, for Sobre @ sntaxe apresentada no emulada a seguir, temos olago“fr’ um dos presentes em JavaScript. Em sua forma mais comum, temas uma varidve {que chamamos normalmente de contador, que recebe Um valor incial (no exemplo, 0) ¢éinerementada (pelo "+4" até ating uma condi¢lo (ser menor cue 10). vec rvroHa. jcoeue itpsiistecino azuraedge.netrepositorio/002121/0038S/indox hint 201482209/2023, 19:40 Linguagem Javascript Jerascot ull ull Algumas variagbes possiveis esse cbdigo seria iniiaro contador em 1, por exemplo (o mais usval, em programagag, nilarmes nossos indices em 2et0), ou mas até o niimero 10. Ou seja,no lugar do sinal de menor utlizariamos 0 “menor igual’, dessa forma: <= 10", Teste no emulador anterior cessas variagbes eveja as diferengas. ‘A seguir, veremos as ouras estrutura de repetiglo,além do Yor, presentes na inguagem JavaScript while Veja o fragmento a seguirpara entender o comportamento do ago “while” (enquanto) vec ron. Fycosun evasergt rll rll itpsiistecino azuraedge.netrepositorio/002121/0038S/indox hint 211482209/2023, 19:40 Linguagem Javascript Esse cédigo ter o mesmo resultado que o visto no exernpo utilizando o lago “or. Sua sintaxe é simples: Enquanto uma condigéo fornecida for vordadeira, fag isso Clique em Executar no emulador acima everfigue! do/while Embora semethante 20 lao "while, temos uma diferenga fundamental enre eles: “dolwtile” Acondigdo é testada no final. “while” Acondigdo ¢ testada no inicio. ‘Com iso, pelo menos uma vez a instrugdo (ou as Instruges) do laga“do/while” seri, obrigatoriamente, executada. Vejamos o exemple: exec Orvronn. Fjcorur vovnsergt rll rll [Execute 0 e6digo no emulador anterior vaja que 0 resultado 6 exatamente 0 mesme do eédligo usando "while Agora, modifique a utima ina do céiga do lago“do/while” para: ) while (contador « 0) Execute novamente 0 cédiga e perceba que apesar da condi¢do nunca ter sido verdadsira, obloco de instruges do lago fol executado uma ver. Essa é@ ferenca entre olago“éo/while"@o Iago "while itpsiistecino azuraedge.netrepositorio/002121/0038S/indox hint 221482209/2023, 19:40 Linguagem Javascript for/in Esse lago, assim como os demas em uma linguagem de programago,é bastante uiizade com arrays (vetor ou mati contendo dads no ordenados, Veremos sobre eles no préximo médul). Normalmente,precisamos percorrero contedde de um array e manipular ou apenas exbiro seu valor. Para isso, pademos fazer uso de lagos, Na emulador seguinte sero apresentados dois fragmentos de cig para uma mesma fungSo ~ um utlizande “for” © © outo, “fori. exerci rvrowa. [Fycooun Jeresciot null rll Analsando 0 cédigo, é possivelnotar as ciferencas de sintaxe entre os lagos “for” e “ori. No primeiro, em “for, defnimos uma vardvel contador (1) e deveremos percorrero array “rutas" comezando em seu indice 0 atéo seu tarmanho (length) J no Yor/n’, declaramos uma valve contador ("uta e dizemos ao cédigo que petcorta © array imprimindo 0 seu contelido a pari do indice fornecido ~ nesse caso, a varvel “ruta Estruturas de repeticao Para assstr a um video eee vero one deste conte, a) itpsiistecino azuraedge.netrepositorio/002121/0038S/indox hint 231482209/2023, 19:40 Linguagem Javascript Exercicio com estruturas de decisao e de repetigao No video a segut, set apresentado um exercico resolvide demonstrando as estruturas de controle de decisso e de repetiglo. Vamos assist! Pra assist aum video sobre oascunta acessea fo} De ‘ers online desta coeci. Le) Falta pouco para atingir seus objetivos. Vamos praticar alguns conceitos? uestéo1 No que concerne as estruturas de decisdo, mais precisamente instrugSo “switch” assinale a afirmagdo incoreta: A Essaistrugo serve para alteraro fuxo de execugdo de um programa 5 Comessaiinstrugo, conseguimos realizar veriicagSes que no s80 possiveis apenas utlizando ‘i ‘else Essa instrugSo 6 uma forma de reduzr a complexidade proveniente da uilzago de varios “ie ‘else esa instupio €utlizada par testa vitias opgSes de condiconais, € uma instrugo dl quando 6 necessétio testar valores divers para’a mesma varével. Parabéns! A alternativa B esta correta. itpsiistecino azuraedge.netrepositorio/002121/0038S/indox hint 241882209/2023, 19:40 Linguagem Javascript ‘A “with, assim como as insrug6es “ites”, permite que o fuxo de um programa seja alter a partir de vriicacGes de condicionas. Logo, tals Instrugdes nao se diferem, sendo a switch" mais utlizada quando ha muitas condig&es a serem verificadas, diminuindo assim a complexidade do igo caso fosse utlizado “Wels Questéo 2 Observe o fragmento de cédigo a seguir Apés a sua execucdo, qual o valor da ariévelcont ~exibida nainstrugo“ler{cont)? overt oO A 0 84 ° > 4 2 Parabens! A alternativa A esta correta, O aca “dovwhile"executa a primeira instugdo antes de testar a condigdo fornecida, Nesse caso, instrugdo conslste em incrementar de 1 em 1,0 valor da varivel “cont”, Como se inicia em 1 e val até 8, a0 final seu valor seré 10. itpsiistecino azuraedge.netrepositorio/002121/0038S/indox hint 2514829/09/2028, 18:40 Linguagem Javascript onstructor(obj. Cur arget).data("bs, ° . 3- Vetores Ao final deste médulo, voc8 sera capaz de identificar o conceito de vetor e sua utilizagao em JavaScript. Visao geral Vetores em JavaScript Um vetor 6 uma estrutura de dados simples utlizada para armazenamento de objetos do mesmo tipo. E chamado, na iteaturarelacionada a inguagens 6e programacio, de array. Nesse contexco, énormalmente tatado em conjunto com outraestrtura: 2 matriz. Em lihas gers: (Um vator 6 um array unidimensional ‘Amatriz 6 um array mutigimensional (um vetor de vetoes) ‘A fungdo pritca de um vetoré simplificarautllzagéo de varvels. No exemplo do meédulo anterior, vimos que eram necesséras duas vardvels para uardar 08 ndmeros solicitades 20 usurlo, Com a uthzagio de um vetor porém,precisariamos de apenas uma varivel de duas posigées Embora possa parecer sem importancia o uso de arrays nesse caso, imagine, por exemplo, que seja necessario armazenar as notas de $0 alunos para, ao final, calcular as respectivas médias. Seriam necessarias 50 varidveis (ou apenas 1 array), (08 vetores também so vistos na Matemtica: “Tabela organizada em inhas ecolunas ne formato m Xn, sendo m o:nimero de inhas e n,0 de colunas” itpsiistecino azuraedge.netrepositorio/002121/0038S/indox hint 261482209/2023, 19:40 Linguagem Javascript Composigao e criagao de vetores Composigao dos vetores Um vetor& composte por uma colegio de valores cada um deles & chamado de elemento. Além disso, cada elemento possul ums pesigSe numérica entro do vetor, conhecida coma indie. Vea, no exemplo a seguir, usando notapéo da linguagem crip um af y contend nomes de frutas: Jenesctot o "Nese exemple, “Laranja’, "Uva" e "Liméat so os elementas do vetor“rutas”, Considerando que o indice de um arayinicia em 0, temos:o conteddo do vetorfutas" na posigdovindice 0 &Laranja’;na posigdosindice 1 6 Uva"; na posigdofinice 26 "Limo" | seguir, veremos como declaare utilzar vetoes na linguagem JavaScript Criagao de vetores em JavaScript Em JavaScript, 08 vetores nfo possuem tipo, a exemplo do que vimos quando tratamos das varévels, Logo, épossivel ela um array composto por rimeros, stings, objetose até mesmo outros arrays. Em JS, um vetor pode ter, no maximo, 4:294.967.295 (232 ~ 2) elementos, Outra caracterstca importante & que, em JavaScript 08 arays possuem tamanho dindmico, ou sea, ndo é necessério informaro tamanho do vetor 20 decarélo. Vejamos mais alguns exemplos de criago de vetores em JS: Joneses 5 Cutra forma de ciagdo de vetores em JavaScrpt 6 usando 0 constrtor (concelt relacionado & programacio orientada a objetos) Array. Vejamos 0 exempl: ast O itpsiistecino azuraedge.netrepositorio/002121/0038S/indox hint 2482209/2023, 19:40 Linguagem Javascript Manipulagao de vetores Acesso e exibicao de elementos do vetor Em termos de acesso aos elementos de um array, 2 forma mais simples éutllzando 0 seu indice, Vamos ao exemple: nasit O Observe e entenda o seguite: + Aung “alert, imprimir o conteddo da posigio zero do array “alunos”, ou sea, “Aex + Sequindo a mesma Logica, e quiséssemos imprimir “Jodo utlizarfamos onde 2 + Outra forma de acessar eexbi os elementos de um vetoré usando um lago de repetiggo. Veja novamente o exemple contide no emulador de cédigo o topo forrin no médulo anterior. 0 JavaScript passul métodos nativos para tratamento de arrays. Em termes de acesso e manipulagdo,veremos agora como uilizar © push. Nos pi6ximos t6pios, outros métodos serdo apresentados. push Para compreender em que situagSes 0 método push pode ser dtl, vamos votar ao nosso vetor unos” Imagine que, apés ter sido declarado Iniiatmente com 3 valores, seja necessério inclur novos valores a esse array, em tempo de execugso. O método push nos auxiia nessa tara. Sua Usando nosso array de exemplo, poderiamos adiclonar um novo elemento desta forma eves 5 itpsiistecino azuraedge.netrepositorio/002121/0038S/indox hint 201482209/2023, 19:40 Linguagem Javascript € possivel ainda, inserr mtiplos valores utlizande push art o Outras formas de adicionar elementos a um vetor ‘Como mencionado, hé outtas maneiras de adicionar elementos @ um array de forma dinémica. A primeira delas pode ser vista a sequr: onsen O esse caso, devernos ulizar 0 tamanho do array para infrmar que desejamos adiconar um nove elemento, tsso pode se feito informando onimero, 250 © salbamos, ou de forma dinémica, usando a propriedade length ~ que retorna justemente o tamanho do array. Essa importante propriedade seré apresentada logo adlante. splice CO splice ¢urm métaco multivso em JavaScript, Fle serve tanto para excl elementos de um array, como veremos a seguir come para subsite inser. Sua sintaxe & Array splice(posigéo,0nove_elemento;novo. lento.) emaue: posigleé 0 cice onde o nove elemento ser inch; (indica ao métode que nenhum elemento do aray ser exclu: rove, elemento é nave elemento que se desea adiconar 20 aay \ejamos um exemploprético soveseret o itpsiistecino azuraedge.netrepositorio/002121/0038S/indox hint 201482209/2023, 19:40 Linguagem Javascript ‘Alm disso, com esse método também é possivelsubstituir um dos elementos do array. Veja o exemplo a seguir: Jnvnserpt a ‘Aqui, 20 passarmos 9 nimero 1 como segundo parimeta, informamas aa método que um elemento, ode indice 1, devetia ser excluldo,Entetanto, ‘come inserimos 20 final nome Helena, o métodorealzau a substiulgdo do elemento excluida pelo novo elemento inser, Splice ara assist um vileo sobtreoasaun aceesea fo) Dx veredo one deste cote. A propriedade length Uma das necessidades mais comuns quando se tabalha com arrays 6 saber 0 seu tamanho. Come vimos em alguns denossos exemplas, em JavaScript esta dlponivel a propriedade length, que retorna o amanho, ou nimero de elementos, de um atray, Sua sintaxe é nome. do_array length Remogao de elementos do vetor ‘Aremogo de elementos de um aay, em JavaScrit, pade ser feta com a utzagio do método native delete, Velamos como esse método funciona uilizando nosso array de exemple: onsen O itpsiistecino azuraedge.netrepositorio/002121/0038S/indox hint 301462209/2023, 19:40 Linguagem Javascript Come visto, sua sintaxe & composta pelo nome do método, delete, pelo nome do array e pelo incice do elemento que queremos remover. possui uma particularidade: embora 0 valor sea excluide do array, este no é“reorganizado” permanecendo com o mesma tamanho, Fagao teste: Uttize 0 método delete para remover um elemento de um vetor, Imorima (utlizando console og, por exemple) « tamanhe do array (usando a propriedade length). Veja que o tamanine do array permanece igual a inital, antes da utlizagdo do delete. Isso acontece porque esse métoda nde remove o valor, apenas 0 toma indetinido (undefined) Realize o teste proposto no emulador a seguit versio rvrowa. Fjcoeur Jernsciot null rll Outros métodos para remover elementos do vetor itpsiistecino azuraedge.netrepositorio/002121/0038S/indox hint 31462209/2023, 19:40 Linguagem Javascript [Alinguagem JavaScript possulalém de “delete, outros 3 métodos para remocdo de elementos, conforme veremos a seguir: Este método, que ndo recebe pardmetros, remove um elemento do final do aray,stualizando seu tamanho. Sua sintaxe& frutas.pop0; Embore similar ao pop, este método remove um elemento do inicio do array. Apos a remogio, este 6 reindexado (ou soja, 0 elemento de indice 1 passa. sero de indice 0 assim sucessivamente) Alm disso o tamanko do array também é atualizado, Sua sintaxe pode ser vista a seguir: frutas shit; Este método, intraduzido anterioimente, pode ser usado para excluséo de elementos, Para tanto, ele recebe como pardmetros a quantidade de inar € indica a pati do qual estes sero exchidos. sintaxe a seguir demonstra aremogio de 2 elementos, a smentos que se desea partir do indice 2, do array fornecié: var primos = [2.387,19,13,17); primos.splice(2,2); ‘console.og(primos); /imprimiré2,311,13,17" Nesse método, para fins de remogo, oprimeiro paramere indies o indice @o segundo, 2 quantidade de elementos a serem excludes, Outras formas de remover elementos do vetor rminaro tamanho do array utllzando a propriedade length Isso Existem outras maneiras para excuir elementos de um array Uma forma simples & de far com que ele sea reduzide ao novo tamanho informado. Janscrst o "Nesse exemplo, a0 definimos 0 tamanho do array como 4, ele seréreduzido,sendo mantdos os elementos do indice 030 3 ¢ excludos os demals. Utlize o emulador a seguir para pratcar a remagéo de elementos um pouca mais. itpsiistecino azuraedge.netrepositorio/002121/0038S/indox hint 321462209/2023, 19:40 Linguagem Javascript vere rvroan Fjoorur nvaserpt ull null Existe, ainda, outro método para @remogso de elementas de um array: filter. Enretanto, ele no modifiea 6 vetor original, mas era um novo a partir dele Esse método utiliza uma sintaxe mais complexe, asim come conceltas e fungSes de catback que fogem ao escopo deste tema Outros métodos para remover elementos do vetor Paateecis corr wes eee vero one deste conte, a) Teoria na pratica Conhecendo as esiruturas de decisso e de repetigsa © os concetos @ exemplos de ulheagdo de vetoes, chegou ahora de praticar Teremos,a segui dois exercios: + O primeir seré mais simples; + 0 segundo sera um desafio, pols exgid a pesquisa ¢ oestuda de conteddos adleionas, uma vez que ndo vias todos os conceitos necessérios para resolvé-o Vamos a eles itpsiistecino azuraedge.netrepositorio/002121/0038S/indox hint 331462209/2023, 19:40 Linguagem Javascript 1. Junte em um tnico arquivo todos 0s cSdigosvistos ao longo deste time médulo e execute-os novamente. Isso ajudard a fxr conteido, Teoria na pratica 2. Faga um programa em JavaSerpt que: Solicite 20 usuario que insra dois nimeros interes postvos; Ltlize um vetor para armazenar esses dois nimeres; Vertique se os némerosinseridos so intros postvos, Caso contra, slete ao usurio para inser-los novamente; Divida os dois nimers inter positives Imprima na tela oresutado da cvs, Observagées:H mais de uma forma de desenvolver 0 programa. Logo, no hé cédigo certo ou erado Vocé pode wtiizarfungSes JavaScript pare melhor orgaizar 0 seu cédigo Inclusive, pode usar um pouco de recursividade 0 cédigo relacionado a uma das formas de resolver esse desafo esti d'sponivel a seguir: Falta pouco para atingir seus objetivos. Vamos praticar alguns conceitos? Questéo1 Em telago aos conceltos ao uso de vetores em JavaScript, assinale a afrmativaincoreta Um vetor,ou aay, é um grupo de varévels que contém valores do mesmo tipo ou de tipas diferentes. 5 Umvarray, em JavaScript, 86 permite dados do mesmo tip. JavaScript 9 primero elemento de um array tem o indice igual a0 itpsiistecino azuraedge.netrepositorio/002121/0038S/indox hint Mostrar solugéo Mostar solugéo 341462209/2023, 19:40 Linguagem Javascript JavaScript, podemos acessaro ditime elemento de um aray da seguinte forma: vetorvetar length © Aetlagi de vetores em JavaScript pode se elt utlizando us conceit de programagdo orlentada a objetos chamado consttutor. Parabéns! A alternativa B esta correta, JavaScript permite que um array seja compost por dados de diferentes tipos. Questao 2 Desejase exclu oUtime elemento do aray abaixo.Assinale a alerativa cuja métode no pode se apicada para realizar essa ago: pares pop) pares splice(51) © parestength = 5 pares.splice(6.0.0) © delete paresfpares length] Parabéns! A alternativa D esta correta, Como visto, métado spice pode ser ullzado tanta para remover quanto para adlcionar ou substitu elementos de um aay. Quand usado para remover, sua sintaxe corresponde ao cédigo visto na altemativa'b, na qual indicamos o indice ea quantidade de elementos, a partir dele, ser removida. J a alternativa ‘faz com que sea adiionado um novo elemento, com valor 0, ap6s indie 6 itpsiistecino azuraedge.netrepositorio/002121/0038S/indox hint 3514629/09/2028, 18:40 Linguagem Javascript onstructor(obj. Cur a(‘bs." + & 4- Max e JSON Ao final deste médulo, voc8 sera capaz de reconhecer os recursos assincronos Ajax e JSON. Visao geral Requisigdes sincronas e assincronas O conceit de requlsigdo, no ambiente Web, dz respeito ds informagées sollcitadas ou submetidas no lad ellente ~ por meio do navegador, por exemple ~ etratadas pel lado servidor, que apés processar a requisigfo devolveré uma resposta ao soictante esse sentido, so possiveis dis tips de requisicdes: Requisigdes sincronas (Quando realizadas, bloqueiam o remetente. Ou seo clente faz 2 requisi¢Zo flea impedido de realizar qualquer nova solictagéa até que a anterior sela respondida polo servdox. Com iso, s6 6 possvel realizar uma coquisi¢So de cada vez Requisigdes assincronas itpsiistecino azuraedge.netrepositorio/002121/0038S/indox hint 361462209/2023, 19:40 Linguagem Javascript (Quando reaizadas, ndo sSo dotadas de sincronismo. Logo vrias requsigBes podem ser realizadas er simulténes, ndependentemente de terhavido resposta do sevidor as solictagdes anteriores, Em comparagio com as requisicbes sincronas, deve-se dar preferénca & ulizagdo das assincronas. Isso porque estas néo apresentam os problemas de esempenho e congelamento do fuxo da apicagio, naturals das sincronas Como as requisigdes assincronas funcionam na pratica ata melhor entendimento de coma as requlig6es assincronas funclonam na prtiea, memos como exemploo feed das tedes soctas. Em tals piginas, novos conteidos so carregados sem que seja necesséri recerregar o navegador e, consecuentemente, todo o canteddo visto. Eventos coma a rolagem de tla por exemplo,fazem com que 0s contedos sejam carregados do eervldore exibiéos na tla do dlapositvo, wes antec (2 ee we Requisicgdes assincronas em JavaScript AJAX - Requisigdes assincronas em JavaScript Em JavaScript, quando falamos de requisigbes assineronas,naturalmente falamos de AJAX (Asynchronous JavaScript and XML). Esse terme fi ‘empregado pela primeira ver em 2005 ¢ engloba o uso no de uma, mas de varias tecnologias: HTML (ou XHTML), CSS, JavaScript, DOM, XML (e XSLT), além do elemento mais importante objeto XMLHttpRequest Auutilizagao de AJAX permite que as paginas e aplicagdes Web fagam requisigées a scripts do lado servidor e carreguem, de forma répida e muitas vezes incremental, novos contetidos sem que seja necessério recarregar a pagina inteira. hitpsistecine azureedge.netrepositoro/002121/0098S/index html 3762209/2023, 19:40 Linguagem Javascript Embora 0 "X"na acrénimo se refraa XML, esse ndo é 0 Unica formate disponvel.Além dele, temos: @ HTML, arquivos de texto @0 ISON, sendo esse ‘hima 0 mais utizado atualmente,Veremos sobre ele mais adiante £m relagdo 20s recursos para realizagdo de requisices, hé dois disponiveis em JS: o objeto XMLHttpRequest ea interface Fetch APL XMLHttpRequest Iniclalmente fol implementade ne navegador Internet Explore por melo de um objeto do tipo ActiveX. Posterlrmente, outs fabrcantesfizeram suas implementages, dando origem ao XMLHttpRequest, que se tornou o pao atual Versées antigas do Internet Explorer sé possuem suporte ao ActiveX. ‘OXMLItIpRequest possul alguns métodos e propredades. Algunsdeles serdo descritos apds verros um exempl simples de sua utlzacio: Jonscint o (0 c6algo anterior contém tanto funclonalidades JavaScript vistas neste contedo quanto algumas novas, além do XMLHttpRequest, que veremos mais adiante. Ao utllzar esse cédigo,vocé teré um exemple real de dados sendo requisitados a um servidor-nesse caso, uma API que retoma imagens aleatérias de cachorros - exbidos na pagina, sem que ela sea recarregada a cada nova requlsigdo/cllek no bot. Por ora, vamos nas concentrarne XMLHttpRequest. Uiizanco as Inhas contcas no cédigo visto anteriormente, observe: + "Nalinha 19, uma instancla do objeto é cada, Esse 6 oprimeiro passo para sua utllzagSo. A partir desse ponto, toda referéncia deverd ser felta pelo nome da variavel utlizaca (em nosso exemplo, xmibttpRequest), + Alinha 22 mostra a utilzago do método open, que recebe 3 pardmetios: o método de requisicdo dos dados, a url remota/do servidor que queremos: acessar€ 0 tipo derequish ~ onde “rue” define que ser feta uma requisiggo assincrona e “false”, uma sincrona, Esse argumento € opcional. Logo, pode ndo ser defnide, assumindo o valor padrdo "true"; itpsiistecino azuraedge.netrepositorio/002121/0038S/indox hint 301462209/2023, 19:40 Linguagem Javascript Continuande © cédigo, na linha 24 temos a propredade “onreadystatechange", que monitora o status da requsigdo XMLHttpRequest ~ propriedade “wadyState™~¢ especitica uma fungio a ser executada a cada mudanga; Repare, agora, na linha 25: 0 status 3 significa que a requsigdo ainda ests sendo processada, Lago, poderiamos, por exemplo, exbir em nossa tela uma mensagem (ou imagem, como é muito comur) avisando que a informagao requstada esté sendo carregada.Percoba que, dependence do tempo de resposta do servdor remoto, nem sempre serépossivel ver essainformagio; 44a linha 28 temos 0 tratamento do status quando ee for Igual a4 ou sea, quando a requisigoestiverconclulda, Am da propriedade ‘readystate’ poderiamos também menitorar a propriedade status", que armazena o igo de resposta do servidor Hip utlizado pela XMLHtipRecuest; ‘Anda nallia 30, repare que também fol utlzado outro método,o parse. Esse método ndo pertence ao objeto XMLHttpRequest, mas este 6 necessétlo ‘quando 0 recurso requisitado devolve o contedo em formato JSON; Por fim, na linha 41 6 utlizado o métode send, que envia a requsigSo. Outros métodos e propriedades 0 cécigo anterior mostra um exemplo simples do que & possivel fazer utilizando AJAX. Além disso, apenas algumas propriedades e métodos foram Vistos. Saiba mais Na seg Explore +, esto dlsponiveis sugestées de conteddo que permitio um aprofundamento nesse tema, Erecomendavel a litura desse material, assim como a implementago e até mesmo modificaco do c6digo anterior para uma melhor assimilagdo do conte. API Fetch ssa API é, em termos concetuas, similar & XMLHttpRequest ~ ou sja, permite a realizagéo de requlsigées assincronas a scripts do lado servidor. Emetanto, por ser uma implementago mals recente essa interface JavaScript apresentaalgumas vantagens, como: + Ouso de promise: + 0 fato de poder ser ullizado em outras tecnologia, como service workers, por exemple. romise © promise (promessa) é um objeto utlizado para processamento assincrono,representando um valor que pode estar disponvel agora, no future ou nunc ervice workers Scripts executados em segunda plano no navegador, separados da pégina web, (0 céaigo a seguir apresenta o mesmo exemplo ulizad no topico XMLHttpRequest, mas substitundo o XMLHttpRequest pela API Fetch, A segul alguns métodos e propriedades serdo apresentados: Javascript o hitpsistecine azureedge.netrepositoro/002121/0098S/index html 301462209/2023, 19:40 Linguagem Javascript Em telagdo 8 sua sintaxe, podemos notaralgumas semelhangas com a XML HtipRequest, ‘+ URL do servidor moto, definida na linha 19 e ulizaéa na linha 20; + Fetch options ~ em nosso exemplo utlizamos apenas um parémetro, o método, Tal parémeo, inclusive, opcional, Veja a linha 21, onde declaramos © GET, que 6 0 métod padedo. Além desse pardmoto, hd outs disponivels; + Tipo 6e dado retomado pela requis, Veja a linha 24, onde fol utilizada 0 objeto correspondente ao tipo de dado retomnado pela requisi¢So ~ nese aso, JSON. Hé outros tpos de objtos, como texto e até mesma bytes, sendo possivel por exemple, caregar imagens, arquvos pd, entre outros. Anda em relago & sintaxe, merece destaque a forma, prépri, como a API Fetch ata a requisiglo (request) e 0 seu retomn (response): quando 0 rétodo fetch é executado, ele retoma uma promessa (promise) que resolve a resposta (response) & requis, sendo esta bem-sucedida ou no, API Fetch Pra assist aum video sobre oascunta acessea fo} De ‘verséo online deste contetido. = \ JSON ISON pode ser traduzide para Notagdo de Objetos JavaScript. Trata-se de um tipo, ou formatagéo, le Principal vantagem em relago aos outros tpos. Além disso, destaca-se também a sua simplicidade, tanto para ser interpretado por pessoas quanto por para roca de dados. Essa inclusive, sua “méquinas” itpsiistecino azuraedge.netrepositorio/002121/0038S/indox hint 401462109/2023, 19:40 Linguagem Javascript (0 SON, embora normalmente associado ao JavaScript ~ tendo sido defini, inclusive, na especiicagdo ECMA262, de dezembro de 1999 -, 6 um formato de texto, independente delinguagem de programagio, ssa facdade de uso em qualquer linguagem contribu para que se tomasse um dos formatos mais utlizados para a troca de dados. [Aimagem a seguir spresenta alguns exemplos da estrutura de um objeto JSON: \\ semen rte any nen pe jew era dete JOM, ‘Come visto na imager, um objeto JSON tem as seguints caracteritica: + €composto por um conjunto de pares nome/valr. Na imagem, “status” é 6 nome de um objeto e "success", o seu valor. Esses pares so separados por dois pontos * + Uiliza a vrgula para separar pares, valores ou objetos; + O objeto e seus pares sfo englobados por chaves “() + Epossivel defininmos arrays, que sio englobados por colchetes ‘IP (0.ISON fornece suporte # uma gama de tos de datos. Além di 9, possul alguns métodos, como o JSON parse), visto em um de nossos exemplos. Saiba mal ‘A seqio Explore + sugere materials adicionais sobre o tema. Aletura desse material éfortemente recomendada, JSON itpsiistecino azuraedge.netrepositorio/002121/0038S/indox hint 411482209/2023, 19:40 Linguagem Javascript Pra assist aum video ‘sobre oascunto, acease a versio online deste conteide, © Frameworks JavaScript ‘Aexemplo do que vimos nas demaistecnologias do lado cliente, no ambiente Web, existem inimeros frameworks disponiveis também para JavaScript Salba mais Embora née faga parte do escopo deste conteido, cabe destacar que a ulizagéo desses recuréos & uma grande alada no desenvolvimento Web, Logo, sempre que possive, é recomend, Teoria na pratica ‘Como mencionado, os cédigos utlizados para a apresentacSo do XMLHtipRequest e da API Fetch so funciona. Copie 0 cédigo a sequireo execute para ver, na pte, o comportamento das requisies assincronas. nvncerpt 0 itpsiistecino azuraedge.netrepositorio/002121/0038S/indox hint 421482209/2023, 19:40 Linguagem Javascript Case queira avangar um pouce mais, inclu outros elementos de interac na pagina que se comuniquem com servidores remotos. Outra boa idela é pesquisareutlzaralguma ourra API que retorne outro tipo de contedo, diferente do que fl mostrado, No video a seguir, « exercico ser reso. Varios assist! Mostar sougio » Falta pouco para atingir seus objetivos. Vamos praticar alguns conceitos? Ouestiot Sobce as requisigSesassneronasem JavaScript = AJAX, €neorat afar que A Essas requsgdestoram a interado na pgina mals ena é que dependem do eto de dados que so requistados 20 senider, 8 Véblas requisiebes podem ser realizadas a0 mesmo servior em paralelo. ( objeto utlizado para realizago da requisi¢fo fica aguardando o rtorno do servidore & capa de processar esse retorno, sendo ele berm-sucedie ou nso, [As requisigges assincronas ndo bloquelam o cliente ~ por exemple, o navegador Web -, permitindo que ouras operagées selam realizadas enquanto se aguarda 0 rotorno da requisgdo. RequsigBes assineronas néo apresentam problemas de congelamento do fhxo da aplicagzo e de desempenho. Parabéns! A alternativa A esta correta, Como dlscutida as requsigées assineronas tornam a interagio mals pida no cent, uma vez que a pagina no fica bloqueada, aguardando 0 retoma do servidor Isso torna passivl que outras ages, incuindo novas requlsi¢des, sejam realizadas Questia 2 Arespeito do JSON, € correto afirmar que itpsiistecino azuraedge.netrepositorio/002121/0038S/indox hint 431482209/2023, 19:40 Linguagem Javascript (0.ISON é um formato lave de roca de informagies ¢ dados entre sistemas. Esse formato, culonome ver de JavaSrpt Object Notaton, 6 exclusivo para a transmisséo de dados na linguagem JavaScript. ‘Quando uilizamos JavaScript, JSON é nic formato de transmiss 20 de dados cieponivel, uma vez que é nativo dessa linguagem Néo 6 possivelransferr estruturas de dados mals complexas, como arrays, por JSON Em elagéo a dados, o JSON fomece suport limitado apenas a um pequeno conjunto depos de dados. Parabéns! A alternativa A esta correta, LISON 6 uma notagdo simples para toca de dados, Embora proveniente de uma especiicagdo JavaScript, no 6 exclusivo desta inguagem Consideragoes finais Neste conteide,abordamos alinguagem de programago lado cliente do JavaScript. Ao longo dos médulos,vimos conceltose sintaxes ~ propriamente tos ou ea relacionados -, como a interface DOM e as requisigdes assincronas, desde as formas de incluséo em arquivos HTML. declaracéo © ulllzago de variveis studamos, ands, outrasestruturas de dads, como 08 arrays, ¢ a8 conceltos de programacio relacionados & funglo das estrturas de deciséa e de repeticgo, bem come suas aplicagBes em JavaScript. Ao final, pudemos conhecer alguns recursos avangades, como 0 AJAX eo JSON. Para maior ‘compreensio do tema, cada médulo fol amparado com a apresentacao de exemplos préticose funcionals, Assim, temos certeza de que os Ccanhecimentos gobre o JavaScript aqui consalidados 0 audio em sua vida académicae profissional 0 Podcast No podcast a seguir retomamos 0s principals pontos ttabalhadas no contedéoe comentamos sobre algumas tendéncias da tea, Vamos ouvir! Para oui o du acess vrs online deste corteida itpsiistecino azuraedge.netrepositorio/002121/0038S/indox hint 441482209/2023, 19:40 Linguagem Javascript Explore + Para saber mais sobre DOM, lia 0¢ textos: + Modelo de Objeto de Documento (DOM) ¢ Examples of Web and XML development using the DOM, da comunidade Mozil + What isthe Document Object Model, THE HTML DOM Document Object e JavaScript HTML DOM, do site Wschools, ‘Acesse a jQuery, uma biblioteca de fungdes JavaScript Lela AJAX ~The XMLHttpRequest Object, do site W3 schools. Para aprender mais sobre JSON, lea: ISON ~ Introduction, do site Waschools ISON e Trabalhando com JSON, a comunidade Mozilla ‘Acesse os sites das comunidades CodePen e SFiddle para testar digas HTML, CSS e JavaScript Para aprofundar seus conhecimentos, lla: Promise; JavaScript ~ Método Filer, Fetch API e Usando Fetch, da comunidade Mozila Leia o texto Intredugdo aos service workers, de Matt Gaunt Referéncias BARBOSA, A. DOM Publicado em: 4 set. 2017, FLANAGAN, D. JavaScript The Definitive Guide, Califia: O'Relly Media, 2011 RAUSCHMAYER, A. Speaking JavaScript. Califia: OReily Media, 2074 Material para download ‘clique no botéo baixo para fazer download do conteido completo em formato POF. itpsiistecino azuraedge.netrepositorio/002121/0038S/indox hint 451482209/2023, 19:40 Linguagem Javascript O que vocé achou do conteido? waa © feltarprolems itpsiistecino azuraedge.netrepositorio/002121/0038S/indox hint 46148