Introdução ao JavaScript

Apesar do nome, o JavaScript está relacionado apenas ao Java, porque os dois compartilham algumas semelhanças sintáticas. A sintaxe do JavaScript no desenvolvimento inicial foi livremente inspirada pela sintaxe do Java e foi chamada de "LiveScript" quando foi lançada pela primeira vez em uma versão beta do Netscape Navigator em 1995, tanto para se alinhar com algumas outras ofertas nomeadas do Netscape quanto para confirmar que ele é executado "ao vivo" no navegador. A Microsoft lançou a própria implementação de JavaScript, o "JScript", pouco tempo depois, com o Internet Explorer 3.0.

A Netscape enviou esse trabalho inicial à Ecma International, uma organização que desenvolve e publica padrões técnicos, para formalizar e detalhar como essa linguagem de script deve ser entendida por outros navegadores. Em 1997, a Ecma International lançou a ECMA-262, padronizando a primeira versão de uma linguagem de script chamada ECMAScript. ECMAScript é o padrão que informa a criação de linguagens de script mais específicas, por exemplo, o trabalho posterior da Microsoft no agora extinto JScript, no Adobe's Action e no próprio JavaScript.

Essa distinção é importante ao discutir aspectos e recursos específicos do JavaScript. "ES5" refere-se à primeira versão principal com controle de versões do padrão ECMAScript em 2009, após anos de desenvolvimento mais fragmentado. "ES6" (ou "ES2015") é uma abreviação dos padrões definidos pela sexta edição da ECMAScript, lançada em 2015. Após o ES6, novas edições da norma ECMAScript foram lançadas anualmente, com as mudanças e adições de cada edição mencionadas por ano como "ES2016" ou "ES2017".

As regras básicas

Ao contrário das linguagens compiladas, o JavaScript não é traduzido do código que uma pessoa escreve em uma forma que o navegador possa entender. Um script é enviado ao navegador junto a recursos como marcação, imagens e folhas de estilo. O navegador o interpreta da mesma forma que foi escrito: como uma sequência legível de caracteres Unicode, analisada da esquerda para a direita e de cima para baixo.

Quando um intérprete de JavaScript recebe um script, ele primeiro realiza uma análise léxica, analisando a longa string de caracteres que compõem um script e convertendo-a nos seguintes elementos de entrada discretos:

• Tokens
• Caracteres de controle de formato
• Terminadores de linha
• Comentários
• Espaço em branco (quase sempre significando tabulações e espaços).

Os resultados de um script não são mantidos após o recarregamento ou a navegação para fora da página atual, a menos que você inclua instruções explícitas sobre como fazer o contrário.

Em um alto nível, os aplicativos JavaScript são compostos de instruções e expressões.

Instruções

Uma instrução é uma unidade de instrução composta por uma ou mais linhas de código que representam uma ação. Por exemplo, é possível usar a seguinte instrução para atribuir um valor a uma variável chamada myVariable:

let myVariable = 4;

myVariable;
> 4

Para serem interpretadas corretamente, as instruções precisam terminar com ponto e vírgula. No entanto, esses pontos e vírgulas nem sempre são obrigatórios ao escrever JavaScript. Um recurso chamado inserção de ponto e vírgula automática permite que uma quebra de linha após uma instrução completa seja tratada como ponto e vírgula se a ausência do ponto e vírgula causar um erro.

O ASI é uma correção de erro, não um aspecto permissivo do JavaScript em si. Como depender demais dessa correção de erro pode levar a uma ambiguidade que corrompe o código, você ainda precisa terminar manualmente todas as instruções com ponto e vírgula.

Instruções de bloqueio

Uma instrução de bloco agrupa qualquer número de instruções e declarações dentro de um par de chaves ({}). Ela permite combinar instruções em locais em que o JavaScript espera apenas uma.

As instruções de bloco são mais frequentes ao lado das instruções de fluxo de controle, como if:

if ( x === 2 ) {
  //some behavior;
}

Expressões

Uma expressão é uma unidade de código que resulta em um valor e pode ser usada sempre que um valor é esperado. 2 + 2 é uma expressão que resulta no valor 4:

2 + 2;
> 4

