Linguagem e Padrões Web

Slides 04

Enviado por

Van Bahia

Direitos autorais

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, TXT ou leia on-line no Scribd

0% acharam este documento útil (0 voto)

33 visualizações20 páginas

Linguagem e Padrões Web

Slides 04

Enviado por

Van Bahia

Direitos autorais

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, TXT ou leia on-line no Scribd

Você está na página 1/ 20

WBA0975_v1.

Linguagem e padrões Web

Linguagem JavaScript: do básico
ao avançado
Implementação de Páginas Web com HTML,
CSS e JavaScript

Bloco 1
Anderson da Silva Marcolino
Introdução

• A criação das páginas e Figura 1 - Equipe de desenvolvedores

aplicações web vão
muito além do HTML e
CSS. Para incluirmos
mais dinamismo a essas
páginas, inserimos um
terceiro elemento: Fonte: https://br.freepik.com/vetores-gratis/pessoas-
fazendo-perguntas-aos-empresarios_9176149.htm.
JavaScript. Acesso em: 2 mar. 2021.
Introdução

• JavaScript permite adicionar funcionalidades e

comportamentos que não são possíveis de se obter
apenas com o HTML e CSS.
Um projeto com HTML, CSS e JavaScript

• Vamos criar um website com HTML, CSS e JavaScript.

• Trata-se de um projeto que buscará aplicar os
conhecimentos fundamentais para qualquer
desenvolvedor web.
Reflexão

• Até o momento, qual foi sua maior dificuldade no

contexto do projeto?
• Se você teve diversas dificuldades, procure
anotá-las e revisar os conceitos que as
envolvam.
• Mas se você não teve dificuldades, ainda
assim recomenda-se a revisão dos pontos
abordados para uma aprendizagem mais
profunda.
Linguagem JavaScript: do básico
ao avançado
Estrutura das Pastas e Subpastas em um
Projeto e Acesso aos Arquivos

Bloco 2
Anderson da Silva Marcolino
Estrutura e acesso às pastas de um projeto
 Um projeto de website é organizado Figura 2 - Homem com dúvida
considerando muitos elementos,
como:
 Página principal: index.html.
 Subpastas e seus arquivos:
 css: arquivos .css
 html: arquivos .html
(páginas secundárias
Fonte: https://br.freepik.com/vetores-
chamadas na index). gratis/secao-de-perguntas-frequentes-
do-site-helpdesk-ao-usuario-suporte-ao-
 js: arquivos .js (JavaScript). cliente-perguntas-frequentes-solucao-
de-problema-jogo-de-perguntas-
personagem-de-desenho-animado-do-
homem-confuso_10780026.htm. Acesso
em: 2 mar. 2021.
Reflexão

• Você tem uma opção melhor para organizar a

estrutura do seu projeto?
• Saiba que um padrão sempre é melhor do que não
seguir nenhuma estrutura.
• Frameworks web adotam padrões específicos, mas
muitos deles são semelhantes à estrutura que
estudamos anteriormente.
Linguagem JavaScript: do básico
ao avançado
Compreendendo o Bootstrap 4 e o
LocalStorage

Bloco 3
Anderson da Silva Marcolino
Bootstrap 4

• Um framework muito utilizado para a estilização

de páginas é o Bootstrap 4.
• Vamos entender um pouco mais sobre ele
em nosso projeto?
JavaScript e uso do LocalStorage

• Aplicações web e websites precisam armazenar

informações. Contudo, nem sempre essas opções são
viáveis e estão disponíveis aos clientes. Para isso,
podemos utilizar o LocalStorage.
• Vamos entender como ele funciona e como
JavaScript o manipula.
Revisando as etapas

• Como integrar as folhas de estilo do framework

Bootstrap 4 e alguns sites e fontes que podemos nos
aprofundar sobre esse assunto.
• Entendendo o LocalStorage, como visualizar seu
conteúdo usando as ferramentas do desenvolvedor
do Chrome.
• Como manipular os dados no LocalStorage por meio
da Linguagem JavaScript.
Teoria em Prática
Bloco 4
Anderson da Silva Marcolino
Reflita sobre a seguinte situação
• JavaScript é uma linguagem de programação que se
integra aos documentos HTML, criando um
comportamento dinâmico aos diferentes elementos do
documento. Considerando seu uso e integração, crie um
documento HTML que apresente três modos de identificar
um elemento do HTML na linguagem JavaScript, de forma
a introduzir algum comportamento como: imprimir uma
mensagem no console, exibir um alerta ou alterar o
conteúdo diretamente em um elemento HTML específico.
Norte para a resolução...
• Crie um documento em HTML 5.
• Insira meios de obter uma referência do elemento por meio do
objeto document no código JavaScript.
• Dê preferência pela criação de um arquivo .js a parte do
documento HTML. Isso garantirá o reuso posterior desse arquivo.
• Salve as referências aos elementos do HTML em variáveis,
facilitando a alteração dos elementos.
• Aplique funcionalidades que permitam visualizar o uso de
JavaScript em tais elementos.
• Teste e verifique se chegou à resposta esperada!
Dica do(a) Professor(a)
Bloco 5
Anderson da Silva Marcolino
Dica do(a) Professor(a)
Como identificar material confiável para estudos no
contexto de HTML, CSS e JavaScript nos mecanismos de
busca
• O desenvolvimento web é vasto. Nessa perspectiva, é
importante sabermos onde buscar referências de
qualidade para utilizarmos.
• Veja algumas dessas referências por meio dos
mecanismos de busca do Google, buscando por
StackOverflow e determinado tema ou JavaScript,
HTML e CSS W3C, por exemplo.
Referências
BOOTSRAP. Introduction. 2021. Disponível em:
https://getbootstrap.com/docs/4.0/getting-started/introduction/. Acesso
em: 24 jan. 2021.