0% acharam este documento útil (0 voto)

13 visualizações

Resumo JavaScript

JavaScript é uma linguagem orientada a objetos usada para implementar o comportamento das páginas web, com tipos primitivos como strings, números e booleanos. O documento aborda variáveis, funções, manipulação de strings, arrays, e a interação com HTML através de métodos como getElementById. Além disso, apresenta conceitos como hoisting, JSON e a diferença entre funções anônimas e arrow functions.

Enviado por

violetshining2507

Direitos autorais

Levamos muito a sério os direitos de conteúdo. Se você suspeita que este conteúdo é seu, reivindique-o aqui.

Formatos disponíveis

Baixe no formato PDF, TXT ou leia on-line no Scribd

0% acharam este documento útil (0 voto)

13 visualizações

Resumo JavaScript

Enviado por

violetshining2507

Direitos autorais

Levamos muito a sério os direitos de conteúdo. Se você suspeita que este conteúdo é seu, reivindique-o aqui.

Formatos disponíveis

Baixe no formato PDF, TXT ou leia on-line no Scribd

Você está na página 1/ 11

Resumo JavaScript

O foco do JavaScript é implementar o comportamento ou a inteligência das páginas web. O

nome foi uma jogada de marketing, já que a linguagem Java estava em alta na época.

JavaScript é uma linguagem orientada a objetos. Existem 5 tipos primitivos: strings, number,
boolean, null e undefined. Os três primeiros conseguem ser representados em forma de objeto
(associações de chave, valor).

let nome = "GZ"; JS é uma linguagem Case Sensitive

nome.toUpperCase(); (diferencia maiúsculas de minúsculas).

Criamos uma variável com valor primitivo JS é uma linguagem rápida, já que não é
(string). Quando usamos o método, o JS compilada e sim interpretada. O código é
cria temporariamente um objeto String interpretado pelo motor embutido já nos
para executar o método e depois navegadores, roda no monitor/dispositivo
descarta. (autoboxing) do cliente.

Pro que interessa:

Duas formas de associar código JS e documentos HTML:

JavaScript interno: Código deﬁnido dentro do documento HTML no corpo do elemento script.
JavaScript externo: Código deﬁnido em arquivos separados e depois associados aos
documentos HTML através do elemento script.

O JS pode ser aplicado no head (quando o código não depende de elementos HTML que ainda
vão ser carregados, tem funções que serão chamadas depois a partir de eventos. Quando o
usuário clicar em algo, por exemplo) e body (quando o código precisa interagir com elementos
HTML logo que a página carrega). Body é mais recomendado, as páginas são exibidas mais
rapidamente aos usuários.

<head>... <body>...
<script> <p id=”texto”>Opaa</p>
function dizerEaifi() {
alert(“Eaí fi, tá bão?”); <script>
} Document.getElementById(“texto”).textContent = “Bom dia”;
</script> </script>
</head> </body>

A função não se executa sozinha, tem O JS muda o texto para “Bom dia” assim que a página
que chamar, então pode ser no head. carregar, só funciona porque o script tá depois do body.

Concatenação: juntar ou unir valores, normalmente strings.

var s1 = “Carlos”;
var s2 = “ ”;
var s3 = “Bigones”;
var s4 = s1 + s2 + s3; // Resultado: “Carlos Bigones”

console.log(1 + 2 + 3 + " testando"); console.log("testando " + 1 + 2 + 3);

//6 testando //testando 123

Primeiro faz as somas, quando Quando começa com string, tudo

encontra string, tudo vira string. depois é concatenado como texto.
O que códigos “básicos” fazem?

Formas de declarar variáveis:

var sobrenome = "Damascena";
Usando var, a variável existe em toda a função, mesmo fora do bloco, pode mudar de valor.

let idade = 15;

Usando let, a variável fica restrita ao bloco (escopo) onde foi criada, pode mudar de valor.

const pi = 3.14;
Variável fixa, não muda de valor.

alert(“WooW”);
Exibe uma caixa de alerta na tela, interrompe a navegação do usuário até clicar em “OK”, sem HTML, só texto.

