JavaScript Overview

INTRODUÇÃO

1. O que é Javascript?

"JavaScript é uma das linguagens de programação mais populares atualmente. É conhecida como a linguagem da internet porque os navegadores a entendem de modo nativo sem a instalação de qualquer plugin."

Loiane Groner Estruturas de dados e algoritmos com JavaScript, 2018

2. Variáveis

Variáveis são usadas para armazenar dados, que podem ser atualizados ou recuperados sempre que necessário.

Variáveis servem para guardarmos dados de vários tipos. Javascript é uma liguagem fracamente tipada, ou seja, não é necessário definir o tipo quando declaramos uma variável. O que define o tipo de uma variável é o valor atribuído a ela. Uma variável declarada com as palavras reservadas let ou var, pode receber qualquer outro valor de qualquer tipo a qualquer momento, sempre respeitando o escopo.

Identificadores

Podem começar com letra, $ ou _
Não podem começar com números
É possível usar letras ou números
É possível usar acentos e símbolos
Não podem conter espaços
Não podem ser palavras reservadas

Dicas:

Maiúsculas e minúsculas fazem a diferença
Tente escolher nomes coerentes para as variáveis
Após 2015 [ES6] surguram novas formas de declarar variáveis let e const

💻	VAR	LET	CONST
Escopo Global	✔️	❌	❌
Escopo de Função	✔️	✔️	✔️
Escopo Bloqueado	❌	✔️	✔️
Pode ser ressignificado?	✔️	✔️	❌
Pode ser redeclarado?	✔️	❌	❌
Pode ser hospedado?	✔️	❌	❌

Escopo

Variáveis declaradas com a palavra reservada var ficam disponíveis no escopo Global e podem ser acesadas mesmo que fora de um bloco de código.

{
    var age = 32
}

console.log(age) //-> 32

Variáveis declaradas com a palavra reservada let (ou const) ficam disponíveis apenas no escopo Local, portanto não podem ser acesadas de fora de um bloco de código.

{
    let age = 32
}

console.log(age) //-> Uncaught ReferenceError: age is not defined

Variáveis declaradas com a palavra reservada const não podem ser declaradas sem ser inicializadas, ou seja, é obrigatório declarar um valor no momento da declaração.

const myLastName //-> Uncaught SyntaxError: Missing initializer in const declaration

const name = "João"
console.log(name) //-> João

Hoisting

No JavaScript as variáveis declaradas com o var sofrem o que se chama de Hoisting. É como se o JavaScript declarasse aquela variável fora do bloco de código sem inicializá-la, e dentro do bloco ele atribui um valor. Exemplo:

var age;
{
    age = 32
}

console.log(age) //-> 32

3. Tipos de dados

O JavaScript é uma linguagem dinamicamente tipada. O tipo de dado pode ser alterado conforme a necessidade do algoritmo.

string

O tipo string é uma cadeira de caracteres, texto, que é pode ser qualquer sequencia de caracteres desde que entre aspas duplas "texto qualquer", aspas simples 'texto qualquer' ou crases `Template string pode usar ${interpolation}`

var firstName = 'Kelvis' //string
let lastName = "Duran" //string
const regards = `Boas vindas` //string [Template String]

number

Qualquer valor númerico, seja ele inteiro(int) ou decimal(float).

let age = 35 //number
let height = 1.80 //number

boolean

Valor lógico representado apenas por duas palavras reservadas. true para verdadeiro e false para falso.

let isStudent = false //boolean
let isDev = true //boolean

null

Um objeto vazio, que não possui dados.

let price = null // Objeto Vazio

undefined

Valor ainda não definido.

let price;
console.log(price) // undefined

objeto

Objetos são uma forma de mapeamento chave x valor. É representado por chaves {}, e dentro delas definimos o identificador(chave) como uma "string" seguida de dois pontos : e logo após o valor, que pode ser de qualquer tipo. Havendo mais de uma chave x valor, deve se adicionar uma vírgula , ao final de cada um, com a exceção do último.

let person = {
    "name": "Gildo Neto",
    "age": 35,
    "isDev": true
}

array

Um conjunto de informações para representar listas e/ou conjuntos.

