🎓 Aula de JavaScript para alunos do ensino médio
Olá, alunos! Hoje, vamos aprender sobre JavaScript, uma linguagem de programação
que é muito utilizada na web. Vamos começar do zero e, passo a passo, entender como
funciona.
1. O que é JavaScript? JavaScript é uma linguagem de programação que permite
adicionar interatividade e funcionalidades avançadas a páginas web. Ele é
executado no navegador e pode ser utilizado para criar animações, formulários
dinâmicos e muito mais.
2. Como funciona JavaScript? JavaScript é uma linguagem de script (ou seja, um
conjunto de instruções) que é executada pelo navegador. Quando você carrega
uma página web que contém JavaScript, o navegador analisa e executa o código,
criando a interatividade desejada.
3. Estrutura básica de um programa em JavaScript Um programa em JavaScript é
composto por instruções entre chaves ({}). Cada instrução é uma ação que o
navegador deve executar. Vamos ver um exemplo:
{
[Link]("Olá, mundo!");
}
Neste exemplo, a instrução [Link] ("Olá, mundo!") imprime a mensagem "Olá,
mundo!" na consola do navegador (uma ferramenta que ajuda os desenvolvedores a
depurar e testar o código).
4. Variáveis e tipos de dados Variáveis são nomes que representam valores em
JavaScript. Vamos ver um exemplo:
let nome = "Ana";
let idade = 16;
Neste exemplo, nome e idade são variáveis que armazenam valores de texto e número,
respectivamente.
5. Operadores e expressões Operadores são símbolos que realizam operações em
valores. Por exemplo, o operador + é utilizado para adicionar números:
let resultado = 5 + 3;
[Link](resultado); // imprime 8 na consola
Expressões são combinações de valores e operadores que geram um novo valor. No
exemplo acima, `5 +
3é uma expressão que adiciona os valores 5 e 3 e atribui o resultado à
variávelresultado`.
JavaScript suporta uma variedade de operadores, como adição, subtração, multiplicação,
divisão, modulo (restante da divisão), incremento e decremento. Também suporta
operadores de comparação, como igualdade, desigualdade, maior que, maior ou igual a
menor que é menor ou igual a.
Por exemplo:
let a = 5;
let b = 3;
// Adição
let resultado1 = a + b;
// Subtração
let resultado2 = a - b;
// Multiplicação
let resultado3 = a * b;
// Divisão
let resultado4 = a / b;
// Modulo (restante da divisão)
let resultado5 = a % b;
// Incremento
let resultado6 = ++a;
// Decremento
let resultado7 = --b;
// Comparações
if (a === b) {
[Link]("a é igual a b");
} else {
[Link]("a não é igual a b");
}
if (a > b) {
[Link]("a é maior que b");
} else {
[Link]("a não é maior que b");
}
Neste exemplo, variáveis a e b são utilizadas para criar expressões que realizam
operações aritméticas e comparam valores.
6. Estruturas de controle Estruturas de controle são instruções que permitem a
execução de códigos condicional ou em loops.
a. Condicionais Condicionais permitem a execução de códigos baseados em condições.
O operador if é utilizado para testar uma condição e executar um bloco de código se a
condição for verdadeira:
let idade = 18;
if (idade >= 18) {
[Link]("Maior de idade");
} else {
[Link]("Menor de idade");
}
No exemplo acima, se a idade for maior ou igual a 18, a mensagem "
Maior de idade" será exibida. Caso contrário, a mensagem "Menor de idade" será
exibida.
b. Loops Loops permitem a execução de códigos repetidamente até que uma condição
seja atendida. Existem três tipos principais de loops em JavaScript: for, for...of e while.
1. for O loop for é utilizado para iterar sobre um array ou uma string. O loop é
executado um número específico de vezes, determinado pelo valor de controle:
let numeros = [1, 2, 3, 4, 5];
for (let i = 0; i < [Link]; i++) {
[Link](numeros[i]);
}
Neste exemplo, o loop for é executado cinco vezes, uma para cada item no
array numeros. A variável i é incrementada em 1 a cada iteração até que ela seja maior
que a length do array.
2. for...of O loop for...of é utilizado para iterar sobre objetos iteráveis, como arrays
e strings. Ele fornece uma maneira mais simples de iterar sobre elementos em
comparação com o loop for:
let frutas = ["maçã", "banana", "laranja"];
for (let fruta of frutas) {
[Link](fruta);
}
Neste exemplo, o loop for...of é executado três vezes, uma para cada item no
array frutas. A variável fruta assume o valor de cada item na iteração.
3. while O loop while é utilizado para iterar enquanto uma condição for verdadeira.
Ele é útil quando não se sabe quantas vezes o loop deve ser executado antes de
atender à condição:
let contador = 0;
while (contador < 5) {
[Link](contador);
contador++;
}
Neste exemplo, o loop while é executado até que a variável contadora seja maior que 5.
A cada iteração, a vari
ável contador é incrementada em 1. O loop é executado 5 vezes, impresso os números
de 0 a 4 na tela.
4. for O loop for é utilizado para iterar um número específico de vezes. Ele é útil
quando se sabe exatamente quantas vezes o loop deve ser executado:
for (let contador = 0; contador < 5; contador++) {
[Link](contador);
}
Neste exemplo, o loop for é executado 5 vezes, impresso os números de 0 a 4 na tela. A
sintaxe do loop for é:
for ([inicialização]; [condição]; [incrementação]) {
// instruções a serem executadas
}
A seção de inicialização é executada apenas uma vez antes do início do loop. A
condição é avaliada antes de cada iteração. Se a condição for verdadeira, as instruções
dentro do loop são executadas e a incrementação é executada após a execução das
instruções.
5. for...in O loop for...in é utilizado para iterar sobre as propriedades de um objeto
ou os elementos de um array:
const frutas = ['maçã', 'banana', 'laranja'];
for (const fruta in frutas) {
[Link](frutas[fruta]);
}
A seção de inicialização é executada apenas uma vez antes do início do loop. A
condição é avaliada antes de cada iteração. Se a condição for verdadeira, as instruções
dentro do loop são executadas e a incrementação é executada após a execução das
instruções.
5. for...in O loop for...in é utilizado para iterar sobre as propriedades de um objeto
ou os elementos de um array:
const frutas = ['maçã', 'banana', 'laranja'];
for (const fruta in frutas) {
[Link](frutas[fruta]);
}
Neste exemplo, o loop for...in é utilizado para iterar sobre os elementos do array frutas.
A variável fruta assume o valor de cada item na iteração.
6. for...of O loop for...of é utilizado para iterar sobre os valores de um array ou uma
string:
const frutas = ['maçã', 'banana', 'laranja'];
for (const fruta of frutas) {
[Link](fruta);
}
Neste exemplo, o loop for...of é utilizado para iterar sobre os valores do array frutas. A
variável fruta assume o valor de cada item na iteração.
7. forEach O método `forEach
8. continue O comando continue é utilizado para pular a iteração
atual e continuar com a próxima iteração. Ele é útil quando
você deseja ignorar um determinado item na lista e continuar
com a iteração:
const frutas = ['maçã', 'banana', 'laranja'];
for (let i = 0; i < [Link]; i++) {
if (frutas[i] === 'banana') {
continue;
[Link](frutas[i]);
Neste exemplo, se fruta for 'banana', o comando continue é executado, ignorando a
iteração atual e continuando com a próxima iteração.
2. break O comando break é utilzado para sair do loop imediatamente. Ele é útil
quando você deseja encerrar a iteração antes do final da lista:
const frutas = ['maçã', 'banaana', 'laranja'];
for (let i = 0; i < [Link]; i++) {
if (frutas[i] === 'banana') {
break;
}
consolellog(frutas[i]);
}
Neste exemplo, se fruta for 'banana', o comando continue é executado, ignorando a
iteração atual e continuando com a próxima iteração.
2. break O comando break é utilzado para sair do loop imediatamente. Ele é útil
quando você deseja encerrar a iteração antes do final da lista:
const frutas = ['maçã', 'banaana', 'laranja'];
for (let i = 0; i < [Link]; i++) {
if (frutas[i] === 'banana') {
break;
}
consolellog(frutas[i]);
}
Neste exemplo, se a fruta for 'banana', o comando break é executado, encerrando o loop
imediatamente e ignorando as itrrações restantes.
3. label O comando label é utilizado para dar um rótulo a um loop. Isso permite
que você utilize o comando break ou contine com um rótulo para sair ou pular
uma iteração específica:
outer:
for (let i = 0; i < [Link]; i++) {
for (let j = 0;; j < [Link]; j++) {
if (i === j) {
continue outer;
}
[Link](frutas[i], frutas[j]);
}
}
Neste exemplo, o loop externo tem um rótulo outer. Se a condição i === j for