Fundamentos da Sintaxe JavaScript

O JavaScript, frequentemente abreviado como 'JS', é uma linguagem de script para navegadores.

Características da Linguagem de Programação JavaScript

  • JavaScript é uma linguagem de script de programação.
  • JavaScript é uma linguagem interpretada.
  • A estrutura sintática do JavaScript é muito semelhante à do C++ e Java.
  • JavaScript é uma linguagem de tipagem fraca (weakly typed).
  • JavaScript é uma linguagem orientada a eventos.
  • JavaScript é baseada em objetos.
  • JavaScript tem portabilidade multiplataforma.
  • JavaScript é uma linguagem segura e simples.

História de Desenvolvimento do JavaScript

  • No final de 1990, Tim Berners-Lee, cientista do CERN (Organização Europeia para a Investigação Nuclear), inventou a World Wide Web.
  • No final de 1992, o NCSA (National Center for Supercomputing Applications) começou a desenvolver um navegador independente chamado Mosaic.
  • Em outubro de 1994, Marc Andreessen, um dos principais programadores do NCSA, juntou-se ao capitalista de risco Jim Clark para fundar a Mosaic Communications Corporation, que mais tarde mudou seu nome para Netscape.
  • Em dezembro de 1994, a Netscape lançou o navegador Navigator 1.0, conquistando mais de 90% de participação de mercado.
  • Em 1995, o programador da Netscape, Brendan Eich, projetou o LiveScript 1.0, que posteriormente foi renomeado para JavaScript.
  • Em março de 1996, o navegador Navigator 2.0 incorporou oficialmente a linguagem de script JavaScript.
  • Em agosto de 1996, a Microsoft imitou o JavaScript desenvolvendo uma linguagem semelhante chamada JScript, incorporada no IE3.0.
  • Em novembro de 1996, a Netscape decidiu submeter o JavaScript à ECMA (European Computer Manufacturers Association), esperando torná-lo um padrão internacional para competir com a Microsoft.
  • Em julho de 1997, a ECMA publicou a primeira versão do documento padrão 262 (ECMA-262), definindo o padrão para linguagens de script de navegador e denominando essa linguagem como ECMAScript. Esta versão é o ECMAScript 1.0.
  • Em junho de 1998, o ECMAScript 2.0 foi lançado.
  • Em dezembro de 1999, o ECMAScript 3.0 foi lançado.
  • Em julho de 2008, devido a divergências intensas sobre quais recursos deveriam incluir na próxima versão, a ECMA decidiu interromper o desenvolvimento do ECMAScript 4.0. Uma pequena parte das melhorias propostas foi lançada como ECMAScript 3.1.
  • Em dezembro de 2009, o ECMAScript 5.0 foi oficialmente lançado.
  • Em junho de 2011, o ECMAScript 5.1 foi lançado e tornou-se um padrão ISO internacional.
  • Em 17 de junho de 2015, o ECMAScript 6 teve sua versão oficial lançada, também conhecida como ECMAScript 2015.
  • Desde então, a ECMA lança uma nova versão do ECMAScript todo mês de junho (ES2016, ES2017, ES2018).

Áreas de Aplicação do JavaScript

  • Frontend Web (efeitos de página, renderização de página)
  • Backend Web (Node.js)
  • App Híbrido (Hybrid App)
  • Aplicações de Desktop (como produtos da NetEase Youdao, Wandoujia)
  • Jogos (Cocos2d.js, Unity3D)

Componentes do JavaScript

  • ECMAScript (sintaxe principal; ActionScript também usa a sintaxe ECMAScript)
  • BOM (Modelo de Objetos do Navegador)
  • DOM (Modelo de Objetos do Documento)

Uso Básico em HTML e Sintaxe Fundamental

Incorporando JavaScript no HTML

Escrever código dentro de uma tag <script>.

<script>
    alert('Olá, mundo');
</script>

Importando um arquivo de script externo.

