Fundamentos da programação web

JavaScript

A linguagem de programação da Web

JavaScript não é Java

Não confunda 😉

Navegador e o JavaScript

Como a web funciona

A Internet e a World Wide Web

A web é como uma estrada

A estrada da web

Sua conexão de Internet

A rua entre sua casa e uma loja.

TCP/IP

Os mecanismos de transporte para contatar a loja.

DNS

Quando você procura o endereço e o telefone da loja.

HTTP

O idioma que você usa para falar com o atendente.

Arquivos do site

São os produtos oferecidos pela loja.

A comunicação na prática

O que acontece quando você digita um endereço no browser?

O servidor web é como um mordomo

Endereço IP e Portas

Portas conhecidas

Veja mais 🔖

Como a Web funciona

Como funciona a Internet e a World Wide Web

Websites

Sites Estáticos

Fornece o conteúdo de arquivos hospedados.

Não há interação com o cliente.

HTML / CSS / JavaScript

Sites Dinâmicos

Fornece a saída gerada por um programa.

Conteúdo diferente em determinadas condições.

PHP / Ruby / Python / ASP.NET / Java

Sites Estáticos

Servidor web estático

Sites Dinâmicos

Servidor web dinâmico

Lado cliente vs Lado servidor

A programação web acontece em códigos relevantes para o cliente e códigos relevantes para o servidor.

Frontend vs Backend

Frontend

Backend

HTTP

O protocolo dos navegadores e servidores web

O HTTP é o protocolo de comunicação utilizado pelos navegadores e servidores web. Quando o navegador solicita uma página web é chamado de requisição e quando o servidor web envia a página solicitada de volta é chamado de resposta.

O que é um protocolo de comunicação?

Protocolos não se misturam

Características de HTTP

• 🔁 Requisição-Resposta
• 🖼️ Independente de mídia
• 📨 Sem estado

Equivalência de Nomes

Baixe o Insomnia em https://insomnia.rest/

URI/URL

O identificador de endereços na Internet.

Exemplos de URI/URL

• https://www.facebook.com/zuck
• ftp://ftp.uhserver.com
• tg://resolve?domain=pavel
• mailto:fulanodetal@gmail.com

URL HTTP

A requisição HTTP

Métodos de requisição HTTP

Elementos da requisição HTTP

          GET /blog/ HTTP/1.1
          Host: www.exemplo.com.br
          User-Agent: Mozilla/5.0 (Linux x86) Chrome/59.0
          Accept: text/html
          Accept-Charset: UTF-8
          Accept-Language: pt-br
          Cookie: Variant=1; Theme=blue;
          Referer: http://exemplo.com/index.html
          If-Modified-Since: Sat, 07 Aug 2017 21:18:31 GMT
           
        

            ↔️ Linha de requisição (método/caminho/versão)
            ↔️ O servidor desejado
            ↔️ A identificação do browser
            ↔️ O tipo de conteúdo esperado pelo browser
            ↔️ A codificação de caracteres esperada
            ↔️ O idioma esperado pelo browser
            ↔️ O browser envia os cookies armazenados
            ↔️ Browser envia site que originou a requisição
            ↔️ Faz uma requisição condicional
          

          POST /blog/cadastro.php HTTP/1.1
          Host: www.exemplo.com.br
          Accept: text/html
          Accept-Charset: UTF-8
          Accept-Language: pt-br
          Content-Type: application/x-www-form-urlencoded
          Content-Length: 35
          Cookie: Variant=1; Theme=blue;

          name=John+Darling&address=Neverland
        

          
            
            
            
            
            ↔️ O tipo de conteúdo do corpo da requisição
            ↔️ O tamanho em bytes do corpo da requisição
            
            
            🔵️ O corpo da requisição
          

Leitura da Requisição em Java

      protected void doGet(HttpServletRequest request, HttpServletResponse response) {
          // Método da requisição: "GET", "POST", etc.
          String metodo = request.getMethod();

          // URI da requisição
          String uri = request.getRequestURI();

          // Query string, se houver
          String queryString = request.getQueryString();

          // Cabeçalhos
          String host       = request.getHeader("Host");
          String userAgent  = request.getHeader("User-Agent");
          String accept     = request.getHeader("Accept");
          String acceptLang = request.getHeader("Accept-Language");
          String cookie     = request.getHeader("Cookie");

          // Corpo da requisição
          BufferedReader reader = request.getReader();
      }
    

A resposta HTTP

Códigos de resposta HTTP

1xx Informativa

200 OK

A maioria dos sites devolvem essa resposta.

O corpo da resposta geralmente estará preenchido.

Veja outros códigos dessa classe

301 Moved Permanently (Movido Permanentemente)

