JavaScript

Densenvolvimento de Sistemas Orientados a

Objetos II (DSOII)
Profs. Alex Sandro Roschildt Pinto e Frank Siqueira

1
 Primeira Pergunta O que é
Javascript???
https://developer.mozilla.org/pt-BR/docs/Aprender/JavaScript
“JavaScript é uma linguagem de programação que permite
implementar funcionalidades mais complexas em páginas web.

A cada momento uma página web faz mais do que apenas

mostrar informações estáticas para você - elas mostram em
tempo real conteúdos atualizados, ou mapas interativos,
animações gráficas em 2D/3D, vídeos, etc., você pode apostar
que o Javascript provavelmente está envolvido.”

2
 Primeira Pergunta O que é
Javascript???
JavaScript is the programming language of HTML and the Web.

JavaScript is easy to learn.

This tutorial will teach you JavaScript from basic to advanced.

https://www.w3schools.com/js/

3
 Primeira Pergunta O que é
Javascript???
“JavaScript é a linguagem de programação da Web. A maioria
dos sites modernos usa JavaScript, e todos os navegadores – em
computadores de mesa, consoles de jogos, tablets e
smartphones – incluem interpretadores JavaScript. Isso a torna
uma das linguagens de programação mais importantes
atualmente e uma das tecnologias que todo desenvolvedor Web
deve conhecer.”

JavaScript: O Guia Definitivo

4
 Onde Javascript é mesmo
usado???
“Pelo visto na Web – lado do cliente...”

Será que somente para este fim???

5
 Javascript para sistemas
Embarcados
http://johnny-five.io/

Johnny Five – Javascript para Sistemas Embarcados e

Robótica

6
 Javascript para sistemas
Embarcados??? Não era a
linguagem da Web e blablabla???

7
 NodeJs
Node.js® is a JavaScript runtime built on
Chrome's V8 JavaScript engine. - ( nodejs.org)

8
 NodeJs

Node.js é um interpretador, com código aberto, de código

JavaScript de modo assíncrono e orientado a eventos, focado em
migrar a programação do Javascript do lado do cliente para os
servidores, criando assim aplicações de alta escalabilidade
(como um servidor web), capazes de manipular milhares de
conexões/requisições simultâneas em tempo real, numa única
máquina física.

9
 NodeJs
Continua...

O Node.js é baseado no interpretador V8 JavaScript Engine

(interpretador de JavaScript open source implementado pelo
Google em C++ e utilizado pelo Chrome). Foi criado por Ryan
Dahl em 2009, e seu desenvolvimento é mantido pela fundação
Node.js em parceria com a Linux Foundation.

10
 React

•
O React é uma biblioteca JavaScript de código aberto para
criar interfaces de usuário.

•
É mantido pelo Facebook, Instagram e uma comunidade de
desenvolvedores individuais e outras empresas.

11
 Angular

Angular é uma plataforma de aplicações web de código-fonte

aberto e front-end baseado em TypeScript liderado pela Equipe
Angular do Google e por uma comunidade de indivíduos e
corporações.

12
 React Native
•
React Native é uma biblioteca Javascript criada pelo
Facebook. É usada para desenvolver aplicativos para os
sistemas Android e IOS de forma nativa.

13
Electron – Javascript for Desktop

14
Para o que nós queremos usar
Javascript?

15
Para o que nós queremos usar
Javascript?

16
 JavaScript – Introdução
•
Considerando que alguns banco de dados,
relacionais ou não (chamados de NoSQL),
conseguem lidar com dados no formato JSON,
é possível escrever 100% dos algoritmos de
uma aplicação usando apenas JavaScript.

17
 JavaScript – Histórico
•
A linguagem tem sua origem em meados dos
anos 1990 e está diretamente ligada aos
navegadores.
•
Seu objetivo era possibilitar que as páginas
HTML fossem mais dinâmicas permitindo que
os usuários interagissem com as páginas.

18
 JavaScript – Histórico
•
No final de 1995 a empresa Netscape
Communications lançou a versão 2 do seu
navegador Netscape Navigator que incluia
pela primeira vez um interpretador para a
linguagem JavaScript.

