Sintaxe JavaScript

Índice

A sintaxe JavaScript é o conjunto de regras, como Os programas JavaScript são construídos:

// How to create variables:
var x;
let y;

// How to use variables:
x = 5;
y = 6;
let z = x + y;

Valores JavaScript

A sintaxe JavaScript define dois tipos de valores:

Valores fixos
Valores variáveis

Valores fixos são chamados de literais.

Os valores das variáveis são chamados de Variáveis.

Literais JavaScript

As duas regras de sintaxe mais importantes para valores fixos são:

1. Os números são escritos com ou sem decimais:

10.50

1001

Experimente você mesmo →

<!DOCTYPE html>
<html>
<body>

<h2>JavaScript Numbers</h2>

<p>Number can be written with or without decimals.</p>

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

<script>
document.getElementById("demo").innerHTML = 10.50;
</script>

</body>
</html>

2. Strings são textos escritos entre aspas duplas ou simples:

"John Doe"

'John Doe'

Experimente você mesmo →

<!DOCTYPE html>
<html>
<body>

<h2>JavaScript Strings</h2>

<p>Strings can be written with double or single quotes.</p>

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

<script>
document.getElementById("demo").innerHTML = 'John Doe';
</script>

</body>
</html>

Variáveis JavaScript

Em uma linguagem de programação, variáveis são usados para armazenar valores de dados.

JavaScript usa as palavras-chave var, let e const para declarar variáveis.

Um sinal de igual é usado para atribuir valores às variáveis.

Neste exemplo, x é definido como uma variável. Então, x é atribuído (dado) o valor 6:

let x;
x = 6;

Experimente você mesmo →

<!DOCTYPE html>
<html>
<body>

<h2>JavaScript Variables</h2>

<p>In this example, x is defined as a variable.
Then, x is assigned the value of 6:</p>

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

<script>
let x;
x = 6;
document.getElementById("demo").innerHTML = x;
</script>

</body>
</html>

Operadores JavaScript

