0% acharam este documento útil (0 voto)
16 visualizações41 páginas

Tema 4 - Linguagem Javascript

tema 4 sobre a Disciplina Desenv. Web em Html5, Css, Javascript e Php

Enviado por

Pedro Santana
Direitos autorais
© © All Rights Reserved
Levamos muito a sério os direitos de conteúdo. Se você suspeita que este conteúdo é seu, reivindique-o aqui.
Formatos disponíveis
Baixe no formato PDF ou leia on-line no Scribd
0% acharam este documento útil (0 voto)
16 visualizações41 páginas

Tema 4 - Linguagem Javascript

tema 4 sobre a Disciplina Desenv. Web em Html5, Css, Javascript e Php

Enviado por

Pedro Santana
Direitos autorais
© © All Rights Reserved
Levamos muito a sério os direitos de conteúdo. Se você suspeita que este conteúdo é seu, reivindique-o aqui.
Formatos disponíveis
Baixe no formato PDF ou leia on-line no Scribd
Você está na página 1/ 41
1910402023, 10:58 Linguagem Javascript Linguagem Javascript Prof. Alexandre de Oliveira Paixéo Prof. Kleber de Aguiar Deserigao sentago das conceitos bésicos e das principals funcionalidades do JavaScri amago mais imp dae na inter Propésito Preparagao Notepad++. No Uma aternativa 20s editores instalados no computador si os interpretadores online, como CodePen e JSFiddle ra comegar & nossa jomnada, acesse os gédigos-fontes originais propostos para o aprendizado de Javascript Baie e vooé poderd utlizar os 8 como material de apoio ao longo do tems Objetivos Conceitos e sintaxe do Javascript hitps:stecine azureedge netitepostoriol00212t/003850index hime sua s9104/2023, 10:58 Linguagem Javascript Identiicar os conceitos basicos, a sintaxe as formas de utlizagdo do JavaScript. Médulo 2 Estruturas de decisao e de repeticao Aplicar as estrturas de decisdo e de repetigo. Médula 3 Vetores Identiicar 0 conceito de vetore sua utlizagdo em JavaScript. Médulo 4 Ajax e JSON Reconhecer os recursos assincronos Ajax e JSON. A Introdugao ‘Segundo Flanagan (2011), JavaScript 6 a linguagem de programagdo da Web mais utlizada pelos sites. Além disso, todos os navegadores -estelam ‘eles em desktops, jogos, consoles, tabets ou smartphones -incluem interretadores JavaScript, fazendo dele a linguagem de programagdo mals onipresente da historia, ‘Ao longo deste tema, veremos as conceltos bésicos e as principals funclonalidades do JavaScript. Além disso, aprenderemos aintegro as péginas HTML e a utlizslo- desde tarefas bésicas, como manipular a interface DOM, a tarefas mais complexas, como transmit dados entre o Cliente o servidor de forma assinerona. hitpsistecine.azureedge netiepostorio!00212t/00385,index himit 2181 s9104/2023, 10:58 Linguagem Javascript Para assistir a um video >, sobre o assunto, acesse a ° vers&o online deste conteudo. me eras weet) .data(“bs, * bs at 1-Conceitos e sintaxe do Javascript Ao final deste médulo, voce sera capaz de identificar as conceitos basicos, a sintaxe e as formas de utilizagao do JavaScript. Visao geral JavaScript paginas ~ e a0 CSS ~ res Javascript hitps:stecineazureedge netitepostoriol00212t/0038S0index hime svat 1910412023, 10:58, Linguagem Javascript Tata's de uma linguagem de programaedo interpretada e multiparadigma, uma vez que possui suporte& programaggo estruturada rientada 0 JavaScript, comumente chamado de JS, 0 riadoinicialmente para o ambiente Web, no lado cliente. Entretanto, evoluiu 80 ponto de atualmente ser utlizado também no lado servidor, aim de ser uma das principaislinguagens para o desenvolvimento de aplic os mobile co 1s parecidos, as linguagens de programagéo JavaScript e Java néo tém nenhuma relago Arvore DOM Ainterface DOM Iniciremos nosso estudo de JavaScript entendendo o que é e como manipular a interface, ou érvore, DOM. Isso aula o entendimento de como essa linguagem se integra einterage com a HTML. ‘Asigla DOM (Document Object Model) significa Modelo de Objeto de Documento.Trata-se de uma interface que permite a manipulagso, via programago, de mentos HTML (e outros, como XML, por exemplo) ‘em de interface, é, também, comumente chamado de drvore, por fornecer uma representacao estruturada do documento nesse formato. ‘A drvore DOM & composta por nés e ebjetos, ambos possuindo propriedades e métodos,além de eventos. or melo dessa estrtura, é possivel acessar, por exemplo, o conte textual de um elemento ~ como a tag

-, recuperate até mesmo altera o seu valor Embora frequentemente assoctados, 0 DOM néo faz parte da linguagem JavaScript podendo também ser manipulado por outraslinguagens. Neste ‘tema, ficaremos restrtos & manipulago do DOM por meio do JavaScript imagem a sequirilusira a drvore DOM e seus elementos: — Anvone s== = —= =. - = om = a - Manipulando o DOM com JavaScript Por meio do JavaScript possivel inser inamicamente, em tempo de execurdo. novos elementos & érvore DOM, mesmo que eles nBo fagam parte da estruturaincial da pigina. Da mesma forma, é possivel exclurealterar elementos preexistentes ou dinamicamente criados. Jementos, porém, existréo somente enquanto durar a sesséi tual do ususrio. Ou se, trata-se de uma manipulagso dindmica e dependente de estado, de agdes einteragdes por parte do usuéto, mas que se perderéo quando ele sair da pagina ampo de execucdo hitpsistecine.azureedge netiepostorio!00212t/00385,index himit 4101 1910412023, 10:58, Linguagem Javascript duragdo da visita de um usuario a uma pagina, Dica Com JavaSci, é psstve at mesmo manipula os extlos de um documento deforma sma ao que 6 eto va CSS. o Alnterface DOM Para assisira um video sobre o assunto,acessea versio online deste contetdo, JavaScript e HTML Incorporando o JavaScript a HTML A incorporagio do JaveScrit a paginas HTML pode ser feta de duas formas Cédigos no corpo da pagina Inctuindo os c6digos diretamente no corpo da pagina - dentro da seg e da tag . Para a otimizago do desempenho do carregamento da pagina, eve-se mover todo 0 cédigo JavaScript para seu final, 2 0 fechamento da tag Deve-se tomar cuidado para nao mover cédigos ou scripts incluidos que sejam necessérios & correta visualizagio ‘0u 20s comportamentos da pagina, jé que os cédigos movidos para o final s6 serdo lidos e interpretados apés todo orestante da pagina. Veja a seguir as duas formas citadas de inseroao: hitps:stecine azureedge netitepostoriol902 12t/00386/index himit 1910402023, 10:58 Linguagem Javascript Sintaxe e conceitos Sintaxe JavaScript igo anterior mostra tanto as formas de insergle do JavaScript em uma pégina HTML (Iinhas 7 @ 13) quanto alguns aspectos da sua sintaxe Tals aspectos serdo vistos em detalhes @ceguit, mas, antes de fecomendado que voce copie 0 cédigo anterior e o execute - pode er ern seu computador ou uilizando uma ferramenta de codficagéo on-line, como o CodePen ou JSFiddle Sera utlizados os nmeros das linhas do editor, vstos na imagem anterior, para failitar a locallzagdo dos fragmentos e elementos abordados. ica Existem duas formas de inserir comentérios no cédigo JavaScript: para os comentarios de apenas uma linha, ulizam-se as duas barras"/”. Para os de multipls linhas,utliza-se"/* e"¥". Veja, por exemplo as linhas 14, 15,21 € 22. {A seguir vamos conhecer a sintaxe de Javascript, na qual sero utllzadas os ndmeros das linnas do editor do cédigo anteriomente mencionado para facltar a localizagSo dos fragmentos e elementos abordados, Variaveis ‘SSo declaradas utlizando-se a palavra reservada “var, sucedida pelo seu nome. No devem ser ulizados caracteres especiais como nomes de varidvels.Além disso, embora existam diferentes convencées, procure utlizar um padréo e segutio ao longo de todo o seu cédigo para a nomeagio das varives, obretudo as composta Na linha 26, a palavra composta “resultado multiplicacdo” fl transformada em uma vardvel por melo do padtéo camelcase, ou sea, a segunda palavra(e demais palavra, quando for 0 caso) éinciada com a primeira letra em maidscu hitps:stecineazureedge netitepostoriol00212t/0038S0index hime at 1910412023, 10:58, Linguagem Javascript Outra caracterstica importante de uma verivel em JS & que, por se tratar de uma linguagem fracamente tipada no ¢ necessétiodeclararo tipo de ‘dados. Com sso, uma vardvel que armazenaré um numero (Intel, decimal et) e outra que armazenaré uma palavra (string char etc.) 60 declaradas da mesma forma ‘Apo declaradas, as varéveis podem ser ulizadas sem a palavrareservada ‘var’, como visto nas linhas 19 ¢ 33. nnguagem fracamente tipada ma linguagem é dita fracamente tipada quando no é necesséro informaro tipo de dado no momento de criagéo de uma vardvel Atribuigao ‘As variévis precisa ser declaradas antes de sua uiizago.Enretanto, hd uma forma simplificad, vista na linha 25, na qual éfita uma atribugéo de valores no momento de decaragSo da varével“resultadoMulpicacao ‘A respeito da atribuigdo de valores, distin, importante frisar que, embora dectarados da mesma maneira, o tis de dados sdo atribuldos de formas Exemplo ‘Um numero pode ser atibuldo diretamente a uma varidvel enquanto uma string precisaré estar envolta em aspas ~ simples ou dupa. linha 13 ‘mostra dois nimeros senda atibuidos a “varével. ‘Ao attbuirmos uma string a uma varldvel, obtemos: var nomeDisciplia = “Javascript” = var nomeDiscipli Ponto e virgula Repareo final de cada lina de cédigo ~ todas foram terminadas com a uiizagdo de um pontoe gua. Diferentemente de outras linguagens, em JavaScript no & obrigatria# utilizagdo de caracteres para indcaro final de uma linha de cédigo, mas, seguindo uma lina de boas prticas, adote ‘uma convencéo e a utlize em todo o seu cédigo. Outros elementos ‘Ao longo do cédigo apresentado anteriormente foram utlizados outros elementos. Na tabela a seguir, cada um deles seré desert: Exibi uma caixa de dislogo no navegador. Exstem outras alert fungbes nativas de dislogo inclusive para receber input de 2a valores, Referenciar um elemento da drvore DOM através do valor do document getElementByid seu atibuto “id”. Pesquise também sobre cy document getElement ByClaseName. Propriedade DOM relativa a conteido de um elemento, InnerHTML, Permite tanto a incluso quanto a exclusio e « modificagso do 3 conteido do elemento, hitpsistecine.azureedge netiepostorio!00212t/00385,index himit a1 s9104i2023, 10:58, Linguagem Javascript Operadior de atribuigdo composta linha em questio poderia ser escrita de forma simplficade, com esse operador, ou em sua forma completa, como: “ivLocal.innerHTML = ivLocal innert#TMIL + resutadeMultiplicacac’. Pelavrareservada utiizeda para indicar que seré declared uma fungo. € procedida pelo nome da funglo e por function megan ° pee 36 parénteses. Caso recebe pardmetros eles dever ser ectarados dentro dos parénteses. Palavra reservada, tiizada para indicar 0 conteudo a ser retomnado pela fungéo. Nem todas as fungesretomam return ogee 48 valores. Logo, essa instrugdo 6 deve ser uiizada por funcdes que retornem algum resultado. ie de rest tind tig de a Sintaxe JavaScript eet sobre oassuto acess a vetsao nine deste conteuco, +) Consideragoes adicionais sobre o codigo utilizado como exemplo Volte 20 seu cédigo efaca a seguinte modificagso: ‘Mova 0 cédigo que esté entre as lias 12 e 51, inclusive, para dentro da seg © salve alteragdo e catregue novamente eva pagina, Repare que o alerta 6 exbido, mas a dv “exibe resultado’ no recebeu o valor de resultado da muttiplicagio. hitpsistecine.azureedge netiepostorio!00212t/003851index himit 8181 s910412023, 10:58 Linguagem Javascript | Isso acontece porque, quando 0 céclgo esténo inicio da pagina, ele é lid pelo navegador antes que orestante seja renderizado Portanto,a tag

, por exemplo ainda nd fol carregada endo est presente na drvore DOM, (Caso queira manter 0 seu céigo no inicio e ter 0 mesmo resultado de quando ele fica 20 final, necessério utilizar um evento dentro dele, o "onload", e modificar seu cédigo para ulizéo, Teoria na pratica ‘Ao longo deste tema, os exercicis préticos serdo fundamentals para a ftragdo do conteuido visto, Partindo do cédigo utlizado no t6pico Incorporando 0 JavaScript 8 HTML, modifiqueo da seguinte forma Pega 20 usurio para inserir dois mero interos positives; Aumazene 0s nimeros inserdos pelo usudrio em duas vaiéveis Cie uma funedo para dvdr némerosinteiros; iba na tla uma caixa de didlogo com o resultado da dviséo precedido pela frase “O resultado da dvi ¢ igual a Caso queria além, ce uma caleuladora para realizar as quatro operagSes matemdticas. Nesse caso, vocd precisaré pedir a0 usudrio que escolha a ‘operacéo a ser realizada,além dos nimeros de entrada. Falta pouco para atingir seus objetivos. Vamos praticar alguns conceitos? ‘Questao ‘Alinguagem JavaScript é uma linguagem tipicamente do lado cliente, embora também usada, mais recentemente no lado servidor. Sobre sua utlizago no lado cliente, e mais precisamente sobre sua relagSo com o DOM, assinale a afimativa eorreta: hitpsistecine.azureedge netiepostorio!00212t/00385/index himit 9181 s9104/2023, 10:58 Linguagem Javascript JavaScript permite que a estruturainicial de uma pégina HTML seja modificada. Além disso, como também é uma liuagem com suporte do lado servdor, ela permite que esses cédigos HTML modificados sejam salvos na pégina HTML ofiginal. Um script JS pode ser incuido tanto diretamente no corpo do documento HTML como por melo de um arquivo externo. A fern principal entre essas duas formas esta no fato de que o cédigoinserido diretamente na HTML faz parte da érvore DOM ~ sendo, portanto, a nice forma de manipular os elementos dessa interface. Com a utlizagdo da inguagem JavaScript, 6 possivel ter acesso& érvore DOM. Com isso, tarefas como a modificagio de elementos existent e a inclusio de novos elementos, assim como contedidos, tornam-se possiveis. (0s cédigos JavaScript ncorporados ao final da pagina ndo permitem a manipulagdo da drvote DOM, jé que so interpretados ‘pens apés 0 carregamento de todos os elementos. JavaScript permite que novos elementos sejam inseridos dinamicamente na drvore DOM, desde que esses elementos fagam parte da estrutura nical da pagina Parabéns! A alternativa C esta correta. -Através de JavaScript, é possivel manipular a érvore DOM, independentemente do modo de incorporaglo ao documento HTML. A ‘nica ressalva diz respaito @ eventos de manipulagio que tentem acessar os nés e os elementos DOM antes que toda a pighna seja renderizada, como visto ‘em um dos exemplos demonstrados. Questao 2 ‘Arespeito dos tipos e da utlizagdo de vardvels em JavaScript assinale a afirmativaincorreta fy (0s valores podem ser arbuidos no momento em que a varidvelé declarada. Valores de qualquer tipo podem ser atribuidos da mesma forma JavaScript é uma linguagem fracamente tipada. Logo, no ¢ necesséro informar o to de dado no momento de ctiagéo da vativel |Asvarlveisprecisam ser declaradas antes de serem utlizadas. ‘Uma varidve édectarada por meio do uso da palavrareservada “var, sucedida pelo nome escolhido para a varldvel em questo. Entretanto, caractees especias ndo podem ser usados como nomes de vardveis. Parabéns! A alternativa B esta correta. hitpsistecine.azureedge netiepostorio!00212t/00385,index himit 0141 s9104/2023, 10:58 Linguagem Javascript JavaScript é uma linguagem bastante flexivel em relaglo & decloragSo e & utlizagso de vardveis.Entretanto, alguns cuidados so necessérios entre eles a atrbuigdo de valores do tipo string, que precisam ser englobados por aspas ~ duplas ou simples. 2- Estruturas de decisao e de repeticao Ao final deste médulo, voce sera capaz de aplicar as estruturas de decisdo e de repeticao. Estruturas condicionais Estruturas de decisao Segundo Flanaga lcionais, so instrugSes que executam ou pulam outras Instrugées dependendo do valor de uma expressio especificada. Sio 0s pon deciedo do c6dlgo, também conhecides come ramos, uma vez «que podem alterar 0 fuxo do ebdigo,eriando um ou mais caminhes. Para melhor assimilagdo do conceite, vamos usar um exempl a partir do cédigo construlde no médulo anterior que vamos a sequl hitps:stecine azureedge netitepostoriol902 12t/00386/index himit Linguagem Javascript 1910402023, 10:58 interos positives. que deve ser realizada a diviedo de dots num: 1 do programa dizer (O que acontece se o usuario inserir um nimera inteiro que nao seja positivo? Ou como forgé-to a inserir um nimero positivo? ado que sejainserdo um nimero véldo, ber dois nimeros positives, caleulara dvisdo e exibir o resultado, Perceba que 6 exibido o ususri, levado a inserr novamente o nimero, © fluxo normal eo fuxo resultado da condicional podem ser vistos na imagem a seguir. Nela, so apresentados os passos correspondentes 20 também as do uousro, nosso exerccio, separando as agées do program Repare que a verficagdo “é um n®intiro positive" permite penas duas respostas: ‘sim’ e "no". Tal condigso, mediante e resposta fornecida, é /esponsiivel por seguir o fluxo normal do cédigo ou o alternativo. Dica er mais detalhes. Logo, arespectiva nataco padréo néo foi tiizada em sua confecsio © fluxograma de exemplo foi simpliicado para for Nas linguagens de programago,utlizamos as instrugées condicionais para implementa o tipo de deciséo apresentado no exemplo. Em JavaScript, estdo disponiveis as instrugbes “W/else e“ewiteh” como veremos a seguir hitps:stecineazureedge netitepostoriol00212t/0038S0index hime saat 1910412023, 10:58, Linguagem Javascript If {A sintaxe da instugdo ‘if/else” em JavaScript possulalgumas formas. A primeira e mais simples é apresentada do seguinte modo: If (condigSo) instrugao. Nesea forma, é veficada uma Unica congo. Caso seja verdadelra, a instrugdo eerd executada, Do contréto, no. Antes de continuarmos,é importante destacar os elementos da instrugéo: + Eniciada com a palavra eservad: + Einserida, dentro de parénteses, a condigdo (ou condig6es, como veremos mais adiante). + Eingerida @ instrugso a ser executads caso a condi¢so seja verdadeira Outro detathe importante: caso exate mie de urna instrugSo para ser executeds, éneceseério envolvias em chaves. Veja o exempl: Nesse segundo caso, além de mais de uma instrugo, também tems mais de uma condi¢So. Quando & necessério veriicar mais de uma condigao, lem que cada uma delas precisaré ser verdadeira, utiizamos os caracteres “88 Na prétice, as instrugdes 1 € 2 26 serdo executada verdadeiras. Vamos a outro ex Repare que, nesse cédigo, os caracteres “B&" foram substitldos por I". Eases utimos so utlizados quando uma ou outra condligdo precisa ser verdadeira para que as instrugbes condicionais sejam executadas. E o que acontece se quisermas verificar mais condigdes? Nesse caso, podemos fazer iso tanto para a forma em que todas precisam ser verdadeiras, separadas por “B&", quanto para @ forma em que penas uma deve ser verdadeira, separadas por I". Além disso, é possivel combinar os dois casos na mesma verificagéo. Veja o exemple: hitps:stecine azureedge netiepostoriof00212t/00386/index hime

Você também pode gostar