1

Sumário
1 - Introdução
1.1 - Origem
1.2 - Visão geral
1.3 - Por onde começar
1.4 - Hello World

2 - Amarrações
2.1 - Definições e declarações
2.2 - Tempos de amarração
2.3 - Closures
2.4 - Identificadores
2.5 - Ambiente e escopo de amarração
Sumário
3 - Valores e tipos de dados:
3.1 - Sistema de Tipos
3.2 - Tipos Compostos: Objeto
3.3 - Tipos Compostos: Array

4 - Variáveis e constantes:
4.1 - Armazenamento em memória principal
4.2 - I/O;
4.3 - Serialização
Sumário
5 - Expressões e comandos:
5.1 - Atribuição
5.2 - Comparação
5.3 - Aritmético
5.4 - Bit a bit
5.5 - Lógico
5.6 - String
5.7 - Condicional (Ternário)
5.8 - Unário
5.9 - Relacionais
5.10 -Curto Circuito
5.11 - Tipos de comandos e expressões
5.12 - Detalhes da linguagem
5.13 - Expressões
Sumário
6-Modularização:
6.1- Subprogramas e parâmetros
6.2 - Parâmetros Rest
6.2 - Pacotes e espaços de nome
6.3 - Arquivos separados

7 - Polimorfismo:
7.1 - Características
7.2 - Coerção
7.3 - Sobrecarga
7.4 - Paramétrico
7.5 - Inclusão
7.6 - Herança
Sumário
8 - Exceções
9 - Concorrência
9.1 - Processos e threads
9.2 - Semáforos
9.3 - Suporte avançado de JavaScript à programação concorrente
10 - Frameworks
10.1 - Frameworks
10.2 - Interação com HTML - JQuery
11 - Avaliação
12- Referências
1. Introdução
1.1 Origem

● Criada em 1995 por Brendan Eich enquanto trabalhava na

Netscape Communications Corporation

● Microsoft portou a linguagem para seu navegador

2
1.1 Origem

● Recebeu nomes como LiveScript e Mocha

● Java e JavaScript são completamente diferentes

● Javascript é a linguagem de programação mais usada no

mundo, lista divulgada pela firma de análise de mercado
RedMonk durante o mês de junho.

3
1.2 Visão Geral
JavaScript® (às vezes abreviado para JS) é uma linguagem leve,
interpretada e baseada em objetos com funções de primeira classe, mais
conhecida como a linguagem de script para páginas Web, mas usada
também em vários outros ambientes sem browser como node.js, Apache
CouchDB e Adobe Acrobat.

É uma linguagem de script multi-paradigma, baseada em protótipo que é

dinâmica, e suporta estilos de programação orientado a objetos, imperativo
e funcional.

4
1.2 Visão Geral

● É uma linguagem de scripting multiplataforma orientada a objetos

● Facilmente incorporada a outros produtos e aplicações, como navegadores
web
● É uma linguagem muito popular
● Muito utilizada no front-end junto com o HTML e CSS
● Multi paradigma
● Case-sensitive

5
1.2 Visão Geral

● No lado do cliente: Estende a linguagem básica através do fornecimento de

objetos para controle do navegador e seu Modelo de Objeto de Documento
(DOM).
● Por exemplo, extensões no lado do cliente permitem a uma aplicação colocar
elementos em um formulário HTML e responder a eventos do usuário como
cliques do mouse, entrada de dados em formulário e navegação na página.

6
1.2 Visão Geral

● Lado do servidor: Estende a linguagem básica fornecendo objetos relevantes

à execução de JavaScript no servidor.
● Por exemplo, extensões no servidor permitem a uma aplicação se comunicar
com um banco de dados relacional, disponibilizar continuidade de informação
entre uma chamada e outra da aplicação ou realizar manipulações de arquivo
em um servidor.

7
1.3 Por onde começar

Você pode escrever o código no arquivo .html ou criar um arquivo separado para
isso, caso opte pelo arquivo externo, use .js como extensão.

● No mesmo arquivo

Insira seu código preferencialmente dentro da tag </body>

<script> //código aqui </script>

● Arquivo externo

Insira o link do seu arquivo javascript no atributo src da tag <script>

<script src="arquivo.js"></script>

8
1.4 Hello World

● Você pode usar:

document.write();
para escrever no
documento.

9
1.4 Hello World

● Pode utilizar
console.log();
para escrever no
console

10
1.4 Hello World

● Pode utilizar
alert();
para criar um alerta

11
2. Amarrações
2.1 Definições e Declarações

● Instruções são chamadas de declaração e são separadas por um ponto e

