Primeiros Passos Com JavaScript - Marcelo Bitencourt
Primeiros Passos Com JavaScript - Marcelo Bitencourt
Capítulo 1
Introdução ao JavaScript
JavaScript e ECMAScript
Onde executar JavaScript?
Rodando JavaScript nos navegadores
Rodando JavaScript com Node.js
Capítulo 2
Variáveis
Variáveis em JavaScript e sua tipagem dinâmica
Variáveis e atribuição de valores
Variáveis e escopos
Escopo de declaração de bloco
Constantes
Tipos de dados e conversões
Dados primitivos
Tipo Objeto
Boolean
Tipo Null
O tipo de dados undefined
O tipo de dados Number
O tipo de dados String
Objetos Date
Capítulo 3
Operadores
Operadores de atribuição
Operadores de comparação
Operadores aritméticos
Abreviações de operadores de atribuição
Expressões aritméticas
Operador módulo (%)
Operador de exponenciação (**)
Operador incremento (++)
Operador decremento (--)
Operadores lógicos
Operador condicional ternário
O operador typeof
Operadores lógicos
Capítulo 4
Controle de fluxo
Declaração if...else
Declaração switch
Capítulo 5
Laços de repetição (loops)
Laço for
Laço while
Laço do...while
Break
Continue
Capítulo 6
Funções
Declarando funções
Chamadas de funções
Funções anônimas
Arrow functions
Funções e Parâmetros
Capítulo 7
Arrays
Criação de Arrays
Acessando itens do array
Alterando dados do array
Adicionando novos elementos no array
Removendo elementos de um array
Tamanho do array
Converter Strings em Arrays
Unindo Arrays
Converter Arrays em Strings
Ordenando e invertendo os elementos do Array
Considerações do autor
CAPÍTULO 1
Introdução ao JavaScript
Tecle <ENTER>
Variáveis
enum
await
let nome;
No exemplo anterior, nome assume o valor undefined. Nesse
caso ao tentar acessar a variável o valor unefined será exibido.
let nome;
console.log(nome) // será exibido undefined
Variáveis e escopos
function exibeFruta() {
var fruta = 'Abacaxi' ;
console.log(fruta)
}
exibeFruta() // a saída será: Abacaxi
console.log(fruta) // a saída será: ReferenceError: fruta is not defined
Note que ao criarmos a variável fruta dentro da função ela
passa a ter escopo local e não poderá ser acessada fora da
função. Desse modo um erro é exibido na última linha do exemplo
pois estamos tentando acessar uma variável que não foi definida
no escopo global.
Praticando
• Abra o VSCode e digite o exemplo a seguir:
Dados primitivos
boolean Tipo de dado lógico possui os valores true e false
null É um valor nulo ou vazio (aponta para um objeto inexistente)
undefined Valor indefinido
number É um tipo de dado numérico inteiro ou ponto flutuante
string Sequência de caracteres alfanuméricos.
symbol Tipo de dado com instâncias únicas e imutáveis
Tipo Objeto
Boolean
var test;
console.log(test); // saída: undefined
function exibeFrase(){
var fraseDoDia;
return fraseDoDia;
}
console.log(exibeFrase()); // saída: undefined
var x = "Pedro";
var y = new String("Pedro");
Operadores
No estudo das linguagens de programação um tópico bastante
importante e que deve ser bem compreendido pelos
desenvolvedores de software são os operadores. É com os
operadores que se aplica lógicas, atribui valores, entre outras
operações. O JavaScript possui vários operadores como: de
atribuição, de comparação, aritméticos, bit a bit, lógicos, de string,
condicionais, vírgula, unário e relacionais.
Operadores de atribuição
var x = 10;
var y = 10;
var x = y + 1;
console.log(x); //saída: 11
Operadores de comparação
var a = 2;
var b = 2;
var c = 3;
console.log(a==b); //saída: true
console.log(a==c); //saída: false
var a = 2;
var b = 2;
var c = "2";
console.log(a==b); //saída: true
console.log(a==c); //saída: true
O operador não igual (!=), é usado quando deseja-se retornar
um valor verdadeiro quando os operandos não foram iguais.
var a = 2;
var b = 3;
console.log(a!=b); //saída: true
var a = 2;
var b = 2;
var c = "2";
console.log(a===b); //saída: true
console.log(a===c); //saída: false
var a = 3;
var b = 3;
var c = 4;
console.log(a>=b); //saída: true
console.log(a>=c); //saída: false
var a = 5;
var b = 8;
var c = 2;
console.log(a<b); //saída: true
console.log(a<c); //saída: false
Operadores aritméticos
var x = 10;
var y = 50;
var z = x + y;
console.log(z); //saída: 60
Operador subtração (-)
var a = 10;
var b = 3;
var c = a - b;
console.log(c); //saída: 7
var a = 2;
var b = 5;
var c = a * b;
console.log(c); //saída: 10
var a = 6;
var b = 2;
var c = a / b;
console.log(c); //saída: 3
Abreviações com operadores de atribuição
Expressões aritméticas
var a = 6;
var b = 2;
var c = 10;
var d = a * b - 10
var e = a * b + 10 / b
var f = (a * b + 10) / b
console.log(d); //saída: 2
console.log(e); //saída: 17
console.log(f); //saída: 11
var a = 3;
var b = 2;
var c = 3;
var d = a % b; // retornará o resto da divisão de 3 por 2
var e = a % c; // retornará o resto da divisão de 3 por 3
console.log(d); //saída: 1
console.log(e); //saída: 0
var a = 2 ** 3;
console.log(a); //saída: 8
console.log(e); //saída: 0
Operador incremento (++)
var x = 2;
var y = x++;
console.log(y); //saída: 2
console.log(x); //saída: 3
var x = 2;
var y = ++x;
console.log(y); //saída: 3
console.log(x); //saída: 3
var x = 2;
var y = x--;
console.log(y); //saída: 2
console.log(x); //saída: 1
var x = 2;
var y = --x;
console.log(y); //saída: 1
console.log(x); //saída: 1
Operadores lógicos
OR lógico (||)
Controle de fluxo
{
declaração a;
declaração b;
.
.
.
declaração n;
}
Declaração if….else
if (condicao) {
codigo_1;
} else {
codigo_2;
}
var nota = 7
if (nota>=7) {
console.log('Aluno aprovado.');
} else {
console.log('Aluno em exame.');
}
if (condicao_a) {
codigo_1;
} else if (condicao_b) {
codigo_2;
} else if (condicao_n) {
codigo_n;
} else {
outro_codigo;
}
Vamos agora utilizar esse modelo para escrever um pequeno
tradutor de palavras de inglês para português.
if (palavra == 'dog') {
console.log('cão');
} else if (palavra == 'cat') {
console.log(palavra == 'gato');
} else if (palavra == 'wolf') {
console.log('lobo');
} else {
console.log('palavra não encontrada');
}
Declaração switch
switch (diaSemana) {
case "Sunday":
console.log("Domingo");
break;
case "Monday":
console.log("Segunda-feira");
break;
case "Tuesday":
console.log("Terça-feira");
break;
case "Wednesday":
console.log("Quarta-feira");
break;
case "Thursday":
console.log("Quinta-feira");
break;
case "Friday":
console.log("Sexta-feira");
break;
case "Saturday":
console.log("Sábado");
break;
default:
console.log("Não econtrado.");
}
CAPÍTULO 5
Laço for
Note que no exemplo três foi utilizado decremento x--, para diminuir
o valor da variável x de um.
Laço while
while (condicao){
//codigo
}
Exemplo1
var condicao = 0
Exemplo 2:
var x = 1
while (x <= 5){
console.log(x);
x++;
}
// saída: 1
2
3
4
5
Exemplo 3:
var x = 5
while (x >= 1){
console.log(x);
x--;
}
// saída: 5
4
3
2
1
Laço do….while
do {
//código
} while (condicao);
Exemplo1
var condicao = 0
do {
console.log('ola mundo!');
condicao++;
}while (condicao < 3)
Exemplo 2:
var x = 1
do {
console.log(x);
x++;
}while (x <= 5)
// saída: 1
2
3
4
5
Exemplo 3:
var x = 5
do {
console.log(x);
x--;
}while (x >= 1)
// saída: 5
4
3
2
1
Break
Funções
Declarando funções
function olaMundo() {
console.log('ola Mundo!');
}
Chamadas de funções
function olaMundo() {
console.log('ola Mundo!');
}
olaMundo(); //chamada da função
function olaMundo(frase) {
console.log(frase);
}
olaMundo('Ola Mundo!'); //chamada da função passando parâmetros
Funções anônimas
Funções e Parâmetros
Arrays
Criação de Arrays
cidades.push('Curitiba')
console.log(cidades) //saída: [ 'Sao Paulo', 'Porto Alegre', 'Salvador', 'Curitiba' ]
cidades.unshift('Curitiba')
console.log(cidades) //saída: [ 'Curitiba', 'Sao Paulo', 'Porto Alegre', 'Salvador' ]
Removendo elementos de um array
cidades.pop()
console.log(cidades) //saída: [ 'Sao Paulo', 'Porto Alegre' ]
cidades.shift()
console.log(cidades) //saída: [ 'Porto Alegre', 'Salvador' ]
Tamanho do array
Unindo Arrays
Um Abraço!
O autor