Introdução ao Javascript
Visão Geral
Javascript (ou ECMAScript) é uma linguagem de programção muito utilizada no desenvolvimento Web. Com ela, é possível programar o comportamento das páginas HTML - alterar conteúdo e atributos HTML, CSS e mais.
O JavaScript nasceu como uma linguagem voltada para processamento no navegador. Entretanto, com a chegada do Node.js, que permite a execução de Javascript fora do navegador, back-ends de websites e aplicações feitas majoritariamente em Javascript (como o Discord) também passaram a utilizar amplamente a linguagem.
Praticamente todas as páginas na internet usam Javascript para fazer operações client-side, como verificação de campos, envio de formulários, gerenciamento de cookies, solicitações de informações para o servidor etc.
Engines
Uma Engine Javascript ou Interpretador Javascript é um programa especializado em ler e processar código Javascript, todos os mais populares navegadores modernos utilizam interpretadores mas a engine especifica depende de qual navegador está sendo utilizadas, sendo possivel que diferentes interpretadores entendam código de formas diferentes. Alguns exemplos de engines e navegadores diferentes são:
Por consequência é importante sempre verificar quais features são tem suporte em quais engines, para isso você pode verificar em tabelas de compatibilidade:
É importante lembrar que mesmo navegadores sendo o principal uso de Engines qualquer software que precisa processar Javascript utiliza uma engine de forma ou outra.
Estrutura e sintaxe do JS
Script interno e externo
O código Javascript pode estar dentro ou fora de um documento HTML. Em ambos os casos, o Javascript fica dentro de uma tag <script></script>
.
Externo:
Interno (no HEAD):
Comentários
Você pode adicionar comentários no seu código para mante-lo organizado sem afetar a execução, comentários são linhas de codigo que são ignoradas pelo interpretador.
Utilizando duas barras você comenta até o fim da linha
Utilizando uma barra e um asterisco você pode comentar multiplas linhas de código
Variáveis e constantes
Variáveis são usadas para armazenar dados que podem ser modificados a qualquer momento. Em JS, as variáveis são declaradas com var
ou let
e elas podem ser praticamente qualquer coisa: números, palavras, funções etc.
Ao usar var
, se a variável for declarada fora de uma função, ela poderá ser acessada de qualquer ponto do código (dentro e fora de funções), ou seja, ela é de scope global. Caso a variável seja declarada dentro de uma função, ela só poderá ser acessada de dentro dessa função. Esse tipo de variável pode ser redeclarado - além de atualizado - no meio do código.
Já ao usar let
, a variável sempre será block scoped, ou seja, ela está limitada ao bloco de código em que foi declarada (e aos blocos mais internos a ela). Um bloco é definido por chaves (fora do bloco { dentro do bloco } fora do bloco
). Além disso, variáveis declaradas com let não podem ser redeclaradas (mas podem ser atualizadas).
Constantes também são usadas para armazenar dados, mas elas não podem ser modificadas durante a execução do programa. Uma vez declaradas com certo valor, elas não podem ser alteradas. Além disso, constantes são block scoped e não podem ser redeclaradas (nem alteradas - como foi dito logo acima).
Operadores e comparadores
Operadores aritméticos: são os operadores que realizam operações aritméticas em números (e variáveis com valores numéricos). Entretanto, em certos casos, é possível usar esses operadores com outros tipos de variáveis, como no caso de "soma" de strings (
"Nome " + "Sobrenome" -> "Nome Sobrenome"
).
Operações matematicas são "seguras" no JavaScript isso significa que você pode fazer qualquer conta e não vai gerar um erro fatal que mata o programa, no máximo retornando NaN (Not-a-Number), um valor númerico que não existe.
Comparadores:
Ainda há os comparadores lógicos. São eles:
&&
(and):(2 < 10 && 0 > 1)
--> verdade E mentira é mentira||
(or):(5 == 5 || 3 == 5)
--> verdade OU mentira é verdade!
(not):!(1 == 1)
--> NÃO verdade é mentira
E, por último, também é importante conhecer o comparador ternário, que atua como um comparador IF:
Tipos de dados
De forma simplificada, podemos resumir os tipos de dados em primitivos e complexos. Os tipos primitivos são:
string (basicamente, caractéres e palavras - sempre entre aspas).
boolean (verdadeiro ou falso).
number (número inteiro, real).
undefined (variáveis sem valor definido).
Já os tipos complexos são:
object (listas, JSON, XML, vetores, dados inexistentes etc.).
function (funções).
Obs.: Ainda há null, que é similar ao undefined, mas seu tipo é objeto, Por mais contraditório que isso seja, esse objeto null represta um dado que não existe.
Funções
Funções são blocos de códigos que executam uma tarefa. Algo deve invocar a função para ela ser executada (ela precisa de algum "gatilho", nem que seja outra parte do código "chamando" ela - ou até ela própria se invocando). Ou seja, a execução do código dentro da função ocorre quando:
Um evento ocorre (ex.: usuário pressiona um botão);
A função é invocada por outro trecho de código Javascript;
A própria função invoca-se e é executada automaticamente.
Sintaxe
Exemplo comentado
Para ajudar no entendimento da sintaxe da linguagem é bom analisar um trecho de código comentado.
Leitura adicional
Guias detalhados do JavaScript básico ao avançado
Last updated