JavaScript: uma visão geral da linguagem e seu ecossistema

1
JavaScript
Uma visão geral da linguagem JavaScript e seu
ecossistema
.js Prof. Fabio Agostinho Boris
https:/
/fabioboris.com.br

3
O que é JavaScript?
● JavaScript é uma linguagem de programação:
– interpretada (script)
– multiplataforma
– multiparadigma
– com tipagem dinâmica fraca
● É uma das três principais tecnologias da WWW:
– HTML, CSS e JavaScript

5
JavaScript: Um pouco de história
● Criada em 1995 por Brendan Eich, na Netscape
Communications, foi inicialmente chamada de
LiveScript.
● A Netscape mudou seu nome para JavaScript para
posicioná-la como uma "companheira" da linguagem
Java, um produto da sua parceira Sun Microsystems.

6
JavaScript: padronização
● Atualmente, a linguagem de programação ECMAScript é
padronizada pelo Ecma International Commitee 39, o TC39.
● O TC39 é um comitê composto por membros, especialmente de
empresas concorrentes, como Apple, Facebook, Google,
Microsoft, entre outras, trabalhando juntas pelo bem da linguagem.
● Todas as reuniões do TC39 estão documentadas em um repositório
do GitHub: https:/
/github.com/tc39/notes.

7
JS: Linha do tempo e evolução
● 1995, maio: Nascimento (Netscape)
● 1997, junho: Padronização: ECMAScript 1 (TC39)
● 1998, junho: ECMAScript 2 (TC39)
● 1999, dezembro: ECMAScript 3 (TC39)
● 2006, agosto: jQuery (OpenJS)

8
● 2008, julho: ECMAScript 4 (TC39)
● 2008, setembro: V8 Engine (Google)
● 2009, maio: Node.js (Ryan Dahl)
● 2009, agosto: MongoDB*
● 2009, dezembro: ECMAScript 5 (TC39)
● 2009: PhoneGap/Cordova (Adobe/Apache)

9
● 2010, maio: JSON Web Token – JWT (IETF)
● 2010, outubro: AngularJS (Google)
● 2010, novembro: Express.js (TJ Holowaychuck)
● 2011, junho: ECMAScript 5.1 (TC39)
● 2012, outubro: TypeScript (Microsoft)

10
● 2013, maio: React (Facebook)
● 2013, julho: Electron (GitHub)
● 2013: Ionic Framework (Cordova)
● 2014, fevereiro: Vue.js (Evan You)
● 2014, setembro: Babel (Sebastian McKenzie)

11
● 2015, março: React Native (Facebook)
● 2015, junho: ECMAScript 6 – ECMAScript 2015 (TC39)
● 2015, setembro: GraphQL (Facebook)
● 2015, outubro: Next.js (Vercel)
● 2016, setembro: Angular (Google)

12
● 2018, maio: Deno (Ryan Dahl)

15
JS no "front-end"
● O código JavaScript é inserido em um documento HTML, através de uma
"tag" <script> Código JavaScript </script>
● O código pode estar em um arquivo ".js" separado do documento HTML e ser
referenciado a partir do atributo "src":
<script src="nome-do-arquivo.js"></script>
● Outra forma, é importar o código como um módulo, a partir de um arquivo ".js"
● Os elementos de um documento HTML podem ser acessados via JavaScript
a partir do DOM ("document object model")

16
JS no "back-end"
● Node.js é uma "runtime" de JavaScript assíncrona orientada a eventos
que permite execução de código no "back-end"
● Npm é o gerenciador de dependência oficial do Node.js
● Yarn é um popular gerenciador de dependências concorrente do Npm,
criado pela Facebook
● Deno é um projeto recente criado por Ryan Dahl, o mesmo criador do
Node.js, e é uma "runtime" de JavaScript e TypeScript projetada para
ser simples e segura

17
JavaScript: Onde usar?
● Web
● Server
● Mobile
● Desktop
● IoT (internet of things)

18
JS: web
● Navegadores modernos
– React
– Angular
– Vue
– Svelte

19
JS: server
● Terminal, on-premises, cloud
– Node.js
● Express.js
● Next.js
● Meteor
– Deno

20
JS: mobile
● Android e iOS
– React Native
– Ionic
– NativeScript

21
JS: desktop
● Windows, Mac e Linux
– Electron
– NW.js
– AppJS

22
JS: Internet of Things (IoT)
● Arduino, Raspberry, etc
– Johnny-Five
– Espruino
– IoT.js

24
JS: Ferramentas comuns
● Editor / IDE
– Visual Studio Code
– Web Storm
● Node.js
● Terminal
● Navegador
– Chrome (dev)
– Firefox (dev)
– Developer Tools
– Extensões

25
JS: Ferramentas online
● CodePen
● Repl.it
● GitHub Codespaces
● Google Cloud Shell

26
HTML e CSS
Antes de continuarmos, veremos um pequeno resumo
sobre HTML e CSS...

27
O que é HTML?
HTML ("hyper text markup language") é a linguagem
padrão para descrever a estrutura de páginas Web.

28
De forma mais específica, com
HTML, podemos...
… descrever a estrutura de páginas Web usando
marcação.

29
A sintaxe HTML: o que são "tags"
● As marcas da linguagem HTML são conhecidas como "tags".
● Os nomes das "tags" são declarados entre os caracteres:
– < e > (menor e maior, "angle brackets" ou "colchetes angulares").
● Uma "tag" tem a seguinte aparência:
– <nomedatag>Conteúdo</nomedatag>
– o fechamento é declarado com o caractere / antes do nome da "tag"
– por exemplo: <p>Um parágrafo HTML</p>

30
Um pouco mais sobre "tags"
● Algumas "tags" podem receber atributos dentro de sua
definição, ficando com a aparência:
– <nomedatag atributo="valor">Conteúdo</nomedatag>
● Outras "tags" não possuem marca de fechamento, sendo
definidas apenas por atributos e valores, por exemplo:
– <img src="foto-joao.jpg" alt="Foto de perfil do usuário João">

31
O que é CSS?
CSS ("cascading style sheet") é uma linguagem para
especificar como os documentos HTML são
apresentados aos usuários.

32
CSS no HTML
● Estilos CSS podem ser declarados em documentos HTML das
seguintes formas:
– no atributo global style de uma "tag"
<p style="color:blue; font-size:12pt;">Olá, mundo!</p>
– no conteúdo da "tag" <style>
<style>p { color:blue; font-size:12pt; }</style>
– em um arquivo vinculado, normalmente com a "tag" <link>
<link rel="stylesheet" href="estilos.css">

33
Olá, mundo!
Hora de colocar a mão na massa, digo no código!

34
Acessando as Dev Tools
● No navegador Chrome ou Firefox:
– atalho de tecla: F12 ou Ctrl + Shift + i, ou
– menu lateral direito superior, mais ferramentas,
ferramentas do desenvolvedor, e então
– acessar a aba "Console".

42
Links
● W3C Brasil: https:/
/w3c.br/
● W3C International: https:/
/www.w3.org/
● MDN Web Docs: https:/
/developer.mozilla.org/
● NIC.br: https:/
/www.nic.br/
● Node.js: https:/
/nodejs.org/

45
Obrigado!
Prof. Fabio Agostinho Boris
https:/
/fabioboris.com.br

JavaScript: uma visão geral da linguagem e seu ecossistema

Mais conteúdo relacionado

Mais procurados

Semelhante a JavaScript: uma visão geral da linguagem e seu ecossistema

JavaScript: uma visão geral da linguagem e seu ecossistema