Aula 8

Bem-vindo!
Roteadores
DNS
HTTP
HTML
CSS
Frameworks
JavaScript
Resumindo

Bem-vindo!

Nas semanas anteriores, apresentamos o Python a você, uma linguagem de programação de alto nível que utiliza os mesmos blocos de construção que aprendemos em C. Hoje, iremos estender esses blocos de construção para o HTML, CSS e JavaScript.
A internet é uma tecnologia que todos nós usamos.
Usando nossas habilidades das semanas anteriores, podemos construir nossas próprias páginas e aplicativos da web.
A ARPANET conectou os primeiros pontos na internet uns aos outros.
Os pontos entre dois pontos podem ser considerados roteadores.

Roteadores

Para rotear dados de um lugar para outro, precisamos tomar decisões de roteamento. Ou seja, alguém precisa programar como os dados são transferidos entre o ponto A e o ponto B.
Você pode imaginar como os dados podem seguir vários caminhos do ponto A ao ponto B, de modo que, quando um roteador está congestionado, os dados podem fluir por outro caminho.
TCP/IP são dois protocolos que permitem que os computadores transfiram dados entre eles pela internet.
IP, ou protocolo de internet, é uma forma pela qual os computadores podem se identificar pela internet. Cada computador possui um endereço único no mundo. Os endereços estão nesse formato:
```
  #.#.#.#
```
Os números variam de 0 a 255. Os endereços IP têm 32 bits, o que significa que esses endereços podem acomodar mais de 4 bilhões de endereços. Versões mais recentes dos endereços IP podem acomodar muito mais computadores!
No mundo real, os servidores fazem muito trabalho para nós.
TCP, ou protocolo de controle de transmissão, é usado para distinguir os serviços da web uns dos outros. Por exemplo, 80 é usado para denotar o HTTP e 443 é usado para denotar o HTTPS. Esses números são números de porta.
Quando as informações são enviadas de uma localização para outra, um endereço IP e um número de porta TCP são enviados.
Esses protocolos também são usados para dividir arquivos grandes em várias partes chamadas de pacotes. Por exemplo, uma foto grande de um gato pode ser enviada em vários pacotes. Quando um pacote é perdido, o TCP/IP pode solicitar novamente os pacotes ausentes do servidor de origem.
O TCP confirmará quando todos os dados tiverem sido transmitidos e recebidos.

DNS

Seria muito tedioso se você precisasse lembrar de um número de endereço para visitar um site.
O DNS, ou sistemas de nomes de domínio, é uma coleção de servidores na internet que são usados para rotear endereços de sites, como harvard.edu, para um endereço IP específico.
O DNS simplesmente mantém uma tabela ou banco de dados que vincula nomes de domínio específicos e totalmente qualificados a endereços IP específicos.

HTTP

O HTTP, ou protocolo de transferência de hipertexto, é um protocolo de nível de aplicação que os desenvolvedores usam para criar coisas poderosas e úteis.
Quando você vê um endereço como https://www.example.com, você está visitando implicitamente esse endereço com uma / no final.
O caminho é o que existe depois dessa barra. Por exemplo, https://www.example.com/folder/file.html visita example.com, navega até a pasta folder e depois visita o arquivo chamado file.html.
https neste endereço é o protocolo que é usado para se conectar a esse endereço da web. Por protocolo, queremos dizer que o HTTP utiliza solicitações GET ou POST para solicitar informações de um servidor. Por exemplo, você pode abrir o Google Chrome, clicar com o botão direito do mouse e clicar em inspecionar. Quando você abre as ferramentas para desenvolvedores e visita Rede, selecionando Preservar log, você verá Cabeçalhos da Solicitação. Você verá menções a GET. Isso também é possível em outros navegadores, usando métodos um pouco diferentes.
Geralmente, após fazer uma solicitação a um servidor, você receberá o seguinte em Cabeçalhos de Resposta:
```
  HTTP/1.1 200 OK
  Content-Type: text/html
```
Essa abordagem para inspecionar esses logs pode ser um pouco mais complicada do que o necessário. Você pode analisar o trabalho dos protocolos HTTP em code.cs50.io. Por exemplo, digite o seguinte na janela do terminal:
```
  curl -I https://www.harvard.edu
```
Observe que a saída desse comando retorna todos os valores do cabeçalho das respostas do servidor.
Da mesma forma, execute o seguinte no terminal:
```
  curl -I http://www.harvard.edu
```
Observe que o s em https foi removido. A resposta do servidor mostrará que a resposta é 301 em vez de 100, o que significa que o site foi movido permanentemente.
Além disso, execute o seguinte comando no terminal:
```
  curl -I https://harvard.edu
```
Observe que você verá a mesma resposta 301, fornecendo uma dica para o navegador de onde ele pode encontrar o site correto.

