Primeiros passos com JavaScript – part 1

JavaScript é uma linguagem de programação interpretada. Inicialmente foi projectada para rodar em navegadores e dar vida aos websites desenvolvidos na época. JavaScript evoluiu tanto que hoje não é só possível executar-lo no lado do cliente (navegador/browser) como também no lado do servidor, isso graças a plataformas como Node.js. E não fica por aí, com o JavaScript hoje, também é possível criarmos aplicações “nativas” para plataformas móveis usando tecnologias como React Native.

JavaScript sendo uma linguagem interpretada, não há a necessidade de compilar o código para que seja executado. Ou seja, programas escritos em JavaScript podem rodar directamente em qualquer navegador sem a necessidade de processos intermédiarios. Contudo, existem algumas linguagens que foram criadas afim de adicionarem mais recursos à linguagem. Estas linguagens normalmente precisam ser transpilados (traduzidos para código JavaScript) como é o caso do CoffeeScript (que já foi muito utilizado pela comunidade Rails), o TypeScript (que adiciona tipagem forte, criada pela Microsoft), etc.

Apesar do nome JavaScript, vale lembrar que a linguagem não tem nenhuma relação com a linguagem de programação Java.

Para programarmos em JavaScript não precisamos de um ambiente de programação avançando. Basta um navegador e um editor de códigos como o Notepad, Visual Studio Code (o meu favorito), Atom, ou qualquer outro editor de código da sua preferência.

Os navegadores trazem uma ferramenta muito útil na hora de desenvolver com JavaScript. Estou a falar do console que pode ser aberto através das combinações de teclas Opt+Cmd+K (Firefox – meu favorito) ou Cmd+Opt+J (Chrome) ou mesmo através da tecla F12 em outros SOs. No console, podemos testar pequenas instruções em JavaScript assim como ver possíveis erros retornados pelo nosso programa.

Com o nosso ambiente preparado, podemos começar a ver algumas instruções em JavaScript.

JavaScript pode ser incluindo em qualquer parte do nosso documento HTML usando a tag <scritp>. Vamos ver um exemplo,  criando um arquivo index.html com o código abaixo:

Abrindo este o arquivo criando acima no nosso navegador (Firefox é o meu favorito), será apresentado três caixas de alerta seguidas uma da outra.

Há um detalhe aqui que vale prestar atenção e não esquecer, pois é um grande motivo que leva os desenvolvedores web a colocarem o conteúdo JavaScript no final do documento. O detalhe é que o conteúdo apresentável do nosso documento (<p>Conteúdo do nosso documento</p>) só será apresentado depois de clicarmos no botão OK da segunda caixa de alerta. Isso acontece porque o conteúdo do nosso arquivo HTML é lido e interpretado de forma sequencial desde o TOPO até o FINAL do documento. Por isso, recomenda-se colocar o conteúdo JavaScript no final do documento. Isso não só permite que o nosso documento HTML seja carregado mais rápido, como permite que o DOM (Document Object Model) esteja disponível para ser manipulado pelo nosso JavaScript. Sabendo disso, o nosso código JavaScript será sempre colocado no final do documento de agora em diante.

Existe outra forma de incluir JavaScript à nossa página HTML, que é através de arquivos JavaScript (arquivos com extensões  .js) externos ao nosso documento HTML ou mesmo externos ao nosso servidor como veremos no exemplo abaixo:


No exemplo acima, adicionamos dois arquivos JavaScript no nosso documento HTML. O primeiro é a biblioteca jQuery localizada num servidor externo e o segundo é o arquivo onde colocaremos o nosso código JavaScript, e o mesmo está localizado no nosso servidor, junto ao nosso arquivo HTML.

O conteúdo do nosso arquivo “scripts.js” poderia ser algo como:

* alert é uma função JavaScript que permite criar uma (caixa de) mensagem de alerta.

Sintâxe Básica

A sintaxe de JavaScript é muito parecida com a de outras linguagens de programação como Java e C. As regras/características básicas que definem a sintaxe de JavaScript são:
  • Espaços em branco e mudanças de linhas são ignoradas;
  • O uso de ponto e vírgula no final de cada instrução pode ser opcional quando existe uma quebra de linha.  Minha recomendação é usar sempre o ponto e vérgula no final de cada instrução mesmo quando o seu uso é opcional.

  • Tipagem fraca e dinámica – tipagem fraca quer dizer que quando declaramos  uma variável não precisamos especificar o seu tipo de dado. E dinámica porque, a mesma variável pode armazenar diferentes tipos de dados durante a execução de um script. Todas as variáveis são objectos (referência);
  • JavaScript é case-sensitive, ou seja, diferencia maíuscula de mínusculas. O que quer dizer, “let” é diferente de “LET“.
  • Comentários em JavaScript são ignorados durante a execução do Script; nos permitem documentar o código; Comentários podem ser de uma linha “//” ou de múltiplas linhas “/* … */” :

