0% acharam este documento útil (0 voto)
27 visualizações17 páginasTexto Da Aula 6
Fundamentos de Desenvolvimento de Software - Texto da aula 6
Enviado por
Luciano MullerDireitos 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)
27 visualizações17 páginasTexto Da Aula 6
Fundamentos de Desenvolvimento de Software - Texto da aula 6
Enviado por
Luciano MullerDireitos 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
/ 17
‘09104/2028, 10:38
FUNDAMENTOS DE
DESENVOLVIMENTO DE
SOFTWARES
AULA 6
Prof. Leonardo Gomes (09104/2028, 10:38 UNINTER
CONVERSA INICIAL
Faremos uma introdugdo da linguagem de programacao Javascript e sua aplicagéo no
desenvolvimento web. Vamos debater sua sintaxe e manipulacao de elementos HTML, seus principais
comandos e também uma importante linguagem de notacao de objetos, chamada JSON.
Ao final desta etapa, esperamos atingir os seguintes objetivos que seréo avaliados da forma
indicada
Objetives Avaliagéo
Dominio sobre os principais comandos do JavaScript Questionirio © questées
dissert
2~ Capacidade de gerar interagées simples com ususrio e elementos HTML de paginas | Questionério e questées
web e desenvolver pequenas solugées utilizando Javascript
3 - Conhecimento pritice e teérico sobre a fungae do Javascript ne conceito de | Questionario e questées
desenvolvimento web dissert
TEMA 1 — HISTORIA DO JAVASCRIPT
Neste tdpico, vamos contextualizar um pouco da histéria do Javascript para melhor
compreendermos a razao de existir e a relevancia dele para o desenvolvimento de paginas web.
1.1 HISTORIA DO JAVASCRIPT
© Javascript surgiu em 1995 e foi projetado pelo cientista da computacao Brendan Eich junto da
equipe que desenvolveu o navegador Netscape, um importante antecessor dos atuais navegadores
hitpslunvitus.unintr.comfavalwebiroa! ant aroa2020, 1098 UNINTER,
Mozilla e Firefox. A linguagem passou por diversos nomes, como Mocha e Livescript, até chegar no
nome Javascript.
Importante observar que 0 nome Javascript nao tem relagéo nenhuma com a linguagem Java.
Apesar da semelhanca no nome, ela se da apenas por jogada de marketing da equipe de Brendan
Eich que, aproveitando da popularidade crescente da linguagem Java, escolheu batizar seu proprio.
produto com um nome semelhante.
A adogéo do Javascript pelo Netscape rapidamente solucionou diversos problemas de
navegaco e se mostrou realmente revolucionaria. A empresa Microsoft, com o seu navegador
Intemet Explorer, rapidamente adaptou uma versao propria do Javascript para si, chamada de JScript.
Tanto 0 Netscape quanto o Internet Explorer foram desenvolvidos baseados no mesmo cédigo fonte
de um navegador chamado Mosaic. Portanto, adaptar o Javascript foi uma tarefa relativamente
rapida. As duas versées competiram por espaco no mercado até 1997, quando uma versio
padronizada do Javascript foi criada para que os desenvolvedores nao precisassem criar codigos
paginas especificas para cada navegador. A versio padronizada se chama ECMAScript e é mantida
pela empresa também chamada ECMA.
Quando falamos de Javascript, JScript e ECMAScript, estamos falando da mesma linguagem;
apenas o ECMAScript diz respeito ao padréo em si e as outras duas sdo variantes da mesma
linguagem que respeitam o padrao enquanto introduzem pequenas modificacées.
1.2 PARA QUE SERVE O JAVASCRIPT
Antes do Javascript, as paginas eram completamente estaticas. A tinica forma de uma pagina
web interagir e mudar qualquer coisa em seu contetido para o usuario era por meio da comunicagéo
com o servidor. Em meados da década de 1990, as conexées domésticas geralmente se davam por
linha telefénica e modem de 28,8 kbps, muitas vezes mais lenta do que estamos acostumados nos
dias de hoje.
Nesse contexto, o Javascript surgiu como a primeira linguagem que atua dentro do navegador
do cliente, utilizando processamento local e permitindo realizar pequenas tarefas que nao precisam
de informacao nova do servidor, diminuindo a necessidade de troca de informacdes apenas para o
que for absolutamente necessario, o que acarreta em uma grande vantagem para o cliente, que tera
hitpslunvitus.unintr.comfavalwebiroa! 3n7 aroa2020, 1098 UNINTER,
uma navegacao mais fluida e menos dependente da conexao - e é bom para o servidor também, que
recebera menos solicitacées.
Para dar alguns exemplos praticos do que o Javascript & capaz de fazer, segue alguns exemplos:
* clicar no botdo “curtir” e a cor do botéo mudar, sendo contabilizado um pequeno contador
soma um sem a necessidade de recarregar a pagina;
‘© menus que, ao serem clicados, apresentam submenus;
* paginas que carregam contetido extra automaticamente & medida que fazemos a rolagem da
barra;
* pequenas aplicagées web como calculadoras, jogos etc.
© validar se determinado parametro em um formulario foi preenchido; e
* alertas no formato pop-up.
Hoje, o Javascript é adotado em diversos outros contextos. Por exemplo, o Nodes, da Google, é
a implementagao do Javascript para ser executado fora do navegador, e se tornou popular como
linguagem para servidores de aplicacdes web, Também é utilizada em um
portante framework de
desenvolvimento de jogos chamado Unity.
No HTMLS, o Javascript é completamente integrado ao HTML e consegue muito facilmente
acessar e manipular os elementos HTML da pagina. Vamos discutir em maiores detalhes como fazer
isso nos préximos topicos desta etapa.
TEMA 2 — CONFIGURAGOES
Vamos discutir trés formas diferentes de colocar cédigo Javascript no seu HTML. A primeira
forma 6 dentro da tag script, a segunda é por um arquivo Javascript externo e, por fim, dentro de
atributos especiais.
2.1 TAG SCRIPT
Como ja foi mencionado antes, o Javascript é complementar ao HTMLS. € uma parte integral
dele. Portanto, nao é necessario fazer uma instalagdo externa, basta apenas criar a tag script e
codificar cédigos Javascript no contetido da tag. Veja no exemplo abaixo como fica o cédigo HTML
com Javascript para abrir um simples alerta com a mensagem: ‘Ola Mundo’.
hitpslunvitus.unintr.comfavalwebiroa! 4n7 osi04iz023, 10:38, UNINTER
pelea amas
head
title>Titulo@){
console. log("Bom dia!");
quantidadePessoas= quantidadePessoas-1;
Nesse exemplo, "Bom dia!" seré impresso na tela enquanto o valor da varidvel
quantidadePessoas for maior do que zero. Repare que 0 cédigo associado fara duas coisas: primeiro
imprimir a mensagem "Bom dia”, e segunda, diminuir 0 valor da quantidadePessoas em 1. Entao o
cédigo vai executar 5 vezes nesse momento quantidadePessoas vai passar a valer 0, a condicéo
associada ao while sera falsa e fluxo do cédigo ira continuar.
Temos possibilidades ilimitadas para criar lagicas muito complexas e elaboradas, e 0 objetivo
aqui foi dar uma pequena amostra disso.
3.4 FUNCAO
Outro conceito muito importante dentro da légica de programacao € a funcdo. Basicamente,
consiste em vocé dar um nome para um bloco de cédigo. Assim como a variavel é um apelido para
um espacgo de meméria com um valor, a funcéo é um “apelido” para um bloco de cédigo. Sempre
que chamamos determinada fungéo pelo seu nome ou “apelido’, a funcdo associada é executada,
Confira o exemplo a seguir: a funcao necessita da palavra reservada function, em seguida deve vir o
hitpslunvitus.unintr.comfavalwebiroa! wr on14i2023, 10:28 UNINTER,
nome da fungao, depois abre e fecha parénteses para eventuais parametros e por fim abre e fecha
chaves com 0 bloco de cédigo associado.
console. log(”
cumprimentos () ;
console. log("Seja bem vin
cumprimentos () ;
cumprimentos(){
console. log("Bom dia"
console.log("Boa tard
console. log(
No exemplo, a fungéo chamada cumprimentos esta associada ao bloco de cédigo que imprime
“Bom dia’, “Boa tarde” e "Boa noite’. E sempre que escrevermos “cumprimentos()", 0 cédigo sera
executado, 0 que é uma facilidade para quando desejamos repetir muitas vezes um mesmo bloco de
cédigo sem a necessidade de repetir toda sua digitacéo.
E possivel também passar parametros para a fungao. Nesse caso, o bloco de cédigo o executara
baseado no valor determinada vai
vel passada por parametro. No exemplo a seguir, a idade esta
sendo passada como pardmetro para a fungao acesso, e dependendo do valor da variavel idade uma
mensagem diferente ira aparecer no console.
hitpslunvitus.unintr.comfavalwebiroa! sant si04i2023, 10:38, UNINTER
acesso(17);
function acesso(idade){
if(idade<18){
console. log("/
a
ang
console. log("A
Mais um conceito de grande importancia na programacao sao as listas. Como 0 nome sugere,
serve para listar itens de forma ordenada. Digamos que seja interessante armazenar o nome de varias
cidades em uma Unica variavel. £ possivel fazer isso por meio das listas, conforme o exemplo a seguir:
Elen] Rb RTE ease
ere"]5
console. log([capitaisSul[@]]);
console. log([capitaisSul[1]]);
console. log([capitaisSul[2]]);
Conforme o exemplo dado, uma lista chamada capitaisSul foi criada e nela temos trés itens. A
lista € criada utilizando 0 colchetes, e cada item & separado por virgula. Para acessar os itens
posteriormente, seja para modificd-los ou ler o seu contetido, basta colocar entre colchetes a posicéo
deles iniciando por zero. No exemplo dado, “Curitiba” esta na posico 0, “Florianépolis” na posigéo 1
e "Porto Alegre" na posicao 2
hitpslunvitus.unintr.comfavalwebiroa! 1317 oai04i2023, 10:38, UNINTER
Neste tdpico, vamos discutir como fazemos para 0 Javascript interagir com os elementos HTML
da pagina. Vamos discutir um tipo especial de légica que existe dentro do Javascript, chamada de
evento.
Para apresentar esse conceito de evento, vamos partir de um exemplo pratico primeiro e na
sequéncia destrincharemos em maiores detalhes o que esta acontecendo. O cédigo abaixo ira
adicionar um evento de “clique” ao paragrafo de id #para, ou seja, no momento que o paragrafo em
questdo receber um clique, ele ird executar a fungdo que altera seu contetido.
p>Paragrafo com texto 1.
Paraégrafo com texto 2.