Lições
Iniciar
Começar a aprender
CodeGym /Cursos /Frontend SELF PT /Introdução ao JavaScript

Introdução ao JavaScript

Frontend SELF PT
Nível 2 , Lição 5
Disponível

1. Tag <script>

Antes da gente mergulhar no estudo detalhado de HTML, gostaria de te apresentar uma parada muito legal — a linguagem JavaScript.

JavaScript — é uma linguagem de programação poderosa usada para criar páginas web dinâmicas e interativas. Com ela, dá para reagir às ações do usuário, modificar o conteúdo das páginas, interagir com servidores e melhorar bastante a experiência de quem acessa o site.

A gente não vai estudar JavaScript agora, mas às vezes nos exemplos eu acabo incluindo um pouco, então deixa eu te contar como o JavaScript é integrado em um documento HTML.

A tag <script> é usada para integrar código JavaScript no documento HTML.

CSS+HTML+JavaScript 
      
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Introdução ao JavaScript</title>
</head>
<body>
    <h1>Bem-vindo ao meu site!</h1>
    <script>
        // Seu código JavaScript aqui alert('Oi, mundo!');
    </script>
</body>
</html>

Nesse exemplo, usamos a tag <script> para integrar um código JavaScript simples que mostra uma janela pop-up com a mensagem "Oi, mundo!".

2. Conectando o script

Às vezes é melhor manter o código JavaScript em um arquivo separado. Isso ajuda a organizar o código e reutilizá-lo. Para conectar um arquivo JavaScript, também usamos a tag <script>, e com o atributo src especificamos o nome do arquivo JavaScript.

Conectando um arquivo JavaScript externo:

HTML 
      
</h1>
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Introdução ao JavaScript</title>
    <script src="script.js" defer></script>
</head>
<body>
    <h1>Bem-vindo ao meu site!</h1>
</body>
</html>

Esse arquivo HTML pede ao navegador para conectar o arquivo JavaScript chamado script.js, que pode conter o mesmo código do exemplo anterior:

JavaScript 
      
//script.js:
// Seu código JavaScript aqui
alert('Oi, mundo!');

O atributo defer é usado para indicar ao navegador que o script deve ser executado somente após todo o documento HTML ser carregado e exibido.

3. Código inline

Lembra como a gente escrevia estilos CSS direto no atributo style de um elemento?

HTML 
      
<p style="color:red"> Vermelho</p>

Pois bem, dá para fazer a mesma coisa com código JavaScript.

Digamos que queremos que um elemento mude sua cor para azul ao ser clicado. Nesse caso, o código seria assim:

HTML 
      
<p style="color:red" onclick="this.style.color = 'blue';">Vermelho</p>

O texto em verde é o código JavaScript que será executado se o usuário clicar no elemento <p>. Fácil, né?

  • onclick: Um atributo HTML que especifica a função executada ao clicar no elemento.
  • this: Referência ao elemento em que o clique foi realizado.
  • style.color: Propriedade CSS que muda a cor do texto do elemento.
Comentários
TO VIEW ALL COMMENTS OR TO MAKE A COMMENT,
GO TO FULL VERSION