<script src="./meuScript.js"></script>

Definidno código através de atributos de evento dentro dos elementos.

<button onclick="alert('Ai, dói!')">Clique-me</button>

Comentários em JavaScript

Comentário de linha única.

// Isto é um comentário

Comentário de múltiplas linhas.

/*
Comentário de
múltiplas linhas.
*/

Término de Instruções

alert('Olá a todos');
alert('Olá a todos');

alert('Olá a todos')
alert('Olá a todos')
alert('Olá a todos')

Saída de Conteúdo

document.write('Você gosta de mim?'); // Escreve diretamente na página
console.log('Olá, mundo'); // Saída no console

Variáveis

// JavaScript usa a palavra-chave 'var' para definir variáveis
var nomeUsuario = 'ana_silva'

// ES6 introduziu a palavra-chave 'let'
let idadeUsuario = 25

Convenções de nomenclatura para identificadores:

  • Os identificadores devem ser compostos por "dígitos", "letras", "_" ou "$", e não podem começar com um dígito.
  • Os identificadores não podem conflitar com palavras reservadas.
  • Diferencia maiúsculas de minúsculas.

Exemplos de palavras reservadas: abstract, arguments, boolean, break, class, const, continue, debugger, default, delete, do, else, enum, export, extends, false, finally, for, function, if, import, in, instanceof, let, new, null, return, super, switch, this, throw, true, try, typeof, var, void, while, with, yield.

Tipos de Dados em JavaScript

Tipos de Dados

Os tipos de dados em JavaScript são divididos em tipos primitivos e tipos de objeto. Vamos primeiro entender os tipos primitivos.

Tipos Primitivos

  • Número (Number)
  • String (String)
  • Booleano (Boolean)
  • Nulo (null)
  • Indefinido (undefined)

Tipos de Objeto

Incluem: Array, Function, Date, RegExp, Error, Object, etc.

Verificação de Tipo

console.log(typeof(42));
console.log(typeof(nomeUsuario));

Tipo Número (Number)

Definição

Pode ser representado em notação decimal, hexadecimal ou notação científica.

Problema de Precisão de Ponto Flutuante

console.log(0.1 + 0.2); // Resultado: 0.30000000000000004

Intervalo Numérico

Intervalo representável: -5e324 ~ 1.7976931348623157e+308

Se ultrapassado, exibirá Infinity (infinito positivo) ou -Infinity (infinito negativo).

isFinite(numero); // Função para verificar se está dentro do intervalo

Valor Especial NaN (Not A Number)

Significa 'Não é um Número', seu tipo é Number, mas não é um número convencional. Não é igual a nenhum valor, e qualquer operação com ele resulta em NaN.

isNaN(valor); // Função para verificar se é NaN

Tipo String (String)

Declaração

Pode ser declarada com aspas duplas, aspas simples ou template strings (ES6).

let mensagem = `
Olá, meu nome é ${nomeUsuario}.
Seja bem-vindo!
Hoje eu tenho ${idadeUsuario} anos.
`;
// Template strings permitem múltiplas linhas e interpolação de variáveis com ${}.

Operador de Concatenação

O operador + também é usado para concatenar strings.

Caracteres de Escape

Exemplos: \b (retrocesso), \n (nova linha), \r (retorno de carro), \t (tabulação), \' (aspas simples), \" (aspas duplas), \\ (contrabarra).

Tipo Booleano (Boolean)

let ativo = true;
let inativo = false;

while (ativo) {
    // ...
}

null e undefined

  • null representa um objeto intencionalmente vazio.
  • undefined indica que uma variável foi declarada, mas não lhe foi atribuído um valor.

Conversão de Tipo de Dados

Conversão Explícita (Type Casting)

Funções como Number(), parseInt(), parseFloat(), String(), Boolean().

Conversão Implícita (Type Coercion)

Quando o JavaScript espera um valor do Tipo A e recebe do Tipo B, ele converte automaticamente para o Tipo A.