Assim como 301, um código 404 significa que uma URL específica não foi encontrada. Existem inúmeros outros códigos de resposta, como:

  200 OK
  301 Movido permanentemente
  302 Encontrado
  304 Não modificado
  304 Redirecionamento temporário
  401 Não autorizado
  403 Proibido
  404 Não encontrado
  418 Sou um bule de chá
  500 Erro interno do servidor
  503 Serviço indisponível

Vale mencionar que os erros 500 são sempre culpa sua como desenvolvedor. Isso será especialmente importante para o pset da próxima semana e potencialmente para o seu projeto final!
Podemos enviar comandos mais complicados para o servidor. Por exemplo, podemos tentar o seguinte:
```
  GET /search?q=cats HTTP/1.1
  Host: www.google.com
```
Observe que não estamos apenas especificando um caminho, mas também a entrada do usuário usando o sinal de interrogação ?. q é usado para denotar consulta, passando cats para ele.
Se você digitar manualmente google.com/search?=cats na barra de endereços do seu navegador da web, ele consultará manualmente o Google para resultados relacionados a cats.

HTML

HTML ou linguagem de marcação de hipertexto é composto por tags, cada uma das quais pode ter alguns atributos que a descrevem.
No seu terminal, digite code hello.html e escreva o código da seguinte forma:
```
<!DOCTYPE html>



<html lang="en">
    <head>
        <title>olá, título</title>
    </head>
    <body>
        olá, corpo
    </body>
</html>
```
Note que a tag html abre e fecha este arquivo. Além disso, observe o atributo lang, que modifica o comportamento da tag html. Também observe que existem tags head e tags body. A indentação não é necessária, mas sugere uma hierarquia.
Você pode servir seu código digitando http-server. Este servidor está agora disponível em um URL muito longo. Se você clicar nele, poderá visitar o website com seu próprio código.
Quando você visita este URL, observe que o nome do arquivo hello.html aparece no final deste URL.
A hierarquia das tags pode ser representada da seguinte forma:
O navegador lerá seu arquivo HTML de cima para baixo e da esquerda para a direita.

Como os espaços em branco são ignorados em HTML, você precisará usar tags de parágrafo <p> para abrir e fechar um parágrafo. Considere o seguinte:

<!DOCTYPE html>

<!-- Demonstra parágrafos -->