19
 JavaScript – Histórico
Em 1996 a Microsoft lançou seu navegador
Internet Explorer 3 contendo um
interpretador para a linguagem JScript que era
fortemente inspirada em JavaScript.
•
Começava nesta época a guerra dos
navegadores pois embora as duas linguagens
fossem muito semelhantes não era possivel
garantir que o mesmo código fosse executado
em ambos os navegadores.
20
 JavaScript – Histórico
•
Por iniciativa da Netscape, em 1997 a
organização Ecma publicou a especificação da
linguagem EcmaScript.
•
JavaScript passou então a ser uma
implementação desta especificação.

21
 Versões de ECMAScript

•
EcmaScript, em 1997.
•
EcmaScript 2, em 1998.
•
EcmaScript 3, em 1999.
•
EcmaScript 4, nunca oficialmente lançada devido a divergências entre os
membros do comitê.
•
EcmaScript 5, em 2009.
•
EcmaScript 5.1, em 2011.
•
EcmaScript 2015, em 2015. Esta versão é popularmente chamada de
ES6.
•
EcmaScript 2016, em 2016.
•
EcmaScript 2017, em 2017
22
ECMAScript® 2019 Language Specification
 JavaScript –
Elementos da Linguagem
•
Comentários:
// comentário em única linha
/* comentário em
mais de uma linha
*/
•
Palavras reservadas:
break, case, catch, class, const, continue, debugger, default, delete,
do, eles, enum, export, extends, false, finally, for, function, if,
implements, import, in, instanceof, interface, let, new, null,
package, private, protected, public, return, static, super, switch, this,
throw, true, try, typeof, var, void, while, with, yield.
•
Baseada no padrão ECMAScript -http://www.ecmascript.org/
23
JavaScript – Variáveis e Operadores
Um programa é formado por uma sequência de
declarações (statements) separados por “;”
•
Variáveis:
var v1 = 10;
var v2 = “testando”;
•
Operadores aritméticos: +, -, *, /, %, ++, --
•
Operadores de atribuição: =, +=, -=, *=, /=, %=
Exemplo: x += y equivale a x = x+y
•
Operadores lógicos:
&&, ||, !, ==, !=, >, >=, <, <=, === (valor e tipo
iguais), !== (valor e tipo diferentes) 24
 JavaScript – Seleção e Repetição
•
Seleção: if, if-else, switch (como em Java)
•
Repetição: while, do-while, for, for-in
Exemplo:
var pessoa ={nome:"Fulano",
sobrenome:"de Tal"};
for (atributo in pessoa)
pessoa[atributo];
–
Neste comando for, a variável atributo assumirá os
valores “nome” e “sobrenome”.
25
 JavaScript – Objetos
•
Object – para criar objetos
(exemplo será mostrado mais adiante)
•
Number – números decimais 64 bits
var n = new Number(55.28);
var p = 55.28;
•
Math – funções matemáticas (as tradicionais)
var raiz = Math.sqrt(16);
•
Date – data
var d = new Date();
d.getDay(); // retorna entre 0 e 6
d.getMonth(); // retorna entre 0 e 11 26
 JavaScript – Objetos
•
String –cadeia de caracteres; conta com
grande variedade de métodos
var s = “Fulano de Tal”;
s.toLowerCase(); // “fulano de tal”
•
RegExp – expressão regular
var er = new RegExp(“[a-z]+”);
var er = /[a-z]+; // pelo menos 1 letra
er.test(“teste”); // true
•
Boolean – assume os valores true ou false
27
 JavaScript – Arrays
•
Array: Conjunto de dados
var v1 = new Array(“bem”, “vindo”);
var v2 = [“bem”, “vindo”];
var v3 = []; // array vazio
v3[0] = “bem”; // array aumenta se necessário
•
Propriedade length : tamanho do array
v2.length // retorna 2
•
Método concat: une dois arrays
var v1 = [1,2,3];
var v2 = [4,5,6];
var v3 = v1.concat(v2); // [1,2,3,4,5,6] 28
 JavaScript – Arrays
