JavaScript para web responsiva

PROGRAMAÇÃO WEB RESPONSIVA
Unidade III
7 JAVASCRIPT
7.1 O que é o JavaScript
A linguagem de programação JavaScript, como o próprio nome sugere, é de scripting. Normalmente,

uma linguagem de scripting pode ser definida como sendo de programação e que disponibiliza ao
programador a possibilidade de controlar aplicações de terceiros (FREEMAN; ROBSON, 2016).
Em JavaScript, podemos efetuar o controle de comportamentos dos navegadores por meio

de trechos de código que são enviados na página HTML. Além disso, o JavaScript é uma linguagem de
scripting que, incorporada aos tags HTML, permite adicionar efeitos de apresentação e de interatividade
em páginas (BALDUINO, 2013).
Outra característica comum às linguagens de scripting é que, normalmente, elas são interpretadas,
ou seja, não dependem de compilação para serem executadas. Tais scripts são interpretados pelo próprio
browser para não haver a necessidade dos recursos de um servidor (FREEMAN; ROBSON, 2016).
O JavaScript surgiu na empresa Netscape com o nome LiveScript. No final de 1995, ele foi comprado
pela empresa Sun (criadora do Java) e, por essa razão, recebeu o nome pelo qual o conhecemos até
hoje. O JavaScript não é próprio do browser Netscape. A Microsoft e outros fornecedores também
adotaram‑no. Vale lembrar que o JavaScript não é o Java (BALDUINO, 2013).
A linguagem de programação JavaScript apresenta grande vantagem em relação a muitas outras

utilizadas no mercado: ela é tolerante a erros (BALDUINO, 2013).
Vale destacar, nesse contexto, o uso da tag <script>. Ela pode ser declarada dentro da tag <head>
ou na tag <body>. No entanto, por estarmos trabalhando com uma linguagem de programação
interpretada, o código é lido pelo browser de forma imediata (FREEMAN; ROBSON, 2016).
Observação
O JavaScript pode ser considerado uma linguagem de programação

dinâmica e interpretada. Inicialmente, ela destinou-se a adicionar
funcionalidades às páginas web, o que chamamos de front-end.
Atualmente, ela também é usada na programação do back-end, em geral,
executado no servidor.
135
Unidade III
7.2 Iniciando com o JavaScript
Com o objetivo de testarmos nosso primeiro JavaScript, criaremos um novo projeto. Para isso,
criaremos uma pasta chamada de “projeto_js”, conforme mostrado a seguir.
Figura 269 – Pasta para armazenar o projeto JavaScript
Lembrete
Os conhecimentos adquiridos nas unidades I e II sobre HTML e CSS são

fundamentais para o entendimento do JavaScript, pois ele é executado
dentro de páginas HTML.
Geraremos um arquivo chamado de “index.html” dentro da pasta “projeto_js” que acabamos de criar.
Figura 270 – Arquivo index.html dentro da pasta do projeto
136
Editaremos o arquivo index.html, inserindo nele a estrutura padrão de uma página HTML.
Figura 271 – Arquivo index.html com estrutura básica criada
Dentro do <head> inseriremos nossa primeira tag <script> e, dentro dela, colocaremos um evento
do tipo alert em JavaScript, conforme mostrado a seguir.
Figura 272 – Script dentro da tag <head>
Observação
O comando alert é responsável por emitir uma mensagem de alerta no

navegador. No exemplo, emitiremos um alerta informando “Olá, Mundo!!!”.
Executando a página no navegador, obtemos o resultado mostrado a seguir.
Figura 273 – Página em execução no navegador
137
Unidade III
Clique no botão “OK”.
Figura 274 – Página em execução no navegador após clique no botão “OK”
Podemos notar que o Script executado faz a pausa no processamento da página, pois foi inserido na
tag <head>. Nesse caso, seria mais interessante adicioná-lo dentro da tag <body>.
Vamos remover o script do <head> para colocá-lo dentro do <body>.
Figura 275 – Página index.html com tag <script> dentro do <body>
7.3 JavaScript em arquivo externo
Da mesma forma que aprendemos com o CSS, o JavaScript pode ser executado em um arquivo
externo. Imagine uma situação em que um mesmo script precise ser realizado em outras páginas.
Inicialmente, crie uma pasta chamada de “js” dentro da pasta inicial do nosso projeto, lembrando
que js é uma abreviação de JavaScript e que esse nome foi dado para organizar melhor o projeto.
Portanto, a seu critério, pode ser atribuída outra nomenclatura a essa pasta.
138
Figura 276 – Pasta “js” criada dentro da pasta do projeto
Criaremos um arquivo de JavaScript. Para isso, abra o Microsoft Visual Studio Code e clique na opção
“File” e depois “New File”.
Figura 277 – Criação de novo arquivo no Microsoft Visual Studio Code
Após a abertura do arquivo que foi criado, clique novamente na opção “File” e selecione a
opção “Save As”.
139
Unidade III
Figura 278 – Salvamento de novo arquivo no Microsoft Visual Studio Code
Navegue até a pasta “js” do projeto. Na opção “Nome”, escreva scripts.js. Na opção “Tipo”, selecione
“JavaScript”, conforme mostrado a seguir. Ao concluir, clique em “Salvar”.
Figura 279 – Opções de salvamento do arquivo no Microsoft Visual Studio Code
Editaremos o arquivo scripts.js que acabamos de criar inserindo o código mostrado na figura a
seguir a ele.
Figura 280 – Arquivo scripts.js com o primeiro código em JavaScript
140
Já criamos o arquivo com o código JavaScript, agora faremos uma página HTML. Primeiramente, crie
uma pasta “páginas”, sem acento, dentro do projeto. Logo em seguida, gere uma página chamada de
exemplo1.html dentro da pasta “páginas”.
Figura 281 – Arquivo exemplo1.html criado dentro da pasta “páginas” do projeto
Edite o arquivo exemplo1.html conforme mostrado no código da figura a seguir. Repare que vamos
incorporar/vincular nossa página HTML ao arquivo de scripts (js/scripts.js) que criamos, da mesma forma
que fizemos nas unidades anteriores do livro-texto com o vínculo do CSS.
Figura 282 – Arquivo exemplo1.html editado no Microsoft Visual Studio Code
Visto que colocamos o script em arquivo externo, podemos fazer o reaproveitamento de funcionalidade
em diversas páginas. Ao inicializar a página, será exibida a mensagem mostrada na figura a seguir.
Figura 283 – Arquivo exemplo1.html executado no navegador
141
Unidade III
Em seguida, a página será carregada, conforme mostrado na figura a seguir.
Figura 284 – Arquivo exemplo1.html executado no navegador após clique no botão “OK”
A seguir, aprenderemos três conceitos muito importantes para o desenvolvimento de códigos em

