Declarações JavaScript

Índice

    Mostrar índice

Exemplo

let x, y, z;    // Statement 1
x = 5;          // Statement 2
y = 6;          // Statement 3
z = x + y;      //  Statement 4

Experimente você mesmo →

<!DOCTYPE html>
<html>
<body>

<h2>JavaScript Statements</h2>

<p>A <b>JavaScript program</b> is a list of <b>statements</b> to be executed by a computer.</p>

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

<script>
let x, y, z;  // Statement 1
x = 5;        // Statement 2
y = 6;        // Statement 3
z = x + y;    // Statement 4

document.getElementById("demo").innerHTML =
"The value of z is " + z + ".";  
</script>

</body>
</html>

Programas JavaScript

Um programa de computador é uma lista de "instruções" a serem "executado" por um computador.

Em uma linguagem de programação, essas instruções de programação são chamadas de instruções.

Um programa JavaScript é uma lista de instruções de programação.

Em HTML, os programas JavaScript são executados pelo navegador da web.

Declarações JavaScript

As instruções JavaScript são compostas por:

Valores, operadores, expressões, palavras-chave, e comentários.

Esta declaração diz ao navegador para escrever “Hello Dolly”. dentro de um elemento HTML com id="demo":

Exemplo

document.getElementById("demo").innerHTML = "Hello Dolly.";

Experimente você mesmo →

<!DOCTYPE html>
<html>
<body>

<h2>JavaScript Statements</h2>

<p>In HTML, JavaScript statements are executed by the browser.</p>

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

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

</body>
</html>

A maior parte do JavaScript os programas contêm muitas instruções JavaScript.

As instruções são executadas, uma por uma, no mesma ordem em que foram escritas.

Os programas JavaScript (e instruções JavaScript) são frequentemente chamados de código JavaScript.

Ponto e vírgula;

Ponto e vírgula separam instruções JavaScript.

Adicione um ponto e vírgula no final de cada instrução executável:

Exemplos

let a, b, c;  // Declare 3 variables
a = 5;        // Assign the value 5 to a
b = 6;        // Assign the value 6 to b
c = a + b;    // Assign the sum of a and b to c

Experimente você mesmo →

<!DOCTYPE html>
<html>
<body>

<h2>JavaScript Statements</h2>

<p>JavaScript statements are separated by semicolons.</p>

<p id="demo1"></p>

<script>
let a, b, c;
a = 5;
b = 6;
c = a + b;
document.getElementById("demo1").innerHTML = c;
</script>

</body>
</html>

Quando separados por ponto e vírgula, são permitidas múltiplas instruções em uma linha:

a = 5; b = 6; c = a + b;

Experimente você mesmo →

<!DOCTYPE html>
<html>
<body>

<h2>JavaScript Statements</h2>

<p>Multiple statements on one line are allowed.</p>

<p id="demo1"></p>

<script>
let a, b, c;
a = 5; b = 6; c = a + b;
document.getElementById("demo1").innerHTML = c;
</script>

</body>
</html>

Na web, você pode ver exemplos sem ponto e vírgula.
Terminar as instruções com ponto e vírgula não é obrigatório, mas é altamente recomendado.

Espaço em branco JavaScript

JavaScript ignora vários espaços. Você pode adicionar espaços em branco ao seu script para torná-lo mais legível.

As seguintes linhas são equivalentes:

let person = "Hege";
let person="Hege";

Uma boa prática é colocar espaços ao redor dos operadores (=+ - */):

let x = y + z;

Comprimento de linha JavaScript e quebras de linha

Para melhor legibilidade, os programadores geralmente gostam de evitar linhas de código com mais de 80 personagens.

Se uma instrução JavaScript não couber em uma linha, o melhor lugar para quebrar é depois de um operador:

Exemplo

document.getElementById("demo").innerHTML =
"Hello Dolly!";

Experimente você mesmo →

<!DOCTYPE html>
<html>
<body>

<h2>JavaScript Statements</h2>

<p>
The best place to break a code line is after an operator or a comma.
</p>

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

<script>
document.getElementById("demo").innerHTML =
"Hello Dolly!";
</script>

</body>
</html>

Blocos de código JavaScript

Instruções JavaScript podem ser agrupadas em blocos de código, dentro de curvas colchetes {...}.

O objetivo dos blocos de código é definir instruções a serem executadas juntas.

Um lugar onde você encontrará declarações agrupadas em blocos é em Funções JavaScript:

Exemplo

function myFunction() {
  document.getElementById("demo1").innerHTML = "Hello Dolly!";
  document.getElementById("demo2").innerHTML = "How are you?";
}

Experimente você mesmo →

<!DOCTYPE html>
<html>
<body>

<h2>JavaScript Statements</h2>

<p>JavaScript code blocks are written between { and }</p>

<button type="button" onclick="myFunction()">Click Me!</button>

<p id="demo1"></p>
<p id="demo2"></p>

<script>
function myFunction() {
  document.getElementById("demo1").innerHTML = "Hello Dolly!";
  document.getElementById("demo2").innerHTML = "How are you?";
}
</script>

</body>
</html>

Neste tutorial usamos 2 espaços de indentação para blocos de código.
Você aprenderá mais sobre funções posteriormente neste tutorial.

Palavras-chave JavaScript

As instruções JavaScript geralmente começam com uma palavra-chave para identificar a ação JavaScript a ser executada.

Nossa referência de palavras reservadas lista todas as palavras-chave JavaScript.

Aqui está uma lista de algumas das palavras-chave que você aprenderá em este tutorial:

var

Declara uma variável

let

Declara uma variável de bloco

const

Declara uma constante de bloco

if

Marca um bloco de instruções a serem executadas sob uma condição

switch

Marca um bloco de instruções a serem executadas em diferentes casos

for

Marca um bloco de instruções a serem executadas em um loop

function

Declara uma função

return

Sai de uma função

try

Implementa tratamento de erros em um bloco de instruções

Palavras-chave JavaScript são palavras reservadas. Palavras reservadas não podem ser usadas como nomes de variáveis.