Scribd
Carregar
3 visualizações5 páginas

Tutorial Intermediário Javascript

O tutorial apresenta 20 estruturas intermediárias em JavaScript, incluindo funções com parâmetros padrão, desestruturação de objetos e arrays, e o uso de operadores spread e rest. Também aborda conceitos como closures, manipulação do DOM, classes, herança, promises, async/await, e manipulação de formulários. A conclusão destaca a importância dessas estruturas para avançar no conhecimento de JavaScript, enfatizando programação assíncrona, manipulação do DOM, organização de código e persistência de dados.

Enviado por

yasminrps01
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 DOCX, PDF, TXT ou leia on-line no Scribd
3 visualizações5 páginas

Tutorial Intermediário Javascript

O tutorial apresenta 20 estruturas intermediárias em JavaScript, incluindo funções com parâmetros padrão, desestruturação de objetos e arrays, e o uso de operadores spread e rest. Também aborda conceitos como closures, manipulação do DOM, classes, herança, promises, async/await, e manipulação de formulários. A conclusão destaca a importância dessas estruturas para avançar no conhecimento de JavaScript, enfatizando programação assíncrona, manipulação do DOM, organização de código e persistência de dados.

Enviado por

yasminrps01
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 DOCX, PDF, TXT ou leia on-line no Scribd

Tutorial: 20 Estruturas Intermediárias em JavaScript

1. Funções com parâmetros padrão

function saudacao(nome = "Visitante") {


return `Olá, ${nome}`;
}

2. Desestruturação de objetos

const pessoa = { nome: "Carlos", idade: 30 };


const { nome, idade } = pessoa;

3. Desestruturação de arrays

const numeros = [10, 20, 30];


const [a, b] = numeros;

4. Spread Operator

const arr1 = [1, 2];


const arr2 = [...arr1, 3, 4];

5. Rest Operator

function soma(...numeros) {
return [Link]((total, n) => total + n, 0);
}

6. Funções anônimas

setTimeout(function() {
[Link]("Executou!");
}, 1000);

7. Closures

function contador() {
let count = 0;
return function() {
count++;
return count;
};
}

const contar = contador();


[Link](contar());

8. Manipulação avançada do DOM

const novoElemento = [Link]("p");


[Link] = "Novo parágrafo";
[Link](novoElemento);

9. Delegação de eventos

[Link]("lista").addEventListener("click", (e) => {


if ([Link] === "LI") {
[Link]("Item clicado:", [Link]);
}
});

10. Classes (POO)

class Pessoa {
constructor(nome) {
[Link] = nome;
}

falar() {
[Link](`Olá, sou ${[Link]}`);
}
}

11. Herança

class Aluno extends Pessoa {


estudar() {
[Link]("Estudando...");
}
}
12. Promises

const promessa = new Promise((resolve, reject) => {


let sucesso = true;
sucesso ? resolve("OK") : reject("Erro");
});

[Link](res => [Link](res)).catch(err =>


[Link](err));

13. Async/Await

async function carregarDados() {


const resposta = await
fetch("[Link]
const dados = await [Link]();
[Link](dados);
}

14. Manipulação de formulários

[Link]("form").addEventListener("submit", (e) =>


{
[Link]();
const nome = [Link]("nome").value;
[Link](nome);
});

15. LocalStorage

[Link]("nome", "Carlos");
[Link]([Link]("nome"));

16. JSON (parse e stringify)

const obj = { nome: "Carlos" };


const json = [Link](obj);
const novoObj = [Link](json);

17. Map
const numeros = [1, 2, 3];
const dobrados = [Link](n => n * 2);

18. Filter

const pares = [Link](n => n % 2 === 0);

19. Reduce

const soma = [Link]((total, n) => total + n, 0);

20. Módulos (ES Modules)

// arquivo [Link]
export const mensagem = "Olá";

// arquivo [Link]
import { mensagem } from './[Link]';
[Link](mensagem);

💻 Exemplo Integrado (Página Dinâmica)

<!DOCTYPE html>
<html>
<head>
<title>Intermediário JS</title>
</head>
<body>

<form id="form">
<input type="text" id="nome" placeholder="Digite seu nome">
<button type="submit">Enviar</button>
</form>

<ul id="lista"></ul>

<script>
[Link]("form").addEventListener("submit", (e) =>
{
[Link]();
const nome = [Link]("nome").value;

const li = [Link]("li");
[Link] = nome;

[Link]("lista").appendChild(li);

[Link]("ultimoNome", nome);
});
</script>

</body>
</html>

🚀 Conclusão

Essas estruturas permitem que você avance de um JavaScript básico


para um nível intermediário, incluindo:

 Programação assíncrona

 Manipulação eficiente do DOM

 Organização de código com classes e módulos

 Persistência de dados no navegador

Você também pode gostar