JavaScript: eventos, funções e DOM.
7.4 Eventos
No JavaScript, podemos utilizar vários eventos em diversos elementos para interação com o usuário.
A seguir, listamos os principais deles.
• oninput: evento que ocorre quando um input sofre alteração.
• onclick: evento de clique no mouse.
• ondblclick: evento de dois cliques no mouse.
• onmousemove: evento que ocorre quando o mouse é mexido.
• onmousedown: evento que ocorre quando o botão do mouse é apertado.
• onmouseup: evento que ocorre quando o botão do mouse é solto.
• onkeypress: evento que ocorre quando uma tecla é pressionada e solta.
• onkeydown: evento que ocorre quando uma tecla é pressionada.
• onkeyup: evento que ocorre quando uma tecla é solta.
• onblur: evento que ocorre quando um elemento deixa de ser o foco.
• onfocus: evento que ocorre quando um elemento passa a ser o foco.
• onchange: evento que ocorre quando um campo de texto tem seu valor modificado.
142
• onload: evento que ocorre quando uma página é atualizada.
• onunload: evento que ocorre quando uma página é fechada.
• onsubmit: evento de disparo antes de envio do formulário.
7.5 Função
Uma função opera como um subprograma dentro do nosso programa. Em estudos de algoritmos,
as funções e os procedimentos são um conjunto de instruções que executam uma ou várias tarefas.
Tais tarefas podem envolver, por exemplo, cálculo ou envio de uma mensagem de alerta ao usuário
(FREEMAN; ROBSON, 2016).
No exemplo mostrado na figura a seguir, criaremos, dentro da pasta “páginas” do nosso projeto,
uma página HTML chamada de exemplo2.html e, também, adicionaremos um botão. Ao clicar nesse
botão (evento onclick), será emitido um alerta por meio da função que vamos criar (clique_botao)
(BALDUINO, 2013).
Figura 285 – Arquivo exemplo2.html
Ao executarmos a página, veremos o resultado mostrado na figura a seguir.
Figura 286 – Página exemplo2.html em execução no navegador
Ao clicarmos no botão, visualizaremos o resultado mostrado na figura a seguir.
143
Unidade III
Figura 287 – Página exemplo2.html executada após clique no botão
7.6 DOM
Já estudamos muito o HTML, criamos nossas primeiras tags, aprendemos a respeito do CSS, fizemos
formulários e páginas bonitas, agora chegou o momento de avançarmos. Precisamos dar vida às nossas
páginas, portanto, necessitamos de movimentos. Queremos que, ao clicarmos em um botão, tenhamos
como resultado 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.
7.6.1 Métodos
O DOM é composto de diversos métodos. Eles são responsáveis por fazer a ligação entre os elementos
e os eventos. A seguir, mostraremos os métodos mais utilizados e para que eles servem.
7.6.1.1 getElementById()
O método getElementById, como o próprio nome diz, retorna o elemento que contém o nome do ID
informado por parâmetro. Devido ao fato de os IDs normalmente serem únicos, esse método atingirá
apenas um elemento.
7.6.1.2 Innerhtml
Para fazermos alterações no HTML por meio do JavaScript, utilizamos o .innerhtml. Além de realizar
essas modificações, o .innerhtml pode acessar apenas o conteúdo da tag selecionada.
Criaremos uma nova página dentro da nossa pasta “páginas” com o nome exemplo3.html, conforme
mostrado na figura a seguir.
Figura 288 – Página exemplo3.html
144
Esse parágrafo não terá nenhum conteúdo. Portanto, ao executarmos nossa página, ela ficará toda
em branco, conforme mostrado na figura a seguir.
Agora, definiremos um conteúdo para o parágrafo por meio do código JavaScript mostrado na
figura a seguir.
Figura 290 – Script dentro da página exemplo3.html
Ao executarmos a página no navegador, teremos o resultado mostrado a seguir.
Figura 291 – Página exemplo3.html em execução após a inserção do script
No nosso próximo exemplo, criaremos uma página chamada de exemplo4.html dentro da pasta
“páginas” do nosso projeto. Inseriremos dois parágrafos. No primeiro deles, colocaremos um evento
ondblclick. Definiremos um id para o segundo, conforme mostrado na figura a seguir.
Figura 292 – Página exemplo4.html
145
Unidade III
Como resultado, teremos a página mostrada na figura a seguir. Faça um teste clicando duas vezes
sobre o parágrafo. Repare que, ao clicar duas vezes, nenhuma ação ou mudança ocorrerá, pois ainda não
implementamos o código JavaScript.
Dando sequência ao nosso projeto, complemente o código, incluindo o código JavaScript mostrado
na figura a seguir. Repare que, nesse caso, o comando JavaScript foi definido dentro do <body> da
página. Isso foi proposital, pois como o código HTML é interpretado pelo browser, o conteúdo do
parágrafo (id=”demo”) é modificado automaticamente após execução desse trecho da página.
Figura 294 – Página exemplo4.html utilizando getElementById
Como resultado, teremos a frase “Olá, Mundo!!!” preenchida automaticamente em nosso parágrafo
com id=”demo” após o evento de clique do mouse no parágrafo.
Figura 295 – Página exemplo4.html em execução no navegador utilizando getElementById
Faremos uma nova implementação utilizando o evento “Clique Duplo” (ondblclick). Para isso,
crie uma nova página chamada de exemplo5.html e digite o código mostrado na figura a seguir.
Figura 296 – Página exemplo5.html implementando ondblclick
146
Ao inicializarmos nossa página, teremos o resultado mostrado na figura a seguir.
Ao clicarmos duas vezes sobre o parágrafo, teremos o resultado mostrado na figura a seguir.
Figura 298 – Página exemplo5.html em execução no navegador após clicar duas vezes no parágrafo
Implementaremos os eventos onmousedown e onmouseup. Criaremos uma página dentro da pasta