<html lang="en">
    <head>
        <title>parágrafos</title>
    </head>
    <body>
        <p>
            Lorem ipsum dolor sit amet, consectetur adipiscing elit. Vivamus convallis scelerisque quam, vel hendrerit lectus viverra eu. Praesent posuere eget lectus ut faucibus. Etiam eu velit laoreet, gravida lorem in, viverra est. Cras ut purus neque. In porttitor non lorem id lobortis. Mauris gravida metus libero, quis maximus dui porta at. Donec lacinia felis consectetur venenatis scelerisque. Nulla eu nisl sollicitudin, varius velit sit amet, vehicula erat. Curabitur sollicitudin felis sit amet orci mattis, a tempus nulla pulvinar. Aliquam erat volutpat.
        </p>
        <p>
            Mauris ut dui in eros semper hendrerit. Morbi vel elit mi. Sed sit amet ex non quam dignissim dignissim et vel arcu. Pellentesque eget elementum orci. Morbi ac cursus ex. Pellentesque quis turpis blandit orci dapibus semper sed non nunc. Nulla et dolor nec lacus finibus volutpat. Sed non lorem diam. Donec feugiat interdum interdum. Vivamus et justo in enim blandit fermentum vel at elit. Phasellus eu ante vitae ligula varius aliquet. Etiam id posuere nibh.
        </p>
        <p>
            Aenean venenatis convallis ante a rhoncus. Nullam in metus vel diam vehicula tincidunt. Donec lacinia metus sem, sit amet egestas elit blandit sit amet. Nunc egestas sem quis nisl mattis semper. Pellentesque ut magna congue lorem eleifend sodales. Donec tortor tortor, aliquam vitae mollis sed, interdum ut lectus. Mauris non purus quis ipsum lacinia tincidunt.
        </p>
        <p>
            Integer at justo lacinia libero blandit aliquam ut ut dui. Quisque tincidunt facilisis venenatis. Nullam dictum odio quis lorem luctus, vel malesuada dolor luctus. Aenean placerat faucibus enim a facilisis. Maecenas eleifend quis massa sed eleifend. Ut ultricies, dui ac vulputate hendrerit, ex metus iaculis diam, vitae fermentum libero dui et ante. Phasellus suscipit, arcu ut consequat sagittis, massa urna accumsan massa, eu aliquet nulla lorem vitae arcu. Pellentesque rutrum felis et metus porta semper. Nam ac consectetur mauris.
        </p>
        <p>
            Suspendisse rutrum vestibulum odio, sed venenatis purus condimentum sed. Morbi ornare tincidunt augue eu auctor. Vivamus sagittis ac lectus at aliquet. Nulla urna mauris, interdum non nibh in, vehicula porta enim. Donec et posuere sapien. Pellentesque ultrices scelerisque ipsum, vel fermentum nibh tincidunt et. Proin gravida porta ipsum nec scelerisque. Vestibulum fringilla erat at turpis laoreet, nec hendrerit nisi scelerisque.
        </p>
        <p>
            Sed quis malesuada mi. Nam id purus quis augue sagittis pharetra. Nulla facilisi. Maecenas vel fringilla ante. Cras tristique, arcu sit amet blandit auctor, urna elit ultricies lacus, a malesuada eros dui id massa. Aliquam sem odio, pretium vel cursus eget, scelerisque at urna. Vestibulum posuere a turpis consectetur consectetur. Cras consequat, risus quis tempor egestas, nulla ipsum ornare erat, nec accumsan nibh lorem nec risus. Integer at iaculis lacus. Integer congue nunc massa, quis molestie felis pellentesque vestibulum. Nulla odio tortor, aliquam nec quam in, ornare aliquet sapien.
        </p>
    </body>
</html>

Observe que os parágrafos começam com uma tag <p> e terminam com uma tag </p>.

O HTML permite a representação de cabeçalhos:

<!DOCTYPE html>

<!-- Demonstração de cabeçalhos (para capítulos, seções, subseções, etc.) -->

