Este repositório tem o objetivo de trazer habilidades para que você possa massacrar qualquer problema usando Javascript, esta que é a linguagem mais hypada no momento. Podemos responsabilizar a gigante e maravilhosa comunidade por este feito, uma vez que o JS contém features (nativas ou construidas pela própria comunidade) para o uso desta ferramenta para mil e uma utilidades.
Este repositório não tem o objetivo de introduzir conceitos de lógica de programação ou abrir um conceito histórico e evolutivo desta linguagem maravilhosa. Então se você está dando os primeiros passos no fantástico (e sadomasoquista risos) universo da programação, deixarei logo em seguida uma lista de conteúdos iniciais interessantes.
Vamos iniciar com o conceito mais básico possível sobre códigos ao meu ver: A variável. Alegoricamente, a variável é uma gaveta, onde se guarda informação. Até conseguimos deixar uma gaveta vazia, mas qual seria o propósito de construir uma gaveta se esta ficará vazia? A nossa gaveta fica em um armário chamado memória interna, podendo ser acessada futuramente no código.
O Javascript é continuado oficialmente pela Mozilla, sendo atualizado em versões pela grupo open source EcmaScript. Sendo adicionado os modelos de variáveis let e const após o ECMAScript 6.
No Javascript existem 3 tipos de variaveis:
var
nasceu juntamente com o JS, hoje em dia não é recomendado o uso.let
este tipo de variável é válida apenas no escopo do bloco no qual foi declarada (por exemplo em uma função ou em um loop), sendo possível ser subscritaconst
especificamente este modelo de variável é na verdade uma "constante", sendo possível apenas ler ela após a escrita, não podendo ser subscrita.
Apenas por motivos cientifico, vamos dar uma olhada como é o funcionamento do modelo var
if (true) {
var x = 5
}
console.log(x) // 5
Como pode ser visto, a variavel foi declarada no escopo do loop, e mesmo fora deste escopo é possível printar o seu valor.
Com o modelo let
é diferente, onde é impossível acessar uma varíavel que não está no escopo no qual você se encontra:
if (true) {
let y = 5
}
console.log(y) // ReferenceError: y não está definido
O modelo const
como já informado tem o poder de declarar apenas uma vez o valor desta variável, e após isso ela permite apenas a leitura.
const lanche = 'Burrito'
console.log(lanche) // Burrito
lanche = 'Big Mac' // TypeError: lanche é uma constante
O Javascript moderno considera sete tipos de dados, sendo seis primitivos:
- Boolean: valores binários
true false
- null: palavra chave que indica valor nulo, importante salientar que o JS é case-sensitive, ou seja, letras maiusculas e minusculas são diferenciadas.
null
Null
NULL
- undefined: quando uma variavel é declarada porém não é preenchida com nenhum valor (gaveta vazia)
let nome
console.log(nome) // undefined
- Number: valores numéricos, inteiros ou decimais
const inteiro = 23
const decimal = 6.663
- Strings: valores textuais, sendo declarados com aspas.
const nome = 'Leonardo'
const idade = '23'
/*
veja que é um valor numérico, porém declarado como uma
string, isso imposibilita operações matemáticas
com o variável
*/
- Symbol: Dados cuja as instâncias são únicas e imutáveis.
const recado = 'veremos isso futuramente...'
O tipo qual não é chamado de primitivo é o Objeto, que podemos definir como uma variável incpetion, pois podemos inserir variáveis dentro de outra váriavel (esta que recebe os valores é o objeto)
const usuario = {
nome: "Leonardo",
idade: 23,
javascript: true,
PHP: false,
github: "https://github.com/coastleo",
chave: 'valor'
}
console.log(usuario) // { nome: "Leonardo", idade: 23, javascript: true, PHP: false, github: "https://github.com/coastleo" }
console.log(usuario.nome) // Leonardo
console.log(usuario['nome']) // Leonardo
Os objetos nos possibilitam acessar seu conteudo integralmente ou apenas uma das chaves.
Os operadores são representados por símbolos matemáticos, que tem o poder de produzir algum resultado baseado em dois ou mais valores (ou variáveis).
Operador | Utilidade | Simbolos | Exemplo |
---|---|---|---|
Adição | Usado para somar dois números ou juntar duas strings. | + |
6 + 9 ou "Java" + "Script" |
Subtração, multiplição, divisão | Fazem exatamente o que você espera que eles façam na matemática básica. | - , * , / |
9 - 3 , 9 * 3 , 9 / 3 |
Atribuição | Ela escreve um valor em uma variável. | = |
let variavel = "valor" |
Operador de igualdade | Faz um teste para ver se dois valores são iguais, retornando um resultado true/false (booleano). | === |
7 === 6 // false 6 === 6 // true |
Negação, não igual | Retorna o valor lógico oposto do sinal; transforma um true em um false, etc. Quando usado junto com o operador de igualdade, o operador de negação testa se os valores são diferentes. | ! , !== |
!(7 === 6) // true 6 !== 6 // false |
A negação resulta o valor contrário do boolean do operador de igualde, ou seja, se o valor do operador de igualde retorna true, a negação será false e vice versa. Já o Não igual é o contrário do valor de operação de igualde:
let variavelA
NÃO é igual alet variavelB
Em expressões envolvendo valores numérico e string com o operador +, JavaScript converte valores numérico para strings. Por exemplo:
x = "A resposta é " + 42 // "A resposta é 42"
y = 42 + " é a resposta" // "42 é a resposta"
Nas declarações envolvendo outros operadores, JavaScript não converte valores numérico para strings. Por exemplo:
"37" - 7 // 30
"37" + 7 // "377"
Já para converter um valor de String para númerico existem duas possibilidades, transforma-lo em numero inteiro ou decimal. Outro método para que isso aconteça é colocar o operador +
na frente de um valor de String.
parseInt() // converte para inteiro
parseFloat() // converte para decimal
"1.1" + "1.1" = "1.11.1"
(+"1.1") + (+"1.1") = 2.2
/* Os parênteses foram usados para deixar mais legível o código,
ele não é requirido.
*/
Como visto anteriormente, strings são uma tipagem de dado na qual o valor sempre é textual. No JavaScript existem alguns métodos para a manipulação deste tipo de dados especíificos.
Este método é utilizado quando é necessário saber a quandidade de caractetes e espaços em branco.
let string = 'Aprendendo Javascript'
string.length // 21
Para transformar toda a sentença em letras mínusculas, é necessário usar o método toLowerCase, já para transforma-lo em maiusculo usamos o toUpperCase
string.toLowerCase // aprendendo javascript
string.toUpperCase // APRENDENDO JAVASCRIPT
Para encontrar o index, ou seja, encontrar qual é o número relativo a posição de terminado conjunto de caracteres, usamos o indexOf.
string.indexOf('Javascript') // 11
Caso seja informado algum cojunto ou caracter que existe em mais de uma posição, é retornado apenas a primeira vez que ele aparece no texto
Este método tem o propósito de substituir determinado conjunto de caracteres A encontrado no texto em um conjunto B.
let stringReplaced = string.replace('Javascript', 'Typescript')
console.log(stringReplaced) // Aprendendo Typescript
Para recortar um pedaço da string, é usado o método slice, no qual retira o texto a partir de um index inicial e final informado.
let linguagem = string.slice(11, 21) // Javascript
O método trim serve para retirar os espaços em branco no ínicio ou no final da string. Desta vez não é necessário informar nada como parametro.
let stringTrim = ' Aprendendo Javascript '
stringTrim.tim() // Aprendendo Javascript
Como em qualquer linguagem de alto nível, há possibilidade de testar hipoteses e executar um bloco de código se a hipotese se for verdadeira, e outro bloco no caso contrário.
if (true) {
console.log('Vai ser executado')
}
if (false) {
console.log('Não vai ser executado')
}
Para que sejá possível transformar o conteudo de dentro do parenteses seja igual a um valor booleano, será necessário criar uma expressão lógica.
if (3 <= 4) {
console.log('3 <= 4')
}
Algum valor em string apenas é reconhecido como um booleano false
caso o texto esteja vazio.
let semTexto = ''
if (semTexto) {
console.log('Não vai ser executado')
}
// se negar o valor vazio, será revertido em true
if (!semTexto) {
console.log('Vai ser executado')
}
Além do if
propriamente dito, existem duas possibilidades para encrementar a cadeia condicional. A primeira é o else
, que é o bloco a ser executado caso o if
seja negativo.
if (semTexto) {
console.log('Não vai ser executado')
} else {
console.log('Não vai ser executado')
}
Também é possível usar o operador else if
, o qual fica entre o if
e o else
, recebendo também um valor lógico.
if (10 > 20) {
console.log('Não vai ser executado')
} else if (10 <= 12) {
console.log('Vai ser executado')
} else {
console.log('Não vai ser executado')
}
É possível usar quantos else if você quiser, mas não é uma boa prática encher seu código de condicionais, mais tarde neste curso aprenderemos o que fazer para resolver problemas que dependem de várias condicionais.
Os ternários são condicionais que cabem em apenas uma linha, seguindo uma sintaxe simples.
console.log(true ? 'Programador' : 'Designer') // Programador
console.log(false ? 'Programador' : 'Designer') // Designer
É necessário colocar uma expressão que resultará em um valor booleano e logo após o simbolo de ponto de interrogação, então colocamos o código que será executado caso o ternário sejá positivo, seguido pelo sinal de dois pontos e o código que será executado se o valor for negativo.
O array, também chamado de lista, é uma estrutura de dados (talvez a mais usada e conhecida), na qual tem a habilidade de guardar em si valores ou variáveis. O array é representado pelos simbolos de []
, e seus valores dispostos entre os colchetes e separados por virgula.
let numeros = [5, 3, 12, 17, 10, 99]
console.log(numeros) // [5, 3, 12, 17, 10, 99]
Para coletar apenas um valor dentro de um array, é necessário descobrir qual o index do item que você deseja extrair (lembrando que do mesmo modo que a string, o index incia com zero, e não com um).
console.log(numeros[2]) // 12
console.log(numeros[5]) // 99
console.log(numeros[0]) // 5
Para descobrir quantos elementos existem dentro de um array, podemos usar o método length também.
console.log(numeros.length) // 6
Para manipular os arrays, existem alguns métodos:
O método pop é capaz de remover e retornar o ultimo item de um array.
let numeroRetirado = numeros.pop()
console.log(numeroRetirado) // 99
console.log(numeros) // [5, 3, 12, 17, 10]
Da mesma forma que foi aprendido com a string, o método slice tem o poder de fatiar o array em várias partes, sendo informado o inicio do corte e o final (seguindo a mesma regra do index).
console.log(numeros.slice(2, 5) // [12, 17, 10]
let depoisDoIndex3 = numeros.slice(3)
console.log(depoisDoIndex2) // [17, 10]
O método join é capaz de agrupar todos os valores de uma lista em uma string, sendo separados por determinado valor a ser informado como parametro.
console.log(numeros.join('-')) // 5-3-12-17-10
console.log(numeros.join(', ')) // 5, 3, 12, 17, 10
O método push consegue adicionar um item no final do array, sendo informado este como parametro do método
let usuario = [
'Fulano de Tal',
23,
'Programador',
2020,
'Brasileiro'
]
usuario.push('SC')
console.log(usuario) // ['Fulano de Tal', 23, 'Programador', 2020, 'Brasileiro', 'SC']
Incluse é um método que tem a capacidade de verificar se determinado valor está dentro do array ou não, retornando true
ou false
respectivamente.
console.log(usuario.includes(2020)) // true
console.log(usuario.includes('2020')) // false
O método indexOf consegue encontrar qual é o index da posição de um determinado item informado como parametro. Caso o valor não seja encontrado, é retornado -1.
console.log(usuario.indexOf(2020)) // 3
console.log(usuario.indexOf('2020')) // -1
Podemos fazer de duas maneiras a concatenação. Sendo a primeira com o métoodo concat, sendo informado o array que será agrupado. Outra maneira (e mais simples) é o usar o spread.
const cars = ['🚗', '🚙'];
const trucks = ['🚚', '🚛'];
// Concat
const combined1 = [].concat(cars, trucks);
// Spread
const combined2 = [...cars, ...trucks];
Para salvar valores indivisuais, podemos salvar um por um informando o index, porém o ECMAScript 6 trouxe uma atualização que simplifica esta tarefa. Podemos declarar uma variavel que é um array, dentro dela colocar o nome da variavel que desejamos atribuir a um valor seguindo o mesmo index dos valores.
let [ nome, idade, , , nacionalidade ] = usuario
console.log(nome, idade, nacionalidade) // 'Fulano de tal', 23, 'Brasileiro'
Note que os valores que não era necessário salvar em um varíavel devemos apenas ignorar e passar a virgula, informando que o valor encontrado em determinado index não será salvo em nenhuma variavel.