Introdução ao Javascript

Search…
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
[V8](https://en.wikipedia.org/wiki/V8_(JavaScript_engine))
Google Chrome e Opera
​SpiderMonkey​
FireFox
[Chakra](https://en.wikipedia.org/wiki/Chakra_(JavaScript_engine))
Internet Explorer
​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:
​https://caniuse.com/​
​https://kangax.github.io/compat-table/es6/​
É 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
Guias detalhados do JavaScript básico ao avançado
​Manual - Javascript​
​Especificação do JavaScript​
Directory Traversal
Cross Site Scripting (XSS)
Last modified 1yr ago
Copy link
Contents
Visão Geral
Engines
Estrutura e sintaxe do JS
Script interno e externo
Comentários
Variáveis e constantes
Operadores e comparadores