console.log("Bom dia pra qm tá lendo isso");

Usado pra mostrar dados no console, verifica se o código tá funcionando, não aprece na página (F12 -> Console).

console.log("typeof idade");
Mostra no console, o tipo da variável idade.

Formas de mudar o tipo das variáveis:

var idadeNum = parseInt(idadeStr);
A variável idadeNum é inicializada com o valor de IdadeStr, não mais em string, e sim em Int.

var precoNum = parseFloat(precoStr);

A variável precoNum é inicializada com o valor de precoStr, não mais em string, e sim em Float.

console.log(typeof valor.toString());
A variável valor é do tipo numérico, mas é apresentada como String nesse caso.

Declarando um array:
var alunos = [‘Rafael’, ‘Lucas’, ‘Hipocreme’]; //array é do tipo object

console.log(alunos.toString()); //Rafael,Lucas,Hipocreme
Não altera o array original, só mostra uma versão em string dele.

Os famosos Laços de Repetição:

var situacao = media < 6 ? "reprovado" : "aprovado";

Estrutura: condição ? valor_se_verdadeiro : valor_se_falso

Manipulando strings:
console.log('Meu nome é ' + nome + " " + sobrenome + ' e eu sou daora'); //pode ser ‘apóstrofo’ ou “aspas”
console.log(`Meu nome é ${nome} ${sobrenome} e eu sou daora`); //mostra os valores de variáveis, mas tem que ser
entre crases (``)
console.log(“Me chamam de \”Zaurizio\” as vezes”); //precisa de / antes de ‘ ou “ pra ser string

var texto = "Mergulhando em tecnologia.";

console.log(texto.substr(0, 11)); // Mergulhando
Estrutura: substr(início, comprimento), início: posição (índice) de onde começa a extração, comprimento:
quantos caracteres extrai a partir desse ponto.

texto = 'Unicamp';
console.log("Tamanho:" + texto.length); //retorna 7
console.log(texto.toUpperCase()); //mostra tudo maiúsculo: UNICAMP
console.log(texto.toLowerCase()); //mostra tudo minúsculo: unicamp
console.log(texto.charAt(3)); //retorna o caracter dessa posição: “c”

texto = "14/02/2025";
var aux = texto.split("/"); // ["14", "02", "2025"]
split("/") quebra a string onde encontrar o caractere “/”, cria um array (aux) com os elementos separados:
["14", "02", "2025"]

texto = "COTIL-UNICAMP-LIMEIRA";
console.log(texto.indexOf('LIMEIRA')); //retorna 15 (posição que está LIMEIRA)
console.log(texto.indexOf('@')); //retorna -1 porque não tem “@” na string

texto = 'Simone';
console.log(nomeTeste.startsWith('Si')); //true
console.log(nomeTeste.endsWith('ni')); //false

var nome = “Lunático”;

var recado = “Triste a notícia, aluno acabou de aparecer na aula”;
console.log(recado.replace(“aluno”, nome)); //substitui “aluno” por “Lunático”

nome = “dark zin”;

console.log(nome.trim()); //tira espaços, retorna “darkzin”

Hoisting: É um comportamento do JavaScript onde algumas declarações são movidas automaticamente para o
topo do escopo antes do código ser executado, o valor não é movido. Só funciona com var; let e const dão erro.

console.log(nome); //undefined
var nome = "GZ";

Mas o JS reorganiza assim:

var nome; //é movida pro topo
console.log(nome); //undefined
var nome = "Rodrigo";
Como funciona o document.getElementById();
function mudarCor() {
document.getElementById("titulo").style.color = "purple";
document.getElementById("titulo").style.backgroundColor = "lightgray";
}

<input type=”button” value=”Mude a cor!” onclick=”mudarCor();”>

A função é chamada quando clica no botão, executa os getElementById, que localizam o

texto pelo id “titulo” e mudam a cor do texto e de fundo.

------------------------------------------------------------------------------------------------------------------------------------------

