Guia Completo de JavaScript para Iniciantes

Este guia completo de javascript para iniciantes terá a função de abordar os principais pontos de uma das linguagens de programação mais famosas e poderosas da atualidade.

Vamos tentar ser o mais objetivo possível para que as explicações sejam enxutas e o menos cansativas.

Esperamos que gostem desse pedaço do nosso trabalho e tenham uma boa leitura.

O que é javascript?

É uma linguagem de programação interpretada e estruturada, com script de alto nível, funcional, multiparadigma e orientada a objetos.

• Alto nível : fornece abstrações que permitem ignorar os detalhes da máquina onde está sendo executado. Ele gerencia a memória automaticamente com um coletor de lixo, para que você possa se concentrar no código em vez de gerenciar a memória como outras linguagens como a C precisariam, e fornece muitas construções que permitem lidar com variáveis ​​e objetos altamente poderosos.
• Dinâmica : ao contrário das linguagens de programação estáticas, uma linguagem dinâmica executa em tempo de execução muitas das coisas que uma linguagem estática faz em tempo de compilação. 
• Tipado dinamicamente : uma variável não impõe um tipo. Você pode reatribuir qualquer tipo a uma variável, por exemplo, atribuindo um inteiro a uma variável que contém uma string.
• Vagamente tipado : ao contrário da tipagem forte, as linguagens de tipo frouxo (ou fraco) não impõem o tipo de um objeto, permitindo mais flexibilidade, mas nos negando a segurança de tipo e verificação de tipo (algo que o TypeScript – que se baseia no JavaScript – fornece)
• Interpretado : é normalmente conhecido como uma linguagem interpretada, o que significa que não precisa de um estágio de compilação antes que um programa possa ser executado, ao contrário de C, Java ou Go, por exemplo. 
• Multiparadigma : a linguagem não impõe nenhum paradigma de programação específico, ao contrário do Java, por exemplo, que força o uso de programação orientada a objetos, ou C que força a programação imperativa.

Juntos com HTML e CSS é uma das principais tecnologias do World Wide Web (www).

Usamos o JavaScript principalmente para criar:

• Sites.
• Aplicativos da web.
• Aplicativos do lado do servidor usando Node.js.

Porém, o JavaScript não se limita somente a isso e também pode ser usado para:

• Aplicativos mobile usando ferramentas como React Native.
• Programas para microcontroladores e a internet das coisas.
• Aplicativos para smartwatch.

Portanto, a linguagem de programação javascript tem o poder de criar aplicativos web, sites etc. Dessa forma, quando bem construídos podem oferecer aos usuários uma experiência amigável, mais eficiente e muito agradável.

A história do javascript

O javascript é uma linguagem de programação criada por Brendan Eich em 1995 pela empresa Netscape.

Primeiramente o javascript tinha outro nome: LiveScript, porém, como a Netscape não ficou sozinha desenvolvendo o javascript, quando a empresa SUN Microsystems entrou junto com a Netscape no desenvolvimento da linguagem, elas renomearam para Javascript.

Comentários em Javascript

Os comentários são essenciais para qualquer programador e qualquer código de programação.

No javascript ele podem ser escritos de duas maneiras, em linha ou multilinhas.

// Aqui temos um comentário de uma única linha

/ * 
Aqui temos um comentário de 
várias linhas * /

Variáveis em Javascript

As variáveis que são usadas para armazenar dados podem ser declaradas com três tipos:

• var
• let
• const

var variavelNome; 
let variavelNome; 
const variavelNome;

As palavras chaves var, let e const são ações que quando usadas estamos dizendo ao navegador para executa-las. Quando isso acontece, o navegador recebe ação de criar uma variável.

Então, mas qual é a diferença entre eles?

var e let são mutáveis, basicamente significa que podemos alterar seu valor. const por outro lado, é imutável, pense nisso como sendo somente leitura, portanto, o valor não pode ser alterado. Entenda com o exemplo:.

// Isso funcionará 
var animal = "cachorro";
animal = "gato";
// Isso funcionará 
let animal = "cachorro";
animal = "gato";
// Isso não funcionará 
const animal = "cachorro";
animal = "gato";

Então, se var e let são mutáveis, qual é a diferença entre eles? Bem, eles basicamente têm escopos diferentes. Dessa forma, Isso significa que a capacidade de acessá-los difere dependendo de onde você está em um script, var tem escopo de função let e const ambos têm escopo de bloco. Isso significa que var podem ser acessados ​​por meio de uma função inteira, enquanto let e const estão disponíveis apenas no bloco em que foram declarados. Um bloco é qualquer coisa entre colchetes.

Existem algumas regras na hora de dar o nome as variáveis que você deve obedecer como não iniciar com letra maiúscula sendo a principal regra.

