Curso IT Fundamentos JavaScript 036_Estrutura de Sintaxe

Instruções

As instruções JavaScript (Statements) são um conjunto de comandos usados para executar tarefas específicas.

Exemplo:

1
// Declaração de variável
2
let userName = 'Carlos';
3
let age = 18;
4

5
// Instrução condicional
6
if (age >= 18) {
7
  console.log(userName + ' é um adulto');
8
} else {
9
  console.log(userName + ' é um menor');
10
}
11

12
// Loop
13
for (let i = 0; i < 5; i++) {
14
  console.log('Saída do loop ' + (i + 1));
15
}
16

17
// Definição de função
18
function Hello(name) {
19
  return 'Olá, ' + name + '!';
20
}
21

22
// Chamada de função
23
let sayHello = Hello(userName);
24
console.log(sayHello);

Ponto e vírgula

Em JavaScript, o ponto e vírgula (;) é o símbolo de terminação de instrução, usado para marcar o fim de uma instrução. O ponto e vírgula é opcional na maioria dos casos, porque o interpretador JavaScript tenta inserir automaticamente o ponto e vírgula (Automatic Semicolon Insertion, ASI) para tornar o código sintaticamente correto. No entanto, existem algumas situações em que o ASI pode levar a comportamentos inesperados, portanto, é recomendável adicionar explicitamente ponto e vírgula ao escrever código JavaScript.

Quando um ponto e vírgula aparece, seja em uma única linha ou em várias linhas, esta instrução termina.

Exemplo:

1
alert('Hello');alert('JavaScript!');

Quando há uma quebra de linha (line break), na maioria dos casos o ponto e vírgula pode ser omitido.

Exemplo:

1
alert('Hello')
2
alert('JavaScript!')

1
alert('Hello');
2
alert('JavaScript!')

1
alert('Hello')
2
alert('JavaScript!');

1
alert('Hello');alert('JavaScript!')

Quando encontra blocos de instruções ou blocos de código, a quebra de linha não adiciona automaticamente um ponto e vírgula. Além disso, espaços e quebras de linha são ignorados.

Exemplo:

1
alert
2
(
3
1+
4
   2
5
   +1);

Comentários

Em JavaScript, comentários são textos usados para adicionar explicações e notas no código, esses textos não têm impacto real na execução do programa. Os comentários são muito úteis para melhorar a legibilidade do código, colaboração e depuração.

Comentários de linha única

Usando o símbolo // você pode criar comentários de linha única. Todo o texto desde // até o final da linha será tratado como comentário.

Exemplo:

1
alert('Hello JavaScript!'); // Comentário de linha única após a instrução
2
// Comentário de linha única ocupando uma linha inteira

Comentários de várias linhas

Usando /* para começar e */ para terminar, você pode criar comentários de várias linhas. Todo o texto entre esses dois símbolos será tratado como comentário.

1
/*
2
  Este é um comentário de várias linhas
3
  Pode abranger várias linhas
4
*/
5
alert('Hello');
6
/*
7
Comentários de várias linhas também podem ser usados para comentar um bloco de código, o código abaixo não será executado
8
alert('JavaScript!');
9
*/

Caixas de diálogo

JavaScript fornece várias caixas de diálogo para interação simples com o usuário, incluindo alert, confirm e prompt. Essas caixas de diálogo permitem exibir informações ao usuário, fazer perguntas ou aceitar entrada. Quando uma caixa de diálogo é exibida, a execução do código é pausada até que o usuário feche a caixa de diálogo.

Caixa de diálogo alert

A caixa de diálogo alert é usada para exibir uma mensagem ao usuário e aguardar que o usuário clique no botão “OK”.

Exemplo:

1
alert('Hello JavaScript interno!');

Efeito:

Caixa de diálogo confirm

A caixa de diálogo confirm é usada para exibir uma caixa de diálogo com botões de confirmação e cancelamento ao usuário, geralmente usada para perguntar ao usuário se deseja executar uma determinada operação.

Exemplo:

1
    let yesNo = confirm("Você está aprendendo JavaScript?");
2
    alert(yesNo);

Efeito:

Caixa de diálogo prompt

A caixa de diálogo prompt é usada para exibir uma caixa de diálogo com um campo de entrada ao usuário, geralmente usada para aceitar a entrada do usuário.

Exemplo:

1
    let name = prompt("Por favor, digite seu nome:", '');
2
    alert(name);

Efeito:

Ferramentas de desenvolvedor

As ferramentas de desenvolvedor JavaScript são um conjunto de ferramentas integradas no navegador que ajudam os desenvolvedores a depurar, analisar e otimizar o código JavaScript. Diferentes navegadores fornecem diferentes ferramentas de desenvolvedor, a seguir estão as ferramentas de desenvolvedor JavaScript de navegadores comuns:

Ferramentas de desenvolvedor do Chrome

Abra o navegador Chrome e pressione Ctrl + Shift + I (Windows/Linux) ou Cmd + Option + I (Mac) para abrir as ferramentas de desenvolvedor do Chrome.

Com o mouse no navegador, clique com o botão direito, selecione “Inspecionar” no menu pop-up para abrir as ferramentas de desenvolvedor do Chrome.

Conforme a imagem:

Clique no ícone “Configurações e mais” do navegador, selecione “Mais ferramentas”—“Ferramentas do desenvolvedor” para abrir as ferramentas de desenvolvedor do Chrome.

Conforme a imagem:

Principais funcionalidades e painéis:

• Console(Console): Usado para executar e depurar código JavaScript, visualizar saída, erros e informações de aviso.
• Sources(Fontes): Fornece editor de código, definição de pontos de interrupção, expressões de observação e outras funções para depurar o código-fonte JavaScript.
• Network(Rede): Visualize as solicitações de rede iniciadas pela página, inspecione os detalhes das solicitações e respostas.
• Performance(Desempenho): Analise o desempenho da página, visualize o tempo de carregamento, uso da CPU, etc.
• Application(Aplicativo): Visualize e depure armazenamento local, Session Storage, Cookies, etc.
• Elements(Elementos): Visualize e edite a árvore DOM, modifique estilos CSS.

Palavras-chave

As palavras-chave JavaScript são palavras reservadas com uso especial na linguagem de programação JavaScript, usadas para identificar variáveis, funções, instruções, etc. Essas palavras-chave não podem ser usadas como identificadores (como nomes de variáveis, nomes de funções, etc.).

A seguir estão algumas palavras-chave JavaScript:

1. Palavras-chave básicas:

• break
• case
• catch
• continue
• debugger
• default
• delete
• do
• else
• false
• finally
• for
• function
• if
• in
• instanceof
• new
• null
• return
• switch
• this
• throw
• true
• try
• typeof
• undefined
• var
• void
• while
• with

2. Palavras-chave reservadas (com uso especial no modo estrito):

• implements
• interface
• package
• private
• protected
• public
• static
• yield

3. Palavras-chave introduzidas no ECMAScript 6 (ES6):

• class
• const
• export
• extends
• import
• super