“páginas” chamada de exemplo6.html. Em seguida, digitaremos o código mostrado na figura a seguir.
Figura 299 – Implementação dos eventos onmousedown e onmouseup na página exemplo6.html
Como resultado, teremos o visual mostrado na figura a seguir.
147
Unidade III
Repare a mudança da cor da fonte ao manter o clique pressionado (ficará na cor vermelha).
Figura 301 – Página exemplo6.html em execução no navegador após clique longo com o mouse no parágrafo
Por fim, ao soltar o clique do mouse, a cor do texto será modificada novamente: ficará verde,
conforme mostrado na figura a seguir.
Figura 302 – Página exemplo6.html em execução no navegador após soltar clique longo com o mouse no parágrafo
No exemplo a seguir, iremos criar dentro da pasta “páginas” do projeto outra chamada de
exemplo7.html. Dentro dela, implementaremos uma função para modificar as propriedades de um
elemento, ou seja, criaremos uma função que vai alterar o tamanho, a cor da fonte e o background
de um parágrafo. Implemente o código mostrado na figura a seguir.
Figura 303 – Customização da fonte por meio do JavaScript na página exemplo7.html
148
Ao executar nossa página, teremos o resultado mostrado na figura a seguir.
Após clicarmos no botão “Clique Aqui!”, teremos o resultado mostrado a seguir.
Figura 305 – Página exemplo7.html em execução no navegador após clique no botão
No próximo exemplo, criaremos uma página chamada de exemplo8.html na pasta “páginas” do nosso
projeto. Ela realizará a soma de dois valores (números). Para isso, geraremos um formulário no qual serão
recebidos o primeiro (“numero1”) e o segundo números (“numero2”). O resultado da soma de ambos será
apresentado no campo “Resultado”. Para isso, implemente o código mostrado na figura a seguir.
Figura 306 – Criação de formulário na página exemplo8.html
149
Unidade III
Agora, faça um teste e verifique se nenhum cálculo será realizado, pois ainda não implementamos
nossa função para a realização dele.
Inseriremos a função que calcula a soma dos dois valores. O resultado desse cálculo deve ser exibido
no campo “Resultado”. Para isso, implementaremos o código mostrado na figura a seguir.
Figura 308 – Criação da função para realizar a soma na página exemplo8.html
Executaremos nossa página e realizaremos um teste para ver como será o resultado obtido. Repare
que o campo “Resultado” ficou com o fundo amarelo e a cor de fonte vermelha.
Figura 309 – Página exemplo8.html em execução no navegador após a realização da soma de dois números
Saiba mais
Para conhecer melhor sobre o JavaScript, veja sua documentação oficial em:
MDN WEB DOCS. JavaScript tutoriais. Mdn Web Docs, 18 abril 2021b.
Disponível em: https://cutt.ly/CvIiCEe. Acesso em: 19 abr. 2021.
150
8 BOOTSTRAP
8.1 O que é Bootstrap
O Bootstrap é um framework JavaScript, HTML e CSS para desenvolvimento de sites e aplicações web
responsivas. Ele torna o desenvolvimento de páginas web muito mais dinâmico, é indicado para todos
os níveis de desenvolvedores e funciona em dispositivos dos mais variados tipos.
Em meados de 2011, Mark Otto, um desenvolvedor que trabalhou no Twitter, criador do Bootstrap com
Jacob Thornton, anunciou o lançamento do Bootstrap em um artigo publicado no blog do Twitter. Nesse
artigo (SILVA, 2011), Otto relatou que no início do Twitter, cada desenvolvedor utilizava a biblioteca que
conhecia com mais profundidade. No entanto, esse procedimento gerou inconsistências, pois dificultou
a integração, a escalabilidade e a manutenção das aplicações criadas por diferentes membros da equipe.
A solução para tal problema foi a criação do Bootstrap, que disponibiliza cinco seções: introdução,
CSS, componentes, plugins e personalização.
8.2 Instalando o Bootstrap
Saiba mais
A fim de fazer o download do programa Bootstrap, acesse:
Disponível em: https://getbootstrap.com/. Acesso em: 19 abr. 2021.
Logo no início, você encontrará um link para fazer o download. Clique em “Download” para começá‑lo
imediatamente.
Figura 310 – Site do Bootstrap
151
Unidade III
Vá na opção “Compiled CSS and JS” e clique em “Download”.
Figura 311 – Opção de download do Bootstrap
Crie uma pasta em sua área de trabalho na qual armazenará o projeto utilizando Bootstrap. No caso,
ela foi criada com o nome projeto_bootstrap.
Figura 312 – Pasta para armazenar o novo projeto
Lembrete
Os conhecimentos adquiridos até aqui sobre HTML, CSS e JavaScript

são fundamentais para o entendimento do Bootstrap, visto que ele é um
framework que usa essas três tecnologias.
Descompactaremos o arquivo do bootstrap.zip que baixamos dentro da nossa pasta “projeto_bootstrap”.
Teremos, dentro da pasta, uma hierarquia de arquivos, que é criada automaticamente. Feito isso, o
Bootstrap estará dentro da nossa pasta do projeto. No entanto, ao trabalhar com o projeto, teremos que
importá-lo dentro de nosso código. Isso será visto posteriormente.
152
Figura 313 – Arquivos do Bootstrap descompactados na pasta do projeto
Dentro da pasta raiz do nosso projeto, criaremos um arquivo chamado de “index.html”, seguindo os
procedimentos já empregados.
Figura 314 – Pasta do projeto após a criação do arquivo index.html
Esse arquivo deve possuir a estrutura básica de uma página HTML. Dentro do <body>, criaremos dois
botões, conforme a estrutura mostrada na figura a seguir.
Figura 315 – Página index.html do projeto bootstrap
153
Unidade III
Ao executarmos nossa página, teremos os botões mostrados na figura a seguir.
Figura 316 – Página index.html do projeto bootstrap em execução no navegador
Até o exato momento, inserimos as pastas do Bootstrap em nosso projeto, mas não as utilizamos.
Vamos chamá-lo em nossa página.
Inseriremos dentro do nosso <head> o comando mostrado na figura a seguir.
Figura 317 – Link para o arquivo do Bootstrap
Podemos notar que algumas configurações de nossa página sofrerão alterações, visto que estamos
usando com o link as configurações padrão de estilo do Bootstrap, por exemplo, distância para a borda da
esquerda e certos polimentos de alguns componentes. Dependendo do seu navegador, essas diferenças
serão mínimas.
Figura 318 – Página index.html em execução após a importação do Bootstrap
Vamos à documentação do Bootstrap para vermos como inserir alguns componentes ao projeto. Para
isso, acessamos o site getbootstrap.com e vamos à seção de “Documentation” no item “Components”,
conforme mostrado a seguir.
154
Figura 319 – Site do Bootstrap, seção de documentação
Na barra “Components”, encontraremos diversos deles. Para o caso do exemplo com o qual estamos
trabalhando, clicaremos em “Buttons”.
Figura 320 – Seção “Components” do Bootstrap
Visualizaremos diversos tipos de configurações de botões, inclusive com opções de copiarmos o

