Week 8

Internet; Roteadores; TCP/IP; DNS; HTTP; URLs; GET; POST; HTML; Tags; Atributos; Servidores; CSS; Propriedades; Seletores; Frameworks; JavaScript; Variáveis; Condicionais; Loops; Eventos.

• Shorts
  1. Internet Primer
  2. IP
  3. TCP
  4. HTTP
  5. HTML
  6. CSS
  7. JavaScript
  8. DOM
• Lab 8
• Problem Set 8

Lecture 8

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

Bem-vindo!

• Nas semanas anteriores, apresentamos o Python, uma linguagem de programação de alto nível que utiliza os mesmos elementos que aprendemos em C. Hoje, iremos expandir esses elementos em HTML, CSS e JavaScript.
• A internet é uma tecnologia que todos usamos.
• Utilizando as habilidades das semanas anteriores, podemos criar nossas próprias páginas da web e aplicativos.
• A ARPANET conectou os primeiros pontos da internet entre si.
• Os pontos entre dois pontos poderiam 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 do ponto A para o ponto B.
• Você pode imaginar como os dados podem seguir por 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 computadores transfiram dados entre si pela internet.

• IP ou protocolo de internet é uma forma pela qual os computadores podem se identificar na internet. Cada computador tem um endereço único no mundo. Os endereços têm o seguinte formato:

    #.#.#.#
      

• Os números variam de 0 a 255. Os endereços IP possuem 32 bits, o que significa que esses endereços podem acomodar mais de 4 bilhões de endereços. Versões mais recentes de endereços IP podem acomodar ainda mais computadores!
• No mundo real, os servidores realizam muitas tarefas para nós.
• TCP, ou protocolo de controle de transmissão, é usado para distinguir os serviços da web uns dos outros. Por exemplo, o código 80 é usado para denotar o HTTP e o código 443 é usado para denotar o HTTPS. Esses números são chamados de números de porta.
• Quando informações são enviadas de um local para outro, um endereço IP e um número de porta TCP são enviados.
• Esses protocolos também são usados para fragmentar 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 ao servidor de origem.
• O TCP confirmará quando todos os dados tiverem sido transmitidos e recebidos.

DNS

• Seria muito tedioso se você precisasse lembrar um número de endereço para visitar um site.
• DNS, ou sistemas de nome 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 totalmente qualificados a endereços IP específicos.

HTTP

• HTTP ou protocolo de transferência de hipertexto é um protocolo de nível de aplicação que os desenvolvedores usam para construir coisas poderosas e úteis.
• Quando você vê um endereço como https://www.example.com, na verdade está visitando implicitamente esse endereço com uma barra / no final.
• O caminho é o que vem depois dessa barra. Por exemplo, https://www.example.com/pasta/arquivo.html visita example.com e navega até a pasta pasta e, em seguida, visita o arquivo chamado arquivo.html.
• https neste endereço é o protocolo usado para se conectar a esse endereço da web. Por protocolo, queremos dizer que o HTTP utiliza solicitações GET ou POST para pedir informações a um servidor. Por exemplo, você pode abrir o Google Chrome, clicar com o botão direito e clicar em Inspecionar. Quando você abre as ferramentas de desenvolvedor e visita Rede, selecionando Preservar log, você verá Cabeçalhos de solicitação. Você verá menções a GET. Isso é possível em outros navegadores também, usando métodos ligeiramente 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
      

• Esta abordagem para inspecionar esses logs pode ser um pouco mais complicada do que o necessário. Você pode analisar o funcionamento dos protocolos HTTP em code.cs50.io. Por exemplo, digite o seguinte na janela do seu terminal:

    curl -I https://www.harvard.edu
          

  Observe que a saída deste comando retorna todos os valores de cabeçalho das respostas do servidor.

• Da mesma forma, execute o seguinte em sua janela do 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 em sua janela de 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.

• Semelhante ao 301, um código 404 significa que um URL especificado não foi encontrado. Existem inúmeros outros códigos de resposta, como:

    200 OK
    301 Moved Permanently
    302 Found
    304 Not Modified
    304 Temporary Redirect
    401 Unauthorized
    403 Forbidden
    404 Not Found
    418 I'm a Teapot
    500 Internal Server Error
    503 Service Unavailable
      

• 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 marcador ?. q é usado para denotar consulta, passando gatos para ele.

• Se você digitar manualmente google.com/search?=gatos na barra de endereço do seu navegador da web, irá consultar manualmente o Google por resultados relacionados a gatos.

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 conforme abaixo:

  <!DOCTYPE html>
  
  <!-- Demonstrates HTML -->
  
  <html lang="en">
      <head>
          <title>hello, title</title>
      </head>
      <body>
          hello, body
      </body>
  </html>
    

  Observe que a tag html tanto abre quanto fecha este arquivo. Além disso, observe o atributo lang, que modifica o comportamento da tag html. Também observe que existem as tags head e body. A indentação não é obrigatória, mas sugere uma hierarquia.

• Você pode servir seu código digitando http-server. Este servidor está agora disponível em uma URL muito longa. Se você clicar nela, poderá visitar o site com seu próprio código.
• Ao visitar esta URL, observe que o nome do arquivo hello.html aparece no final desta 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 espaços em branco são efetivamente ignorados no HTML, você precisará usar as tags de parágrafo <p> para abrir e fechar um parágrafo. Considere o seguinte:

  <!DOCTYPE html>
  
  <!-- Demonstrates paragraphs -->
  
  <html lang="en">
      <head>
          <title>paragraphs</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 a tag <p> e terminam com a tag </p>.