function somar() {
var valor1 = document.getElementById("valor1").value;
var valor2 = document.getElementById("valor2").value;

if ( (valor1 ==””) || (valor2 == “”) ) {

document.getElementById(“msgErro”).innerHTML = “<br>Informe os dois valores!<br>”;
}
else {
var soma = parseFloat(valor1) + parseFloat(valor2);
document.getElementById(“resultado”).value = soma;
}
}

<body>
Valor 1:<br>
<input type=”text” id=”valor1”>
<br><br>

Valor 2:<br>
<input type=”text” id=”valor2”>
<br><br>

Resultado:<br>
<input type=”text” id=”resultado”>

A função pega o valor dentro dos forms e coloca em variáveis (string), verifica se os forms
estão preenchidos ao apertar o botão. Se não estão preenchidos, o span, que antes era
invisível ao usuário, agora mostra mensagem de erro. Se estão preenchidos, transforma os
valores em float e soma eles, exibindo o resultado no form.
JSON: JavaScript Object Notation. Transforma um objeto em texto.
Var alunoObj = {
ra: 204217,
nome: ‘Gustavo’
};

var alunoStr = JSON.stringify(alunoObj); //converte objeto em texto, vai ficar: {"ra":12345,"nome":"Simone"}

var novoAlunoObj = JSON.parse(alunoStr); //converte JSON (texto) em objeto de novo
console.log(novoAlunoObj.ra);
console.log(novoAlunoObj.nome);

Tipos Literais (primitivos):

var litBoo = true;
var litStr = 'JavaScript Básico';
var litNum = 10;

São os tipos primitivos: boolean, string e number. São valores puros, simples.

Tipos em forma de Objeto: (quase nunca é usado)

var objBoo = new Boolean(true);
var objStr = new String('JavaScript Básico');
var objNum = new Number(10);

Usamos new para criar objetos. Esses são objetos especiais que encapsulam um valor primitivo.
-----------------------------
console.log(objBoo.valueOf()); // true
console.log(objStr.valueOf()); // "JavaScript Básico"
console.log(objNum.valueOf()); // 10

valueOf() devolve o valor primitivo que está dentro do objeto. O valueOf() só funciona com
esse tipo especial de objeto, já que pega só um valor do tipo primitivo.

Noscript: A tag <noscript> é usada para mostrar um conteúdo alternativo quando o JavaScript estiver
desativado ou não suportado no navegador.

Esse texto só aparece se o JavaScript não estiver funcionando.

Funções:

Exemplo Simples: Com parâmetros: Com retorno:

if (media < 6) { function somar(valor1, valor2) {

alert("Média = " + media + " - Reprovado"); if (arguments.length !== 2) {
} throw new Error('Esta função precisa de dois valo-
else { res para funcionar');
alert("Média = " + media + " - Aprovado"); }
}
} return valor1 + valor2;
}
var n1 = parseFloat(prompt("Nota 1"));
var n2 = parseFloat(prompt("Nota 2"));
calcularMedia(n1,n2); //chama a função

Obs. prompt() abre uma caixinha no nave-

gador pedindo pro usuário digitar algo.

Analisando Arguments: Arguments guarda todos os valores que foram

passados para a função, mesmo que você não tenha declarado parâmetros
(ele é tipo um array).

function somar() {
console.log('Quantidade de argumentos recebidos: ' + arguments.length);

return arguments[0] + arguments[1] + arguments[2]; //10 + 5 + 1

}

var resultado = somar(10,5,1);

console.log(resultado); //16

arguments.lenght tem todos os número que foram passados por parâmetro, a

função soma os valores armazenados em cada posição. Está em desuso hoje
em dia, usamos rest parameters no lugar dele.
Função Anônima: é uma função sem nome. São usadas como argumentos para outras funções ou se
quiser executar imediatamente depois da declaração.

const calcularMedia = function(nota1, nota2) {

return (nota1 + nota2) / 2;

};

var n1 = parseFloat(prompt("Nota 1")); //pra conseguir n1

var n2 = parseFloat(prompt("Nota 2")); //pra conseguir n2