<html lang="en">

    <head>
        <title>cabeçalhos</title>
    </head>

    <body>

        <h1>Um</h1>
        <p>
            Lorem ipsum dolor sit amet, consectetur adipiscing elit. Vivamus convallis scelerisque quam, vel hendrerit lectus viverra eu. Praesent posuere eget lectus ut faucibus. Etiam eu velit laoreet, gravida lorem in, viverra est. Cras ut purus neque. In porttitor non lorem id lobortis. Mauris gravida metus libero, quis maximus dui porta at. Donec lacinia felis consectetur venenatis scelerisque. Nulla eu nisl sollicitudin, varius velit sit amet, vehicula erat. Curabitur sollicitudin felis sit amet orci mattis, a tempus nulla pulvinar. Aliquam erat volutpat.
        </p>

        <h2>Dois</h2>
        <p>
            Mauris ut dui in eros semper hendrerit. Morbi vel elit mi. Sed sit amet ex non quam dignissim dignissim et vel arcu. Pellentesque eget elementum orci. Morbi ac cursus ex. Pellentesque quis turpis blandit orci dapibus semper sed non nunc. Nulla et dolor nec lacus finibus volutpat. Sed non lorem diam. Donec feugiat interdum interdum. Vivamus et justo in enim blandit fermentum vel at elit. Phasellus eu ante vitae ligula varius aliquet. Etiam id posuere nibh.
        </p>

        <h3>Três</h3>
        <p>
            Aenean venenatis convallis ante a rhoncus. Nullam in metus vel diam vehicula tincidunt. Donec lacinia metus sem, sit amet egestas elit blandit sit amet. Nunc egestas sem quis nisl mattis semper. Pellentesque ut magna congue lorem eleifend sodales. Donec tortor tortor, aliquam vitae mollis sed, interdum ut lectus. Mauris non purus quis ipsum lacinia tincidunt.
        </p>

        <h4>Quatro</h4>
        <p>
            Integer at justo lacinia libero blandit aliquam ut ut dui. Quisque tincidunt facilisis venenatis. Nullam dictum odio quis lorem luctus, vel malesuada dolor luctus. Aenean placerat faucibus enim a facilisis. Maecenas eleifend quis massa sed eleifend. Ut ultricies, dui ac vulputate hendrerit, ex metus iaculis diam, vitae fermentum libero dui et ante. Phasellus suscipit, arcu ut consequat sagittis, massa urna accumsan massa, eu aliquet nulla lorem vitae arcu. Pellentesque rutrum felis et metus porta semper. Nam ac consectetur mauris.
        </p>

        <h5>Cinco</h5>
        <p>
            Suspendisse rutrum vestibulum odio, sed venenatis purus condimentum sed. Morbi ornare tincidunt augue eu auctor. Vivamus sagittis ac lectus at aliquet. Nulla urna mauris, interdum non nibh in, vehicula porta enim. Donec et posuere sapien. Pellentesque ultrices scelerisque ipsum, vel fermentum nibh tincidunt et. Proin gravida porta ipsum nec scelerisque. Vestibulum fringilla erat at turpis laoreet, nec hendrerit nisi scelerisque.
        </p>

        <h6>Seis</h6>
        <p>
            Sed quis malesuada mi. Nam id purus quis augue sagittis pharetra. Nulla facilisi. Maecenas vel fringilla ante. Cras tristique, arcu sit amet blandit auctor, urna elit ultricies lacus, a malesuada eros dui id massa. Aliquam sem odio, pretium vel cursus eget, scelerisque at urna. Vestibulum posuere a turpis consectetur consectetur. Cras consequat, risus quis tempor egestas, nulla ipsum ornare erat, nec accumsan nibh lorem nec risus. Integer at iaculis lacus. Integer congue nunc massa, quis molestie felis pellentesque vestibulum. Nulla odio tortor, aliquam nec quam in, ornare aliquet sapien.
        </p>

    </body>

</html>

Observe que <h1>, <h2> e <h3> denotam diferentes níveis de cabeçalhos.

Também podemos criar listas dentro de HTML:

<!DOCTYPE html>

<!-- Demonstra listas ordenadas -->

<html lang="en">
    <head>
        <title>list</title>
    </head>
    <body>
        <ol>
            <li>foo</li>
            <li>bar</li>
            <li>baz</li>
        </ol>
    </body>
</html>

Observe que a tag <ol> cria uma lista ordenada contendo três itens.

Também podemos criar uma tabela em HTML:

<!DOCTYPE html>

<!-- Demonstra tabela -->

<html lang="en">
    <head>
        <title>table</title>
    </head>
    <body>
        <table>
            <tr>
                <td>1</td>
                <td>2</td>
                <td>3</td>
            </tr>
            <tr>
                <td>4</td>
                <td>5</td>
                <td>6</td>
            </tr>
            <tr>
                <td>7</td>
                <td>8</td>
                <td>9</td>
            </tr>
            <tr>
                <td>*</td>
                <td>0</td>
                <td>#</td>
            </tr>
        </table>
    </body>
</html>

As tabelas também têm tags que abrem e fecham cada elemento dentro delas.

As imagens também podem ser utilizadas dentro de HTML:

<!DOCTYPE html>

<!-- Demonstra imagem -->

<html lang="en">
    <head>
        <title>image</title>
    </head>
    <body>
        <!-- https://www.harvard.edu/ -->
        <img alt="Harvard University" src="harvard.jpg">
    </body>
</html>

Observe que src="harvard.jpg" indica o caminho onde o arquivo de imagem pode ser encontrado.

Os vídeos também podem ser incluídos em HTML:

<!DOCTYPE html>

<!-- Demonstra vídeo -->

