JAVA S C R I P T

PRIMEIROS PASSOS 
UM GUIA PARA
ESTUDANTES DE T.I
2ª EDIÇÃO

INCLUINDO TRECHOS DE CÓDIGO, RECURSOS ES6, CLASSES, ARROW

FUNCTIONS E MUITO MAIS!
Introdução ......................................................................................................4

Testando o seu código Javascript ...................................................................5

Browser consoles ...............................................................................................................................5

Editores online ...................................................................................................................................7
Tipo de dados e variáveis ..............................................................................9

Tipos de dados ...................................................................................................................................9

Tipos Primitivos .................................................................................................................................9
Tipos de referência...........................................................................................................................10
Regras para nome de propriedades e variáveis ..........................................................................10
O escopo de uma variável ..............................................................................................................10
A palavra chave this ........................................................................................................................11
Let ......................................................................................................................................................12
Const ..................................................................................................................................................12
Tipos de referência (Objetos) .......................................................................13

Propriedades De um Objeto ...........................................................................................................13

Obtendo as propriedades de um objeto .......................................................................................14
Definindo propriedades em objetos..............................................................................................14
Métodos Da classe oBJEct ...............................................................................................................14
Arrays ..........................................................................................................16

Métodos da classe array .................................................................................................................16

Functions ......................................................................................................20

Expressão de Função .......................................................................................................................20

Parâmetros e argumentos ...............................................................................................................21
Argumentos da função ...................................................................................................................21
Arrow function.................................................................................................................................22
Operadores ..................................................................................................23

Conversão de tipos ..........................................................................................................................23

Operadores da igualdade ...............................................................................................................24
Operador de propagação (spread operator) ................................................................................25
O operador typeof ...........................................................................................................................26
O operador in ...................................................................................................................................27
O operador instanceof.....................................................................................................................27
Classes..........................................................................................................28

Estrutura de classes e definições de métodos..............................................................................28

Notação de classes ...........................................................................................................................28
Expressões de classe ........................................................................................................................29
Métodos estáticos.............................................................................................................................29
Arquivos Javascript ......................................................................................31

Como adicionar JavaScript ao HTML...........................................................................................31

Bibliotecas Javascript ...................................................................................35

React ..................................................................................................................................................35
jQuery ................................................................................................................................................35
D3.js ...................................................................................................................................................36
Parsley ...............................................................................................................................................36
Frameworks Javascript ................................................................................37

Angular .............................................................................................................................................37
Vue.js..................................................................................................................................................37
Ember.js .............................................................................................................................................38
 INTRODUÇÃO

JavaScript é uma linguagem de programação de alto nível. A grande maioria dos sites modernos usa
JavaScript, e todos os navegadores modernos - em desktops, consoles de jogos, tablets e smartphones -
incluem um interpretador para JavaScript, tornando o JS a linguagem de programação mais onipresente
da história.

O JavaScript é parte de uma tríade de tecnologias que todos os desenvolvedores web precisam aprender:
HTML para especificar o conteúdo da página, CSS para especificar o layout e JavaScript para especificar o
comportamento.

Se você já se sente confortável com outras linguagens de programação, pode ser uma vantagem saber que
JavaScript é uma linguagem de programação de alto nível, dinâmica e não tipada, e ela é bem adaptada
aos tipos de programação orientada a objetos e funcional.

O nome "JavaScript" é na verdade um pouco enganador. Com excepção da semelhança sintáctica

superficial, o JavaScript é completamente diferente da linguagem de programação Java. No entanto,
JavaScript já evoluiu de suas origens de script para uma linguagem de uso geral sofisticada e poderosa.
 TESTANDO O SEU CÓDIGO
JAVA S C R I P T

Existem vários recursos disponíveis que podem ser usados para testar o JavaScript. Cada método vem
com um conjunto de características únicas que levam a uma série de resultados. Você pode usar qualquer
uma destas ferramentas para testar os exemplos ao longo deste livro, isso vai facilitar a sua aprendizagem.

BROWSER CONSOLES

Os navegadores têm os chamados consoles: linhas de comando integradas para as quais você pode
imprimir texto usando console.log() e onde você pode executar trechos de código.

Google Chrome
O Chrome DevTools é um conjunto de ferramentas para desenvolvedores web incorporado diretamente
no navegador Google Chrome. Este guia pode ser útil para começar a utilizar o Chrome DevTools.

Atalho no Mac : Cmd + Opt + I para abrir o Developer Tools.

Atalho no Windows/Linux: Ctrl + Shift + I para abrir o Developer Tools.
Safari
Safari, o navegador da Apple, também vem com um console para depurar, modificar e obter informações
sobre a sua página web de forma interativa. Você também pode ver logs, erros e avisos emitidos a partir de
uma página, para que você possa identificar e resolver tais problemas rapidamente. Você pode verificar
todas as funcionalidades disponíveis aqui.

Atalho no Mac: Cmd + Opt + I para abrir Developer Tools.

Firefox
Firefox Developer Tools é um conjunto de ferramentas para desenvolvedores web incorporado ao Firefox.
Você pode usá-las para examinar, editar e depurar HTML, CSS e JavaScript.

Atalho no Mac: Cmd + Opt + I para abri o Developer Tools.

Atalho no Windows/Linux: Ctrl + Shift + I para abrir o Developer Tools.
EDITORES ONLINE

Os editores online de JavaScript são uma mão na roda, pois permitem que você edite seu código
diretamente do seu navegador. Outra funcionalidade agradável é que você (geralmente) pode ver uma
prévia em tempo real do que você está fazendo, e isso pode realmente nos ajudar a economizar tempo. E
mesmo quando se trata de construir funções ou projetos em escala real os "playgrounds online" como
também são chamados, nos dão uma funcionalidade adicional de poder compartilhar trechos de código e
pedir a colegas para testá-lo e nos dar feedback, tudo online.

As vantagens de usar editores online em vez de usar os consoles usuais são:

• Visualização em tempo real, sem utilização de plugins.

• Você não precisa instalar nenhum software.