const media = calcularMedia(n1, n2);

console.log("Média (função anônima):", media);

if (media < 6) {
alert("Reprovado");
} else {
alert("Aprovado");
}

A função não tem nome mas é guardada dentro da variável calcularMedia. Pede as duas notas com
prompt() e converte para número com parseFloat(). Calcula a média chamando a função.

Arrow Function (função de seta): é uma forma mais

moderna e enxuta de declarar funções em JavaScript.

function clicar() {

}
alert("Clicou!");
= const clicar = () => {

};
alert("Clicou!");

Obs. Apareceram nos códigos:

document.getElementById("resultado").textContent = "Aprovado!";
document.getElementById("resultado").style.fontWeight = "bold";

Criando objeto com atributos e método: Aplicando método a um objeto:

Estrutura: função.apply(objeto, [parâmetro]);

Arrays:
Criando array
var a = new Array(10);

a[0] = "xyz";
a[1] = true;
a[2] = 1.500;
a[3] = "simone";
console.log(a); //mostra o array todo

for(var i = 0; i < 10; i++) {

console.log(" * " + a[i]);
} //mostra cada item separado

var nomes = ['Felipe']; //Criado o array nomes

console.log(nomes); //mostra o array todo
console.log(nomes.length); //mostra quantos itens tem o array

Adicionar um elemento ao final de um array - push

nomes.push('Kennedy');

Adiciona um elemento no início de um array - unshift

nomes.unshift('Ana');

Remover e retornar o último elemento de um array - pop

var removido = nomes.pop(); //coloca último item do array na variável
console.log("Elemento removido: " + removido);

Removendo e retornando o 1º elemento de em array - shift

removido = nomes.shift();//coloca primeiro item do array na variável
console.log("Elemento removido: " + removido);

Deleta apenas o valor da posição, mas a posição é mantida - delete

delete nomes[1]; //tirando
nomes[1] = "Simone"; //recolocando

splice - especifica o índice inicial e a qtd de elementos a serem removidos (incluindo o

elemento do índice inicial).
nomes.splice(1, 1);

Concatenando:
var tecnico = ["LP", "BD", "DAW"];
var medio = ["Matemática", "Português", "Biologia"];
var formacaoCompleta = medio.concat(tecnico);

Invertendo a ordem dos elementos:

formacaoCompleta.reverse();

Copiando pedaço do array de x até y (y não incluso):

var formacaoBasica = medio.slice(0, 2);
Gerando string:
var valores = ["14", "05", "2025"];
var dataFinal = valores.join("/");

sort – Organiza o array por Unicode e modifica o array original

var instrumentos = ['Guitarra', 'Baixo', 'Violão'];
instrumentos.sort();
-------------------------------

map(): é um método de array que cria um novo array baseado em transformações feitas em
cada item, não altera o array original.

const novaLista = lista.map(function(item) {

return item * 5;
});
Cada item do array lista é multiplicado por 5, o resultado vai pro novo array novaLista.

const novaLista2 = lista.map(function(item, index) {

return item + index;
});
Cada item do array lista é somado com o valor de seu índice (posição).

const carros = ['Ford', 'Fiat', 'Honda'];

const newCarros = carros.map((item) => {
return 'Carro ' + item; // ['Carro Ford', 'Carro Fiat', 'Carro Honda']
});
Cada item do array carros agora tem “Carro” antes da marca ().
-------------------------------

Reduce(): serve para "reduzir" um array a um único valor, somando, multiplicando, juntando...

Estrutura:
array.reduce((acumulador, valorAtual) => {
return acumulador + valorAtual;
}, valorInicialOpcional);

Exemplo:
const valoresProdutos = [10, 25, 30]; O reduce vai fazer:
const frete = 100;
1ª vez: acumulador = 100, atual = 10 → total = 110
const total = valoresProdutos.reduce( 2ª vez: acumulador = 110, atual = 25 → total = 135
(acumulador, atual) => acumulador + atual, 3ª vez: acumulador = 135, atual = 30 → total = 165
frete total = 165
);