vírgula (;)

● Espaços, tabulação e uma nova linha são chamados de espaços em branco.

● Se as instruções forem separadas por uma linha, você pode omitir o (;)

● label,break,continue e return funcionam da mesma forma que em java

13
2.1 Definições e Declarações

● Variáveis:

var - Declara uma variável, opcionalmente, inicializando-a com um valor.

let - Declara uma variável local de escopo do bloco, opcionalmente,

inicializando-a com um valor.

const - Declara uma constante apenas de leitura.

14
2.2 Tempos de amarração

● O tempo de vida das variáveis em JavaScript começa quando elas são

declaradas.
● Variáveis locais são descartadas quando a função é completada.
● Variáveis globais são descartadas quando uma página é fechada.
● Amarração tardia (dinâmica)

15
2.3 Closures

● Uma closure ocorre normalmente quando uma função é declarada dentro do

corpo de outra, e a função interior referencia variáveis locais da função
exterior
● JavaScript utiliza closures: A cada novo contexto criado dentro (inner) de um
contexto já existente tem acesso a todas as variáveis definidas no "de fora"
(outer):

16
2.3 Closures

● Closures são feitas através de cópia da referência das variáveis e não dos
valores, o que pode gerar problemas com efeitos colaterais
● O interpretador JavaScript mantém uma pilha de execution context conforme
as funções vão sendo chamadas. E é essa pilha que vai fornecer para o
interpretador a informação se o escopo da variável terminou ou não.

17
2.4 Identificadores

● A linguagem JavaScript faz distinção entre maiúsculas e minúsculas

(case-sensitive)

● Composto por caracteres alfanuméricos e o caractere sublinhado (_)

● Começar por um caractere alfabético ou sublinhado

● O nome da variável não deve ser uma palavra reservada.

18
2.4 Identificadores

19
2.4 Identificadores

● Lista de palavras reservadas:

break default função return var

case excluir if switch void
catch do em this while
const else instanceof throw por
continue finally let try
debugger for novo typeof

20
2.4 Identificadores

● Lista de palavras reservadas futuras

● Na linguagem JavaScript, palavras-chave reservadas futuras não devem ser
usadas como identificadores, mesmo que não tenham um significado
especial na versão atual.

CLASS enum export

extends import super

21
2.5 Ambiente e escopo de amarração

● A linguagem JavaScript tem dois escopos: global e local.

● Variáveis definidas no interior de uma função não podem ser acessadas fora
da função
● Funções definidas no escopo global podem acessar todas variáveis definidas
no escopo global
● Funções aninhadas podem acessar todas as variáveis definidas na função
externa e as variáveis na qual a função externa tem acesso.

22
2.5 Ambiente e escopo de amarração
// As seguintes variáveis são definidas no escopo // Um exemplo de função aninhada
global function getScore () {
var num1 = 20, var num1 = 2,
num2 = 3, num2 = 3;
nome = "Chamahk";

function add() {
// Esta função é definida no escopo global return nome + " scored " + (num1 + num2);
function multiplica() { }
return num1 * num2;
} return add();
}
multiplica(); // Retorna 60

getScore(); // Retorna "Chamahk scored 5"

23
2.5 Ambiente e escopo de amarração

var variavel = ‘fora’; var variavel = ‘fora’; function escopo() {

variavel = ‘dentro’;
function escopo() { function escopo(variavel) {
variavel = ‘dentro’; variavel = ‘dentro’; console.log(variavel); //dentro
}
console.log(variavel); //dentro console.log(variavel); //dentro
} } escopo();

escopo(); escopo(); console.log(variavel); //não está

definida
console.log(variavel); //dentro console.log(variavel); //fora

24
2.5 Ambiente e escopo de amarração
● Variáveis com escopo de bloqueio:

let x = 10; document.write("x: " + x + "<br/>");

var y = 10; document.write("y: " + y + "<br/>");
{ // Output:
let x = 5; // x: 5
var y = 5; // y: 2
{ }
let x = 2;
var y = 2; document.write("x: " + x + "<br/>");
document.write("x: " + x + "<br/>"); document.write("y: " + y + "<br/>");
document.write("y: " + y + "<br/>"); // Output:
// Output: // x: 10
// x: 2 // y: 2
// y: 2
}

25
3. Valores e tipos de dados
3.1 Sistemas e tipos
● O JavaScript possui tipagem dinâmica
● As variáveis podem ser tipadas ou não tipadas
● Não precisa declarar o tipo explicitamente, o tipo é definido de acordo com o valor da
variável

Tipos de Dados Primitivos Tipos de dados compostos