• Pode guardar e compartilhar o seu trabalho em links exclusivos.

Codepen.io
CodePen é um Editor JavaScript Online usado por designers e desenvolvedores front-end como ambiente
de desenvolvimento. Ele fornece um dos melhores ambientes para construir e implementar um projeto
onde outros desenvolvedores podem verificar a criatividade e qualidade do projeto em trechos de código
chamados “pens".

Ele segue uma metodologia simples de construção, teste e implantação do código. CodePen também é
também uma comunidade para testar e exibir seus trechos de código e de outros usuários.
JSFiddle.net
JSFiddle tem a capacidade de personalizar ferramentas e de poder usar bibliotecas JavaScript e outros
recursos de forma transparente. A interface é interativa e permite que você colabore com outros
desenvolvedores com o suporte do TogetherJS.

Playcode.io

PlayCode quickly compiles your javascript code and displays the result in real time. In addition, the
editor can compile Javascript from preprocessors such as: typescript, coffeescript, livescript. The
PlayCode server always keeps your JS code projects up-to-date and secure.
 T I P O D E DA D O S E VA R I Á V E I S

Quando um software precisa preservar um valor para uso posterior, ele atribui o valor (ou "coloca" o valor
em) uma variável. Uma variável especifica um nome simbólico para um valor e permite que o valor seja
acessado mais tarde. A forma como as variáveis funcionam é outra característica fundamental de qualquer
linguagem de programação.

Os tipos de dados em JavaScript podem ser divididos em duas grandes categorias: tipos primitivos e tipos
de referência. Os tipos primitivos em JavaScript incluem números, strings e booleanos, null e
undefined, qualquer valor diferente desses citados é considerado um Objeto.

Um objeto (ou seja, um membro do grupo da classe Object) é um conjunto de propriedades onde cada
propriedade tem um nome e um valor (seja um valor primitivo, como um número ou uma string, ou uma
entidade mais complexa como um Array).

TIPOS DE DADOS

A última norma ECMAScript define oito tipos de dados:

• Sete tipos de dados são primitivos:

◦ Boolean
◦ Null
◦ Undefined
◦ Number
◦ BigInt
◦ String
◦ Symbol
• E Object

TIPOS PRIMITIVOS

Para demonstrar como os tipos primitivos funcionam vou utilizar o exemplo da declaração de uma
variável, nesse caso, variável x. Em seguida vamos atribuir à ela a uma string, "Debug Everything”,
por exemplo. Depois de declarar esta variável, uma parte da memória do computador é alocada para
armazenar esse valor, nesse caso o registro #G4R9, e toda vez que tentamos acessar o valor da nossa
variável, Javascript retorna o valor armazenado naquela posição de memória apontado pela variável x.
const x = "Debug Everything";

x
Debug Everything

#G4R9
Uma propriedade comum entre todos os primitivos, eles são imutáveis. É importante não confundir um
primitivo em si com um valor primitivo atribuído ao elemento. Um novo valor pode ser reatribuído ao
atributo, mas o valor original não pode ser alterado da forma como objetos, arrays e funções podem.

O exemplo abaixo mostra que mesmo usando um método de String, ele não modifica a string, a variável
só muda quando nós a reatribuímos.

let text = "Debug Everything";

console.log(text); // Debug Everything

text.toUpperCase();
console.log(text); // Debug Everything

text = text.toUpperCase();
console.log(text); // DEBUG EVERYTHING

Um primitivo pode ser substituído, mas não pode ser diretamente alterado.

TIPOS DE REFERÊNCIA

Tipos de referência são estruturas mais complexas que são utilizadas para criar abstrações ou para
armazenar múltiplos valores, falaremos mais sobre ele na próximo capítulo.

R E G R A S PA R A N O M E D E P R O P R I E DA D E S E VA R I Á V E I S

O nome que você escolher deve identificar com a maior precisão possível sua variável. Isso torna o seu
código mais fácil de entender e de trabalhar. É realmente importante nomear corretamente as variáveis, o
JavaScript impõe algumas regras e dá algumas sugestões na hora de nomear as suas variáveis.

• Não pode ser uma palavra reservada.

• Não pode conter espaços ou hífen.

• Os nomes das variáveis devem começar com uma letra, underline (_) ou um sinal de dólar ($).

• Devem ser significativos.

• Não pode começar com um número.

• Os nomes das variáveis são sensíveis a maiúsculas e minúsculas.

O E S C O P O D E U M A VA R I Á V E L

O JavaScript tem dois escopos - global e local. O escopo de uma variável é a região de um programa onde
ela pode ser acessada. Qualquer atributo declarado fora de uma função pertence ao escopo global,
portanto está disponível em qualquer parte da aplicação. Uma função tem seu próprio escopo, e qualquer
atributo declarado dentro de una função só pode ser acessado a partir dessa função e de funções
aninhadas. Como as funções criam escopo local em JavaScript, ela também é chamada de escopo de
função.
let type = "Variavel Global";
blockScopeTest();

function blockScopeTest() {
console.log("Dentro da funcao:", type); // Dentro da funcao: Variavel Global
let type2 = "Variavel Local";
console.log("Dentro da funcao:", type2); // Dentro da funcao: Variavel Local
}

console.log("Fora da funcao: ", type); // Fora da funcao: Variavel Global

console.log("Fora da funcao: ", type2); // Error: type2 is not defined

A PA L AV R A C H AV E   T H I S  

A palavra chave this refere-se ao objeto que está executando o código Javascript no contexto atual.

Para torna mais simples, podemos tomar como exemplo a chamada de uma função. Enquanto uma função
é executada, Javascript cria uma referência ao contexto atual de execução dessa função, chamado this. O
contexto de execução significa, para nós, como a função é chamada. Para entender a palavra chave this,
só é necessário saber como, quando e de onde a função é chamada, como e onde ela foi declarada ou
definida não importa.

function print() {
console.log(this.name);
}

var name = "foo bar";

let obj1 = { name: "Debug", print: print };
let obj2 = { name: "Everything", print: print };

print(); // "foo bar"