O CamelCase é muito usado no javascript para praticamente tudo. O CamelCase é a prática de escrever as palavras compostas ou frases, onde cada palavra é iniciada com maiúsculas e unidas sem espaços.

Isso significa que em vez de usarmos:

variavel_nome 
variavel-nome 
VariavelNome

Usamos:

nomeVariavel

O javascript diferencia letras maiúsculas das minúsculas, dessa forma, variavelNome não é o mesmo que VariavelNome.

Literais Javascript

São simplesmente valores fixo, exemplo:

5
"Hello World"
'Teste'
true
['a', 'b']
{color: 'red', shape: 'Rectangle'}

Operadores Javascript

Os operadores podem fazer coisas como atribuição, operações aritméticas e comparações.

let idade = 20;

Caso quisesse fazer uma operação aritmética:

let a = 5;
let b = 2;
let r = a * b;

Dessa forma, uma expressão é uma mistura de coisas como literais, variáveis, funções e operadores que, quando combinados, são usados ​​para calcular um único valor. Portanto, com 5 multiplicado por 2, estamos combinando os literais 5 e 2 com o operador de multiplicação para calcular o valor 10.

Operador	Descrição
+	adição
–	subtração
*	multiplicação
**	exponenciação
/	divisão
%	módulo (resto da divisão)
++	incremento
—	decremento

Tipos de dados javascript

As variáveis javascript podem conter diversos tipos de dados como: números, strings, objetos e mais. Veja o exemplo:

let idade = 16;                                     // Número
let sobrenome = "Johnson";                          // String
let x = {primeiroNome:"John", ultimoNome:"Doe"};    // Objeto

O javascript tem tipos de dados dinâmicos, ou seja, uma variável pode ter mais de um tipo de dados:

let x;           // Agora x é indefinido
x = 5;           // Agora x é um número
x = "John";      // Agora x é uma string

Algo importante de se notar sobre as strings é que elas podem ser encapsuladas entre aspas simples ou aspas duplas, exemplo:

'minha string' 
"minha string"

Os tipos boleanos podem ter apenas dois valores como você pode ver no exemplo abaixo:

let x = 5;
let y = 5;
let z = 6;
(x == y)       // retorna true
(x == z)       // retorna false

Javascript Array (Matrizes)

Os arrays nos permitem armazenar vários valores em uma única variável. Sua sintaxe é entre colchetes e separado por virgulas conforme o exemplo abaixo:

const carros = ["Saveiro", "Gol", "BMW"];

NOTA: O primeiro item é [0], o segundo é [1] e assim por diante.

Funções Javascript

Então, resumindo de forma de bem prática, funções são blocos de códigos independentes. Uma função JavaScript é executada quando “algo” a chama.

Sendo assim, em Javascript, usamos a palavra-chave function para declarar uma função, seguida do nome da função com colchetes após ele. Portanto, para chamar uma função simples, digite o nome da função seguido dos colchetes. Veja no exemplo:

function obterDados() {
 
}

Uma função pode ser executada a qualquer momento que você quiser invocando-a, assim:

obterDados()

Uma função pode ter um ou mais argumentos:

function obterDados() {
  
}
function obterDados(cor) {
  
}
function obterDados(cor, idade) {
  
}

Quando podemos passar um argumento, invocamos os parâmetros de passagem da função:

function obterDados(cor, idade) {
 
}
getData('verde', 23)
getData('azul')

Para retornar vários valores, você pode retornar um objeto ou um array, como este:

function obterDados() {
  return ['Flavio', 37]
}
let [nome, idade] = getData()

String Javascript

Uma string é uma sequência de caracteres. As strings de JavaScript são usadas para armazenar e manipular texto.

let texto = "Programadores Deprê";

Inclusive, já abordamos strings lá em cima, mas aqui vou mostrar algo a mais que é a propriedade length (traduzindo é “comprimento”).

Você pode determinar o comprimento de uma string usando a propriedade length dela:

let texto = "ABCDEFGHIJKLMNOPQRSTUVWXYZ";
texto.length;    // Retornará 26

Números Javascript

Aqui nós vamos detalhar as diversas formas de escrever números em javascript.

Os números JavaScript são sempre pontos flutuantes de 64 bits. Portanto, ao contrário de muitas outras linguagens de programação, JavaScript não define diferentes tipos de números, como inteiros, curtos, longos, ponto flutuante etc.

Dessa forma, os números JavaScript são sempre armazenados como números de ponto flutuante de precisão dupla, seguindo o padrão internacional IEEE 754.

// Inteiro 
8
// Float 
8.4

Notação expoente:

// Este 
762e5
// Em vez de 
76200000

Você também pode usar exponenciais negativas, por exemplo, 0.00762 seria 762e-5.

