Tutorial de JS

JS HOME Introdução JS JS Para onde Saída JS Declarações JS Sintaxe JS Comentários JS Variáveis ​​JS JS Let JS Const Operadores JS JS Aritmética Atribuição de JS Tipos de dados JS Funções JS Objetos JS Eventos JS Strings JS Métodos de string JS Pesquisa de String JS Modelos de String JS Números JS Métodos de número JS Matrizes JS Métodos de matriz JS Classificação de matriz JS Iteração de matriz JS Const da matriz JS Datas JS Formatos de data JS Métodos de obtenção de data JS Métodos de conjunto de datas JS JS Math JS Aleatório JS Booleanos Comparações JS Condições JS Interruptor JS Circuito JS para JS Loop Para Entrada JS Loop Para De JS Loop Enquanto Quebra de JS Iteráveis ​​JS Conjuntos JS Mapas JS Tipo JS de Conversão de tipo JS JS bit a bit JS RegExp Erros JS Escopo JS Içamento JS Modo estrito JS JS esta palavra-chave Função de seta JS Classes JS JS JSON Depuração JS Guia de estilo JS Práticas recomendadas de JS Erros de JS Desempenho JS Palavras reservadas JS

Versões JS

Versões JS JS 2009 (ES5) JS 2015 (ES6) JS 2016 JS 2017 JS 2018 JS IE / Edge Histórico de JS

Objetos JS

Definições de objeto Propriedades do objeto Métodos de objeto Exibição de objetos Acessadores de objetos Construtores de objetos Protótipos de Objetos Iteráveis ​​de objeto Conjuntos de objetos Mapas de objetos Referência do objeto

Funções JS

Definições de função Parâmetros de função Invocação de função Chamada de Função Função Aplicar Fechamentos de Função

Classes JS

Introdução à aula Herança de classe Classe Estática

JS Assíncrono

Retornos de chamada JS JS Assíncrono Promessas JS JS Async/Aguardar

JS HTML DOM

Introdução ao DOM Métodos DOM Documento DOM Elementos DOM HTML DOM Formulários DOM CSS DOM Animações DOM Eventos DOM Ouvinte de eventos DOM Navegação DOM Nós DOM Coleções DOM Listas de nós DOM

BOM do navegador JS

Janela JS Tela JS Localização JS Histórico de JS Navegador JS Alerta pop-up JS Temporização JS Cookies JS

APIs da Web JS

Introdução à API da Web API de formulários da Web API de histórico da web API de armazenamento da Web API do trabalhador da Web API de busca da Web API de geolocalização da Web

JS AJAX

Introdução AJAX AJAX XML Http Solicitação AJAX Resposta AJAX Arquivo XML AJAX PHP AJAX ASP AJAX Banco de dados AJAX Aplicativos AJAX Exemplos AJAX

JS JSON

Introdução JSON Sintaxe JSON JSON x XML Tipos de dados JSON Análise JSON JSON Stringify Objetos JSON Matrizes JSON Servidor JSON JSON PHP HTML JSON JSON JSONP

JS x jQuery

Seletores jQuery HTML jQuery jQuery CSS jQuery DOM

Gráficos JS

Gráficos JS Tela JS JS Plotly JS Chart.js JS Google Chart JS D3.js

Exemplos JS

Exemplos JS JS HTML DOM Entrada HTML JS Objetos HTML JS Eventos HTML JS Navegador JS Editor JS Exercícios JS Teste JS Certificado JS

Referências JS

Objetos JavaScript Objetos HTML DOM


Variáveis JavaScript

4 maneiras de declarar uma variável JavaScript:

  • Usando var
  • Usando let
  • Usando const
  • Usando nada

O que são Variáveis?

Variáveis ​​são contêineres para armazenar dados (armazenando valores de dados).

Neste exemplo, x, ye z, são variáveis, declaradas com a varpalavra-chave:

Exemplo

var x = 5;
var y = 6;
var z = x + y;

Neste exemplo, x, ye z, são variáveis, declaradas com a letpalavra-chave:

Exemplo

let x = 5;
let y = 6;
let z = x + y;

Neste exemplo, x, ye z, são variáveis ​​não declaradas:

Exemplo

x = 5;
y = 6;
z = x + y;

De todos os exemplos acima, você pode adivinhar:

  • x armazena o valor 5
  • y armazena o valor 6
  • z armazena o valor 11

Quando usar JavaScript var?

Sempre declare variáveis ​​JavaScript com var, letou const.

A varpalavra-chave é usada em todo o código JavaScript de 1995 a 2015.

As palavras-chave lete constforam adicionadas ao JavaScript em 2015.

Se você deseja que seu código seja executado em um navegador mais antigo, você deve usar var.


Quando usar JavaScript const?

Se você quer uma regra geral: sempre declare variáveis ​​com const.

Se você acha que o valor da variável pode mudar, use let.

Neste exemplo, price1, price2e total, são variáveis:

Exemplo

const price1 = 5;
const price2 = 6;
let total = price1 + price2;

As duas variáveis price1e price2 são declaradas com a palavra- constchave.

Estes são valores constantes e não podem ser alterados.

A variável totalé declarada com a palavra- letchave.

Este é um valor que pode ser alterado.


Assim como a álgebra

Assim como na álgebra, as variáveis ​​guardam valores:

let x = 5;
let y = 6;

Assim como na álgebra, as variáveis ​​são usadas em expressões:

let z = x + y;

A partir do exemplo acima, você pode adivinhar que o total é calculado em 11.

Observação

Variáveis ​​são contêineres para armazenar valores.