•
Método join: retorna string com dados do array
var v1 = [1,2,3];
var s1 = v1.join(); // retorna “1,2,3”
var s2 = v1.join(“+”); // retorna “1+2+3”
•
Método push: adiciona um dado no final do array
var v1 = [];
v1.push(1); // [1]
v1.push(2); // [1,2]
•
Método pop: remove o último dado do array

29
 JavaScript – Arrays
•
Método reverse: inverte a ordem dos dados
var v1 = [1,2,3];
v1.reverse(); // [3,2,1]
•
Método shift: remove o primeiro dado
var v1 = [1,2,3];
v1.shift(); // [2,3]
•
Método unshift: adiciona o primeiro dado
var v1 = [2,3];
v1.unshift(1);// [1,2,3]
•
Método slice: extrai uma parte do array
var v1 = [1,2,3,4,5];
var v2 = v1.slice(3); // [4,5] 30
 JavaScript – Arrays
•
Método splice: substitui uma parte dos dados por
outros dados
var v1 = [1,2,3,4,5,6];
v1.splice(1,2,10,20,30); // [1,10,20,30,4,5,6]
Obs.: 1 – índice do início da remoção;
2 – quantos dados serão removidos
10,20,30,... - dados que serão inseridos
a partir do índice
•
Método sort: ordena os dados
var v1 = [8,3,6,2];
v1.sort(); // [2,3,6,8] 31
 JavaScript – Arrays
•
Método forEach: percorre o array aplicando
uma função em cada dado do array. A função
pode ter até 3 parâmetros:
–
O primeiro é o valor do dado;
–
O segundo é o índice do dado;
–
O terceiro é o próprio array;
•
Exemplo:
function dobre(e, i, a) {a[i] = e * 2;}
var v1 = [1,2,3];
v1.forEach(dobre); // [2,4,6] 32
 JavaScript – Funções
•
Funções são valores. Bem vindo à programação funcional!!!
–
Podem ser atribuídas à variáveis.
–
Podem ser passadas como parâmetro de uma função.
–
Podem ser retornadas como resultado da aplicação de uma
função.
•
Função tradicional:
function dobre(n) {return n *2;}
var v = dobre(5); // atribuirá o valor 10 à variável v.
•
Função como valor de variável:
var d = dobre;
d(10); // retornará 20
var triplique = function (n) {return n * 3;}
triplique(10); // retornará 30 33
 JavaScript – Funções
•
Função como parâmetro:
function mais5(fn, n) {return fn(n) + 5;}
var v = mais5(dobre, 10); // retornará 25
•
Função como valor resultante de outra
função:
function dobre(n) {return n * 2;}
function triplique(n) {return n * 3;}
function determineFator(v, f1, f2) {
if (v < 16) return f1;
else return f2; } 34
 JavaScript – Objetos
•
Um objeto contém um ou mais pares chave-valor.
–
A chave pode ser qualquer identificador JavaScript;
–
O valor pode ser qualquer valor JavaScript: número, string,
array, função, objeto.
•
Exemplo:
var pessoa = { nascimento: 1966,
nome: “Fulano de Tal”,
maisVelhoQue: function(ano) {
return this.nascimento < ano; }
};
pessoa.nascimento; // 1966
pessoa[“nome”]; // “Fulano de Tal” == pessoa.nome
pessoa.maisVelhoQue(1999); // true 35
 JavaScript e DOM
•
Todos os elementos contidos em uma página
são acessíveis através do objeto document
–
Exemplos:
•
document.title : o título da página
•
document.links : retorna um array com os links
contidos na página
•
document.forms : retorna um array com os formulários
contidos na página
–
Cada tag HTML é representada por um objeto
específico: Button, Link, Image, Form, etc.
36
 JavaScript e DOM
•
Problema: incompatibilidade entre browsers!
–
Na árvore DOM, alguns nomes de classes, atributos e
métodos dos objetos que representam as tags HTML
são diferentes ou não são implementados.
–
O pior dos pesadelos para o desenvolvedor de
aplicações:
•
Criar uma versão da aplicação para cada navegador.
•
Testar cada uma das versões.
•
Solução: bibliotecas cross-browser que escondem do
desenvolvedor as incompatibilidades.
–
Exemplo mais famoso: jQuery - http://jquery.com/
37
 JavaScript e AJAX
