Desvendando a linguagem JavaScript

50 %
50 %
Information about Desvendando a linguagem JavaScript
Technology

Published on March 8, 2014

Author: rodrigobranas

Source: slideshare.net

Description

Desvendando a linguagem JavaScript

Rodrigo Branas – @rodrigobranas - http://www.agilecode.com.br Desvendando a linguagem JavaScript

“Transformar equipes de desenvolvimento de software” http://www.agilecode.com.br

Rodrigo Branas rodrigo.branas@agilecode.com.br http://www.agilecode.com.br • • • • Desenvolvendo Software na Gennera Criando treinamentos na Agile Code Escrevendo na Java Magazine e PacktPub Palestrando sobre desenvolvimento de software em eventos, universidades e empresas

Formação Acadêmica Ciências da Computação – UFSC Gerenciamento de Projetos - FGV Certificações SCJA, SCJP, SCJD, SCWCD, SCBCD, PMP, MCP e CSM Experiência Há mais de 12 anos desenvolvendo software na plataforma Java com as empresas: EDS, HP, NET, Citibank, GM, Dígitro, Softplan, OnCast, Senai, VALE, RBS, Unimed, Globalcode, V.Office, Suntech, WPlex e Gennera.

• • • • • • • • • Há mais de 5 anos liderando pessoas. Mais de 2000 horas em sala de aula. Mais de 100 apresentações em eventos. 6 artigos escritos para revistas. 1 livro. Mais de 500 profissionais treinados. Criação de 22 palestras. Criação de 10 treinamentos. Criação de mais de 3.000 slides.

Neste capítulo vamos conhecer a linguagem JavaScript em detalhes • • • • • • • • • • • • • • História Características Variáveis Comentários Tipos de dados Encapsulamento Estruturas Operadores Tratamento de erros Herança O que a linguagem tem de ruim? Automação de testes Interoperabilidade Mitos e lendas

Quem aqui já teve contato com a linguagem JavaScript?

Mas o que vem à cabeça quando pensamos em JavaScript?

JavaScript é uma das linguagens mais populares do mundo!

Mas ao mesmo tempo é uma das linguagens mais odiadas!

Alguém aqui odeia JavaScript?

Boa parte dos problemas tem relação direta com a DOM, não com a linguagem

Você costuma ler o manual antes de utilizar um produto que comprou?

A linguagem JavaScript é a única que as pessoas acham que não precisam aprender antes de começar a utilizar...

O problema é que ela é utiliza conceitos bem diferentes das outras linguagens que estamos acostumados!

Era uma vez, uma linguagem de programação chamada HyperTalk

A linguagem foi criada por Dan Winkler em 1987 para a plataforma HyperCard da Apple

A linguagem tinha uma sintaxe extremamente amigável e o objetivo era permitir que programadores iniciantes criassem programas para a plataforma

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 Linguagem HyperTalk

A Netscape teve a ideia de implementar um conceito semelhante!

Então, contrataram Brendan Eich para essa difícil missão!

Na ocasião, pelo sua afinidade com a linguagem Scheme, ele propos utilizá-la

Até que um dia, alguém na Netscape descobriu o que era Scheme!