obj1.print(); // "Debug"
obj2.print(); // "Everything"

No trecho de código acima, a chamada da função print() é um exemplo de vínculo padrão, como a
chamada foi feita dentro contexto global (fora de qualquer função) o valor retornado é o da variável
global. Já quando escrevemos obj1.print() e obj2.print(), esses são exemplos de vinculação
implícita. Aqui o objeto que está em frente ao ponto é o que a palavra chave this estará vinculada.
LET

let permite declarar variáveis que são limitadas a um escopo de bloco ou a expressão na qual ela é usada,
ao contrário da palavra chave var, que define uma variável global ou localmente para toda uma função,
independentemente do escopo do bloco.

Variáveis declaradas com let tem seu escopo no bloco e sub blocos no qual ela é definida, no entanto se
você definir uma variável em um sub bloco, ela não se torna acessível para toda a função.

let x = 1;
{
let x = 2; // variável diferente
{
let y = 3;
console.log(x); // 2
}
console.log(y); // y is not defined
}
console.log(x); // 1

CONST

As variáveis definidas com const comportam-se como variáveis let, excepto que elas não podem ser
reatribuídas. É necessário também um inicializador para a constante; ou seja, você deve especificar o valor
inicial durante a declaração da variável, o que faz sentido, já que ela não pode ser alterada posteriormente.

A declaração const cria uma referência apenas para leitura de um valor. Isso não significa que o valor seja
imutável, apenas que o identificador da variável não pode ser reatribuído. Por exemplo, no caso em que o
conteúdo é um objeto, o conteúdo do objeto (por exemplo, suas propriedades) podem ser alteradas.

const cart = { product: "tv", price: 500, quantity: 1 };

console.log(cart); // {product: “tv",price: 500, quantity: 1}

cart.quantity = 2;
cart.price = 1000;
console.log(cart); // {product: ”tv”, price: 1000, quantity: 2}

cart = { product: "phone", price: 200, quantity: 1 };

console.log(cart); // Erro: Atribuição a variável constante.
 TIPOS DE REFERÊNCIA (OBJETOS)
Ao contrário dos tipos primitivos imutáveis, que representam sempre apenas um valor, os objetos podem
representar vários valores ou valores complexos, e podem ser alterados ao longo da sua vida útil. De
forma simples, um objeto é simplesmente um recipiente e o conteúdo desse recipiente pode mudar ao
longo do tempo (é o mesmo objeto com conteúdo diferente). Objetos, assim como os tipos primitivos têm
uma sintaxe literal: chaves.

const obj = {};

Você também pode usar a palavra chave new para criar um novo objeto:

const obj = new Object();

No exemplo abaixo, vou explicar como a alocação de registros de memória funciona de forma diferente
para objetos.

const x = { name: "Debug Everything" };

#5DF6 { nome: "Debug Everything" }

#6DF4 #5DF6

Neste exemplo vamos definir novamente uma variável x mas dessa vez para um objeto em vez de um
valor primitivo. Quando a linha é executada, uma parte da memória do computador é alocada para a
variável x, digamos que o endereço desta localização de memória é #6DF4, mas o objeto não é
armazenado nesta localização de memória, ele é armazenado em outro lugar, e assumimos que o endereço
desse outro lugar seja #5DF6. Portanto, a variável x é uma etiqueta para o local de memória #6DF4 que
conterá o endereço do local de memória de destino, neste caso #5DF6. Então x está apontando para (ou
referenciando) um local de memória diferente e é por isso que os chamamos de tipos de referência.

PROPRIEDADES DE UM OBJETO

A propriedade de um objeto pode ser definida como sendo uma variável ligada ao objeto, são elas que
determinam as características do objeto.

As propriedades do objeto são exatamente as mesmas que as variáveis JavaScript comuns, com exceção do
vínculo com um objeto.

O conteúdo do objeto é chamado de propriedades (ou membros), e as propriedades são um nome (ou
chave) de um valor. Os nomes de propriedades devem ser strings ou símbolos, e as propriedades podem
ser de qualquer tipo (incluindo outros objetos).
OBTENDO AS PROPRIEDADES DE UM OBJETO

Você acessa as propriedades de um objeto com uma simples notação utilizando ponto (.) ou também (que
é obrigatório para propriedades com nomes inválidos), usando colchetes:

const x = { name: "Debug Everything" };

x.name; // Debug Everything
// or
x['name']; // Debug Everything
x['Name']; // undefined

Se você acessar uma propriedade não existente, Javascript retorna undefined, e como todas as variáveis
em JavaScript, tanto o nome do objeto (que pode ser uma variável normal) quanto o nome da propriedade
são sensíveis a maiúsculas e minúsculas.

DEFININDO PROPRIEDADES EM OBJETOS

É possível definir uma nova propriedade ou atualizar uma já existente usando as mesmas notações
anteriores.

const x = { name: "Debug Everything" };

x.name = “Javascript";
x['language'] = "Javascript";
console.log(x); // { name: 'Javascript', language: 'Javascript' }

MÉTODOS DA CL ASSE OBJECT

Um método é uma função associada a um objeto ou, simplesmente, um método é uma propriedade de um
objeto que é uma função. Os métodos são definidos como definimos funções normais, exceto que eles
devem ser atribuídos como propriedade de um objeto.

Todos os objetos em JavaScript descendem do construtor Object pai.  A class Object tem muitos
métodos úteis embutidos que podemos usar e acessar para tornar o trabalho com objetos individuais mais
simples.

Você pode usar estes métodos para acessar as propriedades, chaves e valores de objetos.

const user = {
firstName: 'Debug',
lastName: 'Everything',
};

const keys = Object.keys(user);

const values = Object.values(user);
 const entries = Object.entries(user);

console.log(keys);
//[ 'firstName', 'lastName' ]
console.log(values);
//[ 'Debug', 'Everything' ]
console.log(entries);
//[ [ 'firstName', 'Debug' ], [ 'lastName', 'Everything' ] ]

Você pode definir métodos para um Objeto incluindo uma definição do método na função construtora.
Observe o uso da palavra chave this para se referir ao objeto ao qual o método pertence.

