-
Notifications
You must be signed in to change notification settings - Fork 115
New issue
Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.
By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.
Already on GitHub? Sign in to your account
Hello, world! #242
base: master
Are you sure you want to change the base?
Hello, world! #242
Changes from 3 commits
f3a1fce
2fca9e8
a831ee9
688da0e
38acf6c
5b225af
File filter
Filter by extension
Conversations
Jump to
Diff view
Diff view
There are no files selected for viewing
Original file line number | Diff line number | Diff line change |
---|---|---|
@@ -1,2 +1,2 @@ | ||
|
||
[html src="index.html"] | ||
[html src="index.html"] |
Original file line number | Diff line number | Diff line change |
---|---|---|
|
@@ -4,4 +4,4 @@ O código HTML: | |
|
||
Para o arquivo `alert.js` na mesma pasta: | ||
|
||
[js src="alert.js"] | ||
[js src="alert.js"] |
Original file line number | Diff line number | Diff line change | ||||
---|---|---|---|---|---|---|
|
@@ -6,7 +6,6 @@ Mas precisamos de um ambiente de trabalho para rodar nossos scripts e, como esse | |||||
|
||||||
Então, primeiro, vamos ver como anexar um script a uma página. Para ambientes server-side (como Node.js), você pode executar o script com um comando como `"node my.js"`. | ||||||
|
||||||
|
||||||
## A tag "script" | ||||||
|
||||||
Os programas JavaScript podem ser inseridos em quase qualquer parte de um documento HTML com a ajuda da tag `<script>`. | ||||||
|
@@ -40,28 +39,26 @@ Você pode executar o exemplo clicando no botão "Jogar" no canto superior direi | |||||
|
||||||
A tag `<script>` contém código JavaScript que é executado automaticamente quando o navegador processa a tag. | ||||||
|
||||||
|
||||||
## Marcação moderna | ||||||
|
||||||
A tag `<script>` tem alguns atributos que raramente são usados hoje em dia, mas que ainda podem ser encontrados em códigos antigos: | ||||||
There was a problem hiding this comment. Choose a reason for hiding this commentThe reason will be displayed to describe this comment to others. Learn more.
Suggested change
|
||||||
|
||||||
O atributo `type`: <code><script <u>type</u>=...></code> | ||||||
: O antigo padrão HTML, HTML4, requeria um script para ter um `type`. Normalmente era `type="text/javascript"`. Não é mais necessário. Além disso, o moderno padrão HTML, HTML5, mudou totalmente o significado deste atributo. Agora, ele pode ser usado para módulos JavaScript. Mas esse é um tópico avançado; vamos falar sobre módulos em outra parte do tutorial. | ||||||
: O antigo padrão HTML, HTML4, requeria um script para ter um `type`. Normalmente era `type="text/javascript"`. Não é mais necessário. Além disso, o moderno padrão HTML, HTML5, mudou totalmente o significado deste atributo. Agora, ele pode ser usado para módulos JavaScript. Mas esse é um tópico avançado; vamos falar sobre módulos em outra parte do tutorial. | ||||||
There was a problem hiding this comment. Choose a reason for hiding this commentThe reason will be displayed to describe this comment to others. Learn more.
Suggested change
|
||||||
|
||||||
O atributo `language`: <code><script <u>language</u>=...></code> | ||||||
: 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 o usar. | ||||||
|
||||||
Comentários antes e depois dos scripts. | ||||||
: Em livros e guias realmente antigos, você pode encontrar comentários dentro de tags `<script>`, assim: | ||||||
|
||||||
```html no-beautify | ||||||
<script type="text/javascript"><!-- | ||||||
... | ||||||
//--></script> | ||||||
``` | ||||||
|
||||||
Esse truque não é usado no JavaScript moderno. Esses comentários esconderam 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 têm esse problema, esse tipo de comentário pode ajudá-lo a identificar códigos realmente antigos. | ||||||
```html no-beautify | ||||||
<script type="text/javascript"><!-- | ||||||
... | ||||||
//--></script> | ||||||
``` | ||||||
|
||||||
Esse truque não é usado no JavaScript moderno. Esses comentários esconderam 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 têm esse problema, esse tipo de comentário pode ajudá-lo a identificar códigos realmente antigos. | ||||||
There was a problem hiding this comment. Choose a reason for hiding this commentThe reason will be displayed to describe this comment to others. Learn more.
Suggested change
|
||||||
|
||||||
## Scripts externos | ||||||
|
||||||
|
@@ -92,7 +89,7 @@ Para anexar vários scripts, use múltiplas tags: | |||||
```smart | ||||||
Como regra, apenas os scripts mais simples são colocados em HTML. Os mais complexos residem em arquivos separados. | ||||||
|
||||||
O benefício de um arquivo separado é que o navegador irá baixá-lo e armazená-lo em seu [cache] (https://pt.wikipedia.org/wiki/Web_cache). | ||||||
O benefício de um arquivo separado é que o navegador irá baixá-lo e armazená-lo em seu [cache](https://pt.wikipedia.org/wiki/Web_cache). | ||||||
|
||||||
Outras páginas que referenciam o mesmo script o tirarão do cache ao invés de baixá-lo, então o arquivo é baixado apenas uma vez. | ||||||
|
||||||
|
@@ -128,5 +125,4 @@ O exemplo acima pode ser dividido em dois scripts para funcionar: | |||||
- Os atributos `type` e `language` não são necessários. | ||||||
- Um script em um arquivo externo pode ser inserido com `<script src="path/to/script.js"></script>`. | ||||||
|
||||||
|
||||||
Há muito mais a aprender sobre os scripts dos navegadores e sua interação com a página. 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 de navegadores. Estaremos usando o navegador como uma maneira de rodar JavaScript, que é muito conveniente para leitura online, mas apenas um de muitos. | ||||||
There was a problem hiding this comment. Choose a reason for hiding this commentThe reason will be displayed to describe this comment to others. Learn more.
Suggested change
|
There was a problem hiding this comment.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.