JavaScript

• JavaScript não permite a criação de applets nem de aplicativos;

• JavaScript reside dentro de documentos HTML e pode prover diferentes níveis de interatividades não
suportados pelo HTML sozinho;
Diferenças chaves em relação ao Java:
• Java é uma linguagem de programação;
• JavaScript é uma linguagem de script;
• Aplicativos Java são executados pela máquina virtual Java;
• Scripts JavaScript são executados pelos browsers;
• Java é compilado;
• JavaScript é texto puro;

Atualmente, o maior mantedor da linguagem é a Fundação Mozilla;

Com o tempo, muitas funcionalidades foram criadas em forma de Script para os browser e foram
“incorporadas” ao JavaScript:
• Hoje é um conjunto de funcionalidades e, até mesmo, diferentes padrões.
Os principais padrões a destacar são:
• A Linguagem Núcleo: ECMAScript
• Padrão mantido por ECMA International Associação Industrial de padronização de tecnologias da
Informação e Comunicação;

• DOM: Document Object Model

• Define a Interface da Linguagem com o Browser;
• Padrão mantido por W3C

JavaScript
JavaScript é uma linguagem de programação de alto nível, interpretada e principalmente usada para criar
interatividade em páginas web.
É uma linguagem dinamicamente tipada e orientada a objetos, com uma sintaxe mais flexível e fácil de
aprender em comparação com Java. Além disso, JavaScript também suporta paradigmas de programação
funcional e orientada a eventos.
A orientação a objetos é um paradigma de rogramação que organiza o código em torno de objetos, que
podem conter dados (conhecidos como atributos ou propriedades) e funcionalidades (conhecidas como
métodos). Cada objeto é uma instância de uma classe, que define a estrutura e o comportamento dos
objetos.

JavaScript - Objetos e Propriedades:

No JavaScript, é fácil criar objetos e atribuir propriedades a eles. Por exemplo:
let carro = {
marca: "Toyota",
modelo: "Corolla",
ano: 2020
};
Você pode definir funções dentro de objetos, que são conhecidas como métodos. Esses métodos podem ser
chamados para executar ações relacionadas ao objeto. Por exemplo:
let pessoa = {
nome: "João",
idade: 30,
apresentar: function() {
console.log("Olá, meu nome é " + this.nome + " e
tenho " + this.idade + " anos.");
}
};
pessoa.apresentar();
JavaScript - Herança
No JavaScript, você pode criar hierarquias de objetos e estender o comportamento de um objeto para outro
usando herança prototípica. Isso permite reutilizar código e criar estruturas de classe. Por exemplo:
function Animal(nome) {
this.nome = nome;
}
Animal.prototype.andar = function() {
console.log(this.nome + " está andando.");
};
 let cachorro = new Animal("Rex");
cachorro.andar(); // "Rex está andando."

JavaScript - Polimorfismo
O JavaScript suporta polimorfismo, o que significa que objetos de diferentes tipos podem ser tratados
de maneira uniforme. Por exemplo, várias classes podem implementar o mesmo método de maneiras
diferentes.
Suponha que temos uma classe base chamadaAnimal, que possui um método fazerBarulho():
function Animal(nome) {
this.nome = nome;
}
Animal.prototype.fazerBarulho = function() {
console.log(this.nome + " faz algum barulho.");
};

Agora, vamos criar duas subclasses de Animal: Cachorro e Gato. Cada uma dessas subclasses irá
sobrescrever o método fazerBarulho() com seu próprio comportamento:
function Cachorro(nome) {
Animal.call(this, nome);
}
Cachorro.prototype = Object.create(Animal.prototype);
Cachorro.prototype.constructor = Cachorro;
Cachorro.prototype.fazerBarulho = function() {
console.log(this.nome + " late!");
};

function Gato(nome) {
Animal.call(this, nome);
}
Gato.prototype = Object.create(Animal.prototype);
Gato.prototype.constructor = Gato;
Gato.prototype.fazerBarulho = function() {
console.log(this.nome + " mia!");
};

Agora, podemos criar instâncias de Cachorro e Gato e chamar o método fazerBarulho() em cada uma
delas:
let rex = new Cachorro("Rex");
let whiskers = new Gato("Whiskers");
rex.fazerBarulho(); // "Rex late!"
whiskers.fazerBarulho(); // "Whiskers mia!"

Neste exemplo, tanto Cachorro quanto Gato são subclasses de Animal, e cada uma redefine o método
fazerBarulho() de maneira apropriada. Quando chamamos fazerBarulho() em uma instância de
Cachorro ou Gato, o método apropriado é executado com base no tipo do objeto em tempo de execução.
Isso é um exemplo de polimorfismo em JavaScript, onde objetos do mesmo tipo podem responder a uma
mesma mensagem de maneiras diferentes.
Os navegadores da web fornecem um ambiente de execução para o JavaScript, permitindo que os
scripts sejam incorporados em páginas web e interajam com o HTML e o CSS para criar
experiências interativas para o usuário.
JavaScript também pode ser usado no desenvolvimento de aplicações back-end, além de seu uso
tradicional no front-end. Existem várias tecnologias e frameworks que permitem o uso de
JavaScript no lado do servidor. Algumas das principais opções são:
Node.js
Node.js é um ambiente de tempo de execução JavaScript que permite executar código JavaScript
no servidor. Ele usa o motor V8 do Google Chrome para executar o código JavaScript. Com Node.js, você
pode criar servidores web, APIs, microsserviços e outras aplicações back-end.
Express.js
Express.js é um framework para Node.js que simplifica o processo de criação de servidores web e APIs. Ele
fornece uma camada fina sobre o core do Node.js, facilitando o roteamento de URLs,
manipulação de requisições e respostas, e muito mais.
Nest.js
NestJS é um framework para Node.js que oferece uma arquitetura robusta e modular para construir
aplicações back-end escaláveis. Ele é inspirado em Angular e fornece recursos como injeção de
dependência, roteamento baseado em controladores e suporte para TypeScript.
Meteor.js
Meteor é uma plataforma full-stack que permite desenvolver tanto o front-end quanto o back-end de
uma aplicação usando JavaScript. Ele oferece um conjunto integrado de ferramentas para
desenvolvimento rápido e simplificado, incluindo um sistema de build, um banco de dados em tempo
real e um protocolo de comunicação entre cliente e servidor.

JavaScript pode alterar o conteúdo HTML

• Um dos muitos métodos JavaScript HTML é getElementById().
• O próximo exemplo "encontra" um elemento HTML (com id="demo") e altera o conteúdo do elemento
(innerHTML) para "Hello JavaScript":

• Quando você usa o método getElementById() em JavaScript, você está interagindo com o DOM
(Document Object Model), que é uma representação em forma de árvore dos elementos HTML de um
documento web.
• Embora JavaScript seja uma linguagem que suporte programação orientada a objetos, o uso
do getElementById() por si só não é necessariamente um exemplo direto de programação orientada a
objetos.
No entanto, o DOM em si é um exemplo de programação orientada a objetos, pois os elementos
HTML são representados como objetos, e você pode interagir com esses objetos usando métodos e
propriedades. O método getElementById() é apenas um dos métodos fornecidos pelo DOM para
selecionar e manipular elementos HTML.
Se você estiver escrevendo um código JavaScript que encapsula a seleção de elementos em uma
função ou método que você criou, então isso pode ser considerado um exemplo de programação
orientada a objetos. Por exemplo:
// Exemplo de programação orientada a objetos
class MeuComponente {
constructor(id) {
this.elemento = document.getElementById(id);
}
alterarTexto(texto) {
this.elemento.innerText = texto;
}
}
// Uso do objeto MeuComponente
const meuObjeto = new MeuComponente("meu-elemento");
meuObjeto.alterarTexto("Novo texto!");
Neste exemplo, criamos uma classe
MeuComponente que encapsula a seleção de um elemento HTML por ID e fornece um método para
alterar seu texto. Isso é um exemplo de programação orientada a objetos em JavaScript, pois estamos
usando classes e objetos para organizar e manipular nosso código.

Detalhes do JavaScript
document.getElementById("demo").innerHTML = "Hello JavaScript";
JavaScript aceita aspas duplas e simples:
document.getElementById('demo').innerHTML = 'Hello JavaScript';
JavaScript pode alterar valores de atributos HTML
Neste exemplo, o JavaScript altera o valor do src atributo (source) de uma tag <img>:

Explicando
JavaScript pode ser usado para alterar dinamicamente os atributos de elementos HTML em resposta a
eventos do usuário, como clicar em um botão.
1º = O primeiro botão tem um evento onclick associado a ele. Quando o botão é clicado, o JavaScript
dentro do atributo onclick é executado
2º = Dentro da função associada ao evento onclick, document.getElementById('myImage').src='pic_bulb
on.gif', o JavaScript seleciona o elemento de imagem com o id "myImage" usando
document.getElementById('myImage').
3º = Uma vez que o elemento de imagem é selecionado, o JavaScript altera o valor do atributo src desse
elemento para "pic_bulbon.gif", o que faz com que a imagem seja alterada para a imagem de uma
lâmpada acesa.
4º = O segundo botão faz a mesma coisa, mas muda o valor do atributo src para "pic_bulboff.gif", tornando
a imagem da lâmpada apagada. Isso demonstra como o JavaScript pode ser usado para manipular
dinamicamente elementos HTML, alterando seus atributos para criar interatividade na página.
JavaScript pode alterar estilos HTML (CSS)
Alterar o estilo de um elemento HTML é uma variante de alterar um atributo HTML:
document.getElementById("demo").style.fontSize = "35px";

JavaScript pode ocultar elementos HTML

Ocultar elementos HTML pode ser feito alterando o estilo display:
document.getElementById("demo").style.display =
"none";

JavaScript pode mostrar elementos HTML

A exibição de elementos HTML ocultos também pode ser feita alterando o estilo display:
document.getElementById("demo").style.display = "block";

A tag <script>
Em HTML, o código JavaScript é inserido entre tags <script>código</script>
Exemplo:
<script>
document.getElementById("demo").innerH
TML = "Meu primeiro JavaScript";
</script>
Exemplos antigos de JavaScript podem usar um atributo type: <script type="text/javascript">.
O atributo type não é obrigatório. JavaScript é a linguagem de script padrão em HTML.

Funções e eventos JavaScript

Um function JavaScript é um bloco de código JavaScript, que pode ser executado quando "chamado".
Por exemplo, uma função pode ser chamada quando ocorre um evento , como quando o usuário
clica em um botão.
JavaScript em <head> ou <body>
Você pode colocar qualquer número de scripts em um documento HTML.
Os scripts podem ser colocados na seção <body>, ou na seção <head> de uma página HTML, ou em
ambos.
JavaScript externo
Os scripts também podem ser colocados em arquivos externos:
• Arquivo externo: myScript.js

Scripts externos são práticos quando o mesmo código é usado em muitas páginas web diferentes.
Os arquivos JavaScript têm a extensão de arquivo .js
Para usar um script externo, coloque o nome do arquivo de script no atributo src (source) de uma
tag <script>
<script src="myScript.js"></script>
Você pode colocar uma referência de script externo no <head> ou <body>como desejar.
O script se comportará como se estivesse localizado exatamente onde a tag <script> está localizada.
Vantagens externas do JavaScript
Colocar scripts em arquivos externos tem algumas vantagens:
• Ele separa o HTML do código
• Torna HTML e JavaScript mais fáceis de ler e manter
• Arquivos JavaScript armazenados em cache podem acelerar o carregamento da página

Para adicionar vários arquivos de script a uma página - use várias tags de script:
● <script src="myScript1.js"></script>
● <script src="myScript2.js"></script>

Referências Externas
Um script externo pode ser referenciado de três maneiras diferentes:
• Com um URL completo (um endereço da web completo)
• Com um caminho de arquivo (como /js/)
• Sem nenhum caminho

Este exemplo usa um URL completo para vincular myScript.js:

<script src="https://www.w3schools.com /js/myScript.js"></script>

Este exemplo usa um caminho de arquivo para vincular a myScript.js:

<script src="/js/myScript.js"></script>

Este exemplo não usa nenhum caminho para vincular ao myScript.js:

<script src="myScript.js"></script>

Saída JavaScript
Possibilidades de exibição de JavaScript.
JavaScript pode “exibir” dados de diferentes maneiras:
• Escrevendo em um elemento HTML, usando innerHTML.
• Escrevendo na document.write().
JavaScript pode “exibir” dados de diferentes maneiras:
• Escrevendo em uma caixa de alerta, usando window.alert().
• Escrevendo no console do navegador, usando console.log().

Strings e Booleanos
Strings são usadas para representar texto e podem ser criadas usando aspas simples, duplas ou template
literals. Booleanos, representando true ou false, são cruciais para lógica condicional e tomada de decisões
no código.

Undefined e Null
Undefined é um tipo atribuído automaticamente a variáveis não inicializadas. Null é usado para indicar
intencionalmente a ausência de um objeto. A compreensão desses valores é essencial para gerenciar
estados e erros.

Symbol e BigInt
Symbol cria identificadores únicos, úteis para propriedades de objetos, evitando colisões de nomes.
BigInt permite trabalhar com números inteiros maiores do que 2^53 - 1, ampliando as capacidades do
JavaScript para lidar com grandes quantidades de dados.

Tipagem Dinâmica
JavaScript é uma linguagem de tipagem dinâmica, onde os tipos são determinados em tempo de
execução. Isso oferece flexibilidade, mas requer cuidado e compreensão para evitar bugs relacionados a
tipos, como conversões implícitas e comparações.
Exemplos
// Tipo Number
let idade = 30;
console.log("Idade:", idade);
// Tipo String
let nome = "Pedro";
console.log("Nome:", nome);

Exemplos
// Tipo Boolean
let maiorDeIdade = true;
console.log("Maior de idade:", maiorDeIdade);

Exemplos
// Tipo Undefined
let endereco;
console.log("Endereço:", endereco);

Exemplos
// Tipo Null
let salario = null;
console.log("Salário:", salario);

Exemplos
// Tipo Symbol
let simbolo = Symbol("identificador único");
console.log("Símbolo:", simbolo);

Exemplos
// Tipo BigInt
let numeroGrande = BigInt(9007199254740991);
console.log("Número grande:", numeroGrande);

Qual tipo primitivo em JavaScript é usado para representar grandes inteiros?

R: BigInt

Tipo Number
Tipo "Number" representa números inteiros e decimais.
Inclui valores especiais como: Infinity, -Infinity e NaN.
Operações matemáticas são possíveis, como: adição, subtração, etc.
Exemplo: let age = 25+5;

Tipo string
Em JavaScript, uma string representa texto.
Pode ser delimitada por aspas simples ('...') ou duplas ("..."). Strings podem ser concatenadas usando o
operador +.
Métodos úteis: length, slice(), e toUpperCase().
Template literals (${...}) permitem interpolação e múltiplas linhas.

Tipo boolean
O tipo boolean em JavaScript tem apenas dois valores: true ou false.
Utilizado frequentemente em condições e operações lógicas. Variáveis booleanas são comumente usadas
para verificar estados, como se um botão está ativo.
Tipo boolean
Muitas funções e métodos retornam valoresbooleanos para indicar sucesso ou falha.
Conversões implícitas podem ocorrer, onde valores como 0, null, undefined e '' são tratados como false.

Tipo BigInt
Um BigInt é criado com a acrescentação de nao final de um inteiro literal — 10n — ou chamando a função
BigInt().

Tipo BigInt
const x = 9007199254740991n;
const y = BigInt(9007199254740991);
// 9007199254740991n

Tipo BigInt
Isso é parecido com um Number em algumas partes, mas difere-se em alguns assuntos importantes — ele
não pode ser usado com métodos no objeto Math e não pode ser misturado em operações ou qualquer
instância de Number.

Variáveis com var

A declaração var tem escopo de função e sofre hoisting,significando que a variável pode ser acessada
antes de sua declaração no código. No entanto, isso pode levar a erros de programação devido ao
comportamento imprevisível do hoisting.
O termo "hoisting" em JavaScript refere-se ao comportamento onde declarações de variáveis e funções
são movidas para o topo de seu escopo durante a fase de compilação, antes da execução do código. Isso
ocorre independentemente de onde as declarações são feitas no código.
O termo "hoisting" em JavaScript refere-se ao comportamento onde declarações de variáveis e funções
são movidas para o topo de seu escopo durante a fase de compilação, antes da execução do código. Isso
ocorre independentemente de onde as declarações são feitas no código.
No caso da declaração var, quando você declara uma variável utilizando var, ela é içada (hoisted)
para o topo do escopo da função em que foi declarada. Isso significa que a declaração da variável é
processada antes mesmo de qualquer código dentro da função ser executado.
No entanto, apenas a declaração da variável é içada, não a atribuição de valor.

function exemplo() {
console.log(x); // undefined
var x = 5;
console.log(x); // 5
}
exemplo();

Variáveis com var

No código, mesmo que console.log(x) seja chamado antes da declaração da variável x, não ocorre um
erro. Isso acontece porque a declaração de var x é içada para o topo da função, fazendo com que x seja
reconhecido como uma variável dentro do escopo da função, mas inicialmente seu valor é undefined.
Isso pode levar a erros de programação e comportamentos inesperados, especialmente quando os
desenvolvedores não estão cientes do hoisting.

Introdução ao let e const

let permite declarar variáveis com escopo de bloco, reduzindo o risco de erros por uso indevido em
diferentes partes do código.
const é similar, mas cria variáveis imutáveis, ideal para valores que não devem ser alterados após a
atribuição inicial.
Boas Práticas de Declaração
Preferir let e const sobre var para melhor controle de escopo e prevenção de bugs. Usar const para
valores constantes e let para variáveis que podem mudar. Evitar var para reduzir problemas relacionados
ao hoisting e escopo global.

Escopo de Variáveis
O JavaScript apresenta três principais escopos para variáveis: global, de função e de bloco.
As variáveis de escopo global são acessíveis em todo o programa, enquanto as de escopo de função
estão limitadas à função em que são declaradas. Já as variáveis de escopo de bloco, introduzidas com o
ES6, são restritas a blocos de código, como em estruturas condicionais e loops.

Hoisting de Variáveis
O Hoisting ocorre quando declarações de variáveis são movidas para o topo do seu escopo antes da
execução do código.
var é afetado pelo hoisting, enquanto let e const não, tornando-as mais previsíveis e seguras.

Uso de Variáveis em Funções

Dentro de funções, a escolha entre let, const e var afeta a clareza e manutenção do código. let e const são
mais adequados para um código limpo e modular, facilitando o rastreamento de variáveis e prevenindo
alterações indesejadas.

Exemplos
// Uso de var
var nome = "Ana";
console.log(nome);

// Uso de let
Let idade = 25;
console.log(idade);

// Uso de const
const PI = 3.14;
console.log(PI);

Qual palavra-chave deve ser usada para declarar uma variável cujo valor não mudará?
R: const

Var, let e const

var: Declaração de variável com escopo de função, menos restrita.
let: Declaração de variável com escopo de bloco, substitui var em ES6.
const: Declaração para constantes, valor não pode ser reatribuído.
Ambas let e const previnem elevações (hoisting) inesperadas.
Use const por padrão, let quando necessário e evite var.

Truthy e falsy
Em JavaScript, truthy e falsy determinam se um valor é considerado verdadeiro ou falso em contextos
booleanos.
Falsy valores incluem: false, 0, "" (string vazia), null, undefined, e NaN.
Todos os outros valores são truthy.
Isso é útil em condicionais, como if statements.
Exemplo: if (nome) {...} executará o código dentro do bloco se nome for truthy.

Conversão de tipos
JavaScript faz conversões automáticas entre tipos.
String para número: Number("5") resulta em 5.
Número para string: String(5) resulta em "5".
Booleano de outros tipos: Boolean(0) é false, Boolean(123) é true.
Uso de == pode resultar em conversão; === não.
Em JavaScript, você pode comparar valores usando o operador de igualdade == ou o operador de
igualdade estrita ===.
Quando você usa ==, o JavaScript tenta converter os operandos para o mesmo tipo antes de fazer a
comparação. Isso pode resultar em resultados inesperados em algumas situações.

console.log(5 == "5");
// true, porque o JavaScript converte a string "5" para o número 5 antes de fazer a comparação

console.log(Por outro lado, quando você usa ===, o JavaScript não faz nenhuma conversão de tipo. Ele
simplesmente compara os valores e os tipos dos operandos. Por exemplo:
console.log(5 === "5");
// false, porque o tipo do primeiro operando (número) é diferente do tipo do segundo operando (string)

Conversão de tipos
Portanto, a principal diferença entre == e === é que == permite a coerção de tipos antes da
comparação, enquanto === não permite. Em geral, é uma prática recomendada usar === para
comparações estritas, pois isso evita resultados inesperados devido à coerção de tipos.

OPERADORES ARITMÉTICOS

• / : Operador de divisão
• * : Operador de divisão
• + : Operador de multiplicação
• - : Operador de subtração
• ++ : Operador de incremento
• – : Operador de decremento
• % : Operador de módulo
(calcula o resto de uma divisão)

• Os operadores aritméticos são muito utilizados na linguagem JavaScript

• Estes operadores facilitam o aprendizado e, lembrando, eles são os operadores básicos de qualquer
linguagem de programação.

Adição +
<!DOCTYPE html>
<html>
<head>
<title>Exemplo de operador de adição</title>
</head>
<body>
<script>
let x = 5;
let y = 10;
let z = x + y;
document.write(z); // Saída: 15
</script>
</body>
</html>
Subtração -
<!DOCTYPE html>
<html>
<head>
<title>Exemplo de operador de subtração</title>
</head>
<body>
<script>
let x = 10;
let y = 5;
let z = x - y;
document.write(z); // Saída: 5
</script>
</body>
</html>

Multiplicação *
<!DOCTYPE html>
<html>
<head>
<title>Exemplo de operador de multiplicação</title>
</head>
<body>
<script>
let x = 5;
let y = 10;
let z = x * y;
document.write(z); // Saída: 50
</script>
</body>
</html>

Divisão /
<!DOCTYPE html>
<html>
<head>
<title>Exemplo de operador de divisão</title>
</head>
<body>
<script>
let x = 10;
let y = 2;
let z = x / y;
document.write(z); // Saída: 5
</script>
</body>
</html>

Incremento ++
<!DOCTYPE html>
<html>
<head>
<title>Exemplo de operador de incremento</title>
</head>
<body>
<script>
let x = 5;
x++; // Incrementa o valor de x em 1
document.write(x); // Saída: 6
</script>
</body>
</html>

Decremento --
<!DOCTYPE html>
<html>
<head>
<title>Exemplo de operador de decremento</title>
</head>
<body>
<script>
let x = 5;
x--; // Decrementa o valor de x em 1
document.write(x); // Saída: 4
</script>
</body>
</html>

Resto da divisão %
<!DOCTYPE html>
<html>
<head>
<title>Exemplo de operador de módulo</title>
</head>
<body>
<script>
let x = 10;
let y = 3;
let z = x % y; // Obtém o resto da divisão de x por y
document.write(z); // Saída: 1
</script>
</body>
</html>

OPERADORES DE ATRIBUIÇÃO
• Operador de atribuição básico é o igual, “=”
• Isso não significa que, ao utilizar alguma atribuição, o valor dele retorna igual, mas, sim, que atribui o
valor que está à direita let nome = 'Joaquim’;
O valor “Joaquim” é atribuído à variável nome

● a = b é atribuído o valor de b em a
● a += b é atribuído o valor de a+b em a
● a -= b é atribuído o valor de a-b em a
● a *= b é atribuído o valor de a*b em a
● a /= b é atribuído o valor de a/b em a
● a %= b é atribuído o valor do resto da divisão de a por b em a
● a **= b é atribuído o valor da exponencial de ab em a

OPERADORES DE COMPARAÇÃO
Os operadores de comparação, que são utilizados para as estruturas condicionais
 ● Igual (==): verifica se dois valores são iguais, realizando coerção de tipo, se necessário
● Estritamente igual (===): verifica se dois valores são iguais, sem realizar coerção de tipo. Isto é,
verifica se ambos têm o mesmo valor e o mesmo tipo
<!DOCTYPE html>
<html>
<head>
<title>Exemplo de uso de operadores de comparação</title>
</head>
<body>
<script>
let x = 10;
let y = 5;
document.write(x == y); // false
document.write("<br>");
document.write(x === "10"); // false
document.write("<br>");
</script>
</body>
</html>

● • Diferente (!=): verifica se dois valores são diferentes, realizando coerção de tipo, se necessário
● • Estritamente diferente (!==): verifica se dois valores são diferentes, sem realizar coerção de tipo
<!DOCTYPE html>
<html>
<head>
<title>Exemplo de uso de operadores de comparação</title>
</head>
<body>
<script>
let x = 10;
let y = 5;
document.write(x != y); // true
document.write("<br>");
document.write(x !== "10"); // true
</script>
</body>
</html>

● • Maior que (>): verifica se um valor é maior que outro

● • Maior ou igual (>=): verifica se um valor é maior ou igual a outro
<!DOCTYPE html>
<html>
<head>
<title>Exemplo de uso de operadores de comparação</title>
</head>
<body>
<script>
let x = 10;
let y = 5;
document.write(x > y); // true
document.write("<br>");
document.write(x >= 10); // true
</script>
</body>
</html>
 ● Menor que (<): verifica se um valor é menor que outro.
● Menor ou igual (<=): verifica se um valor é menor ou igual a outro.
<!DOCTYPE html>
<html>
<head>
<title>Exemplo de uso de operadores de comparação</title>
</head>
<body>
<script>
let x = 10;
let y = 5;
document.write(x < y); // false
document.write("<br>");
document.write(x <= 10); // true
</script>
</body>
</html>

OPERADORES LÓGICOS
● Em JavaScript, existem três operadores lógicos principais:
● • && (e), || (ou) e ! (não)
● && (e): retorna true (VERDADE) se ambos os operandos forem VERDADEIROS
● Se um dos operandos for false (FALSO), o resultado será FALSO
<!DOCTYPE html>
<html>
<head>
<title>Exemplo de uso de operadores lógicos</title>
</head>
<body>
<script>
let x = 10;
let y = 5;
document.write(x > y && x < 20); // true
</script>
</body>
</html>

● || (ou): retorna true (VERDADE) se pelo menos um dos operandos for VERDADEIRO
● Se ambos os operandos forem false (FALSO), o resultado será FALSO
<!DOCTYPE html>
<html>
<head>
<title>Exemplo de uso de operadores lógicos</title>
</head>
<body>
<script>
let x = 10;
let y = 5;
document.write(x < y || y < 0); // false
</script>
</body>
</html>

OPERADORES LÓGICOS
 ● ! (não): inverte o valor do operando. Se o operando for true (VERDADE), o resultado será false
(FALSO)
● Se o operando for false (FALSO), o resultado será true (VERDADE)
<!DOCTYPE html>
<html>
<head>
<title>Exemplo de uso de operadores lógicos</title>
</head>
<body>
<script>
let x = 10;
let y = 5;
document.write(!(x > y)); // false
</script>
</body>
</html>

Operadores
Operadores no JavaScript são símbolos especiais ou palavras-chave que realizam operações em um, dois
ou até três valores (operandos) e retornam um resultado.
Essas operações podem ser aritméticas, de comparação, lógicas, dentre outras.
Eles são fundamentais para a construção de lógicas e algoritmos em programação,
permitindo que desenvolvedores executem tarefas como cálculos matemáticos, comparações entre
valores ou condições, e formatação de strings.

Operadores de Comparação
Permitem comparar dois valores e determinar a relação entre eles, como igualdade, desigualdade, maior
que, menor que, entre outros.
Esses operadores são importantes para a tomada de decisões no código, como em estruturas
condicionais (if...else).
Por exemplo, if (idade>= 18) verifica se a variável idade é maior ou igual a 18.

Operador Ternário
É uma forma concisa de realizar uma operação condicional. Ele é composto por três partes: uma
condição, um resultado se a condição for verdadeira, e um resultado se for falsa, seguindo o formato
condição ? expressão1 : expressão2. É útil para atribuições condicionais simples. Por exemplo, let status
= idade >= 18 ? 'adulto' : 'menor'; atribui 'adulto' à variável status se a idade for maior ou igual a 18, e
'menor' caso contrário.

Template Literals
São strings que permitem expressões embutidas. Delimitados por acentos graves (` `), eles podem conter
placeholders indicados por ${expressão} para inserção de variáveis ou expressões dentro da
string. Isso simplifica a concatenação de strings e a inserção de variáveis, tornando o código mais legível.
Por exemplo, const saudacao = `Olá, ${nome}!`; cria uma saudação personalizada.

Exemplo
Um exemplo que une esses conceitos poderia ser uma função que emite uma mensagem personalizada
com base na idade:
let nome = “Vinicius”;
let idade = 30;
let mensagem = idade >= 18 ? `Olá, ${nome}. Você é um
adulto.` : `Olá, ${nome}. Você é menor de idade.`;
console.log(mensagem);
Qual será o resultado do seguinte código JavaScript?
let idade = 18; console.log(idade >= 18 ? "Adulto" : "Menor");
R: "Adulto"

Sintaxe das Funções

• Uma função JavaScript é definida com a palavra-chave function, seguida por um nome , seguido
por parênteses () .
• Os nomes das funções podem conter letras, dígitos, sublinhados e cifrões (mesmas regras das
variáveis).
• Os parênteses podem incluir nomes de parâmetros separados por vírgulas: ( parâmetro1,
parâmetro2, ... )
• O código a ser executado, pela função, é colocado entre chaves: {}

Funções

Sintaxe das Funções

● Os parâmetros da função são listados entre parênteses () na definição da função.
● Argumentos de função são os valores recebidos pela função quando ela é invocada.
● Dentro da função, os argumentos (os parâmetros) comportam-se como variáveis locais.

Chamar uma Função

O código dentro da função será executado quando “algo” invocar (chamar) a função:
● Quando ocorre um evento (quando um usuário clica em um botão)
● Quando é invocado (chamado) a partir do código JavaScript
● Automaticamente (auto-invocado)

Retorno de uma Função

● Quando o JavaScript atinge uma instrução de return, a função irá parar de ser executada.
● Se a função foi invocada a partir de uma instrução, o JavaScript “retornará” para executar o código
após a instrução invocada.
● As funções geralmente calculam um valor de retorno. O valor de retorno é "devolvido" ao
"chamador":

Exemplo
● Calcule o produto de dois números e retorne o resultado:
O operador
● O operador () invoca (chama) a função:
● Exemplo - Convertendo Fahrenheit em Celsius:

● Acessar uma função com parâmetros incorretos pode retornar uma resposta incorreta:

● Acessar uma função sem () retorna a função e não o resultado da função:

Funções em JavaScript
São blocos de código designados para realizar uma tarefa específica e podem ser chamadas sempre que
necessário, evitando repetições e promovendo reutilização de código. Uma função é declarada usando a
palavra-chave function, seguida de um nome, parênteses para parâmetros e chaves que delimitam o
corpo da função.

Parâmetros e Argumentos
Dentro dos parênteses na declaração da função, podemos definir parâmetros, que são variáveis usadas
para receber valores (argumentos) quando a função é chamada. Os argumentos são os dados reais
passados para a função, permitindo que a mesma execute operações com diferentes valores.
Funções usadas como valores de variáveis
• As funções podem ser usadas da mesma forma que você usa variáveis, em todos os tipos de
fórmulas, atribuições e cálculos.
• Em vez de usar uma variável para armazenar o valor de retorno de uma função:
let x = Celsius(77);
let texto = "A temperatura é " + x + " Celsius";

• Você pode usar a função diretamente, como um valor variável:

let texto = "A temperatura é " + Celsius(77) + "
Celsius";

Exemplo
Exercício de fixação
Execute a função chamada myFunção.
function minhaFunção() {
alert("Olá mundo!");
}
minhaFunção();

Expressão de Função
Se refere à prática de atribuir uma função anonimamente a uma variável.
Diferente de uma declaração de função tradicional, a expressão de função não é içada (hoisted), o que
significa que ela não pode ser chamada antes de sua definição no código.
Isso oferece mais flexibilidade em como as funções são usadas e organizadas.

Funções
Função Tradicional: A sintaxe de uma função tradicional é definida com a palavra-chave function,
seguida pelo nome da função (opcional), lista de parâmetros entre parênteses e o corpo da função
entre chaves {}.

function soma(a, b) {
return a + b;
}

Arrow Function
Introduzida no ES6, é uma forma concisa de escrever funções em JavaScript.
Utiliza este símbolo para separar os parâmetros da função do seu corpo.
As Arrow Functions são especialmente úteis para funções anônimas e callbacks, oferecendo uma sintaxe
mais limpa e uma semântica diferenciada para o this.
Arrow Function: A sintaxe de uma arrow function é mais concisa. Ela usa uma seta => após a lista de
parâmetros e não requer a palavra-chave function nem chaves {} se a função tiver apenas uma
instrução de retorno. Se houver mais de uma instrução, as chaves {} são necessárias.
const soma = (a, b) => a + b;

This
Função arrow: Em uma função arrow, o valor de this é capturado a partir do contexto léxico. Isso significa
que this em uma função arrow é determinada pela função que envolve a arrow function e não pode ser
alterada pelo método bind(), call() ou apply().

A principal diferença entre uma função tradicional e uma arrow function em JavaScript está na sintaxe e
no comportamento de this.

Em JavaScript, this é uma palavra-chave especial que é usada em métodos para referenciar o objeto
no qual o método é chamado. O valor de this é determinado pelo contexto de execução de uma
função e pode variar dependendo de como a função é invocada.

Método de um objeto: Quando uma função é chamada como um método de um objeto, o valor de
this dentro da função refere-se ao próprio objeto.

This
const pessoa = {
nome: "João",
saudacao: function() {
console.log("Olá, " + this.nome);
}
};
pessoa.saudacao(); // Saída: "Olá, João"
Função normal: Se uma função é chamada como uma função normal (não como um método de um
objeto), o valor de this depende do modo estrito (strict mode) e do contexto de execução.

function saudacao() {
console.log("Olá, " + this.nome);
}
const obj1 = { nome: "Maria" };
const obj2 = { nome: "Pedro" };
saudacao(); // Saída depende do modo estrito e do contexto de execução
obj1.saudacao = saudacao;
obj1.saudacao(); // Saída: "Olá, Maria"
obj2.saudacao = saudacao;
obj2.saudacao(); // Saída: "Olá, Pedro"

Comportamento de this:
Função Tradicional: Em uma função tradicional, o valor de this é determinado no momento em que a
função é chamada. Isso pode variar dependendo do contexto de execução e de como a função é
invocada. O valor de this pode ser afetado pelo método bind(), call(), apply(), ou quando a função é
chamada como um método de um objeto.
const obj = {
nome: "João",
saudacao: function() {
console.log("Olá, " + this.nome);
}
};
obj.saudacao(); // Saída: "Olá, João"

Comportamento de this:
Arrow Function: Em uma arrow function, o valor de this é definido quando a função é definida e não pode
ser alterada. O valor de this em uma arrow function é herdado do contexto léxico (o contexto no qual a
função é definida) e não é afetado por como a função é chamada.
Comportamento de this:
const obj = {
nome: "João",
saudacao: () => {
console.log("Olá, " + this.nome); // 'this' não se
refere ao 'obj'
}
};
obj.saudacao(); // Saída: "Olá, undefined"

Qual é a principal diferença entre uma função tradicional e uma arrow function em JavaScript?
R: Arrow functions não têm seu próprio this