● String(cadeia de caracteres) Os tipos de dados compostos (de referência) são:
var string = ‘Joao’; ● Object (array,functions)
var vetor = [1,’turquesa’,false,2];
● Número var numero = 4;
var objeto = document.querySelector(‘h1’);

● Booleano var booleano = true; var objeto = $(‘h1’);

27
3.2 Tipos compostos: Objeto

Objetos são coleções de propriedades e métodos. Métodos são funções de um

objeto. Uma propriedade é um valor ou um conjunto de valores (no formato de
uma matriz ou um objeto) que é membro de um objeto.
JavaScript suporta quatro tipos de objetos:

● Objetos intrínsecos, como Array.

● Objetos criados por você.
● Objetos de host, como window (browser) e document.
● Objetos ActiveX. (Arquivos externos)

28
3.2 Tipos compostos: Objeto

29
3.2 Tipos compostos: Objeto

30
3.3 Tipos compostos: Array

● No JavaScript, um Array não reserva uma alocação contínua de memória de

tamanho pré definido ele é simplesmente um objeto glorificado com um
construtor único, com uma sintaxe literal e com um conjunto adicional de
propriedades e de métodos herdados de um protótipo de Array.

31
3.3 Tipos compostos: Array
1 var a = [];
1 var a = new Array(8);
2 a[0] = 8;
2 var b = new Array(8,9);
3 var b = [];
3 console.log(a.length); //8
4 b[0] = 8;
4 console.log(b.length); //2
5 b[1] = 9;
5 console.log(a[0]); //undefined
6 console.log(a.length);//1
6 console.log( b[0]); //8
7 console.log(b.length);//2

8 console.log(a[0]);//8

9 console.log(b[0]);//8
32
3.3 Tipos compostos: Array

● Um Array pode conter qualquer objeto do tipo primitivo. Dados de tipos

diferentes podem coexistir no mesmo Array.

1 var a = new Array(8, "cachorro",true, "fruta");

2 console.log(a);
3 if(a[2]==true){
4 console.log("verdadeiro");
5 }

33
3.3 Tipos compostos: Array
Quando você usa typeof no JavaScript para um Array, ele retorna “object”. Como sei se meu objeto é
do tipo Array?

1 function isArray(o) {
2 return Object.prototype.toString.call(o) === "[object Array]";
3 }

34
3.3 Tipos compostos: Array

Métodos predefinidos:
● concat faz cópia simples do Array e adiciona os argumentos
● join cria um string do Array. Adiciona o argumento como cola entre cada
membro do Array.
● shift remove e retorna o primeiro elemento
● pop remove e retorna o último elemento
● unshift anexa os argumentos na frente do Array
● push anexa os argumentos no final do Array

35
3.3 Tipos compostos: Array

Métodos predefinidos:

● reverse inverte o Array sem copiá-lo

● slice faz cópia simples da porção do Array delimitada por argumentos do índice
● splice remove elementos especificados do Array,e os substitui com argumentos
opcionais
● sort classifica o Array sem copiá-lo, opcionalmente usando um argumento
comparador
● toString chama join sem passar um argumento

36
4. Armazenamento
4.1 Armazenamento em memória principal

● Endereço da variável não é acessível

● Alocação dinâmica
● Alocação de memória por conta da LP
● LIberação de memória por conta da LP
● Presença do coletor de lixo

37
4.2 I/O

● Javascript interage com o usuário por meio de caixas de mensagem

Entrada: Saída:

var palavra = prompt("Digite uma palavra",""); alert(palavra);

38
4.3 Serialização
● Json (JavaScript Object Notation) var comida =
["strogonoff","frango","macarrao"];

● JSON.stringify() converte valores em var bebida = ["refrigerante","suco"];

JavaScript para uma String JSON.
var doces =
["brigadeiro","beijinho","cajuzinho","bolo"];
● JSON.parse() converte valores em
JSON em objeto JavaScript var matriz = [comida,bebida,doces];

var resultado = JSON.stringify(matriz);

● Leitura e escrita de arquivos não é possível no lado
do cliente. console.log(resultado);
//[["strogonoff","frango","macarrao"],["refri
gerante","suco"],["brigadeiro","beijinho","c
● Uso de ajax para leitura de arquivos ajuzinho","bolo"]]

39
5. Expressões e comandos
5.1 Atribuição
● Um operador de atribuição atribui um
valor ao operando à sua esquerda
baseado no valor do operando à direita.
● O operador de atribuição básico é o
igual (=), que atribui o valor do operando
à direita ao operando à esquerda. Isto é,
x = y atribui o valor de y a x.
● Os outros operadores de atribuição são
encurtamentos de operadores padrão,
como mostrado na tabela a seguir.

