Texto Aula 3
Texto Aula 3
Texto Aula 3
FERRAMENTAS DE
DESENVOLVIMENTO WEB
AULA 3
https://conteudosdigitais.uninter.com/libraries/newrota/?c=/gradNova/2021/analiseDesenvSistemas/ferramentasDesenvWeb/a3 1/31
10/09/2021 16:13 UNINTER - FERRAMENTAS DE DESENVOLVIMENTO WEB
CONVERSA INICIAL
formas de controle
de fluxo e tipos de dados compostos. Verificaremos, com exemplos práticos,
como
o Javascript funciona para, mais adiante, poder integrá-lo a tecnologias e
conceitos vistos em
aulas passadas (HTML e CSS) e como essa linguagem poderá
ser utilizada no contexto de
ficará mais
tranquilo quando for necessária a incorporação de mais informações e
tecnologias nas
aulas seguintes.
O Javascript é um importante
componente de sistemas SPA, pois essa linguagem é executada no
navegador e
permite que o processamento no lado cliente aconteça conforme verificaremos a
seguir.
TEMA 1 – JAVASCRIPT
administrativas. À
medida que o usuário vai percebendo que existem tarefas que são repetitivas
flexível, não
ser tipada[1]
e, quando adaptadas ao ambiente interno de uma aplicação, permitir o
acesso aos
dados de forma segura por meio de APIs (Spinellis,
2005).
https://conteudosdigitais.uninter.com/libraries/newrota/?c=/gradNova/2021/analiseDesenvSistemas/ferramentasDesenvWeb/a3 2/31
10/09/2021 16:13 UNINTER - FERRAMENTAS DE DESENVOLVIMENTO WEB
Javascript.
Essa linguagem, criada por Brendan Eich enquanto era funcionário da Netscape
em 2015), as versões
passaram a se chamar ECMAScript 2015, ECMAScript 2016, usando o
ano de
lançamento ao final.
navegadores da Internet
(Chrome, Edge, Opera, Safari), e com a utilização de técnicas de compilação
just-in-time
e a evolução da otimização de compilação, o desempenho do Javascript tem
aumentado
Pradel, 2016).
desenvolvidos
com esse mecanismo pode ser mais difícil (Spinellis, 2005).
1.1 MULTIPARADIGMA
alguma estratégia
para essa resolução. As linguagens de programação também são criadas com base
paradigma.
paradigmas sendo
utilizados em trechos de um mesmo programa. A linguagem Javascript é uma
considerado multiparadigma
(Developer Mozilla, 2020).
https://conteudosdigitais.uninter.com/libraries/newrota/?c=/gradNova/2021/analiseDesenvSistemas/ferramentasDesenvWeb/a3 3/31
10/09/2021 16:13 UNINTER - FERRAMENTAS DE DESENVOLVIMENTO WEB
navegador Firefox.
Nesse espaço, poderão ser digitadas expressões em Javascript e poderemos ver o
(a) Chrome
b) Firefox
desenvolvimento de
seu projeto, a utilização do console pode ser útil para testar novas opções ou
Na Figura 1,
temos um exemplo de utilização do console do navegador Firefox, mas o mesmo
https://conteudosdigitais.uninter.com/libraries/newrota/?c=/gradNova/2021/analiseDesenvSistemas/ferramentasDesenvWeb/a3 4/31
10/09/2021 16:13 UNINTER - FERRAMENTAS DE DESENVOLVIMENTO WEB
No
exemplo mostrado na Figura 1, é
feita uma declaração da variável “custo” com um valor “10”
(não se
preocupe com a mensagem “undefined” que aparecerá após algumas
expressões, pois ela
matemática “custo
* 100" que irá multiplicar o conteúdo da variável por 100.
essa
alternativa diversas vezes durante esta aula. Você pode testar esses mesmos
exemplos e criar
durante um teste ou
para verificar algum erro, mas não é produtivo ao desenvolver um aplicativo
tipo de caractere
ou controle que interfira em sua sintaxe. Por esse motivo, são utilizados
editores de
https://conteudosdigitais.uninter.com/libraries/newrota/?c=/gradNova/2021/analiseDesenvSistemas/ferramentasDesenvWeb/a3 5/31
10/09/2021 16:13 UNINTER - FERRAMENTAS DE DESENVOLVIMENTO WEB
desenvolvimento das
aplicações com o console do navegador. O VSC é desenvolvido pela Microsoft,
é
gratuito e pode ser utilizado em Windows, Linux e Mac.
Na
Figura 2, temos
um exemplo de código Javascript aberto no VSC. A aparência pode variar
conforme
o sistema operacional utilizado e a configuração de temas visuais da interface
gráfica em
relacionadas à forma
como as suas instruções são digitadas e estruturadas para que o computador
possa interpretar e executar essas instruções. O Javascript foi criado para
automatizar páginas HTML
https://conteudosdigitais.uninter.com/libraries/newrota/?c=/gradNova/2021/analiseDesenvSistemas/ferramentasDesenvWeb/a3 6/31
10/09/2021 16:13 UNINTER - FERRAMENTAS DE DESENVOLVIMENTO WEB
2.1 VARIÁVEIS
ou conteúdo armazenado.
No Javascript, podemos
declarar uma variável usando “var”. Uma variável, porém, pode ser
declarada sem essa palavra-chave, mas não é uma boa prática ao desenvolver
códigos maiores, pois
de “var”
na declaração da variável, caso seja para simplificação da demonstração.
https://conteudosdigitais.uninter.com/libraries/newrota/?c=/gradNova/2021/analiseDesenvSistemas/ferramentasDesenvWeb/a3 7/31
10/09/2021 16:13 UNINTER - FERRAMENTAS DE DESENVOLVIMENTO WEB
Nas
variáveis mostradas na Figura 3,
temos diferentes tipos de dados que foram armazenados.
No exemplo, números de
ponto flutuante e strings foram associados a um nome, como “msg_erro”
ou
“impostos”. O Javascript trabalha com os tipos de dados: números, string
(sequência de
caracteres), booleanos (verdadeiro ou falso) e objetos. O tipo
objeto será detalhado em outra aula.
assumir algum tipo de dado que pode não ser verdadeiro. Veja
exemplo da Figura 4. Ao
ser nomeada
como “numero_inteiro”, o leitor do código pode inferir que,
ao utilizar a variável mais adiante em seu
“console.log (numero_inteiro)”,
será mostrado o número de ponto flutuante (18.5).
No
Javascript, as strings podem ser criadas com a utilização de
aspas duplas ou simples. Quando
https://conteudosdigitais.uninter.com/libraries/newrota/?c=/gradNova/2021/analiseDesenvSistemas/ferramentasDesenvWeb/a3 8/31
10/09/2021 16:13 UNINTER - FERRAMENTAS DE DESENVOLVIMENTO WEB
2.2 OPERADORES
Os operadores aritméticos
vão retornar valores diferentes conforme a ordem em que são
executados e, no Javascript,
obedecem a mesma ordem usada na matemática, inclusive executando o
que está
entre parênteses primeiro. Na Figura 5, é
apresentada uma sequência de operações
aritméticas.
No
exemplo da Figura 5, pode ser verificada uma sequência de operações iniciando
com a soma
(5 + 5) acrescentando uma nova operação que muda a ordem em que a
expressão é executada.
Os operadores comparativos
estão relacionados à comparação entre os operandos e sempre
retornam um
resultado booleano. No quadro a seguir, temos uma sequência de exemplos de
comparações entre números.
https://conteudosdigitais.uninter.com/libraries/newrota/?c=/gradNova/2021/analiseDesenvSistemas/ferramentasDesenvWeb/a3 9/31
10/09/2021 16:13 UNINTER - FERRAMENTAS DE DESENVOLVIMENTO WEB
Na
utilização de operadores lógicos, usamos os símbolos &&
para a operação E (ou “AND”), o
No
próximo quadro, temos o resultado de operações executadas com o operador lógico
OU (||).
Esse operador vai retornar falso apenas se todos os operandos forem
falsos.
Quadro4 – Utilização do
operador lógico ||
https://conteudosdigitais.uninter.com/libraries/newrota/?c=/gradNova/2021/analiseDesenvSistemas/ferramentasDesenvWeb/a3 10/31
10/09/2021 16:13 UNINTER - FERRAMENTAS DE DESENVOLVIMENTO WEB
Os
operadores binários executam também as operações OU, E e NOT nos
operandos, mas neste
caso, essas operações são feitas com cada um dos bits dos
operandos. O resultado é um novo valor.
Para
compreender melhor o cálculo que é feito, é importante saber como converter o
número
Para
entender os exemplos ao lado, é
preciso analisar as operações de forma
binária.
Vamos usar os valores em 4 bits: o
número 5 pode ser representado como
0101, o 6 como 0110, o 1 como 0001 e o
valor 2 como 0010.
Na primeira
operação temos:
0101 &
0001
O resultado
foi 0001, pois apenas os
primeiros
bits de cada número (da direita
para a esquerda) eram verdadeiros.
Na última
operação, temos:
0110
|
0001
O resultado
foi 0111, pois apenas os dois
últimos bits de cada número (da direita
para a esquerda) eram falsos.
https://conteudosdigitais.uninter.com/libraries/newrota/?c=/gradNova/2021/analiseDesenvSistemas/ferramentasDesenvWeb/a3 11/31
10/09/2021 16:13 UNINTER - FERRAMENTAS DE DESENVOLVIMENTO WEB
Os
operadores podem ser utilizados em conjunto em uma mesma expressão. Podemos
criar uma
operação aritmética que vai resultar num valor, que será comparado
com outro e o resultado dessa
comparação será logicamente testada com outros
resultados. Usando mecanismos de controle que
resultado de
algumas operações.
coletados durante a
sua execução, permitindo certo grau de inteligência ao algoritmo.
As estruturas de controle de
decisão são usadas para criar alternativas ao algoritmo. O código
normalmente é
executado de forma linear, da primeira instrução até a última. Mas, em alguns
casos,
dispositivo ou outras
variações de informações que são recebidas pelo programa.
condição
(verdadeira ou falsa) e, conforme a resposta, executar ou não determinadas
instruções.
https://conteudosdigitais.uninter.com/libraries/newrota/?c=/gradNova/2021/analiseDesenvSistemas/ferramentasDesenvWeb/a3 12/31
10/09/2021 16:13 UNINTER - FERRAMENTAS DE DESENVOLVIMENTO WEB
Figura 6 – Controle
com “if” simples
Na
Figura 6, na
primeira comparação, conforme os valores iniciais, tivemos o resultado falso:
ou
informação da variável
hoje seria coletada diretamente do dispositivo. Assim, quando o número do
dia
fosse o mesmo do “dia_da_oferta”, o programa emitiria a mensagem.
durante o horário
comercial? E se o desconto for com base na quantidade de pedidos? E
se o
instrução
caso a condição seja falsa. Ao pensar na condição, o desenvolvedor estrutura da
seguinte
“? :”, que pode ser usado como uma expressão. Nesse exemplo, a
variável “msg” vai receber a string
https://conteudosdigitais.uninter.com/libraries/newrota/?c=/gradNova/2021/analiseDesenvSistemas/ferramentasDesenvWeb/a3 13/31
10/09/2021 16:13 UNINTER - FERRAMENTAS DE DESENVOLVIMENTO WEB
“Abafado” se o resultado da
comparação (temperatura > 25) for verdadeira ou “Normal”, caso
contrário.
Figura 7 – Decisão
com operador “? :”
Quando
temos muitas condições para serem testadas na sequência, podemos também
utilizar a
o outro,
na instrução “case”. Podem existir várias instruções “case” com
diferentes opções para teste.
Quadro 6
– Utilização do “switch..case”
A
comparação usando o “switch” pode ser feita com strings ou com
números, e a instrução “case”
programa
possa continuar para a instrução após o “switch”, um comando “break”
deve ser utilizado,
facilitando a leitura.
conjunto com
variáveis e controles de decisão, podem ser adaptadas para muitas situações.
uma ou mais
instruções enquanto a condição ser verdadeira.
Nesse
exemplo, a
mensagem impressa vai até 9, pois o incremento da variável contador é a
última
instrução a ser executada dentro da repetição. Numa das repetições, o
valor de contador
frases na tela com pouca modificação. Bastaria, nesse caso, alterar o valor 10
na condição. Apesar de
No
exemplo ao lado, foi utilizada novamente a variável contador e a mesma
frase será
impressa a cada repetição.
Desta
vez, todas as informações necessárias estão na linha da instrução “for”:
a inicialização da
variável contador, o teste de condição (contador < 10)
e o incremento de contador.
A cada
ciclo de repetição, apenas o teste e o incremento da linha do “for”
são repetidos.
No
exemplo com o uso da instrução “while”, o controle da condição muitas
vezes fica fora da
agrupamento
de código chamadas de funções.
https://conteudosdigitais.uninter.com/libraries/newrota/?c=/gradNova/2021/analiseDesenvSistemas/ferramentasDesenvWeb/a3 16/31
10/09/2021 16:13 UNINTER - FERRAMENTAS DE DESENVOLVIMENTO WEB
No
exemplo da Figura 8, temos
uma lista de strings contendo tipos de carnes e cada item da lista
tem
uma posição controlada pelo array. A posição em um array inicia
sempre em zero. É por esse
Ao
analisar o código do quadro, podemos perceber que, com poucas modificações, ele
serviria
https://conteudosdigitais.uninter.com/libraries/newrota/?c=/gradNova/2021/analiseDesenvSistemas/ferramentasDesenvWeb/a3 17/31
10/09/2021 16:13 UNINTER - FERRAMENTAS DE DESENVOLVIMENTO WEB
Ao
utilizar o termo “length” junto ao array
lista_de_carnes, o
desenvolvedor não
precisa mais contar os elementos para criar
a condição do
laço de repetição.
Também
não precisa alterar o código caso
sejam inseridos ou eliminados itens do
array
lista_de_carnes.
Outra
forma de deixar mais genérica a exploração de itens de um array pode ser
por meio da
importante é o desenvolvedor
conseguir solucionar a situação inicial. Cada desenvolvedor tem uma
forma de
lidar com a situação e, à medida que vai praticando e experimentando novas
situação no
ou mais legível.
4.2 FUNÇÕES
reutilizáveis, tanto
dentro de seu programa quanto em outros programas que precisassem executar
uma
determinada tarefa de forma semelhante.
outros
sistemas e, então, transformar aquele trecho em uma função.
https://conteudosdigitais.uninter.com/libraries/newrota/?c=/gradNova/2021/analiseDesenvSistemas/ferramentasDesenvWeb/a3 18/31
10/09/2021 16:13 UNINTER - FERRAMENTAS DE DESENVOLVIMENTO WEB
genérica. A
seguir, temos o código inicial.
Mesmo
que o desenvolvedor acrescentasse variáveis na repetição, como indicado no
quadro,
ainda assim teria que copiar e colar o trecho de código para outra
parte do programa e fazer as
adaptações necessárias.
trecho de
código e pede a sua execução em outras partes do programa.
simples: identificando um
trecho de código com um nome para ser chamado posteriormente. O
termo “function”
antes do nome da função indica que o que vem a seguir é a definição de uma
função e o código que for inserido entre { } será executado quando a função for
chamada.
a) b)
https://conteudosdigitais.uninter.com/libraries/newrota/?c=/gradNova/2021/analiseDesenvSistemas/ferramentasDesenvWeb/a3 19/31
10/09/2021 16:13 UNINTER - FERRAMENTAS DE DESENVOLVIMENTO WEB
Em (a),
temos a definição da função
chamada tabuada() e, dentro dela { },
temos o “for” usado anteriormente.
A partir da
definição da função, sempre
que o programador precisar imprimir a
tabuada do
5, bastaria chamar a função
“tabuada()”, como pode ser visto em (b).
Este
já é um passo interessante, mas podemos deixar a função ainda mais genérica com
a
Figura 9 – Função
"tabuada()" com parâmetros
código é executado
sem a necessidade de reconfigurar o controle de repetição ou a frase que
contém
o cálculo da tabuada.
https://conteudosdigitais.uninter.com/libraries/newrota/?c=/gradNova/2021/analiseDesenvSistemas/ferramentasDesenvWeb/a3 20/31
10/09/2021 16:13 UNINTER - FERRAMENTAS DE DESENVOLVIMENTO WEB
O
desenvolvedor pode executar a função com diferentes limites, e o que vai
impactar para
bastando
para isso chamar a função e informar os parâmetros corretos e na ordem que
devem ser
usados.
conjuntos de funções e
disponibilizam muitas vezes reunidas numa “biblioteca” de funções ou
frameworks,
como visto em aulas anteriores.
4.2.1 ESCOPO
na
visibilidade do conteúdo de variáveis: o escopo. Esse conceito define
se o conteúdo de uma
variável permanece disponível em trechos específicos de
código e estão associados a conflitos que
https://conteudosdigitais.uninter.com/libraries/newrota/?c=/gradNova/2021/analiseDesenvSistemas/ferramentasDesenvWeb/a3 21/31
10/09/2021 16:13 UNINTER - FERRAMENTAS DE DESENVOLVIMENTO WEB
outros
sistemas ou de bibliotecas e que também têm variáveis que podem criar conflitos
com o
Figura 10 – Variável
com escopo global
Ao
declarar uma variável (usando o termo “var”) dentro de uma função, o
conteúdo passado a
essa variável fica visível apenas dentro da função
(escopo local). No exemplo da Figura 11,
temos a
exemplo anterior, o
navegador emite um erro de execução “ReferenceError: cliente is not defined”
indicando que a variável “cliente” não está definida.
Figura 11 – Variável
com escopo local
https://conteudosdigitais.uninter.com/libraries/newrota/?c=/gradNova/2021/analiseDesenvSistemas/ferramentasDesenvWeb/a3 22/31
10/09/2021 16:13 UNINTER - FERRAMENTAS DE DESENVOLVIMENTO WEB
Ao
começar a utilizar as variáveis em seus códigos, o desenvolvedor vai se deparar
com algumas
da linguagem Javascript,
foram criados os termos: let e const.
uma
repetição com “for”, por exemplo, não seria visível fora do bloco da
repetição, como podemos
ver no quadro a seguir.
A
variável num criada dentro do “for” foi
utilizada na repetição
e impressa. Depois
de finalizado o bloco do “for”, a variável
deixa de
existir.
Na
impressão das variáveis na sequência, a
variável tab permaneceu
visível, mas, ao
imprimir a variável num, ela não existia
mais,
gerando o erro “ReferenceError: num
is not defined”.
https://conteudosdigitais.uninter.com/libraries/newrota/?c=/gradNova/2021/analiseDesenvSistemas/ferramentasDesenvWeb/a3 23/31
10/09/2021 16:13 UNINTER - FERRAMENTAS DE DESENVOLVIMENTO WEB
identifica o cliente e guarda em variável local (que pode ser utilizada dentro
da função para diversas
outras situações) e depois de apresentar no console, a
função retorna a informação para quem a
executou.
Figura 12 – Funções
mais genéricas com retorno e parâmetros
Depois
de um tempo experimentando e testando alternativas, o desenvolvedor vai criando
novas
formas de resolver os problemas: com mais variáveis, menos funções,
diferentes comandos ou com o
https://conteudosdigitais.uninter.com/libraries/newrota/?c=/gradNova/2021/analiseDesenvSistemas/ferramentasDesenvWeb/a3 24/31
10/09/2021 16:13 UNINTER - FERRAMENTAS DE DESENVOLVIMENTO WEB
outra
aula.
no Javascript
com mais detalhes em aulas posteriores, mas utilizaremos o objeto relacionado à
data e
hora neste tema para exemplificar como podemos manipular dias, horas e meses
dentro de nossos
códigos.
https://conteudosdigitais.uninter.com/libraries/newrota/?c=/gradNova/2021/analiseDesenvSistemas/ferramentasDesenvWeb/a3 25/31
10/09/2021 16:13 UNINTER - FERRAMENTAS DE DESENVOLVIMENTO WEB
mostrou o minuto e
segundo original).
a)
b)
a)
https://conteudosdigitais.uninter.com/libraries/newrota/?c=/gradNova/2021/analiseDesenvSistemas/ferramentasDesenvWeb/a3 26/31
10/09/2021 16:13 UNINTER - FERRAMENTAS DE DESENVOLVIMENTO WEB
b)
No
mesmo quadro, em (b), vemos uma opção de configurar uma data específica futura
para
depois extrair o dia da semana (0=Domingo). Neste caso, a data está sendo
fornecida pelo
desenvolvedor e não está sendo coletada do dispositivo. Esse
tipo de sequência é comum nos
aplicativos quando precisam verificar se uma data
de pagamento vai cair no fim de semana ou se um
Figura 13 – Condição
usando componentes de data
https://conteudosdigitais.uninter.com/libraries/newrota/?c=/gradNova/2021/analiseDesenvSistemas/ferramentasDesenvWeb/a3 27/31
10/09/2021 16:13 UNINTER - FERRAMENTAS DE DESENVOLVIMENTO WEB
No
código da Figura 13,
temos um “if” que vai mostrar uma mensagem caso o horário coletado
do
dispositivo naquele trecho do programa esteja abaixo de 8 ou acima de 18 horas.
Esse trecho
pode estar antes de uma transferência de dinheiro, no momento de
login em um sistema ou na tela
de atendimento de suporte. Conhecendo as
informações de data e hora que podem ser acessadas e
sabendo construir as
estruturas de decisão, o leitor pode criar diversos outros testes e tarefas que
devem ser associados com a verificação de tempo.
5.2 INTERVALOS
demais
tarefas que o sistema precisa executar enquanto o evento não aconteça. Pode ser
algo que o
usuário precisa informar ou uma informação que será produzida pelo
hardware, como a chegada de
um dado via rede.
https://conteudosdigitais.uninter.com/libraries/newrota/?c=/gradNova/2021/analiseDesenvSistemas/ferramentasDesenvWeb/a3 28/31
10/09/2021 16:13 UNINTER - FERRAMENTAS DE DESENVOLVIMENTO WEB
Na Figura 14, há um
exemplo de função que foi criada na declaração da variável agenda, que
recebe
um “setInterval()”. Depois da declaração, são executados dois “console.log(“teste”)”,
indicando
que outros comandos podem ser executados e, depois (após completar os
primeiros 5 segundos),
iniciou a impressão das linhas agendadas.
Figura 14 – Execução
de função a cada intervalo de tempo
A
função “setTimeout()” é semelhante na sua declaração, mas executa a
função apenas uma vez,
após o intervalo de milissegundos.
FINALIZANDO
associados a
exemplos práticos que podem ser reproduzidos diretamente no console dos
principais
https://conteudosdigitais.uninter.com/libraries/newrota/?c=/gradNova/2021/analiseDesenvSistemas/ferramentasDesenvWeb/a3 29/31
10/09/2021 16:13 UNINTER - FERRAMENTAS DE DESENVOLVIMENTO WEB
navegadores.
explicados e
exemplificados no contexto da linguagem de script no ambiente de um
navegador.
REFERÊNCIAS
BROWN,
E. Learning Javascript: Add Sparkle and Life to Your Web Pages. O'Reilly
Media, 2016.
SOBRE Javascript.
Developer Mozilla. Disponível em:
<https://developer.mozilla.org/pt-
BR/docs/Web/Javascript/About_Javascript#Recursos_para_Javascript>.
Acesso em: 22 mar. 2021.
SPINELLIS,
D. Java makes scripting languages irrelevant?. IEEE software, v. 22, n.
3, p. 70-71,
2005.
variáveis suportam.
(<https://www.ecma-international.org>).
https://conteudosdigitais.uninter.com/libraries/newrota/?c=/gradNova/2021/analiseDesenvSistemas/ferramentasDesenvWeb/a3 30/31
10/09/2021 16:13 UNINTER - FERRAMENTAS DE DESENVOLVIMENTO WEB
https://conteudosdigitais.uninter.com/libraries/newrota/?c=/gradNova/2021/analiseDesenvSistemas/ferramentasDesenvWeb/a3 31/31