Scribd
Carregar
7 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
© © All Rights Reserved
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
7 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
© © All Rights Reserved
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 definido dentro do documento HTML no corpo do elemento script.
JavaScript externo: Código definido 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 idade = 16; var cont = 0; switch(pedido) {
do { case 1:
while (cont < 5) {
alert("Você pediu sorvete");
console.log(‘idade:’ + idade); alert(“Bom dia senhores: ” + cont); break;
idade++ cont++;
} while(idade <=18); } case 2:
alert("Você pediu jaca madura");
break;
for (var num=1; num <=100; num++) {
default:
alert('Não tem essa merda');
if (num % 4 == 0) {
break;
console.log("PIN");
}
}
else {
console.log(num);
}
} //se for número múltiplo de 4, mostra PIN
Operador ternário:

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";
}

<body>
<h1 id=”titulo”>Meu 20º JS</h1>

<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”>

<br>
<span id=”msgErro”></span>

<br>
<input type=”button” value=”Somar” onclick=”somar();”>

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.

<noscript>
<p>Seu navegador não suporta JavaScript ou ele está desativado.</p>
</noscript>

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


Funções:

Exemplo Simples: Com parâmetros: Com retorno:


function dizerBomdia() { function somar(a, b) { function multiplicar(x, y) {
console.log("Bom dia!"); console.log(a + b); return x * y;
} } }
dizerOla(); // Chama a função somar(3, 5); // Resultado: 8
var resultado = multiplicar(4, 2);
console.log(resultado); //vai dar 8
Exemplo com prompt:
function calcularMedia(nota1,nota2) {
var media = (nota1 + nota2)/2; Mostrando que deu erro:

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:


var conta = { //function – vai virar método
saldo: 0, //saldo é atributo var deposita = function(valor) {
deposita: function(valor) { //deposita é função this.saldo += valor;
this.saldo += valor; //acrescenta 100 ao valor }
}
} //objeto conta
var conta = {
//executando o método deposita do objeto conta saldo: 0
conta.deposita(100); //chama a função }
alert(conta.saldo); //mostra saldo
//aplicando o método deposita ao objeto conta, do
qual ele não faz parte
deposita.apply(conta, [200]);
alert(conta.saldo);

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!");
}

Você também pode gostar