Se não usar frete (sem acumulador), só soma os valores.

-------------------------------
findIndex - localiza o índice de um item na lista
let frutas = ['Banana', 'Pêra', 'Uva', 'Maçã'];

const buscaUva = frutas.findIndex(

(fruta) => {
return fruta === 'Uva';
}
);
console.log("Posição Uva:" + buscaUva); //2

includes - verifica se o valor existe no array

let nomesTeste = ['Matheus', 'Lucas', 'João'];
console.log(nomesTeste.includes('Simone')); //retorna false

find - localiza na lista o 1o item que passar no teste/verificação.

let notas = [6, 8, 10, 4.5, 7, 9.8, 2];

let temReprovado = 0;
temReprovado = notas.find(x => x < 6); //4.5
if (temReprovado > 0) {
console.log("Há aluno(s) reprovado(s) na turma!");
}

some: se pelo menos um return da iteração for verdadeiro, ele retorna true
console.log(nomesTeste.some(nome => nome === 'Lucas'));

every: verifica se todos os itens de um array ou de um obj atendem a uma condição/valor.

let notas = [6, 8, 10, 4.5, 7, 9.8, 2];
const aprovados = notas.every(x => x >= 6); //false

if (aprovados) {
console.log("Todos aprovados!");
} else {
console.log("Existem alunos sem média!");
}

filter - retorna um array com a lista de valores que durante a sua iteração retornaram um valor
verdadeiro
var precos = [1.99, 2.50, 100, 200, 5, 9, 2];

var baratos = precos.filter(x => x <= 5);

console.log(baratos);
-------------------------------

forEach(): serve para percorrer todos os itens de um array, executando uma função para cada
um deles.

carros.forEach(function(item, index, array) {

console.log(item.toUpperCase());
console.log(index);
});
Função Anônima: imprime o nome de cada um em maiúsculo e o index.
carros.forEach((item, index) => {
console.log(item.toUpperCase());
});
Arrow Function: mesma coisa.

carros.forEach((item, index, array) => {

array[index] = 'Carro ' + item;
});
Mudando o array original.
-------------------------------

Spread Operator: espalha os elementos de um array (ou objeto) dentro de outro

let v1 = [1, 2, 3];

let v2 = [4, 5, 6];

let vfinal = [...v1, ...v2];

console.log(vfinal); // [1, 2, 3, 4, 5, 6]

...v1 e ...v2 espalham os elementos dos dois arrays dentro de vfinal.

Rest Operator: função contrária, coleta vários valores em um só array

function somar(...numeros) {
return numeros.reduce((total, n) => total + n);
}

console.log(somar(1, 2, 3, 4)); // 10

...numeros junta todos os parâmetros da função em um array chamado numeros.

Datas:
Acessando partes da data:
Criando objeto com data atual:
hoje.getDay() – dia da semana (0 a 6)
var hoje = new Date();
hoje.getDate – (dia do mês)

hoje.getMonth() – mês (0 a 11)

Pegando partes da data:
hoje.getFullYear() – ano completo (2024...)
var dia = hoje.getDate(); // Dia do mês (1 a 31)
var mes = hoje.getMonth(); // Mês (0 a 11) — Janeiro = 0 hoje.getHours() – hora
var ano = hoje.getFullYear(); // Ano com 4 dígitos (ex: 2024)
hoje.getMinutes() – minutos

hoje.getSeconds() – segundos
Dia da semana por extenso:
var diaSemanaNum = hoje.getDay(); // Dia da semana (0 = Domingo)
var semana = ["Domingo", "Segunda-feira", ..., "Sábado"];
var diaSemanaTexto = semana[diaSemanaNum];
Comparando datas: dataX == dataY não funciona, tem
Criando objetos Date: que usar getTime()
var data = new Date(1994, 0, 22, 15, 23, 35); if (dataX.getTime() == dataY.getTime()) {
// Ano, Mês (0 = jan), Dia, Hora, Minuto, Segundo console.log("Datas iguais!");
}