JavaScript usa operadores aritméticos ( + - ">* / ) para Valores de cálculo:

(5 + 6) * 10

Experimente você mesmo →

<!DOCTYPE html>
<html>
<body>

<h2>JavaScript Operators</h2>

<p>JavaScript uses arithmetic operators to compute values (just like algebra).</p>

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

<script>
document.getElementById("demo").innerHTML = (5 + 6) * 10;
</script>

</body>
</html>

JavaScript usa um operador de atribuição ( = ) para atribuir valores para variáveis:

let x, y;
x = 5;
y = 6;

Experimente você mesmo →

<!DOCTYPE html>
<html>
<body>

<h2>Assigning JavaScript Values</h2>

<p>In JavaScript the = operator is used to assign values to variables.</p>

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

<script>
let x, y;
x = 5;
y = 6;
document.getElementById("demo").innerHTML = x + y;
</script>

</body>
</html>

Expressões JavaScript

Uma expressão é uma combinação de valores, variáveis e operadores, que calcula um valor.

O cálculo é chamado de avaliação.

Por exemplo, 5 * 10 resulta em 50:

5 * 10

Experimente você mesmo →

<!DOCTYPE html>
<html>
<body>

<h2>JavaScript Expressions</h2>

<p>Expressions compute to values.</p>

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

<script>
document.getElementById("demo").innerHTML = 5 * 10;
</script>

</body>
</html>

As expressões também podem conter valores de variáveis:

 x * 10

Experimente você mesmo →

<!DOCTYPE html>
<html>
<body>

<h2>JavaScript Expressions</h2>

<p>Expressions compute to values.</p>

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

<script>
var x;
x = 5;
document.getElementById("demo").innerHTML = x * 10;
</script>

</body>
</html>

Os valores podem ser de vários tipos, como números e strings.

Por exemplo, "John" + " " + "Doe", é avaliado como "John Doe":

 "John" + " " + "Doe"

Experimente você mesmo →

<!DOCTYPE html>
<html>
<body>

<h2>JavaScript Expressions</h2>

<p>Expressions compute to values.</p>

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

<script>
document.getElementById("demo").innerHTML = "John" + " "  + "Doe";
</script>

</body>
</html>

Palavras-chave JavaScript

palavras-chave JavaScript são usadas para identificar ações a serem executadas.

O A palavra-chave let diz ao navegador para criar variáveis:

let x, y;
x = 5 + 6;
y = x * 10;

Experimente você mesmo →

<!DOCTYPE html>
<html>
<body>

<h2>The <b>let</b> Keyword Creates Variables</h2>

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

<script>
let x, y;
x = 5 + 6;
y = x * 10;
document.getElementById("demo").innerHTML = y;
</script>

</body>
</html>

O A palavra-chave var também instrui o navegador a criar variáveis:

 var x, y;
x = 5 + 6;
y = x * 10;

Experimente você mesmo →

<!DOCTYPE html>
<html>
<body>

<h2>The var Keyword Creates Variables</h2>

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

<script>
var x, y;
x = 5 + 6;
y = x * 10;
document.getElementById("demo").innerHTML = y;
</script>

</body>
</html>

Nestes exemplos, usando var ou let produzirá o mesmo resultado.

Você aprenderá mais sobre var e let posteriormente neste tutorial.

Comentários JavaScript

Nem todas as instruções JavaScript são “executadas”.

Código após barras duplas // ou entre /* e */ é tratado como um comentário.

Os comentários são ignorados e não serão executado:

let x = 5;   // I will be executed
// x = 6;   I will 
NOT be executed

Experimente você mesmo →

<!DOCTYPE html>
<html>
<body>

<h2>JavaScript Comments are NOT Executed</h2>

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

<script>
let x;
x = 5;
// x = 6; I will not be executed
document.getElementById("demo").innerHTML = x;
</script>

</body>
</html>

Você aprenderá mais sobre comentários em um capítulo posterior.

Identificadores/Nomes JavaScript

Identificadores são nomes JavaScript.

Identificadores são usados para nomear variáveis, palavras-chave e funções.

As regras para nomes legais são as mesmas na maioria das linguagens de programação.

Um nome JavaScript deve começar com:

Uma letra (A-Z ou a-z)
Um cifrão ($)
Ou um sublinhado (_)

Os caracteres subsequentes podem ser letras, dígitos, sublinhados ou cifrões.

Observação

Números não são permitidos como primeiro caractere em nomes.

Dessa forma, o JavaScript pode distinguir facilmente identificadores de números.

JavaScript diferencia maiúsculas de minúsculas

Todos os identificadores JavaScript são diferencia maiúsculas de minúsculas.

As variáveis sobrenome e sobrenome, são duas variáveis diferentes:

let lastname, lastName;
lastName = "Doe";
lastname = "Peterson";

Experimente você mesmo →

<!DOCTYPE html>
<html>
<body>

<h2>JavaScript is Case Sensitive</h2>

<p>Try to change lastName to lastname.</p>

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

<script>
let lastname, lastName;
lastName = "Doe";
lastname = "Peterson";
document.getElementById("demo").innerHTML = lastName;
</script>

</body>
</html>

JavaScript não interpreta LET ou Let como a palavra-chave let.

JavaScript e caso de camelo

Historicamente, os programadores usaram diferentes maneiras de juntar várias palavras em um nome de variável:

Hífens:

nome, sobrenome, cartão master, intermunicipal.

Hífens não são permitidos em JavaScript. Eles são reservados para subtrações.

Sublinhado:

primeiro_nome, sobrenome, master_card, inter_cidade.

Caso Camelo Superior (Caso Pascal):

Nome, Sobrenome, MasterCard, InterCity.

Caixa inferior de camelo:

Os programadores de JavaScript tendem a usar camel case que começa com uma letra minúscula:

nome, sobrenome, masterCard, interCity.

Conjunto de caracteres JavaScript

JavaScript usa o conjunto de caracteres Unicode.

Unicode cobre (quase) todos os caracteres, pontuações e símbolos do mundo.

Para uma análise mais detalhada, estude nossa Referência Unicode Completa.