Introdução ao Javascript

Visão Geral

Javascript (ou ECMAScript) é uma linguagem de programção muito utilizada no desenvolvimento Web. Com ela, é possível programar o comportamento das páginas HTML - alterar conteúdo e atributos HTML, CSS e mais.
O JavaScript nasceu como uma linguagem voltada para processamento no navegador. Entretanto, com a chegada do Node.js, que permite a execução de Javascript fora do navegador, back-ends de websites e aplicações feitas majoritariamente em Javascript (como o Discord) também passaram a utilizar amplamente a linguagem.
Praticamente todas as páginas na internet usam Javascript para fazer operações client-side, como verificação de campos, envio de formulários, gerenciamento de cookies, solicitações de informações para o servidor etc.
1
<!DOCTYPE html>
2
<html>
3
<body>
4
<p id="teste">JavaScript pode mudar conteúdo HTML </p>
5
<button type="button" onclick='document.getElementById("teste").innerHTML = "Viu? Modificado!"'> Ao clicar aqui, o texto do parágrafo irá mudar! </button>
6
</body>
7
</html>
Copied!

Engines

Uma Engine Javascript ou Interpretador Javascript é um programa especializado em ler e processar código Javascript, todos os mais populares navegadores modernos utilizam interpretadores mas a engine especifica depende de qual navegador está sendo utilizadas, sendo possivel que diferentes interpretadores entendam código de formas diferentes. Alguns exemplos de engines e navegadores diferentes são:
Engine
Navegador
FireFox
WebKit
Safari
Por consequência é importante sempre verificar quais features são tem suporte em quais engines, para isso você pode verificar em tabelas de compatibilidade:
É importante lembrar que mesmo navegadores sendo o principal uso de Engines qualquer software que precisa processar Javascript utiliza uma engine de forma ou outra.

Estrutura e sintaxe do JS

Script interno e externo

O código Javascript pode estar dentro ou fora de um documento HTML. Em ambos os casos, o Javascript fica dentro de uma tag <script></script>.
  • Externo:
    1
    <!DOCTYPE html>
    2
    <html>
    3
    <head>
    4
    <script src="/caminho/ate/arquivo/myScript.js"></script>
    5
    <script src="https://www.sitecomscripttop.com/myScript.js"></script>
    6
    </head>
    7
    <body>
    8
    <h1> Olá </h1>
    9
    </body>
    10
    </html>
    Copied!
  • Interno (no HEAD):
    1
    <!DOCTYPE html>
    2
    <html>
    3
    <head>
    4
    <script>
    5
    function myFunction() {
    6
    document.getElementById("para1").innerHTML = "Parágrafo modificado";
    7
    }
    8
    </script>
    9
    </head>
    10
    <body>
    11
    <h1> Página de teste </h1>
    12
    <p id="para1"> Um parágrafo </p>
    13
    <button type="button" onclick="myFunction()"> Mudar parágrafo </button>
    14
    </body>
    15
    </html>
    Copied!

Comentários

Você pode adicionar comentários no seu código para mante-lo organizado sem afetar a execução, comentários são linhas de codigo que são ignoradas pelo interpretador.
  • Utilizando duas barras você comenta até o fim da linha
1
// Essa linha está comentada
2
3
let variavel = "valor"; // Metade da linha está comentada
Copied!
  • Utilizando uma barra e um asterisco você pode comentar multiplas linhas de código
1
/*
2
Esse é um comentário multilinha
3
Tudo aqui está comentado
4
*/
Copied!

Variáveis e constantes

