Esta parte do tutorial é sobre o núcleo do JavaScript, a linguagem em si.
Mas precisamos de um ambiente de trabalho para executar nossos scripts e, como este livro está online, o navegador é uma boa escolha. Manteremos a quantidade de comandos específicos do navegador (como alert ) ao mínimo para que você não perca tempo com eles se planeja se concentrar em outro ambiente (como Node.js). Vamos nos concentrar no JavaScript no navegador na próxima parte do tutorial.
Então, primeiro, vamos ver como anexamos um script a uma página da web. Para ambientes do lado do servidor (como Node.js), você pode executar o script com um comando como "node my.js" .
Os programas JavaScript podem ser inseridos em praticamente qualquer lugar em um documento HTML usando a tag <script> .
Por exemplo:
<!DOCTYPEHTML>
<html>
<corpo>
<p>Antes do roteiro...</p>
<roteiro>
alerta('Olá, mundo!');
</script>
<p>...Depois do script.</p>
</body>
</html>Você pode executar o exemplo clicando no botão “Play” no canto superior direito da caixa acima.
A tag <script> contém código JavaScript que é executado automaticamente quando o navegador processa a tag.
A tag <script> possui alguns atributos que raramente são usados hoje em dia, mas que ainda podem ser encontrados em códigos antigos:
O atributo type : <script type =…>
O antigo padrão HTML, HTML4, exigia que um script tivesse um type . Geralmente era type="text/javascript" . Não é mais necessário. Além disso, o padrão HTML moderno mudou totalmente o significado deste atributo. Agora, ele pode ser usado para módulos JavaScript. Mas esse é um assunto avançado, falaremos sobre módulos em outra parte do tutorial.
O atributo language : <script language =…>
Este atributo foi criado para mostrar o idioma do script. Este atributo não faz mais sentido porque JavaScript é a linguagem padrão. Não há necessidade de usá-lo.
Comentários antes e depois dos scripts.
Em livros e guias realmente antigos, você pode encontrar comentários dentro de tags <script> , como este:
<script type="text/javascript"><!--
...
//--></script> Este truque não é usado no JavaScript moderno. Esses comentários ocultam o código JavaScript de navegadores antigos que não sabiam como processar a tag <script> . Como os navegadores lançados nos últimos 15 anos não apresentam esse problema, esse tipo de comentário pode ajudá-lo a identificar códigos realmente antigos.
Se tivermos muito código JavaScript, podemos colocá-lo em um arquivo separado.
Os arquivos de script são anexados ao HTML com o atributo src :
<script src="/path/to/script.js"></script>
Aqui, /path/to/script.js é um caminho absoluto para o script da raiz do site. Também é possível fornecer um caminho relativo da página atual. Por exemplo, src="script.js" , assim como src="./script.js" , significaria um arquivo "script.js" na pasta atual.
Também podemos fornecer um URL completo. Por exemplo:
<script src="https://cdnjs.cloudflare.com/ajax/libs/lodash.js/4.17.11/lodash.js"></script>
Para anexar vários scripts, use várias tags:
<script src="/js/script1.js"></script> <script src="/js/script2.js"></script> …
Observe:
Via de regra, apenas os scripts mais simples são colocados em HTML. Os mais complexos residem em arquivos separados.
A vantagem de um arquivo separado é que o navegador irá baixá-lo e armazená-lo em seu cache.
Outras páginas que fazem referência ao mesmo script irão retirá-lo do cache em vez de baixá-lo, portanto, o arquivo é baixado apenas uma vez.
Isso reduz o tráfego e torna as páginas mais rápidas.
Se src estiver definido, o conteúdo do script será ignorado.
Uma única tag <script> não pode conter o atributo src e o código.
Isso não funcionará:
<script src="arquivo.js"> alerta(1); // o conteúdo é ignorado porque src está definido </script>
Devemos escolher um <script src="…"> externo ou um <script> regular com código.
O exemplo acima pode ser dividido em dois scripts para funcionar:
<script src="file.js"></script> <roteiro> alerta(1); </script>
Podemos usar uma tag <script> para adicionar código JavaScript a uma página.
Os atributos type e language não são obrigatórios.
Um script em um arquivo externo pode ser inserido com <script src="path/to/script.js"></script> .
Há muito mais para aprender sobre scripts de navegador e sua interação com a página da web. Mas vamos ter em mente que esta parte do tutorial é dedicada à linguagem JavaScript, então não devemos nos distrair com implementações específicas do navegador. Usaremos o navegador como forma de executar JavaScript, o que é muito conveniente para leitura on-line, mas apenas um entre muitos.
importância: 5
Crie uma página que mostre a mensagem “Sou JavaScript!”.
Faça isso em uma sandbox ou no disco rígido, não importa, apenas certifique-se de que funciona.
Demonstração em nova janela
<!DOCTYPEhtml>
<html>
<corpo>
<roteiro>
alerta("Sou JavaScript!");
</script>
</body>
</html>Abra a solução em uma sandbox.
importância: 5
Pegue a solução da tarefa anterior Mostrar um alerta. Modifique-o extraindo o conteúdo do script para um arquivo externo alert.js , residente na mesma pasta.
Abra a página e verifique se o alerta funciona.
O código HTML:
<!DOCTYPEhtml> <html> <corpo> <script src="alert.js"></script> </body> </html>
Para o arquivo alert.js na mesma pasta:
alert("Eu sou JavaScript!");