<html lang="en">
    <head>
        <title>video</title>
    </head>
    <body>
        <!-- https://www.harvard.edu/ -->
        <video autoplay loop muted playsinline width="1280">
            <source src="halloween.mp4" type="video/mp4">
        </video>
    </body>
</html>

Observe que o atributo width define a largura do vídeo.

Você também pode criar links entre várias páginas da web:

<!DOCTYPE html>

<!-- Demonstra link -->

<html lang="en">
    <head>
        <title>link</title>
    </head>
    <body>
       Visite <a href="image.html">Harvard</a>.
    </body>
</html>

Observe que a tag <a> ou âncora é usada para tornar Harvard um texto linkável.

As tags meta são usadas para guardar informações sobre os dados dentro do arquivo HTML. Considere o seguinte:

<!DOCTYPE html>

<!-- Demonstrates responsive design -->

<html lang="en">
    <head>
        <meta name="viewport" content="initial-scale=1, width=device-width">
        <title>meta</title>
    </head>
    <body>
        Lorem ipsum dolor sit amet, consectetur adipiscing elit. Vivamus convallis scelerisque quam, vel hendrerit lectus viverra eu. Praesent posuere eget lectus ut faucibus. Etiam eu velit laoreet, gravida lorem in, viverra est. Cras ut purus neque. In porttitor non lorem id lobortis. Mauris gravida metus libero, quis maximus dui porta at. Donec lacinia felis consectetur venenatis scelerisque. Nulla eu nisl sollicitudin, varius velit sit amet, vehicula erat. Curabitur sollicitudin felis sit amet orci mattis, a tempus nulla pulvinar. Aliquam erat volutpat.
    </body>
</html>

Observe que esse conjunto de atributos meta torna essa página compatível com dispositivos móveis.

Existem várias combinações chave-valor meta que você pode usar:

<!DOCTYPE html>

<!-- Demonstrates Open Graph tags -->

<html lang="en">
    <head>
        <meta property="og:title" content="CS50">
        <meta property="og:description" content="Introdução às empresas intelectuais de ciência da computação e à arte da programação.">
        <meta property="og:image" content="cat.jpg">
        <title>meta</title>
    </head>
    <body>
        ...
    </body>
</html>

Observe que essas combinações chave-valor se relacionam com o title e description da página da web.

Você também pode criar formulários lembrando a pesquisa do Google:

<!DOCTYPE html>

<!-- Demonstrates form -->

<html lang="en">
    <head>
        <title>search</title>
    </head>
    <body>
        <form action="https://www.google.com/search" method="get">
            <input name="q" type="search">
            <input type="submit" value="Google Search">
        </form>
    </body>
</html>

Observe que uma tag form é aberta e fornece o atributo de qual action ela tomará. O campo input é incluído, passando o nome q e o tipo como search.

Podemos melhorar essa pesquisa da seguinte forma:

<!DOCTYPE html>

<!-- Demonstrates additional form attributes -->

<html lang="en">
    <head>
        <title>search</title>
    </head>
    <body>
        <form action="https://www.google.com/search" method="get">
            <input autocomplete="off" autofocus name="q" placeholder="Query" type="search">
            <button>Google Search</button>
        </form>
    </body>
</html>

Observe que autocomplete é desativado. autofocus está habilitado.

Vimos apenas alguns dos muitos elementos HTML que você pode adicionar ao seu site. Se você tiver uma ideia de algo para adicionar ao seu site que ainda não vimos (um botão, um arquivo de áudio, etc.), tente pesquisar no Google "X em HTML" para encontrar a sintaxe correta!

CSS

CSS, ou cascading style sheet, é uma linguagem de marcação que permite ajustar a estética de seus arquivos HTML.

No seu terminal, digite code home.html e escreva o código da seguinte forma:

  <!DOCTYPE html>
  
  <!-- Demonstra CSS inline com tags P -->
  
  <html lang="en">
      <head>
          <title>css</title>
      </head>
      <body>
          <p style="font-size: large; text-align: center;">
              John Harvard
          </p>
          <p style="font-size: medium; text-align: center;">
              Bem-vindo à minha página inicial!
          </p>
          <p style="font-size: small; text-align: center;">
              Direitos autorais &#169; John Harvard
          </p>
      </body>
  </html>