código-fonte deles para inseri-lo em nossa página.
155
Unidade III
Figura 321 – Exemplos de botões na documentação do Bootstrap
Utilizaremos 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 dele ficará da forma mostrada na figura a seguir.
Figura 322 – Botão “2” na página “index.html”
Após salvarmos o arquivo index.html com a alteração realizada, poderemos executá-la. O resultado
será o mostrado na figura a seguir.
Figura 323 – Página “index.html” em execução no navegador após alteração do botão ”2”
O botão “2” 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. Vale a pena explorarmos os
diversos componentes oferecidos por esse framework, o que pode ser feito de modo gratuito no próprio
site oficial da empresa.
156
Se precisarmos de um botão sem as cores de fundo, poderemos substituir as classes modificadoras

padrão por .btn-outline- *, a fim de removermos todas as imagens e cores de fundo em qualquer botão.
Isso está mostrado na figura a seguir.
Figura 324 – Alteração da classe do botão
Após salvarmos o arquivo index.html com a alteração realizada anteriormente, poderemos executá‑la.
Obteremos o resultado mostrado na figura a seguir.
Figura 325 – Página index.html em execução após alteração da classe do botão
Você prefere botões maiores ou menores? Inclua .btn-lg ou .btn-sm para obter tamanhos
adicionais de botões.
Figura 326 – Inserção do btn-lg no botão
Figura 327 – Página “index.html” em execução após a alteração da classe do btn-lg no botão
Customizaremos nosso botão “1”. Usaremos o btn-sm para deixá-lo menor e compará-lo com
o botão “2”.
Figura 328 – Configuração do botão “1”
157
Unidade III
Figura 329 – Página index.html em execução após a configuração do botão “1”
Exploramos algumas propriedades dos botões por meio da documentação do Bootstrap. Como
sugestão, sugerimos o acesso à documentação e a verificação total do que se pode fazer com os
componentes com os quais irá trabalhar.
8.3 Criando um menu responsivo
Aprenderemos a criar um menu responsivo utilizando o Bootstrap. Antes disso, criaremos uma
pasta chamada de “páginas” dentro do nosso projeto. Em seguida, geraremos um arquivo chamado de
exemplo1.html. Nossa pasta ficará com a estrutura mostrada na figura a seguir.
Figura 330 – Pasta de páginas do projeto com arquivo exemplo1.html
Criaremos uma estrutura básica HTML em nossa página, fazendo o link para o Bootstrap, conforme
158
Figura 331 – Página exemplo1.html com link para o Bootstrap
Agora que nosso arquivo chamado de exemplo1.html está configurado, entraremos no site do
Bootstrap e iremos em “Documentation/Components/Navbar”.
Figura 332 – Documentação do Bootstrap, seção de Navbar
Veja que estamos retirando as informações dos componentes de um menu diretamente da

documentação do Bootstrap. Na sequência, vemos o menu que iremos implementar.
Figura 333 – Navbar padrão da documentação do Bootstrap
159
Unidade III
Figura 334 – Documentação do Navbar padrão
Clicaremos no botão “Copy” (do lado direito superior) e copiaremos o código do navbar inteiro para
dentro do nosso <body>.
Figura 335 – Cópia de trecho de código da documentação do Bootstrap
160
Esse exemplo usa utilitários de cor (bg-light) e de espaçamento (my-2, my-lg-0, mr-sm-0 e my‑sm-0).
Note que, na figura anterior, o texto não está completo. Portanto, entre na documentação e copie o
código diretamente por lá.
Após salvarmos o arquivo exemplo1.html com a alteração realizada, poderemos executá-la.

Figura 336 – Página exemplo1.html em execução no navegador em tela cheia
Se diminuirmos (redimensionando manualmente) a janela do navegador, com o intuito de simularmos

uma janela do navegador em um smartphone ou tablet, teremos o resultado mostrado na figura a seguir.
Figura 337 – Página exemplo1.html em execução no navegador após ter a janela reduzida
Note que o comportamento de nosso menu mudou de acordo com o tamanho da tela onde ele está
sendo executado. Portanto, criamos, de forma simples, um menu responsivo.
8.4 Criando um menu responsivo do zero
Agora que já vimos um pouco a respeito de um menu responsivo por meio da documentação do
Bootstrap, aprenderemos a criar um pequeno menu responsivo do zero. Para isso, criaremos uma nova
página dentro da pasta de páginas do nosso projeto, chamada de exemplo2.html. Nela, inseriremos a
estrutura básica de uma página HTML e o link para o nosso Bootstrap.
Figura 338 – Página exemplo2.html com estrutura básica
161
Unidade III
Esse menu de navegação consiste em uma lista não ordenada com vários itens, sendo que cada um
deles é um link. Inseriremos o código mostrado na figura a seguir dentro do <body>.
Figura 339 – Lista dentro do <body> da página exemplo2.html
Após executarmos nossa página, teremos a saída mostrada na figura a seguir.
Figura 340 – Página exemplo2.html em execução após a inserção da lista
Importaremos o Bootstrap em nosso projeto. Para isso, as pastas “css” e “js” do Bootstrap devem
estar dentro da pasta do projeto. Com o objetivo de importarmos tais elementos em nossa página, basta
adicionarmos o comando mostrado a seguir.
Figura 341 – Importação do Bootstrap dentro do <head>
Após executarmos nossa página, teremos a saída mostrada na figura a seguir.
Figura 342 – Página exemplo2.html em execução no navegador após a importação do bootstrap
162
Observação
Podemos notar que mesmo sem realizarmos nenhuma alteração no