•
AJAX: Asynchronous JavaScript and XML
•
Sem AJAX:
–
Toda requisição HTTP ao servidor solicita uma nova página
HTML identificada pela URL indicada na requisição
–
Enquanto a resposta não chega, o browser fica congelado, pois a
requisição é síncrona
•
Com AJAX:
–
A requisição solicita dados ou fragmentos de página que serão
incorporados na página atual
–
A requisição é assíncrona, ou seja, o browser continua
respondendo às ações do usuário
–
Quando a resposta HTTP chega, uma função JavaScript é
executada para atualizar a página que está sendo exibida 38
 JavaScript – em página HTML
•
Três formas para incorporar código na página HTML:
–
Arquivo externo (extensão .js).
Exemplo: <script src=“arquivo.js”/>
–
Na própria página.
Exemplo: <script>
// ... código JavaScript ...
</script>
–
Como valor de atributo de tag HTML
(Obs.: não recomendado)
Exemplo: <button onClick=“... código JavaScript ...”>
OK</button>
39
 Nodejs
•
Interpretador de código JavaScript de modo assíncrono e
orientado a eventos
•
focado em migrar a programação do Javascript do
lado do cliente para os servidores,
•
criando assim aplicações de alta escalabilidade
(como um servidor web[1]), capazes de manipular
milhares de conexões/requisições simultâneas em
tempo real, numa única máquina física
•
O Node.js é baseado no interpretador V8 JavaScript
Engine (interpretador de JavaScript open source
implementado pelo Google em C++ e utilizado pelo
Chrome). 40
 Nodejs
•
Interpretador de código JavaScript de modo assíncrono e
orientado a eventos
•
focado em migrar a programação do Javascript do
lado do cliente para os servidores,
•
criando assim aplicações de alta escalabilidade
(como um servidor web[1]), capazes de manipular
milhares de conexões/requisições simultâneas em
tempo real, numa única máquina física
•
O Node.js é baseado no interpretador V8 JavaScript
Engine (interpretador de JavaScript open source
implementado pelo Google em C++ e utilizado pelo
Chrome). 41
 Nodejs
O Node.js usa um modelo de I/O direcionada a evento não
bloqueante que o torna leve e eficiente, ideal para
aplicações em tempo real com troca intensa de dados
através de dispositivos distribuídos.

https://nodejs.dev/a-brief-history-of-nodejs

42
 Diferenças entre Nodejs e o
Browser
•
Ambos Utilizam Javascript como linguagem de
programação
•
Entretanto, desenvolver um app para rodar no
browser é completamente diferente de desenvolver
um app Node.Js
•
Tirando o fato de ambos serem JavaScript, existem
diferenças radicais
•
Vantagem: usar a mesma linguagem tanto para o
lado cliente quanto para o lado servidor...

43
 Diferenças entre Nodejs e o
Browser (O que muda???)
•
No browser, a maioria do tempo você estará lidando com
o DOM e outras Web API´s (como cookies)
•
O que não existe no Node.JS (você não tem o
documento, janela e outros objetos disponibilizados
pelo browser.
•
No Browser, não temos todas as API providas pelo
Node.js (através dos módulos), como o filesystem
•
Outro diferença é que no Node.Js é possível controlar
o ambiente.
•
Comparado com o browser, onde não temos o luxo
de escolher o browser do usuário, isto torna-se
bastante conveniente. 44
 Diferenças entre Nodejs e o
Browser (O que muda???)
Isto significa que é possível usar as ultimas versões de
EcmaScript que a versão de NodeJS instalada suporta

Uma vez que o Javascript modifica-se rapidamente, mas os

browsers são atualizados mais lentamente (os usuários
mais ainda!), algumas vezes somos obrigados a usar versões
JavaScript / ECMAScript antigas (ou usar um transpiler –
Babel)

https://nodejs.dev/differences-between-nodejs-and-the-
browser
45
NodeJs

46