O "operador de agrupamento", um par correspondente de parênteses, é usado para agrupar partes de uma expressão para garantir que uma parte da expressão seja avaliada como uma única unidade. Por exemplo, é possível usar um operador de agrupamento para override the mathematical order of operations ou melhorar a legibilidade do código:

2 + 2 * 4;
> 10

( 2 + 2 ) * 4;
> 16

let myVariable = ( 2 + 2 );

myVariable;
> 4

Digitação fraca

O JavaScript é uma linguagem com tipografia fraca, o que significa que um valor de dados não precisa ser marcado explicitamente como um tipo de dado específico. Ao contrário de uma linguagem fortemente tipada, o JavaScript pode inferir o tipo pretendido do contexto de um valor e converter o valor para esse tipo. Esse processo é chamado de coerção de tipo.

Por exemplo, se você adicionar um número a um valor de string em uma linguagem fortemente tipada, como Python, o resultado será um erro:

>>> "1" + 1
Traceback (most recent call last):
  File "<stdin>", line 1, in <module>
TypeError: cannot concatenate 'str' and 'int' objects

Em vez de retornar um erro, o JavaScript força o valor numérico a uma string e concatena os dois valores, o comportamento mais provável ao adicionar qualquer valor a uma string:

"1" + 1;
> "11"

Os tipos de dados também podem ser explicitamente forçados. O exemplo abaixo converte o valor numérico 100 para um valor de string de "100" usando o método toString integrado do JavaScript:

let myVariable = 100;

typeof myVariable;
> "number"

myVariable = myVariable.toString();
> "100"

typeof myVariable;
> "string"

Diferenciação entre maiúsculas e minúsculas

Diferentemente do HTML e da maioria dos CSS, o próprio JavaScript diferencia maiúsculas de minúsculas. Isso significa que você precisa sempre usar letras maiúsculas de forma consistente, desde as propriedades e os métodos integrados à linguagem até os identificadores que você mesmo define.

console.log( "Log this." );
> Log this.

console.Log( "Log this too." );
> Uncaught TypeError: console.Log is not a function

const myVariable = 2;

myvariable;
> Uncaught ReferenceError: variablename is not defined

myVariable;
> 2

Espaço em branco

O JavaScript não é sensível a espaços em branco. Isso significa que o intérprete ignora a quantidade e o tipo (tabulações ou espaços) de espaços em branco usados.

                     console.log(       "Log this"  );console.log("Log this too");
> "Log this."
> "Log this too."

No entanto, a presença de espaços em branco pode ser significativa como um separador entre tokens lexicos:

let x;

[tokens: [let] [x] ]

letx;
> Uncaught ReferenceError: letx is not defined

[tokens: [letx] ]

Quando o espaço em branco é usado para separar tokens lexicos significativos, o analisador ignora a quantidade e o tipo de espaço em branco:

let           x                             =                           2;

[tokens: [let] [x] [=] [2] ]

O mesmo acontece com as quebras de linha, embora haja casos em que elas podem causar problemas ao encerrar uma instrução prematuramente:

let x
=
2;

[tokens: [let] [x] [=] [2] ]

Estilisticamente falando, alguns tipos de declaração frequentemente ocupam uma única linha:

let x = 1;
let y = 2;

Algumas declarações costumam usar várias linhas:

if ( x == 2 ) {
  //some behavior;
}

No entanto, estas convenções são estritamente para fins de legibilidade. O JavaScript interpreta os exemplos anteriores da mesma maneira que:

let x=1;let y=2;

if(x==2){}

Por isso, um processo automatizado que remove espaços em branco não essenciais dos arquivos de script para reduzir o tamanho da transferência é uma etapa comum na preparação do JavaScript para um ambiente de produção, além de várias outras otimizações.

O uso de caracteres de espaço em branco no JavaScript é uma questão de preferências do autor e do mantenedor. Projetos JavaScript com vários desenvolvedores que contribuem com códigos geralmente sugerem ou aplicam determinadas convenções de espaço em branco para garantir uma formatação consistente do código, por exemplo, o uso de tabulações ou espaços para recuar instruções aninhadas:

let myVariable = 10;

if ( typeof myVariable === "number" ) {
    console.log( "This variable is a number." );
    if( myVariable > 5 ) {
     console.log( "This variable is greater than five." );
    }
}

> "This variable is a number."
> "This variable is greater than five."

Teste seu conhecimento