Slides de Aula - Unidade III
Slides de Aula - Unidade III
Slides de Aula - Unidade III
Programação
Web Responsiva
A linguagem de programação JavaScript, como o seu próprio nome diz, é uma linguagem
scripting. Normalmente, uma linguagem scripting se define por uma linguagem de
programação que disponibiliza ao programador a possibilidade de controle de aplicações de
terceiros (FREEMAN; ROBSON, 2016).
O que é JavaScript?
Outra característica comum nas linguagens de scripting é que, normalmente, elas são
linguagens interpretadas, ou seja, não dependem de compilação para serem executadas.
Estes scripts serão interpretados pelo próprio browser sem fazer apelo aos recursos de um
servidor (FREEMAN; ROBSON, 2016).
Iniciando com JavaScript
Para testarmos o nosso primeiro JavaScript, vamos criar um novo projeto; para isso, crie uma
pasta chamada “projeto_js”, conforme a imagem a seguir:
Lixeira
projeto_js
Fonte: autoria própria.
Iniciando com JavaScript
Os conhecimentos adquiridos nas unidades I e II, sobre Html e Css, são fundamentais para
o entendimento do JavaScript, pois o JavaScript é executado dentro de páginas Html.
Agora, iremos criar um arquivo chamado de index.html, dentro da pasta “projeto_js” que
acabamos de criar.
Vamos, agora, editar o arquivo index.html, inserindo nele a estrutura padrão de uma
página html.
Agora, dentro do <head> iremos inserir a nossa primeira tag <script> e, dentro dela, um
evento do tipo alert em JavaScript.
O comando alert é responsável por emitir uma mensagem de alerta no navegador. No
exemplo, emitiremos um alerta informando “Olá Mundo!!!”.
Da mesma forma que aprendemos com o CSS, o JavaScript pode ser executado também
em um arquivo externo. Imagine uma situação em que um mesmo script precise ser
executado em outras páginas.
Inicialmente, crie uma pasta chamada “js” dentro da pasta inicial do nosso projeto,
lembrando que “js” é uma abreviação de JavaScriprit e esse nome foi dado para organizar
melhor o projeto, portanto, podendo a seu critério ser atribuído outro nome a essa pasta.
Agora, navegue até a pasta “js” do projeto. Na opção “Nome” escreva “scripts.js” e, na opção
“Tipo”, selecione JavaScript, conforme a imagem a seguir. Ao concluir, clique em “Salvar”:
Vamos, agora, editar o arquivo “scripts.js” que acabamos de criar, inserindo o seguinte código
no mesmo:
Já criamos o arquivo com o código JavaScript, agora, iremos criar uma página Html.
Primeiramente, crie uma pasta “paginas”, sem acento, dentro do projeto. Logo em seguida,
crie uma página chamada “exemplo1.html” dentro da pasta “paginas”.
Agora, edite o arquivo “exemplo1.html” conforme o código a seguir. Repare que iremos
incorporar/vincular a nossa página Html ao arquivo de scripts (js/scripts.js) que criamos, da
mesma forma que fizemos nas unidades anteriores do nosso livro, com o vínculo com o CSS.
O JavaScript, como o próprio nome sugere, é uma linguagem de scripting. Uma linguagem de
scripting é comumente definida como uma linguagem de programação, que permite ao
programador controlar uma ou mais aplicações de terceiros; baseado nisso, temos duas
asserções:
1 – Diferentemente do HTML, o Javascript é considerado uma linguagem de programação.
Porque
2 – Assim como o HTML, o Javascript é uma linguagem de marcação.
A respeito dessas asserções, assinale a alternativa correta:
a) As duas afirmações são verdadeiras e a segunda justifica
a primeira.
b) As duas afirmações são verdadeiras e a segunda não
justifica a primeira.
c) A primeira afirmação é falsa e a segunda é verdadeira.
d) A primeira afirmação é verdadeira e a segunda é falsa.
e) As duas afirmações são falsas.
Resposta
O JavaScript, como o próprio nome sugere, é uma linguagem de scripting. Uma linguagem de
scripting é comumente definida como uma linguagem de programação, que permite ao
programador controlar uma ou mais aplicações de terceiros; baseado nisso, temos duas
asserções:
1 – Diferentemente do HTML, o Javascript é considerado uma linguagem de programação.
Porque
2 – Assim como o HTML, o Javascript é uma linguagem de marcação.
A respeito dessas asserções, assinale a alternativa correta:
a) As duas afirmações são verdadeiras e a segunda justifica
a primeira.
b) As duas afirmações são verdadeiras e a segunda não
justifica a primeira.
c) A primeira afirmação é falsa e a segunda é verdadeira.
d) A primeira afirmação é verdadeira e a segunda é falsa.
e) As duas afirmações são falsas.
Eventos
No JavaScript podemos utilizar vários eventos em diversos elementos para a interação com o
usuário; a seguir listamos os principais:
oninput: ocorre quando num input ocorre a alteração;
onclick: evento de clique no mouse;
ondblclick: evento de dois cliques no mouse;
onmousemove: evento quando o mouse é mexido;
onmousedown: evento quando é apertado algum botão do mouse;
onmouseup: quando o botão do mouse é solto;
onkeypress: evento quando uma tecla é pressionada e solta;
onkeydown: evento quando uma tecla é pressionada;
onkeyup: evento quando solta uma tecla;
onblur: evento quando um elemento deixa de ter o foco;
onfocus: evento quando um elemento passa a ter o foco;
onchange: evento de quando um campo texto tem o seu valor
Eventos
No exemplo a seguir, criaremos dentro da pasta “páginas”, do nosso projeto, uma página Html
chamada “exemplo2.html” e incluiremos um botão. Ao clicar neste botão (evento onclick) será
emitido um alerta através de uma função na qual iremos criar (clique_botão):
Já estudamos muito o HTML, criamos as nossas primeiras tags, aprendemos CSS, fizemos
formulários e páginas bonitas, porém chegou o momento de avançarmos um pouco mais.
Precisamos inserir vida às nossas páginas, portanto, movimentos. Ao clicar em um botão,
o mesmo resultará em um evento; para isso, usaremos o DOM, que foi criado pelo W3C
para representar como os navegadores organizam as marcações HTML, XHTML e XML.
Métodos
O DOM é composto por diversos métodos. Esses métodos são responsáveis por fazer a
ligação entre os elementos e os eventos. A seguir, iremos demonstrar os métodos mais
utilizados e para que eles servem:
getElementById();
innerHTML.
.
Métodos
Vamos, agora, criar uma nova página dentro da nossa pasta “páginas”, com o nome
“exemplo3.html”, conforme a imagem a seguir:
Este parágrafo não terá nenhum conteúdo, portanto, ao executar a nossa página, ela ficará
toda em branco, conforme a imagem a seguir:
No nosso próximo exemplo, criaremos uma página chamada “exemplo4.html”, dentro da pasta
“páginas”, do nosso projeto. Iremos inserir dois parágrafos; no primeiro, iremos inserir um
evento ondblclick e definiremos um id para o segundo, conforme a imagem a seguir:
Criado pelo W3C, O DOM é uma multiplataforma que representa como as marcações em
HTML, XHTML e XML são organizadas e lidas pelo navegador que você usa. Uma vez
indexadas, estas marcações se transformam em elementos de uma árvore que você pode
manipular via API, que é:
Criado pelo W3C, O DOM é uma multiplataforma que representa como as marcações em
HTML, XHTML e XML são organizadas e lidas pelo navegador que você usa. Uma vez
indexadas, estas marcações se transformam em elementos de uma árvore que você pode
manipular via API, que é:
Acesse o site do Bootstrap em: http://getbootstrap.com. Logo no início, você encontra um link
para o download do Bootstrap. Clique em “Download” para iniciar o mesmo imediatamente.
Crie uma pasta em sua área de trabalho, onde iremos armazenar o nosso projeto utilizando o
Bootstrap. No caso, a pasta foi criada como “projeto_bootstrap”.
Lixeira projeto_boot
strap
Fonte: autoria própria.
Criando um novo projeto com o Bootstrap
Dentro da pasta raiz do nosso projeto, iremos criar um arquivo chamado “index.html”, conforme
já fizemos anteriormente.
Esse arquivo deverá possuir a estrutura básica de uma página html. Dentro do <body> iremos
criar dois botões, conforme a estrutura a seguir:
Podemos notar que ambos estão com a mesma aparência dos componentes que vimos nas
aulas anteriores. Até o exato momento, inserimos as pastas do Bootstrap em nosso projeto,
porém não utilizamos. Vamos, agora, chamar o Bootstrap em nossa página.
Iremos inserir dentro do nosso <head> o seguinte comando:
Iremos notar que algumas configurações de nossa página já irão sofrer algumas alterações,
visto que já estamos usando, com esse link, as configurações padrão de estilo do Bootstrap,
como, por exemplo: a distância para a borda da esquerda e alguns polimentos de alguns
componentes (dependendo do seu navegador, essas diferenças serão mínimas).
Agora, iremos à documentação do Bootstrap para buscar como inserir alguns componentes;
para isso, vamos acessar o site getbootstrap.com e ir na seção de documentation/components,
conforme a imagem a seguir:
Home Documentation
Layout
Content
Components
Utilities
Extend
Migration
About
Components Examples
Alerts
Badge
Breadcrumb
Buttons
Button group
Card
Carousel
Collapse
Fonte: autoria própria.
Dropdowns
Forms
Explorando a documentação do Bootstrap
Vamos utilizar o código do botão vermelho (quarta linha do exemplo anterior) no botão dois da
página index.html. Com isso, o código do botão dois irá ficar da seguinte forma:
O botão dois está utilizando as configurações do framework Bootstrap para ficar com um
layout mais bonito. Podemos notar o quanto é rica a documentação do Bootstrap; podemos,
assim, explorar os diversos componentes através do próprio site oficial e de forma gratuita.
Se precisarmos de um botão, porém sem as cores de fundo, podemos substituir as classes
modificadoras padrão por “.btn-outline-*” para remover todas as imagens e cores de fundo
em qualquer botão.
Gosta de botões maiores ou menores? Adicione .btn-lg ou .btn-sm para tamanhos adicionais.
Agora, vamos customizar o nosso botão um, porém utilizando btn-sm para deixá-lo menor e
compará-lo com o botão dois.
Agora, iremos aprender a criar um menu responsivo utilizando o Bootstrap. Antes disso, iremos
criar uma pasta chamada “paginas”, dentro do nosso projeto. Em seguida, criaremos um
arquivo chamado “exemplo1.html”. Nossa pasta ficará com a seguinte estrutura:
Criaremos, agora, uma estrutura básica html em nossa página, fazendo o link para
o Bootstrap:
Agora que o nosso arquivo “exemplo1.html” está configurado, entraremos no site do Bootstrap
e iremos em Documentation/Components/Navbar.
Como funciona:
Conteúdo suportado:
Iremos clicar no botão “copy” (ao lado direito superior) e copiar o código do navbar inteiro
para dentro do nosso body.
O Responsive Web Design é uma das soluções técnicas para esse problema: programar um
site de forma que os elementos que o compõem se adaptem, automaticamente, à largura de
tela do dispositivo no qual ele está sendo visualizado.
Com base no texto, assinale como verdadeiro (V) ou falso (F) as afirmações a seguir:
( ) A responsividade funciona, apenas, em sites acessados pelo PC.
( ) Um site responsivo não ajusta o seu layout quando acessado por um smartphone.
( ) O conceito de responsividade surgiu depois dos usuários acessarem a internet mais pelo
smartphone.
( ) Responsividade está ligada, diretamente, com a UX e a UI.
Assinale a alternativa que apresenta a sequência correta:
a) V, V, V, F.
b) V, V, F, F.
c) V, V, V, V.
d) F, F, F, V.
e) F, F, V, V.
Resposta
O Responsive Web Design é uma das soluções técnicas para esse problema: programar um
site de forma que os elementos que o compõem se adaptem, automaticamente, à largura de
tela do dispositivo no qual ele está sendo visualizado.
Com base no texto, assinale como verdadeiro (V) ou falso (F) as afirmações a seguir:
(F) A responsividade funciona, apenas, em sites acessados pelo PC.
(F) Um site responsivo não ajusta o seu layout quando acessado por um smartphone.
(V) O conceito de responsividade surgiu depois dos usuários acessarem a internet mais pelo
smartphone.
(V) Responsividade está ligada, diretamente, com a UX e a UI.
Assinale a alternativa que apresenta a sequência correta:
a) V, V, V, F.
b) V, V, F, F.
c) V, V, V, V.
d) F, F, F, V.
e) F, F, V, V.
Referências
BALDUÍNO, P. Dominando JavaScript com JQuery. São Paulo: Casa do Código, 2013.
FREEMAN, E. T.; ROBSON, E. Use a cabeça!: programação JavaScript. Rio de Janeiro:
Alta Books, 2016.
ATÉ A PRÓXIMA!