A primeira coisa que estudaremos são os blocos de construção do código.
Instruções são construções de sintaxe e comandos que executam ações.
Já vimos uma declaração, alert('Hello, world!') , que mostra a mensagem “Hello, world!”.
Podemos ter quantas instruções quisermos em nosso código. As instruções podem ser separadas por ponto e vírgula.
Por exemplo, aqui dividimos “Hello World” em dois alertas:
alerta('Olá'); alerta('Mundo');Normalmente, as instruções são escritas em linhas separadas para tornar o código mais legível:
alerta('Olá');
alerta('Mundo');Um ponto e vírgula pode ser omitido na maioria dos casos quando existe uma quebra de linha.
Isso também funcionaria:
alerta('Olá')
alerta('Mundo')Aqui, o JavaScript interpreta a quebra de linha como um ponto e vírgula “implícito”. Isso é chamado de inserção automática de ponto e vírgula.
Na maioria dos casos, uma nova linha implica um ponto e vírgula. Mas “na maioria dos casos” não significa “sempre”!
Há casos em que uma nova linha não significa ponto e vírgula. Por exemplo:
alerta(3 + 1 +2);
O código gera 6 porque o JavaScript não insere ponto e vírgula aqui. É intuitivamente óbvio que se a linha terminar com um sinal de mais "+" , então é uma “expressão incompleta”, então um ponto e vírgula seria incorreto. E neste caso, isso funciona conforme o esperado.
Mas há situações em que o JavaScript “falha” em assumir ponto e vírgula onde ele é realmente necessário.
Os erros que ocorrem nesses casos são muito difíceis de encontrar e corrigir.
Um exemplo de erro
Se você está curioso para ver um exemplo concreto desse erro, verifique este código:
alerta("Olá");
[1, 2].forEach(alerta); Não há necessidade de pensar sobre o significado dos colchetes [] e forEach ainda. Nós os estudaremos mais tarde. Por enquanto, lembre-se do resultado da execução do código: ele mostra Hello , depois 1 e depois 2 .
Agora vamos remover o ponto e vírgula após o alert :
alerta("Olá")
[1, 2].forEach(alerta);A diferença em relação ao código acima é de apenas um caractere: o ponto e vírgula no final da primeira linha desapareceu.
Se executarmos este código, apenas o primeiro Hello será exibido (e há um erro, pode ser necessário abrir o console para vê-lo). Não existem mais números.
Isso porque o JavaScript não assume ponto e vírgula antes dos colchetes [...] . Portanto, o código do último exemplo é tratado como uma única instrução.
Veja como o mecanismo vê isso:
alert("Olá")[1, 2].forEach(alert); Parece estranho, certo? Essa fusão, neste caso, é simplesmente errada. Precisamos colocar ponto e vírgula após alert para que o código funcione corretamente.
Isso também pode acontecer em outras situações.
Recomendamos colocar ponto e vírgula entre as instruções, mesmo que estejam separadas por novas linhas. Esta regra é amplamente adotada pela comunidade. Observemos mais uma vez – é possível omitir ponto-e-vírgula na maioria das vezes. Mas é mais seguro – especialmente para um iniciante – usá-los.
Com o passar do tempo, os programas tornam-se cada vez mais complexos. Torna-se necessário adicionar comentários que descrevam o que o código faz e por quê.
Os comentários podem ser colocados em qualquer lugar de um script. Eles não afetam sua execução porque o mecanismo simplesmente os ignora.
Comentários de uma linha começam com duas barras // .
O resto da linha é um comentário. Pode ocupar uma linha completa própria ou seguir uma declaração.
Como aqui:
// Este comentário ocupa uma linha própria
alerta('Olá');
alerta('Mundo'); // Este comentário segue a declaração Comentários multilinhas começam com uma barra e um asterisco /* e terminam com um asterisco e uma barra */ .
Assim:
/* Um exemplo com duas mensagens.
Este é um comentário de várias linhas.
*/
alerta('Olá');
alerta('Mundo'); O conteúdo dos comentários é ignorado, portanto, se colocarmos o código dentro de /* … */ , ele não será executado.
Às vezes pode ser útil desabilitar temporariamente uma parte do código:
/* Comentando o código
alerta('Olá');
*/
alerta('Mundo');Use teclas de atalho!
Na maioria dos editores, uma linha de código pode ser comentada pressionando Ctrl + / tecla de atalho para um comentário de linha única e algo como Ctrl + Shift + / – para comentários de várias linhas (selecione um trecho de código e pressione a tecla de atalho). Para Mac, tente Cmd em vez de Ctrl e Option em vez de Shift .
Comentários aninhados não são suportados!
Pode não haver /*...*/ dentro de outro /*...*/ .
Esse código morrerá com um erro:
/*
/* comentário aninhado?!? */
*/
alerta('Mundo');Por favor, não hesite em comentar seu código.
Os comentários aumentam a pegada geral do código, mas isso não é um problema. Existem muitas ferramentas que minimizam o código antes de publicá-lo em um servidor de produção. Eles removem comentários para que não apareçam nos scripts de trabalho. Portanto, os comentários não têm nenhum efeito negativo na produção.
Posteriormente no tutorial haverá um capítulo Qualidade do código que também explica como escrever comentários melhores.