Introdução
JavaScript não precisa de introdução. É uma das linguagens de programação mais populares para desenvolvimento web. Funciona de forma semelhante ao HTML e CSS. Todas essas linguagens ajudam a projetar e desenvolver aplicativos e programas baseados na web.
Então, como o JavaScript é útil em particular? Com a ajuda do JavaScript, você pode tornar seus aplicativos web e páginas web bastante interativos. Não há espaço para complacência na esfera moderna. Você precisa prender a atenção dos seus espectadores nos primeiros segundos e mantê-los engajados. Não há dúvida de que um web design interessante e responsivo é uma das melhores maneiras de fazer isso. Felizmente, a maioria dos navegadores suporta JavaScript. Ele pode ser executado no seu navegador com a ajuda de alguns mecanismos integrados.
Adicionando JavaScript ao HTML
Se você deseja usar arquivos JavaScript para seu aplicativo web, precisa executá-los lado a lado com a marcação HTML. Existem duas maneiras de adicionar JavaScript ao HTML. Uma abordagem é fazê-lo inline dentro de um documento HTML. A outra maneira é adicioná-lo como um arquivo separado. Este arquivo será baixado junto com o documento HTML.
Neste tutorial, exploraremos em detalhes como você pode adicionar JavaScript ao HTML usando esses dois métodos.
Como Adicionar JavaScript a Documentos HTML Inline
Primeiro, veremos como você pode adicionar JavaScript a um documento HTML inline. Para fazer isso, você deve usar a tag HTML dedicada. Ela é <script>. Esta tag envolve o código JavaScript. Você pode colocar a tag em qualquer lugar de toda a sua marcação HTML. Onde você a coloca depende de quando você deseja que o JavaScript seja carregado.
Por exemplo, você pode colocá-la na seção <head>, na seção <body> ou até mesmo após a tag de fechamento </body>. Se você quiser manter o JavaScript longe do conteúdo principal do código HTML, é melhor colocar a tag na seção <head>. Ela conterá o código JavaScript. Por outro lado, você pode querer que seu código JavaScript seja executado dentro do layout da sua página web. Se for esse o caso, você deve colocar a tag na seção <body>. Você fará isso se, digamos, estiver usando document.write para gerar conteúdo.
Uma maneira melhor de entender isso seria através de um exemplo com código. Considere o seguinte documento HTML que está em branco. O título do navegador deste documento é Data de Hoje:
|
1 2 3 4 5 6 7 8 9 10 11 12 13 |
<!DOCTYPE html> <html lang="en-US"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1"> <title>Data de Hoje</title> </head> <body> </body> </html> |
Como você pode ver, não há sinal de JavaScript aqui. O documento contém apenas a marcação HTML até agora. Agora, gostaríamos de adicionar algum código JavaScript inline para fazê-lo carregar e rodar simultaneamente. Considere o seguinte trecho de código JavaScript:
|
1 2 |
let d = new Date(); alert("A data de hoje é " + d); |
De acordo com o código acima, estamos permitindo que nossa página web mostre um alerta com a data de hoje. Portanto, não importa quando o visitante acesse o site, a página exibirá a data atual.
Agora, para adicionar este trecho de código JavaScript ao documento HTML, usaremos a tag <script>. Antes de tudo, você precisa adicionar o código JavaScript entre as tags <head>. Isso informa à página web que este código específico deve ser carregado antes do outro conteúdo da página. Você pode adicionar o código abaixo das tags <title>. Veja como você faria isso:
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 |
<!DOCTYPE html> <html lang="en-US"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1"> <title>Data de Hoje</title> <script> let d = new Date(); alert("A data de hoje é " + d); </script> </head> <body> </body> </html> |
Seu código JavaScript agora está adicionado. Sua página web executará e carregará este script antes do restante da página. Quando você iniciar seu site, receberá um alerta com a data atual, algo como isto:
É assim que você adicionaria o código à seção <head> do documento HTML. A alternativa seria adicionar o script dentro ou fora das tags <body>. Como você verá no exemplo abaixo, adicionaremos o trecho de código após a seção <head>:
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 |
<!DOCTYPE html> <html lang="en-US"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1"> <title>Data de Hoje</title> </head> <body> <script> let d = new Date(); document.body.innerHTML = "<h1>A data de hoje é " + d + "</h1>" </script> </body> </html> |
Como resultado desta modificação, você verá algo como isto ao recarregar a página:
Como Adicionar JavaScript ao HTML com um Arquivo JavaScript Separado
Pequenos scripts JavaScript funcionam bem com arquivos HTML. Isso ocorre porque eles são executados em uma página ou menos em sua totalidade. Se você estiver trabalhando com scripts maiores que ocupam várias páginas, o arquivo pode se tornar muito difícil de entender. É por isso que você pode precisar adicioná-lo como um arquivo JavaScript separado. O arquivo seria carregado simultaneamente com o documento HTML.
Nesta seção, discutiremos como você pode adicionar JavaScript ao HTML usando um arquivo separado. O código é normalmente hospedado em um ou mais arquivos .js. O documento HTML fará referência a esses arquivos como qualquer outro recurso externo. Os motivos pelos quais você pode querer usar um arquivo JavaScript separado são muitos. Principalmente, torna o código muito mais fácil de ler e entender. Sem mencionar que arquivos separados permitem que as páginas em cache carreguem rapidamente e também são relativamente mais fáceis de manter.
Para aproveitar esses benefícios, você precisa saber como conectar os dois entre si - o arquivo JavaScript e o documento HTML. Para ajudar você a entender, usaremos o exemplo de um pequeno projeto web. Este suposto projeto contém um index.html principal na raiz, style.css no diretório css/ e script.js no diretório js/. Aqui está o nosso pequeno projeto:
|
1 2 3 4 5 6 7 8 9 10 11 |
projeto/ ├── css/ | └── style.css ├── js/ | └── script.js └── index.html |
Para nossa marcação HTML, usaremos o documento que usamos anteriormente:
|
1 2 3 4 5 6 7 8 9 10 11 12 |
<!DOCTYPE html> <html lang="en-US"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1"> <title>Data de Hoje</title> </head> <body> </body> </html> |
Agora que temos os nossos dois documentos, podemos começar a conectá-los. Temos que adicionar o código JavaScript referente à data ao arquivo script.js. Você o adicionará como um cabeçalho <h1> da seguinte forma:
|
1 2 |
let d = new Date(); document.body.innerHTML = "<h1>A data de hoje é " + d + "</h1>" |
Para conectar o código ao documento HTML, você adicionará uma referência ao script. A referência deve estar presente dentro ou abaixo da seção <body> do modelo HTML. Aqui está o código que você usará aqui:
|
1 |
<script src="js/script.js"></script> |
Como você pode ver, estamos usando a tag <script>. A tag está indicando o arquivo script.js que está no diretório js/ do projeto. Aqui está como o código aparecerá no documento HTML:
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 |
<!DOCTYPE html> <html lang="en-US"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1"> <title>A data de hoje</title> </head> <body> </body> <script src="js/script.js"></script> </html> |
Se desejar, você pode fazer algumas modificações estilísticas para dar uma cara nova à sua página. Por exemplo, vamos adicionar uma cor de fundo ao cabeçalho <h1>. Faremos essa edição no arquivo style.css:
|
1 2 3 4 5 6 7 8 |
body { background-color: #0080ff; } h1 { color: #fff; font-family: Arial, Helvetica, sans-serif; } |
Como a edição deve ser mostrada no cabeçalho, faremos referência a ela na seção <head> do documento HTML. Veja como você fará a referência a este arquivo CSS:
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 |
<!DOCTYPE html> <html lang="en-US"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1"> <title>A data de hoje</title> <link rel="stylesheet" href="css/style.css"> </head> <body> </body> <script src="js/script.js"></script> </html> |
Agora que fizemos as referências necessárias, você pode visualizar as alterações. Carregue o index.html no seu navegador e você verá uma página como esta:
Se você quiser atualizar o código, poderá editar todas as suas páginas a partir de um único local. Isso torna a manutenção das páginas web muito fácil. Esse é o benefício de usar um arquivo separado para seus scripts JavaScript.
Conclusão
Esperamos que este tutorial tenha ajudado você a aprender mais sobre o processo de adicionar JavaScript ao HTML. Abordamos como fazer isso em um documento HTML inline, bem como adicioná-lo como um arquivo .js. Agora que você conhece o básico, pode fazer muito mais com JavaScript no HTML.
Aqui estão alguns recursos do nosso blog que ajudarão você a utilizar ainda mais o JavaScript:
- Se você estiver criando sua própria aplicação web, dê uma olhada em nosso guia sobre como escolher a melhor configuração de servidor.
- Se você quiser aprender como configurar um blog com o Ghost, dê uma olhada neste tutorial.
- Dê uma olhada neste tutorial para aprender como instalar o Node.js no Ubuntu 18.04.
Boa computação!
Comentários
Nenhum comentário ainda. Seja o primeiro.