• O HTML permite a representação de títulos:

  <!DOCTYPE html>
  
  <!-- Demonstrates headings (for chapters, sections, subsections, etc.) -->
  
  <html lang="en">
  
      <head>
          <title>headings</title>
      </head>
  
      <body>
  
          <h1>One</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>Two</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>Three</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>Four</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>Five</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>Six</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> indicam diferentes níveis de cabeçalhos.

• Também podemos criar listas dentro do HTML:

  <!DOCTYPE html>
  
  <!-- Demonstrates (ordered) lists -->
  
  <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>
  
  <!-- Demonstrates table -->
  
  <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 possuem tags que abrem e fecham cada elemento dentro delas.

• As imagens também podem ser utilizadas dentro do HTML:

  <!DOCTYPE html>
  
  <!-- Demonstrates image -->
  
  <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 localizado.

• Vídeos também podem ser incluídos em HTML:

  <!DOCTYPE html>
  
  <!-- Demonstrates video -->
  
  <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>
  
  <!-- Demonstrates link -->
  
  <html lang="en">
      <head>
          <title>link</title>
      </head>
      <body>
          Visit <a href="image.html">Harvard</a>.
      </body>
  </html>
        

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

• As meta tags são usadas para armazenar 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 este conjunto de atributos meta torna esta página compatível com dispositivos móveis.

• Existem várias duplas chave-valor de 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="Introduction to the intellectual enterprises of computer science and the art of programming.">
          <meta property="og:image" content="cat.jpg">
          <title>meta</title>
      </head>
      <body>
          ...
      </body>
  </html>
        

  Observe que esses pares de chave-valor se referem ao título e descrição da página da web.

• Você também pode criar formulários que lembram 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 irá tomar. O campo input está 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 a opção autocomplete está desativada. O recurso autofocus está ativado.

• 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 folha de estilo em cascata, é uma linguagem de marcação que permite ajustar a estética dos seus arquivos HTML.

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

  <!DOCTYPE html>
  
  <!-- Demonstrates inline CSS with P tags -->
  
  <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;">
              Welcome to my home page!
          </p>
          <p style="font-size: small; text-align: center;">
              Copyright &#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, o text-align é definido como center.

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

  <!DOCTYPE html>
  
  <!-- Removes outer DIV -->
  
  <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">
              Welcome to my home page!
          </div>
          <div style="font-size: small">
              Copyright &#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 é invocado em todo o corpo do arquivo HTML.

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

  <!DOCTYPE html>
  
  <!-- Uses semantic tags instead of 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">
              Welcome to my home page!
          </main>
          <footer style="font-size: small">
              Copyright &#169; John Harvard
          </footer>
      </body>
  </html>
        

  Observe que o header e footer possuem estilos diferentes atribuídos a eles.

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

  <!-- Demonstrates class selectors -->
  
    <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">
                Welcome to my home page!
            </main>
            <footer class="small">
                Copyright &#169; John Harvard
            </footer>
        </body>
    </html>
        

  Observe que todas as tags de estilo são colocadas no head na estrutura da tag style. Observe também que atribuímos classes, chamadas de 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;
  }
        

  Observe que isso é exatamente o que apareceu em nosso arquivo HTML.

• Em seguida, podemos informar 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">
              Welcome to my home page!
          </main>
          <footer class="small">
              Copyright &#169; John Harvard
          </footer>
      </body>
  </html>
        

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

Frameworks

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

• O Bootstrap pode ser utilizado adicionando a seguinte tag link na seção 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 aprender mais sobre isso na Documentação do Bootstrap.

JavaScript

• JavaScript é outra linguagem de programação que permite a interatividade dentro das páginas da web.

• JavaScript suporta condicionais:

  if (x < y)
  {
  
  }
  else
  {
  
  }
        

• As variáveis também são suportadas:

  let counter = 0;
            

• Você também pode incrementar:

  counter++
                

• Os loops são muito semelhantes ao que você já viu antes em C:

  for (let i = 0; i < 3; i++)
  {
  
  }
                      

• O JavaScript permite que você leia e modifique dinamicamente o documento HTML carregado na memória, de modo que o usuário não precise recarregar a página 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 fica atento 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 ouvinte de eventos espera pelo clique em um dos botões. Então, o body.style.backgroundColor é alterado.

• De forma semelhante, considere o seguinte:

  <!DOCTYPE html>
  
  <html lang="en">
      <head>
          <script>
  
              // Toggles visibility of greeting
              function blink()
              {
                  let body = document.querySelector('body');
                  if (body.style.visibility == 'hidden')
                  {
                      body.style.visibility = 'visible';
                  }
                  else
                  {
                      body.style.visibility = 'hidden';
                  }
              }
  
              // Blink every 500ms
              window.setInterval(blink, 500);
  
          </script>
          <title>blink</title>
      </head>
      <body>
          hello, world
      </body>
  </html>
        

  Este exemplo faz um texto piscar 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="Query" 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 de autocompletar.

• Curiosamente, também podemos geolocalizar usando JavaScript:

  <!DOCTYPE html>
  
  <html lang="en">
      <head>
          <title>geolocation</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.

  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!