let artists = ["Alceu Valença", "Chico Science", "Zé Ramalho", "Otto"]

function

Um objeto que tem a capacidade de ser chamado (ser executado). Após declarado, pode ser chamado a qualquer momento usando o nome da função seguido de parêntes e opcionalmente com parâmetros dentro dos parênteses. nomeDaFuncao(parametros)

function sum(num1, num2){
    return num1 + num2
}

console.log(sum(3,7)) //-> 10

typeof

Operador que retorna o tipo do dado.

console.log(typeof firstName) //-> string
console.log(typeof height) //-> number
console.log(typeof isDev) //-> boolean
console.log(typeof price) //-> undefined
console.log(typeof person) //-> object
console.log(typeof artists) //-> object [Array é objeto]
console.log(typeof sum) //-> function

4. Operadores

TIPOS DE OPERADORES

ARITMÉTICOS
de ATRIBUIÇÃO
RELACIONAIS (de comparação)
LÓGICOS
TERNÁRIO

OPERADORES ARITMÉTICOS

5 + 2 //-> 7 [SOMA]
5 - 2 //-> 3 [SUBTRAÇÃO]
5 * 2 //-> 10 [MULTIPLICAÇÃO]
5 / 2 //-> 2.5 [DIVISÃO]
5 % 2 //-> 1 [RESTO]
5 ** 2 //-> 25 [POTÊNCIA]

ORDEM DE PRECEDÊNCIA DE OPERADORES ARITMÉTICOS

Parênteses -> ()
Potência -> **
Multiplicação, divisão e resto -> * / %
Soma e subtração -> + -

OPERADORES DE ATRIBUIÇÃO

Atribuição Simples

var a = 5 + 3 //-> 8
var b = a % 5 //-> 3
var c = 5 * b ** 2 //-> 45
var d = 10 - a / 2 //-> 6
var e = 6 * 2 / d //-> 2
var f = b % e + 4 / e //-> 3

Auto-atribuição

var n = 3

n = n + 4 //-> 7
n = n - 5 //-> 2
n = n * 4 //-> 8
n = n / 2 //-> 4
n = n ** 2 //-> 16
n = n % 5 //-> 1

Auto-atribuição SIMPLIFICADA

var y = 3

y += 4 //-> y = y + 4 
y -= 5 //-> y = y - 5  
y *= 4 //-> y = y * 4 
y /= 2 //-> y = y / 2 
y **= 2 //-> y = y ** 2 
y %= 5 //-> y = y % 5

Operadores de Incremento

var z = 5

z++ //-> z += 1 || z = z + 1
z-- //-> z -= 1 || z = z - 1

OPERADORES RELACIONAIS

> -> Maior que
< -> Menor que
>= -> Maior ou igual
<= -> Menor ou igual
== -> Igual
!= -> Diferente
=== -> Igual e do mesmo tipo?
!== -> Diferente e tipos diferentes?

5 > 2 //-> true
7 < 4 //-> false
8 >= 8  //-> true
9 <= 7  //-> false
5 == 5  //-> true
4 != 4  //-> false

OPERADORES LÓGICOS

! -> Negação
&& -> E (conjunção)
|| -> OU (disjunção)

// NEGAÇÃO -> Operador Unário
!true //-> false
!false //-> true

// CONJUNÇÃO -> Operador Binário
true && true //-> true
true && false //-> false
false && true //-> false
false && false //-> false

// DISJUNÇÃO -> Operador Binário
true || true //-> true
true || false //-> true
false || true //-> true
false || false //-> false

PRECEDÊNCIA DE OPERADORES DE TIPOS DIFERENTE

Operadores Aritméticos () ** / ...
Operadores Relacionais > < >= ...
Operadores Lógicos
3.1 !
3.2 &&
3.3 ||

// EXEMPLOS
idade >= 15 && idade <= 17 // a idade está entre 15 e 17?
estado == 'RJ' || estado == 'SP' // o estado é RJ ou SP?
salario > 1500 && sexo != 'M' // o salário é acima de 1500 e não é homem?

OPERADOR TERNÁRIO

Composto pelos caracteres ? e : Primeiro vem o teste lógico. Se o teste for true o valor após a interrogação ? será retornado. Se o teste for false o valor após os 'dois pontos' : será retornado.