const user = {
firstName: 'Debug',
lastName: 'Everything',
fullName() {
console.log(this.firstName + " " + this.lastName);
}
};

user.fullName(); // Debug Everything

 A R R AYS
Arrays, em JavaScript, são um tipo especial de Objeto. Ao contrário dos Objetos, o conteúdo do array tem
uma ordem natural (elemento 0 sempre vem antes do elemento 1), e chaves numéricas e seqüenciais. Os
Arrays oferecem uma série de métodos úteis que fazem deste tipo de dados uma forma extremamente
poderosa de expressar informação.

Os Arrays em JavaScript têm as seguintes características:

• As dimensões do Array não são fixas; os elementos podem ser adicionados ou removidos a qualquer
momento.

• Arrays não são padronizadas; todos os elementos podem ser de qualquer tipo.

• Arrays são de base zero. Ou seja, o elemento 0 é o primeiro elemento do conjunto.

Você consegue criar um Array de forma literal utilizando colchetes [], e com os elementos do Array
separados por vírgulas:

const arr0 = []; // array vazio, somente inicializado

const arr1 = [1, 2, 3, 4]; // array contendo números
const arr2 = [1, 'two', 3, null, undefined]; // array contendo tipos variados
const arr3 = [[1, 3, 5], [2, 4, 6]]; // array contendo arrays
const arr4 = [{ name: “John Doe", age: 32 }];// array contendo Objetos

Para acessar elementos individuais de um Array, podemos simplesmente usar o índice numérico do
elemento dentro de colchetes (exatamente como nós acessamos propriedades em um objeto).

const arr1 = [1, 2, 3, 4];

console.log(arr1[0]); // 1
console.log(arr1[1]); // 2

Diferentemente dos Objetos, para substituir um valores um array você precisa trabalhar com indices. O
que você pode fazer é simplesmente atribuir um novo valor ao conteúdo referenciado pelo índice:

const arr1 = [1, 2, 3, 4];

arr1[0] = 10;
arr2[1] = 20;
console.log(arr1); //[10, 20, 3, 4];

M É T O D O S D A C L A S S E A R R AY

Como eu disse antes, os Arrays são um tipo especial de Objeto, o que significa que eles têm seus próprios
métodos.

Vou listar alguns deles aqui, eles são realmente úteis e na maioria das vezes mais eficientes do que os
métodos 'usuais'.
Array.push()
Adiciona um elemento ao final do array e retorna o novo comprimento:

let languages = ["Java", "Javascript","PHP"];

let newLength = languages.push("Python");

console.log(newLength); // 4
console.log(languages); // [ 'Java', 'Javascript', 'PHP', 'Python' ]

Array.pop()
Remove e retorna o último elemento do array:

let languages = ["Java", "Javascript", "PHP"];

let extractedElem = languages.pop();

console.log(extractedElem); //PHP
console.log(languages); // [ 'Java', 'Javascript' ]

Array.shift()
Remove e retornar o primeiro elemento do array:

let languages = ["Java", "Javascript", "PHP"];

let extractedElem = languages.shift();

console.log(extractedElem); //Java
console.log(languages); // [ 'Javascript', 'PHP' ]

Array.unshift()
Adiciona um elemento ao início do array e devolve o novo comprimento do array:

let languages = ["Java", "Javascript", "PHP"];

let newLength = languages.unshift(“Python");

console.log(newLength); // 4
console.log(languages); // [ 'Python', 'Java', 'Javascript', 'PHP' ]

Array.map()
O método map() cria um novo array com os resultados da chamada de uma função para cada elemento do
array.

Para cada elemento de um array, em ordem, o método chama a função fornecida uma vez. Como no
exemplo abaixo, aonde estou aplicando o método map para concatenar o nome dos usuários a fim de
serem exibidos de uma forma mais apresentável.
const users = [
{ firstname: "Steve", lastname: "Jobs" },
{ firstname: "Debug", lastname: "Everything" },
{ firstname: "Bill", lastname: "Gates" }
];

const result = users.map((user) => {

return `${user.firstname} ${user.lastname}`;
});
console.log(result); //[ 'Steve Jobs', 'Debug Everything', 'Bill Gates' ]

Array.every()
O método verifica se todos os elementos em um array passam por um teste (fornecido como uma função).

O método executa a função uma vez para cada elemento presente na matriz: Se encontrar um elemento
onde a função retorna um valor falso, every() retorna falso (e não verifica os valores restantes) Caso
contrário ele retorna true.

Nota: every() este método retorna true para um Array vazio sobre qualquer condição.

Nota: every() não altera o array original.

let contest = [
{ team: 'A', phase: 1, points: 8 }, { team: 'A', phase: 2, points: 5 },
{ team: 'A', phase: 3, points: 9 }, { team: 'A', phase: 4, points: 7 },
];

let result = contest.every(function (team) {

return team.points >= 7;
});

if (result) console.log("Team goes to the next phase!");

else console.log("Try a next time"); // Try a next time

Array.some()
O método determina se pelo menos um elemento do array corresponde ao predicado dado. Ele só retorna
falso se nenhum dos elementos do array corresponder ao predicado. E assim como o método acima ele
também não altera o Array inicial mas nesse caso ele sempre retorna false para uma matriz vazia, sobre
qualquer condição.

var positives = [1, 3, 5, 7, 9];

var negatives = [-2, -4, -6, -8, -10];
var mix = [2, -4, 5, -6, 8];

var negativeChecker = function(element) {

 // verifica se um elemento é negativo
return element < 0;
};
console.log(positives.some(negativeChecker)); // false
console.log(negatives.some(negativeChecker)); // true
console.log(mix.some(negativeChecker)); // true
 FUNCTIONS

Uma função é um conjunto auto-contido de instruções que funciona como uma entidade única. Uma
função em JavaScript é definida com a palavra chave function, seguida por um nome, seguido de
parênteses (), os parênteses podem incluir nomes de parâmetros separados por vírgulas (parâmetro1,
parâmetro2, ...)
nome da parâmetros da
função função

function sumFuction(p1, p2) {

//body
}

Cada função tem um corpo (o código a ser executado), ele é colocado dentro de chaves {}. O corpo da
função não é executado apenas declarando a função, você precisa usar o nome da função seguido por
parênteses para chamar uma função (também chamado de execução ou invocação):

function sumFuction(p1, p2) {

console.log(p1 + " + " + p2 + " =", (p1 + p2));
}
sumFuction(2, 2); // 2 + 2 = 4

Uma função geralmente é chamada para resolver uma expressão. Então, como sabemos a que valor a
chamada de uma função resolveu? É aqui que entram os valores de retorno. A palavra chave return
termina a execução do corpo de uma função e retorna o valor que acompanha a palavra chave. Quando
chamamos a função abaixo, ela irá retornar o resultado que será enviado para a constante result que
invocou a função:
function sumFuction(p1, p2) {
return p1 + p2;
}
let result = sumFuction(2, 2);
console.log(result); // 4

Se você não declarar explicitamente o retorno, o valor retornado será undefined. Uma função pode
retornar qualquer tipo de valor.

EXPRESSÃO DE FUNÇÃO

É uma expressão bem semelhante a que vimos no seção anterior e tem a praticamente a mesma sintaxe. A
principal diferença entre uma expressão de função e uma declaração de função é o nome da função, que
pode ser omitido para criar funções anônimas. É possível usar uma expressão de função como um IIFE
(Expressão da função invocada imediatamente) que é executado assim que é definida. Podemos alterar o
mesmo exemplo que vimos acima para criar uma expressão de função.

const sumFuction = function (p1, p2) {

return p1 + p2;
}
console.log(sumFuction(2, 2)); // 4

Uma Expressão de Função define uma função nomeada ou anónima, uma função anónima é uma função
que não tem nome. Expressões de funções não são hoisted e, portanto, não podem ser usadas antes de
serem definidas. No exemplo abaixo, estamos definindo o mesmo objeto da função anônima acima a uma
nova variável.

const newFunctionName = function (p1, p2) {

return p1 + p2;
}
console.log(newFunctionName(2, 2)); // 4

Agora, independentemente de qual variável você usar para invocar a função o resultado será o mesmo:

const sumFuction = function (p1, p2) {

return p1 + p2;
}
console.log(sumFuction(2, 2)); // 4

const newFunctionName = function (p1, p2) {

return p1 + p2;
}
console.log(newFunctionName(2, 2)); // 4

PARÂMETROS E ARGUMENTOS

Essencialmente, o termo parâmetro e a palavra argumento significam a mesma coisa. Você pode fazer a
seguinte distinção, se quiser:

• Os parâmetros são parte de uma definição de função. Eles também são chamados de parâmetros formais
e argumentos formais.

• Os argumentos são parte da chamada da função. Eles também são chamados de parâmetros reais e
argumentos reais.

ARGUMENTOS DA FUNÇÃO

Javascript não se importa com o número de argumentos ou mesmo com os tipos, JavaScript não faz
nenhuma verificação nos argumentos. Por exemplo, se o número de argumentos passados durante a
invocação da função for diferente do número de parâmetros especificados durante a descrição da função,
JavaScript não lança nenhum erro. Vou usar nosso último exemplo para demonstrar isso:

const sumFuction = function (p1, p2) {

return p1 + p2;
}
let result = sumFuction(2, 2, 5, 6);
console.log(result); // 4

Neste caso Javascript executa a função sem problemas e mostra o resultado correto, basicamente, quando
são apresentados argumentos em excesso eles não são atribuídos a nenhum parâmetro. Por outro lado, se
tivermos mais parâmetros que os argumentos, os parâmetros sem argumentos correspondentes são
definidos como undefined.

const sumFuction = function (p1, p2) {

console.log(p1); // 2
console.log(p2); // undefined
return p1 + p2;
}
let result = sumFuction(2);
console.log(result); // NaN

ARROW FUNCTION

ES6(ECMAScript 6) introduziu uma nova e, muito bem vinda, notação com arrow function. É basicamente
uma sintaxe mais amigável (com uma grande diferença funcional que falaremos em breve) que reduz o
número de vezes que você precisa digitar a palavra function, bem como o número de chaves({}) que
você precisa digitar.

As arrow functions te permitem simplificar a sintaxe de três maneiras:

• A palavra function pode ser omitida.

• Se a função aceita um único argumento, os parênteses podem ser omitidos.

• Se uma única expressão é o corpo da função, você pode omitir o uso das chaves e a declaração return.

A notação com arrow functions permanece sempre anónima e você ainda pode atribuí-las a uma variável.
Vou reescrever a função anterior usando a notação com arrow functions, se liga como que fica bem mais
simples e menos verboso:

const sumFuction = (p1, p2) => p1 + p2;

const result = sumFunction(4, 3);

console.log(result); // 7
 OPERADORES

Operadores em JavaScript são utilizados para atribuir valores, comparar valores, realizar operações
aritméticas, etc. Você pode pensar em operadores como o "verbo" para o "substantivo" de uma expressão,
ou seja, uma expressão é algo que resulta em um valor; em outras palavras um operador é algo que você
utiliza para produzir um valor.

O JavaScript inclui as seguintes categorias de operadores.

• Operadores Aritméticos

• Operadores de Atribuição

• Operadores para Strings

• Operadores de Comparação

• Operador Condicional (Ternário)

• Operadores Lógicos

• Operadores Bitwise

CONVERSÃO DE TIPOS

Se um operador recebe operandos que não têm as formas corretas, raramente é lançada uma exceção. Ao
invés disso, Javascript converte automaticamente os operandos para se trabalhar com eles.

Para ficar mais claro, vou mostrar como isso acontece com alguns exemplos.

Em primeiro lugar, o operador de multiplicação(*) só pode operar com números. Assim, ele transforma as
strings em números antes de calcular a resposta.

let result = '2' * '5';

console.log(result); // 10

Segundo, o operador colchete ([], sim isso também é um operador), só pode manusear strings para
atribuir e acessar uma propriedade de um objeto, todos os outros tipos são convertidos em strings.

const obj = {};

obj['true'] = "Debug";
obj[false] = "Everything";
obj['undefined'] = "Debug Everything";

console.log(obj['true']); //Debug
console.log(obj[false]); //Everything
console.log(obj[undefined]); //Debug Everything
OPERADORES DA IGUALDADE

JavaScript tem dois tipos de operadores de igualdade: igualdade fraca (==) e igualdade restrita (===). A
recomendação é de usar sempre esta última.

Igualdade (==)

O operador de igualdade ou igualdade fraca converte (temporariamente, durante a conversão) os

operandos durante a comparação, se não forem do mesmo tipo, após a transformação é feita uma
comparação estrita. Quando ambos os operandos são objetos, então o JavaScript compara as referências
internas, que são iguais se os operandos em memória se referirem ao mesmo objeto.

1 == 1 // true
"1" == 1 // true
1 == '1' // true
0 == false // true
0 == null // false
0 == undefined // false
null == undefined // true

Desigualdade (!=)

O operador de desigualdade funciona de forma extremamente similar ao operador de igualdade acima, a

diferença é que ele retorna true caso os operandos sejam diferentes. A conversão de tipos também
acontece aqui.

1 != 1 // false
"1" != 1 // false
1 != '1' // false
0 != false // false
0 != null // true
0 != undefined // true
null != undefined // false

Igualdade estrita (===)

O operador de igualdade estrita retorna verdadeiro se os operandos forem estritamente iguais, ou seja,
contém o mesmo valor e são do mesmo tipo, sem a conversão de tipos.

1 === 1 // true
"1" === 1 // false
1 === '1' // false
0 === false // false
0 === null // false
 0 === undefined // false
null === undefined // false

Desigualdade estrita (!==)

O operador de desigualdade estrita retorna verdadeiro se os operandos não forem iguais e/ou não forem
do mesmo tipo.

1 !== 1 // false
"1" !== 1 // true
1 !== '1' // true
0 !== false // true
0 !== null // true
0 !== undefined // true
null !== undefined // true

OPERADOR DE PROPAGAÇ ÃO (SPREAD OPERATOR)

O operador de propagação permite uma propagação ou extensão de forma independente dentro de um

receptor. Iterables são qualquer coisa como listas, arrays ou sets que podem ser iterados por um laço de
repetição como for().

const text = 'DEBUG';

console.log([ ...text ]); //[ 'D', 'E', 'B', 'U', 'G' ]

Observe esse primeiro exemplo acima onde estamos expandindo a string DEBUG. Os três pontos no texto
da variável dentro da função console.log(), atuam sobre a string e 'espalham' cada caractere
individual dentro do receptor, nesse caso o console.log().

Também podemos transformar um array de strings em uma string única como podemos ver no exemplo
abaixo:

const items = ['Debug', 'Everything', 'Javascript', 'Book'];

console.log(...items) // Debug Everything Javascript Book

Repare que começamos no exemplo acima com o array ['Debug', 'Everything', 'Javascript',
'Book'], e quando o imprimimos usando a sintaxe de propagação obtemos "Debug Everything
Javascript Book". Note que já não se trata mais de um Array, e sim de uma String.

Sem o uso dessa sintaxe, criar, copiar ou concatenar arrays pode gerar um um código bem mais verboso,
necessitando, muitas vezes, da utilização de funções para auxiliar o processo. Usando o operador de
propagação isso se torna muito mais simples:

//Arrays Literais
const languages = ['Javascript', 'Java'];
 const allLanguages = ['Python', ...languages, 'PHP', 'C++'];
console.log(allLanguages);
// [ 'Python', 'Javascript', 'Java', 'PHP', 'C++' ]

//Copiando arrays
const numArray = [1, 2, 3];
const arrCopy = [...numArray];
console.log(arrCopy); // [ 1, 2, 3 ]

//Concatenando arrays
const numArray2 = [3, 4, 5];
const concat = [...numArray, ...numArray2];
console.log(concat); // [ 1, 2, 3, 3, 4, 5 ]

Os objetos em si não são iteráveis:

const obj = {'key1': 'value1'};

const array = [...obj]; // TypeError: obj não é um iterável

A operador de propagação só pode ser aplicada a objetos iteráveis, (exceto no caso de propriedades em
Objetos que são iteráveis)

O OPERADOR TYPEOF

O operador typeof é usado para obter o tipo de dados do seu operando. O operando pode ser literal ou
uma estrutura de dados como uma variável, uma função ou um objeto. O operador retorna o tipo de dado
em forma de String.

Alguns exemplos:

typeof "Debug Everything" // string

typeof 3.14 // number
typeof NaN // number
typeof false // boolean
typeof null // object
typeof [1, 2, 3, 4] // object
typeof { type: 'Object', prop: 2 } // object
typeof new Date() // object
typeof function () { } // function

Uma curiosidade aqui, é o fato de que NaN, o que significa "Not a Number" é na verdade um número. A
explicação para isso é que NaN é uma forma de dados binários em computação. NaN é, no verdade, uma
categoria de dados numéricos cujo valor não pode ser expresso com números reais. O termo "Not a
Number", portanto, não significa que o significado não seja numérico, mas sim que o valor não pode ser
representado com números.
O OPERADOR IN

O operador in é bastante útil. Ele ajuda a testar se uma propriedade existe em um objeto. Este operador
retorna verdadeiro se o primeiro operando é uma propriedade do objeto, ou uma propriedade de um de
seus parentes em sua cadeia de protótipos. Caso contrário, ele retorna false.

// Arrays
const languages = ["Java", "Javascript", "PHP"];
"Java" in languages // false (Indique o número do índice não o valor)
0 in languages // true
4 in languages // false (o índice não existe)
"length" in languages // true (length é uma propriedade da classe Array)

// Objetos
const obj = { type: 'Object', prop: 2 };
"type" in obj // true
"prop" in obj // true

// Objetos pré definidos

"PI" in Math // true
"NaN" in Number // true
"length" in String // true

O OPERADOR INSTANCEOF

Esse operador é usado para avaliar o tipo de um objeto em tempo de execução. Se ele retornar true
significa que o objeto é uma instância de uma classe específica e se retorna false significa que o Objeto
não é membro da classe.
// Strings
const text = 'Debug Everything’;
const newString = new String("Debug Everything");

text instanceof String; // false, string literal não é um objeto

newString instanceof String; // retorna true
newString instanceof Object; // retorna true

// Arrays
const languages = ["Java", "Javascript", "PHP"];
languages instanceof Array; // true
languages instanceof Object; // true

// Objects
const obj = { type: 'Object', prop: 2 };
obj instanceof Object; // true
 CLASSES

As classes em JavaScript, implementadas no ECMAScript 2015, são na sua maioria "açúcar sintáctico". Essa
nova sintaxe não adapta o JavaScript a um paradigma moderno de herança orientada a objetos.

As classes são, em essência, "funções especiais", e assim como expressões e declarações de funções as
classes também podem ser definidas dentro do mesmo padrão separadas em dois componentes:
expressões de classe e declarações de classe.

ESTRUTURA DE CLASSES E DEFINIÇÕES DE MÉTODOS

O corpo de uma classe, assim como nas funções, é a parte de dentro das chaves {}. Aqui é onde você
define os membros da classe, tais como métodos e/ou método construtor.

A única diferença na sintaxe de inicialização de uma classe, é que você precisa usar a palavra chave class
em vez de function, e atribuir as propriedades dentro de um método construtor.

O método construtor é um método especial para a construção e inicialização de uma entidade gerada com
uma classe. Em uma classe só pode haver um método especial com o nome "constructor". Um erro de
sintaxe (SyntaxError) é lançado se a classe incluir mais de um método construtor.

class User {
constructor(name) {
this.name = name
}
}

NOTAÇ ÃO DE CL ASSES

Para instanciar uma classe você pode utilizar a palavra chave new. Isso te permite criar um objeto da
classe e com isso você pode utilizar seus métodos e atributos.

class User {
constructor(name) {
this.name = name
}
}

let user = new User("Debug Everything");

console.log(user.name); // Debug Everything

Uma diferença significativa entre as declarações de função e as declarações de classe é que as declarações
de função são hoisted (comportamento padrão da movimentação de declarações para o topo) e as
declarações de classe não são. Você deve declarar suas classes primeiro e depois acessá-la, caso contrário,
um ReferenceError será exibido:

const user = new User(); // ReferenceError: User is not defined

class User {};

EXPRESSÕES DE CLASSE

Outra forma de definir uma classe é através das expressões de classe, que podem ser nomeadas ou
anónimas. O nome dado a uma expressão de classe é local para o corpo da classe e ela pode ser recuperada
através da propriedade name da classe (não o nome de uma instância).

// unnamed
let User = class {
constructor(name) {
this.name = name
}
};
console.log(User.name); // User

// named
let User = class User2 {
constructor(name) {
this.name = name
}
};
console.log(User.name); // User2

MÉTODOS ESTÁTICOS

A palavra chave static especifica um método estático para uma classe. Os métodos estáticos são
chamados sem que sua classe seja instanciada e não podem ser chamados através de uma instância de
classe. Métodos estáticos são frequentemente usados para construir funções úteis para uma aplicação.

class User {
constructor(name) {
this.name = name;
}

static queueTicket(min, max) {

return Math.floor(Math.random() * (+max - +min)) + +min;
}
}
let user = new User();
const queueTicket = user.queueTicket(1,99); //TypeError
console.log(queueTicket);

const queueTicket = User.queueTicket(1, 99);

console.log(queueTicket); // 48
 A R Q U I VO S JAVA S C R I P T

JavaScript é usado para renderizar web sites interativos e para criar aplicações web. Os navegadores mais
modernos e atualizados, suportam JavaScript através de motores incorporados sem a necessidade de
plugins externos.

Em páginas web, JavaScript precisa ser carregado e executado juntamente com o HTML. Isto pode ser feito
tanto em linha dentro do documento HTML, ou em um arquivo separado que é carregado dentro do
arquivo HTML, explicarei ambas as abordagens nas próximas linhas.

C O M O A D I C I O N A R JAVA S C R I P T AO H T M L

First, I will show you what an HTML file without any Javascript code looks like, if you create an HTML
file, say index.html, and paste this code below into it, and open it in your browser you will see a blank
page. A standard HTML file looks like this:

Primeiro, vou mostrar como é um arquivo HTML padrão sem qualquer código Javascript. Se você criar
um arquivo HTML, digamos index.html, e colar este código abaixo nele, e abri-lo no seu navegador
você verá uma página em branco.

<!DOCTYPE html>
<html lang="en-US">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>My Webpage Title</title>
</head>
<body>
</body>
</html>

Basicamente, você pode incluir JavaScript no seu HTML de duas maneiras:

• Escrevendo o código diretamente no arquivo HTML.

• Ou incluindo-o como um link para um arquivo externo.

Na maioria das vezes, e como minha recomendação, você incluirá o JavaScript como um arquivo externo.
Mas como parte do aprendizado, vou mostrar a você as duas formas que você pode usar.

Escrevendo o código no seu HTML

A tag <script> é o que usamos para incluir o nosso JavaScript dentro do arquivo HTML. Se quisermos
que o script seja executado antes que o conteúdo da página seja renderizado, temos que adicioná-lo entre
as tags <head> e </head>. Se quisermos que o script seja executado após a renderização do conteúdo da
página, temos que adicioná-lo imediatamente antes ou depois da tag </body>.

Este script abaixo irá permitir que a página a exiba um alerta com a string “Hello World", independente de
quando o usuário carrega o site.

<!DOCTYPE html>
<html lang="en-US">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>My Webpage Title</title>
</head>
<body>
</body>
<script>
let message = "Hello World!”;
alert(message);
</script>
</html>

Assim que você salvar e carregar a página dentro do seu navegador, você receberá um alerta que parecerá
semelhante a este:

Trabalhando com um arquivo JavaScript separado

O código JavaScript normalmente reside em um ou mais arquivos JS referenciados em documentos

HTML. Essa é a forma mais eficiente e organizada de trabalhar com Javascript, considerando o fato de que
grande maioria dos projetos usam dezenas ou até centenas de arquivos Javascript, deve-se sempre pensar
na organização desses arquivos.

Vamos criar um pequeno projeto web para demonstrar como ligar um documento JavaScript a um
documento HTML. O projeto vai ter um arquivo script.js no diretório js/, e um arquivo style.css
no diretório css/ para futuros códigos em CSS e por fim, um arquivo index.html na raiz principal do
projeto.
 project/
├── css/
| └── style.css
├── js/
| └── script.js
└── index.html

A partir da seção acima podemos continuar com o nosso template HTML, vamos usar o código entre as
tags <script> do exemplo anterior, e vamos colocá-lo dentro do arquivo script.js que acabamos de
criar seguindo a estrutura acima, dentro de arquivos Javascript(.js) não precisamos mais das tags
<script>. E agora, invés de exibir um alerta vamos colocar nossa mensagem no corpo da página,
utilizando algumas das propriedades do documento HTML. O script fica assim:

let message = "Hello World!";

document.body.innerHTML = "<h1>" + message + "</h1>";

E finalmente podemos adicionar a referência para este script no nosso arquivo HTML. E como comentei
anteriormente, você pode fazer isso de algumas maneiras, a primeira é colocando a referência entre as as
tags <head> ou se você preferir, e o que acredito que seja o recomendável para grande maioria dos casos,
imediatamente antes da tag </body>, para referenciar nosso arquivo javascript vamos usar novamente as
tags <script> com na linha de código abaixo:

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

A tag <script> está apontando para o nosso arquivo script.js no diretório js/ do nosso projeto.
Agora vamos colocar esse código dentro do nosso modelo HTML e ver como fica o resultado final do
arquivo .html.

<!DOCTYPE html>
<html lang="en-US">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>Today's Date</title>
</head>
<body>
</body>

<script src=“js/script.js”></script>
</html>

Agora quando você salvar seu arquivo e abri-lo com seu navegador ele deve mostrar algo parecido com
isto:
Scripts pequenos ou executados apenas em uma página se encaixam bem em um arquivo HTML, mas não
é uma solução muito eficaz para scripts maiores ou scripts que serão usados em outros websites, eles
podem ficar extremamente difíceis de ler e entender.
 B I B L I O T E C A S JAVA S C R I P T
REACT

React é uma biblioteca JavaScript projetada para construir interfaces de usuário. É gerenciada pelo
Facebook e por um grupo de desenvolvedores individuais e outras empresas. React pode ser usada como
base no desenvolvimento de aplicativos de página única ou mobile.

Um simples “Hello World” em React se parece mais ou menos com isso:

ReactDOM.render(
<h1>Hello world!</h1>,
document.getElementById('root')
);
JQUERY

JQuery é uma biblioteca que torna o JavaScript mais acessível e o DOM mais fácil de manipular. A curva
de aprendizagem e a fácil sintaxe do JQuery criou uma geração de novos desenvolvedores.
Alguns anos atrás, jQuery era visto como uma das formas mais sólidas de criar sites robustos com suporte
a cross-browser.

Esse pequeno trecho de código abaixo, escrito em jQuery, mostra como exibir uma mensagem no corpo da
página utilizando um objeto com id.

$(document).ready(function () {
$("#msgid").html("This is Hello World by JQuery");
});

D3.JS

D3 (ou D3.js) é uma biblioteca JavaScript versátil que usa padrões web como SVG, HTML e CSS para criar
uma visualização interativa. O D3 oferece melhor controle sobre o efeito visual final do que outras
bibliotecas. D3 opera conectando os dados ao DOM, e depois fazendo a transformação do documento. Ele
também tem seu próprio ecossistema composto por plugins e bibliotecas que ampliam sua funcionalidade
básica.

PARSLEY

Parsley oferece mais ferramentas para validação de formulários do que qualquer outra biblioteca
JavaScript. Você escolhe o nível de validação que precisa, no entanto, pode tornar-se muito complexo.
 F R A M E W O R K S JAVA S C R I P T
Uma framework é uma abstração na qual o código adicional escrito pelo usuário pode ser usado para
modificar o software que fornece uma funcionalidade genérica. Frameworks em JavaScript são abstrações
de uma aplicação escrita em JavaScript que permite aos programadores modificar e utilizar as funções de
acordo com a sua conveniência.

Os framework são mais adaptáveis e por isso a maioria dos programadores preferem utilizar algum. Os
frameworks JavaScript são um tipo de ferramenta que torna o JavaScript mais fácil e flexível de trabalhar.
Além do que, grande parte dos frameworks permitem que o programador codifique a página de forma
responsiva mais eficientemente.

ANGULAR

Angular é um dos mais poderosos, eficazes e de código aberto frameworks. O Google utiliza este sistema,
ele é muito utilizado para construir Aplicações de Página Única (SPA). Ele estende o HTML para a
aplicação, interpretando os atributos com dados vinculados através da sua sintaxe {{}}.

VUE.JS

Esta plataforma JavaScript, embora criada em 2016, já entrou no mercado e provou o seu valor ao fornecer
várias funcionalidades. Seu modo de integração dupla é uma das características mais atraentes para o
desenvolvimento de SPA de alta qualidade. Além de contar com um fórum bastante confiável para o e
ativo.
EMBER.JS

Ember.js foi introduzido no mercado em 2015, e ganhou popularidade com sua ampla área de aplicação. O
framework oferece suporte à conexão de dados bidirecionais, fornecendo assim uma estrutura estável para
gerenciar interfaces de usuário complicadas. Sites populares como LinkedIn, Netflix, Nordstrom e muitos
outros usam a plataforma.
 Javascript
Primeiros Passos Um
Guia Para Estudantes De
T.I

Facebook - Instagram - Youtube