Variáveis

Muitas vezes quando estamos a programar, precisamos guardar dados para uso posterior. Para este fim usamos as variáveis.

Para criarmos (declararmos ou definirmos) uma variável em JavaScript, usamos a palavra-chave “let”. A instrução abaixo cria uma variável com o nome “idade”:

A variável acima foi inicializada com o valor “undefined” ou seja, valor não definido. Podemos atribuir valor à nossa variável usando o sinal de igualidade (operador de atribuição):

A declaração de uma variável e a respectiva atribuição de  valor pode ser feira numa mesma  linha (instrução):

Uma vez que atribuímos um valor inteiro à nossa variável “idade”, ela passa ser do tipo INTEIRO (INTEGER). Contudo, como JavaScript é uma linguagem de tipagem dinámica, eu posso reatribuir um outro valor à variável e mudando assim o seu tipo como segue abaixo:

Na primeira linha, a nossa variável é do tipo inteiro porque atribuímos um valor INTEIRO a ela. Já na segunda linha, não estamos a redeclarar a variável mas a reatribuir um valor a ela. Sendo o novo valor uma String (cadeia de caracteres), a variável passa a ser do tipo String.

Uma string é uma cadeia de caracteres delimitadas por aspas duplas ou aspas simples. Abaixo estão as declarações válidas de variáveis de tipo String:

Podemos declarar várias variáveis e atribuir os respectivos valores numa mesma lista. Separamos as variáveis com vírgula como segue abaixo:

Resultado da execução do código acima

Apesar de deixar mais curto o nosso código, ela pode comprometer a legibilidade do mesmo. Por isso precisa ser evitado.

A declaração de variáveis também por ser feita usando a palavra-chave “var“:

Actualmente já não se usa muito esta forma pelo que seu uso é desaconselhado. Num próximo artigo falarei mais a fundo sobre a diferença entre “var” e “let“.

Existem algumas regras que devem ser seguidas na hora de declarar variáveis:

  • Nome de variáveis devem conter apenas letras, dígitos, caracteres $ e _ (underscore).
  • O primeiro caracter não pode ser um dígito.

  • Quando nomes de variáveis são compostas por duas ou mais palavras, usa-se o camelCase. Ou seja, as seguintes palavras têm a primeira letra em maiuscula, como por exemplo: “minhaVariavelLonga“.
  • Palavras reservadas (palavras-chave) não podem ser usadas como nome de variáveis. “let“, “return“, “const” são exemplos de palavras reservadas que não podem ser usadas como nome de variáveis.

Já dissemos acima que JavaScript é uma linguagem case-sensitive. Neste caso, “nome” e “Nome” são duas variáveis completamente diferentes.

Normalmente, devemos declarar uma varíavel antes de usá-la. Contudo, no passado, era tecnicamente possível usar uma variável atribuindo um valor a ela antes de declara-la. O comportamento padrão dos browsers aceitam isso hoje para manter a compatibilidade com scripts antigos.

Contudo, está é uma má prática. Podemos forçar a declação de uma variável antes do seu uso usando o “strict mode”:

Erro ao tentar usar uma variável não declarada no strict mode.

Nota: O “use strict” deve sempre ser declarada no início do documento JavaScript. Como a primeira linha do nosso arquivo. Caso contrário, não funciona.

Constantes

Quando falamos em constantes, estamos a falar de espaços reservados na memória onde armazenamos valores que não mudam com o tempo. O valor do PI por exemplo, não munda nunca. Logo, é o candidato perfeito para ser uma constante.

Para declararmos uma constante em JavaScript, utilizados a palavra reservada “const” seguido do nome da constante e do respectivo valor atribuído. Ou seja, não podemos declarar uma constante sem atribuir-lhe um valor como se pode fazer com as variáveis.

Diferente das variáveis, uma vez declarada a constante, não podemos mudar o seu valor (reatribuir valor à constante), por isso se chama constante.  O código abaixo irá causar um erro (error, can’t reassign the constant!):

Regra geral, nomes de constantes devem ser em letras maíusculas, apesar de existir excepções onde de pode declarar constantes em camelCase.

Tipos de Dados

Uma variável em JavaScript pode armazenar qualquer dado. E num dado momento este dado pode ser do tipo String e noutro pode ser um tipo númerico. Isso porque JavaScript é uma linguagem de tipagem dinámica.

