Codificação Front-End
Role para baixo
Desafio 3
No desafio anterior, você aplicou a linguagem de folha de estilos do bootstrap e do CSS na estrutura do HTML5 já desenvolvido. Nesta etapa, desenvolverá aplicações e funcionalidades nas páginas, para deixá-las mais dinâmicas, a fim de mostrar mensagens e informações que permitam uma melhor interação com os usuários.
Para isso, no desafio 3, você deverá:
- Aplicar a linguagem de programação JavaScript para implementar eventos no código em HTML que constituirão o site.
Para este desafio, você estudará os seguintes conteúdos:
- Linguagem de programação JavaScript (JS)
- Sintaxe básica
- Variáveis
- Constantes
- Operadores
- Laços de repetição
- Laços condicionais
- Classes
- Função
- Bibliotecas
- Manipulação de arquivos
- Conversão de arquivos
Javascript
Quando desenvolvemos um site, preparamos o Front-End aplicando a linguagem de marcação HTML e estilizamos suas páginas, por meio do CSS3 e do bootstrap, para que elas apresentem uma estrutura adequada e um visual agradável ao usuário. No entanto, utilizando apenas o HTML e o CSS, obtemos apenas páginas estáticas, sem interação com o usuário.
Para adicionarmos interatividade às páginas, tornando-as funcionais, precisamos aplicar uma linguagem de programação que permita ao usuário executar ações, como exibir informações em menus, janelas modais, animações, infográficos interativos, mapas, preencher e enviar informações em um formulário, entre outras possibilidades.
Fonte: Greg Rakozy on Unsplash
O JavaScript é uma linguagem de programação utilizada para criar páginas de sites que sejam dinâmicas e executadas em navegadores. Trata-se de uma linguagem de alto nível, ou seja, sua sintaxe é mais intuitiva e amigável ao programador.
O JavaScript não se restringe apenas às páginas e aos navegadores. Hoje, existem diversos frameworks, com estruturas de códigos prontos a serem seguidos, e APIs (Application Programming Interface, em português, Interface de Programação de Aplicativo), com rotinas e padrões de programação, além de bibliotecas com centenas de funções, que possibilitam utilizar o JavaScript em aplicativos mobile, softwares para desktop e até mesmo no desenvolvimento de aplicações Back-End.
Siga em frente e conheça como aplicar a linguagem JavaScript para implementar eventos no código em HTML, deixando as páginas web dinâmicas e com boa performance.
Importante
Não confunda JavaScript e Java, pois são duas linguagens de programação diferentes.
Sintaxe básica
No JavaScript, as instruções (ou comandos) são chamadas de declaração. Uma instrução pode conter várias linhas, que serão lidas (linha por linha) e interpretadas pelo navegador, sequencialmente. O final de cada instrução deve ser indicado por ponto e vírgula ( ; ).
O código JavaScript pode ser escrito na tag
<script>, dentro da tag
<head>, mas é recomendado inseri-lo após a tag
<body> do HTML para otimizar o carregamento da página.
Assim como o CSS, o JavaScript pode ficar em um arquivo externo e ser linkado ao HTML. Dessa forma, cada tipo de código terá seu próprio arquivo.
Um olhar prático
Faça, agora, um teste prático, criando uma pasta para o arquivo JavaScript. Dentro dele, insira um comando simples. No HTML, chame o arquivo .js, renderize o HTML no navegador e confira o código JavaScript.
Dica
Para comentar no JavaScript, use:
// para comentários de uma linha
/* comentários de várias linhas */
Você sabia?
No Javascript, as aspas usadas no texto exibido em tela podem ser aspas simples ( ' ) ou aspas duplas ( " ).
Embora as duas formas sejam válidas, o ideal é seguir o mesmo padrão pelo projeto todo.
Clique nas setas de navegação para ver o passo a passo do teste prático com o JavaScript.
Dentro da pasta do arquivo index.html, crie uma subpasta chamada js.
Dentro da pasta js, crie um arquivo de texto vazio e renomeie-o para scripts.js (1). Após, clique em “Sim” (2).
A renderização esperada deve aparecer conforme o destaque:
- caixa de diálogo do comando
alertcom a mensagem.
Para inspecionar o HTML, clique com o botão direito e selecione “Inspecionar” ou aperte F12 em seu teclado.
- O destaque mostra a mensagem do comando
console.log.
Variáveis
Variáveis são elementos que armazenam dados de diferentes tipos (que serão utilizados em um algoritmo) na memória do computador.
Clique aqui para baixar o pdf sobre algoritmos.
Para criar uma variável em JavaScript, basta declará-la, digitando:
- a palavra "
var" com o sinal de igual (=); - o identificador;
- o valor que queremos atribuir a ela;
- finalizar com ponto e vírgula (
;).
var = 7;
Exemplo:
Os valores das variáveis podem ser um nome, um número, um caractere, entre outros. O
var é acompanhado por um identificador escolhido pelo usuário. Esse
identificador é único e armazena os valores passados para a variável. No exemplo, as aspas serão
utilizadas para valores de texto, como uma string ou um caractere (V ou F,
por exemplo). Para números (inteiros ou decimais), não é necessário utilizar aspas.
Código JavaScript no scripts.js.
Respectivo HTML inspecionado no browser.
Clique aqui e
saiba quais são as keywords que você não pode usar como
identificadores.
Veja a seguir um exemplo do uso de variáveis, fazendo um texto aparecer ou sumir ao clicar em um botão. Leia com atenção os comentários do código.
Clique nas setas de navegação para ver mais exemplos de variáveis.
As imagens mostram o resultado:
Código JavaScript.
Respectivo HTML inspecionado no navegador.
Outra maneira de juntar, ou seja, concatenar
mais de uma variável com textos no console.log é com a
utilização do símbolo +. Observe:
Código JavaScript.
Respectivo HTML inspecionado no navegador.
Além de imprimir o valor da variável, é possível conferir o seu tamanho, pois cada caractere ocupa um local na memória, inclusive espaços:
Código JavaScript.
Respectivo HTML inspecionado no navegador.
Outro tipo de variável são as arrays. Array é uma lista de zero ou mais expressões inseridas dentro de colchetes ( [ ] ). Você pode passar mais de um valor por array, por exemplo:
Código JavaScript
Código executado no console do DevTools
Para estudar mais sobre arrays, clique aqui (arquivo em pdf).
Importante
O JavaScript é uma linguagem dinâmica e, portanto, não é necessário declarar se a variável é um
texto ou um número. Além disso, essa linguagem é case-sensitive, ou seja, uma
var nome é diferente de uma
var Nome.
Caso você não utilize um programa de codificação, como o Visual Studio Code ou similar, utilize o bloco de notas, uma vez que fontes consideradas padrão, como Calibri ou Courier New, usam caracteres diferentes para as aspas, por exemplo, gerando erros em seu código.
A imagem abaixo mostra como ficam as aspas simples e as aspas duplas em editores de texto como o Word (Calibri e Courier New). Na última linha, a imagem mostra as mesmas aspas digitadas no Bloco de notas.
Constantes
Constante é um tipo de variável cujo valor é fixo, ou seja, não terá seu valor alterado durante uma atribuição ou declaração, por exemplo, o valor de PI ou a data de nascimento do usuário.
As regras para definir o nome de uma constante são as mesmas utilizadas
para uma variável. A diferença é que a palavra var será substituída
por const. Observe:
No exemplo, a constante chave tem valor XPTO. Se a chave for XPTO, a inspeção mostrará “Chave correta”. Caso contrário, mostrará “Erro de chave”.
Operadores de atribuição
Operadores de atribuição são responsáveis por receber um valor operando à sua esquerda baseado no valor do operando à direita.
O operador de atribuição básico é o igual (=), que atribui o valor do operando à direita ao operando à esquerda.
Clique aqui e saiba mais sobre operadores de atribuição (arquivo em pdf).
Laços de repetição
Laços ou estruturas de repetição (também chamados de loops) são blocos de
código que, de acordo com uma condição (ou contador), repetem uma ação. Os comandos de repetição
mais comuns são while, do while e
for:
while
Esse comando é utilizado, normalmente, quando não se sabe o número exato de interações. O contador (ou condição) é modificado ao final do loop.
do while
A condição, ou contador, é modificada antes do loop.
for
Esse comando é utilizado, normalmente, quando se sabe o número exato de interações.
Exemplo 1
Exemplo 2
Laços de condição
Laços de condição, ou estruturas de decisão, são utilizados para testar uma condição e especificar uma ação, caso a resposta da condição seja verdadeira, ou outra ação, caso a resposta seja falsa.
No exemplo, o laço começa com o if e é
seguido pela condição a ser verificada entre parênteses. Dentro do primeiro par de chaves está a
ação a ser executada caso a condição seja verdadeira (“Você pode dirigir”). No
segundo par de chaves consta a ação a ser realizada caso a condição seja falsa (“Você não
pode dirigir”).
É possível usar o comando “se aninhado” ou
else if, como no exemplo.
Veja um exemplo de estrutura condicional e leia os comentários do código com atenção.
Também é possível utilizar os operadores lógicos nas estruturas condicionais.
Clique nas abas
a seguir para ver exemplos.
Representado pelos símbolos &&, encadeia duas ou mais
condições, devendo todas ser atendidas para que o retorno seja verdadeiro.
Representado pelos símbolos ||, encadeia duas ou mais
condições, das quais pelo menos uma deve ser atendida para que o retorno seja
verdadeiro.
Representado pelo símbolo !, nega a condição. Exemplo:
!true == false.
Importante
Variáveis com os valores definidos como undefined,
null, 0 e
string vazia retornarão como valor zero.
Classes
As classes são métodos nos quais ocorre uma mudança de class atribuídas
no HTML. Temos três elementos em que você pode utilizá-las:
.addClass(), .hasClass(),
.removeClass().
.addClass( ) e .removeClass( )
.addClass e
.removeClass adicionam e removem, respectivamente, a
class dos elementos do HTML, alterando seu estado, ou seja, sua
estilização.
.hasClass( )
.hasClass é um método que retorna
true ou false, pois ele irá comparar a
class atribuída ao elemento do HTML.
Um exemplo prático para o uso das classes ocorre quando você tem uma
div pai que contém diversas tags p e
você deseja estilizar apenas uma. Nessa situação, você pode adicionar uma
class para essa tag específica e, no JavaScript, você irá chamá-la
utilizando esse método e passando como condição a estilização.
Funções
Em algumas situações, é necessário executar a mesma tarefa várias vezes. Para evitar a redundância desse bloco de códigos, uma função é utilizada.
A função é iniciada pela palavra function e
seguida pelo nome da função. Para criar o nome de uma função, também são aplicadas as mesmas regras
para a criação de um nome de uma variável.
As imagens a seguir mostram um exemplo de função e seu respectivo resultado:
Perceba que a função começa com function e é seguida pelo seu
nome (soma_numeros). Dentro desse bloco, o código fica entre
chaves { }. Após a finalização, é necessário chamar novamente o nome da função.
Nesse exemplo, foram criadas três variáveis dentro do escopo da função
(a, b e
resultado). Com o console.log, é possível verificar o valor da
variável resultado, que está guardando a soma de a + b = (5 +
5).
Para entender melhor as funções, assista ao vídeo abaixo:
Cliqueaqui para baixar o PDF do vídeo.
Bibliotecas
Bibliotecas são compostas de funções pré-escritas, nas quais é possível utilizar o código sem implementar algo novo. Dessa forma, é possível chamar a função e utilizá-la em diversos locais do código para realizar alguma ação em sua aplicação.
Neste curso, você conhecerá a biblioteca de funções do JavaScript Jquery, que possibilita simplificar o código de funções que incrementarão a aplicação web, fazendo manipulação do DOM (HTML final), o que permite deixar o código interativo e funcional. A imagem a seguir contém um exemplo:
Para usar a biblioteca Jquery em sua máquina, é necessário configurá-la. Clique aqui e baixe o arquivo com o passo a passo desse processo (arquivo em pdf).
Manipulação do DOM
Manipulação do DOM é toda alteração ou interação ocorrida em um ou mais elementos do HTML, ocasionando uma mudança de estado. Por exemplo, um clique em um botão, no qual será aplicado um evento, pode ativar uma função que altera o tamanho de uma imagem, cor de fundo do site, fonte de um texto ou qualquer elemento na página HTML.
Clique aqui para aprender a usar componentes navBar e dropdown (arquivo em pdf).
Antes de iniciar a parte prática, é importante recapitular alguns elementos. Você tem um
elemento de botão em seu código HTML que possui uma class
chamada “botao”.
O código em Jquery é iniciado pela sintaxe $ e a
class do HTML é chamada. Ao clicar
(click), a seguinte função será realizada:
- será adicionada a
class"btn-hidden" em todos os itens que tiverem aclass".btn".
Caso se tratasse de um seletor id, e você quisesse fazer um
evento, ficaria:
Extensão de Arquivo JavaScript
O JS é uma linguagem de programação interpretada, sendo implementada em browsers. Quando for preciso utilizar código em JS fora do arquivo HTML, podemos salvá-lo de forma separada utilizando extensão .js e chamar o arquivo criado usando a tag <script>.
Caso deseje abrir o arquivo e não tenha um programa apropriado para ler o código (IDE), o Windows retornará com uma mensagem de erro de leitura. Caso isso aconteça, você pode alterar a maneira como o arquivo será aberto. Clique com o botão direito do mouse sobre o arquivo e selecione a “Abrir com”, conforme mostra a figura ao lado .
Você pode clicar em “Escolher outro aplicativo” e alterar sua versão de leitura.
Dica
Você pode testar todos os códigos em seu scripts.js, para isso, verifique a inspeção do navegador quando renderizar o HTML.
Para isso, pressione CTRL + Shift + J. Na janela que abrirá, localize a aba Console. Então, cole o código Javascript que deseja testar e aperte Enter. Pronto, o algoritmo será executado pelo navegador.
Também é possível acessar o DevTools (Ferramenta de Desenvolvedor) com a tecla F12 e então fazer o mesmo procedimento de copiar e colar o algoritmo Javascript.
Vamos Praticar
1. Considere a seguinte situação: você deverá acrescentar o conteúdo de parágrafo do seu código HTML em um arquivo JavaScript externo. Identifique a alternativa que apresenta a sintaxe adequada para a realização dessa tarefa.
2. Analise a sintaxe a seguir e escolha a alternativa correta:
function multiplica(num1,num2) {
var resultado = num1 * num2;
return resultado;
}
multiplica(10,88)
Atenção
Selecione uma alternativa.
Parabéns! Resposta correta.
Ao utilizar uma função, você deve iniciar com a palavra
function e passar o seu nome, que, nesse caso, é
multiplica. Em seguida, você determina os parâmetros que o valor receberá, ou
seja, (num1,num2) e específica a variável –
var resultado, que armazenará o resultado da
multiplicação num1 * num2. Por fim, chama-se a
função multiplica, que executa a multiplicação
10,88, ou seja 10 * 88, cujo resultado é 880. Atenção à abertura e ao fechamento
das chaves, bem como ao uso do ponto e vírgula.
Ops! Tente novamente.
Retorne ao conteúdo e estude com atenção o tópico referente a funções. Note que a função é uma multiplicação.
Ops! Resposta incorreta.
A resposta correta está
representada na alternativa b.
Ao utilizar uma função, você deve iniciar com a palavra
function e passar o seu nome, que, nesse caso, é
multiplica. Em seguida, você determina os parâmetros que o valor receberá, ou
seja, (num1,num2) e específica a variável –
var resultado, que armazenará o resultado da
multiplicação num1 * num2. Por fim, chama-se a
função multiplica, que executa a multiplicação
10,88, ou seja 10 * 88, cujo resultado é 880. Atenção à abertura e ao fechamento
das chaves, bem como ao uso do ponto e vírgula.
Aproveite para estudar um pouco mais sobre a estrutura das funções.
3. Dado o laço de condição a seguir, identifique a alternativa que apresenta qual será a saída correta.
x = null;
y = undefined;
if (x==y){
console.log('os valores são iguais')}
else {console.log('os valores são diferentes')}
Atenção
Selecione uma alternativa.
Parabéns! Resposta correta.
Trata-se de uma comparação. Quando você atribui um valor
nulo (null), que, nesse caso,
é o valor de x (= 0), e
indefinido (undefined), nesse
caso, para y, ambos retornam o valor
0. Portanto, trata-se de valores iguais.
Ops! Tente novamente.
Retorne ao conteúdo e estude com atenção o item laços de condição. Note que essa condição avalia valores.
Ops! Resposta incorreta.
A resposta correta está
representada na alternativa b.
Trata-se de uma comparação. Quando você atribui um valor
nulo (null), que, nesse caso,
é o valor de x (= 0), e
indefinido (undefined), nesse
caso, para y, ambos retornam o valor
0. Portanto, trata-se de valores iguais.
Aproveite para estudar um pouco mais sobre as estruturas de condição.
Neste desafio...
Situação-problema | Desafio 3
Neste desafio, você estudou sobre a linguagem de programação JavaScript e como utilizá-la para deixar seu site mais dinâmico. Você conheceu a sintaxe e os conceitos básicos para codificar com essa linguagem, como classes, funções, bibliotecas, entre outros.
Para concluir...
PARABÉNS, VOCÊ CHEGOU AO FIM DA IMPLEMENTAÇÃO DE INTERFACE GRÁFICA (FRONT-END) DE SISTEMAS ONLINE (SITES).
Nessa etapa, você conheceu linguagens que se completam e são a base para a web: a linguagem de marcação HTML, a linguagem de marcação para a folha de estilos CSS e a linguagem de programação JavaScript.
Em HTML, você conheceu tags e atributos. Em tags, você estudou diversos de tipos de tags básicas, como a tag <head> e a tag <body> e os tipos de tags específicas de cada uma delas. Em atributos, conheceu alguns dos mais utilizados, além de aprender como aplicá-los. Estudou como codificar o HTML e até fez seu primeiro site. Depois de praticar no bloco de notas, você instalou e configurou um software para otimizar a codificação.
Em CSS, você conheceu três maneiras de estilização e aprendeu a criar uma folha de estilos e a integrá-la ao seu HTML. Dentro da estrutura do CSS, você estudou a sintaxe e como estilizar fontes, linhas, eventos, entre outros. Você notou também que o CSS aliado ao HMTL é fundamental para a responsividade e acessibilidade de sua página. Por fim, para otimizar ainda mais a codificação, você aprendeu como usar o framework bootstrap e a ferramenta de versionamento Git.
Quanto ao JavaScript, você estudou as diversas possibilidades para deixar seu site mais dinâmico e interativo, usando classes, funções e bibliotecas. Usando os fundamentos da lógica de programação, como variáveis, constantes, operadores, estruturas de decisão e de repetição, é possível utilizar o JS em menus, galerias e muito mais.
Durante seus estudos, ficou evidente que o HMTL, o CSS e o JavaScript são linguagens abrangentes e dinâmicas e, agora, você sabe da necessidade de sempre pesquisar e estudar para se manter atualizado(a) sobre essa área que está em constante desenvolvimento.
Continue estudando e se aprimorando. Até breve e sucesso!
Orientações de Navegação
Veja abaixo as orientações de como navegar pelo curso.
No topo da página é exibido o nome da
unidade curricular.
Indicador de progresso da aula.
Acesso aos principais recursos da página.
Direciona ao início do curso, bem antes do primeiro desafio.
Menu com a relação das seções da unidade curricular.
Exibe as orientações de navegação.
Aumenta ou diminui o tamanho da fonte.
Exibe a tela de glossário da unidade.
Ajusta o contraste da tela.
Exibe a tela de créditos do curso.
Orientações para os exercícios:
Os exercícios contidos nos desafios do curso não fazem
parte da composição da nota.
Para refazer os exercícios, atualize a página
clicando no ícone 
, localizado ao lado
da barra de endereço do navegador, ou pressione a tecla F5.
Título da seção 
Buscar outra seção dentro do desafio 
Glossáriospellcheck
Atributo: Declara uma característica da tag, modificando sua estrutura ou funcionalidade.
Content: Especifica o conteúdo do metadado.
DOM: Document Object Model ou DOM é a interface do HTML lida pelo browser e apresentada para o usuário.
Entities: Entity é um caractere especial, sempre iniciado com
&, como 
(non-breaking space) ou 
(A maiúsculo com til ou Ã) ou 
(a minúsculo
com til ou ã), entre outros.
Framework: Frameworks possuem um modelo ou uma estrutura de códigos prontos a serem seguidos, que permitem que os programadores desenvolvam sites mais rapidamente.
Metadados: Informações que descrevem um dado principal. No HTML, são informações sobre o próprio documento.
Name: É o atributo que especifica o nome do metadado e que tipo de
informação ele contém.
Ponto de interrupção: Medida a partir da qual o elemento assume outro valor para
max-width.
Renderizá-las: Renderizar é obter o produto final de um processo digital. No caso do HTML, significa ver a interpretação gráfica do código, ou seja, ver como fica o código em um navegador.
Responsivo: Responsividade é a capacidade de reagir ou responder de forma esperada ou apropriada em determinada situação. No caso, uma imagem responsiva adapta-se ao tamanho do dispositivo utilizado.
Aviso
Parece que você já iniciou o curso, você pode: