JavaScript, também abreviado para JS, é uma linguagem de programação usada no desenvolvimento web. Como uma das principais tecnologias da web junto com HTML e CSS, o JavaScript é usado para tornar as páginas da web interativas e para construir aplicativos da web. Os navegadores modernos, que aderem a padrões de exibição comuns, suportam JavaScript por meio de mecanismos integrados, sem a necessidade de plug-ins adicionais.
Ao trabalhar com arquivos para a web, o JavaScript precisa ser carregado e executado junto com a marcação HTML. Isso pode ser feito embutido em um documento HTML ou em um arquivo separado que o navegador fará download junto com o documento HTML.
Este tutorial abordará como incorporar JavaScript em seus arquivos da web, tanto embutidos em um documento HTML quanto como um arquivo separado.
Precisa implantar um projeto JavaScript rapidamente? Confira DigitalOcean App Platform e implante um projeto JS diretamente do GitHub em minutos.
Adicionando JavaScript em um documento HTML
Você pode adicionar código JavaScript em um documento HTML empregando a tag HTML dedicada A tag pode ser colocada no seção do seu HTML ou na seção seção, dependendo de quando você deseja que o JavaScript seja carregado.
Geralmente, o código JavaScript pode ficar dentro do documento seção para mantê-lo contido e fora do conteúdo principal do seu documento HTML.
No entanto, se o seu script precisar ser executado em um determinado ponto do layout de uma página ao usar document.write() para gerar conteúdo, você deve colocá-lo no ponto onde deve ser chamado, geralmente dentro do seção.
Vamos considerar o seguinte documento HTML em branco com um título de navegador de Today´s date (Dia de Hoje):
index.html
<!DOCTYPE html><html lang="en-US"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1"> <title>Today´s date<title>head> <body>body> html>No momento, este arquivo contém apenas marcação HTML. Digamos que gostaríamos de adicionar o seguinte código JavaScript ao documento:
let d = new Date();alert("Today´s date is " + d);Isso permitirá que a página exiba um alerta com a data atual, independentemente de quando o usuário carrega o site.
Para conseguir isso, adicionaremos um tag junto com algum código JavaScript no arquivo HTML.
Para começar, adicionaremos o código JavaScript entre o tags, sinalizando ao navegador para executar o script JavaScript antes de carregar o restante da página. Podemos adicionar o JavaScript abaixo do tags, por exemplo, conforme mostrado abaixo:
index.html
<!DOCTYPE html><html lang="en-US"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1"> <title>Today's Datetitle> <script> let d = new Date(); alert("Today's date is " + d); script>head> <body>body> html>Depois de carregar a página, você receberá um alerta semelhante a este:
Se estivéssemos modificando o que é mostrado no corpo do HTML, precisaríamos implementar isso após o seção para que seja exibida na página, como no exemplo abaixo:
index.html
<!DOCTYPE html><html lang="en-US"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1"> <title>Today's Datetitle>head> <body> <script> let d = new Date(); document.body.innerHTML = "Today’s date is “
+ d + ">" script>body> html>A saída do documento HTML acima carregado por meio de um navegador da web seria semelhante a esta:
Scripts pequenos ou executados apenas em uma página podem funcionar bem em um arquivo HTML, mas para scripts maiores ou scripts que serão usados em muitas páginas, não é uma solução muito eficaz porque incluí-los pode se tornar complicado ou difícil de ler e entenda. Na próxima seção, veremos como lidar com um arquivo JavaScript separado em seu documento HTML.
Trabalhando com um arquivo JavaScript separado
Para acomodar scripts maiores ou scripts que serão usados em diversas páginas, o código JavaScript geralmente reside em um ou mais js arquivos referenciados em documentos HTML, semelhante à forma como ativos externos como CSS são referenciados.
Os benefícios de usar um arquivo JavaScript separado incluem:
- Separando a marcação HTML e o código JavaScript para tornar ambos mais simples
- Arquivos separados facilitam a manutenção
- Quando os arquivos JavaScript são armazenados em cache, as páginas carregam mais rapidamente
Para demonstrar como conectar um documento JavaScript a um documento HTML, vamos criar um pequeno projeto web. Consistirá em script.js no js/ diretório, style.css no css/ diretório e um principal index.html na raiz do projeto.
project/├── css/| └── style.css├── js/| └── script.js└── index.htmlPodemos começar com nosso modelo HTML anterior da seção acima:
index.html
<!DOCTYPE html><html lang="en-US"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1"> <title>Today's Datetitle>head> <body>body> html>Agora, vamos mover nosso código JavaScript que mostrará a data como um
cabeçalho para o script.js arquivo:
script.js
let d = new Date();document.body.innerHTML = "Today’s date is “
+ d + ""Podemos adicionar uma referência a este script ao seção com a seguinte linha de código:
<script src="js/script.js"></script>O tag está apontando para o script.js arquivo no js/ diretório do nosso projeto web.
Vamos considerar esta linha no contexto do nosso arquivo HTML, neste caso, dentro do seção:
index.html
<!DOCTYPE html><html lang="en-US"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1"> <title>Today's Datetitle>head> <body> <script src="js/script.js">script>body> html>Finalmente, vamos também editar o style.css arquivo adicionando uma cor e um estilo de fundo ao
cabeçalho:
estilo.css
body { background-color: #0080ff;} h1 { color: #fff; font-family: Arial, Helvetica, sans-serif;}Podemos referenciar esse arquivo CSS dentro do seção do nosso documento HTML:
index.html
<!DOCTYPE html><html lang="en-US"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1"> <title>Today's Datetitle> <link rel="stylesheet" href="css/style.css">head> <body> <script src="js/script.js">script>body> html>Agora, com JavaScript e CSS implementados, podemos carregar o index.html página no navegador de nossa escolha. Devemos ver uma página semelhante a esta:
Agora que colocamos o JavaScript em um arquivo, podemos chamá-lo da mesma forma em páginas da web adicionais e atualizá-las em um único local
Conclusão
Este tutorial abordou como incorporar JavaScript em seus arquivos da web, tanto embutidos em um documento HTML quanto como um arquivo separado. .js arquivo.
A partir daqui, você aprenderá como trabalhar com o JavaScript Developer Console e como escrever comentários em JavaScript.
