Vídeo: Introdução à JavaScript (JS) em 30 minutos

Variáveis, tipos, manipulação de DOM, requisições assíncronas (AJAX) e mais

Aprenda o básico de JavaScript (JS) através do mais recente vídeo que publiquei no meu canal do YouTube:

Abaixo você encontra os arquivos criados/utilizados no vídeo:

`index.html`

html

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Introdução à JS</title>

    <link rel="stylesheet" href="css/style.css">
  </head>

  <body>
    <main>
      <nav>
        [Alterar tema](#" id="theme-toggle)
      </nav>

      <article>
        <h1>The Matrix</h1>

        <h2>Cast</h2>

        <ul class='cast'></ul>

        <p>
          The Matrix is a 1999 science fiction action film[3][4] written and directed by the Wachowskis.[a] It stars Keanu Reeves, Laurence Fishburne, Carrie-Anne Moss, Hugo Weaving, and Joe Pantoliano and is the first installment in the Matrix franchise. It depicts a dystopian future in which humanity is unknowingly trapped inside a simulated reality, the Matrix, created by intelligent machines to distract humans while using their bodies as an energy source.[5] When computer programmer Thomas Anderson, under the hacker alias "Neo", uncovers the truth, he "is drawn into a rebellion against the machines"[5] along with other people who have been freed from the Matrix.
        </p>

        <p>
          The Matrix is an example of the cyberpunk subgenre of science fiction.[6] The Wachowskis' approach to action scenes was influenced by Japanese animation[7] and martial arts films, and the film's use of fight choreographers and wire fu techniques from Hong Kong action cinema influenced subsequent Hollywood action film productions. The film is known for popularizing a visual effect known as "bullet time", where the heightened perception of certain characters is represented by allowing the action within a shot to progress in slow-motion while the camera appears to move through the scene at normal speed, allowing the sped-up movements of certain characters to be perceived normally. While some critics have praised the film for its handling of difficult subjects, others have said the deeper themes are largely overshadowed by its action scenes.
        </p>
      </article>
    </main>

    <script src="js/app.js"></script>
  </body>
</html>

`css/style.css`

css

* {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}

body {
  background-color: #f5f5f5;
}

main {
  max-width: 500px;
  min-height: 100vh;
  margin: auto;
  padding: 1rem 2rem;
  font-family: sans-serif;
  background-color: white;
  color: #333;
}

article h1 {
  margin: 1rem 0;
  font-size: 3rem;
}

article p {
  font-size: 1.4rem;
  margin: 2rem 0;
}

nav {
  display: flex;
  flex-direction: row-reverse;
}

#theme-toggle {
  text-decoration: none;
  padding: 0.25rem 0.5rem;
  border-radius: 5px;

  background-color: #eee;
  color: #333;
}

ul {
  margin: 1rem 0 0 3rem;
}

/* Dark theme */

body.dark {
  background-color: #222;
}

body.dark main {
  background-color: #444;
  color: #eee;
}

body.dark #theme-toggle {
  background-color: #777;
  color: #ddd;
}

`js/app.js`

javascript

document.querySelector('#theme-toggle').addEventListener('click', (event) => {
  event.preventDefault();

  toggleTheme();
});

function toggleTheme() {
  document.body.classList.toggle('dark');
}

javascript

const cast = [
  'Keanu Reeves',
  'Carrie-Anne Moss',
  'Laurence Fishburne',
  'Hugo Weaving'
];

const castList = document.querySelector('.cast');

cast.forEach(person => {
  const item = document.createElement("li");
  const personName = document.createTextNode(person);
  item.appendChild(personName);
  castList.appendChild(item);

  // P.S. Existem formas melhores de fazer ↑ isso,
  // usando um framework tipo React por exemplo :)
});

javascript

document.querySelector('main').innerHTML = '';

fetch('https://api.github.com/users/lucascaton/repos?per_page=100')
  .then(response => response.json())
  .then(repos => repos.forEach(repo => {
    let item = document.createElement("li");
    var repoName = document.createTextNode(repo.name);
    item.appendChild(repoName);
    document.querySelector('main').appendChild(item);
  }));

Se curtiu o vídeo, não deixe de se inscrever no canal! 😉