HTML Js
HTML Js
HTML Js
SOBRE O AUTOR 5
ANTES DE COMEÇAR 9
Para quem é este livro 10
INTRODUÇÃO À PROGRAMAÇÃO WEB 11
Um breve histórico 13
Mantenedores 15
Como funciona um sistema web? 15
Ambiente de Programação 16
Configurando o ambiente 17
HTML 21
Introdução ao HTML 22
As tags HTML 25
A tag HEAD 26
A tag BODY 28
As tags H1, H2, ... 28
As tags P, BR e HR 29
As tags B, STRONG, I e U 32
As tags UL, OL e LI 33
A tag A 35
A tag IMG 37
As tags DIV e SPAN 39
As tags TABLE, TR e TD 40
Formulários HTML 42
A tag FORM 42
A tag LABEL 43
A tag INPUT 44
A tag TEXTAREA 50
As tags SELECT e OPTION 50
Outras tags 51
JAVASCRIPT BÁSICO 55
A tag SCRIPT 57
Declaração de Variáveis 59
Tipos de dados 64
Comentários 65
Operadores 66
Operadores Aritméticos 66
Operadores Relacionais 67
Operadores Lógicos 69
Operador de Atribuição 70
Functions 71
O tipo String 73
Estruturas de Controle de Fluxo 76
Estruturas de repetição 77
Estruturas de desvio de fluxo 87
Arrays 97
O tipo Object 103
JavaScript Client-Side 106
Document Object Model 107
Como usar 108
O objeto window 109
Popups 110
O objeto document 110
Eventos JavaScript 110
onclick 111
onchange 112
onmouseenter e onmouseleave 113
onfocus e onblur 113
onkeypress, onkeydown e onkeyup 114
Calculadora em HTML+JS 115
Manipulando o DOM 122
Seletores 122
Propriedades de Elemento 124
Funções de Elemento 125
Exercitando 127
Ajax 136
Ajax com fetch 137
Opções do Fetch 139
CSS 141
CSS Inline 142
Estilos de texto 143
Classes de Estilos em CSS Internal 144
Dicas e Truques 147
Arquivos CSS Externos 148
Estilos de Caixas 149
CSS e JavaScript 153
Exercitando 154
SEGUINDO EM FRENTE 164
SOBRE O AUTOR
Luiz Fernando Duarte Júnior é Bacharel em Ciência da Computação
pela Universidade Luterana do Brasil (ULBRA, 2010) e Especialista
em Desenvolvimento de Aplicações para Dispositivos Móveis pela
Universidade do Vale do Rio dos Sinos (UNISINOS, 2013).
SOBRE O AUTOR 6
Conheça todos os meus cursos
ANTES DE COMEÇAR
Quer fazer um curso online de Node.js e MySQL com o autor deste livro?
Acesse https://www.luiztools.com.br/curso-fullstack
ANTES DE COMEÇAR 10
INTRODUÇÃO À
PROGRAMAÇÃO WEB
Um breve histórico
MANTENEDORES
Cada país possui suas próprias regras com relação ao uso e distribuição
da Internet, ou seja, a regulamentação da Internet cabe ao governo
de cada país. Entretanto, toda a parte de endereçamento da Internet
compete ao ICANN (nomes de domínio e DNS) e a parte técnica ao IETF
(protocolos e tecnologias), entidades globais sem fins lucrativos que
visam a padronização da Internet mundial.
- Caso o ISP já saiba qual o IP associado àquele endereço ele lhe retorna
diretamente, caso contrário terá de perguntar a um servidor de DNS
“mais alto” na hierarquia, sendo que as extensões dos domínios
orientam os servidores DNS neste sentido.
Ambiente de Programação
CONFIGURANDO O AMBIENTE
Para que seja possível criar páginas web usando HTML, CSS e JavaScript
não é necessário nenhuma configuração “especial”. Mas como tenho
certeza que alguns leitores podem estar começando exatamente
agora suas carreira sou então migrando de outra área completamente
alienígena ao desenvolvimento web, vale ressaltar alguns pontos.
Esta não é a única opção disponível, mas é uma opção bem interessante
e é a que uso, uma vez que reduz consideravelmente a curva de
aprendizado, os erros cometidos durante o aprendizado e possui
ferramentas de depuração muito boas, além de suporte a Git e linha de
comando integrada. Apesar de ser desenvolvido pela Microsoft (uma
SOBRE O AUTOR 17
empresa que desenvolve tradicionalmente softwares pagos), é um
projeto gratuito, de código-aberto, multi-plataforma e com extensões
para diversas linguagens e plataformas, como HTML, CSS e JavaScript, as
estrelas deste ebook.
Para baixar e instalar o Visual Studio Code, acesse o seguinte link, no site
oficial da ferramenta:
https://code.visualstudio.com/
Pronto, este é o modus operandi que você vai ter neste livro, o tempo
todo.
Google Chrome
Para testar as páginas web que vamos criar neste ebook, qualquer
navegador serve. No entanto, existem navegadores que seguem mais
os padrões da Internet e outros menos. O Google Chrome é um dos
melhores neste quesito.
https://www.google.com.br/chrome/browser/desktop/index.html
Quer fazer um curso online de Desenvolvimento Web FullStack JS com o autor deste ebook?
Acesse https://www.luiztools.com.br/curso-fullstack
“
A language that doesn’t affect the way you think about
programming is not worth knowing.
- Alan J. Perlis
“
Em Ciência da Computação, front-end e back-end são termos
generalizados que se referem às etapas inicial e final de um processo.
O front-end é responsável por coletar a entrada do usuário em várias
formas e processá-la para adequá-la a uma especificação em que o back-
end possa utilizar.
Documentos HTML podem ser qualquer coisa que queiramos que seja
exibida no browser de nossos usuários: a timeline do Facebook, a tela de
pesquisa do Google ou a home-page da Microsoft. Todos são documentos
HTML. Com exceção de telas criadas através de plug-ins, como o
Flash (obsoleto), os documentos HTML são a cara da web e é de suma
importância que entendamos a sua estrutura básica antes de começar a
programar pra ela com Node.js.
HTML 22
Todo documento HTML é um arquivo de texto com a extensão .html
(ou .htm, tanto faz). Pode ser criado e editado em qualquer editor de
texto, desde que salvo com a extensão correta. Mas quando aberto no
navegador, é que vemos o que o documento representa de verdade.
HTML 23
Note que não haverá qualquer diferença em relação ao texto
originalmente escrito, talvez apenas a tipografia ligeiramente
diferente. Isso porque colocamos apenas informações, mas nenhuma
meta-informação no arquivo, que a partir de agora chamaremos
simplesmente de tags.
Veremos tags de ambos tipos com detalhes, mas vale salientar desde
já que toda tag que abre, tem de fechar. Ou ela fecha com uma tag de
mesmo nome precedida de barra ‘/’ (caso abre-fecha) ou ela fecha em si
mesmo, com uma barra ‘/’ antes de ‘>’
HTML 24
E por fim, algumas tags possuem atributos, ou seja, características
personalizáveis em seu interior.
As tags HTML
A primeira e mais importante tag que você deve conhecer é a tag HTML.
Ela inicia e termina o documento HTML, ou seja, é a primeira e a última
presente em um documento, uma tag contâiner que engloba todas as
demais tags do documento, como segue:
Sendo uma tag contâiner, ela permite dentro dela tanto conteúdo textual
quanto outras tags, no entanto, como manda o padrão W3C, a tag HTML
deve conter em seu interior essencialmente apenas outras duas tags:
head e body, como veremos a seguir.
HTML 25
Além da tag HTML, sugere-se atualmente começar seu documento com
a tag DOCTYPE, indicando que usaremos HTML5, a especificação mais
recente da linguagem na data de escrita deste livro.
Código 2.1: disponível em https://www.luiztools.com.br/ebook-frontend-fontes
A TAG HEAD
HTML 26
Dentro da tag HEAD podemos colocar, por exemplo, as tags TITLE,
SCRIPT e STYLE além de tags para ajudar os mecanismos de busca,
chamadas de meta-tags.
HTML 27
A TAG BODY
Assim como temos um cabeçalho no documento HTML, também
precisamos ter um corpo, função da tag BODY, que deve vir logo após a
tag HEAD, mas fechar antes da tag fecha-HTML como segue:
Código 2.1: disponível em https://www.luiztools.com.br/ebook-frontend-fontes
A tag BODY é uma tag contâiner e aceita a maior parte das tags HTML
existentes, pois ela representa o documento em si, o que o usuário vê e
interage na tela. É dentro da tag body que construiremos as interfaces de
nossos sistemas web.
HTML 28
Código 2.1: disponível em https://www.luiztools.com.br/ebook-frontend-fontes
Note que houve quebra de linha entre os testes. Isso NÃO é devido à
ter quebra de linha entre as tags H no HTML, mas sim porque as tags H
possuem comportamento de bloco, ou seja, não permitem elementos ao
seu lado, na mesma linha.
AS TAGS P, BR E HR
HTML 29
tags especiais que também permitem fazer isso de uma maneira,
digamos, mais controlada.
HTML 30
Atenção: a tag P deve ser usada para definir blocos de texto e somente
texto. Para outros elementos veremos as tags DIV e SPAN mais à frente.
HTML 31
E por fim, a tag HR é como se fosse uma BR, mas além de realizar a
quebra ainda coloca uma linha contínua naquele ponto, o que pode ser
útil em alguns casos.
Código 2.4: disponível em https://www.luiztools.com.br/ebook-frontend-fontes
AS TAGS B, STRONG, I E U
Assim como a tag P que formata um bloco de texto, existem outras tags
que alteram a aparência do mesmo. As tags B e STRONG por exemplo,
tornam o texto negrito (bold), sendo a segunda mais utilizada quando
queremos dizer aos mecanismos de busca que essa palavra é importante
para nosso site.
HTML 32
Código 2.5: disponível em https://www.luiztools.com.br/ebook-frontend-fontes
AS TAGS UL, OL E LI
HTML 33
Código 2.6: disponível em https://www.luiztools.com.br/ebook-frontend-fontes
No exemplo acima usei uma UL, note que dentro dela somente existem
tags LI, mas que dentro das tags LI coloquei uma combinação de texto
e tags de formatação. O mesmo exemplo trocando a tag UL por OL pode
ser visto abaixo, com seu efeito visível:
HTML 34
Note também que cada LI (list item) é colocado em uma linha separada,
pois é um novo item da lista, o que nos leva a entender que as tags
UL, OL e LI são tags de bloco, ou seja, quebram linha e garantem
espaçamento automático antes e depois.
A TAG A
HTML 35
Note que o conteúdo da tag A ( a frase “Clique aqui”) é o texto que
aparece na página, enquanto que o atributo href define para onde o
usuário será levado no caso dele clicar no link, o que neste caso é o site
do Google. Isto é o básico que você precisa saber sobre âncoras HTML.
Além do básico, existem ainda dois atributos que podem ser úteis às
suas âncoras: o atributo title, que define a dica da âncora (quando você
fica com o mouse parado sobre ela, a dica aparece) e o atributo target,
que permite a você definir se ao ser clicado o link levará o usuário
para outra aba ou permanecerá na mesma. Os valores possíveis para o
atributo target são: _blank e _self
Código 2.8: disponível em https://www.luiztools.com.br/ebook-frontend-fontes
HTML 36
Embora o mais comum seja encontrarmos links textuais pela Internet,
sendo a tag A um contâiner, ela permite agregar outras tags em seu
interior, como tags de imagens, por exemplo, ou determinadas áreas do
site como DIVs (a seguir).
A TAG IMG
O nome IMG vem de IMAGE e denota a tag que representa uma imagem
na página web. Esta tag NÃO é um contâiner, ou seja, ela abre-e-fecha
a tag nela mesma, e representando uma imagem seu atributo mais
importante é o SRC (source, origem em inglês) que deve conter um
endereço (absoluto ou relativo) de um arquivo de imagem (geralmente
JPEG, GIF ou PNG).
HTML 37
Por questões de organização costumamos guardar as imagens em
uma subpasta do projeto, para separá-las das páginas HTML e demais
arquivos do projeto. Nomes comuns para este subpasta incluem IMG
(tãããão criativo), imagens, images e content. Crie uma pasta com o
nome img ao lado do seu arquivo HTML e dentro coloque uma imagem
qualquer com o nome de imagem.jpg, que no meu exemplo abaixo, é um
carro.
Podemos também criar imagens com links. Para isso, basta colocar uma
tag IMG contendo a sua imagem dentro de uma tag A, com o endereço do
link. Assim, teremos uma imagem que quando clicada leva o usuário à
outra página web.
HTML 38
Outros atributos da tag IMG incluem ALT, que é uma legenda para
a imagem (não visível), WIDTH (que representa sua largura, sendo
por padrão a largura original da imagem) e HEIGHT (que representa
sua altura. Caso apenas WIDTH seja especificado, a altura será
redimensionada proporcionalmente e vice-versa. Note que isso não afeta
o tamanho real da imagem, apenas o visual.
As tags DIV e SPAN são tags contâiner (ou seja, permitem que sejam
colocadas outras tags em seu interior) utilizadas para organizar e
formatar as áreas da sua página HTML, sendo que a tag DIV organiza
uma área em bloco (in-block, ou seja, quebra a linha automaticamente)
e a tag SPAN organiza uma área em linha (in-line, ou seja, não quebra a
linha automaticamente). Por ora é o que precisamos saber.
HTML 39
A especificação HTML diz que as tags SPAN e DIV somente devem
ser usadas quando nenhuma outra tag HTML possui a função que
desejamos.
AS TAGS TABLE, TR E TD
A tag TABLE é uma tag contâiner que somente aceita em seu interior
tags TR (table row ou linha da tabela). As tags TR, por sua vez, também
são contâiners, mas que aceitam somente tags TD (table data ou dado
da tabela, entenda como célula) em seu interior. Já as tags TD são
containers que aceitam qualquer coisa em seu interior.
HTML 40
Usando o código abaixo. Atente ao uso da tag B para tornar o texto do
cabeçalho negrito.
Atenção: apesar de parecer uma boa ideia, evite utilizar tabelas para
organizar as seções da sua página HTML, pois elas não foram criadas
com este propósito. O ideal é sempre utilizarmos DIVs e SPANs para essa
finalidade, deixando as tabelas para a apresentação de dados tabulares.
HTML 41
Formulários HTML
A TAG FORM
Quando queremos criar um formulário na nossa página HTML devemos
utilizar a tag FORM. A tag FORM é um contâiner que indica que todas
as demais tags e conteúdos no seu interior representam um único
formulário HTML, por exemplo, um formulário de cadastro, de contato
ou login.
Além deste atributo temos o METHOD, que define o verbo HTTP que será
utilizado para transmissão dos dados (geralmente GET ou POST). HTTP é
o protocolo de transferência de hipertexto utilizado na Internet mundial.
Ele define os dados e metadados que devem ser transmitidos a cada
requisição e resposta web.
Atenção: existem outros verbos HTTP como DELETE, PUT, HEAD e DEBUG,
sendo que GET e POST são os únicos suportados por HTML Forms e
também os mais utilizados no geral em qualquer contexto web.
HTML 42
Código 2.12: disponível em https://www.luiztools.com.br/ebook-frontend-fontes
A TAG LABEL
Uma tag que serve para criar um rótulo em seu FORM HTML geralmente
acompanhada de outro componente. A LABEL é uma tag contâiner que
permite texto ou um INPUT (veja a seguir) em seu interior. Geralmente
a LABEL possui o mesmo comportamento visual de um texto escrito
diretamente na página, e seu uso mais comum é como rótulo de campos
de texto, sendo que segundo a especificação os pares LABEL + INPUT
devem estar dentro de tags P (parágrafos) dentro do FORM.
HTML 43
Código 2.12: disponível em https://www.luiztools.com.br/ebook-frontend-fontes
A TAG INPUT
HTML 44
(invisível ao usuário final). Também temos o atributo DISABLED, que
quando definido como TRUE torna o INPUT desabilitado, o que pode ser
útil em algumas situações.
TYPE=”TEXT” e TYPE=”PASSWORD”
Utilizados para criar campos de texto e de senha, respectivamente,
semelhantes ao JTextField do Java Swing e TextBox do ASP.NET. O
atributo NAME define o nome do seu campo (não confundir com seu
rótulo) e o atributo VALUE define o seu conteúdo. Este INPUT TYPE não
aceita outros elementos em seu interior e seu comportamento visual é
inline (ou seja, não quebra linha automaticamente).
Nota: repare como coloquei o input dentro da tag label. Isso está
perfeitamente correta e ajuda a dizer ao browser que “essa label é daquele
input”e inclusive se você clicar no texto da label no navegador verá que o
input fica selecionado pois o browser entende que deseja preenchê-lo.
HTML 45
TYPE=”RADIO”
Em algumas ocasiões queremos que o usuário apenas uma dentre um
número pequeno de opções. Assim, podemos definir estas opções como
sendo botões de rádio HTML, os INPUT TYPE=”RADIO”, em analogia aos
JRadioButtons e RadioButtons de outras linguagens.
Cada INPUT TYPE=”RADIO” deve ser sucedido por um texto plano (pois
ele não possui conteúdo próprio) e deve conter dois atributos: VALUE,
que indica po valor da opção selecionada (não visível), e NAME, que
indica o nome deste grupo de botões de rádio. Ou seja, todos os botões de
rádio com o mesmo name representam o mesmo grupo de informação,
e com isso o usuário poderá selecionar apenas um deles (bem mais fácil
que o JButtonGroup do Java Swing!).
HTML 46
Abaixo temos o resultado.
INPUT TYPE=”CHECKBOX”
Vimos antes que o INPUT RADIO serve para o usuário selecionar uma
dentre algumas opções. Mas e quando ele pode selecionar mais de uma
opção? Neste caso podemos usar o INPUT CHECKBOX.
Neste INPUT nós temos o atributo NAME para definir o nome da variável
que será enviado ao servidor e fora do INPUT (ele não é um contâiner)
temos o texto descritivo para o usuário entender do que se trata o
controle, como mostra a última linha de INPUT do código abaixo.
HTML 47
Código 2.13: disponível em https://www.luiztools.com.br/ebook-frontend-fontes
HTML 48
Anteriormente, quando vimos a tag FORM foi falado que ela tinha dois
atributos: ACTION e METHOD, sendo este último opcional. Quando
um INPUT SUBMIT é clicado, o navegador coleta todas as informações
contida nos campos do FORM e envia eles para o endereço fornecido
no atributo ACTION, no formato NAME1=VALUE1&NAME2=VALUE2, ou
seja, ele pega o name de cada componente HTML e seu valor e junta-os
usando sinais de ‘=’, e depois junta todos os pares de chave-valor usando
sinais de ‘&’. Se o atributo METHOD não for definido, será enviado para
o servidor via HTTP GET, caso contrário será enviado usando o verbo
HTTP definido neste atributo (o que é irrelevante no momento).
HTML 49
Como resultado, temos a imagem abaixo. Note que se clicarmos no
INPUT SUBMIT seremos enviados para a página /teste que não existe,
exibindo um erro no navegador. Isso é normal, uma vez que ainda não
vimos como fazer a programação desta página em Node.js.
A TAG TEXTAREA
HTML 50
Quando o FORM é submetido ao servidor, é enviado uma variável com o
NAME do SELECT e o VALUE do OPTION selecionado pelo usuário.
OUTRAS TAGS
Estas não são as únicas tags existentes. Além disso, a descrição de cada
tag vista aqui é um resumo bem superficial e o estudo mais aprofundado
é vital para todo profissional que deseje trabalhar com programação
web.
HTML 51
Mais informações podem ser obtidas no site oficial da W3.org.
Abaixo, uma das possíveis soluções (note que usei um atributo STYLE
que ainda não estudamos):
HTML 52
Note que a última âncora da página está apontando seu href para novo.
html. Que tal criarmos esta página para conseguir navegar de uma para
outra?
HTML 53
Note que de uma página você pode navegar para outra e vice-versa, mas
que nenhum cadastro acontece de verdade.
Deixe este projeto salvo, continuaremos ele mais adiante neste ebook.
HTML 54
JAVASCRIPT BÁSICO
3 “
Not all roots are buried down in the
ground some are at the top of the tree.
- Jinvirle
“
O objetivo deste capítulo é lhe dar a base de programação em
JavaScript. Ele é especialmente útil se você estiver começando agora
com programação, mas também pode ser útil para quem possa estar
migrando de uma linguagem para JS.
JAVASCRIPT BÁSICO 56
A tag SCRIPT
Note que deixei um código console.log dentro do bloco script. Para testar
esta página, faça do mesmo jeito que vem fazendo, abrindo o arquivo
HTML no seu navegador, mas agora use o botão direito do mouse e
escolha a opção de inspecionar a página.
JAVASCRIPT BÁSICO 57
Vai se abrir uma aba cheia de opções na parte inferior do seu Google
Chrome. Escolha a opção Console e você verá algo como abaixo.
É através deste console que você vai verificar como os nossos exercícios
com JavaScript estão funcionando, então deixe-o aberto e, entre um
código e outro, salve o arquivo e apenas dê um refresh no navegador
(F5).
JAVASCRIPT BÁSICO 58
Nota: ro carregamento de scripts JS na página HTML possui
comportamento bloqueante na requisição. Ou seja, até que o script termine
de ser carregado o browser não carrega mais nada. Assim, caso seu script
seja grande (algumas dezenas de KB por exemplo), é sempre indicado
referenciá-lo apenas no final do documento HTML, o mais próximo possível
da tag </BODY> (fecha-body) para evitar que o usuário tenha de esperar
demais pelo carregamento para começar a usar a página.
Declaração de Variáveis
JAVASCRIPT BÁSICO 59
a total x2
Maximo
ExpData meuNumero
Porque além das regras de formação do nome em si, uma variável não
pode utilizar como nome uma palavra reservada da linguagem.
JAVASCRIPT BÁSICO 60
do double else
function goto if
implements import in
yield
JAVASCRIPT BÁSICO 61
diferentes ambientes como no navegador, por exemplo.
»» nomeDaVariavel
»» var nomeDaVariavel
»» const nomeDaVariavel
»» let nomeDaVariavel
JAVASCRIPT BÁSICO 62
a variável x passa a ser do tipo string (texto).
Boa prática: tente declarar suas variáveis como const. Se não puder, pois
elas precisam ser alteradas, tente usar let. Se não puder usar let, porque a
variável precisa ser usada fora do seu escopo (o que não é recomendado),
use var.
JAVASCRIPT BÁSICO 63
E também é possível declarar mais de uma variável por vez:
Tipos de dados
JAVASCRIPT BÁSICO 64
linguagem mais fácil de aprender e mais difícil de executar (mais lenta),
em linhas gerais.
Comentários
JAVASCRIPT BÁSICO 65
Conforme você for avançando e pegando experiência com JavaScript,
não precisará usar mais tantos comentários, provavelmente apenas
em blocos de código complexos, como forma de documentação para
uso futuro. Por ora, comente tudo o que achar conveniente para seus
estudos.
Operadores
OPERADORES ARITMÉTICOS
JAVASCRIPT BÁSICO 66
Estes operadores aritméticos podem ser combinados para formar
expressões, fazendo uso de parênteses para determinar a ordem
específica de avaliação de cada expressão.
OPERADORES RELACIONAIS
JAVASCRIPT BÁSICO 67
Operador Significado Exemplo
Note que temos diferentes usos para o sinal de igualdade (=). Se usarmos
ele em duplas (==), comparamos valores de variáveis, independente do
seu tipo. Assim ‘1’ == 1 é verdadeiro, pois ambos são o número 1. Por
causa dessa interpretação do JavaScript, recomenda-se sempre utilizar
a igualdade em trios (===), que além de comparar o valor entre as
variáveis, também compara o seu tipo, para ver se coincidem. Em ambos
os casos, não confunda com o uso isolado do sinal de igualdade (=), que
é o operador de atribuição, que falarei mais tarde. Esse erro é um dos
mais comuns por programadores JS desatentos.
Boa prática: use sempre === e !== para comparações. Diminui a chance
de ‘falsos positivos’ e se tem um pequeno ganho de performance entre
algumas comparações.
JAVASCRIPT BÁSICO 68
É importante ressaltar também que os operadores relacionais duplos,
isto é, aqueles definidos através de dois caracteres (>= por exemplo), não
podem conter espaços em branco.
OPERADORES LÓGICOS
Como seria esperado o JavaScript também possui operadores lógicos,
isto é, operadores que permitem conectar logicamente o resultado de
diferentes expressões aritméticas ou relacionais construindo assim
uma expressão resultante composta de várias partes e portanto mais
complexa.
JAVASCRIPT BÁSICO 69
Operador Significado Exemplo
OPERADOR DE ATRIBUIÇÃO
JAVASCRIPT BÁSICO 70
Boa prática: sempre inicialize suas variáveis no momento da declaração,
o que costuma melhorar a performance dos otimizadores de código JS
presentes no V8, que é o motor de JS usado pelo Node.js e também evita
erros futuros por usar variáveis não inicializadas.
Realize testes ao menos uma vez com cada operador, para entender na
prática como eles funcionam. Se não conseguir realizar testes com os
operadores lógicos, não tem problema, revisitaremos eles em breve.
Functions
JAVASCRIPT BÁSICO 71
que o interpretador JS leu ela em algum arquivo ou bloco de código.
Chamar uma função JS que ainda não foi carregada para a memória do
navegador retornará undefined.
JAVASCRIPT BÁSICO 72
Ou passá-la por parâmetro como abaixo:
Código 3.7: disponível em http://www.luiztools.com.br/ebook-frontend
Diferente, não?!
Note que nos exemplos que declarei a function como uma variável, eu
usei const na declaração. Isso porque essa function não será alterada, é
uma constante.
O tipo String
JAVASCRIPT BÁSICO 73
Código 3.8: disponível em http://www.luiztools.com.br/ebook-frontend
Note que a palavra ‘Luiz’ está entre aspas (simples) e que poderia
estar entre aspas-duplas, sem qualquer diferença. No entanto, se você
começou a string com aspas simples, deve terminar da mesma forma e
vice-versa.
O ideal é sempre inicializarmos nossas Strings, nem que seja com aspas
vazias (‘’) para não corrermos o risco de termos erros de execução mais
pra frente, pois por padrão o conteúdo das variáveis é ‘undefined’.
JAVASCRIPT BÁSICO 74
Código 3.8: disponível em http://www.luiztools.com.br/ebook-frontend
Isso vai imprimir o texto “Prof. Luiz tem 32 anos!”, copiando o valor da
variável idade pra dentro da nova String completa. Note que isso não
altera o tipo da variável idade ou seu valor, apenas faz uma cópia dela
em forma de texto, automaticamente.
JAVASCRIPT BÁSICO 75
Note que nenhuma dessas funções muda a String em si, todas retornam
um valor a partir dela. Strings são imutáveis na maioria das linguagens
de programação, e JavaScript não é exceção. Quando colocamos um
texto dentro de uma variável que já possuía um texto, não mudamos o
texto original, mas criamos um novo.
JAVASCRIPT BÁSICO 76
Geralmente as estruturas de controle de execução são divididas em:
JAVASCRIPT BÁSICO 77
ESTRUTURAS DE REPETIÇÃO
JAVASCRIPT BÁSICO 78
O que você consegue abstrair a partir do segundo campo do for?
Mas se i = 0, quando que ele será maior ou igual à 10 para o for encerrar
a repetição?
Neste caso, a diretiva será executada 10 vezes e sequência, uma vez que
a cada execução o valor de i aumentará em uma unidade até alcançar
o valor 10, o que fará com que a condição ‘i < 10’ se torne falsa e o for
acabe sua execução.
JAVASCRIPT BÁSICO 79
Código 3.9: disponível em http://www.luiztools.com.br/ebook-frontend
JAVASCRIPT BÁSICO 80
Mas e as estruturas de repetição mais complexas, baseadas em
condições?
JAVASCRIPT BÁSICO 81
Neste exemplo inicializamos uma variável chave como true (verdadeiro)
e depois usamos a própria variável como condição de parada do while.
Enquanto chave for true, o while continuará sendo executado (i.e. a
diretiva será executada). No entanto, note que um problema típico
relacionado a avaliação da condição da diretiva while é o seguinte: se a
condição nunca se tornar falsa o laço será repetido indefinidamente.
Para que isso não aconteça, devemos nos certificar de que exista algo na
diretiva que, em dado momento, modifique o valor da condição, como
no exemplo abaixo:
Nesse caso, o while executará apenas uma vez e depois será encerrado,
pois na segunda vez que a condição for analisada, a variável chave terá
valor false e ele não executará sua diretiva novamente.
Claro, esse é um exemplo pouco útil, uma vez que a única instrução
existente é para encerrar o while. O que acontece geralmente é que o
while possua mais de uma diretiva e, assim como for, elas devem ser
circundadas por chaves:
JAVASCRIPT BÁSICO 82
É possível ainda, usar o while de maneira semelhante ao for, definindo
como condição uma comparação lógico-aritmética:
Código 3.9: disponível em http://www.luiztools.com.br/ebook-frontend
Nesse caso, o texto “Imprime!” será impresso 10 vezes, assim como seria
possível fazer com um for.
O funcionamento do while pode ser resumido através do fluxograma abaixo:
Por exemplo:
JAVASCRIPT BÁSICO 83
Código 3.10: disponível em http://www.luiztools.com.br/ebook-frontend
Note que a variável chave foi declarada como false logo na sua
inicialização, ou seja, quando ela for comparada na condição do while
ela ainda será false e consequentemente sairá do while. Porém, como
o bloco do é executado primeiro, teremos a impressão da palavra
“Imprime!” na saída do console.
JAVASCRIPT BÁSICO 84
Um exercício que você pode fazer para testar o for, o while e o do/while
é o seguinte: antes de conhecer os laços de repetição, como você faria
para declarar uma variável e imprimi-la de 0 a 9?
Repetitivo, não?!
JAVASCRIPT BÁSICO 85
Código 3.10: disponível em http://www.luiztools.com.br/ebook-frontend
JAVASCRIPT BÁSICO 86
Um último ponto digno de nota é a forma como usei o incremento
unário nestes exemplos. Note que incrementei o valor de x dentro de
um console.log e dentro de uma estrutura while. Isso é perfeitamente
possível e lhe permite estratégias interessantes em seus algoritmos.
Temos dois operadores de incremento unário, o ++x e o x++. O primeiro
aumenta o valor de x em 1 e depois retorna o valor do mesmo, enquanto
que o segundo retorna o valor de x e depois o aumenta em 1. Pode
parecer uma pequena diferença, mas analise esse código:
Código 3.11: disponível em http://www.luiztools.com.br/ebook-frontend
A resposta é 0.
Já neste exemplo…
Código 3.11: disponível em http://www.luiztools.com.br/ebook-frontend
A resposta é 1. Capicce?
Então vamos passar à próxima estrutura, temos muito pra ver ainda
dentro do básico de JavaScript!
JAVASCRIPT BÁSICO 87
O if/else é uma estrutura simples de desvio de fluxo de execução, isto é,
é uma diretiva que permite a seleção entre dois caminhos distintos para
execução dependendo do resultado falso ou verdadeiro resultante de
uma expressão lógica.
JAVASCRIPT BÁSICO 88
Código 3.12: disponível em http://www.luiztools.com.br/ebook-frontend
Note também que a expressão lógica que vai dentro dos parênteses
do if aceitam qualquer expressão que retorne true ou false, usando os
operadores lógicos (<, >, <=, >=, ==, != e !). Sendo assim, podemos fazer
coisas muito mais complexas com um if do que apenas uma comparação
de igualdade, como no exemplo abaixo, onde vemos se um número é
PAR (isto é, divisível por 2):
Código 3.12: disponível em http://www.luiztools.com.br/ebook-frontend
JAVASCRIPT BÁSICO 89
E agora, unindo o conceito do if e do for, como você faria para imprimir
todos os números pares de 1 a 20?
Copie e cole este código e veja como ele imprime corretamente somente
os números pares de 1 a 20.
JAVASCRIPT BÁSICO 90
Essa talvez tenha sido uma solução pensada por você, mas está errada.
Execute ela dentro de um arquivo index.js e notará que ela sempre
imprime que todos os números são ÍMPARES, além de imprimir quando
algum é PAR também.
Porquê?
JAVASCRIPT BÁSICO 91
Lemos essa estrutura como: “se a expressão lógica for verdadeira,
executamos a diretiva 1, senão, executamos a diretiva 2”.
Lemos o trecho mais interno do algoritmo acima como: “se i for divisível
por 2, então imprima que ele é PAR, senão, imprime que ele é ímpar”.
JAVASCRIPT BÁSICO 92
Código 3.13: disponível em http://www.luiztools.com.br/ebook-frontend
JAVASCRIPT BÁSICO 93
Lemos esta estrutura como: “se x é igual a 1, executamos a diretiva 1,
senão, se x for igual a 2, executamos a diretiva 2”.
JAVASCRIPT BÁSICO 94
No entanto, se suas comparações são sempre de uma variável em
relação a um valor, existe uma estrutura mais eficiente para isso: a
switch/case.
JAVASCRIPT BÁSICO 95
Em um fluxograma, temos a estrutura switch/case representada da
seguinte maneira:
JAVASCRIPT BÁSICO 96
Note que neste exemplo eu usei ‘;’ (ponto-e-vírgula) logo após a
impressão no console. Isso porque eu quis usar outra diretiva na
mesma linha, a break, o que não seria permitido caso eu não usasse
o ‘;’. A quebra de linha automaticamente é entendida como uma nova
instrução, porém nos casos em que queremos colocar mais de uma
instrução na mesma linha, devemos usar o ‘;’, sem limite de instruções
que eu poderia colocar na mesma linha.
Arrays
JAVASCRIPT BÁSICO 97
Código 3.14: disponível em http://www.luiztools.com.br/ebook-frontend
JAVASCRIPT BÁSICO 98
Se por algum motivo quisermos substituir o valor contido em alguma
das posições, basta definirmos o novo valor sobre ela, como neste caso,
em que estamos substituindo o valor guardado na posição 1 do array por
um novo valor:
JAVASCRIPT BÁSICO 99
Código 3.14: disponível em http://www.luiztools.com.br/ebook-frontend
Note que usamos a própria variável de controle ‘i’ par acessar a posição
do array de números onde queremos guardar os valores.
Não acredita?
O tipo Object
Quer fazer um curso online de Desenvolvimento Web FullStack JS com o autor deste
ebook? Acesse https://www.luiztools.com.br/curso-fullstack
COMO USAR
Você não precisa fazer nada de especial para começar a usar o DOM.
Navegadores diferentes têm implementações diferentes do DOM, e essas
implementações exibem graus variados de conformidade com o padrão
DOM real (um assunto que tentamos evitar nesta documentação), mas
todo navegador usa um modelo de objeto de documento para tornar as
páginas da web acessíveis via JavaScript.
O OBJETO WINDOW
window.location.href
Pega a URL atual do navegador ou faz com que o navegador acesse a
URL especificada. Experimente usar um console.log(window.location.
href).
window.location.search
Pega a querystring atual do navegador. Experimente usar um console.
log(window.location.search).
window.location.reload()
Atualiza a página atual (F5).
window.history
Acessa o objeto de histórico do navegador, permite inclusive voltar para
a página anterior.
setTimeout(function, delay)
Função nativa do objeto window que atrasa o disparo de uma função JS
em um tempo definido em milissegundos.
setInterval(function, interval)
Semelhante ao setTimeout, mas dispara a mesma function a cada x
milissegundos. Como retorno à chamada deste método é passado o ID do
timer, que pode ser cancelado usando a função clearInterval(id).
setImmediate(function)
Executa a function exatamente agora, mas por uma thread em
background. Muito útil para processamento não-bloqueante.
alert(message)
Exibe um popup com uma mensagem dentro e um botão de ok. É um
atalho para window.alert(message).
confirm(message)
Exibe um popup com uma mensagem dentro (geralmente um
questionamento) e dois botões: ok e cancelar. Caso o usuário clique em
ok, esta função irá retornar true, caso contrário false. É um atalho para
window.confirm(message).
O OBJETO DOCUMENT
document.getElementById(id)
Busca no documento HTML o objeto com o atributo Id passado por
parâmetro (string). Este objeto resultante tem os mesmos atributos e
funções do objeto original. Note que o atributo Id não é a mesma coisa
que o atributo name. O id serve justamente para diferenciar os objetos
HTML entre si (não temos dois objetos com mesmo id), enquanto que o
name serve para definir o nome dos valores a serem passados dentro de
um FORM (ou seja, não possui sentido em tags que não sejam INPUTs e
derivados).
Mais à frente ver mais sobre o document, assim que exercitarmos o que
acabamos de ver.
EVENTOS JAVASCRIPT
ONCLICK
ONCHANGE
ONFOCUS E ONBLUR
CALCULADORA EM HTML+JS
Para fazer isso, abra uma tag SCRIPT antes de </body> e vamos criar
uma função de atualização do display nele:
Código 4.2: disponível em https://www.luiztools.com.br/ebook-frontend-fontes
Mas como fazer para que essa função seja adicionada a todos os botões
numéricos?
Basta usar o atributo onclick dos botões que permite dizer qual a função
JS será disparada toda vez que o botão for clicado. O uso de ‘this’ no
parâmetro faz com que o próprio botão seja passado por parâmetro,
como no exemplo abaixo do botão 7 (você deve replicar para todos os
numéricos):
Para fazer o botão de limpar (C de Clear) é bem simples, basta criar uma
função que zera o display novamente (coloque essa função no mesmo
bloco SCRIPT da outra função):
Código 4.2: disponível em https://www.luiztools.com.br/ebook-frontend-fontes
Nota: o HTML não armazena estado, logo, a cada refresh do seu navegador
ou troca de página você perderá os dados que tinha em memória. Isso é
normal da web.
Vamos colocar uma perfumaria? É muito chato não poder usar o teclado
do computador para usar a calculadora, certo?
O que fiz ali no if é uma expressão regular. Existem livros apenas sobre
a construção e uso de expressões regulares como o fantástico Expressões
Regulares: Uma Abordagem Divertida, de Aurélio Marinho Jargas, mas
basta entender por ora que uma expresão regular é um padrão de texto
sobre o qual testamos para ver se outro texto está de acordo.
Quando uso barras no JavaScript ele entende que vou definir uma
expressão regular entre as barras. Aqui no caso usei [0-9] que é uma
expressão regular bem comum para validar se um texto é um número
de 0-9. O teste é feito usando a função test, passando por parâmetro o
texto que queremos validar. No nosso caso, somente entrará no if se a
tecla que foi pressionada é um número.
SELETORES
document.getElementById(id)
Busca no documento HTML o objeto com o atributo Id passado
por parâmetro (string). Este objeto resultante tem os mesmos
atributos e funções do objeto original. Experimente usar document.
getElementById(“txtNome”) no console do navegador com esta página
aberta e verá ser retornada a respectiva tag input.
document.getElementsByTagName(name)
Quando queremos trazer todos os elementos do HTML que sejam
de uma mesma tag, usamos este seletor. Experimente trazer todos
inputs ou algum outro elemento à sua escolha, como em document.
getElementsByTagName(“input”).
document.getElementsByClassName(name)
Ainda não vimos CSS, mas existe outro atributo chamado class, que
também pode ser usado como seletor do DOM.
document.querySelector(filtro) e document.querySelectorAll(filtro)
Tudo o que fizemos com as demais funções e coisas ainda mais
poderosas podem ser feitas com as funções acima, sendo que a primeira
sempre retorna apenas um elemento e a segunda pode retornar vários.
Em ambas, devemos passar por parâmetro o filtro a ser utilizado. Este
filtro pode ser (usando o HTML acima como exemplo):
PROPRIEDADES DE ELEMENTO
element.value
Esta propriedade, existente em inputs, define ou retorna o conteúdo do
atributo value dele. Em alguns inputs, o value é o texto no seu interior.
Em outros, é o item selecionado.
element.getAttribute(attributeName) e setAttribute(attributeName,
newValue)
Esta propriedade retorna o conteúdo de um atributo da tag HTML, como
por exemplo o src de uma imagem ou o href de uma âncora.
element.style
Esta propriedade define tudo relacionado à aparência do elemento.
Qualquer subpropriedade de estilo que você quiser aplicar pode ser feito
através de element.style.propriedade, como abaixo (exercite escrevendo
código JavaScript):
element.innerHTML
Esta propriedade define o conteúdo HTML de uma tag, útil para ler ou
alterar sua aparência também:
element.innerText
Esta propriedade define o conteúdo texto de uma tag, útil para ler ou
alterar sua aparência também.
FUNÇÕES DE ELEMENTO
Para usar as funções abaixo, você deve primeiro carregar o elemento (ou
documento) ao qual deseja disparar a função. Algumas funções esperam
outras funções por parâmetro, o que indica que elas irão disparar a sua
função em algum momento futuro, quando algo acontecer, como sendo
um evento.
Talvez vá demorar algum tempo até você precisar usar um código como
o acima, mas tenha em mente que todas as funções de manipulação de
DOM que eu mostrei nesta seção, dependem que o DOM da página já
esteja carregando, ok?
element.onclick = funcao
Define uma função JavaScript que será disparado quando este element
for clicado. Mesmo efeito do atributo onclick no HTML. Opcionalmente,
você pode disparar este evento como qualquer outra função, para forçar
o clique do elemento.
element.onchange = funcao
Define uma função que será disparada quando este element for alterado
(selects principalmente). Mesmo efeito do atributo onchange.
element.onfocus e element.onblur
Define uma função para quando o usuário coloca ou tira o foco de um
elemento, respectivamente.
element.onmouseenter, onmouseleave
Adiciona um gatilho no elemento que irá disparar uma função toda vez
que o mouse entrar ou sair do elemento respectivamente (passando por
cima, sem clicar).
element.onsubmit = funcao
Com esta propriedade você pode definir uma função JS que vai ser
disparada toda vez que um formulário HTML for submetido, ou seja, que
seu input[type=submit] for pressionado.
element.addEventListener(eventName, callback)
Esta função é a genérica para definir qualquer gatilho existente nos
elementos. O primeiro parâmetro é o evento a ser mapeado e o segundo
é a função que vai ser disparada quando esse evento acontecer.
Nota: a tag SCRIPT exige que ela seja fechada com uma /SCRIPT, jamais
fechada nela mesma. Se você não respeitar essa regra, sua página não irá
funcionar.
Implementando este código você notará que quando abrir seu arquivo
index.html no navegador, ele exibirá somente uma das DIVs, mas que o
botão dela não funciona ainda.
Como ainda não vimos como estilizar nossas páginas HTML, ignore os
atributos style que usei e não se importe se a aparência de tudo ficar
muito feia, como nas imagens abaixo:
Para pegar os dados que foram submetidos temos duas opções: usando
formdata (que foi o que eu fiz, que retorna uma coleção de chave-valor
) ou pegando campo a campo.
Basicamente seleciono todos os botões com “X” e aqueles que ainda não
possuem uma função de click, eu adiciono a nossa de remover a tr mais
próxima com as funções closest (busca um elemento determinado mais
próximo) e remove (remove o elemento em questão).
Bem simples.
Com Ajax.
Ajax
Esta função pode ser usada apenas passando a URL que se deseja
requisitar de maneira assíncrona. Nesse caso, será feito um HTTP GET na
URL e o fluxo de execução seguirá normalmente. Quando a requisição
retornar com uma resposta (o que pode ser praticamente instantâneo
ou demorar minutos), devemos executar a função de retorno usando um
conceito chamado Promises do JavaScript.
Vamos criar uma página HTML simples, para que um usuário possa
inserir um endereço IP em um input e, pressionando um botão,
descobrir de onde ele é.
Nenhuma novidade aqui, mas note que o botão está esperando uma
função buscarIP que ainda não criamos. Assim, crie um bloco script no
final desta página HTML com o código do nosso fetch e incluindo a sua
API Key como abaixo.
Neste bloco, além das primeiras linhas que não devem ser novidade
para você, está o fetch. O primeiro parâmetro dele é a string com a URL
de acesso à web API. Aqui, eu monto ela usando um conceito chamado
Template Literals que permite juntar variáveis com texto de forma mais
organizada do que usando +.
OPÇÕES DO FETCH
Quer fazer um curso online de Desenvolvimento Web FullStack JS com o autor deste
ebook? Acesse https://www.luiztools.com.br/curso-fullstack
5
“ Everyone knows that debugging is twice as hard as writing a
program in the first place. So if you’re as clever as you can be
when you write it, how will you ever debug it?
- Brian W. Kernighan
“
Outra tecnologia muito comum quando o assunto é front-end é o CSS.
CSS significa Cascading Style Sheets, ou Folhas de Estilo em Cascata.
Enquanto que HTML é o esqueleto da página, o CSS são os órgãos e
principalmente, a pele, o que dá a aparência, o estilo.
CSS Inline
Todo elemento HTML possui um estilo padrão. A cor dos textos é preta,
e a cor do plano de fundo é branca, só para citar dois exemplos. Alterar
o estilo de um elemento HTML pode ser feito usando o atributo style,
presente em todos elementos.
Nota: sugiro abrir uma página HTML e testar todos os exemplos de estilos
CSS vendo como eles se comportam no navegador. Pode inclusive usar a
index.html que criamos no capítulo anterior.
CSS 142
O atributo style possui a seguinte sintaxe:
ESTILOS DE TEXTO
Nota: todas os valores de cores CSS aceitam literais em Inglês (blue, red,
Código 5.1: disponível em https://www.luiztools.com.br/ebook-frontend-fontes
black, etc) e valores hexadecimais iniciados com # (como #CCCCCC para
cinza claro e #FFFFFF para branco, por exemplo).
CSS 143
Nota: todas as fontes são aceitas pelo CSS, no entanto, uma vez que os
estilos são interpretados client-side, você não deve utilizar fonts que não
existam por padrão nos navegadores e/ou sistemas operacionais de uso
comum. Caso a font que você definiu não exista na máquina do usuário, o
browser irá renderizar como um fonte comum, provavelmente estragando
seu layout.
CSS 144
com propriedades e valores repetidos devemos utilizar classes de estilo,
mais comumente chamadas classes CSS.
Existe uma tag que ainda não utilizamos em nossas lições que é a tag
STYLE. A tag STYLE define um bloco no seu documento HTML onde você
poderá definir os estilos-base da sua página bem como as suas classes
de estilo. A sua utilização é bem semelhante à da tag SCRIPT, ou seja, a
tag STYLE é um contâiner que conterá dentro dela estilos aplicados aos
elementos desta página HTML em específico.
CSS 145
propriedades e valores CSS.
Note que esse estilo será aplicado automaticamente sobre todas tags P
(os parágrafos), sem exceção. Muitas vezes não queremos isso, queremos
que um determinado estilo seja aplicado a todos os parágrafos que
iniciam um novo capítulo, por exemplo. Neste caso, devemos criar uma
classe de estilo, como abaixo.
Código 5.2: disponível em https://www.luiztools.com.br/ebook-frontend-fontes
CSS 146
Note que o atributo class dispensa o ponto do início da classe, colocamos
apenas o nome dela em todos os elementos HTML que quisermos aplicar
seu estilo.
DICAS E TRUQUES
CSS 147
Também podemos definir que um elemento possua mais de uma classe
de estilo, apenas separando o nome das nossas classes por espaços:
Código 5.2: disponível em https://www.luiztools.com.br/ebook-frontend-fontes
O uso de arquivos CSS externos (que nada mais são do que arquivos
de texto com a extensão .CSS), geralmente em uma pasta chamada
‘styles’ ou ‘css’, é preferível uma vez que provavelmente você irá
querer aproveitar os estilos entre mais de uma página HTML da mesma
aplicação web. Com o uso correto de arquivos CSS você pode alterar
a aparência inteira de um website ou sistema web apenas mexendo
CSS 148
em um arquivo, da mesma forma que com arquivos JS alteramos o
comportamento sem mexer no HTML manualmente.
ESTILOS DE CAIXAS
Imagine que todo elemento HTML está dentro de uma caixa. Existem
diversos estilos que podemos aplicar à essa caixa imaginária e vamos
ver alguns logo abaixo.
Exibição
CSS 149
Código 5.3: disponível em https://www.luiztools.com.br/ebook-frontend-fontes
Plano de Fundo
CSS 150
Largura e Altura
Caso queiramos definir uma altura e largura fixa para nossa caixa,
usamos as propriedades width e height, que permitem definir
porcentagens ou tamanho fixo em pixels.
Aqui, todos os parágrafos terão uma borda de 1px preta e sólida ao seu
redor.
CSS 151
Código 5.3: disponível em https://www.luiztools.com.br/ebook-frontend-fontes
CSS 152
Para uma referência completa de todas propriedades CSS e como utilizá-
las, acesse: http://www.w3schools.com/cssref/default.asp
CSS e JavaScript
CSS 153
Código 5.3: disponível em https://www.luiztools.com.br/ebook-frontend-fontes
Note que com o exemplo acima já é possível abrir a sua cabeça para as
possibilidades de manipulação de elementos em lote.
Exercitando
Vamos fazer um exercício bem rápido e simples com CSS, apenas para
ver se você conseguiu entender como CSS funciona. Vamos usar aqui
o mesmo HTML final do capítulo anterior, aquele com o formulário de
cadastro e tabela de listagem.
CSS 154
Nenhuma obra-prima, mas bem mais agradável que o layout anterior na
minha opinião.
E a tabela de clientes:
Nota: não investirei pesado em CSS aqui pois este não é exatamente
um livro de design, algo que requer habilidades além da minha
capacidade enquanto programador. :P
Para avançar mais rapidamente com estilos, sugiro dar uma olhada em
Bootstrap
CSS 155
Você acha que consegue sozinho? Tente!
Comece criando uma pasta css na raiz do seu projeto e dentro dela um
arquivo estilos.css vazio, referenciando-o no HEAD do seu index.html:
Agora dê uma olhada no HTML antigo desse projeto. Notará que algumas
vezes usei o atributo STYLE em algumas tags. Embora isso funcione
perfeitamente, o ideal é não utilizar estilo inline, ou seja, estilos ao
longo do HTML. O mais elegante e correto é colocar todos os estilos em
arquivos CSS, referenciados no HTML, assim como estamos fazendo com
nossos JavaScripts.
CSS 156
Código 5.4: disponível em https://www.luiztools.com.br/ebook-frontend-fontes
Agora, repare no style da TR que fica no THEAD da table. Ele diz que
a cor de fundo desta TR deve ser cinza claro (#CCC é um tom de cinza
claro).
Código 4.5: disponível em https://www.luiztools.com.br/ebook-frontend-fontes
Agora, repare no estilo das colunas dessa TR. A primeira é maior que as
outras, ocupando 50% do tamanho total da tabela. As demais estão com
15% cada, sendo que a última terá o restante que é 20%.
CSS 157
Código 4.5: disponível em https://www.luiztools.com.br/ebook-frontend-fontes
Uma ideia é criando classes CSS para as duas variações que temos (sendo
que a última célula recebe o que sobrar). No entanto, isso fica um tanto
verboso demais no HTML e podemos fazer algo mais elegante usando
alguns recursos do CSS. Remova os estilos daquelas TDs e coloque o
seguinte no seu estilos.css:
Essa é uma notação mais profissional e caso você tenha resolvido com
classes, não há problema.
CSS 158
Primeiro, não é exatamente um estilo mas incomoda: use o atributo
cellspacing da table para remover os espaços entre as células:
Código 5.4: disponível em https://www.luiztools.com.br/ebook-frontend-fontes
Dei uma largura máxima de 50% e alinhei-o à direita, pois isso deixará o
alinhamento de labels e campos mais interessante.
CSS 159
Código 5.4: disponível em https://www.luiztools.com.br/ebook-frontend-fontes
Você vai notar que isso não afeta o select, uma vez que ele não é um
input. Mesmo que você coloque essas mesmas propriedades CSS em
um estilo para o select não vai adiantar pois os navegadores possuem
aparências próprias pra ele. Para conseguir estilizar o select você precisa
primeiro remover o estilo atual dele, como abaixo:
Código 5.4: disponível em https://www.luiztools.com.br/ebook-frontend-fontes
Opa, mas a largura deles está diferente, não? Isso porque o select está
com um width de 53% da largura do contâiner externo. Vamos criar
estilos para a largura dos inputs do formulário também:
Código 5.4: disponível em https://www.luiztools.com.br/ebook-frontend-fontes
CSS 160
Aqui usei um truque de CSS para aplicar um estilo a dois tipos de
componentes diferentes, separados por vírgulas. Assim, todos os textos
(como o campo de nome) e os números (como o campo de idade) terão a
mesma largura, que apesar de ser 3% menor que o select, é visualmente
idêntica.
Mas e os botões? Se você olhar a imagem verá que eles são do mesmo
tamanho. Sendo assim, vamos criar um estilo idêntico para os dois:
Código 5.4: disponível em https://www.luiztools.com.br/ebook-frontend-fontes
Como o btnListar tem id, usamos ele. Já o outro botão tratei como um
submit genérico, visto que é o único na página.
CSS 161
Vamos começar botando um padding para todas as informações das
células ficarem menos coladas em relação às bordas, bem como vamos
centralizar essas informações:
E por fim, a cereja do bolo, vamos colocar um efeito CSS que vai trocar a
cor do fundo de uma linha da tabela quando o mouse estiver passando
por cima dela:
Código 5.4: disponível em https://www.luiztools.com.br/ebook-frontend-fontes
CSS 162
Isso é particularmente útil em tabelas muito grandes, para facilitar a
leitura. Obtemos este efeito de sobreposição graças ao efeito ‘:hover’ que
aplicamos em todas as TRs, definindo uma nova cor de fundo.
Quer fazer um curso online de Desenvolvimento Web FullStack JS com o autor deste
ebook? Acesse https://www.luiztools.com.br/curso-fullstack
CSS 163
SEGUINDO EM FRENTE
“
A code is like love, it has created with clear intentions
at the beginning, but it can get complicated.
- Gerry Geek
“
Este livro termina aqui.
Pois é, certamente você está agora com uma vontade louca de aprender
mais, criar aplicações web incríveis com front-ends maneiras e de
quebra que o deixem cheio de dinheiro na conta bancária, não é
mesmo?
Pois é, eu também! :)
De nada adianta saber muita teoria se você não aplicar ela. Então agora
que terminou de ler este livro e já conhece uma série de formas de
criar páginas web com estas fantásticas tecnologias, inicie hoje mesmo
(não importa se for tarde) um projeto que as use. Caso não tenha
nenhuma ideia, cadastre-se agora mesmo em alguma plataforma de
freelancing. Mesmo que não ganhe muito dinheiro em seus primeiros
projetos, somente chegarão os projetos grandes, bem pagos e realmente
interessantes depois que você tiver experiência.
Caso não tenha gostado tanto assim, envie suas dúvidas, críticas e
sugestões para [email protected] que estou sempre disposto a
melhorar.