41
5.2 Comparação
● Um operador de comparação compara
seus operandos e retorna um valor
lógico baseado em se a comparação
é verdadeira.
● Os operandos podem ser numéricos,
strings, lógicos ou objetos.
● Strings são comparadas com base
em ordenação lexográfica utilizando
valores Unicode.
● Na maioria dos casos, se dois
operandos não são do mesmo tipo, o
JavaScript tenta convertê-los para um
tipo apropriado.

42
5.3 Aritmético
● Operadores aritméticos tomam valores
numéricos (sejam literais ou variáveis) como
seus operandos e retornam um único valor
numérico.
● Os operadores aritméticos padrão são os de
soma (+), subtração (-), multiplicação (*) e
divisão (/).
● Estes operadores trabalham da mesma forma
como na maioria das linguagens de
programação quando utilizados com números
de ponto flutuante (em particular, repare que
divisão por zero produz um NaN).

43
5.4 Bit a bit
● Operadores bit a bit tratam seus operandos
como um conjunto de 32 bits (zeros e uns),
em vez de tratá-los como números
decimais, hexadecimais ou octais.
● Por exemplo, o número decimal nove
possui uma representação binária 1001.
Operadores bit a bit realizam suas
operações nestas representações, mas
retornam valores numéricos padrões do
JavaScript.

44
5.5 Lógico
● Operadores lógicos são utilizados tipicamente com valores booleanos
(lógicos); neste caso, retornam um valor booleano

45
5.6 String
● O operador (+) pode ser usado
na concatenação de strings,
operando sobre strings.

46
5.7 Condicional Ternário
● É um tipo de operador com 3 operandos, de modo que o operador
assume um valor de acordo com uma condição, sintaxe:

condicao ? valor1 : valor2

47
5.8 Unário
● Um operador unário é uma operação com apenas um operando, Ex:
delete, typeof e void.

48
5.9 Relacionais
● Um operador relacional compara seus operandos e retorna um valor
booleano baseado em se a comparação é verdadeira. Ex: in e
instanceof

49
5.10 Curto Circuito
● JavaScript usa curto circuito nos
operadores lógicos:
○ false && qualquercoisa é
avaliado em curto-circuito como
falso.
○ true || qualquercoisa é avaliado
em curto-circuito como
verdadeiro.
● Precedência de operadores em JS:

50
5.11 Tipos de comandos e expressões
● JS utiliza o “for”, “while” e o “do/while” , idênticos aos de C e Java:

51
5.11 Tipos de comandos e expressões
● For-in: Executa uma ou mais instruções para cada propriedade de um objeto:

52
5.11 Tipos de comandos e expressões
● O for-each repete uma variável específica sobre todos os valores das
propriedades do objeto. Para cada propriedade distinta, uma declaração
específica é executada.
● O loop for-of percorre objetos iteráveis (incluindo Array, Map, Set, o objeto
arguments e assim por diante), chamando uma função personalizada com
instruções a serem executadas para o valor de cada objeto distinto.

53
5.11 Tipos de comandos e expressões
● For-each/For-of

54
5.12 Detalhes da linguagem

● JS utiliza labels e os comandos “return”,”break” e “continue” de maneira

similar a Java.
● Ponto e vírgula: Seu uso é opcional em JS com a finalidade de separar
instruções, geralmente ele pode ser omitido se duas instruções forem
escritas em linhas separadas.
● Em JavaScript, temos o ASI, Automatic Semicolon Insertion, ele é o
responsável por inserir automaticamente “ ; ” em determinadas situações.
Esse é assunto polêmico!