1. (define (list-of-squares n) 2. (let loop ((i n) (res '())) 3. (if (< i 0) 4. res 5. (loop (- i 1) (cons (* i i) res))))) 6. (list-of-squares 9) ===> (0 1 4 9 16 25 36 49 64 81) Linguagem Scheme

Com base no público alvo, a linguagem precisava ser baseada em algo mais popular

Brendan Eich utilizou como base as linguagens Java, Scheme, Self e com algumas influências de Perl

Java Self • Sintaxe • Algumas convenções • Herança baseada em protótipos • Objetos dinâmicos Scheme Perl • Lambda • Closure • Tipagem fraca • Expressões Regulares

Seu primeiro nome foi Mocha, dado por Marc Andreessen, fundador da empresa

Mas logo depois, foi lançada oficialmente em Setembro de 1995 com o nome de LiveScript na versão beta do Netscape Navigator 2.0

Mas havia uma guerra Browser's World War

Em Dezembro do mesmo ano, mudou de nome para JavaScript a partir de um acordo feito com a Sun com o objetivo de destruir a Microsoft

O nome JavaScript, foi registrado como uma marca pertencente a Sun e era de uso exclusivo da Netscape

Como a Netscape tinha exclusividade para utilizar a linguagem JavaScript, a Microsoft fez uma engenharia reversa, criando a linguagem JScript

Com medo de perder o controle, a Netscape busca uma série de entidades como a W3C, ISO e IEEE com o objetivo de padronizar a linguagem

Em 1997, após algumas tentativas, a Netscape conseguiu padronizar a linguagem junto a ECMA Internacional, nomeando-a ECMAScript

Linguagens como o ActionScript, utilizada pela Macromedia, atualmente Adobe, na programação da plataforma Flash, é baseada em ECMAScript

Em 2005, com o lançamento da tecnologia AJAX, a linguagem ganhou muita força, juntamente com o padrão de integração de dados JSON

Pesquisas recentes mostram que a linguagem JavaScript é uma das mais popular do mundo, assim como o Java, C, PHP, Python e Ruby

Atualmente, após a aquisição da Sun, a marca JavaScript pertence a Oracle

Características

A linguagem JavaScript é interpretada

Possui orientação a objetos baseada em protótipos, não possuindo classes

Alguém já ouviu falar que JavaScript não é orientadas a objetos?

A linguagem possui uma tipagem fraca e dinâmica

Além disso, possui funções de primeira classe. Isso quer dizer que podemos atribuir funções a variáveis, passar funções como parâmetro e também retorná-las

Sua sintaxe tem uma forte influência do Java, e assim, também apresenta familiariadade com as linguagens C, C++ e C#

A linguagem não apresenta suporte a programação multi-thread, apesar de existirem interpretadores com esse suporte

É independente de plataforma, sendo suportada por browsers e pela maior parte dos sistemas operacionais existentes

Variáveis

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 As regras são parecidas com as da linguagem Java

1. 2. 3. 4. 5. 6. 7. var name = "AgileCode"; var top10 = [1, 2, 3, 4, 5, 6, 7, 8, 9, 10]; var $scope = {title: "JavaScript", version: "6"}; var _person = "John"; var numberCode = 897987987; var a = 10, b = 9, c = 8; var language; // undefined Declarando uma variável

Comentários

1. // var a = 10; Comentando uma linha

1. 2. 3. 4. 5. /* if (a === 10) { console.log(a); } */ Comentando um bloco

Tipos de dados

Number

Só existe um tipo numérico na linguagem e ele tem as seguintes características: • • • 64-bit floating point IEEE-754 (mais conhecido como Double) Caso ocorra qualquer problema de conversão e operação o valor NaN é retornado

1. 2. 3. 4. 5. 6. 7. var a = 10; a.toExponencial(2); // 100 a.toFixed(2); // 10.00 a.toPrecision(1); // 1e+1 a.toString(); // "10" a.valueOf(); // 10 Criando um Number

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

String

Uma String é composta por uma sequência de 0 ou mais caracteres com as seguintes características: • • • • Cada caractere tem 16-bit Codificação UCS-2 São imutáveis Podem ser declaradas com aspas simples ou duplas

1. 2. 3. 4. 5. 6. 7. 8. var a = "AgileCode"; a.chatAt(2); // "i" a.charCodeAt(0); // 65 a.concat(b); // "AgileCodeAgileCode" a.indexOf('e'); // 4 a.replace('Code', '!'); // "Agile!" a.split('e'); // ['Agil', 'Cod', '']; Criando uma String

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

Boolean

1. 2. 3. 4. 5. var a = true; var b = false; a.toString(); // "true" b.valueOf(); // false Criando um Boolean

Cuidado, ainda neste módulo estudaremos os perigosos e confusos tipos truthy e falsy

undefined

O tipo undefined é retornado caso uma propriedade de um determinado objeto seja consultada e não exista

null

O tipo null indica a ausência de valor em uma determinada propriedade já existente

Object

Um objeto é uma coleção dinâmica de chaves e valores de qualquer tipo de dado. É possível adicionar ou remover propriedades a qualquer momento.

1. 2. 3. 4. 5. 6. 7. 8. 9. 10. var pessoa = { nome: "João", idade: 20, telefone: null, endereco: { logradouro: "Av. Brasil", numero: 70, bairro: "Centro" } }; Criando um Object

1. 2. 3. 4. 5. 6. 7. 8. 9. 10. 11. 12. pessoa.nome; // "João" pessoa["nome"]; // "João" pessoa.endereco.bairro; // "Centro" pessoa["endereco"]["bairro"]; // "Centro" pessoa.endereco["bairro"]; // "Centro" pessoa.telefone; // null pessoa.peso; // undefined pessoa.idade = 25; pessoa.endereco.numero = 100; delete pessoa.telefone; Manipulando um Object

Function

Uma função é um objeto que contém um bloco de código executável. Ela pode ser atribuída a uma variável, passada como parâmetro ou mesmo retornada de uma outra função.

First Class

1. 2. 3. function soma(a, b) { return a + b; } Declaração simples (não recomendada)

1. 2. 3. 4. 5. function soma(a, b) { return a + b; } soma(2, 2); // 4 Declaração simples (não recomendada)

1. 2. 3. var soma = function (a, b) { return a + b; } Declaração anônima (lambda)

1. 2. 3. 4. 5. var soma = function (a, b) { return a + b; } soma(2, 2); // 4 Declaração anônima (lambda)

1. 2. 3. 4. 5. 6. 7. 8. 9. var pessoa = { nome: "João", idade: 20, getIdade: function () { return this.idade; } }; pessoa.getIdade(); // 20 Declarando uma função dentro de um objeto (method)

1. 2. 3. 4. 5. 6. 7. 8. 9. 10. 11. var getIdade = function () { return this.idade; } var pessoa = { nome: "João", idade: 20, getIdade: getIdade }; pessoa.getIdade(); // 20 Declarando uma função dentro de um objeto (method)

1. 2. 3. 4. 5. 6. 7. 8. 9. 10. 11. var produto = {nome: 'Raquete', preco: 100}; var formulaImpostoRJ = function (a) { return a * 0.1; }; var formulaImpostoSP = function (a) { return a * 0.2; }; var calcularPrecoDoProduto = function (produto, imposto) { return produto.preco + imposto(produto.preco); } calcularPrecoDoProduto(produto, formulaImpostoRJ); // 110 calcularPrecoDoProduto(produto, formulaImpostoSP); // 120 Passando uma função como parâmetro

1. 2. 3. 4. 5. 6. 7. 8. var primeiraParteDaSoma = function (x) { return function (y) { return x + y; }; }; var segundaParteDaSoma = primeiraParteDaSoma(5); var resultadoDaSoma = segundaParteDaSoma(5); console.log(resultadoDaSoma); // 10 Retornando uma função de dentro de outra função (closure)

Array

Um array é um objeto especial que oferece meios para acessar e manipular suas propriedades.

1. 2. 3. 4. 5. 6. 7. 8. 9. 10. 11. var a = []; a[0] = "Radio"; a[1] = "Shock"; a[2] = "Window"; a.length; // 3 a.indexOf("Window"); // 2 a.push("Meat"); a.pop(); // "Window" a.splice(a.indexOf("Window"), 1); Criando um Array

Array API • • • • • • • • • • • • • • concat – Junta dois arrays, retornando a cópia dos dois indexOf – Retorna o índice do elemento join – Adiciona todos os elementos de um array lastIndexOf – Retorna o último índice do elemento pop – Remove o último elemento do array, retornando-o push – Adiciona um elemento no array reverse – Inverte a ordem do array shift - Remove o primeiro elemento do array, retornando-o slice - Seleciona uma parte do array, retornando-a sort - Ordena os elementos do array splice - Adiciona ou remove elementos de uma posição do array toString – Converte o array em String unshift – Adiciona elementos no início do array valueOf – Retorna o valor primitivo do array

RegExp

A linguagem JavaScript implementa expressões regulares utilizando formato derivado da linguagem Perl, uma das sintaxes mais consistentes e ricas e utilizadas por outras linguagens como o Java, Python, Ruby e C#.

1. 2. 3. 4. 5. 6. 7. var a = /<expressão>/; var placaValida = "MMM-9999"; var placaInvalida = "9999-MMM"; var regexp = /w{3}-d{4}/; regexp.test(placaValida); // true regexp.test(placaInvalida); // false Criando uma RegExp

RegExp API • • • • compile - Compila a RegExp exec – Executa a RegExp, retornando a posição test – Testa a RegExp, retornando true ou false toString - Converte a RegExp para String

RegExp - Conjuntos • • • • • [abc] – a, b e c [^abc] – Não a, b e c [0-9] – De 0 a 9 [^0-9] – Não de 0 a 9 (x|y) - x ou y

RegExp - Metacaracteres • • • • • • • • • • . – Caracteres (letras, números e simbolos) w – Letras W – Não letras d – Digitos D – Não digitos s – Espaço em branco S – Não espaço em branco b – Busca um match no início ou fim da palavra B – Busca um match dentro da palavra 0 - Null

RegExp - Quantificadores • • • • • • n+ - Um ou mais n* - Zero ou mais n? – Zero ou um n{y} – y vezes n{x,y} - Entre x e y n{x,} – De x em diante

Date

1. 2. 3. 4. var a = new Date(); var b = new Date(millisecond); var c = new Date(dateString); var d = new Date(year, month, day, hour, minute, second, millisecond); Criando um Date

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

Encapsulamento

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

1. 2. 3. 4. 5. 6. 7. 8. 9. 10. var pessoa = { nome: "João", idade: 20, telefone: null, endereco: { logradouro: "Av. Brasil", numero: 70, bairro: "Centro" } }; Encapsulando um Object

1. var pessoa = Não será possível obter encapsulamento por meio de um Object

1. var pessoaEncapsulada = Não será possível obter encapsulamento por meio de um Object

1. 2. var pessoaEncapsulada = function () { }(); Criando uma IIFE Immediately-Invoked Function Expression

1. 2. 3. var pessoaEncapsulada = function () { }(); console.log(pessoaEncapsulada ); // undefined Criando uma IIFE Immediately-Invoked Function Expression

1. 2. 3. 4. var pessoaEncapsulada = function () { var nome = "João"; }(); console.log(pessoaEncapsulada ); // undefined Copiando as propriedades do Object

1. 2. 3. 4. 5. var pessoaEncapsulada = function () { var nome = "João"; var idade = 20; }(); console.log(pessoaEncapsulada ); // undefined Copiando as propriedades do Object

1. 2. 3. 4. 5. 6. var pessoaEncapsulada = function () { var nome = "João"; var idade = 20; var telefone = null; }(); console.log(pessoaEncapsulada ); // undefined Copiando as propriedades do Object

1. 2. 3. 4. 5. 6. 7. 8. 9. 10. 11. var pessoaEncapsulada = function () { var nome = "João"; var idade = 20; var telefone = null; var endereco = { logradouro: "Av. Brasil", numero: 70, bairro: "Centro" }; }(); console.log(pessoaEncapsulada ); // undefined Copiando as propriedades do Object

1. 2. 3. 4. 5. 6. 7. 8. 9. 10. 11. var pessoaEncapsulada = function () { var nome = "João"; var idade = 20; var telefone = null; var endereco = { logradouro: "Av. Brasil", numero: 70, bairro: "Centro" }; }(); console.log(pessoaEncapsulada ); // undefined Copiando as propriedades do Object

1. 2. 3. 4. 5. 6. 7. 8. 9. 10. 11. 12. 13. var pessoaEncapsulada = function () { var nome = "João"; var idade = 20; var telefone = null; var endereco = { logradouro: "Av. Brasil", numero: 70, bairro: "Centro" }; return { } }(); console.log(pessoaEncapsulada ); // {} Definindo um Object de retorno

1. 2. 3. 4. 5. 6. 7. 8. 9. 10. 11. 12. 13. 14. var pessoaEncapsulada = function () { var nome = "João"; var idade = 20; var telefone = null; var endereco = { logradouro: "Av. Brasil", numero: 70, bairro: "Centro" }; return { nome: nome } }(); console.log(pessoaEncapsulada ); // {nome: "João"} Copiando apenas as propriedades desejadas

1. 2. 3. 4. 5. 6. 7. 8. 9. 10. 11. 12. 13. 14. 15. var pessoaEncapsulada = function () { var nome = "João"; var idade = 20; var telefone = null; var endereco = { logradouro: "Av. Brasil", numero: 70, bairro: "Centro" }; return { nome: nome idade: idade } }(); console.log(pessoaEncapsulada ); // {nome: "João", idade: 20} Copiando apenas as propriedades desejadas

1. 2. 3. 4. 5. 6. 7. 8. 9. 10. 11. 12. 13. 14. 15. var pessoaEncapsulada = function () { var nome = "João"; var idade = 20; var telefone = null; var endereco = { logradouro: "Av. Brasil", numero: 70, bairro: "Centro" }; return { nome: nome idade: idade } }(); console.log(pessoaEncapsulada ); // {nome: "João", idade: 20} Revealing Module Pattern – Muito Prazer!

Estruturas Condicionais e de Repetição

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

1. 2. 3. 4. 5. 6. 7. 8. 9. 10. 11. 12. if (<condição>) { // Código do bloco } else { // Código do bloco } var a = true; if (a) { console.log("AgileCode"); } else { console.log("JavaScript"); } if/else

1. 2. 3. 4. 5. 6. 7. 8. for(<declaração>; <condição>; <incremento>) { // Código do bloco } var items = ['Radio', 'Shock', 'Window']; for (var i = 0; i < items.length; i++) { console.log(items[i]); } for

1. 2. 3. 4. 5. 6. 7. 8. 9. 10. while(<condição>) { // Código do bloco } var items = ['Radio', 'Shock', 'Window']; var a = 0; while(a < items.length) { console.log(items[a]); a++; } while

1. 2. 3. 4. 5. 6. 7. 8. for (<expressão>) { // Código do bloco } var person = {name:'John', age: 20}; for (var x in person) { console.log(x + " - " + person[x]); } for/in

1. 2. 3. 4. 5. 6. 7. 8. 9. 10. 11. 12. switch(<expressão>) { case <valor>: // Código do bloco break; } var a = 0; switch(a) { case 0: console.log('Bloco 0'); break; } switch

Operadores

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

1. 2. 3. 4. 5. 6. 7. 8. 9. 10. 11. var y = 10; x = y + 2; // 12 x = y - 2; // 8 x = y * 2; // 20 x = y / 2; // 5 x = y % 2; // 0 x = ++y; // 11 x = y++; // 10 x = --y; // 9 x = y--; // 10 Aritméticos

1. 2. 3. 4. 5. 6. 7. 8. var x = 10; var y = 2; x += y; // 12 x -= y; // 8 x *= y; // 20 x /= y; // 5 x %= y; // 0 Atribuição

1. 2. 3. 4. 5. 6. 7. 8. 9. 10. var x = 10; x == 10; // true x != 10; // false x === 10; // true x !== 10; // false x > 0; // true x < 100; // true x >=10; // true x <=0; // false Comparação

1. 2. 3. 4. 5. 6. 7. var x = 10; var y = 100; (x > 0 && y > 0); // true (x == 10 || y == 0); // true !(x == y); // true !!(x); // true Lógica

1. 2. var idade = 20; var situacao = (idade > 18) ? "Maior" : "Menor"; // "Maior" Ternário

Tratamento de erros

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

Ao lançar um erro, o fluxo de execução é interrompido até alcançar um bloco try e catch, onde o erro será tratado

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" }

1. 2. 3. 4. 5. 6. var illegalArgumentError = function (message) { return { name: "IllegalArgumentError", message: message }; }; Criando um erro

1. 2. 3. 4. 5. 6. 7. 8. 9. 10. 11. var illegalArgumentError = function (message) { return { name: "IllegalArgumentError", message: message }; }; var calcularDesconto = function (quantidade, valor) { if (quantidade === 0) throw illegalArgumentError ("Quantidade zero"); if (valor < 0) throw illegalArgumentError("Valor negativo"); // Código de cálculo do desconto }; Lançando os erros

1. 2. 3. 4. 5. 6. 7. 8. 9. 10. 11. 12. 13. 14. 15. 16. var illegalArgumentError = function (message) { return { name: "IllegalArgumentError", message: message }; }; var calcularDesconto = function (quantidade, valor) { if (quantidade === 0) throw illegalArgumentError ("Quantidade zero"); if (valor < 0) throw illegalArgumentError("Valor negativo"); // Código de cálculo do desconto }; try { calcularDesconto(0, 100); } catch (e) { console.log(e.message); } Tratando os erros

Herança

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.

1. 2. 3. 4. 5. 6. 7. var pessoa1 = { nome: "João", idade: 20, toString: function () { return this.nome + " tem " + this.idade + " anos"; } };

1. 2. 3. 4. 5. 6. 7. 8. 9. var pessoa1 = { nome: "João", idade: 20, toString: function () { return this.nome + " tem " + this.idade + " anos"; } }; pessoa1.toString(); // João tem 20 anos

1. 2. 3. 4. 5. 6. 7. 8. 9. 10. 11. 12. 13. 14. 15. 16. 17. var pessoa1 = { nome: "João", idade: 20, toString: function () { return this.nome + " tem " + this.idade + " anos"; } }; var pessoa2 = { nome: "Pedro", idade: 16, toString: function () { return this.nome + " tem " + this.idade + " anos"; } }; pessoa1.toString(); // João tem 20 anos

1. 2. 3. 4. 5. 6. 7. 8. 9. 10. 11. 12. 13. 14. 15. 16. 17. 18. var pessoa1 = { nome: "João", idade: 20, toString: function () { return this.nome + " tem " + this.idade + " anos"; } }; var pessoa2 = { nome: "Pedro", idade: 16, toString: function () { return this.nome + " tem " + this.idade + " anos"; } }; pessoa1.toString(); // João tem 20 anos pessoa2.toString(); // Pedro tem 16 anos

1. 2. 3. 4. 5. 6. 7. 8. 9. 10. 11. 12. 13. 14. 15. 16. 17. 18. var pessoa1 = { nome: "João", idade: 20, toString: function () { return this.nome + " tem " + this.idade + " anos"; } }; var pessoa2 = { nome: "Pedro", idade: 16, toString: function () { return this.nome + " tem " + this.idade + " anos"; } }; pessoa1.toString(); // João tem 20 anos pessoa2.toString(); // Pedro tem 16 anos

1. 2. 3. pessoa1.toString(); // João tem 20 anos pessoa2.toString(); // Pedro tem 16 anos

1. 2. 3. 4. 5. 6. 7. 8. var pessoa = { toString: function () { return this.nome + " tem " + this.idade + " anos"; } }; pessoa1.toString(); // João tem 20 anos pessoa2.toString(); // Pedro tem 16 anos

1. 2. 3. 4. 5. 6. 7. 8. 9. 10. 11. 12. var pessoa = { toString: function () { return this.nome + " tem " + this.idade + " anos"; } }; var pessoa1 = Object.create(pessoa); pessoa1.nome = "João"; pessoa1.idade = 20; pessoa1.toString(); // João tem 20 anos pessoa2.toString(); // Pedro tem 16 anos

1. 2. 3. 4. 5. 6. 7. 8. 9. 10. 11. 12. 13. 14. 15. 16. var pessoa = { toString: function () { return this.nome + " tem " + this.idade + " anos"; } }; var pessoa1 = Object.create(pessoa); pessoa1.nome = "João"; pessoa1.idade = 20; var pessoa2 = Object.create(pessoa); pessoa2.nome = "Pedro"; pessoa2.idade = 16; pessoa1.toString(); // João tem 20 anos pessoa2.toString(); // Pedro tem 16 anos

1. 2. 3. 4. 5. 6. 7. 8. 9. 10. 11. 12. 13. 14. 15. 16. var pessoa = { toString: function () { return this.nome + " tem " + this.idade + " anos"; } }; var pessoa1 = Object.create(pessoa); pessoa1.nome = "João"; pessoa1.idade = 20; var pessoa2 = Object.create(pessoa); pessoa2.nome = "Pedro"; pessoa2.idade = 16; pessoa1.toString(); // João tem 20 anos pessoa2.toString(); // Pedro tem 16 anos

1. 2. 3. 4. 5. 6. 7. 8. 9. 10. 11. 12. var pessoa = { toString: function () { return this.nome + " tem " + this.idade + " anos"; } }; var pessoa1 = Object.create(pessoa); var pessoa2 = Object.create(pessoa); pessoa1.toString(); // João tem 20 anos pessoa2.toString(); // Pedro tem 16 anos

1. 2. 3. 4. 5. 6. 7. 8. 9. 10. 11. 12. 13. 14. var pessoa = { constructor: function () { }, toString: function () { return this.nome + " tem " + this.idade + " anos"; } }; var pessoa1 = Object.create(pessoa); var pessoa2 = Object.create(pessoa); pessoa1.toString(); // João tem 20 anos pessoa2.toString(); // Pedro tem 16 anos

1. 2. 3. 4. 5. 6. 7. 8. 9. 10. 11. 12. 13. 14. 15. 16. var pessoa = { constructor: function (nome, idade) { this.nome = nome; this.idade = idade; }, toString: function () { return this.nome + " tem " + this.idade + " anos"; } }; var pessoa1 = Object.create(pessoa); var pessoa2 = Object.create(pessoa); pessoa1.toString(); // João tem 20 anos pessoa2.toString(); // Pedro tem 16 anos

1. 2. 3. 4. 5. 6. 7. 8. 9. 10. 11. 12. 13. 14. 15. 16. 17. 18. var pessoa = { constructor: function (nome, idade) { this.nome = nome; this.idade = idade; }, toString: function () { return this.nome + " tem " + this.idade + " anos"; } }; var pessoa1 = Object.create(pessoa); pessoa1.constructor("João", 20); var pessoa2 = Object.create(pessoa); pessoa2.constructor("Pedro", 16); pessoa1.toString(); // João tem 20 anos pessoa2.toString(); // Pedro tem 16 anos

1. 2. 3. 4. 5. 6. 7. 8. 9. 10. 11. 12. 13. 14. 15. 16. 17. 18. 19. 20. 21. 22. 23. var pessoa = { constructor: function (nome, idade) { this.nome = nome; this.idade = idade; }, toString: function () { return this.nome + " tem " + this.idade + " anos"; } }; var funcionario = Object.create(pessoa); funcionario.toString = function () { return this.nome + " tem " + this.idade + " anos e é funcionário"; }; var pessoa1 = Object.create(pessoa); pessoa1.constructor("João", 20); var pessoa2 = Object.create(funcionario); pessoa2.constructor("Pedro", 16); pessoa1.toString(); // João tem 20 anos pessoa2.toString(); // Pedro tem 16 anos e é funcionário

1. 2. 3. 4. 5. 6. 7. 8. 9. 10. 11. 12. 13. 14. 15. 16. 17. 18. 19. 20. 21. 22. 23. var pessoa = { constructor: function (nome, idade) { this.nome = nome; this.idade = idade; }, toString: function () { return this.nome + " tem " + this.idade + " anos"; } }; var funcionario = Object.create(pessoa); funcionario.toString = function () { return this.nome + " tem " + this.idade + " anos e é funcionário"; }; var pessoa1 = Object.create(pessoa); pessoa1.constructor("João", 20); var pessoa2 = Object.create(funcionario); pessoa2.constructor("Pedro", 16); pessoa1.toString(); // João tem 20 anos pessoa2.toString(); // Pedro tem 16 anos e é funcionário

1. 2. 3. 4. 5. 6. 7. 8. 9. 10. 11. 12. 13. 14. 15. 16. 17. 18. 19. 20. 21. 22. 23. var pessoa = { constructor: function (nome, idade) { this.nome = nome; this.idade = idade; }, toString: function () { return this.nome + " tem " + this.idade + " anos"; } }; var funcionario = Object.create(pessoa); funcionario.toString = function () { }; var pessoa1 = Object.create(pessoa); pessoa1.constructor("João", 20); var pessoa2 = Object.create(funcionario); pessoa2.constructor("Pedro", 16); pessoa1.toString(); // João tem 20 anos pessoa2.toString(); // Pedro tem 16 anos e é funcionário

1. 2. 3. 4. 5. 6. 7. 8. 9. 10. 11. 12. 13. 14. 15. 16. 17. 18. 19. 20. 21. 22. 23. var pessoa = { constructor: function (nome, idade) { this.nome = nome; this.idade = idade; }, toString: function () { return this.nome + " tem " + this.idade + " anos"; } }; var funcionario = Object.create(pessoa); funcionario.toString = function () { return pessoa.toString() + " e é funcionário"; }; var pessoa1 = Object.create(pessoa); pessoa1.constructor("João", 20); var pessoa2 = Object.create(funcionario); pessoa2.constructor("Pedro", 16); pessoa1.toString(); // João tem 20 anos pessoa2.toString(); // undefined tem undefined anos e é funcionário

1. 2. 3. 4. 5. 6. 7. 8. 9. 10. 11. 12. 13. 14. 15. 16. 17. 18. 19. 20. 21. 22. 23. var pessoa = { constructor: function (nome, idade) { this.nome = nome; this.idade = idade; }, toString: function () { return this.nome + " tem " + this.idade + " anos"; } }; var funcionario = Object.create(pessoa); funcionario.toString = function () { return pessoa.toString.call(this) + " e é funcionário"; }; var pessoa1 = Object.create(pessoa); pessoa1.constructor("João", 20); var pessoa2 = Object.create(funcionario); pessoa2.constructor("Pedro", 16); pessoa1.toString(); // João tem 20 anos pessoa2.toString(); // Pedro tem 16 anos e é funcionário

1. 2. 3. 4. 5. 6. 7. 8. 9. 10. 11. 12. 13. 14. 15. 16. 17. 18. 19. 20. 21. 22. 23. var pessoa = { constructor: function (nome, idade) { this.nome = nome; this.idade = idade; }, toString: function () { return this.nome + " tem " + this.idade + " anos"; } }; var funcionario = Object.create(pessoa); funcionario.toString = function () { return pessoa.toString.call(this) + " e é funcionário"; }; var pessoa1 = Object.create(pessoa); pessoa1.constructor("João", 20); var pessoa2 = Object.create(funcionario); pessoa2.constructor("Pedro", 16); pessoa1.toString(); // João tem 20 anos pessoa2.toString(); // Pedro tem 16 anos e é funcionário

O que a linguagem tem de ruim?

Variáveis globais

Para que servem as variáveis globais na linguagem JavaScript?

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

O grande problema com as variáveis globais é a poluição

NaN (Not a Number)

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

Typeof

A linguagem produz alguns resultados estranhos ao ser questionada sobre alguns tipos como null, RegExp e NaN

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'

Valores truthy e falsy

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

0 // false NaN // false '' // false false // false null // false undefined // false

Operadores de comparação

O comportamento dos operadores == e != apresenta problemas relacionados a coersão de tipos, produzindo resultados indesejados

'' == '0' // false 0 == '' // true 0 == '0' // true false == 'false' // false false == '0' // true false == undefined // false false == null // false null == undefined // true ' trn ' == 0 // true NaN == null // false NaN == NaN // false

Como resolver o problema?

Utilize apenas os operadores === e !==

Ponto flutuante

A linguagem possui apenas um tipo de número, 64-bit floating point. Operações simples como soma e substração podem ter resultados indesejados

0.1 + 0.2 = 0.30000000000000004

Inserção automática de ;

Apesar de parecer uma vantagem, a inserção automática de ; pode trazer inúmeros problemas semânticos

Qual é a diferença entre os trechos de código abaixo: return { status: true }; return { status: true };

Palavras reservadas não utilizadas

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

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

Escopo de declaração

Apesar da sintaxe semelhante ao Java, ao escrever um bloco, como em uma estrutura de decisão, o escopo de declaração não é isolado

Qual é o resultado do código abaixo? var a = true; if (a) { var x = "Hello World"; } console.log(a); // true console.log(x); // undefined ou "Hello World";

Não utilize a função eval

Automação de testes

Qual é o problema em não ter de testes automatizados?

Code and Pray

Trabalho braçal para testar várias vezes a mesma coisa

Trabalhar em um castelo de cartas

Você tem medo do projeto em que trabalha?

Jasmine Para testar a nossa aplicação, vamos utilizar o framework de testes Jasmine. Ele é fácil de utilizar e se integra bem com ferramentas de automação. http://pivotal.github.io/jasmine

1. 2. var calculadora = { }; Criando uma calculadora

1. 2. 3. 4. 5. var calculadora = { somar: function (a, b) { return a + b; } }; Criando uma calculadora

1. 2. 3. 4. 5. 6. 7. 8. var calculadora = { somar: function (a, b) { return a + b; }, subtrair: function (a, b) { return a - b; } }; Criando uma calculadora

1. 2. 3. 4. 5. 6. 7. 8. 9. 10. 11. var calculadora = { somar: function (a, b) { return a + b; }, subtrair: function (a, b) { return a - b; }, multiplicar: function (a, b) { return a * b; } }; Criando uma calculadora

1. 2. describe("Testando a calculadora", function () { }); Testando a culculadora

1. 2. 3. 4. describe("Testando a calculadora", function () { it("Deve somar dois valores", function () { }); }); Testando a função de somar

1. 2. 3. 4. 5. describe("Testando a calculadora", function () { it("Deve somar dois valores", function () { var resultado = calculadora.somar(2, 2); }); }); Testando a função de somar

1. 2. 3. 4. 5. 6. describe("Testando a calculadora", function () { it("Deve somar dois valores", function () { var resultado = calculadora.somar(2, 2); expect(resultado).toBe(4); }); }); Testando a função de somar

1. 2. 3. 4. 5. 6. 7. 8. 9. 10. describe("Testando a calculadora", function () { it("Deve somar dois valores", function () { var resultado = calculadora.somar(2, 2); expect(resultado).toBe(4); }); it("Deve subtrair dois valores", function () { var resultado = calculadora.subtrair(10, 1); expect(resultado).toBe(9); }); }); Testando a função de subtrair

1. 2. 3. 4. 5. 6. 7. 8. 9. 10. 11. 12. 13. 14. describe("Testando a calculadora", function () { it("Deve somar dois valores", function () { var resultado = calculadora.somar(2, 2); expect(resultado).toBe(4); }); it("Deve subtrair dois valores", function () { var resultado = calculadora.subtrair(10, 1); expect(resultado).toBe(9); }); it("Deve multiplicar dois valores", function () { var resultado = calculadora.somar(10, 10); expect(resultado).toBe(100); }); }); Testando a função de multiplicar

Executando os testes

Como você executa os testes em Java?

Karma O Karma é uma das ferramenta mais utilizadas para a execução de testes escritos em JavaScript. Ela é compatível com principais frameworks de teste como o Jasmine, Mocha e QUnit. http://karma-runner.github.io

Processo de Instalação Para instalar a ferramenta, basta digitar o comando abaixo: npm install -g karma

Configuração O Karma é configurado por meio do arquivo karma.conf.js. Nele será especificado o framework de teste, a localização dos arquivos da aplicação e o ambiente de execução. karma init karma.conf.js

karma.conf.js module.exports = function(config) { config.set({ basePath: '', frameworks: ['jasmine'], files: ['js/*.js', 'test/*.js'], exclude: [], port: 8080, colors: true, logLevel: config.LOG_INFO, autoWatch: true, browsers: ['Chrome'], singleRun: false }); };

karma start

karma run

Interoperabilidade

JSON – JavaScript Notation

Mitos e Lendas

JavaScript faz parte ou tem qualquer relação com a linguagem Java

JavaScript faz parte ou tem qualquer relação com a linguagem Java

JavaScript é uma linguagem considerada inferior e não deve ser utilizada em aplicações profissionais

JavaScript é uma linguagem considerada inferior e não deve ser utilizada em aplicações profissionais

JavaScript só pode ser utilizada dentro de um browser

JavaScript só pode ser utilizada dentro de um browser

A linguagem tem diversos problemas e não se comporta de forma diferente dependendo do browser

A linguagem tem diversos problemas e não se comporta de forma diferente dependendo do browser

JavaScript não é orientado a objetos como outras linguagens

JavaScript não é orientado a objetos como outras linguagens

1. 2. 3. 4. 5. 6. 7. 8. 9. 10. 11. <html> <head> <script> <!-- function somar(a, b) { return a + b; } --> </script> </head> <body> </body> </html> Declaração comentada Muito comum e utilizada em 1996

1. 2. 3. 4. 5. 6. 7. 8. 9. 10. 11. <html> <head> <script> <!-- function somar(a, b) { return a + b; } --> </script> </head> <body> </body> </html> Declaração comentada Muito comum e utilizada em 1996

1. 2. 3. 4. 5. 6. 7. 8. 9. 10. 11. <html> <head> <script language="javascript"> function somar(a, b) { return a + b; } </script> </head> <body> </body> </html> Atributo language Utilizado em uma época em que existiam outros dialetos como o vbscript

1. 2. 3. 4. 5. 6. 7. 8. 9. 10. 11. <html> <head> <script language="javascript"> function somar(a, b) { return a + b; } </script> </head> <body> </body> </html> Atributo language Utilizado em uma época em que existiam outros dialetos como o vbscript

1. 2. 3. 4. 5. 6. 7. 8. 9. 10. 11. <html> <head> <script type="text/javascript"> function somar(a, b) { return a + b; } </script> </head> <body> </body> </html> Atributo type Definição do tipo do formato do script

1. 2. 3. 4. 5. 6. 7. 8. 9. 10. 11. <html> <head> <script type="text/javascript"> function somar(a, b) { return a + b; } </script> </head> <body> </body> </html> Atributo type Definição do tipo do formato do script

1. 2. 3. 4. 5. 6. 7. <html> <head> </head> <body> <script src="script.js" type="text/javascript"></script> </body> </html> Local da declaração Qual é o melhor lugar para declarar os scripts?

1. 2. 3. 4. 5. 6. 7. <html> <head> </head> <body> <script src="script.js" type="text/javascript"></script> </body> </html> Local da declaração Qual é o melhor lugar para declarar os scripts?

Add a comment

Related presentations

Related pages

Desvendando a linguagem JavaScript - YouTube

Sign in now to see your channels and recommendations! Sign in. YouTube Red
Read more

Desvendando a linguagem JavaScript - #3 - String - Rodrigo ...

No terceiro episódio da série Desvendando a linguagem JavaScript, vamos estudar o tipo String e suas principais operações como replace ...
Read more

Desvendando a linguagem JavaScript - #11 - Date

Desvendando a linguagem JavaScript - #10 - Expressões Regulares. Desvendando a linguagem JavaScript - #14 - Herança - Parte 1. Publicado: 25 de Maio de 2015;
Read more

Desvendando a linguagem JavaScript - InfoQ: Software ...

JavaScript é ao mesmo tempo uma das linguagens mais utilizadas e também uma das mais odiadas do mundo. Nesta palestra, vamos viajar pela sua história ...
Read more

Desvendando a linguagem JavaScript - #8 - Function - Parte 2

Desvendando a linguagem JavaScript - #8 - Function - Parte 2 Curso de Javascript Deseja assistir novamente? Clique aqui! Você também pode gostar desses ...
Read more

GitHub - baltazarparra/desvendandoJavaScript: Guia de ...

desvendandoJavaScript - Guia de auxílio para o curso Desvendando a linguagem JavaScript do Rodrigo Branas.
Read more

Baixar Livro Desvendando os Segredos da Linguagem Corporal ...

desvendando os segredos da linguagem corporal baixar livro pdf; baixar livro linguagem corporal; linguagem corporal feminina pdf; linguagem corporal livro pdf;
Read more

Rodrigo Branas

Rodrigo Branas, Florianópolis (Florianópolis, Santa Catarina). 2,574 likes · 41 talking about this. Acesse nosso canal no YouTube e saiba tudo sobre...
Read more