CAMPUS
APUCARANA
FUNDAMENTOS DE TECNOLOGIAS WEB
JavaScript
Definição:
linguagem de programação utilizada no
Desenvolvimento Web
padronizado pela ECMAScript
Finalidade:
dinâmica de páginas Web
exemplos: sites, landing pages, blogs, etc
CAMPUS
APUCARANA
FUNDAMENTOS DE TECNOLOGIAS WEB
Arquivos JavaScript
arquivos com extensão .js
podem ser executados no terminal ou no navegador
Linkando um arquivo .js em um arquivo HTML
sempre adicionar a tag abaixo no fim da tag body, ou seja,
no fim do arquivo HTML
/*HTML*/
<script src="[Link]"></script>
CAMPUS
APUCARANA
FUNDAMENTOS DE TECNOLOGIAS WEB
Variáveis
consistem em caixinhas de memória para guardar valores
MEMÓRIA
valor
valor
valor
CAMPUS
APUCARANA
FUNDAMENTOS DE TECNOLOGIAS WEB
Sintaxe padrão de variáveis
nomes de variáveis:
sempre devem seguir o mesmo padrão;
sempre devem começar com minúscula;
sempre devem ser substantivos.
/*JS*/
tipo nomeVariavel = valor;
tipo nome_variavel = valor;
CAMPUS
APUCARANA
FUNDAMENTOS DE TECNOLOGIAS WEB
Tipos de variáveis em JS
let: variáveis que podem ter seu valor alterado;
const: variáveis que não podem ter seu valor alterado
Sintaxe de variáveis em JS
let nomeVariavel = valor; /*JS*/
const nomeVariavelDois = valor;
CAMPUS
APUCARANA
FUNDAMENTOS DE TECNOLOGIAS WEB
Dados primitivos
string: sequência de caracteres (texto);
/*JS*/
let primeiroTexto = "string"; // utilizando aspas duplas
let segundoTexto = 'string'; // utilizando aspas simples
let terceiroTexto = `string`; // utilizando crase
Observação:
Para inserir variáveis dentro de um texto, sempre utilize a crase para criar a string
CAMPUS
APUCARANA
FUNDAMENTOS DE TECNOLOGIAS WEB
Dados primitivos
number: números;
classificação dos números:
inteiros;
float (números decimais).
let primeiroNumero = 56; // number do tipo inteiro /*JS*/
let segundoNumero = 56.98; // number do tipo float
CAMPUS
APUCARANA
FUNDAMENTOS DE TECNOLOGIAS WEB
Dados primitivos
boolean: verdadeiro ou falso;
outras maneiras de reescrever:
verdadeiro = true;
falso = false;
/*JS*/
let booleanFalso = false;
let booleanVerdadeiro = true;
CAMPUS
APUCARANA
FUNDAMENTOS DE TECNOLOGIAS WEB
Operadores
Aritméticos
CAMPUS
APUCARANA
FUNDAMENTOS DE TECNOLOGIAS WEB
Operadores Aritméticos
Tomam valores numéricos (sejam literais ou variáveis) como seus
operandos e retornam um único valor numérico.
Padrão:
> Soma (+);
> Subtração (-);
> Multiplicação (*);
> Divisão (/);
> Resto (%).
CAMPUS
APUCARANA
FUNDAMENTOS DE TECNOLOGIAS WEB
Operadores Aritméticos
Exemplo (soma):
/*JS*/
let soma;
let numero1 = 7;
let numero2 = 3;
soma = numero1 + numero2;
[Link]("O resultado da soma é: " + soma);
CAMPUS
APUCARANA
FUNDAMENTOS DE TECNOLOGIAS WEB
Operadores Aritméticos
Exemplo (subtração):
/*JS*/
let subtracao;
let numero1 = 7;
let numero2 = 3;
subtracao = numero1 - numero2;
[Link]("O resultado da subtracao é: " + subtracao);
CAMPUS
APUCARANA
FUNDAMENTOS DE TECNOLOGIAS WEB
Operadores Aritméticos
Exemplo (multiplicação):
/*JS*/
let produto;
let numero1 = 7;
let numero2 = 3;
produto = numero1 * numero2;
[Link]("O resultado do produto é: " + produto);
CAMPUS
APUCARANA
FUNDAMENTOS DE TECNOLOGIAS WEB
Operadores Aritméticos
Exemplo (divisão):
/*JS*/
let divisao;
let dividendo = 20;
let divisor = 5;
divisao = dividendo / divisor;
[Link]("O resultado da divisão é: " + divisao);
CAMPUS
APUCARANA
FUNDAMENTOS DE TECNOLOGIAS WEB
Operadores Aritméticos
Exemplo (resto da divisão):
/*JS*/
let resto;
let numero1 = 20;
let numero2 = 3;
resto = numero1 % numero2;
[Link]("O resto da divisão é: " + resto);
CAMPUS
APUCARANA
FUNDAMENTOS DE TECNOLOGIAS WEB
Estrutura
Condicional
CAMPUS
APUCARANA
FUNDAMENTOS DE TECNOLOGIAS WEB
If Else
Executa o código, dentro do escopo, se
determinada condição for verdadeira. Se for
falsa, executa o código dentro do else.
Sintaxe:
if(condição){ /*JS*/
/*trecho de código */
}else{
/*trecho de código*/
}
CAMPUS
APUCARANA
FUNDAMENTOS DE TECNOLOGIAS WEB
If Else
Exemplo (paridade de um número):
let numero = 4; /*JS*/
if((numero % 2) == 0){
[Link]("O número é par");
}else{
[Link]("O número é ímpar");
}
CAMPUS
APUCARANA
FUNDAMENTOS DE TECNOLOGIAS WEB
Operadores de
Comparação
CAMPUS
APUCARANA
FUNDAMENTOS DE TECNOLOGIAS WEB
Operadores de Comparação
Compara seus operandos e retorna um valor lógico baseado em se a
comparação é verdadeira ou falsa (booleano).
1. Igual (==);
2. Diferente (!=);
3. Maior que (>);
4. Menor que (<);
5. Maior que ou igual (>=);
6. Menor que ou igual (<=).
CAMPUS
APUCARANA
FUNDAMENTOS DE TECNOLOGIAS WEB
Operadores de Comparação
Exemplo:
let idade = 22; /*JS*/
if(idade > 18){
[Link]("Você é maior de idade!");
}
if(idade <= 12){
[Link]("Você é criança!");
}
CAMPUS
APUCARANA
FUNDAMENTOS DE TECNOLOGIAS WEB
Operadores
Lógicos
CAMPUS
APUCARANA
FUNDAMENTOS DE TECNOLOGIAS WEB
Operadores Lógicos
Símbolos ou palavras-chave que nos permitem realizar operações
lógicas entre dois valores booleanos (verdadeiro ou falso).
AND (E) OR (OU) NOT (NÃO)
CAMPUS
APUCARANA
FUNDAMENTOS DE TECNOLOGIAS WEB
Operadores Lógicos
Operador AND (&&): para um conjunto de operandos booleanos, será
verdadeiro se e somente se todos os operandos forem verdadeiros.
Caso contrário, será falso. (conjunção lógica)
Sintaxe:
if(condição1 && condição2){ /*JS*/
/*trecho de código*/
}
CAMPUS
APUCARANA
FUNDAMENTOS DE TECNOLOGIAS WEB
Operadores Lógicos
Operador OR (||): para um conjunto de operandos booleanos, será
verdadeiro se pelo menos um dos operandos for verdadeiro. Caso os
dois sejam falsos, será falso. (disjunção lógica)
Sintaxe:
if(condição1 || condição2){ /*JS*/
/*trecho de código*/
}
CAMPUS
APUCARANA
FUNDAMENTOS DE TECNOLOGIAS WEB
Operadores Lógicos
Operador NOT (!): inverte o valor de um operando booleano. Se um
operando for verdadeiro, o operador NOT o tornará falso e vice-versa.
(negação lógica)
Exemplo:
let valor = false; /*JS*/
[Link](!valor);
CAMPUS
APUCARANA
FUNDAMENTOS DE TECNOLOGIAS WEB
Number &
Array
CAMPUS
APUCARANA
FUNDAMENTOS DE TECNOLOGIAS WEB
Number
Number( ) - contém constantes e métodos para trabalhar com números.
Valores de outros tipos podem ser convertidos em números usando a função
Number().
Exemplo:
/*JS*/
let valor = "10"; //string
[Link](Number(valor)); //10
CAMPUS
APUCARANA
FUNDAMENTOS DE TECNOLOGIAS WEB
Array (vetor)
Tipo de dado que pode armazenar vários valores em uma única variável.
Os elementos de um array podem ser de qualquer tipo de dado, como
números, strings, objetos, ou até mesmo outros arrays, tornando-os
extremamente flexíveis e poderosos.
Sintaxe:
let array = [valor1, valor2, valor3]; /*JS*/
CAMPUS
APUCARANA
FUNDAMENTOS DE TECNOLOGIAS WEB
Array (vetor)
Exemplo:
let vetor = [1, 2, 3]; /*JS*/
//imprime no console cada elemento do vetor
[Link](vetor[0]); //índice do primeiro elemento é 0
[Link](vetor[1]);
[Link](vetor[2]);
Obs: cada posição no vetor possui um índice (endereçamento), o índice da primeira posição sempre é 0.
CAMPUS
APUCARANA
FUNDAMENTOS DE TECNOLOGIAS WEB
Estruturas de
Repetição
CAMPUS
APUCARANA
FUNDAMENTOS DE TECNOLOGIAS WEB
For
Estrutura de controle que permite iterar sobre uma sequência de
elementos, como um array, uma string, ou qualquer objeto que seja
iterável. Ele é muito útil para executar repetidamente um bloco de código
enquanto uma condição específica for verdadeira.
Sintaxe:
for(inicialização; condição; expressão final){ /*JS*/
/*bloco de código*/
}
CAMPUS
APUCARANA
FUNDAMENTOS DE TECNOLOGIAS WEB
For
Exemplo:
inicialização
condição
expressão final
for(let i = 0; i < 10; i++){ /*JS*/
[Link](i);
}
CAMPUS
APUCARANA
FUNDAMENTOS DE TECNOLOGIAS WEB
While
Estrutura de controle de fluxo que permite executar um bloco de código
repetidamente enquanto uma condição específica for verdadeira.
Sintaxe:
while(condição){ /*JS*/
/*bloco de código*/
}
CAMPUS
APUCARANA
FUNDAMENTOS DE TECNOLOGIAS WEB
While
Exemplo:
let contador = 5; /*JS*/
while(contador > 0){
[Link](contador);
contador = contador - 1; //contador--;
}
CAMPUS
APUCARANA
FUNDAMENTOS DE TECNOLOGIAS WEB
Função
CAMPUS
APUCARANA
FUNDAMENTOS DE TECNOLOGIAS WEB
Function
É um bloco de código que executa uma tarefa específica quando é
chamado ou invocado;
As funções em JavaScript são usadas para organizar e reutilizar o
código, facilitando a execução de tarefas complexas e manutenção.
Sintaxe:
function name_function(parâmetro){ /*JS*/
/*bloco de código*/
}
CAMPUS
APUCARANA
FUNDAMENTOS DE TECNOLOGIAS WEB
Function
Declaração:
palavra chave nome da função
function name_function(parâmetro){ /*JS*/
/*bloco de código*/
}
argumentos
(pode ser mais de um)
CAMPUS
APUCARANA
FUNDAMENTOS DE TECNOLOGIAS WEB
Function
Exemplo:
function soma(numero1, numero2){ /*JS*/
let soma;
soma = numero1 + numero2;
return soma;
}
retorno da função
CAMPUS
APUCARANA
FUNDAMENTOS DE TECNOLOGIAS WEB
Objeto Math
CAMPUS
APUCARANA
FUNDAMENTOS DE TECNOLOGIAS WEB
Objeto Math
Este objeto é utilizado para realizar operações matemáticas, sejam
elas aritméticas, funções trigonométricas, funções de arredondamento
e comparações.
Sintaxe:
Math.método(valor); /*JS*/
[Link] - retorna um número pseudo-aleatório entre 0 e 1;
[Link] - retorna o maior inteiro que é menor ou igual a um número.
CAMPUS
APUCARANA
FUNDAMENTOS DE TECNOLOGIAS WEB
Objeto Math
[Link]( ) - retorna um número pseudo-aleatório entre 0 e 1.
Exemplo:
let max = 10; /*JS*/
let numeroAleatorio;
numeroAleatorio = [Link]() * max;
[Link](numeroAleatorio);
CAMPUS
APUCARANA
FUNDAMENTOS DE TECNOLOGIAS WEB
Objeto Math
[Link]( ) - retorna o maior inteiro que é menor ou igual a um número.
Exemplo:
let numero = 13.25; /*JS*/
let numeroInt;
numeroInt = [Link](numero);
[Link](numeroInt); //13
CAMPUS
APUCARANA
FUNDAMENTOS DE TECNOLOGIAS WEB
Objeto Date
CAMPUS
APUCARANA
FUNDAMENTOS DE TECNOLOGIAS WEB
Objeto Date
consiste em uma estrutura que possui funções prontas que podem ser
utilizadas para manipular o tempo
ex de aplicações: temporizador, cronômetro, relógio, etc
o tempo no objeto Date é incrementado em milissegundos
const dataAtual = new Date(); //cria data atual /*JS*/
const marcoZero = new Date(0); //cria data utilizada como referência
CAMPUS
APUCARANA
FUNDAMENTOS DE TECNOLOGIAS WEB
Objeto Date
existem métodos do objeto Date que podem ser utilizados para obter os
elementos da data
/*JS*/
const diaAtual = [Link](); //obtém dia atual
const mesAtual = [Link](); //obtém mês atual
const anoAtual = [Link](); //obtém ano atual
const horaAtual = [Link](); //obtém hora atual
CAMPUS
APUCARANA
FUNDAMENTOS DE TECNOLOGIAS WEB
Funções para
controle de tempo
CAMPUS
APUCARANA
FUNDAMENTOS DE TECNOLOGIAS WEB
SetInterval
consiste em uma função que executa uma determinada ação em
determinado intervalo de tempo.
/*JS*/
const intervalo = setInterval(function () {
// bloco de código que executa a ação desejada
}, intervalo);
Observação:
É uma boa prática guardar a função setInterval dentro de uma variável.
CAMPUS
APUCARANA
FUNDAMENTOS DE TECNOLOGIAS WEB
SetTimeOut
consiste em uma função que executa uma ação apenas uma vez.
setTimeout(function () {
/*JS*/
// bloco de código que executa a ação desejada
}, tempo);
Observação:
Todas as funções que envolvem tempo apenas trabalham com milissegundos.
CAMPUS
APUCARANA
FUNDAMENTOS DE TECNOLOGIAS WEB
ClearInterval
consiste em uma função que interrompe um intervalo em execução;
geralmente é utilizada com o setTimeOut para “limpar” um intervalo após
determinado tempo de execução.
/*JS*/
clearInterval(intervalo);
Observação:
O parâmetro da função clearInterval consiste na variável que armazena o setInterval.
CAMPUS
APUCARANA
FUNDAMENTOS DE TECNOLOGIAS WEB
DOM
CAMPUS
APUCARANA
FUNDAMENTOS DE TECNOLOGIAS WEB
Document Object Model (DOM)
o código HTML pertence a
um documento que pode ser
manipulado por outras
ferramentas, tal como
JavaScript.
CAMPUS
APUCARANA
FUNDAMENTOS DE TECNOLOGIAS WEB
Métodos do DOM para manipular elementos
[Link]() - utilizado para capturar qualquer tipo de
elemento HTML, seja por meio do nome da tag, classe, id, etc;
[Link]() - utilizado apenas para capturar elementos
HTML por meio de seu Id;
[Link]() - serve para selecionar um
elemento HTML por meio de sua classe;
[Link]() - permite criar elementos dentro do arquivo
HTML. Para tanto, recebe o nome da tag do elemento como parâmetro.
CAMPUS
APUCARANA
FUNDAMENTOS DE TECNOLOGIAS WEB
AddEventListener
consiste em um método que permite identificar um evento no documento
HTML;
geralmente é utilizado para identificar clicks do usuário, principalmente em
botões.
[Link]('click', function(evento){ /*JS*/
//impede que a página seja atualizada
[Link]();
}