JavaScript suporte 7 tipos de dados básicos, que são:

  • String: Cadeia de caracteres que podem ser delimitados por aspas simples ( ‘ ), aspas duplas ( ” ) ou backticks (acento grave) ( ). O resultado sempre será o mesmo

  • Number: Usado para representar qualquer tipo de número. Inteiro ou Ponto-flutuante (decimal).

Existem ainda para tipos númericos aqueles que podemos chamar de "valores númericos especiais" que são: Infinity (Infinito), -Infinity (menos Infinito) e NaN (lê-se "Not a Number" - Não é um número).

Infinity representa o infinito matemátio ( ∞ ). É um valor especial que é maior do que qualquer número que possamos representar. E o -Infinity é menor do que qualquer número que possamos representar.

Em JavaScript, diferente de outras linguagens, qualquer número que dividirmos por 0 (zero) retornará infinito.

NaN (not a number) representa um erro computacional. Trata-se de um resultado matemático incorrecto ou indefenido.

Se rodarmos o código acima, o resultado será NaN. Pois não podemos dividir uma String por um Número - O resultado nunca será um número :).

 

  • Boolean: variável de tipo booleano suporta apenas dois valores que podem ser true (verdadeiro) ou false (falso). Ou seja, valores lógicos.

  • Undefined: Este tipo possui apenas um valor (undefined). Representa um valor não definido que é atribuído automaticamente a qualquer variável declarada e não inicializada.

  • null: Assim como o tipo undefined suporta apenas um valor, o mesmo acontece com o tipo "null", que suporta apenas o valor "null". Serve para representar um valor vazio ou desconhecido.

  • object: O tipo object é um tipo especial que serve para representar estruturas mais complexas como vectores (arrays - colecção de dados do mesmo ou diferentes tipos). Os outros tipos acima são chamados de primitivos porque podem conter apenas um único valor. Já objectos podem armazenar coleções de dados e entidades mais complexas.

Arrays são estrutruras que usam índices (números inteiro) como vimos acima, para acessar os seus valores. contudo, podemos criar objectos com propriedades (chaves nomeadas):

  • symbol: Este tipo foi introduzido no ECMAScript 6; é usado para criar identificadores únicos para objectos (objects).

Operadores

Operador typeof

O operador typeof` retorna o tipo de dado do argumento passado. Muito útil quando queremos dar um tratamento específico para diferentes tipos de dados.

Operador de atribuição

Já temos utilizado este operador deste o início do nosso artigo. É o operador que nos permite atribuir um valor específico à uma variável ou constante. O sinal de igualidade , assim como em outras linguagens, é utilizado como operador de atribuição.

Operadores aritméticos

Nos permitem realizar operações matemáticas sobre os tipos numericos. Os operadores aritméticos são: adição ( + ), subtração  ( – ), multiplicação ( * ) e divisão ( / ). Podemos incluir também nesta lista o operador “módulo” ( % ) que retorna o resto de uma divisão.

Os operadores aritécticos funcionam apenas com tipos númericos. Contudo, existe uma excepção com o operador da soma ( + ) que funciona com tipo String, não para somar mas para concatenar.

Incremento ( ++ ) e Decremento ( — )

Estes operadores servem para incrementar e decrementar por uma unidade o valor de uma variável. Elas funcionam apenas com tipos numericos.

Os operadores de incremento e decremento podem ser utilizados como prefixo (++numero/–numero) ou como sufixo (numero++/numero–). A diferença é que quando usamos como sufixo, primeiro é feita a operação sobre a variável ou o valor e só depois o incremento acontece e como préfixo, primeiro é feito o incremento ou decremento e só depois a operação é avaliada como um todo.

Podemos combinar os operadores aritmeticos com o operador de atribuição para incrementar valores maiores de 1. Normalmente, também são chamados de operadores de atribuição.

Operadores de comparação

Servem para comparar dois ou mais valores. Retornam valores to tipo booleano. Ou seja, true ou false.

Em combinação com os operadores de comparação, também podemos utilizar o operador ternário. Para entermos o que este operador faz, vamos ver um exemplo:

Ou seja, atribui valor à uma variável mediante a avaliação booleana.

Operadores lógicos

São operadores que nos permitem obter o valor lógico (true ou false) entre valores ou variáveis. Elas são o E (&&) – conjunção, OU ( || ) – disjunção inclusiva e o NÃO ( ! ) – negação.

 

O artigo ficou muito logo. Por isso ficaremos por aqui hoje. Na segunda parte falarei estruturas de controlo, funções e estruturas de repetição.

,,