034.1 Lição 1
Certificação: |
Web Development Essentials |
---|---|
Versão: |
1.0 |
Tópico: |
034 Programação em JavaScript |
Objetivo: |
034.1 Execução e sintaxe de JavaScript |
Lição: |
1 de 1 |
Introdução
As páginas web são desenvolvidas usando três tecnologias padrão: HTML, CSS e JavaScript. O JavaScript é uma linguagem de programação que permite ao navegador atualizar dinamicamente o conteúdo do site. Ele normalmente é executado pelo mesmo navegador usado para visualizar uma página web. Dessa forma, como ocorre com o CSS e o HTML, o comportamento exato de um código pode ser diferente de acordo com o navegador. Mas os navegadores mais comuns aderem à especificação ECMAScript. Este é um padrão que unifica o uso do JavaScript na web e será a base desta lição, junto com a especificação HTML5, que especifica como o JavaScript precisa ser posto em uma página web para que um navegador possa executá-lo.
Executando o JavaScript no navegador
Para executar o JavaScript, o navegador precisa obter o código diretamente, como parte do HTML que compõe a página, ou ainda na forma de uma URL que indica a localização de um script a ser executado.
O exemplo a seguir mostra como incluir o código diretamente no arquivo HTML:
<html>
<head>
</head>
<body>
<h1>Website Headline</h1>
<p>Content</p>
<script>
console.log('test');
</script>
</body>
</html>
O código é empacotado entre as tags <script>
e </script>
. Tudo o que for incluído nessas tags será executado pelo navegador diretamente ao carregar a página.
A posição do elemento <script>
dentro da página determina quando ele será executado. Um documento HTML é analisado de cima para baixo, e a partir disso o navegador decide quando exibir os elementos na tela. No exemplo acima, as tags <h1>
e <p>
do website são analisadas, e provavelmente exibidas, antes de o script ser executado. Se o código JavaScript dentro da tag <script>
for muito demorado de executar, ainda assim a página seria exibida sem problemas. Se, porém, o script tiver sido posto acima das outras tags, o visitante da página teria de esperar até que o script termine de ser executado para poder visualizar a página. Por essa razão, as tags <script>
costumam ser posicionadas em um destes locais:
-
No finalzinho do corpo do HTML, para que o script seja a última coisa a ser executada. Fazemos isso quando o código tem uma função que não seria útil sem o resto do conteúdo da página. Um exemplo seria adicionar funcionalidade a um botão, já que o botão precisa existir para que a funcionalidade faça sentido.
-
Dentro do elemento
<head>
do HTML. Esse posicionamento garante que o script seja executado antes de o corpo do HTML ser analisado. Se você quiser alterar o comportamento de carregamento da página, ou tiver algo que precisa ser executado enquanto a página ainda não está totalmente carregada, coloque o script aqui. Além disso, se houver vários scripts que dependem de um script específico, coloque esse script compartilhado dentro de head para fazer com que ele seja executado antes dos outros.
Por diversos motivos, incluindo uma maior facilidade de gerenciamento, vale a pena colocar o código JavaScript em arquivos separados externos ao código HTML. Os arquivos JavaScript externos são incluídos usando uma tag <script>
com um atributo src
, da seguinte maneira:
<html>
<head>
<script src="/button-interaction.js"></script>
</head>
<body>
</body>
</html>
A tag src
informa ao navegador a localização da fonte, ou seja, o arquivo que contém o código JavaScript. O local pode ser um arquivo no mesmo servidor, como no exemplo acima, ou qualquer URL acessível pela web, como https://www.lpi.org/example.js
. O valor do atributo src
segue a mesma convenção da importação de arquivos CSS ou de imagem, podendo ser relativo ou absoluto. Ao encontrar uma tag de script com o atributo src
, o navegador tentará obter o arquivo de origem usando uma solicitação HTTP GET
. Portanto, os arquivos externos precisam estar acessíveis.
Quando usamos o atributo src
, qualquer código ou texto posto entre as tags <script>…</script>
é ignorado, de acordo com a especificação do HTML.
<html>
<head>
<script src="/button-interaction.js">
console.log("test"); // <-- This is ignored
</script>
</head>
<body>
</body>
</html>
Existem outros atributos que podem ser adicionados à tag script
para especificar ainda mais como o navegador deve obter os arquivos e tratá-los posteriormente. A lista a seguir detalha os atributos mais importantes:
async
-
Pode ser usado em tags
script
e instrui o navegador a buscar o script em segundo plano, de forma a não bloquear o processo de carregamento da página. O carregamento da página ainda será interrompido para o navegador analisar o script depois de obtê-lo (o que é feito imediatamente). Este atributo é booleano e, portanto, escrever a tag como<script async src="/script.js"></script>
já é suficiente, não sendo necessário fornecer nenhum valor. defer
-
Semelhante ao
async
, instrui o navegador a não bloquear o processo de carregamento da página enquanto busca o script. Mas, em vez disso, o navegador posterga a análise do script e espera até que todo o documento HTML tenha sido analisado e somente então analisa o script, e só então anuncia que o documento foi completamente carregado. Como no caso deasync
,defer
é um atributo booleano e é usado da mesma maneira. Uma vez quedefer
implica emasync
, não há razão para especificar as duas tags ao mesmo tempo.NoteDepois de analisar completamente uma página, o navegador indica que ela está pronta para ser exibida disparando um evento
DOMContentLoaded
, permitindo que o visitante veja o documento. Assim, o JavaScript incluído em um evento<head>
sempre terá a chance de agir na página antes de ser exibido, mesmo com o atributodefer
. type
-
Indica o tipo de script que o navegador deve esperar dentro da tag. O padrão é JavaScript (
type="application/javascript"
), por isso este atributo não é necessário ao se incluir um código JavaScript ou ao se apontar para um recurso JavaScript com a tagsrc
. Geralmente, todos os tipos de MIME podem ser especificados, mas apenas os scripts denotados como JavaScript serão executados pelo navegador. Existem dois casos de uso realistas para este atributo: dizer ao navegador para não executar o script definindotype
para um valor arbitrário comotemplate
ouother
, ou dizer ao navegador que o script é um módulo ES6. Não falaremos dos módulos ES6 nesta lição.
Warning
|
Quando múltiplos scripts têm o atributo |
Console do navegador
Embora ele geralmente seja executado como parte de um site, existe outra maneira de executar o JavaScript: usando o console do navegador. Todos os navegadores modernos para desktop incluem um menu que permite executar o código JavaScript no mecanismo JavaScript do navegador. O recurso permite testar um novo código ou depurar sites existentes.
Existem várias maneiras de acessar o console, dependendo do navegador. A maneira mais fácil é usar atalhos de teclado. Estes são os atalhos de teclado para alguns dos navegadores mais comuns:
- Chrome
-
Ctrl+Shift+J (Cmd+Option+J no Mac)
- Firefox
-
Ctrl+Shift+K (Cmd+Option+K no Mac)
- Safari
-
Ctrl+Shift+? (Cmd+Option+? no Mac)
Você também pode clicar com o botão direito em uma página web e selecionar a opção “Inspecionar” ou “Inspecionar Elemento” para abrir o inspetor, que é outra ferramenta do navegador. Quando o inspetor é aberto, aparece um novo painel. Selecione a guia “Console” para abrir o console do navegador.
Depois de acessar o console, você pode executar o JavaScript da página inserindo o código diretamente no campo de entrada. O resultado de qualquer código executado será mostrado em uma linha separada.
Declarações de JavaScript
Agora que sabemos como começar a executar um script, vamos tratar dos fundamentos dessa execução. Um script JavaScript é uma coleção de declarações e blocos. Um exemplo de declaração é console.log('test')
. Esta instrução diz ao navegador para enviar a palavra test
para o console do navegador.
Cada declaração em JavaScript é encerrada por um ponto e vírgula (;
). Graças a isso, o navegador sabe que a declaração foi concluída e uma nova pode ser iniciada. Veja o seguinte script:
var message = "test"; console.log(message);
Escrevemos duas declarações. Cada uma delas é encerrada por um ponto e vírgula ou pelo final do script. Para fins de legibilidade, podemos colocar as declarações em linhas separadas. Dessa forma, o script também pode ser escrito assim:
var message = "test";
console.log(message);
Isso é possível porque todos os espaços em branco entre as declarações, como um espaço, uma nova linha ou uma tabulação, são ignorados. Também é possível incluir espaços em branco entre palavras-chave individuais dentro das declarações, mas isso será explicado em uma lição posterior. As declarações também podem estar vazias ou ser compostas apenas por espaços em branco.
Se uma declaração for inválida por não ter sido encerrada por um ponto e vírgula, o ECMAScript tenta inserir automaticamente os pontos e vírgulas adequados com base em um conjunto complexo de regras. A regra mais importante é: Se uma instrução inválida for composta de duas declarações válidas separadas por uma nova linha, insira um ponto e vírgula na nova linha. Por exemplo, o código a seguir não forma uma declaração válida:
console.log("hello")
console.log("world")
Mas um navegador moderno irá executá-lo automaticamente como se tivesse sido escrito com os pontos e vírgulas adequados:
console.log("hello");
console.log("world");
Assim, é possível omitir o ponto e vírgula em certos casos. No entanto, como as regras para a inserção automática de ponto e vírgula são complexas, recomendamos sempre encerrar adequadamente suas declarações para evitar erros indesejados.
Comentários em JavaScript
Scripts extensos podem se tornar bastante intricados. É aconselhável comentar o código conforme ele é escrito, tornando-o mais fácil de ler para outras pessoas ou para você mesmo no futuro. Como alternativa, você pode incluir metainformações no script, como dados de copyright ou informações sobre quando o script foi escrito e por quê.
Para possibilitar a inclusão dessas metainformações, o JavaScript suporta comentários. Um desenvolvedor pode incluir caracteres especiais em um script, indicando certas partes como comentários que serão ignorado na execução. O exemplo a seguir traz uma versão bem comentada do script que vimos anteriormente.
/*
This script was written by the author of this lesson in May, 2020.
It has exactly the same effect as the previous script, but includes comments.
*/
// First, we define a message.
var message = "test";
console.log(message); // Then, we output the message to the console.
Os comentários não são declarações e não precisam ser encerrados com ponto e vírgula. Eles seguem suas próprias regras de encerramento, dependendo da forma como o comentário é escrito. Existem duas maneiras de escrever comentários em JavaScript:
- Comentário multilinhas
-
Use
/*
e*/
para indicar o início e o fim de um comentário multilinhas. Tudo o que vier após/*
, até a primeira ocorrência de*/
, é ignorado. Esse tipo de comentário geralmente abrange mais de uma linha, mas também pode ser usado para linhas únicas ou mesmo no meio de uma linha, desta forma:console.log(/* what we want to log: */ "hello world")
Como o objetivo dos comentários geralmente é aumentar a legibilidade de um script, evite usar esse estilo de comentário dentro de uma linha.
- Comentário de uma linha
-
Use
//
(duas barras) para comentar uma linha. Tudo o que vem após a barra dupla na mesma linha é ignorado. No exemplo mostrado anteriormente, esse padrão é usado primeiro para comentar uma linha inteira. Após a declaraçãoconsole.log(message);
, ele é usado para escrever um comentário sobre o resto da linha
Em geral, comentários de uma linha devem ser usados para linhas únicas e comentários multilinha para linhas múltiplas, mesmo sendo possível usá-los de outras maneiras. Evite incluir comentários dentro das declarações.
Os comentários também podem ser usados para remover temporariamente as linhas do código em si, da seguinte maneira:
// We temporarily want to use a different message
// var message = "test";
var message = "something else";
Exercícios Guiados
-
Crie uma variável chamada
ColorName
e atribua a ela o valorRED
. -
Quais dos scripts a seguir são válidos?
console.log("hello") console.log("world");
console.log("hello"); console.log("world");
// console.log("hello") console.log("world");
console.log("hello"); console.log("world") //;
console.log("hello"); /* console.log("world") */
Exercícios Exploratórios
-
Quantas instruções JavaScript podem ser escritas em uma única linha sem usar um ponto e vírgula?
-
Crie duas variáveis chamadas
x
ey
e imprima a soma delas no console.
Resumo
Nesta lição, aprendemos diferentes maneiras de executar códigos em JavaScript e como modificar o comportamento de carregamento do script. Também vimos os conceitos básicos de composição de script e comentários e aprendemos a usar o comando console.log()
.
HTML usado nesta lição:
- <script>
-
A tag
script
pode ser usada para incluir JavaScript diretamente na página. Também é possível especificar um arquivo externo com o atributosrc
. Modifique a forma como o script é carregado com os atributosasync
edefer
.
Conceitos de JavaScript apresentados nesta lição:
;
-
O ponto e vírgula é usado para separar declarações. O ponto e vírgula às vezes pode — mas não deve — ser omitido.
//
,/*…*/
-
Comentários podem ser usados para adicionar explicações ou metainformações a um arquivo de script, ou para evitar que certas declarações sejam executadas.
console.log("text")
-
O comando
console.log()
pode ser usado para enviar texto para o console do navegador.
Respostas aos Exercícios Guiados
-
Crie uma variável chamada
ColorName
e atribua a ela o valorRED
.var ColorName = "RED";
-
Quais dos scripts a seguir são válidos?
console.log("hello") console.log("world");
Inválido: O primeiro
console.log()
não foi encerrado apropriadamente e a linha como um todo não forma uma declaração válida.console.log("hello"); console.log("world");
Válido: As declarações são todas encerradas corretamente.
// console.log("hello") console.log("world");
Válido: O código inteiro é ignorado por se tratar de um comentário.
console.log("hello"); console.log("world") //;
Inválido: Falta um ponto e vírgula na última declaração. O ponto e vírgula no finalzinho é ignorado porque está comentado.
console.log("hello"); /* console.log("world") */
Válido: Uma declaração válida é seguida por um código comentado, que é ignorado.
Respostas aos Exercícios Exploratórios
-
Quantas instruções JavaScript podem ser escritas em uma única linha sem usar um ponto e vírgula?
Se estivermos no final de um script, podemos escrever uma declaração e ela será encerrada no final do arquivo. Caso contrário, não se pode escrever uma declaração sem um ponto e vírgula com a sintaxe que vimos até aqui.
-
Crie duas variáveis chamadas
x
ey
e imprima a soma delas no console.var x = 5; var y = 10; console.log(x+y);