Variáveis são usadas para armazenar dados que podem ser modificados a qualquer momento. Em JS, as variáveis são declaradas com var ou lete elas podem ser praticamente qualquer coisa: números, palavras, funções etc.
Ao usar var, se a variável for declarada fora de uma função, ela poderá ser acessada de qualquer ponto do código (dentro e fora de funções), ou seja, ela é de scope global. Caso a variável seja declarada dentro de uma função, ela só poderá ser acessada de dentro dessa função. Esse tipo de variável pode ser redeclarado - além de atualizado - no meio do código.
1
var msg_introdutoria = 0.5; // declara a variável e atribui um real (float) a ela
2
var msg_introdutoria = "Olá mundo!"; // redeclara a variável e atribui uma string a ela
3
var contador = 0; // declara uma variável e atribui um inteiro (int) a ela
4
5
console.log(msg_introdutoria); // exibirá "Olá mundo!"
6
7
if (contador <= 0) {
8
// bloco de código do IF
9
var msg_introdutoria = "Oi mundo!"; // atualiza o valor da variável
10
}
11
12
console.log(msg_introdutoria) // exibirá "Oi mundo!"
Copied!
Já ao usar let, a variável sempre será block scoped, ou seja, ela está limitada ao bloco de código em que foi declarada (e aos blocos mais internos a ela). Um bloco é definido por chaves (fora do bloco { dentro do bloco } fora do bloco). Além disso, variáveis declaradas com let não podem ser redeclaradas (mas podem ser atualizadas).
1
let msg_introdutoria = "Olá mundo!";
2
let contador = 4;
3
4
if (contador > 3) {
5
let msg_introdutoria_2 = "Oi mundo!";
6
7
console.log(msg_introdutoria); // "Olá mundo!"
8
console.log(msg_introdutoria_2); // "Oi mundo!"
9
}
10
console.log(msg_introdutoria); // "Olá mundo!"
11
console.log(msg_introdutoria_2); // msg_introdutoria_2 não está definida
Copied!
Constantes também são usadas para armazenar dados, mas elas não podem ser modificadas durante a execução do programa. Uma vez declaradas com certo valor, elas não podem ser alteradas. Além disso, constantes são block scoped e não podem ser redeclaradas (nem alteradas - como foi dito logo acima).
1
const saudacao = "Olá!";
2
saudacao = "Oi!"; // Erro: (re)atribuição à constante
3
4
// OBS.: se a constante for um objeto é possível fazer certas alterações:
5
const saudacao2 = { // objeto com mais de um campo
6
msg : "Olá!",
7
countador : 3
8
};
9
10
saudacao2.msg = "Oi!"; // Isso é permitido! O campo msg é atualizado!
11
12
const saudacao2 = {
13
teste : "Aaaa",
14
nome : "Marcelo Batata"
15
}; // isso não é permitido! ERRO!!
Copied!

Operadores e comparadores

  • Operadores aritméticos: são os operadores que realizam operações aritméticas em números (e variáveis com valores numéricos). Entretanto, em certos casos, é possível usar esses operadores com outros tipos de variáveis, como no caso de "soma" de strings ("Nome " + "Sobrenome" -> "Nome Sobrenome").
Operador aritmético
Operação
Exemplo
+
Adição
let x = 1 + 2; // x = 3
-
Subtração
let x = 5 - 7; // x = -2
*
Multiplicação
let x = 3 * 5.2; // x = 15.6
/
Divisão
let x = 6 / 2; // x = 3
**
Pontenciação
let x = 2**3; // x = 8
%
Módulo (resto)
let x = 10 % 3; // x = 1
++
Incremento (+1)
let x = 1; x++; // x = 2
--
Decremento (-1)
let x = 1/ x--; // x = 0
Operações matematicas são "seguras" no JavaScript isso significa que você pode fazer qualquer conta e não vai gerar um erro fatal que mata o programa, no máximo retornando NaN (Not-a-Number), um valor númerico que não existe.
  • Comparadores:
Comparador
Compração
Exemplo
==
Igual a (em valor)
1 == 1.0 (true)
===
Igual a (em valor e tipo)
1 === 1.0 (false)
!=
Diferente de ("não igual")
1 != 1.0 (false)
!===
Diferente de ("não igual" em valor e tipo)
1 !== 1.0 (true)
>
Maior que
10 > 2 (true)
<
Menor que
1 < 2 (true)
>=
Maior ou igual que
5 >= 5 (true)
<=
Menor ou igual que
4 <= 3 (false)
  • Ainda há os comparadores lógicos. São eles:
    • && (and): (2 < 10 && 0 > 1) --> verdade E mentira é mentira
    • || (or): (5 == 5 || 3 == 5) --> verdade OU mentira é verdade
    • ! (not): !(1 == 1) --> NÃO verdade é mentira
  • E, por último, também é importante conhecer o comparador ternário, que atua como um comparador IF:
1
// Comparador ternário:
2
// variablename = (condition) ? value1 : value2;
3
var voteable = (age < 18) ? "Too young" : "Old enough";
4
5
// Isso é igual a:
6
if (age < 18) {
7
voteable = "Too young";
8
} else {
9
voteable = "Old Enough";
10
}
Copied!

Tipos de dados

De forma simplificada, podemos resumir os tipos de dados em primitivos e complexos. Os tipos primitivos são:
  • string (basicamente, caractéres e palavras - sempre entre aspas).
  • boolean (verdadeiro ou falso).
  • number (número inteiro, real).
  • undefined (variáveis sem valor definido).
Já os tipos complexos são:
  • object (listas, JSON, XML, vetores, dados inexistentes etc.).
  • function (funções).