código, apenas fazendo a importação do Bootstrap, o resultado da execução
da página no navegador ficou diferente. A tonalidade dos links, a fonte e
espaçamentos foram modificados.
Inseriremos um elemento do HTML para trazer semântica à nossa página. Trata-se da tag <nav>,
conforme mostrado na figura a seguir.
Figura 343 – Inserção da tag <nav> dentro do <body> da página exemplo2.html
Acessaremos a documentação do Bootstrap. Para isso, entraremos na opção “Components” e depois

“Navbar”. Ao lado da busca, mais ao centro da página, descendo um pouco, veremos todo o código do
menu mais completo que o Bootstrap disponibiliza, conforme mostrado na figura a seguir.
Figura 344 – Site do Bootstrap na opção “Navbar”
163
Unidade III
Em nosso layout, não precisamos de tanta coisa. Inseriremos o trecho mostrado na figura a seguir
em nossa tag <nav>.
Figura 345 – Inserção de opções na tag <nav>
Introduziremos o trecho mostrado na figura a seguir em nossa tag <ul>.
Figura 346 – Inserção de opções na tag <ul>
Abrindo o projeto no navegador, com a janela maximizada, teremos a situação mostrada na

figura a seguir.
Figura 347 – Página exemplo2.html em execução de forma maximizada no navegador
Se diminuirmos um pouco a janela do navegador, teremos o resultado mostrado na figura a seguir.
Figura 348 – Página exemplo2.html em execução de forma redimensionada no navegador
Note que o comportamento do menu foi modificado de acordo com o tamanho em que a página
está sendo executada no navegador. Isso se dá pelo fato de estarmos utilizando o Bootstrap e ele tratar
da responsividade das páginas.
Podemos notar também que os links estão grudados e a inserção de uma pequena margem resolveria
esse problema. Assim, usaremos tudo o que o Bootstrap tem de pronto para solucionar a situação. Na
documentação, repare que cada link do menu tem a class nav-link. Logo, faremos o que se mostra
na figura a seguir.
164
Figura 349 – Inserção da class nav-link dentro
Ao executarmos nossa página de forma maximizada, teremos a saída mostrada na figura a seguir.
Figura 350 – Página exemplo2.html em execução no navegador após a inserção do nav-link
Ao executarmos nossa página de forma minimizada, teremos a saída mostrada na figura a seguir.
Figura 351 – Página exemplo2.html redimensionada em execução no navegador após a inserção do nav-link
Chegamos a um ponto interessante. Perceba como não foi preciso criarmos regra CSS para fazermos
nosso projeto, simplesmente colocamos as classes informadas na documentação. Faz parte da rotina de
um desenvolvedor que está criando algo com Bootstrap deixar o getbootstrap.com aberto, e é claro que,
com o tempo, acabamos memorizando algumas das suas funcionalidades.
Outro detalhe dessa barra de navegação, reparou que o menu não está centralizado?
165
Unidade III
Como resolver isso? O Bootstrap tem uma classe genérica muito utilizada em diversas ocasiões
para centralizar horizontalmente os elementos na tela, a classe container. Logo, somente precisaremos
colocá-la envolvendo nosso menu, conforme mostrado na figura a seguir.
Figura 352 – Inserção tag <div> com a class container
Agora ao executarmos nossa página, teremos a saída mostrada na figura a seguir.
Figura 353 – Página exemplo2.html em execução no navegador após a inserção tag <div> com a class container
Repare que o menu foi centralizado, entretanto, ele está cortando as laterais. Precisamos centralizar
o <nav> todo ou somente seu conteúdo? No caso em análise, mudaremos a <div> de lugar, de forma
que ela ficará acima do <ul>, afetando apenas a ele.
Figura 354 – Alteração da tag <div> de lugar
166
Ao executarmos nossa página, teremos a saída mostrada na figura a seguir.
Figura 355 – Página exemplo2.html em execução no navegador após a alteração da tag <div> de lugar
Uma preocupação que tomou conta do mundo do desenvolvimento e do design web foi o mobile.
Isso foi depois de os smartphones se popularizarem, em meados de 2007. Logo, alguns desenvolvedores
pensaram ser interessante iniciar a concepção de um site tendo em mente uma tela de tamanho
reduzido. E foi assim que surgiu o conceito de pensar primeiro no mobile (“mobile first”).
É por conta desse conceito que o Bootstrap, a partir de sua versão 3, começou a focar primeiro
no mobile. Vamos fazer com que o menu fique fechado (ou colapsado, em linguagem técnica). Caso o
usuário precise utilizá-lo, ele clicará em um botão no qual está escrito “Menu” para abrir a sua navegação.
Primeiramente, deixaremos o menu colapsado e nos preocuparemos com o botão em seguida. Veja
na documentação do Bootstrap, na parte do navbar, que esse framework utiliza duas classes, chamadas
de “colapse” e de “navbar-collapse”, o que deixa nosso código da forma mostrada na figura a seguir.
Figura 356 – Inserção da <div> com a class “collapse navbar-collapse”
O menu desaparece quando o browser está pequeno. Excelente! Criaremos um botão com o qual o
usuário poderá interagir com a navegação, deixando o menu visível quando isso acontecer. Para se fazer
um botão usando HTML, temos o elemento <button>. Vamos colocá-lo em nosso código, com o texto
menu em seu conteúdo.
167
Unidade III
Figura 357 – Inserção do botão “Menu”
Figura 358 – Página exemplo2.html em execução no navegador após a inserção do botão
Figura 359 – Página exemplo2.html redimensionada em execução no navegador após a inserção do botão
Para estilizarmos o botão, poderíamos colocar um float: right e fazer ajustes utilizando margens.
Entretanto, o Bootstrap apresenta uma classe para esse caso específico. Basta utilizarmos a classe
“navbar-toggler”, que faz exatamente o que queremos.
Figura 360 – Inserção da classe “navbar-toggler” no botão
168
Ao executarmos nossa página, teremos a saída mostrada na figura a seguir.
Figura 361 – Página exemplo2.html em execução no navegador após a inserção da classe “navbar-toggler” no botão
Redimensionando a página, obteremos o resultado mostrado na figura a seguir.
Figura 362 – Página exemplo2.html redimensionada em execução