Regras de Conversão (Exemplos)

Valor Original Para Number Para String Para Boolean
false 0 "false" false
true 1 "true" true
0 0 "0" false
1 1 "1" true
"0" 0 "0" true
"texto" NaN "texto" true
null 0 "null" false
undefined NaN "undefined" false

Operadores em JavaScript

Operadores Aritméticos

Incluem: + (adição), - (subtração), * (multiplicação), / (divisão), % (módulo), - (unário negativo), + (unário positivo), ++ (incremento), -- (decremento).

Operadores de Comparação (Relacionais)

Incluem: == (igual), === (estritamente igual), != (não igual), !== (estritamente não igual), <, >, <=, >=, in (verifica se uma propriedade existe em um objeto), instanceof (verifica a instância).

Operadores Lógicos

Incluem: && (E lógico), || (OU lógico), ! (NÃO lógico).

Operadores Bitwise (Bit a Bit)

Incluem: & (E), | (OU), ^ (OU exclusivo), ~ (NÃO), << (deslocamento à esquerda), >> (deslocamento à direita).

Operadores de Atribuição

Incluem: =, +=, -=, /=, *=, %=, <<=, >>=, &=, |=, ^=.

Outros Operadores

Incluem: Operador condicional (ternário) ?:, typeof (retorna o tipo), delete (remove uma propriedade), void (avalia uma expressão e retorna undefined), operador vírgula ,.

Precedência de Operadores (Resumo)

Operador Descrição
. [] () Acesso a propriedades, índices de array, chamadas de função.
++ -- ! ~ typeof void delete new Operadores unários.
* / % Multiplicação, divisão, módulo.
+ - Adição, subtração, concatenação de strings.
<< >> >>> Deslocamento de bits.
< <= > >= instanceof Comparações.
== != === !== Igualdade.
& E bit a bit.
^ OU exclusivo bit a bit.
| OU bit a bit.
&& E lógico.
|| OU lógico.
?: Condicional (ternário).
= += -= etc. Atribuição.
, Operador vírgula.

Estruturas de Controle de Fluxo

Estruturas Condicionais

Estrutura if simples.

if (condicao) {
    // codigo
}

Estrutura if...else.

if (condicao) {
    // codigo se verdadeira
} else {
    // codigo se falsa
}

Estrutura if...else if encadeada.

if (condicao1) {
    // codigo
} else if (condicao2) {
    // codigo
} else {
    // codigo
}

Estrutura switch.

switch (expressao) {
    case valor1:
        // codigo
        break;
    case valor2:
        // codigo
        break;
    default:
        // codigo
}

Estruturas de Repetição (Loops)

Loop while.

while (condicao) {
    // codigo
}

Loop do...while.

do {
    // codigo
} while (condicao);

Loop for.

for (inicializacao; condicao; incremento) {
    // codigo
}

// Exemplo: log dos números de 1 a 5
for (let contador = 1; contador <= 5; contador++) {
    console.log(contador);
}

Loop for...in (para iterar sobre propriedades enumeráveis de um objeto).

const pessoa = {nome: 'Carlos', profissao: 'Engenheiro'};
for (let chave in pessoa) {
    console.log(chave + ': ' + pessoa[chave]);
}

Loop for...of (ES6, para iterar sobre objetos iteráveis como arrays, strings).

const frutas = ['maçã', 'banana', 'laranja'];
for (let fruta of frutas) {
    console.log(fruta);
}

Outras Instruções

Instruções de Salto: break (sai do loop), continue (pula para a próxima iteração), return (retorna de uma função).

Tratamento de Erros:

try {
    // codigo que pode gerar erro
} catch (erro) {
    // codigo para tratar o erro
} finally {
    // codigo que sempre executa
}

Modo Estrito (Strict Mode):

"use strict";
// codigo em modo estrito

Tags: javascript ES6 DOM BOM ecmascript

Publicado em 7-2 20:36