Strings Numéricos

Strings JavaScript podem ter conteúdo numérico:

let x = 100;         // x é um número
let y = "100";       // y é uma string

Leia também: Livros JavaScript: As 6 Melhores Opções Para Iniciantes

Objetos Javascript

Qualquer valor que não seja de um tipo primitivo (uma string, um número, um booleano, um símbolo, nulo ou indefinido) é um objeto.

Na vida real, um carro é um objeto. Um carro tem propriedades como peso e, cor, métodos como start e stop.

Formas para definir um objeto:

• literal

const carro = {
}

• new object

const carro = new Object()

• Object.create()

const carro = Object.create()

Portanto, você também pode inicializar um objeto usando a palavra-chave new antes de uma função com uma letra maiúscula. Dessa forma, essa função serve como um construtor para esse objeto. Assim, lá, podemos inicializar os argumentos que recebemos como parâmetros, para configurar o estado inicial do objeto:

function Carro(marca, modelo) {
  this.marca = marca
  this.modelp = modelp
}

Inicializamos um novo objeto usando:

const meuCarro = new Carro('Ford', 'Fiesta')
meuCarro.marca //'Ford'
meuCarro.modelo //'Fiesta'

Datas em Javascript

Javascript tem um objeto embutido para trabalhar com datas, que é o objeto Date. 

Portanto, por padrão, o JavaScript usará o fuso horário do navegador e exibirá uma data como uma string de texto completo:

Quarta, 29 set 2021 14:00:08 GMT-0300 (Horário Padrão de Brasília)

Dessa forma, na maioria das vezes, provavelmente não queremos todas essas informações, podemos usar os métodos Date embutidos dos objetos para obter qualquer um dos bits que quisermos.

// Isso registra 2021
console.log(new Date().getFullYear());
// Isso registra 9
console.log(new Date().getMonth());
// Isso Registra 29
console.log(new Date().getDate());
// Isso Registra 29
console.log(new Date().getDay());
// Isso registra 15
console.log(new Date().getHours());
// Isso registra 45
console.log(new Date().getMinutes());
// Isso registra 56
console.log(new Date().getSeconds());
// Isso registra 129
console.log(new Date().getMilliseconds());

JavaScript armazena datas em milissegundos. JavaScript armazena datas como um número de milissegundos desde 01 de janeiro de 1970, 00:00:00 UTC (Universal Time Coordinated).

A hora zero é 01 de janeiro de 1970 00:00:00 UTC.

Agora, a hora é: 1632934808271 milissegundos após 01 de janeiro de 1970.

Programação Assíncrona em Javascript

Na maioria das vezes, o código JavaScript é executado de forma síncrona.

Isso significa que uma linha de código é executada, a próxima é executada e assim por diante.

Tudo está como você espera e funciona na maioria das linguagens de programação.

No entanto, há momentos em que você não pode simplesmente esperar a execução de uma linha de código.

Você não pode simplesmente esperar 2 segundos para que um arquivo grande seja carregado e interromper o programa completamente.

Você não pode simplesmente esperar o download de um recurso de rede antes de fazer outra coisa.

JavaScript resolve esse problema usando callbacks .

Um dos exemplos mais simples de como usar callbacks é com temporizadores. Timers não fazem parte do JavaScript, mas são fornecidos pelo navegador e pelo Node.js. Deixe-me falar sobre um dos temporizadores temos: setTimeout().

A setTimeout()função aceita 2 argumentos: uma função e um número. O número são os milissegundos que devem decorrer antes que a função seja executada. Exemplo:

setTimeout(() => {
  // roda após 2 segundos
  console.log('dentro da função')
}, 2000)

A função que contém a console . log ('dentro da função') linha será executada após 2 segundos.

Se você adicionar um console . log('antes') antes e console . log('depois') depois da função:

console.log('antes')
setTimeout(() => {
  // roda após 2 segundos
  console.log('dentro da função')
}, 2000)
console.log('depois')

Você verá isso acontecendo em seu console:

antes
depois
dentro da função

A função de retorno de chamada é executada de forma assíncrona.

Este é um padrão muito comum ao trabalhar com o sistema de arquivos, a rede, eventos ou o DOM no navegador.

Conclusão

Então, se eu conseguir realizar o que eu desejava com esse artigo, agora você tem uma base inicial de javascript e como funciona um das linguagens de programação mais famosas da atualidade.

Agora sendo bem direto ao ponto, se você quer um dar um passo a mais, rumo ao nível profissional ao ponto de trabalhar como programador javascript, você precisa de um curso com aulas completas e projetos reais para de fato aprender a linguagem de programa javascript.

O curso que indicamos é o Programador Fullstack Javascript da OneBitCode.