Observe que alguns atributos style são fornecidos às tags <p>. O font-size é definido como large, medium ou small. Em seguida, text-align é definido como center.

Embora correto, o código acima não está bem projetado. Podemos remover redundâncias modificando nosso código da seguinte forma:

  <!DOCTYPE html>
  
  <!-- Remove DIV externo -->
  
  <html lang="en">
      <head>
          <title>css</title>
      </head>
      <body style="text-align: center">
          <div style="font-size: large">
              John Harvard
          </div>
          <div style="font-size: medium">
              Bem-vindo à minha página inicial!
          </div>
          <div style="font-size: small">
              Direitos autorais &#169; John Harvard
          </div>
      </body>
  </html>

Observe que as tags <div> são usadas para dividir este arquivo HTML em regiões específicas. text-align: center é aplicado a todo o corpo do arquivo HTML.

Descobrimos que existe um novo texto semântico que é incluído no HTML. Podemos modificar nosso código da seguinte forma:

  <!DOCTYPE html>
  
  <!-- Usa tags semânticas em vez de DIVs -->
  
  <html lang="en">
      <head>
          <title>css</title>
      </head>
      <body style="text-align: center">
          <header style="font-size: large">
              John Harvard
          </header>
          <main style="font-size: medium">
              Bem-vindo à minha página inicial!
          </main>
          <footer style="font-size: small">
              Direitos autorais &#169; John Harvard
          </footer>
      </body>
  </html>

Observe que o header e o footer têm estilos diferentes atribuídos a eles.

Essa prática de colocar o estilo e as informações em um único local não é uma boa prática. Podemos mover os elementos de estilo para o topo do arquivo da seguinte forma:

  <!-- Demonstra seletores de classe -->
  
  <html lang="en">
      <head>
          <style>

              .centered
              {
                  text-align: center;
              }

              .large
              {
                  font-size: large;
              }

              .medium
              {
                  font-size: medium;
              }

              .small
              {
                  font-size: small;
              }

          </style>
          <title>css</title>
      </head>
      <body class="centered">
          <header class="large">
              John Harvard
          </header>
          <main class="medium">
              Bem-vindo à minha página inicial!
          </main>
          <footer class="small">
              Direitos autorais &#169; John Harvard
          </footer>
      </body>
  </html>

Observe que todas as tags de estilo são colocadas no início da head dentro da marcação da tag style. Além disso, notamos que atribuímos classes, chamadas centered, large, medium e small aos nossos elementos e que selecionamos essas classes colocando um ponto antes do nome, como em .centered.

Acontece que podemos mover todo o nosso código de estilo para um arquivo especial chamado arquivo CSS. Podemos criar um arquivo chamado style.css e colar nossas classes lá:
```
.centered
{
    text-align: center;
}

.large
{
    font-size: large;
}

.medium
{
    font-size: medium;
}

.small
{
    font-size: small;
}
```
Note que isso é exatamente o que apareceu em nosso arquivo HTML.

Podemos então dizer ao navegador onde localizar o CSS para este arquivo HTML:

<!DOCTYPE html>

<!-- Demonstrates external stylesheets -->

<html lang="en">
    <head>
        <link href="style.css" rel="stylesheet">
        <title>css</title>
    </head>
    <body class="centered">
        <header class="large">
            John Harvard
        </header>
        <main class="medium">
            Bem-vindo à minha página inicial!
        </main>
        <footer class="small">
            Direitos autorais &#169; John Harvard
        </footer>
    </body>
</html>

Note que style.css está vinculado a este arquivo HTML como uma folha de estilo, informando ao navegador onde localizar os estilos que criamos.

Frameworks

Assim como podemos aproveitar bibliotecas de terceiros em Python, também existem bibliotecas de terceiros chamadas frameworks que podemos utilizar com nossos arquivos HTML.
O Bootstrap é um desses frameworks que podemos usar para embelezar nossos arquivos HTML e aperfeiçoar facilmente elementos de design, de forma que nossas páginas sejam mais legíveis.

O Bootstrap pode ser utilizado adicionando a seguinte tag link na head do seu arquivo HTML:

<head>
    <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.2.2/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-Zenh87qX5JnK2Jl0vWa8Ck2rdkQ2Bzep5IDxbcnCeuOxjzrPF/et3URy9Bv1WTRi" crossorigin="anonymous">
    <title>favorites</title>
</head>

Você pode saber mais sobre isso na Documentação do Bootstrap.

JavaScript

JavaScript é outra linguagem de programação que permite interatividade dentro de páginas da web.
JavaScript suporta condicionais:
```
if (x < y)
{

}
else
{

}
```
Variáveis também são suportadas:
```
let counter = 0;
```
Você também pode fazer incrementos:
```
counter++
```
Os loops são muito semelhantes ao que você já viu antes em C:
```
for (let i = 0; i < 3; i++)
{

}
```
JavaScript permite que você leia e modifique dinamicamente o documento HTML carregado na memória para que o usuário não precise recarregar para ver as alterações.

Considere o seguinte HTML:

<!DOCTYPE html>

<!-- Demonstrates programmatic changes to style -->

<html lang="en">
    <head>
        <title>background</title>
    </head>
    <body>
        <button id="red">R</button>
        <button id="green">G</button>
        <button id="blue">B</button>
        <script>

            let body = document.querySelector('body');
            document.querySelector('#red').addEventListener('click', function() {
                body.style.backgroundColor = 'red';
            });
            document.querySelector('#green').addEventListener('click', function() {
                body.style.backgroundColor = 'green';
            });
            document.querySelector('#blue').addEventListener('click', function() {
                body.style.backgroundColor = 'blue';
            });

        </script>
    </body>
</html>

Observe que o JavaScript aguarda quando um botão específico é clicado. Após esse clique, certos atributos de estilo na página são alterados. body é definido como o corpo da página. Em seguida, um event listener espera pelo clique em um dos botões. Então, o body.style.backgroundColor é alterado.

Da mesma forma, considere o seguinte:

<!DOCTYPE html>

<html lang="en">
    <head>
        <script>

            // Alterna a visibilidade da saudação
            function piscar()
            {
                let body = document.querySelector('body');
                if (body.style.visibility == 'hidden')
                {
                    body.style.visibility = 'visible';
                }
                else
                {
                    body.style.visibility = 'hidden';
                }
            }

            // Piscar a cada 500ms
            window.setInterval(piscar, 500);

        </script>
        <title>piscar</title>
    </head>
    <body>
        olá, mundo
    </body>
</html>

Este exemplo pisca um texto em um intervalo definido. Observe que window.setInterval recebe dois argumentos: 1) uma função a ser chamada e 2) um período de espera (em milissegundos) entre as chamadas da função.

Considere o seguinte:

<!DOCTYPE html>

<html lang="en">

    <head>
        <title>autocomplete</title>
    </head>

    <body>

        <input autocomplete="off" autofocus placeholder="Consulta" type="text">

        <ul></ul>

        <script src="large.js"></script>
        <script>

            let input = document.querySelector('input');
            input.addEventListener('keyup', function(event) {
                let html = '';
                if (input.value) {
                    for (word of WORDS) {
                        if (word.startsWith(input.value)) {
                            html += `<li>${word}</li>`;
                        }
                    }
                }
                document.querySelector('ul').innerHTML = html;
            });

        </script>

    </body>
</html>

Esta é uma implementação em JavaScript do recurso de autocompletar.

Curiosamente, também podemos obter a localização geográfica usando JavaScript:

<!DOCTYPE html>

<html lang="en">
    <head>
        <title>geolocalização</title>
    </head>
    <body>
        <script>

            navigator.geolocation.getCurrentPosition(function(position) {
                document.write(position.coords.latitude + ", " + position.coords.longitude);
            });

        </script>
    </body>
</html>

Observe que navigator.geolocation é usado para getCurrentPosition. Isso não funcionará se o seu computador ou navegador não permitir o rastreamento de localização.

As capacidades do JavaScript são muitas e podem ser encontradas na Documentação do JavaScript.

Resumindo

Nesta lição, você aprendeu como criar seus próprios arquivos HTML, estilizá-los, aproveitar frameworks de terceiros e utilizar JavaScript. Especificamente, discutimos...

TCP/IP
DNS
HTML
CSS
Frameworks
JavaScript

Até a próxima!