55
5.12 Detalhes da linguagem
● O “;” serve como um delimitador de statements. Mas devido ao ASI, o “\n”
também irá funcionar como delimitador de statement, exceto nos seguintes
casos:
1.O statement possui um parêntese, array literal ou objeto literal não
fechado ou acaba de qualquer outra forma a qual não seja um modo
válido de finalizar um statement.
2. A linha inteira é um -- ou ++ (neste caso, irá incrementar/decrementar
o próximo token)
3. É um for(), while(), do, if() ou else e não existe {
4. A próxima linha começa com [, (, +, -, *, /, ,, ., ou qualquer outro
operador binário que só pode ser encontrado entre dois tokens em uma
única expressão.
56
5.12 Detalhes da linguagem

● Existe mais uma regra sobre ASI na linguagem que cobre casos especiais.
Esses são chamados de “restricted productions”. Esta regra fala que, caso
exista um \n logo após um return, throw, break, continue ou um label o
statement sempre será finalizado, sem exceções.
● Existem outras regras do ASI que não estão no escopo deste trabalho.
● Contudo, é recomendado o uso do “;” sempre por uma questão de
legibilidade.

57
5.13 Expressões
● Uma expressão consiste em qualquer unidade válida de código que é
resolvida como um valor.
● Em JavaScript podemos categorizar as expressões da seguinte maneira:

Aritmética: é avaliada como um número, por exemplo 3.14159.

String: é avaliada como uma string de caracteres, por exemplo, "Fred" ou
"234".
Lógica: é avaliada como verdadeira ou falsa. (Costuma envolver
operadores lógicos).
Expressões primárias: Palavras reservadas e expressões gerais do
JavaScript.(Ex: this)
Expressão lado esquerdo: atribuição à esquerda de valores. (Ex: New)

58
5.13 Expressões

● É possível, em JS fazer agregação de valores para arrays e objects:

59
6. Modularização
6.1 Subprogramas e parâmetros

61
6.1 Subprogramas e parâmetros
Usando modularização na criação de objetos

62
6.1 Subprogramas e parâmetros

● Passagem por cópia:

● Parâmetros primitivos (como um número) são passados para as funções por
valor; o valor é passado para a função, mas se a função altera o valor do
parâmetro, esta mudança não reflete globalmente ou na função chamada.
● Passagem por referência:
● Se você passar um objeto (ou seja, um valor não primitivo, tal como Array ou
um objeto definido por você) como um parâmetro e a função alterar as
propriedades do objeto, essa mudança é visível fora da função, conforme
mostrado no exemplo a seguir:

63
6.1 Subprogramas e parâmetros

64
6.1 Subprogramas e parâmetros

● Funções também podem ser criadas por uma expressão de função. Tal
função pode ser anônima; ele não tem que ter um nome.
● No entanto, um nome pode ser fornecido com uma expressão de função e
pode ser utilizado no interior da função para se referir a si mesma.

65
6.1 Subprogramas e parâmetros

66
6.1 Subprogramas e parâmetros
● As expressões de função são convenientes ao passar uma função como um
argumento para outra função.

67
6.1 Subprogramas e parâmetros
● Recursividade:

68
6.2 Parâmetros Rest

● É possível ter uma quantidade de parâmetros variável:

ECMAScript 5
ECMAScript 6
function f (x, y) {
var a = Array.prototype.slice.call(arguments, 2); function f (x, y, ...a) {
return (x + y) * a.length; return (x + y) * a.length
}; }
f(1, 2, "hello", true, 7) === 9; f(1, 2, "hello", true, 7) === 9

69
6.3 Pacotes e espaço de nome

● Em JavaScript, um espaço de nomes é simplesmente outro objeto contendo

métodos, propriedades e objetos.
● A ideia por trás de criar um espaço de nomes em JavaScript é simples:
cria-se um objeto global e todas as variáveis, métodos e chamadas de função
tornam-se propriedades daquele objeto. O uso de espaços de nomes
também reduz a chance de conflitos de nomes em uma aplicação, já que os
objetos de cada aplicação são propriedades de um objeto global definido
pela aplicação

70
6.3 Pacotes e espaço de nome
Para utilizar o namespace é simples, basta
1 ar AppLabirintorium = function() {
seguir a hierarquia de objetos

2 return {
1 AppLabirintorium.metodo01();
3 metodo01 : function() {
2 AppLabirintorium.metodo02();
4 alert("Método número 01");

5 },

6 metodo02 : function() {

7 alert("Método número 02");

8 }

9 };

10 }(); 71
6.4 Arquivos separados
● Vantagens de JavaScript Externo
● A colocação de scripts em arquivos externos possui algumas vantagens:
Separa HTML e código
Isso torna o HTML e o JavaScript mais fáceis de ler e manter
Arquivos de JavaScript em cache podem acelerar cargas de página
● Para adicionar vários arquivos de script a uma página - use várias tags de
script:
<script src="/js/myScript1.js"></script>
<script src="myScript1.js"></script>

72
6.4 Arquivos separados
● O processo de minificação de arquivos, portanto, tem o objetivo de remover
caracteres dispensáveis de forma que o arquivo final tenha um tamanho
menor que o arquivo original, mas o mesmo resultado.
● No caso do JavaScript, ainda existem outras possíveis otimizações, como a
substituição de nomes grandes de variáveis ou funções por nomes mais
curtos. Além disso, o processo pode ser acompanhado de um
"embaralhamento" do código, que tem o objetivo de ofuscar o funcionamento
do código, mas sem interferir em seu resultado principal.
● Você pode dividir o código em dezenas de arquivos js, e compilar um arquivo
único, minificado, para ser entregue ao browser. Em geral, quanto menos
arquivos você entrega ao browser, mais rápida fica a app.

73
7. Polimorfismo
7.1 Características

Os métodos não podem ser sobrescritos

Amarração tardia

Não possui herança múltipla

75
7.2 Coerção
● JavaScript é uma linguagem fracamente tipada.
● O tipo de uma variável é o tipo do valor dela.
● Em JavaScript, você pode executar operações em valores de tipos diferentes
sem gerar uma exceção.
● Regras de coerção:
○ número + string => número vira string.
○ booleano + string => booleano vira string.
○ número + booleano => booleano vira número.
var x = 2000; var x = true; var x = 2000;
var y = "Hello"; var y = "Hello"; var y = true;

x = x + y; x = x + y; x = x + y;
document.write(x); document.write(x); document.write(x);

// Output: // Output: // Output:

// 2000Hello // trueHello // 2001

76
7.3 Sobrecarga

● Sobrecarga de operador
var a = 2;
var b = 4;
console.log(a+b); //6

var a = 'Hello';
var b = 'World';
console.log(a+b); //HelloWorld

77
7.4 Paramétrico

● Se manifesta na declaração de var Cachorro = {

tipos, visto que o identificador raça: "Yorkshire",
cor: "Caramelo",
var declara tipos primitivo e
};
objetos
● É possível utilizar diversos tipos var qtd = 1;
em uma mesma variável var dono = "João";
var vet = [dono,qtd,Cachorro];
console.log(vet);
//Output
//[“João, 1, {...}]

78
7.5 Inclusão

ECMAScript 5 ECMAScript 6
var Shape = function (id, x, y) { class Shape {
this.id = id; constructor (id, x, y) {
this.move(x, y); this.id = id
}; this.move(x, y)
Shape.prototype.move = function (x, y) { }
this.x = x; move (x, y) {
this.y = y; this.x = x
}; this.y = y
}
}

79
7.5 Inclusão

ECMAScript 5 ECMAScript 6
var Rectangle = function (id, x, y, width, height) { class Rectangle extends Shape {
Shape.call(this, id, x, y); constructor (id, x, y, width, height) {
this.width = width; super(id, x, y)
this.height = height; this.width = width
}; this.height = height
Rectangle.prototype = Object.create(Shape.prototype); }
Rectangle.prototype.constructor = Rectangle; }
var Circle = function (id, x, y, radius) { class Circle extends Shape {
Shape.call(this, id, x, y); constructor (id, x, y, radius) {
this.radius = radius; super(id, x, y)
}; this.radius = radius
Circle.prototype = Object.create(Shape.prototype); }
Circle.prototype.constructor = Circle; }

80
7.6 Herança
● JavaScript adotou programação baseada em protótipos é um estilo de
programação orientada a objetos na qual não temos presença de classes.

● A reutilização de comportamento (equivalente à herança das linguagens

baseadas em classes) é realizada através de um processo de decorar (ou
expandir) objetos existentes que servem como protótipos. Este modelo
também é conhecido como sem classes, orientado a protótipo, ou
programação baseada em exemplares.

81
7.6 Herança
● O modelo baseado em protótipos provê herança dinâmica, que é o quando
uma herança pode variar para objetos individuais.

● Funções podem ser propriedades de objetos, sendo executadas como

objetos tipados livres

82
8. Excessões
8.1 Exceções

● De maneira similar a JAVA, JavaScript também manipula exceções através

dos comandos throw, try,catch e finally:

84
8.1 Exceções
● A declaração throw lança uma exceção definida pelo usuário. A execução da
função atual vai parar (as instruções após o throw não serão executadas), e o
controle será passado para o primeiro bloco catch na pilha de chamadas. Se
nenhum bloco catch existe entre as funções "chamadoras", o programa vai
terminar.
● A declaração try...catch é composta por um bloco try, que contém uma ou
mais declarações, e zero ou mais blocos catch, contendo declarações que
especificam o que fazer se uma exceção é lançada no bloco try.
● O bloco finally contém instruções para executar após os blocos try e catch,
mas antes das declarações seguinte a declaração try...catch. O bloco finally é
executado com ou sem o lançamento de uma exceção

85
8.1 Exceções

86
9. Concorrência
9.1 Processos e threads
● Se seu aplicativo deve executar computação suficiente para causar um
atraso notável, você deve permitir que o documento seja carregado
completamente antes.
● Executando essa computação, e você deve certificar-se de notificar o usuário
de que a computação está em andamento e que o navegador não está
pendurado
● Se for possível quebrar o seu cálculo em subtarefas discretas, você pode
usar métodos como setTimeout()
● e setInterval() para executar as subtarefas em segundo plano enquanto
atualiza um indicador de progresso que exibe feedback para o usuário.

89
9.2 Semáforos

● setTimeout() e setInterval() permitem que você registre uma função a ser

invocada uma vez ou repetidamente após um determinado período de tempo
decorrido.
● O método setTimeout() do objeto Window agenda uma função a ser
executada após um número especificado de milissegundos decorridos.
● SetTimeout() retorna um valor que pode ser passado para clearTimeout()
para cancelar a execução da função agendada.
● SetInterval() é como setTimeout(), exceto que a função agendada.
especificada é chamada repetidamente em intervalos do número
especificado de milissegundos.

90
9.2 Semáforos
1 <script>
2 var myVar; 16 break;
3 function runLevels(level)
4 { 17 case 2: // Yellow light
5 switch(level) { 18 console.log("Yellow: Level = " + level);
6 case 0: // Red light 19 myVar = setTimeout(function(){
7 console.log("Red: Level = " + level);
8 myVar = setTimeout(function(){ 20 runLevels(0); }, 1000);
21 break;
9 runLevels(level+1); }, 3000);
10 break; 22 default: // break
11 case 1: // Green light 23 clearTimeout(myVar);
12 console.log("Green: Level = " + level); 24 }
13 myVar = setTimeout(function(){
25 };
14 runLevels(level+1); }, 3000); 26</script>
91
9.3 Suporte avançado de Javascript
à programação concorrente
Quando uma função assíncrona é chamada, ela retorna uma Promise. Quando a
função assíncrona retorna um valor, a Promise será resolvida com o valor
retornado. Quando a função assíncrona lança uma exceção ou algum valor, a
Promise será rejeitada com o valor lançado.

Uma função assíncrona pode conter uma expressão await, que pausa a execução
da função assíncrona e espera pela resolução da Promise passada, e depois
retoma a execução da função assíncrona e retorna o valor resolvido.

92
9.3 Suporte avançado de Javascript
à programação concorrente
1 async function
2 pegarDadosProcessados(url) {
3 let v;
4 try {
5 v = await baixarDados(url);
6 } catch(e) {
7 v = await baixarDadosReservas(url);
8 }
9 return processarDadosNoWorker(v);
10 }

93
9.3 Suporte avançado de Javascript
à programação concorrente

No event loop cada

mensagem é processada 1 while(queue.waitForMessage()){
completamente antes de 2 queue.processNextMessage();
outra mensagem ser
processada. 3 }

94
9.3 Suporte avançado de Javascript
à programação concorrente
● O JavaScript é um ambiente de sequência única, isso significa que não é
possível executar vários scripts ao mesmo tempo.
● A especificação Web Workers (link em inglês) define uma API para geração
de scripts de segundo plano no seu aplicativo da web. O Web Workers
permite executar tarefas como disparar scripts de longa duração para
executar tarefas muito dispendiosas, mas sem bloquear a interface de
usuário ou outros scripts para manipular interações com o usuário.
● O Workers utiliza a transmissão de mensagem do tipo sequência para obter
paralelismo. É perfeito para manter a interface atualizada, com desempenho
e responsiva para os usuários

95
10. Frameworks
10.1 Frameworks

● Um framework, é uma abstração que une códigos comuns entre vários

projetos de software provendo uma funcionalidade genérica

● JavaScript deve muito da sua fama na comunidade de programação aos

seus frameworks

● Grande empresas utilizam frameworks JavaScript como por exemplo Google,

Facebook, Microsoft e GitHub.

97
10.1 Frameworks
● Angular.Js:

É um Framework MV, usado pelo google, para desenvolvimento do front-end de

aplicações web, ou seja, que rodam dentro do navegador do cliente. Sua filosofia
parte de que uma programação declarativa é muito mais importante que uma
programação imperativa quando se trata de desenvolvimento web.

● Electron.Js:

É um framework usado pela GitHub que permite desenvolver aplicações para

desktop GUI usando componentes front end e back end originalmente criados
para aplicações web. O editor de texto ATOM foi desenvolvido utilizando o
Electron.
98
10.1 Frameworks
● Node.Js:

Node.js é um projeto de código aberto projetado para auxiliar na escrita de

programas em JavaScript que conversem com redes, sistema de arquivos ou
outro I/O, tão utilizado que existem frameworks que usam o Node.Js ou seja,
Frameworks de Frameworks

● Vue.Js:

Vue (pronuncia-se /vjuː/, como view, em inglês) é um framework progressivo para

a construção de interfaces de usuário, considerado o framework de
desenvolvimento front end mais usado em 2016

99
10.2 Interação com HTML - JQuery
● jQuery é uma biblioteca de funções JavaScript que interage com o
HTML

● Lançada em dezembro de 2006 no BarCamp, de Nova York, por John

Resig.

● Redução de código

● Client-side

● Usada por cerca de 77% dos 10 mil sites mais visitados do mundo,
jQuery é a mais popular das bibliotecas JavaScript

100
10.2 Interação com HTML - JQuery

101
10.2 Interação com HTML - JQuery
● Each
● É possível utilizar
elementos do html no
javascript abrindo um
leque para diversas
possibilidades

102
10.2 Interação com HTML - JQuery

103
11. Avaliação
11.1 Avaliação da linguagem
Critérios gerais C C++ Java JavaScript

Aplicabilidade Sim Sim Parcial Parcial

Confiabilidade Não Não Sim Não

Aprendizado Não Não Não Sim

Eficiência Sim Sim Parcial Não

Portabilidade Não Não Sim Sim

Método de Projeto Estruturado Estruturado e OO OO Multiparadigma

E evolutibilidade Não Parcial Sim Sim

105
11.1 Avaliação da linguagem
Critérios gerais C C++ Java JavaScript
Reusabilidade Parcial Sim Sim Sim
Integração Sim Sim Parcial Sim
Escopo Sim Sim Sim Sim
Expressões e
comandos Sim Sim Sim Sim
Tipos Primitivos e
compostos Sim Sim Sim Sim
Gerenciamento de
memória Programador Programador Sistema Sistema
JDBC,biblioteca de
Biblioteca de classes classes,
Persistência dos dados Biblioteca de funções e funções serialização JSON

106
11.1 Avaliação da linguagem
Critérios gerais C C++ Java JavaScript
Lista variável, default, Lista variável, por valor Lista variável, por valor
Passagem de Lista variável e por por valor e por e por cópia de e por cópia de
parâmetros valor referência referência referência
Encapsulamento e
proteção Parcial Sim Sim Não
Sistema de tipos Não Parcial Sim Não
Verificação de Tipos Estática Estática/Dinâmica Estática/Dinâmica Dinâmica
Polimorfismo Coersão e sobrecarga Todos Todos Todos
Exceções Não Parcial Sim Sim
Não(Biblioteca de Não(Biblioteca de
Concorrência funções) funções) Sim Sim

107
12. Referências
12 Referências
http://www.criarweb.com/manual/javascript/

https://msdn.microsoft.com/pt-br/library/67defydd%28v=vs.94%29.aspx

https://canaltech.com.br/internet/O-que-e-e-como-funciona-a-linguagem-JavaScrip
t/

https://www.tecmundo.com.br/software/119217-javascript-linguagens-populares-m
omento-veja.htm

http://br.ccm.net/faq/2680-javascript-introducao-a-linguagem-javascript

https://tableless.com.br/modularizacao-em-javascript/
12 Referências
https://developer.mozilla.org/pt-BR/docs/Web/JavaScript/Guide/Trabalhando_com
_Objetos

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

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

http://loopinfinito.com.br/2013/10/22/mamilos-pontos-e-virgulas-em-js/

https://felipenmoura.com/articles/escopo-this-e-that/

https://www.showmetech.com.br/as-linguagens-de-programacao-mais-usadas-de-
2017-ate-julho/
12 Referências

https://rodrigorgs.github.io/aulas/mata56/aula15-concorrencia

https://imasters.com.br/artigo/21197/javascript/entendendo-arrays-no-javascript/?t
race=1519021197&source=single

https://www.showmetech.com.br/as-linguagens-de-programacao-mais-usadas-de-
2017-ate-julho/

https://medium.com/weyes/entendendo-o-uso-de-escopo-no-javascript-3669172ca
5ba

https://pt.stackoverflow.com/questions/1859/como-funcionam-closures-em-javascr
ipt
12 Referências

http://nodebr.com/entendendo-o-node/

https://risingstars2016.js.org/#framework

https://developer.mozilla.org/pt-BR/docs/Web/JavaScript/Reference/Statements/th
row

https://developer.mozilla.org/pt-BR/docs/Web/JavaScript/Guide/Values,_variables,
_and_literals