Desenvolvimento Web Moderno

Instrutor: Diego Martins de Pinho

Realização: Code Prestige    Apoio: iMasters

A Code Prestige é uma escola especializada no ensino de programação. Desenvolvemos diariamente artigos, cursos, livros digitais, vídeos e outros conteúdos que já auxiliaram mais de 6000 pessoas de todo o Brasil a alcançarem seus objetivos profissionais.

Redes Sociais

Site da Code Prestige

Cursos a distância

Instrutor

Livros

Livros

Redes Sociais

O que veremos hoje?

  • Revisão do JavaScript Básico
  • Exercício prático
  • Funcionalidades do ECMAScript 6

O que é o JavaScript?

Uma linguagem de programação interpretada criada para permitir maior interação do usuário com páginas web sem a necessidade de tratamento do servidor.

O JavaScript

  • Criada por: Brendan Eich
  • Primeiro release: 4 de dezembro de 1995
  • Versão atual: ES2017 (TC39 | ECMA-262)

Um pouco de história...

  • 1995: Sun e NetScape anunciaram a linguagem em um press release com o nome de Mocha
  • 1996: NetScape lançou o primeiro navegador com suporte a linguagem
  • 1996: Microsoft criou uma linguagem muito semelhante chamada JScript (incluída no IE 3.0)
  • 1996: NetScape submeteu as especificações do JS para padronização pela ECMA Internacional
  • 1997: Sai a primeira edição do ECMA-262, especificação da linguagem

Versões da ECMAScript

  • Junho 1997: Primeira edição
  • Junho 1998: Segunda edição
  • Dezembro 1999: Terceira edição
  • (abandonada): Quarta edição
  • Dezembro 2009: Quinta edição
  • Junho 2015: Sexta edição
  • Junho 2016: Sétima edição
  • Junho 2017: Oitava edição

Características

  • Imperativa e Estruturada
  • Baseada em objetos
  • Avaliação em tempo de execução
  • Funcional
  • Baseada em Protótipos

Onde pode ser usada?

  • Hoje em dia, em TUDO!

Podemos usar o JavaScript...

Legal, mas... como fazer tudo isso?

Como já dizia o Jack Estripador:

“Vamos por Partes”

Exercício 1

Objetivo

Criar uma página de frase do dia

    Requisitos

  • A página deve abrir mostrando uma frase
  • A frase deve ser seguida de quem a citou
  • Deve existir um botão que gera uma nova frase toda vez que pressionado

Gabarito

Link

O que vimos?

  • Como usar o JavaScript na página
  • Declaração de variáveis
  • Declaração de funções
  • Manipulação da DOM
  • Eventos
  • Requisições AJAX
  • Funções de Callback

Exercício 2

Objetivo

Criar uma página de clima do dia

Requisitos

  • Ao entrar, deve pegar a localização do usuário e mostrar a temperatura baseada nela
  • Mostrar pelo menos os seguintes dados: temperatura, descrição e timezone
  • Ter um botão que troca a temperatura de ºC para ºF e vice-versa

Utilizem

Gabarito

Link

ECMAScript 6

Material de referência: Link

ECMAScript 6

O ES6 (ES2015) trouxe muitas melhorias para o JavaScript e a tornaram uma linguagem ainda mais poderosa e fácil de se trabalhar

Novas funcionalidades

  • Métodos auxiliares de array
  • Declaração de variáveis com const e let
  • Template Strings
  • Arrow Functions
  • Parâmetros padrões em funções
  • Operadores Rest/Spread
  • Classes e Módulos
  • Funções Geradoras
  • Promises e Proxies

Vamos dar uma olhada em como estas melhorias funcionam...

Exemplos

Exercício 3

Objetivo

Criar uma página que faz consultas ao API do Wikipedia

Requisitos

  • O usuário deve ter uma caixa de busca para colocar o texto
  • Ao apertar um botão (ou pressionar enter), a aplicação deve consultar a API do Wikipedia e trazer os links dos resultados associados ao termo
  • Tentar utilizar as funcionalidades do ES6

Utilizem

Gabarito

Link

Próximos Passos

Agora que você já revisamos o básico do JavaScript, na próxima aula veremos:

  • O que é e como funciona o React
  • Refazer nossos apps usando React

Materiais para estudo