Esta e todas as solicitações futuras devem ser redirecionadas para uma dada URI.

302 Found (Encontrado)

O site foi movido temporariamente para uma dada URI.

303 See Other (Veja Outro)

Normalmente os browsers, quando recebem essa resposta, tem o mesmo comportamento do código 302.

304 Not Modified (Não Modificado)

Indica que o recurso solicitado não foi modificado. Essa resposta é dada quando a requisição tem um cabeçalho If-Modified-Since.

307 Temporary Redirect (Redirecionamento Temporário)

Semelhante ao código 302, mas o método de requisição não deve mudar.

Veja outros códigos dessa classe

401 Unauthorized (Não autorizado)

O usuário não está autorizado e deve fornecer um usuário e senha.

Note que, nesses casos, o navegador vai abrir uma caixa para digitar usuário e senha.

403 Forbidden (Proibido)

Acesso a um certo recurso é proibido.

O servidor pode restringir acesso a todos ou a alguns usuários.

Diferente do código 401, não será solicitado autenticação.

404 Not Found (Não Encontrado)

O recurso solicitado não existe.

O segundo código de resposta mais comum, depois de 200.

405 Method Not Allowed (Método Não Permitido)

O método de requisição usado pelo cliente não é permitido para o recurso atual.

414 URI Too Long (URI Muito Longa)

A URI fornecida é muito longa.

Normalmente isso quer dizer que foi feito uma requisição GET, mas deveria ser feita uma requisição POST.

Veja outros códigos dessa classe

500 Internal Server Error (Erro Interno do Servidor)

Indica que houve um erro no servidor ao processar a requisição.

Por exemplo, uma exceção.

Veja outros códigos dessa classe

Elementos da resposta HTTP

          HTTP/1.1 200 OK
          Content-Type: text/html; charset=utf-8
          Content-Lenght: 27855
          Set-Cookie: Variant=1; Theme=blue;
          Cache-Control: max-age=3600

          <!DOCTYPE html>
          <html lang="pt-BR">
          …
        

            ↔ Código de estado da resposta
            ↔️ O tipo de conteúdo do corpo da resposta
            ↔️ O tamanho em bytes do corpo da resposta
            ↔️ O servidor envia cookies para o browser armazenar
            ↔️ O servidor indicando para o cliente fazer cache
            
            🔵️ Início do corpo da resposta
            🔵
            🔵
          

          HTTP/1.1 301 Moved Permanently
          Location: https://www.wikipedia.org/
          Content-Type: text/html; charset=iso-8859-1
          Content-Length: 234
          
          <!DOCTYPE HTML PUBLIC "-//IETF//DTD HTML 2.0//EN">
          <html><head>
          <title>301 Moved Permanently</title>
          …
          

          
            ↔️ Local para onde o browser deve redirecionar
          

O código abaixo pode não funcionar!

      PrintWriter conteudo = response.getWriter();
      conteudo.println("<html><body>Exemplo</body></html>");

      response.setStatus(200);
      response.setHeader("Content-Type", "text/html");
      response.setHeader("Content-Language", "pt-BR");
    

O código de estado e os cabeçalhos são enviados para o cliente antes do corpo da resposta.

Páginas de Erro

O método sendError emite uma página de erro.

      response.sendError(400);
    

Negociação de Conteúdo

MIME-type

          tipo/subtipo
        

          text/plain
          text/html
          text/css
          text/javascript
          image/jpeg
          image/png
          audio/mpeg
          audio/ogg
          audio/*
          video/mp4
          application/octet-stream
        

Redirecionamento HTTP

Principais Códigos de Redirecionamento

301 Moved Permanently (Movido Permanentemente)

Esta requisição e as próximas devem ir para uma dada URI.

302 Found (Encontrado)

O site foi movido temporariamente para uma dada URI.

303 See Other (Veja Outro)

Semelhante ao código 302.

304 Not Modified (Não Modificado)

Redirecionamento para o cache local do browser.

307 Temporary Redirect (Redirecionamento Temporário)

Semelhante ao código 302.

Se o lado servidor da Wikipédia fosse em Java, provavelmente teria o seguinte código.

      response.setStatus(301);
      response.setHeader("Location", "https://www.wikipedia.org/");
    

Atalho em Java para redirecionar

      response.sendRedirect("https://www.wikipedia.org/");
    

Cache HTTP

O protocolo HTTP especifica que o conteúdo da resposta do método GET pode ser mantido em cache.

Processo de Cache do Lado Cliente

        GET /index.html HTTP/1.1
        Host: www.exemplo.com.br
        …
      

        HTTP/1.1 200 OK
        Last-Modified: Fri, 25 Aug 2017 21:15:59 GMT
        …