Aula 6 - HTML, CSS e Javascript
Introdução ao HTML
O HTML é uma linguagem de marcação que define os elementos de uma página WEB.
HTML não é uma linguagem de programação.
Páginas Web são páginas de Hipertexto que podem conter mídas como imagens, audio e vídeo. Portanto, essas páginas são também conhecidas como páginas de Hipermídia.
Fonte: https://sites.google.com/site/hipertextoufrn/
Páginas Web e HTML
Conteúdos na Web são publicados como páginas Web descritas em uma linguagem especial chamada HTML (Linguagem de Marcação de Hipertexto). Por exemplo, veja um exemplo de uma página Web escrita em HTML abaixo:
Na figura acima temos do lado esquerdo o código HTML e do lado direito a página Web formatada de acordo com as marcações. Clique aqui para ver este exemplo de HTML.
Execute os passos abaixo:
1 - Crie uma pasta chamada minicurso_js;
2 - Abra o editor de texto, copie o código do w3scools e cole;
3 - Salve o arquivo com nome index mudando o tipo para html;
4 - Abra o arquivo no Navegador e verifique o resultado;
Tarefa:
Modifique o código de exemplo para inserir um link para o site do Mozilla no endereço: https://developer.mozilla.org/pt-BR/docs/Web/HTML/HTML5.
Adicione uma nova imagem ao código de exemplo
Salve e atualize a página o navegador.
CSS (Cascading Style Sheets)
Assim como o HTML, o CSS não é uma linguagem de programação. O CSS é uma linguagem de marcação que permite a estilização de elementos do HTML. Por exemplo, se quisermos selecionar os parágrafos de uma página HTML e colocar os textos em vermelho, devemos adicionar o seguinte código:
p {
color: red;
}
1 . Retorne ao editor de texto e insira uma tag <style> </style> dentro da tag <head> </head>
2. Digite o código acima entre as tags <style> </style>
Podemos adicionar todas as marcações css em um arquivo aparte com extensão .css. Por exemplo, style.css. Após isso, para carregá-lo no documento HTML basta inserir a seguinte tag entre as tags <head> </head>:
<link href="style.css" rel="stylesheet">
3. Salve o arquivo e recarregue no navegador.
Anatomia do CSS:
Seletor
O nome do elemento HTML ao qual você deseja aplicar uma regra, que, por exemplo, altera a propriedade color para red. No caso acima, o selector seleciona ou "busca" todos os elementos HTML <p> (parágrafos) para aplicar a regra de mudança de cor para vermelho.
Declaração
Declarações são regras simples do tipo propriedade: valor; que alteram uma propriedade ou característica de uma elemento HTML, como color: red;
Propriedades
Uma propriedade é uma característica de um elemento HTML. Por exemplo, a propriedade color é uma característica que pertence à elementos do tipo parágrafo <p>.
Valor da propriedade
Enquanto a propriedade é uma característica de um elemento HTML, como cor ou largura, valores são os possíveis valores (estados) que estas propriedades podem assumir, como vermelho. Valores são sempre especificados após o ":" da regra. Veja os exemplos:
- color: red;
- color: blue;
- width: 300px; traduzindo... largura: 300 pixels
- height: 500px; traduzindo... altura: 500 pixels
4. Adicione também as seguintes regras:
p {
color: red;
width: 500px;
border: 1px solid black;
}
Repare que o conjunto de regras para um elemento é delimitado pelas chaves ( "{" "}").
Podemos também selecionar multiplos elementos da seguinte forma:
p, li, h1 {
color: red;
}
Referências e Continuação
Este exemplo foi baseado no tutorial oficial do Mozilla Firefox. Clique aqui para dar prosseguimento a este exemplo.
Introdução ao Javascript
Javascript é uma linguagem de programação própria para executar em navegadores. As principais características são:
- Dinâmica e Interpretada:
- Cada instrução de um código Javascript é interpretado no momento da sua execução. Ao contrário de linguagens como Java, C e C++, que precisam ser compiladas em um código objeto antes de sua execução.
- os tipos de variáveis são definidos no momento da atribuição dos valores.
- Orientada a Objetos: este é um paradigma que permite a estruturação de um programa em classes, contendo dados e funções, e objetos. A principal vantagem da orientação a objetos concentra-se no potencial de reuso de códigos, viabilizada por técnicas de herança e polimorfismo.
- A funcionalidade de prototyping permite a construção de classes em javascript.
- Programação Funcional: Javascript permite a manipulação de funções como objetos de primeira ordem, permitindo sua composição e passagem por parâmetros de forma natural
- Javascript é diferente de Java.
Tarefa: Construir um Jogo de Adivinhação
Crie um novo arquivo no editor de textos, copie o código abaixo, cole no editor de texto e salve com nome jogo_adivinhar.html.
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>Jogo de Adivinhação</title>
<style>
html {
font-family: sans-serif;
}
body {
width: 50%;
max-width: 800px;
min-width: 480px;
margin: 0 auto;
}
.ultimoResultado {
color: white;
padding: 3px;
}
</style>
</head>
<body>
<h1>Adivinhe o número que estou pensando</h1>
<p> Selecionamos um número entre 1 e 100. Veja se você consegue adivinhar em até 10 tentativas. Vou informá-lo seu chute está muito alto ou muito baixo</p>
<div class="form">
<label for="campoChute">Digite seu Chute: </label><input type="text" id="campoChute" class="campoChute">
<input type="submit" value="Enviar" class="chuteSubmit">
</div>
<div class="resultado">
<p class="chutes"></p>
<p class="ultimoResultado"></p>
<p class="altoOuBaixo"></p>
</div>
</body>
<script>
// Seu JavaScript vai aqui
</script>
</html>
Declarando Variáveis
Copie o código abaixo entre as tags <script> </script>.
let numAleatorio = Math.floor(Math.random() * 100) + 1;
const chutes = document.querySelector('.chutes');
const ultimoResultado = document.querySelector('.ultimoResultado');
const altoOuBaixo = document.querySelector('.altoOuBaixo');
const chuteSubmit = document.querySelector('.chuteSubmit');
const campoChute = document.querySelector('.campoChute');
let chuteCont = 1;
let botaoReset;
Esta seção inicializa variáveis e constantes para armazenar dados que nosso programa irá processar. Isso é realizado pela palavra chave let (ou var). Constantes são declaradas pela palavra const e são usadas para armazenar valores que não são modificados. As constantes são utilizadas para armazenar referências à elementos da interface.
O operador "=" atribui um valor a uma variável ou constante.
No código HTML acima, observe:
- A primeira variável - numAleatorio - recebe um valor entre 1 e 100, calculado por um algoritmo de geração de números aleatórios
- As primeiras três constantes armazenam referências aos parágrafos que fazem parte da seção de resultados no HTML. Todos os parágrafos do resultado estão dentro de uma tag <div>:
<div class="resultado">
<p class="chutes"></p>
<p class="ultimoResultado"></p>
<p class="altoOubaixo"></p>
</div>
- As constantes seguintes armazenam referências à caixa de texto do formulário e ao botão de submissão do mesmo:
<div class="form">
<label for="campoChute">Digite seu Chute: </label><input type="text" id="campoChute" class="campoChute">
<input type="submit" value="Enviar" class="chuteSubmit">
</div>
- As últimas variáveis armazenam uma contagem de chutes e uma refência ao botão de reset, que ainda vamos adicionar.
- <<inserir referência para conteúdos mais detalhados sobre variáveis>>
Brincando com Objetos e Métodos
Um objeto é uma estrutura em memória que possui propriedades e métodos (funções pertinentes aos objetos). Vamos abrir o console Javascript e digitar alguns comandos:
Propriedades
São variáveis pertencentes a um objeto que representam alguma característica dele. Por exemplo, os objetos do tipo <p> possuem uma propriedade chamada textContent que armazena seus respectivos textos.
Agora vá até o campo de chute e digite um valor qualquer.
Acesse o console e digite: chutes.textContent
O resultado deve ser a String vazia, pois, não há nenhum texto ainda.
Agora digite: chutes.textContent = "texto fake"
Verifique que o conteúdo textual do prágrafo foi modificado. Digite chutes.textContent e veja no console o valor atribuído.
Métodos
1 - Digite: campoChute.focus()
Este comando muda o foco da tela para este campo. A variável campoChute contém uma referência para um objeto do tipo <input>. Quando digitamos .focus(), Chamamos uma função pertinente a este objeto que muda o foco da interface para si mesmo. Funções pertinentes a tipos específicos de objetos, como <input>, são chamadas de métodos.
Métodos Parametrizados
1 - Digite: let campoChute = doument.querySelector('.campoChute')
Todo documento HTML é referenciado pela variável document. O método querySelector( StringConsulta ) recebe uma String de seleção por parâmetro e retorna uma referência para o elemento correto. Este elemento, então, é armazenado na variável campoChute. Neste caso, a String '.campoChute' significa o seguinte "Selecione o elemento HTML que possui a classe campoChute".
Funções
Vamos escrever nossa primeira função:
function checarChute() {
alert("Eu verifico a validade de um chute!")
}
Funções são blocos de código reusáveis. Você escreve apenas uma vez e utiliza em várias partes do seu programa apenas chamando pelo seu nome. Com isso, você não precisa reescrever o mesmo código todas as vezes que precisar dele.
Em Javascript há várias maneiras de se definir uma função. A maneira mais simples é utilizar a palavra chave function seguida do nome da função e dos parênteses. Após isso utilizamos as chaves ({ }) para delimitar as variáveis e instruções que pertencem a essa função. No nosso caso apenas mostramos uma mensagem na tela com a função alert.
<<explicar a função alert>>
Vamos testar a nossa função. Salve o seu código e atualize o seu navegador. Agora, acesse o menu "Mais Ferramentas e Ferramentas do Desenvolvedor".
Obs. No Firefox você deve acessar "Ferramentas do Desenvolvedor, Console Javascript".
No Console Javascript, digite o código e pressione ENTER:
checarChute();
Após isso, você deve ver a mensagem que digitamos como parâmetro da função alert.
Repare que, basta digitarmos o nome da função seguida dos parênteses em qualquer parte do nosso programa para que ela passe a executar.
Vamos dar uma olhada agora nos operadores aritméticos: veja a tabela abaixo
Operator | Name | Example |
---|---|---|
+ |
Soma | 6 + 9 |
- |
Subtração | 20 - 15 |
* |
Multiplicação | 3 * 7 |
/ |
Divisão | 10 / 5 |
O operador de soma é utilizado de forma diferente no caso de valores literais ou strings, ele realiza a junção de Strings. Isso é conhecido como concatenação. Digite o código abaixo no console e verifique o resultado:
let nome = 'Hulk';
nome;
let fala = ' smash!';
fala;
let cumprimento = nome + fala;
cumprimento;
Você pode também utilizar alguns atalhos, veja o quadro abaixo:
nome += ' smash!';
é equivalente à:
nome = nome + ' smash!';
Veja os operadores de comparação abaixo:
Operador | Nome | Exemplos |
---|---|---|
=== |
Igualdade estrita (É exatamente igual a?) |
|
!== |
Desigualdade (É diferente de?) |
|
< |
Menor que |
|
> |
Maior que |
|
Além desses, temos o maior ou igual >= e o menor ou igual <=.
Estruturas Condicionais
Retornando à nossa função checarChute(). Vamos modificar o nosso código para efetivamente checar se o chute do jogador é correto ou não.
Neste momento, substitua sua função checarChute() para a versão apresentada a seguir:
function checarChute() {
let chute = Number(campoChute.value);
if (chuteCont === 1) {
chutes.textContent = 'Chutes anteriores: ';
}
chutes.textContent += chute + ' ';
if (chute === numAleatorio) {
ultimoResultado.textContent = 'Parabéns! Você acertou!';
ultimoResultado.style.backgroundColor = 'green';
altoOuBaixo.textContent = '';
setFimDeJogo();
} else if (chuteCont === 10) {
ultimoResultado.textContent = '!!!Você Perdeu!!!';
setFimDeJogo();
} else {
ultimoResultado.textContent = 'Você errou!';
ultimoResultado.style.backgroundColor = 'red';
if(chute < numAleatorio) {
altoOuBaixo.textContent = 'O último chute foi muito baixo!';
} else if(chute > numAleatorio) {
altoOuBaixo.textContent = 'O último chute foi muito alto!';
}
}
chuteCont++;
campoChute.value = '';
campoChute.focus();
}
Vamos decifrar esse código alienígena agora!
- A primeira linha declara uma variável chamada chute que recebe o número que o usuário digitou no campo de texto. Nós também utilizamos a função de construção de objetos da classe Number( ) para garantir que o valor atribuído é verdadeiramente um número e não um valor tipo Char ou String.
- Na linha seguinte temos um bloco de código condicional. O bloco condcional executa a sequência de comandos seletivamente. Se a condição for avaliada como verdadeira, os comandos são executados. Se a condição for falsa, a execução é desviada para a próxima instrução ao final do bloco.
- No bloco if acima, estamos testando se é a primeira tentativa ou não deste jogador, que equivale a testar se a variável é igual a 1 ou não. Caso seja, nós colocamos o texto "Chutes anteriores: " no parágrafo referenciado pela variável chutes.
- O próximo bloco condicional (iniciando na linha 8) testa se o jogador acertou o número comparando se a variável chute é igual a variável numAleatório, que contém o número que o programa selecionou. Veja abaixo
if (chute === numAleatorio) {
ultimoResultado.textContent = 'Parabéns! Você acertou!';
ultimoResultado.style.backgroundColor = 'green';
altoOuBaixo.textContent = '';
setFimDeJogo();
}
- No código acima, se o usuário acertou o chute (chute===numAleatorio), nós adicionamos o texto "Parabéns! Você acertou!" no parágrafo referenciado pela variável ultimoResultado:
ultimoResultado.textContent = 'Parabéns! Você acertou!';
- Além disso, modificamos a cor de fundo para verde utilizando a propriedade style do parágrafo.
ultimoResultado.style.backgroundColor = 'green';
- Após isso, removemos o conteúdo do parágrafo que contém a dica de muito alto ou muito baixo, referenciado pela variável altoOuBaixo. Por fim, chamamos uma função para finalizar o jogo que ainda vamos implementar:
altoOuBaixo.textContent = '';
setFimDeJogo();
O que acontece quando o jogador erra o chute?
Nas linhas seguintes, utilizamos o comando else seguido do comando if{ }. Caso o jogador erre e a condição chute === numAleatorio do if seja avaliada como falsa, o bloco do comando else (senão), é executado.
else if (chuteCont === 10) {
ultimoResultado.textContent = '!!!Você Perdeu!!!';
setFimDeJogo();
}
O bloco else if { ...} acima realiza um novo teste e verifica se a quantidade de chutes do jogador é igual a 10. Se isso ocorrer, colocamos a mensagem "!!!Você Perdeu!!!" no parágrafo do último resultado e finalizamos o jogo chamando novamente a função setFimDeJogo().
<<quadro explicar ifs e elses encadeados ou aninhados>>
else if (chuteCont === 10) {
ultimoResultado.textContent = '!!!Você Perdeu!!!';
setFimDeJogo();
}
E se o jogador errou, mas, ainda não atingiu o limite de chutes?
Para este caso, adicionamos mais um bloco else { ... } encadeado ao último bloco if (chuteCont === 10) {...}. Veja abaixo:
else {
ultimoResultado.textContent = 'Você errou!';
ultimoResultado.style.backgroundColor = 'red';
if(chute < numAleatorio) {
altoOuBaixo.textContent = 'O último chute foi muito baixo!';
} else if(chute > numAleatorio) {
altoOuBaixo.textContent = 'O último chute foi muito alto!';
}
}
Neste bloco, colocamos o texto "Você errou!" no parágrafo do último resultado. Em seguida, mudamos a cor de fundo do parágrafo para vermelho e verificamos se o chute é muito alto ou muito baixo utilzando um novo bloco if {...} else if { ... }.
E as dicas de chute muito alto ou baixo?
Essa parte é tratada pelo bloco abaixo:
if(chute < numAleatorio) {
altoOuBaixo.textContent = 'O último chute foi muito baixo!';
} else if(chute > numAleatorio) {
altoOuBaixo.textContent = 'O último chute foi muito alto!';
}
O primeiro bloco if ( chute < numAleatorio ){ ... } testa se o número digitado pelo jogador é menor que o número aleatório gerado. Se isso acontecer, colocamos o texto "O último chute foi muito baixo!" no parágrafo da dica do jogo, referenciado pela variável altoOuBaixo. Caso contrário, o bloco else if{...} é executado e o programa efetua um novo teste verificando se o chute é maior do que o número aleatório gerado. Caso este último teste retorne verdadeiro, colocamos a dica de chute muito alto no parágrafo.
Tratando Eventos
Neste ponto, temos uma implementação da função checarChute() mas ela ainda não está funcionando. Precisamos atrelar a execução da função ao evento de clique do botão. Adicione o seguinte código abaixo da função checarChute():
chuteSubmit.addEventListener('click', checarChute);
O código acima adiciona um "escutador" de eventos, conhecido como Event Listener, para o evento de clique do botão de envio do chute. Event Listeners escutam eventos realizados na interface, como o clique de um botão por exemplo.
A função addEventListener acima, recebe dois valores de entrada, chamados argumentos.O primeiro é o tipo de evento, como o "click" do botão, o segundo argumento é a função que deve ser executada quando o evento ocorrer. No nosso caso, queremos que a cada clique do botão, a função checarChute() entre em ação para avaliar o valor digitado pelo usuário.
Agora, salve o seu código e teste o seu exemplo. O único problema que você deve encontrar é quando a função setFimDeJogo() for chamada. Como ela não existe ainda, isso vai "quebrar" o seu código.
Dica 1: declare uma função com um parâmetro de entrada. Exemplo: function enterPressionado(evento){ }
Dica 2: utilize a propriedade keyCode para obter a tecla de um evento
Dados: número da tecla ENTER: 13;
Finalizando o Jogo
Vamos implementar a função setFimdeJogo() ao final do nosso código e, após isso, vamos passear por cada parte. Adicione o código abaixo ao seu script:
function setFimDeJogo() {
campoChute.disabled = true;
chuteSubmit.disabled = true;
botaoReset = document.createElement('button');
botaoReset.textContent = 'novo jogo';
document.body.appendChild(botaoReset);
botaoReset.addEventListener('click', resetarJogo);
}
- As primeiras duas linhas desabilitam a caixa de texto e o botão de envio atribuindo valor lógico true à propriedade disabled dos elementos. Isso é necessário, pois, não queremos que o jogador envie mais chutes.
- As próximas três linhas criam o botão de resetar, que nada mais é do que um elemento <button> do HTML com rótulo "novo jogo". A função createElement() da constante document é utilizada para criar novos elementos no HTML em tempo de execução.
- As linhas finais adicionam um Event Listener ao novo botão criado de forma que, quando o jogador clicar nele, a função resetarJogo() execute.
Agora, vamos definir a função resetarJogo( ). Adicione o código abaixo ao final do seu script:
function resetarJogo() {
chuteCont = 1;
const paragrafosRes = document.querySelectorAll('.resultado p');
for (let i = 0 ; i < paragrafosRes.length ; i++) {
paragrafosRes[i].textContent = '';
}
botaoReset.parentNode.removeChild(botaoReset);
campoChute.disabled = false;
chuteSubmit.disabled = false;
campoChute.value = '';
campoChute.focus();
ultimoResultado.style.backgroundColor = 'white';
numAleatorio = Math.floor(Math.random() * 100) + 1;
}
O bloco de código que acabamos de adicionar tem a função de colocar o jogo no estado inicial, resetando todas as variáveis. Vamos dar uma olhada mais a fundo:
- Reseta a variável chuteCont para valor 1 (primeiro chute)
- Limpa todos os parágrafos da seção de resultados dentro de <div class= "resultado"></div>. Para isso, primeiro selecionamos todos os parágrafos dentro da div de resultados usando o comando abaixo:
Este comando retorna um vetor ou uma lista de parágrafos que é armazenada na variável paragrafosRes. Caso você não esteja familiarizado, veja o quadro abaixo para uma breve introdução aos vetores.
Vetores
Imagine que você precisa armazenar em memória uma lista de temperaturas enviadas por um sensor. Para isso, você poderia utilizar uma variável multivalorada chamada Vetor. Um vetor nada mais é do que uma variável que pode armazenar vários valores, cada um em uma posição distinta. Abra o console Javascript do seu navegador e digite cada linha do código abaixo e teclando ENTER. Repare nas explicações:
Importante!
Em um vetor, a primeira posição é sempre acessada pelo índice 0, enquanto, a última é sempre a de índice tamanhoVetor - 1. No nosso exemplo, a primeira posição é acessada escrevendo temperaturas[0] e a última temperaturas[4], ou seja, 5 - 1.
Atribuição
Se quisermos atribuir algum valor a uma posição específica do vetor podemos utilizar o índice acompanhado do operador de atribuição "=". Veja exemplos abaixo:
temperaturas[0] = 38.7
temperaturas[2] = 29.5
Os comandos acima atribuem as temperaturas 38.7 e 29.5 nas posições 0 e 2 do vetor temperaturasLaços for (for Loops)
Um laço, também chamado de loop, é uma estrutura que permite a execução repetida de um ou vários comandos. Vá ao seu console Javascript e execute o seguinte:
for (var i = 1 ; i < 21 ; i++) { console.log(i) }
Repare que os números de 1 a 20 foram exibidos. Cada loop for utiliza três argumentos separados por ";"
1 - valor inicial para uma variável de contagem: i = 1 (variável de contagem i começa com 1
2 - condição de parada das repetições: i < 21 (executa enquanto o i for menor que 21)
3 - Incremento ou Decremento: i++ (significa incremento de uma unidade a cada repetição)
No nosso programa, para percorrer todos os elementos do vetor paragrafosRes, utilizamos um laço for(){ }, onde, a variável contadora i é utilizada para contar de 0 até 5. Essa variável é, então, utilizada para obter cada parágrafo na lista paragrafosRes.
Traduzinfo para o Português, o código acima quer dizer o seguinte:
Laço for em Português
Para i de 0 até 4 faça:
Obtenha o parágrafo de índice i;
Atribua a String vazia (' ') à sua propriedade textContent;
- A próxima linha eemove o botão de reset da tela acessando o elemento pai do botão e removendo-o de sua lista de filhos. Veja a anatomia deste comando abaixo.
Para entender o comando, precisamos primeiro dar uma olhada em como o navegador interpreta as marcações HTML. Ao interpretar o seu código, o navegador gera uma instância do Document Object Model (DOM). O DOM organiza cada elemento do HTML em uma hierarquia de pais e filhos. Por exemplo, uma parte do DOM do código HTML do nosso jogo pode ser representado da seguinte maneira:
Desse modo, se quisermos acessar o pai de qualquer elemento (elemento acima na hierarquia) devemos utilizar a propriedade parentNode. Agora, se quisermos obter uma lista (vetor) de filhos de um elemento, podemos utilizar a propriedade children. Você pode visualizar o DOM utilizando o painel de elementos das Ferramentas do Desenvolvedor.
Os próximos comandos mudam o foco para a caixa de texto, muda a cor de fundo para Branco e gera um novo número aleatório.
Créditos e Continuação
Este minicurso e seus exemplos é uma adaptação do tutorial Um primeiro mergulho no Javascript. Disponível em https://developer.mozilla.org/pt-BR/docs/Learn/JavaScript/First_steps/A_first_splash. O presente documento também contém partes do curso Aprendendo a Web. Diposnível em: https://developer.mozilla.org/pt-BR/docs/Aprender.
Caso você queira se aprofundar mais nos assuntos discutidos, acesse o curso Aprendendo a Web, desenvolvido pelo Mozilla. Disponível em: https://developer.mozilla.org/pt-BR/docs/Aprender