Identificadores JavaScript

Todas as variáveis JavaScript devem ser identificadas com nomes exclusivos .

Esses nomes exclusivos são chamados de identificadores .

Os identificadores podem ser nomes curtos (como x e y) ou nomes mais descritivos (idade, soma, volume total).

As regras gerais para construir nomes para variáveis ​​(identificadores exclusivos) são:

  • Os nomes podem conter letras, dígitos, sublinhados e cifrões.
  • Os nomes devem começar com uma letra
  • Os nomes também podem começar com $ e _ (mas não o usaremos neste tutorial)
  • Os nomes diferenciam maiúsculas de minúsculas (y e Y são variáveis ​​diferentes)
  • Palavras reservadas (como palavras-chave JavaScript) não podem ser usadas como nomes

Observação

Os identificadores JavaScript diferenciam maiúsculas de minúsculas.


O Operador de Atribuição

Em JavaScript, o sinal de igual ( =) é um operador de "atribuição", não um operador "igual a".

Isso é diferente da álgebra. O seguinte não faz sentido em álgebra:

x = x + 5

Em JavaScript, no entanto, faz todo o sentido: atribui o valor de x + 5 a x.

(Ele calcula o valor de x + 5 e coloca o resultado em x. O valor de x é incrementado em 5.)

Observação

O operador "igual a" é escrito como ==em JavaScript.


Tipos de dados JavaScript

As variáveis ​​JavaScript podem conter números como 100 e valores de texto como "John Doe".

Na programação, os valores de texto são chamados de strings de texto.

JavaScript pode lidar com muitos tipos de dados, mas por enquanto, pense apenas em números e strings.

Strings são escritas entre aspas duplas ou simples. Os números são escritos sem aspas.

Se você colocar um número entre aspas, ele será tratado como uma string de texto.

Exemplo

const pi = 3.14;
let person = "John Doe";
let answer = 'Yes I am!';

Declarando uma variável JavaScript

Criar uma variável em JavaScript é chamado de "declarar" uma variável.

Você declara uma variável JavaScript com vara palavra-chave ou let:

var carName;
ou:
let carName;

Após a declaração, a variável não tem valor (tecnicamente é undefined).

Para atribuir um valor à variável, use o sinal de igual:

carName = "Volvo";

Você também pode atribuir um valor à variável ao declará-la:

let carName = "Volvo";

No exemplo abaixo, criamos uma variável chamada carNamee atribuímos o valor "Volvo" a ela.

Em seguida, "enviamos" o valor dentro de um parágrafo HTML com id="demo":

Exemplo

<p id="demo"></p>

<script>
let carName = "Volvo";
document.getElementById("demo").innerHTML = carName;
</script>

Observação

É uma boa prática de programação declarar todas as variáveis ​​no início de um script.


Uma declaração, muitas variáveis

Você pode declarar muitas variáveis ​​em uma instrução.

Inicie a instrução com vare separe as variáveis ​​por vírgula :

Exemplo

let person = "John Doe", carName = "Volvo", price = 200;

Uma declaração pode abranger várias linhas:

Exemplo

let person = "John Doe",
carName = "Volvo",
price = 200;

Valor = indefinido

Em programas de computador, as variáveis ​​geralmente são declaradas sem valor. O valor pode ser algo que precisa ser calculado ou algo que será fornecido posteriormente, como entrada do usuário.

Uma variável declarada sem valor terá o valor undefined.

A variável carName terá o valor undefinedapós a execução desta instrução:

Exemplo

let carName;

Redeclarando variáveis ​​JavaScript

Se você declarar novamente uma variável JavaScript declarada com var, ela não perderá seu valor.

A variável carNameainda terá o valor "Volvo" após a execução dessas instruções:

Exemplo

var carName = "Volvo";
var carName;

Observação

Você não pode declarar novamente uma variável declarada com letou const.

Isso não funcionará:

let carName = "Volvo";
let carName;

Aritmética JavaScript

Assim como na álgebra, você pode fazer aritmética com variáveis ​​JavaScript, usando operadores como =e +:

Exemplo

let x = 5 + 2 + 3;

Você também pode adicionar strings, mas as strings serão concatenadas:

Exemplo

let x = "John" + " " + "Doe";

Tente também isso:

Exemplo

let x = "5" + 2 + 3;

Observação

Se você colocar um número entre aspas, o restante dos números será tratado como strings e concatenado.

Agora tente isso:

Exemplo

let x = 2 + 3 + "5";

JavaScript cifrão $

Como o JavaScript trata um cifrão como uma letra, identificadores contendo $ são nomes de variáveis ​​válidos:

Exemplo

let $ = "Hello World";
let $$$ = 2;
let $myMoney = 5;

Usar o cifrão não é muito comum em JavaScript, mas programadores profissionais costumam usá-lo como um alias para a função principal em uma biblioteca JavaScript.

Na biblioteca JavaScript jQuery, por exemplo, a função main $é usada para selecionar elementos HTML. Em jQuery $("p");significa "selecionar todos os elementos p".


Sublinhado JavaScript (_)

Como o JavaScript trata o sublinhado como uma letra, os identificadores que contêm _ são nomes de variáveis ​​válidos:

Exemplo

let _lastName = "Johnson";
let _x = 2;
let _100 = 5;

Usar o sublinhado não é muito comum em JavaScript, mas uma convenção entre programadores profissionais é usá-lo como um alias para variáveis ​​"privadas (ocultas)".


Teste-se com exercícios

Exercício:

Crie uma variável chamada carNamee atribua o valor Volvoa ela.

var  = "";