no navegador após a inserção da classe “navbar-toggler” no botão
Note que, ao clicarmos no botão com a página redimensionada, o menu ainda não aparece. Resta-nos
agora fazer a parte comportamental. Para a interação, sabemos que o JavaScript (JS) é uma boa pedida.
O Bootstrap, além do arquivo de estilos, vem com um arquivo contendo plugins prontos, componentes
que foram pensados para serem funcionais. Então, precisaremos aprender JS? Não, basta chamarmos
esse script e configurar os componentes devidamente. Vamos chamar o script do Bootstrap antes de
fecharmos a tag <body>, conforme mostrado na figura a seguir.
Figura 363 – Importação do JavaScript no projeto
Agora, o script do Bootstrap precisa saber quem ele deve colocar no comportamento de chave, de
liga-desliga, de toggle. Para isso, devemos inserir no <button> dois atributos customizados que foram
idealizados a fim de fazer justamente essa ponte entre o HTML e o JS do Bootstrap, o data-toggle e o
data-target.
É no valor do segundo que passamos quem será o afetado, quem é o alvo do efeito. No caso, o
elemento que tiver a classe “navbar-collapse”. Repare que precisamos colocar o seletor com o ponto no
começo, conforme a figura a seguir.
Figura 364 – Alteração na classe do botão
169
Unidade III
Em qual elemento queremos colocar o efeito de abre-fecha? Na <div>, em volta da <ul>. Inclusive,
essa <div> possui classes para estilo, como a collapse, mostrada na figura a seguir.
Figura 365 – Div referenciando o data-target criado anteriormente
Mesmo com o script carregado e o botão e os menus prontos, se fizermos um teste, veremos
que nosso projeto ainda não está funcionando. O que houve? O arquivo JavaScript do Bootstrap foi
desenvolvido em cima de outro script, o famoso jQuery. Se o Bootstrap depende do jQuery, precisamos
chamá-lo no HTML para que o navegador possa interpretar seu código corretamente, antes da chamada
do JavaScript do Bootstrap, conforme mostrado na figura a seguir.
Figura 366 – Importação do jquery.js na página exemplo2.html
Ao executarmos nossa página de forma minimizada e ao clicarmos no menu, teremos a saída

mostrada na figura a seguir.
Figura 367 – Página exemplo2.html em execução no navegador após a conclusão
170
Nosso código final ficará como mostrado na figura a seguir.
Figura 368 – Código-fonte da página exemplo2.html concluído
8.5 Criando um menu responsivo utilizando a documentação do Bootstrap
Agora que já vimos as principais funcionalidades de um menu responsivo, vamos explorar um pouco
mais a documentação do Bootstrap. Aprenderemos detalhes de como utilizar menus prontos. Para isso,
trabalharemos com um arquivo chamado de exemplo3.html, mas deixaremos nosso arquivo apenas com
a estrutura básica de uma página HTML, com o link para nosso Bootstrap.
Figura 369 – Página exemplo3.html com estrutura HTML básica e importação do Bootstrap
171
Unidade III
Vamos à documentação do Bootstrap na opção “Examples”, conforme mostrado na figura a seguir.
Figura 370 – Seção de exemplos do site do Bootstrap
Após descermos um pouco a página, deveremos selecionar a opção de “Navbars”, conforme mostrado
na figura a seguir.
Figura 371 – Seção de “Navbars” do site do Bootstrap
172
Iremos à opção de mostrar o código-fonte da página. Se optarmos, por exemplo, pelo Google Chrome,
basta clicarmos com o botão direito do mouse na página e selecionar a opção de exibir o código-fonte.
Vale notar que cada navegador oferece uma forma diferente para acessar o código-fonte da página.
Veja que temos diversos modelos de navbar prontos na página de exemplos, onde há uma tag <nav>
para cada um dos navbars que podemos visualizar. Copiaremos o código do navbar expand at md.
Figura 372 – Navbar expand at md
Ao acessarmos o código-fonte dos exemplos de navbar, encontraremos o trecho que se refere ao

navbar-expand-md, conforme mostrado na figura a seguir.
Figura 373 – Código-fonte da página de exemplos de Navbar, trecho do Navbar expand-md
Após inserirmos esse código no <body> da página, ainda precisaremos de alguns eventos utilizando
jquery para que o menu possa ser aberto quando a página estiver em um tamanho pequeno. Logo após
isso, teremos de criar os scripts mostrados na figura a seguir no final do nosso body.
Figura 374 – Inserção do JavaScript na página exemplo3.html
Podemos notar que o menu apresenta a aparência mostrada na figura a seguir quando o site é
aberto em tela cheia em um computador.
Figura 375 – Página exemplo3.html em execução no navegador em tela cheia
173
Unidade III
Se diminuirmos o tamanho da janela, para simularmos um smartphone ou um tablet, teremos o

resultado mostrado na figura a seguir.
Figura 376 – Página exemplo3.html em execução no navegador com tela redimensionada
Podemos notar que foi criado um menu à direita quando o site está sendo executado em uma tela
pequena. Ao clicarmos nele, veremos os submenus mostrados na figura a seguir.
Figura 377 – Página exemplo3.html em execução no navegador com tela redimensionada e botão do menu selecionado
Com o domínio das propriedades que aprendemos no início dos estudos de menu neste capítulo,
podemos criar novos itens em nosso menu, inserir os links para as páginas desejadas e, assim, customizar
o menu da forma que mais se adapte ao nosso projeto. Também, com o auxílio da documentação do
Bootstrap, podemos observar como alterar propriedades de nosso navbar.
Por exemplo, para mudar a cor de nosso navbar, iremos à opção “Documentation/Components/
Navbar”. Descendo um pouco a página, chegaremos à opção mostrada na figura a seguir.
174
Figura 378 – Site do Bootstrap, opção “Documentation/Components/Navbar”
Alterando a propriedade em nosso código-fonte, em vez de bg-dark, teremos bg-primary, como

Figura 379 – Alteração do nav class da página exemplo3.html
Ao executarmos o site exemplo3.html no navegador, o resultado será o mostrado na figura a seguir.
Figura 380 – Página exemplo3.html em execução no navegador após a alteração do nav class
Saiba mais
Para conhecer melhor sobre o Bootstrap, veja sua documentação oficial em:
GETBOOTSTRAP. Introduction. Bootstrap, [s.d.].
Disponível em: https://cutt.ly/jvIojw2. Acesso em: 19 abr. 2021.
175
Unidade III
Resumo
Na unidade III, vimos como criar scripts em nossas páginas, utilizando,

