HTML e CSS
2.1 O que é HTML?
2.2 Visual Studio Code
2.3 DOM
2.4 Mais exemplos e novas tags
2.5 Importância do HTML semântico
CSS
3.1 O que é CSS?
3.2 Propriedades
3.3 Seletores
3.4 Herança
3.5 Design Responsivo
JavaScript
4.1 Alguns exemplos
4.2 Documment Object Model (DOM)
4.3 Manipulando o DOM
GIT
5.1 Definição
5.2 Instalação
5.3 Criar repositório remoto e local
5.4 Salvar e atualizar um repositório
5.5 Hospedar sua página
Nessa aula vamos mergulhar no design implementação de aplicativos da web. Teremos a oportunidade de discutir e explorar muitas das ideias, ferramentas e linguagens que são fundamentais para a programação da web moderna. E por meio de projetos práticos, você terá a oportunidade de colocar essas ideias em prática, projetando seus próprios aplicativos da web, culminando em um projeto final de sua escolha.
Cobriremos vários tópicos nesse mundo da programação web, começando com HTML5 e CSS3, duas das linguagens que são fundamentais para a compreensão das páginas da web. HTML é uma linguagem que usaremos para descrever a estrutura de uma página da web, e CSS é a linguagem que usaremos para descrever o estilo de uma página, as cores e as fontes, os layouts e os espaçamentos que fazem a página da web parecer exatamente da maneira que queremos que seja.
A seguir, veremos o JavaScript e como podemos rodá-lo nos navegadores dos usuários para tornar as páginas da web um pouco mais interativas. Em particular, usaremos o JavaScript no contexto de interfaces do usuário, olhando para interfaces de usuário modernas e explorando como é que essas interfaces funcionam, e como podemos desenvolver essas interfaces de usuário nas nossas aplicações.
E por fim, vamos voltar nossa atenção para o GIT, uma ferramenta não específica para programação web em si, mas que podemos usar para controlar a versão de nossos programas. Para acompanhar as diferentes mudanças que fazemos em nossos programas da web, e para nos permitir trabalhar em várias partes diferentes da aplicação web ao mesmo tempo antes de mesclar essas peças novamente.
O HTML ou HyperText Markup Language (que significa Linguagem de Marcação de Hipertexto), é uma linguagem que podemos usar para descrever a estrutura da página da web, todos os botões, textos, formulários e outras partes da página da web que o usuário finalmente vê e com quem interage.
Nossa primeira página HTML será mais ou menos assim:
Será um código baseado em texto que escrevemos para um navegador da web, como o Google Chrome, Firefox ou Safari, que é capaz de olhar, analisar, entender, e exibir esse conteúdo para o usuário.
Então vamos dar uma olhada nessa página (o código na Figura 1), uma linha de cada vez, e entender como funciona. Mesmo que você não entenda muito bem toda essa sintaxe, provavelmente tem algumas coisas que se destacam. É possível notar a palavra titulo (title), que provavelmente reflete o título da página web, que nesse caso parece ser a palavra "Introcomp".
E mais abaixo, vemos que temos o corpo (body) da página web, que parece conter as palavras "Hello, World!". Então como essa página da web realmente se parecerá? Já já vamos dar uma olhada!
Vamos prosseguir e abrir um editor de texto. Você pode usar qualquer editor de texto que preferir, mas para esta aula vou utilizar o Visual Studio Code (vscode) da Microsoft. Pois ele permite baixar uma extensão que atualizará nossa aplicação no navegador web toda vez que alterarmos o código. Para baixar o vscode, basta clicar nesse link.
Depois de baixado e instalado o vscode no computador, abra ele e veja que na lateral esquerda existem uns icones parecidos com esses:
Clique naquele último ícone (que são uns quadradinhos), igual mostrado na Figura 2. Será aberta uma barra de busca para as extensões. Pesquise por "Live Server". Selecione o primeiro que aparecer e instale, como mostrado na Figura 3.
Por garantia, feche e abra o Vscode novamente, para que a extensão seja adicionada corretamente. Dentro do seu computador crie uma pasta para a aula de hoje, eu chamei a minha de "Introcomp_Aula_8". No Vscode, no canto superior esquerdo em "file" clique em "open" e abra a pasta que você acabou de criar. Você verá que sua pasta aparecerá, como mostra a Figura 4.
Embaixo do nome da pasta, clique com o botão direito e selecione "new file". Salve como "hello.html". Dentro do arquivo que acabamos de criar, vamos escrever o código da primeira página que tínhamos feito, como mostrado na Figura 5.
Salve o código, e aperte as teclas "control" + "shift" + "p" e escreva "Live Server: Open with Live Server", como mostrado na Figura 6. Ao clicar uma página no seu navegador será aberta contendo "Hello, world!", a Figura 7 mostra exatamente isso. Acabamos de fazer o nosso primeiro programa web!
Note que na aba se encontra o "title" escrito Introcomp e na página, que contém o "body", tá escrito "Hello, world". Agora experimente a vantagem de se utilizar a extensão Live Server do Vscode. Altere o texto "Hello, world!" por outra coisa e salve o arquivo ("control" + "s"). Instantaneamente a página no navegador é alterada, sem precisar apertar F5 ou recarregar a página.
Agora que fizemos nosso primeiro programa pra web, vamos dar uma olhada mais detalhada no código e como ele está funcionando. Aqui está o nosso código:
<!DOCTYPE html>
<html lang="pt-BR">
<head>
<title>Introcomp</title>
</head>
<body>
Hello, world!
</body>
</html>
Na primeira linha, <!DOCTYPE html>, é o que podemos chamar de declaração DOCTYPE, que é uma maneira de dizer ao navegador qual versão do HTML estamos usando nessa página web. Porque dependendo da versão do HTML, o navegador pode mostrar coisa diferentes. Mas basicamente essa linha serve para dizer ao nosso navegador que estamos usando HTML, e que no nosso caso é a versão do HTML mais recente, o HTML5.
Nossa página HTML é estruturada como uma série de elementos HTML alinhados, em que um elemento descreve algo na página. E podemos ter elementos que estão dentro de outros elementos. Cada um desses elementos é indicado pelo que vamos chamar de tag HTML, delimitada pelos sinais "<" e ">". Bem nessa linha <html lang="pt-BR"> vemos o início do conteúdo de nossa página, indicando ainda, por meio de um atributo, que a linguagem dela é pt-BR. E lá no final, </html> indica que é o fim do contúdo HTML da página.
No meio está o contúdo real da página, que pode incluir outros elementos HTML. A parte do "head" contém informações que serão importantes para nossa página web, mas que não vão aparecer no parte principal, como o título na aba da página. Veja que em "head" a gente utiliza uma outra tag dentro para referencia o título, que é a <title>.
Em seguida vem o corpo da página, novamente, indicado por uma tag <body> e que termina com </body>, indicando o fim do corpo. Essa será a parte visível para o usuário, e que no nosso caso está com o texto Hello, world!. E isso é tudo que realmente há nessa página HTML.
E se você quiser pensar visualmente sobre como todos os elementos HTML são estruturados, às vezes pode ser útil pensar em uma estrutura semelhante a uma árvore. Nós chamamos essa árvore de modelo de objeto de documento ou DOM. Na Figura 8 está o exemplo DOM dessa página HTML que fizemos.
Na parte esquerda temos o HTML que acabamos de ver e na parte direita está o DOM, a estrutura em forma de árvore que descreve como todos os elementos HTML estão relacionados entre si. Portanto, começamos lá em cima com o elemento HTML, e esse elemento "pai", por assim dizer, tem dois elementos filhos dentro dele. Um elemento é o "head" e o outro é o "body" e assim por diante. Notem a semelhança entre essa árvore DOM e nosso código. Agora observe uma coisa interessante! A identação não é obrigatória aqui, como é em python, mas ajuda a identificar as partes do seu código quando alguém for ler ele. Então o DOM nos ajuda a entender as partes do nosso código, saber qual tag está dentro de qual elemento, o que vai nos ajudar bastante quando usarmos JavaScript.
Vamos criar um novo projeto e chamá-lo de headings.html. E a estrutura dessa página vai ser bem semelhante da página que fizemos "Hello, world!", portanto vamos usar aquele código como base aqui. Vamos alterar o "title" para "Headings". Agora dentro do "body" vai ficar um pouco diferente. Vamos usar um elemento h1 e dizer "Esse é o segundo exemplo de código". Então o código e o resultado ficarão iguais ao da Figura 9. Vejam que a tag h1 nos permite criar um grande título no topo da página.
Podemos fazer títulos de diferentes tamanhos. Quando escrevemos h1 quer dizer que estamos pegando o maior título, e conforme vamos utilizando h2, h3, até h6 os títulos vão ficando menores. Vamos modificar o nosso código para testar isso, deixando-o assim:
<!DOCTYPE html>
<html lang="pt-BR">
<head>
<title>Headings</title>
</head>
<body>
<h1>Título com h1</h1>
<h2>Título com h2</h2>
<h3>Título com h3</h3>
<h4>Título com h4</h4>
<h5>Título com h5</h5>
<h6>Título com h6</h6>
</body>
</html>
O nosso resultado será igual ao da Figura 10. Utilizar diferentes tamanhos de títulos pode ser bem útil quando fazemos seções e subseções nas nossas páginas.
Agora vamos olhar outros exemplos de elementos que podemos usar. Nas páginas da web, vemos não apenas títulos e não apenas textos, mas também podemos ver listas, por exemplo. Se você já usou um programa de lista de tarefas em uma páginas da web, por exemplo, você vê uma lista de coisas que precisa fazer ou lista de informações.
E acontece que o HTML tem dois tipos básicos de listas. Ordenamos listas de coisas que estão em uma ordem específica, como item número 1, item número 2, item número 3 e assim por diante. E temos listas não ordenadas para itens que não têm uma ordem particular. Portanto, apenas são adicionado pontos e o item em si, sem um número na frente. E ambos são muito fáceis de usar.
Vamos criar um novo arquivo e chamá-lo de listas.html. Novamente, vamos copiar o código do hello.html para ele, mudar o "title" para "Listas" e apagar o "Hello, world!" do "body". Primeiro vamos fazer uma lista ordenada, algo que tem números "1, 2, 3...". Para isso vamos usar um elemento tag chamado ol e dentro dele vamos precisar de um novo elemento para cada item da lista. Para cada item vamos usar uma tag chamada li. Nosso código ficará assim:
<!DOCTYPE html>
<html lang="pt-BR">
<head>
<title>Listas</title>
</head>
<body>
<ol>
<li>Primeiro item</li>
<li>Segundo item</li>
<li>Terceiro item</li>
</ol>
</body>
</html>
E o resultado no nosso navegador pode ser observado na Figura 11. Note que por ser uma lista ordenada, os números aparecem conforme vamos adicionando itens na lista, portanto não é necessário escrevê-los manualmente.
Vemos então que apareceu uma lista ordenada que vai do 1 ao item 3. Observe que não precisamos escrever esses números em lugar nenhum do nosso HTML, isso acontece porque quando o navegador percebe que precisa adicionar uma lista ordenada, ele automaticamente adiciona os números na frente.
Agora vamos fazer uma lista não ordenada. Utilizando o mesmo código, veja que para fazer uma lista ordenada escrevemos ol, para uma lista não ordenada vamos escrever ul. Nosso código ficará assim:
<!DOCTYPE html>
<html lang="pt-BR">
<head>
<title>Listas</title>
</head>
<body>
<ol>
<li>Primeiro item</li>
<li>Segundo item</li>
<li>Terceiro item</li>
</ol>
<ul>
<li>Um item</li>
<li>Outro item</li>
<li>Mais outro item</li>
</ul>
</body>
</html>
E o resultado ficará como na Figura 12.
Então uma lista ordenada terá seus respectivos números e uma lista não ordenada terá apenas esses marcadores indicando que se trata de uma lista.
Agora vamos explorar outros tipos de páginas da web que podemos criar usando outros tipos de elementos HTML. Além de listas, uma das coisas mais importantes da web não é apenas exibir textos, mas também exibir outros tipos de mídias, como imagens. E como podemos fazer isso?
Vamos voltar ao nosso editor e criar outro arquivo chamado "image.html" que conterá algum código para exibir imagens. Vamos copiar o texto base do primeiro código para esse arquivo, subistituir o "title" para Image, e dentro do "body" adicionaremos uma nova tag chamada "img".
Essa tag "img" tem alguns atributos que são obrigatórios. Em particular, quando é exibido uma imagem na página, é preciso especificar qual imagem queremos exibir. Portanto, podemos especificar usando src, que é uma abreviação de "source" (fonte). Podemos passar a imagem de duas formas, ou copiamos uma imagem para dentro da pasta que contém o nosso arquivo "image.html", ou copiamos um link de uma imagem da internet. Outro atributo necessário dentro de "img" é o alt contendo um nome alternativo para imagem, caso o navegador não consiga renderizar ela. Nosso código ficará como na Figura 13, mas note que baixamos uma imagem (chamada introcomp.jpeg) e colocamos ela dentro da pasta.
Ou se não quiser baixar uma imagem seu código pode ficar igual esse daqui de baixo. Ele possui um link para uma imagem que está na internet. Os dois códigos funcionarão da mesma forma e mostrarão o mesmo resultado.
<!DOCTYPE html>
<html lang="pt-BR">
<head>
<title>Image</title>
</head>
<body>
<img src="https://avatars1.githubusercontent.com/u/51423388?s=280&v=4" alt="INTROCOMP" />
</body>
</html>
O resultado está exibido na Figura 14.
E como podemos aumentar ou diminuir essa imagem? Bem, veremos melhor como fazer isso na parte de CSS, mas por enquanto podemos adicionar outro atributo na tag de imagem, chamado de width e passar a quantidade de pixels que queremos que nossa imagem tenha de largura. Nossa tag ficará assim: <img src="introcomp.jpeg" alt="INTROCOMP" width="100"/> indicando que a imagem terá 100 pixels de largura. Note na Figura 15 como que o tamanho da imagem reduziu bastante. Se quiser aumentar é só mudar o valor de width para o que desejar.
Tudo o que utilizamos até aqui foi HTML semântico. Por exemplo, na hora que escrevemos <h1></h1> estamos dizendo ao nosso navegador que isso será um título, mas poderiamos fazer a mesma coisa usando uma <div></div>. As "div" são divisões ou um espaço da tela que será utilizado para mostrar algo, e o seu tamanho pode ser difinido passando algumas propriedades na tag, como "width" ou um style para alterar a largura, por exemplo.
Não só o título, mas quase tudo o que queremos ou precisamos mostrar na tela para um usuário pode ser feito utilizando a tag "div". Se podemos fazer quase tudo usando "div", por que devemos utilizar as outras tags?
Bem, existem algumas vantagens de se utilizar o HTML semântico. A primeira é que quando utilizamos as tags que correspondem com aquilo que queremos mostrar, como títulos, imagens, listas e entre outros, facilita muito na hora que outro programador ou até mesmo você precisar fazer manutenção no código, pois tudo vai estar bem estruturado. A outra vantagem é que ajuda muito nos mecanismos de leituras de telas e buscadores, o que poderá ser muito útil, por exemplo, para pessoas com deficiências que utilizam softwares para ler o conteúdo das telas.
Prosseguindo com nossa aula, falaremos sobre o CSS ( Cascading Style Sheet), que é a linguagem que usamos para a estilização dos nossos componentes baseada no conceito de cascata (veremos mais à frente).
Podemos estilizar nossos elementos no próprio arquivo HTML (como mostrado acima ) ou através de uma tag chamada style declarada no cabeçalho, mas também podemos criar um arquivo exclusivo para estilização, que é o que faremos agora.
Dentro do cabeçalho do nosso arquivo .hmtl adicionamos um link para o nosso arquivo styles.css. Você pode criar o arquivo da mesma forma que aprendeu com arquivos .html ou deixar o Visual Studio Code fazer isso para você! Basta pressionar “control” e clicar no nome do arquivo, com isso você verá a seguinte tela:
Clique em “Create File” e pronto! Agora vamos começar a entender como fazer referência aos nossos elementos HTML e, posteriormente, estiliza-los.
Similar ao HTML, nossa declaração será através das tags que possuem uma propriedade e um valor. Existem muitas propriedades CSS para examinarmos, mas, assim como os elementos HTML, normalmente é fácil pesquisar no Google algo como "alterar a fonte para azul com CSS" para obter o resultado. Alguns dos mais comuns são:
Vamos usar um pouco do que acabamos de aprender para melhorar nosso arquivo hello.html :
<!DOCTYPE html>
<html lang="pt-BR">
<head>
<link rel="stylesheet" href="styles.css" />
<title>Introcomp</title>
</head>
<body>
<h1>Hello, World!</h1>
</body>
</html>
Visualização:
Estamos declarando o tipo de elemento que queremos estilizar (body e h1), mas existem muitas maneiras de determinar quais elementos HTML você está estilizando, algumas das quais mencionaremos aqui:
Em CSS, os seletores são padrões usados para selecionar o(s) elemento(s) que você deseja estilizar. As classes, tipos de elementos e ids que usamos anteriormente são exemplos de seletores.
O CSS também nos permite editar vários seletores ao mesmo tempo. Se quisermos mudar a cor de um título principal e um paragrafo, basta declararmos assim: h1,p {...}
Além da vírgula para vários seletores, existem várias outras maneiras de especificar quais elementos você gostaria de estilizar. Esta tabela fornece alguns exemplos, e veremos alguns exemplos abaixo:
<!DOCTYPE html>
<html lang="pt-BR">
<head>
<title>Usando seletores</title>
<style>
ul li {
color: blue;
}
</style>
</head>
<body>
<ol>
<li>foo</li>
<li> bar
<ul>
<li>olá</li>
<li>Tchau</li>
<li>Oi</li>
</ul>
</li>
<li>baz</li>
</ol>
</body>
<html>
Visualização:
<!DOCTYPE html>
<html lang="pt-BR">
<head>
<title>Usando Seletores</title>
<style>
a[href="https://www.amazon.com/"] {
color: red;
}
</style>
</head>
<body>
<ol>
<li><a href="https://www.google.com/">Google</a></li>
<li><a href="https://www.amazon.com/">Amazon</a> </li>
<li><a href="https://www.facebook.com/">Facebook</a></li>
</ol>
</body>
<html>
Visualização:
Também podemos ver que o elemento h1 dentro de body herda a propriedade background de cor black. Aqui temos o conceito de herança, no qual as propriedades em CSS são passadas de um elemento pai (neste caso, o body) para elementos filhos (neste caso, h1).
Agora observe o exemplo a seguir:
Aqui entra o efeito cascata, que nada mais é do que estabelecer uma ordem de prioridade para aplicação da regra de estilo a um elemento. A prioridade para o efeito cascata em ordem crescente é a seguinte:
Observação: existe a possibilidade de alterar tal prioridade de forma brusca com o uso do
!important após o valor de determinada tag, mas não é recomendado, pois irá dificultar a manutenção do seu código.
Hoje, muitas pessoas visualizam sites em múltiplos dispositivos que nem sempre são computadores, como smartphones e tablets. É importante garantir que seu site possa ser lido por pessoas em todos os dispositivos.
Uma maneira de conseguir isso é através do conhecimento da viewport. A viewport, (em português, janela de visualização) é a parte da tela que é realmente visível para o usuário a qualquer momento. Por padrão, muitas páginas da web presumem que a janela de visualização é a mesma em qualquer dispositivo, o que faz com que muitos sites (especialmente os mais antigos) sejam difíceis de interagir em dispositivos móveis.
Uma maneira simples de melhorar a aparência de um site em um dispositivo móvel é adicionar a seguinte linha no cabeçalho de nossos arquivos HTML. Esta linha diz ao dispositivo móvel para usar uma janela de visualização que tenha a mesma largura do dispositivo que você está usando, em vez de uma muito maior.
<meta name = "viewport" content = "width = device-width, initial-scale = 1.0">
Outra maneira de lidar com diferentes dispositivos é por meio de uma media query. Media queries são maneiras de alterar o estilo de uma página com base em como a página está sendo exibida.
Para obter um exemplo, vamos tentar simplesmente mudar a cor da tela quando ela se reduz a um determinado tamanho. Declaramos uma media query digitando @media seguido pelo tipo de consulta entre parênteses.
<!DOCTYPE html>
<html lang="pt-BR">
<head>
<title>Tamanho da tela</title>
<style>
@media (min-width: 600px) {
body {
background-color: red;
}
}
@media (max-width: 599px) {
body {
background-color: blue;
}
}
</style>
</head>
<body>
<h1>Parabéns por ter chegado até aqui!</h1>
</body>
</html>
Com sua página aberta, clique com o botão direito e selecione a opção Inspecionar ou simplesmente aperte F12. Você verá uma tela similar à apresentada abaixo. Nessa seção fornecida pelo seu navegador nós podemos ler cada propriedade encontrada na sua página, dentre muitas outras funcionalidades. Usaremos para alterar o tamanho da nossa página.
Na parte central ao topo da figura podemos ver as proporções da página. Selecionamos a opção abaixo Mobile S - 320px e constatamos o efeito responsivo.
Poderíamos simplesmente ter diminuido a tela do nosso navegador, mas é interessante trabalharmos com os tamanhos padrões fornecidos. Além disso, é possível visualizar o comportamento da nossa página em diferentes dispositivos:
Temos outras duas maneiras de lidar com tamanhos de tela diferentes: usando o conceito de flexbox e o conceito de grid. Por ser uma aula introdutória não iremos aprofundar nas diferenças entre flexbox e grid, mas de forma superficial o atributo display: flex nos permite facilmente ter os elementos agrupados na próxima linha se eles não se ajustarem horizontalmente.
Com o grid, podemos especificar atributos de estilo, como larguras de coluna e intervalos entre colunas e linhas.
Abaixo um exemplo do uso do flexbox, onde colocamos todos os nossos elementos em uma div que chamaremos de nosso container. Em seguida, adicionamos algum estilo a essa div, especificando que queremos usar um display flexbox para os elementos dentro dela. Também adicionamos alguns estilos adicionais às divs internas para ilustrar melhor o agrupamento que está ocorrendo aqui.
<!DOCTYPE html>
<html lang="pt-BR">
<head>
<title>Tamanho da Tela</title>
<style>
#container {
display: flex;
flex-wrap: wrap;
}
#container > div {
background-color: green;
font-size: 20px;
margin: 20px;
padding: 20px;
width: 200px;
}
</style>
</head>
<body>
<div id="container">
<div>Algum texto 1!</div>
<div>Algum texto 2!</div>
<div>Algum texto 3!</div>
<div>Algum texto 4!</div>
<div>Algum texto 5!</div>
<div>Algum texto 6!</div>
<div>Algum texto 7!</div>
<div>Algum texto 8!</div>
<div>Algum texto 9!</div>
<div>Algum texto 10!</div>
<div>Algum texto 11!</div>
<div>Algum texto 12!</div>
</div>
</body>
</html>
A linguagem JavaScript foi inicialmente criada para navegadores web, para tornar as páginas web mais “vivas”. Desde então, a linguagem tem evoluído continuamente, possuindo hoje muitos usos e plataformas.
Uma plataforma pode ser um navegador, um servidor web ou até mesmo uma máquina de café, se ela puder rodar JavaScript. Cada uma dessas plataformas provê suas funcionalidades específicas.
Hoje iremos ver um pouco sobre o controle que o JavaScript pode exercer sobre páginas web. Já falamos brevemente sobre o DOM, porém vale a pena recaptulá-lo.
Assim como começamos a fazer nossos códigos de web usando tags, vamos utilizar uma tag para o JavaScript. Quando utilizamos a tag <script></script> no nosso html, dizemos para o navegador que tudo o que estiver dentro dela será interpretado como código JavaScript. Para o nosso primeiro programa faremos isso:
<script>
alert('Hello, World!');
</script>
O alert é uma função que vai produzir um alerta. Assim como em Python, funções em JavaScript podem receber argumentos. Aqui estamos enviando um argumento (uma string) para função alert que mostrará isso no display. O resultado é mostrado na Figura 29:
O JavaScript é muito útil quando queremos, por exemplo, que ao usuário clicar em algum lugar, uma função em JavaScript seja acionada, permitindo uma maior interação com o usuário.
Vamos fazer isso então. Vamos criar um botão e quando esse botão for pressionado ele chamará uma função que mostrará esse alerta. Para criar uma função é muito simples, basta digitar function seguido do nome que você quer dar para a função, lembrando claro que isso tem que estar dentro da tag <script>. Nossa função ficará assim:
<script>
function hello(){
alert('Hello, World!');
}
</script>
Aqui no caso criamos uma função que se chama "hello", e como os parenteses depois estão vazios, isso quer dizer que esta função não recebe nenhum parâmetro. E dentro da função está o nosso alert.
Para que essa função seja chamada, vamos ter que criar um botão no body. Mas esse botão precisará ter um atributo em sua tag chamado "onclick" que usaremos para chamar a função hello(). Nosso botão ficará assim:
<button onclick="hello()">Clique aqui</button>
O nosso código completo está representado na Figura 30. E notem que o alerta só será mostrado quando o botão for pressionado.
Com isso vimos que podemos fazer coisas poderosas com o JavaScript nas nossas páginas web. E assim como em outras linguagens, tipo o Python, em JavaScript podemos criar funções próprias, usar funções já prontas (como alert), variáveis e entre outras coisas.
Vamos fazer mais um exemplo. Vamos criar um novo arquivo e chamá-lo de "counter.html".
O nosso código do counter.html será assim:
<!DOCTYPE html>
<html lang="pt-BR">
<head>
<title>Counter</title>
<script>
let counter = 0;
function contar(){
counter = counter + 1;
alert(counter);
}
</script>
</head>
<body>
<h1>Contador</h1>
<button onclick="contar()">Contar</button>
</body>
</html>
Dentro do script temos uma variável chamada "counter". Em JavaScript temos que declarar uma variável usando let. Depois temos a nossa função "contar" que incrimentará 1 à variável "counter" sempre que for chamada, e depois mostrará o resultado na tela. Como é possível ver na Figura 31, cada vez que o botão é clicado, um alerta com o número será mostrado.
Ok, foi muito legal ver que podemos executar tarefas usando JavaScript e mostrar mensagens para o usuário por meio de alertas. Mas seria muito chato se a única forma de interagir com o usuário fosse por meio de alert. Seria bem mais interessante se pudéssemos mostrar isso diretamente na tela da página Web. Bem, isso é possível manipulando o DOM, o que será visto na sessão 4.2.
O DOM(Document Object Model) é uma interface que representa como os documentos HTML são lidos pelo seu navegador. Após o navegador ler seu documento HTML, ele cria um objeto que é na verdade uma representação estruturada do seu documento e define meios de como essa estrutura pode ser acessada (ou até mesmo alterada!). Nós podemos acessar e manipular o DOM com JavaScript... essa é a forma mais fácil e usada.
Por meio da manipulação do DOM nós podemos modificar nossos arquivos HTML e CSS, dentre várias outras funcionalidades, usando o JavaScript para isso. Abaixo temos alguns métodos para manipularmos nosso HTML usando um código em JavaScript:
Vamos entender um pouco melhor na prática a aplicação de algumas propriedades, métodos e eventos que podemos manipular como no código abaixo:
<!DOCTYPE html>
<html lang="pt-BR">
<head>
<title>Cores</title>
<script>
document.addEventListener('DOMContentLoaded', function () {
document.querySelectorAll('button').forEach(function (button) {
button.onclick = function () {
document.querySelector("#titulo").style.color = button.dataset.color;
}
});
});
</script>
</head>
<body>
<h1 id="titulo">Alterando a cor do texto</h1>
<button data-color="red">Vermelho</button>
<button data-color="blue">Azul</button>
<button data-color="green">Verde</button>
</body>
</html>
• document, que como o nome diz, referencia o documento HTML.
• document.addEventListener ... aqui nós estamos adicionando um evento que será acionado quando o conteúdo do DOM estiver carregado (isso que representa nosso atributo DOMContentLoaded) e, quando isso acontecer, a função que segue (function()) será executada.
• Dentro da função vemos o método querySelectorAll que selecionará todos os elementos do tipo button existentes nesse documento html e os colocará dentro de um vetor.
• Vemos também um método para manipulação de vetores, o forEach, que como o nome sugere, permite a manipulação de cada elemento do nosso vetor
• Para cada vez que um botão é clicado (button.onclick), é acionada uma função que busca o elemento com id="titulo". No querySelector podemos especificar nossa busca, seja por classe utilizando o ., por id utilizando a # e etc.
• Enfim usamos o valor recebido do atributo data-color do botão para mudarmos a cor do texto do nosso elemento h1
Teremos como resultado a página abaixo em que alteramos a cor do texto ao clicar nos botões
A definição traduzida do site do Git nos diz:
"Git é um sistema de controle de versão distribuído gratuito e de código aberto projetado para lidar com tudo, desde projetos pequenos a muito grandes com velocidade e eficiência."
Ou seja, é uma ferramenta de linha de comando que nos ajudará com o controle de versão de várias maneiras:
Um repositório Git é um local de arquivo onde armazenaremos todos os arquivos relacionados a um determinado projeto. Eles podem ser remotos (armazenados online) ou locais (armazenados em seu computador).
Para criar um repósitorio remoto no Github é muito simples.Primeiramente, crie uma conta no github, e certifique-se de ter o git instalado em seu computador digitando git em seu terminal. Se não estiver instalado, você pode baixá-lo aqui. Na página inicial do github, vá na parte superior esquerda e clique no botão New, para criar um novo repositório, conforme a Figura 36:
Depois dê um nome para o seu repositório. O meu eu chamei de "Aula_Web_Introcomp", conforme a Figura 37 abaixo. Depois é só clicar em Create repository. Pronto, criamos um repositório (por enquanto vazio).
Depois de criar o repositório, uma tela cheia de comandos vai aparecer. Não se assuste, pois deu tudo certo até agora. Pelo terminal do Vscode ou pelo terminal do computador vá até a pasta aonde estão os arquivos que fizemos na aula de hoje. Depois disso digite os seguintes comandos, um de cada vez no terminal:
git init
git add .
git commit -m "Primeira aula de Web"
git branch -M main
git remote add origin https://github.com/andreocunha/Aula_Web_Introcomp.git
git push -u origin master
Alguns cuidados devem ser tomadas nos comandos acima. No segundo comando não se esqueça de que tem um espaço entre add e o ponto (.). No quinto comando mude aquele final (o do https://...) para o seu https que aparece na tela igual na figura abaixo. Após executar os camandos, seu terminal ficará parecido como o da Figura 38.
E é isso! Se tudo der certo ao atualizar a página do github você verá algo parecido como a Figura 40.
Obrigado por chegar até aqui, você é incrível! Não se esqueça de nos dar um feedback sobre a aula, até a próxima!
Para hospedar sua página WEB de graça é muito fácil! Crie um repositório novo no github contendo somente seus códigos da página que você irá hospedar. Siga os passos anteriores e salve tudo lá. Depois vá em "Settings" dentro desse repositório e desça a página até achar "GitHub Pages", conforme a Figura 41. Clique em "none" e mude para "main", depois clique em "Save". Espere por cerca de 1 minuto e atualize a página de Settings. Vá para a parte do Github Pages e o seu link deverá estar dentro de uma área verde, como mostrado na Figura 42. Se não estiver verde, basta esperar um pouco e atualizar a página (usando F5) até ficar verde. Pronto! Sua página já está hospedada e pronta para ser compartilhada!
This work is licensed under a Creative Commons Attribution 4.0 International License