1
typeof "" // String
2
typeof "Marcelo Batata" // String
3
4
typeof 3 // Number
5
typeof 3.14 // Number
6
typeof (3 + 4) // Number
7
8
var x; // Declarada, mas sem valor atribuído
9
typeof x // Undefined
10
11
typeof true // Boolean
12
typeof false // Boolean
13
14
typeof { name:'John', age:34 } // Object
15
typeof [1, 2, 3, 4] // Object
16
typeof null // Object
17
18
typeof function myFunc(){ console.log("Testing..."); } // Function
Copied!
Obs.: Ainda há null, que é similar ao undefined, mas seu tipo é objeto, Por mais contraditório que isso seja, esse objeto null represta um dado que não existe.
1
typeof undefined // retorna undefined
2
typeof null // retorna object
3
4
null === undefined // retorna false
5
null == undefined // retorna true (loose comparison)
Copied!

Funções

Funções são blocos de códigos que executam uma tarefa. Algo deve invocar a função para ela ser executada (ela precisa de algum "gatilho", nem que seja outra parte do código "chamando" ela - ou até ela própria se invocando). Ou seja, a execução do código dentro da função ocorre quando:
  • Um evento ocorre (ex.: usuário pressiona um botão);
  • A função é invocada por outro trecho de código Javascript;
  • A própria função invoca-se e é executada automaticamente.

Sintaxe

1
function nome_funcao(parametro1, parametro2, parametro3) {
2
// código a ser executado quando a função for chamada
3
console.log("A função foi executada!");
4
5
return {"mensagem" : "OK"};
6
}
7
8
// --- Outra alternativa, em certos casos, é a "Arrow Function": ---
9
// O trecho abaixo pode ser escrito de forma mais concisa
10
var multiplicacao = function(x, y) {
11
return x * y;
12
};
13
// Arrow function: (param1, param2, paramN) => { expressão / bloco da função }
14
const multiplicacao2 = (x, y) => { return x * y };
Copied!

Exemplo comentado

Para ajudar no entendimento da sintaxe da linguagem é bom analisar um trecho de código comentado.
1
// o bloco de código da função 'requisitarDadosPessoais()' começa aqui e quando ela for chamada, tudo que está aqui dentro será executado (linha por linha, de cima para baixo)
2
// userID é um parâmetro que deve ser passado ao chamar essa função. userId funciona como uma varíavel
3
async function requisitarDadosPessoais(userID) {
4
// a variável 'dados' recebe o retorno da função 'httprequest', ou seja, o que essa função trouxer como resposta sera guardado em 'dados'
5
var dados = await httprequest(`http://site-exemplo.com/usuarios/${userID}`); // a função é executada e em seguida sua resposta é armazenada em 'dados'
6
7
if (!dados) { // se 'dados' estiver vazio (for nulo), a condição é verdade e o código dentro desse bloco (delimitado por chaves) é executado
8
alert(`O usuário ${userID} não existe!`); // emite um alerta na tela avisando que o usuário com o nome armazenado em 'userID' não existe
9
return null; // a função 'requisitarDadosPessoais()' termina aqui e retorna o valor 'null' (nulo)
10
} // fim do bloco de código referente ao 'if'
11
12
if (dados.sucesso == true){ // 'dados' é um objeto com vários campos (atua como um JSON) e ele tem um parâmetro 'sucesso'. Se 'sucesso' for igual 'true', a condição é satisfeita e o código dentro desse bloco é executado
13
alert(`Bem vindo, ${dados.nome}, faz ${dados.tempoDesdeUltimoLogin} horas que você conectou pela última vez`); // emite uma mensagem de boas-vindas na tela, fazendo uso de outros parâmetros dentro de 'dados' ('nome' e 'tempoDesdeUltimoLogin')
14
redirecionar_usuario('http://site-exemplo.com/profile/${userID}', dados.cookies); // Executado uma função chamada 'redirecionar_usuario()' que está em outra parte do arquivo Javascript
15
} // fim do bloco de código referente ao 'if'
16
else { // caso a condição nos parênteses do 'if' não seja satisfeita, esse bloco de código é executado
17
alert(`${dados.nome}, a senha digitada está incorreta`); // emite um alerta na tela, avisando que a senha referente ao usuário digitado está incorreta
18
} // fim do bloco de código referente ao 'else'
19
20
return dados; // caso a função não tenha terminado antes, ela termina aqui, retornando o conteúdo de 'dados' (variável) para onde foi feita a chamada à essa função
21
}
Copied!

Leitura adicional