para isso, o JavaScript. Usamos arquivos .js externos e também criamos
scripts dentro da própria página HTML. Começamos criando pequenos
alertas nas páginas quando um botão fosse clicado. O JavaScript é o
responsável por dar vida às páginas web, gerando eventos para as interações
dos usuários no site. Inserimos scripts dentro da tag <head> e, depois,
dentro da tag <body>.
Aprendemos diversos eventos em JavaScript, a saber: oninput, onclick,

ondblclick, onmousemove, onmousedown, onmouseup, onkeypress,
onkeydown, onkeyup, onblur, onfocus, onchange, onload, onunload e
onsubmit. Trabalhamos também com funções e criamos sub-rotinas dentro
das nossas páginas.
Pudemos aprender um pouco sobre o DOM, componente composto de

diversos métodos responsáveis por fazerem a ligação entre os elementos e
os eventos. Entre eles, o mais famoso é o getElementById().
Elaboramos algumas páginas com exemplos de alterações feitas de

acordo com os cliques do mouse nos componentes, realizando modificações
em relação ao tipo de fonte, ao aparecimento de parágrafo e às mudanças de
cores nos textos. Para finalizar os estudos sobre JavaScript, elaboramos uma
calculadora de soma que opera com valores adquiridos de um formulário.
Utilizamos fontes de terceiros por meio do site de fontes da Google,

fazendo, assim, a importação delas para a nossa página. Efetuamos a
customização de fontes com o uso do CSS, alterando padrão de títulos,
parágrafos etc.
Descobrimos um pouco mais sobre como funciona o canal alpha, os

containers e as classificações de tags, funcionalidades importantíssimas na
criação dos estilos das páginas. Após trabalharmos com o JavaScript e o
CSS, chegamos a um dos momentos mais esperados da disciplina: como
utilizar os recursos do Bootstrap. O framework Bootstrap é baseado no
HTML, no CSS e no JavaScript. Logo, seria muito difícil explicá-lo sem antes
termos conhecimentos sobre os três tópicos que o precederam.
Fizemos o download do Bootstrap e o incorporamos ao nosso projeto,

realizando link de seus arquivos em nossas páginas e, como em um toque
de mágica, melhoramos consideravelmente o visual dos nossos sites.
176
Acessamos a documentação do Bootstrap e aprendemos a trabalhar

com diversos componentes, desde simples botões customizados até um
menu responsivo elaborado do zero. Após a elaboração de um menu
responsivo simples, criamos um menu responsivo utilizando um layout de
menu pronto do site do Bootstrap.
Por fim, pudemos usar o CSS e o JavaScript com o HTML e, com isso,
criamos sites com visual altamente profissional em questão de minutos.
Exercícios
Questão 1. Em relação ao JavaScript, avalie as afirmativas a seguir.
I – O JavaScript é uma linguagem de programação do tipo “linguagem de scripting”. Trata-se de uma

linguagem dinâmica e interpretada.
II – Com o JavaScript, o programador pode realizar o controle de comportamentos dos navegadores

por meio de partes de código que são remetidas na página HTML.
III – Uma desvantagem do uso do JavaScript é o fato de essa linguagem não possibilitar a inserção
de efeitos de apresentação e de interatividade às páginas web.
É correto o que se afirma em:
A) I, apenas.
B) I e III, apenas.
C) I e II, apenas.
D) II e III, apenas.
E) I, II e III.
Resposta correta: alternativa C.
Análise das afirmativas
I – Afirmativa correta.
Justificativa: o JavaScript é uma linguagem de programação dinâmica e interpretada. Ela foi criada
originalmente para adicionar funcionalidades às páginas web, o que chamamos de front-end, mas, hoje
em dia, também é utilizada para a programação do back-end. Normalmente, executado no servidor.
177
Unidade III
II – Afirmativa correta.
Justificativa: o JavaScript permite que o programador faça o controle de comportamentos dos

navegadores por meio de partes de código que são enviadas na página HTML.
III – Afirmativa incorreta.
Justificativa: o JavaScript possibilita a adição de efeitos de apresentação e de interatividade às

páginas web.
Questão 2. Analise o conteúdo da figura a seguir.
Figura 381
Com base na análise e nos seus conhecimentos, avalie as asserções a seguir e a relação entre elas.
I – Na figura, vemos uma página index.html com tag <script> dentro do <body>.
porque
II – Na figura, o código JavaScript embutido na página está localizado entre as tags <h1> e </h1>.
178
Assinale a alternativa correta.
A) A primeira asserção é verdadeira, e a segunda é falsa.
B) A primeira asserção é falsa, e a segunda é verdadeira.
C) As duas asserções são falsas.
D) As duas asserções são verdadeiras, e a primeira justifica a segunda.
E) As duas asserções são verdadeiras, e a primeira não justifica a segunda.
Resposta correta: alternativa A.
Análise das asserções
I – Asserção verdadeira.
Justificativa: a figura dada mostra uma página index.html com tag <script> dentro do <body>.
II – Asserção falsa.
Justificativa: o código JavaScript embutido na página encontra-se entre as tags <script> e </script>.
179
REFERÊNCIAS
Textuais
BALDUINO, P. Dominando JavaScript com jQuery. São Paulo: Casa do Código, 2013.
BARROS, T. Internet completa 44 anos; relembre a história da web. TechTudo, 7 abril 2013. Disponível em:
https://cutt.ly/NvU4aaP. Acesso em: 19 abr. 2021.
CELKE. Tabela de cores HTML (nome, hexadecimal e RGB). Celke, 1º jan. 2018. Disponível em:
https://cutt.ly/vvIudjX. Acesso em: 19 abr. 2021.
CLARK, R. et al. Introdução ao HTML5 e ao CSS3: a evolução da web. Rio de Janeiro: Alta Books, 2014.
FLATSCHART, F. HTML5: embarque imediato. Rio de Janeiro: Brasport, 2011.
FREEMAN, E.; ROBSON, E. Use a cabeça: programação JavaScript. Rio de Janeiro: Alta Books, 2016.
GALLAGHER, N. A new micro clearfix hack. Nicolasgallagher.com, 21 abr. 2011. Disponível em:
https://cutt.ly/0vU144A. Acesso em: 19 abr. 2021.
GETBOOTSTRAP. Introduction. Bootstrap, [s.d.]. Disponível em: https://cutt.ly/jvIojw2. Acesso