let media = 8
media >= 7.0 ? "Aprovado" : "Reprovado" //-> Aprovado
media = 5.7
media >= 7.0 ? "Aprovado" : "Reprovado" //-> Reprovado

5. Estruturas Condicionais

Estruturas que são executadas apenas se atenderem as condições definidas no código.

if

let num = 1;

if (num === 1){
    console.log("num é igual a 1")
}

if else

let num = 1;

if (num === 1){
    console.log("num é igual a 1")
} else {
    console.log("num não é igual a 1")
}

if else if

let num = 1;

if (num === 1){
    console.log("num é igual a 1")
} else if (num === 2) {
    console.log("num é igual a 2")
} else {
    console.log("num não é igual a 1 nem a 2")
}

switch case

let month = "janeiro"

switch (month) {
    case "fevereiro":
        console.log("Mês 2")
        break

    case "março":
        console.log("Mês 3")
        break
    
    case "janeiro":
        console.log("Mês 1")
        break

    default:
        console.log("nenhum caso foi atendido")
}

6. Estruturas de Repetição

for

var colors = ["black", "white", "yellow", "green", "blue"]

for (let i = 0; i < colors.length; i++){
    console.log(colors[i])
}

for (let i = 0; i < 10; i++){
    console.log(i)
}

while

let i = 0;

while (i < 10){
    console.log(i);
    i++;
}

do while

let i = 0;

do {
    console.log(i);
    i++;
} while (i < 10)

7. Funções

Função sem parâmetro

function sayHello() {
    console.log('Hello')
}

sayHello()

Função com parâmetro(argumento)

function sayHello(name, lastName) {
    console.log('Hello ' + name + ' ' + lastName)
}

sayHello('Chico', 'Science')

Função com return

function sum(a,b) {
    return a + b
}

console.log(sum(40,60))

8. Classes

Desde de 2015 que é possível trabalhar com orientação a objetos no JavaScript.

class Book {
    constructor(title, author, pages){
        this.title = title;
        this.author = author;
        this.pages = pages;
    }

    read(){
        return `Estou lendo ${this.title}`
    }
}

let book = new Book('Algoritmos', 'Brian', 500);
let otherBook = new Book('Exu em Nova York', 'Cidinha da Silva', 100);

console.log(book.read())

Herança

class ITBook extends Book {
    constructor(title, author, pages, technology){
        super(title, author, pages)
        this.technology = technology;
    }
}

let itBook = new ITBook('Algoritmos for living', 'Brian', 500, 'Algoritmos');

console.log(itBook)

Encapsulamento

class Person {
    constructor(name){
        this._name = name;
    }

    get name(){
        return this._name
    }

    set name(value){
        this._name = value
    }
}

let person = new Person('Gildo')
person.name = 'Neto'
console.log(person.name)

Name		Name	Last commit message	Last commit date
Latest commit History 14 Commits
exercicios		exercicios
README.md		README.md

Folders and files

Latest commit

History

Repository files navigation

JavaScript Overview

INTRODUÇÃO

1. O que é Javascript?

2. Variáveis

Identificadores

Escopo

Hoisting

3. Tipos de dados

string

number

boolean

null

undefined

objeto

array

function

typeof

4. Operadores

TIPOS DE OPERADORES

OPERADORES ARITMÉTICOS

ORDEM DE PRECEDÊNCIA DE OPERADORES ARITMÉTICOS

OPERADORES DE ATRIBUIÇÃO

Atribuição Simples

Auto-atribuição

Auto-atribuição SIMPLIFICADA

Operadores de Incremento

OPERADORES RELACIONAIS

OPERADORES LÓGICOS

PRECEDÊNCIA DE OPERADORES DE TIPOS DIFERENTE

OPERADOR TERNÁRIO

5. Estruturas Condicionais

if

if else

if else if

switch case

6. Estruturas de Repetição

for

while

do while

7. Funções

8. Classes

Herança

Encapsulamento

9. Exercícios Introdução

About

Resources

Uh oh!

Stars

Watchers

Forks

Releases

Packages 0

Uh oh!

Contributors

Uh oh!

Languages

Packages