Este documento fornece um resumo da história e características da linguagem JavaScript em 3 frases:
1) JavaScript foi criada originalmente em 1995 para ser usada no navegador Netscape Navigator e teve influências de linguagens como Java, Scheme, Self e Perl.
2) A linguagem é interpretada, possui tipagem dinâmica e fraca, orientação a objetos baseada em protótipos e funções de primeira classe.
3) JavaScript evoluiu muito desde então e atualmente está na versão ECMAScript 6, sendo uma das linguagens de programação
2. Rodrigo Branas
rodrigo.branas@agilecode.com.br
http://www.agilecode.com.br
Formado em Ciências da Computação pela UFSC e
MBA em Gerenciamento de Projetos pela FGV, é
arquiteto de software há mais de 15 anos,
especialista nas linguagens Java e JavaScript. É
também autor do livro AngularJS Essentials e de
diversos artigos da revista Java Magazine. Além disso,
é professor e palestrante, tendo participado da formação de mais de
1.000 desenvolvedores de software e apresentado mais de 100
palestras em eventos no Brasil e no exterior. Fundador da Agile Code,
uma empresa de treinamento e consultoria, atualmente é
apresentador de um canal no YouTube sobre JavaScript, AngularJS e
muito mais!
3. Acompanhe a série Desvendando a linguagem
JavaScript pelo YouTube em:
http://www.youtube.com/rodrigobranas
10. Boa parte dos problemas tem relação direta
com a DOM, não com a linguagem
11. DOM, ou Document Object Model, é uma API
padronizada pela W3C em 1998 que permite a
manipulação de documentos escritos em HTML,
XHTML e XML.
12. Você costuma ler o manual antes de
utilizar um produto que comprou?
13.
14. "A linguagem JavaScript é a única que as
pessoas acham que não precisam aprender
antes de começar a utilizar"
(Douglas Crockford)
15. O problema é que ela é utiliza conceitos
bem diferentes das outras linguagens
que estamos acostumados!
16. Era uma vez, uma linguagem de
programação chamada HyperTalk
17. A linguagem foi criada por Dan Winkler em
1987 para a plataforma HyperCard da Apple
18.
19. Linguagem HyperTalk
Extremamente amigável, ideal para iniciantes
1. on mouseUp
2. put "100,100" into pos
3. repeat with x = 1 to the number of card buttons
4. set the location of card button x to pos
5. add 15 to item 1 of pos
6. end repeat
7. end mouseUp
20. A Netscape teve a ideia de implementar
um conceito semelhante!
39. • A linguagem JavaScript é interpretada
• Possui orientação a objetos baseada
em protótipos, não possuindo classes
40. • A linguagem JavaScript é interpretada
• Possui orientação a objetos baseada
em protótipos, não possuindo classes
• A linguagem possui uma tipagem fraca
e dinâmica
41. • A linguagem JavaScript é interpretada
• Possui orientação a objetos baseada
em protótipos, não possuindo classes
• A linguagem possui uma tipagem fraca
e dinâmica
• Além disso, possui funções de primeira
classe
42. • A linguagem JavaScript é interpretada
• Possui orientação a objetos baseada
em protótipos, não possuindo classes
• A linguagem possui uma tipagem fraca
e dinâmica
• Além disso, possui funções de primeira
classe
• A linguagem não apresenta suporte a
programação multi-thread
43. • A linguagem JavaScript é interpretada
• Possui orientação a objetos baseada
em protótipos, não possuindo classes
• A linguagem possui uma tipagem fraca
e dinâmica
• Além disso, possui funções de primeira
classe
• A linguagem não apresenta suporte a
programação multi-thread
• Está atualmente na versão 6
46. As variáveis devem ser criadas seguindo as
regras:
• Devem começar por uma letra, $ ou _
47. As variáveis devem ser criadas seguindo as
regras:
• Devem começar por uma letra, $ ou _
• Após a primeira letra, podem conter
números
48. As variáveis devem ser criadas seguindo as
regras:
• Devem começar por uma letra, $ ou _
• Após a primeira letra, podem conter
números
• Pela convenção, começam com letra
minúscula e usam camelCase
49. As variáveis devem ser criadas seguindo as
regras:
• Devem começar por uma letra, $ ou _
• Após a primeira letra, podem conter
números
• Pela convenção, começam com letra
minúscula e usam camelCase
• São case-sensitive
50. Declarando uma variável
1. var name = "AgileCode";
2. var top10 = [1, 2, 3, 4, 5, 6, 7, 8, 9, 10];
3. var $scope = {title: "JavaScript", version: "6"};
4. var _person = "John";
5. var numberCode = 897987987;
6. var a = 10, b = 9, c = 8;
7. var language;
52. Criando um Number
1. var nota = 10;
2.
3. nota.toExponencial(2); // 100
4. nota.toFixed(2); // 10.00
5. nota.toPrecision(1); // 1e+1
6. nota.toString(); // "10"
7. nota.valueOf(); // 10
53. Só existe um tipo numérico na linguagem e ele
tem as seguintes características:
• IEEE-754 (Standard for Floating-Point)
54. Só existe um tipo numérico na linguagem e ele
tem as seguintes características:
• IEEE-754 (Standard for Floating-Point)
• binary64 ou Double Precision
55. Só existe um tipo numérico na linguagem e ele
tem as seguintes características:
• IEEE-754 (Standard for Floating-Point)
• binary64 ou Double Precision
• Cuidado com as exceções!
63. Math API
Similar a classe Math da linguagem Java
• abs – Valor absoluto do número
• floor – Valor inteiro do número
• log – Logarítmo natural do número (base E)
• min – Retorna o menor número
• max – Retorna o maior número
• pow - Potência do número
• random – Gera um número randômico
• round – Arredonda o número para o inteiro mais próximo
• sin - Seno do número
• sqrt - Raíz quadrada do número
• tan – Tangente do número
65. Uma String é composta por uma sequência de
0 ou mais caracteres com as seguintes
características:
• São imutáveis
66. Uma String é composta por uma sequência de
0 ou mais caracteres com as seguintes
características:
• São imutáveis
• Podem ser declaradas com aspas simples
ou duplas
68. String API
• chartAt – Retorna o char da posição
• charCodeAt – Retorna o código do char da posição
• concat – Concatena duas Strings
• indexOf – Retorna o índice da primeira ocorrência do char
• lastIndexOf – Retorna o índice da última ocorrência do char
• match – Retorna uma array resultante da busca com RegExp
• replace – Substitui parte da String por outra
• search – Retorna a posição da String ou RegExp
• slice – Extrai parte da String, retornando uma nova
• split – Divide a String com base na expressão regular informada
• substring - Extrai a parte da String desejada
• toLowerCase – Gera uma nova String em letra minúscula
• toUpperCase – Gera uma nova String em letra maiúscula
• trim – Remove os espaços em branco do início e do fim da String
• valueOf – Retorna o valor primitivo da String
115. Named Function Expression
O nome da função pode ser útil pois aparece no stack trace, listas
de breakpoints e demais ferramentas de debbuging
1. var soma = function soma(a, b) {
2. return a + b;
3. }
116. Qual é a diferença entre function
declaration e expression?
117. Function Declaration: A função é carregada
antes do código ser interpretado
1. soma(2,2); // 4
2. function soma(a, b) {
3. return a + b;
4. }
118. Function Expression: A função é carregada
durante a interpretação do código
1. soma(2,2); // soma is not defined
2. var soma = function (a, b) {
3. return a + b;
4. };
121. Invocando uma função diretamente
1. var soma = function (a, b) {
2. return a + b;
3. };
122. Invocando uma função diretamente
1. var soma = function (a, b) {
2. return a + b;
3. };
4.
5. soma(2, 2); // 4
123. Passando uma função como parâmetro
1. var produto = {nome: 'Sapato', preco: 150};
124. Passando uma função como parâmetro
1. var produto = {nome: 'Sapato', preco: 150};
2.
3. var formulaImpostoA = function (preco) { return preco*0.1; };
125. Passando uma função como parâmetro
1. var produto = {nome: 'Sapato', preco: 150};
2.
3. var formulaImpostoA = function (preco) { return preco*0.1; };
4.
5. var calcularPreco = function (produto, formulaImposto) {
6. return produto.preco + formulaImposto(produto.preco);
7. }
126. Passando uma função como parâmetro
1. var produto = {nome: 'Sapato', preco: 150};
2.
3. var formulaImpostoA = function (preco) { return preco*0.1; };
4.
5. var calcularPreco = function (produto, formulaImposto) {
6. return produto.preco + formulaImposto(produto.preco);
7. }
8.
9. calcularPreco(produto, formulaImpostoA); // 165
127. Passando uma função como parâmetro
1. var produto = {nome: 'Sapato', preco: 150};
2.
3. var formulaImpostoA = function (preco) { return preco*0.1; };
4. var formulaImpostoB = function (preco) { return preco*0.2; };
5.
6. var calcularPreco = function (produto, formulaImposto) {
7. return produto.preco + formulaImposto(produto.preco);
8. }
9.
10. calcularPreco(produto, formulaImpostoA); // 165
128. Passando uma função como parâmetro
1. var produto = {nome: 'Sapato', preco: 150};
2.
3. var formulaImpostoA = function (preco) { return preco*0.1; };
4. var formulaImpostoB = function (preco) { return preco*0.2; };
5.
6. var calcularPreco = function (produto, formulaImposto) {
7. return produto.preco + formulaImposto(produto.preco);
8. }
9.
10. calcularPreco(produto, formulaImpostoA); // 165
11. calcularPreco(produto, formulaImpostoB); // 180
129. Retornando uma função
1. var helloWorld = function () {
2. return function () {
3. return "Hello World!";
4. };
5. };
130. Retornando uma função
1. var helloWorld = function () {
2. return function () {
3. return "Hello World!";
4. };
5. };
6.
7. helloWorld(); // [Fuction]
131. Retornando uma função
1. var helloWorld = function () {
2. return function () {
3. return "Hello World!";
4. };
5. };
6.
7. helloWorld(); // [Fuction]
8. helloWorld()(); // 'Hello World!'
137. call e apply
Toda função possui os métodos call() e apply().
Eles são utilizados para indicar em qual escopo
uma função deve ser executada.
A diferença é basicamente a forma como é utilizado:
função.call(escopo, parametro1, parametro2)
função.apply(escopo, parametros)
138. Invocando a função com call
1. var getIdade = function () {
2. return this.idade;
3. }
4.
5. var pessoa = {
6. nome: "João",
7. idade: 20,
8. getIdade: getIdade
9. };
10.
11. pessoa.getIdade(); // 20
12. getIdade(); // undefined
13. getIdade.call(pessoa); // 20
142. Criando objetos com uma função
fábrica
1. var criarPessoa = function (nome, idade) {
2. return {
3. nome: nome,
4. idade: idade
5. };
6. }
7.
8. var pedro = criarPessoa("Pedro", 20);
143. Criando objetos com uma função
construtora
1. var Pessoa = function (nome, idade) {
2. this.nome = nome;
3. this.idade = idade;
4. }
5.
6. var pedro = new Pessoa("Pedro", 20);
144. Não esqueça de utilizar o operador new
quando utilizar funções construtoras
173. 1. var criarPeriodo = function (inicio, fim) {
2. return {
3. inicio: inicio,
4. fim: fim,
5. calcularDiferencaEmDias: function () {
6. return (this.fim.getTime() - this.inicio.getTime()) / (1000*60*60*24);
7. }
8. };
9. };
10.
11. var calcularLocacao = function (filme, dataAluguel, dataDevolucao) {
12. var periodo = criarPeriodo(dataAluguel, dataDevolucao);
13. return filme.diaria * dias;
14. };
174. 1. var criarPeriodo = function (inicio, fim) {
2. return {
3. inicio: inicio,
4. fim: fim,
5. calcularDiferencaEmDias: function () {
6. return (this.fim.getTime() - this.inicio.getTime()) / (1000*60*60*24);
7. }
8. };
9. };
10.
11. var calcularLocacao = function (filme, dataAluguel, dataDevolucao) {
12. var periodo = criarPeriodo(dataAluguel, dataDevolucao);
13. var dias = periodo.calcularDiferencaEmDias();
14. return filme.diaria * dias;
15. };
175. 1. var criarPeriodo = function (inicio, fim) {
2. return {
3. inicio: inicio,
4. fim: fim,
5. calcularDiferencaEmDias: function () {
6. return (this.fim.getTime() - this.inicio.getTime()) / (1000*60*60*24);
7. }
8. };
9. };
10.
11. var calcularLocacao = function (filme, dataAluguel, dataDevolucao) {
12. var periodo = criarPeriodo(dataAluguel, dataDevolucao);
13. var dias = periodo.calcularDiferencaEmDias();
14. return filme.diaria * dias;
15. };
176. A linguagem não possui nenhum tipo de
modificador de visibilidade, sendo assim será
necessário recorrer a outra estratégia para
encapsular propriedades de objetos
209. Inicializando o Array com elementos
1. var carros = new Array("Ka", "Corsa", "Palio");
210. Também é possível inicializar o
Array, com um tamanho inicial
1. var carros = new Array(10);
211. Não se esqueça que o Array não tem
tamanho fixo e o tamanho inicial é
apenas uma forma de inicializá-lo
212. Array API
• concat – Junta dois arrays, retornando a cópia dos dois
• every – Retorna true se todos os elementos atenderem a função
• filter – Filtra o array com base em uma função de filtro
• forEach – Percorre o array, invocando uma função para cada elemento
• indexOf – Retorna o índice do primeiro elemento encontrado
• join – Cria uma String customizada com todos os elementos do array
• lastIndexOf – Retorna o índice do último elemento encontrado
• map – Trasforma os elementos de um array
• pop – Remove o último elemento do array, retornando-o
• push – Adiciona um elemento no array, retornando o length
• reduce – Acumula os elementos de um array
• reverse – Inverte a ordem dos elementos do array
• shift - Remove o primeiro elemento do array, retornando-o
• some – Retorna true se um dos elementos atender a função
• slice - Seleciona uma parte do array, retornando-a
• sort - Ordena os elementos do array com base em uma função
• splice - Adiciona ou remove elementos de uma posição específica
• toString – Converte o array em uma String
• unshift – Adiciona elementos no início do array
• valueOf – Retorna o próprio array
242. RegExp API
exec – Executa a RegExp, retornando os
detalhes
test – Testa a RegExp, retornando true
ou false
243. Telefone – Passo 1
Nosso primeiro exemplo envolve o reconhecimento de
um telefone simples: 9999-9999. Esse telefone será
evoluído por meio de novos cenários para estimular a
utilização de grupos, metacaracteres, quantificadores e
muito mais!
244. Executando a expressão regular
1. var regExp = /9999-9999/;
2.
3. var telefone = "9999-9999";
4. regExp.exec(telefone); // ['9999-9999', index: 0,
input: '9999-9999']
245. Testando a expressão regular
1. var regExp = /9999-9999/;
2.
3. var telefone = "9999-9999";
4. regExp.test(telefone); // true
246. Telefone – Passo 2
Evoluímos nosso primeiro exemplo e agora o telefone
tem código de área: (48) 9999-9999, como fazer para
reconhecê-lo?
247. Testando a expressão regular
1. var regExp = /9999-9999/;
2.
3. var telefone = "9999-9999";
4. regExp.test(telefone); // true
248. Testando a expressão regular
1. var regExp = /(90) 9999-9999/;
2.
3. var telefone = "(90) 9999-9999";
4. regExp.test(telefone); // false
252. Telefone – Passo 3
Vamos evoluir novamente e agora, no nosso terceiro
exemplo, temos que fazer com que o telefone seja
reconhecido únicamente, não permitindo outros
caracteres antes e depois!
253. Iniciando e finalizando com um
determinado caractere
^ - Inicia com um determinado caractere
$ - Finaliza com um determinado
caractere
254. Lidando com caracteres antes e depois
1. var regExp = /(90) 9999-9999/;
2.
3. var telefone = "Ligue para (90) 9999-9999, tratar com
João";
4. regExp.test(telefone); // true
255. Lidando com caracteres antes e depois
1. var regExp = /^(90) 9999-9999$/;
2.
3. var telefone = "Ligue para (90) 9999-9999, tratar com
João";
4. regExp.test(telefone); // false
256. Lidando com caracteres antes e depois
1. var regExp = /^(90) 9999-9999$/;
2.
3. var telefone = "(90) 9999-9999";
4. regExp.test(telefone); // true
257. Telefone – Passo 4
Chegou a hora de aceitar qualquer número de telefone,
para isso precisamos flexibilizar a expressão regular por
meio de grupos.
258. Grupos de caracteres
[abc] – Aceita qualquer caractere
dentro do grupo, nesse caso a, b e c
[^abc] – Não aceita qualquer caractere
dentro do grupo, nesse caso a, b ou c
[0-9] – Aceita qualquer caractere
entre 0 e 9
[^0-9] – Não aceita qualquer caractere
entre 0 e 9
259. Utilizando grupos de caracteres
1. var regExp = /^(90) 9999-9999$/;
2.
3. var telefone = "(90) 9999-9999";
4. regExp.test(telefone); // true
260. Utilizando grupos de caracteres
1. var regExp = /^(90) 9999-9999$/;
2.
3. var telefone = "(80) 9977-8899";
4. regExp.test(telefone); // false
261. Utilizando grupos de caracteres
1. var regExp = /^([0-9][0-9]) [0-9][0-9][0-9][0-9]-[0-
9][0-9][0-9][0-9]$/;
2.
3. var telefone = "(80) 9977-8899";
4. regExp.test(telefone); // true
262. Telefone – Passo 5
Não é muito grupo? Para evitar a repetição exagerada
de padrões em uma expressão regular, podemos
utilizar quantificadores.
263. Quantificadores – Parte 1
Os quantificadores podem ser aplicados a caracteres,
grupos, conjuntos ou metacaracteres.
{n} – Quantifica um número específico
{n,} – Quantifica um número mínimo
{n,m} – Quantifica um número mínimo e
um número máximo
265. Utilizando quantificadores
1. var regExp = /^([0-9]{2}) [0-9]{4}-[0-9]{4}$/;
2.
3. var telefone = "(80) 9977-8899";
4. regExp.test(telefone); // true
266. Telefone – Passo 6
E se for necessário aceitar números com 8 ou 9 dígitos?
Podemos utilizar um quantificador para especificar um
determinado intervalo.
267. Utilizando quantificadores
1. var regExp = /^([0-9]{2}) [0-9]{4}-[0-9]{4}$/;
2.
3. var telefone = "(80) 9977-8899";
4. regExp.test(telefone); // true
268. Utilizando quantificadores
1. var regExp = /^([0-9]{2}) [0-9]{4}-[0-9]{4}$/;
2.
3. var telefone = "(80) 99977-8899";
4. regExp.test(telefone); // false
269. Utilizando quantificadores
1. var regExp = /^([0-9]{2}) [0-9]{4,5}-[0-9]{4}$/;
2.
3. var telefone = "(80) 99977-8899";
4. regExp.test(telefone); // true
270. Telefone – Passo 7
E se o hífen for opcional? É muito comum que se
escreva sem hífen! Podemos utilizar um quantificador
para torná-lo opcional.
271. Quantificadores - Parte 2
Os quantificadores podem ser aplicados a caracteres,
grupos, conjuntos ou metacaracteres.
? – Zero ou um
* – Zero ou mais
+ – Um ou mais
272. Utilizando quantificadores
1. var regExp = /^([0-9]{2}) [0-9]{4,5}-[0-9]{4}$/;
2.
3. var telefone = "(80) 99977-8899";
4. regExp.test(telefone); // true
273. Utilizando quantificadores
1. var regExp = /^([0-9]{2}) [0-9]{4,5}-[0-9]{4}$/;
2.
3. var telefone = "(80) 999778899";
4. regExp.test(telefone); // false
274. Utilizando quantificadores
1. var regExp = /^([0-9]{2}) [0-9]{4,5}-?[0-9]{4}$/;
2.
3. var telefone = "(80) 999778899";
4. regExp.test(telefone); // true
275. Utilizando quantificadores
1. var regExp = /^([0-9]{2}) [0-9]{4,5}-?[0-9]{4}$/;
2.
3. var telefone = "(80) 999778899";
4. regExp.test(telefone); // true
276. Telefone – Passo 8
E se o telefone agora estiver em uma estrutura de
tabela, como fazer para reconhecer cada linha?
281. Telefone – Passo 9
Em muitos casos, é possível substituir os grupos por
metacaracteres específicos!
282. Metacaracteres
. – Representa qualquer caractere
w – Representa o conjunto [a-zA-Z0-9_]
W – Representa o conjunto [^a-zA-Z0-9_]
d – Representa o conjunto [0-9]
D – Representa o conjunto [^0-9]
s – Representa um espaço em branco
S – Representa um não espaço em branco
n – Representa uma quebra de linha
t – Representa um tab
286. String API
match – Executa uma busca na String e retorna
um array contendo os dados encontrados, ou
null.
split – Divide a String com base em uma outra
String fixa ou expressão regular.
replace – Substitui partes da String com bae
em uma outra String fixa ou expressão regular.
287. Telefone – Passo 10
Chegou a hora de extrair os telefones das linhas da
tabela! Vamos extrair o telefone da primeira linha.
288. Extraindo dados com match
1. var regExp = /<table><tr>(<td>(d{2})sd{4,5}-
?d{4}</td>)+</tr></table>/;
2.
3. var telefone = "<table>
4. <tr>
5. <td>(80) 999778899</td>
6. <td>(90) 99897-8877</td>
7. <td>(70) 98767-9999</td>
8. </tr>
9. </table>";
10. telefone.match(regExp); // null
289. Extraindo dados com match
1. var regExp = /<table><tr>(<td>(d{2})sd{4,5}-
?d{4}</td>)+</tr></table>/;
2.
3. var telefone = "<table>
4. <tr>
5. <td>(80) 999778899</td>
6. <td>(90) 99897-8877</td>
7. <td>(70) 98767-9999</td>
8. </tr>
9. </table>";
10. telefone.match(regExp); // null
290. Extraindo dados com match
1. var regExp = /(d{2})sd{4,5}-?d{4}/;
2.
3. var telefone = "<table>
4. <tr>
5. <td>(80) 999778899</td>
6. <td>(90) 99897-8877</td>
7. <td>(70) 98767-9999</td>
8. </tr>
9. </table>";
10. telefone.match(regExp); // '(80) 999778899'
291. Telefone – Passo 11
Agora, vamos extrair o telefone de todas as linhas.
301. Criando um Date
1. var a = new Date(); // Data Atual
2. var b = new Date("2002/10/10"); // Thu Oct 10 2002 00:00:00
3. var c = new Date(2000, 0, 1); // Sat Jan 01 2000 00:00:00
4. var d = new Date(1410480553258);
302. Date API
• getDate – Retorna o dia
• getDay - Retorna o dia da semana
• getFullYear – Retorna o ano
• getHours – Retorna as horas
• getMilliseconds – Retorna os milisegundos
• getMinutes – Retorna os minutos
• getMonth – Retorna o mês
• getSeconds – Retorna os segundos
• getTime – Retorna o tempo em milisegundos
• toString - Retorna a data em String
304. Estruturas
As estruturas condicionais e de repetição da
linguagem JavaScript tem a sintaxe
bastante similar a linguagem Java. Além
dos clássicos if/else, for, while e switch,
temos o for/in que serve para fazer
introspecção nas propriedades de um
determinado objeto
305. if/else
1. var a = 10;
2. if (a == 10) {
3. console.log("AgileCode");
4. } else {
5. console.log("JavaScript");
6. }
7.
8. // AgileCode
306. for
1. var items = ['Radio', 'Shock', 'Window'];
2. for (var i = 0; i < items.length; i++) {
3. console.log(items[i]);
4. }
5.
6. // Radio
7. // Shock
8. // Window
307. while
1. var items = ['Radio', 'Shock', 'Window'];
2. var a = 0;
3. while(a < items.length) {
4. console.log(items[a]);
5. a++;
6. }
7.
8. // Radio
9. // Shock
10. // Window
308. for/in
1. var person = {name:'John', age: 20};
2. for (var x in person) {
3. if(!person.hasOwnProperty(x)) continue;
4. console.log(x + " - " + person[x]);
5. }
6.
7. // name – John
8. // age - 20
309. switch
1. var a = 0;
2. switch(a) {
3. case 0:
4. console.log('Bloco 0');
5. break;
6. case 1:
7. console.log('Bloco 1');
8. break;
9. }
10.
11. // Bloco 0
311. Operadores
Os operadores são divididos em
aritméticos, atribuição, comparação,
lógica e ternário. Assim como as
estruturas condicionais e de repetição,
são bem similares aos da linguagem Java
312. Aritméticos
1. var y = 10;
2.
3. x = y + 2; // 12
4. x = y - 2; // 8
5. x = y * 2; // 20
6. x = y / 2; // 5
7. x = y % 2; // 0
8. x = ++y; // 11
9. x = y++; // 10
10. x = --y; // 9
11. x = y--; // 10
313. Atribuição
1. var x = 10;
2. var y = 2;
3.
4. x += y; // 12
5. x -= y; // 8
6. x *= y; // 20
7. x /= y; // 5
8. x %= y; // 0
314. Comparação
1. var x = 10;
2.
3. x == 10; // true
4. x != 10; // false
5. x === 10; // true
6. x !== 10; // false
7. x > 0; // true
8. x < 100; // true
9. x >=10; // true
10. x <=0; // false
318. Tratamento de erros
O tratamento de erros é feito por meio do
lançamento e captura de objetos de erro,
utilizando as palavras reservadas throw,
try e catch
319. Ao lançar um erro, o fluxo de execução é
interrompido até alcançar um bloco try e catch,
onde o erro será tratado
320. O que é um erro?
Apesar de ser possível lançar qualquer tipo
de dado, é recomendado que sejam
lançados apenas objetos contendo nome e
a mensagem de erro
var erro = {
name: "Nome do erro",
message: "Descrição do erro"
}
321. Criando um erro
1. var illegalArgumentError = function (message) {
2. return {
3. name: "IllegalArgumentError",
4. message: message
5. };
6. };
322. Lançando os erros
1. var illegalArgumentError = function (message) {
2. return {
3. name: "IllegalArgumentError",
4. message: message
5. };
6. };
7. var calcularDesconto = function (quantidade, valor) {
8. if (quantidade === 0) throw illegalArgumentError ("Quantidade zero");
9. if (valor < 0) throw illegalArgumentError("Valor negativo");
10. // Código de cálculo do desconto
11. };
323. Tratando os erros
1. var illegalArgumentError = function (message) {
2. return {
3. name: "IllegalArgumentError",
4. message: message
5. };
6. };
7. var calcularDesconto = function (quantidade, valor) {
8. if (quantidade === 0) throw illegalArgumentError ("Quantidade zero");
9. if (valor < 0) throw illegalArgumentError("Valor negativo");
10. // Código de cálculo do desconto
11. };
12. try {
13. calcularDesconto(0, 100);
14. } catch (e) {
15. console.log(e.message);
16. }
326. Herança
A herança é utilizada principalmente para
promover o reuso. Em JavaScript, ela é feita
com base em protótipos, não em classes,
como em outras linguagens. Isso se deve a
suas raízes na linguagem Self.
333. 1. var pessoa = {
2. toString: function () {
3. return this.nome + " tem " + this.idade + " anos";
4. }
5. };
6.
7. pessoa1.toString(); // João tem 20 anos
8. pessoa2.toString(); // Pedro tem 16 anos
334. 1. var pessoa = {
2. toString: function () {
3. return this.nome + " tem " + this.idade + " anos";
4. }
5. };
6.
7. var pessoa1 = Object.create(pessoa);
8. pessoa1.nome = "João";
9. pessoa1.idade = 20;
10.
11. pessoa1.toString(); // João tem 20 anos
12. pessoa2.toString(); // Pedro tem 16 anos
335. 1. var pessoa = {
2. toString: function () {
3. return this.nome + " tem " + this.idade + " anos";
4. }
5. };
6.
7. var pessoa1 = Object.create(pessoa);
8. pessoa1.nome = "João";
9. pessoa1.idade = 20;
10.
11. var pessoa2 = Object.create(pessoa);
12. pessoa2.nome = "Pedro";
13. pessoa2.idade = 16;
14.
15. pessoa1.toString(); // João tem 20 anos
16. pessoa2.toString(); // Pedro tem 16 anos
336. 1. var pessoa = {
2. toString: function () {
3. return this.nome + " tem " + this.idade + " anos";
4. }
5. };
6.
7. var pessoa1 = Object.create(pessoa);
8. pessoa1.nome = "João";
9. pessoa1.idade = 20;
10.
11. var pessoa2 = Object.create(pessoa);
12. pessoa2.nome = "Pedro";
13. pessoa2.idade = 16;
14.
15. pessoa1.toString(); // João tem 20 anos
16. pessoa2.toString(); // Pedro tem 16 anos
337. 1. var pessoa = {
2. toString: function () {
3. return this.nome + " tem " + this.idade + " anos";
4. }
5. };
6.
7. var pessoa1 = Object.create(pessoa);
8.
9. var pessoa2 = Object.create(pessoa);
10.
11. pessoa1.toString(); // João tem 20 anos
12. pessoa2.toString(); // Pedro tem 16 anos
338. 1. var pessoa = {
2. constructor: function () {
3. },
4. toString: function () {
5. return this.nome + " tem " + this.idade + " anos";
6. }
7. };
8.
9. var pessoa1 = Object.create(pessoa);
10.
11. var pessoa2 = Object.create(pessoa);
12.
13. pessoa1.toString(); // João tem 20 anos
14. pessoa2.toString(); // Pedro tem 16 anos
339. 1. var pessoa = {
2. constructor: function (nome, idade) {
3. this.nome = nome;
4. this.idade = idade;
5. },
6. toString: function () {
7. return this.nome + " tem " + this.idade + " anos";
8. }
9. };
10.
11. var pessoa1 = Object.create(pessoa);
12.
13. var pessoa2 = Object.create(pessoa);
14.
15. pessoa1.toString(); // João tem 20 anos
16. pessoa2.toString(); // Pedro tem 16 anos
340. 1. var pessoa = {
2. constructor: function (nome, idade) {
3. this.nome = nome;
4. this.idade = idade;
5. },
6. toString: function () {
7. return this.nome + " tem " + this.idade + " anos";
8. }
9. };
10.
11. var pessoa1 = Object.create(pessoa);
12. pessoa1.constructor("João", 20);
13.
14. var pessoa2 = Object.create(pessoa);
15. pessoa2.constructor("Pedro", 16);
16.
17. pessoa1.toString(); // João tem 20 anos
18. pessoa2.toString(); // Pedro tem 16 anos
341. 1. var pessoa = {
2. constructor: function (nome, idade) {
3. this.nome = nome;
4. this.idade = idade;
5. },
6. toString: function () {
7. return this.nome + " tem " + this.idade + " anos";
8. }
9. };
10.
11. var funcionario = Object.create(pessoa);
12. funcionario.toString = function () {
13. return this.nome + " tem " + this.idade + " anos e é funcionário";
14. };
15.
16. var pessoa1 = Object.create(pessoa);
17. pessoa1.constructor("João", 20);
18.
19. var pessoa2 = Object.create(funcionario);
20. pessoa2.constructor("Pedro", 16);
21.
22. pessoa1.toString(); // João tem 20 anos
23. pessoa2.toString(); // Pedro tem 16 anos e é funcionário
342. 1. var pessoa = {
2. constructor: function (nome, idade) {
3. this.nome = nome;
4. this.idade = idade;
5. },
6. toString: function () {
7. return this.nome + " tem " + this.idade + " anos";
8. }
9. };
10.
11. var funcionario = Object.create(pessoa);
12. funcionario.toString = function () {
13. return this.nome + " tem " + this.idade + " anos e é funcionário";
14. };
15.
16. var pessoa1 = Object.create(pessoa);
17. pessoa1.constructor("João", 20);
18.
19. var pessoa2 = Object.create(funcionario);
20. pessoa2.constructor("Pedro", 16);
21.
22. pessoa1.toString(); // João tem 20 anos
23. pessoa2.toString(); // Pedro tem 16 anos e é funcionário
343. 1. var pessoa = {
2. constructor: function (nome, idade) {
3. this.nome = nome;
4. this.idade = idade;
5. },
6. toString: function () {
7. return this.nome + " tem " + this.idade + " anos";
8. }
9. };
10.
11. var funcionario = Object.create(pessoa);
12. funcionario.toString = function () {
13.
14. };
15.
16. var pessoa1 = Object.create(pessoa);
17. pessoa1.constructor("João", 20);
18.
19. var pessoa2 = Object.create(funcionario);
20. pessoa2.constructor("Pedro", 16);
21.
22. pessoa1.toString(); // João tem 20 anos
23. pessoa2.toString(); // Pedro tem 16 anos e é funcionário
344. 1. var pessoa = {
2. constructor: function (nome, idade) {
3. this.nome = nome;
4. this.idade = idade;
5. },
6. toString: function () {
7. return this.nome + " tem " + this.idade + " anos";
8. }
9. };
10.
11. var funcionario = Object.create(pessoa);
12. funcionario.toString = function () {
13. return pessoa.toString() + " e é funcionário";
14. };
15.
16. var pessoa1 = Object.create(pessoa);
17. pessoa1.constructor("João", 20);
18.
19. var pessoa2 = Object.create(funcionario);
20. pessoa2.constructor("Pedro", 16);
21.
22. pessoa1.toString(); // João tem 20 anos
23. pessoa2.toString(); // undefined tem undefined anos e é funcionário
345. 1. var pessoa = {
2. constructor: function (nome, idade) {
3. this.nome = nome;
4. this.idade = idade;
5. },
6. toString: function () {
7. return this.nome + " tem " + this.idade + " anos";
8. }
9. };
10.
11. var funcionario = Object.create(pessoa);
12. funcionario.toString = function () {
13. return pessoa.toString.call(this) + " e é funcionário";
14. };
15.
16. var pessoa1 = Object.create(pessoa);
17. pessoa1.constructor("João", 20);
18.
19. var pessoa2 = Object.create(funcionario);
20. pessoa2.constructor("Pedro", 16);
21.
22. pessoa1.toString(); // João tem 20 anos
23. pessoa2.toString(); // Pedro tem 16 anos e é funcionário
346. 1. var pessoa = {
2. constructor: function (nome, idade) {
3. this.nome = nome;
4. this.idade = idade;
5. },
6. toString: function () {
7. return this.nome + " tem " + this.idade + " anos";
8. }
9. };
10.
11. var funcionario = Object.create(pessoa);
12. funcionario.toString = function () {
13. return pessoa.toString.call(this) + " e é funcionário";
14. };
15.
16. var pessoa1 = Object.create(pessoa);
17. pessoa1.constructor("João", 20);
18.
19. var pessoa2 = Object.create(funcionario);
20. pessoa2.constructor("Pedro", 16);
21.
22. pessoa1.toString(); // João tem 20 anos
23. pessoa2.toString(); // Pedro tem 16 anos e é funcionário
350. O Strict Mode foi introduzido na versão 5 do
ECMAScript e quando habilitado torna o
inerpretador mais exigente, lançando erros
em determinadas situações, que antes não
eram lançados. Podemos aplicá-lo a todo o
script, ou a uma função específica.
356. Para que servem as variáveis
globais na linguagem JavaScript?
357. Como a linguagem não possui um ligador,
ou linker, faz uso de variáveis globais para
estabelecer vínculos entre os diferentes
artefatos partencentes a uma aplicação
360. Caso ocorra algum problema em uma
conversão ou operação matemática, o
valor NaN, que significa not a number, é
retornado sem qualquer outra notificação
do que pode ter ocorrido
362. A linguagem produz alguns resultados
estranhos ao ser questionada sobre alguns
tipos como null, RegExp e NaN
363. var a = null;
typeof a; // 'object'
var b = NaN;
typeof b; // 'number'
var c = /./;
typeof c; // 'object'
var d = [1, 2, 3, 4, 5 ,6];
typeof d; // 'object'
365. Infelizmente, a linguagem assume o
estado de determinados tipos como true
ou false, sem existir uma estratégia
consistente para dar suporte a decisão
385. Existem muitas palavras reservadas,
algumas delas vindas da linguagem Java,
e a maior parte delas não são utilizadas:
abstract boolean break byte case catch char class const continue
debugger default delete do double else enum export extends false final
finally float for function goto if implements import in instanceof int
interface long native new null package private protected public return
short static super switch synchronized this throw throws transient true
try typeof var volatile void while with
386. var method; // ok
var class; // illegal
object = {box: value}; // ok
object = {case: value}; // illegal
object = {'case': value}; // ok
object.box = value; // ok
object.case = value; // illegal
object['case'] = value; // ok
402. Declaração comentada
Muito comum e utilizada em 1996
1. <html>
2. <head>
3. <script>
4. <!-- function somar(a, b) {
5. return a + b;
6. } -->
7. </script>
8. </head>
9. <body>
10. </body>
11. </html>
403. Declaração comentada
Muito comum e utilizada em 1996
1. <html>
2. <head>
3. <script>
4. <!-- function somar(a, b) {
5. return a + b;
6. } -->
7. </script>
8. </head>
9. <body>
10. </body>
11. </html>
404. Atributo language
Utilizado em uma época em que existiam outros
dialetos como o vbscript
1. <html>
2. <head>
3. <script language="javascript">
4. function somar(a, b) {
5. return a + b;
6. }
7. </script>
8. </head>
9. <body>
10. </body>
11. </html>
405. Atributo language
Utilizado em uma época em que existiam outros
dialetos como o vbscript
1. <html>
2. <head>
3. <script language="javascript">
4. function somar(a, b) {
5. return a + b;
6. }
7. </script>
8. </head>
9. <body>
10. </body>
11. </html>
406. Atributo type
Definição do tipo do formato do script
1. <html>
2. <head>
3. <script type="text/javascript">
4. function somar(a, b) {
5. return a + b;
6. }
7. </script>
8. </head>
9. <body>
10. </body>
11. </html>
407. Atributo type
Definição do tipo do formato do script
1. <html>
2. <head>
3. <script type="text/javascript">
4. function somar(a, b) {
5. return a + b;
6. }
7. </script>
8. </head>
9. <body>
10. </body>
11. </html>
408. Local da declaração
Qual é o melhor lugar para declarar os scripts?
1. <html>
2. <head>
3. </head>
4. <body>
5. <script src="script.js" type="text/javascript"></script>
6. </body>
7. </html>
409. Local da declaração
Qual é o melhor lugar para declarar os scripts?
1. <html>
2. <head>
3. </head>
4. <body>
5. <script src="script.js" type="text/javascript"></script>
6. </body>
7. </html>