em: 19 abr. 2021.
LETT, J. Bootstrap: reference guide. Michigan: Bootstrap Creative, 2019.
MAZZA, L. HTML5 e CSS3: domine a web do futuro. São Paulo: Casa do Código, 2014.
MDN WEB DOCS. CSS tutoriais. Mdn Web Docs, 18 abr. 2021a. Disponível em: https://cutt.ly/kvIiUiI.
Acesso em: 19 abr. 2021.
MDN WEB DOCS. JavaScript tutoriais. Mdn Web Docs, 18 abr. 2021b. Disponível em: https://cutt.ly/CvIiCEe.
Acesso em: 19 abr. 2021
REDAÇÃO NSC. Pérolas do orkut: 5 motivos para já sentir saudades do site que está com os dias
contados. NSC Total, 30 jun. 2014. Disponível em: https://cutt.ly/XvU9sEq. Acesso em: 19 abr. 2021.
SILVA, M. S. CSS3: desenvolva aplicações web profissionais com uso dos poderosos recursos de
estilização das CSS3. São Paulo: Novatec, 2016.
SILVA, R. Twitter lança BootStrap para ajudar desenvolvedores de serviços. TechTudo, 19 ago. 2011.
Disponível em: https://cutt.ly/HvIszZ6. Acesso em: 19 abr. 2021.
180
SOUZA, N. Bootstrap 4: conheça a biblioteca front-end mais utilizada do mundo. São Paulo: Casa
do Código, 2016.
TERUEL, E. C. HTML5: guia prático. São Paulo: Érica, 2014.
W3SCHOOLS. HTML tutorial. W3 Schools, [s.d.]. Disponível em: https://cutt.ly/cvU38eX. Acesso em:
19 abr. 2021.
Sites
https://code.visualstudio.com/
https://fonts.google.com/
https://getbootstrap.com/
https://pixabay.com/
181
182
183
184
Informações:
www.sepi.unip.br ou 0800 010 9000

JavaScript para web responsiva

Enviado por

Dados do documento

Título original

Direitos autorais

Formatos disponíveis

Compartilhar este documento

Compartilhar ou incorporar documento

Opções de compartilhamento

Você considera este documento útil?

Este conteúdo é inapropriado?

Direitos autorais:

Formatos disponíveis

JavaScript para web responsiva

Enviado por

Direitos autorais:

Formatos disponíveis

PROGRAMAÇÃO WEB RESPONSIVA

7.1 O que é o JavaScript

A linguagem de programação JavaScript, como o próprio nome sugere, é de scripting. Normalmente,

Em JavaScript, podemos efetuar o controle de comportamentos dos navegadores por meio

A linguagem de programação JavaScript apresenta grande vantagem em relação a muitas outras

O JavaScript pode ser considerado uma linguagem de programação

7.2 Iniciando com o JavaScript

Figura 269 – Pasta para armazenar o projeto JavaScript

Os conhecimentos adquiridos nas unidades I e II sobre HTML e CSS são

Figura 270 – Arquivo index.html dentro da pasta do projeto

Figura 271 – Arquivo index.html com estrutura básica criada

Figura 272 – Script dentro da tag <head>

O comando alert é responsável por emitir uma mensagem de alerta no

Executando a página no navegador, obtemos o resultado mostrado a seguir.

Figura 273 – Página em execução no navegador

Clique no botão “OK”.

Figura 274 – Página em execução no navegador após clique no botão “OK”

Vamos remover o script do <head> para colocá-lo dentro do <body>.

Figura 275 – Página index.html com tag <script> dentro do <body>

7.3 JavaScript em arquivo externo

Figura 276 – Pasta “js” criada dentro da pasta do projeto

Figura 277 – Criação de novo arquivo no Microsoft Visual Studio Code

Figura 278 – Salvamento de novo arquivo no Microsoft Visual Studio Code

Figura 279 – Opções de salvamento do arquivo no Microsoft Visual Studio Code

Figura 280 – Arquivo scripts.js com o primeiro código em JavaScript

Figura 281 – Arquivo exemplo1.html criado dentro da pasta “páginas” do projeto

Figura 282 – Arquivo exemplo1.html editado no Microsoft Visual Studio Code

Figura 283 – Arquivo exemplo1.html executado no navegador

Em seguida, a página será carregada, conforme mostrado na figura a seguir.

A seguir, aprenderemos três conceitos muito importantes para o desenvolvimento de códigos em

• oninput: evento que ocorre quando um input sofre alteração.

• onclick: evento de clique no mouse.

• ondblclick: evento de dois cliques no mouse.

• onmousemove: evento que ocorre quando o mouse é mexido.

• onmousedown: evento que ocorre quando o botão do mouse é apertado.

• onmouseup: evento que ocorre quando o botão do mouse é solto.

• onkeypress: evento que ocorre quando uma tecla é pressionada e solta.

• onkeydown: evento que ocorre quando uma tecla é pressionada.

• onkeyup: evento que ocorre quando uma tecla é solta.

• onblur: evento que ocorre quando um elemento deixa de ser o foco.

• onfocus: evento que ocorre quando um elemento passa a ser o foco.

• onload: evento que ocorre quando uma página é atualizada.

• onunload: evento que ocorre quando uma página é fechada.

• onsubmit: evento de disparo antes de envio do formulário.

Figura 285 – Arquivo exemplo2.html

Ao executarmos a página, veremos o resultado mostrado na figura a seguir.

Figura 286 – Página exemplo2.html em execução no navegador

Ao clicarmos no botão, visualizaremos o resultado mostrado na figura a seguir.

Figura 287 – Página exemplo2.html executada após clique no botão

Figura 288 – Página exemplo3.html

Figura 289 – Página exemplo3.html em execução no navegador

Figura 290 – Script dentro da página exemplo3.html

Ao executarmos a página no navegador, teremos o resultado mostrado a seguir.

Figura 291 – Página exemplo3.html em execução após a inserção do script

Figura 292 – Página exemplo4.html

Figura 293 – Página exemplo4.html em execução no navegador

Figura 294 – Página exemplo4.html utilizando getElementById

Figura 295 – Página exemplo4.html em execução no navegador utilizando getElementById

Figura 296 – Página exemplo5.html implementando ondblclick

Ao inicializarmos nossa página, teremos o resultado mostrado na figura a seguir.

Figura 297 – Página exemplo5.html em execução no navegador

Implementaremos os eventos onmousedown e onmouseup. Criaremos uma página dentro da pasta

Figura 299 – Implementação dos eventos onmousedown e onmouseup na página exemplo6.html