1. O que é JavaScript

História

JavaScript iniciou-se como uma pequena linguagem de script do navegador NetScape e, seguido pelos outros navegadores (Internet Explorer), virou o padrão de linguagem client-side da web.

Em sua história recente também se tornou uma linguagem bastante utilizada server-side, grande parte graças ao advento do Node.js (que veremos mais a frente).

Apesar do nome, JavaScript não é relacionado à linguagem Java (além de uma semelhança muito pequena no que diz respeito a sintaxe). Essa (infeliz) escolha foi feita tendo marketing em mente, já que na epóca a linguagem Java era muito popular.

ECMAScript

Originalmente JavaScript foi desenvolvido sem que qualquer orgão mantivesse um padrão da linguagem, até que em meados dos anos 90 foi entrega a ECMA para padronização, nascendo assim o padrão ECMAScript.

Atualmente (2013) estamos na versão 5 do padrão ECMAScript (versão esta utilizada na apresentação). A versão 6 está prestes a ser oficializada, e diversos fabricantes de engines já suportam (parcialmente).

JavaScript, a linguagem

Wikipedia:

• Herança baseada em protótipos
• Linguagem script
• Tipagem dinâmica
• Funções são cidadãos de primeira classe
• Suporta código à la programação funcional

Herança baseada em protótipos

Herança baseada em protótipos é um estilo de Programação Orientada a Objeto em que a herança é feita através da clonagem de objetos já existentes (servindo como "protótipo"). Essa característica substitui o papel feito pelas classes em outras linguagens.

Veremos como isso funciona mais a frente.

Linguagem script

Linguagem script se refere a linguagens que são interpretadas, e não compiladas, e geralmente desempenham funções menores dentro de um sistema mais completo.

Tipagem dinâmica

Uma variável pode assumir qualquer valor, independente de seu tipo e sem qualquer conversão.

var v = 12;
v = 'teste';
v = new Date();

Funções são cidadãos de primeira classe

Isso significa que você pode passar funções como paramêtros, criar funções anônimas, retornar funções como valor de outras funções e atribuir funções a variáveis.

function retorna_funcao() {
    return function() { // retornando uma função, que no caso é anônima
        console.log("Hello world");
    }
}

var retorno = retorna_funcao(); // atribuindo a função retornada a uma variável

retorno(); // chamando a função armazenada na variável

Suporta código à la programação funcional

JavaScript permite misturar os paradigmas procedural, orientado a objetos e também funcional.

Uma das características de linguagens funcionais é a passagem de funções anônimas com parâmetro (como visto no slide anterior).

Outra característica importante é o conceito de closure, que veremos mais a frente.

2. Executando

Seu navegador

Uma forma não muito prática, mais ainda sim fácil é escrever uma página e executá-la em seu próprio navegador.

Ferramentas de desenvolvedores

A maioria dos navegadores possui ferramentas de desenvolvimento. Nela normalmente é possível executar um código JavaScript qualquer.

Scratchpad (Firefox)

Firebug (Firefox)

Chrome DevTools (Chrome)

Ferramentas para desenvolvedores (Internet Explorer)

Console do Node.js

O Node.js (Windows, Mac OS X, Linux, SunOS) possui com um console REPL.

JSFiddle (online)

O JSFiddle permite você editar e executar JavaScript online (assim como HTML e CSS também).

3. Estruturas de Controle e Operadores

Estruturas de Controle

No que diz respeito a estruturas de controle, JavaScript não possui muitas peculiaridades de se comparado a outras linguagens. Elas são as tradicionais if, else if, else, while, do..while, for, continue, break, switch, default.

Além destas, existe ainda a construção for..in. Veremos o papel do operador in logo a frente, mas desde já é bom ressaltar: ao contrário do que pode parecer, for..in não é o equivalente ao tradicional loop foreach.

Operadores

Com operadores também não é muito diferente.

Operadores de atribuição: +=, -=, *=, /=, %=, <<=, >>=, >>>=, &=, ^=, |=.

Operadores de comparação: ==, ===, !=, !==, >, >=, <, <=.

Operadores aritméticos: +, -, *, /, %, ++, --.

Operadores de operação binária (bitwise): &, |, ^, ~, <<, >>, >>>.

Operadores lógicos: &&, ||, !.

Operadores de string: +, +=.

Operadores especiais: (vírgula), delete, in, instanceof, new, typeof, void.

===

Além do tradicional operador ==, JavaScript também o chamado operador de comparação estrita: ===.

A diferença básica é que o operador == realiza a comparação de dois valores, enquanto o operator === compara não só os valores mas também seus tipos.

Em JavaScript diversos valores diferentes assumem o valor false em uma expressão condicional (falaremos mais sobre isso quando falarmos sobre o tipo Boolean, como 0 ou "" (string vazia). Algumas comparações que resultariam em um resultado verdadeiro com o operador == podem resultar em falso com ===, pois os tipos envolvidos são diferentes. Exemplo:

> 0 == false
true
> 0 === false
false
> 0 == "0"
true
> 0 === "0"
false

in e delete

O operador in verifica se a propriedade existe no objeto.

delete é o operador dedicado a remover uma propriedade de um objeto.

Mais detalhes sobre estes operadores na seção Objetos.

new

void

O operator void executa a expressão e retorna undefined, independente do resultado original retornado.

> typeof void "teste"
"undefined"

4. Tipos de Dados

4. Tipos de Dados

Uma variável não tem um tipo, mas um valor tem.

• Primitivos
  • Number
  • String
  • Boolean
• Compostos
  • Function
  • Array
  • Date
  • RegEx
• Especiais
  • Null
  • Undefined

Number

JavaScript não dedica vários tipos diferentes para representação de números como outras linguagens (int, long, float, double, etc).

Todos números em JavaScript são do tipo Number.

E, por utilizar o mesmo formato para armazenar tanto números inteiros como fracionários, existem alguns comportamentos que deve-se ficar atento:

> 0.1 + 0.2
0.30000000000000004

String

Strings em JavaScript são sequência de caracteres Unicode (UTF-16).

Não existe tipo char, para representar apenas um caractere utiliza-se também strings.

Boolean

Tipo booleano tradicional que representa true ou false.

Por sua natureza dinâmica, JavaScript considera os sequintes valores como false:

false
undefined
null
0
""

Mas cuidado:

var booleano = new Boolean("false"); // booleano == true

Primitivos, mas objetos

Apesar de chamarmos de primitivos, os tipos vistos possuem métodos e atributos como qualquer objeto:

> "hello world".length
11
> "hello world".toUpperCase()
"HELLO WORLD"
> 9876543210 .toExponential()
"9.87654321e+9"

Note no exemplo que existe um espaço entre 9876543210 e .toExponential(). Isso é necessário para não confundir o interpretador com o ponto decimal (pode-se utilizar também parênteses).

Function

Não se declara o tipo de retorno nem dos paramêtros das funções em JavaScript.

Se nada é retornado no corpo da função undefined é retornado.

Um número qualquer de paramêtros pode ser passado para uma função, independente de quantos paramêtros ela possuir em sua declaração. Paramêtros não passados ficam com o valor undefined no corpo da função. É possível obter os paramêtros passados independente da declaração da função, através do objeto arguments.

Array

Um array vazio em JavaScript é representado por [] ou então new Array().

Podemos inicializar um array já com valores:

var pessoas = [ "Alice", "Bruno", "Camila", "Diego" ];

O array do JavaScript é um array dinâmico, isto é, ele é redimensionável:

pessoas.push("Elisa"); // adicionando um elemento ao final do array

Date

O tipo Date armazena ano, mês, dia, hora, minuto, segundo, milissegundo e fuso horário.

Obtendo a data e hora atual do sistema:

> new Date();
Date {Fri Jan 08 2014 14:15:39 GMT-0200 (Hora oficial do Brasil)}

Cuidado que o objeto Date considera os meses na faixa de 0 a 11 ao invés de 1 a 12:

var natal2013 = new Date(2013, 11, 25);
console.log(natal2013); // Date {Wed Dec 25 2013 00:00:00 GMT-0200 (Hora oficial do Brasil)}

RegEx

O tipo RegEx possui uma construção especial no formato /padrão/flags.

/^[a-z0-9]+$/i é equivalente a new RegEx("^[a-z0-9]+$", "i").

Null e Undefined

null e undefined pode ser um pouco confuso, mas em resumo:

undefined é utilizado pelo próprio JavaScript que nenhum valor foi definido para o que estiver em questão (como retorno da função), já null é um valor normalmente atribuido pelo próprio desenvolvedor (não é assumido pelo JavaScript).

5. Objetos

Objetos

Um objeto em JavaScript é apenas uma coleção de chaves e valores.

Criando um objeto vazio

Cria-se um objeto vazio (sem propriedades) da seguinte forma:

var objeto = {};

var objeto = new Object();

Criando um objeto com propriedades

Pode-se criar com suas propriedades já definidas:

var pessoa = {
    nome: 'José',
    idade: 30,
    endereco: {
        logradouro: 'Rua Um, N°2',
        bairro: 'Centro',
        cidade: {
            nome: 'Curitiba',
            estado: 'Paraná'
        }
    }
};

Acessando propriedades em um objeto

É possível acessar (e definir) novas propriedades via operador []:

window.alert('teste')

window['alert']('teste')

Criando propriedades em um objeto

Pode-se criar novos campos e métodos em um objeto em tempo de execução, exemplo:

window.cumprimentar = function() {
    this.alert('olá');
};
window.cumprimentar();

Verificando as propriedades de um objeto

JavaScript possui oferece duas construções para verificar se um objeto contém certa propriedade, o operador in e o método hasOwnProperty. O primeiro verifica também a cadeia de prototipação (herança), enquanto o segundo apenas os do próprio objeto (por isso a palavra own, próprio).

> 'toString' in new Object();
true
> new Object().hasOwnProperty('toString');
false

Removendo propriedades em um objeto

Pode-se também remover uma propriedade via operador delete:

delete window.cumprimentar;
window.cumprimentar(); // "TypeError: window.cumprimentar is not a function" (pois cumprimentar agora é undefined)

6. JSON

JSON

JSON é um formato de dados que representa objetos na forma de chave-valor. É uma alternativa ao popular formato XML.

Foi baseado na notação utilizada pelo JavaScript (vide o nome, JavaScript Object Notation).

Apesar da similaridade, nem todo objeto JavaScript é um JSON válido. As chaves de um arquivo JSON devem ser strings; não se define funções em JSON, dentro outros.

Exemplo de arquivo JSON

{
    "estabelecimento": "padaria",
    "endereco": {
        "logradouro": "Rua Francisco Chico, N°1337",
        "cidade": "Belo Horizonte",
        "estado": "Minas Gerais",
        "cep": 3123456
    },
    "produtos": [
        {
            "nome": "pão",
            "preco": "0.35"
        },
        {
            "nome": "leite",
            "preco": "1.90"
        },
        {
            "nome": "bolo",
            "preco": "4.80"
        },
        {
            "nome": "queijo",
            "preco": "9.20"
        }
    ]
}

Objeto JSON

Existe o objeto JSON em JavaScript, que fornece dois métodos muito úteis: stringify, que transforma o objeto JavaScript em JSON; parse, que faz o processo contrário, transformando uma string com notação JSON em um objeto JavaScript.

var pessoa = JSON.parse("{ \"nome\": \"fulano\", \"telefone\": \"0123456789\" }");
console.log(pessoa.nome); // fulano
console.log(pessoa.telefone); // 0123456789
console.log(JSON.stringify(pessoa)); // "{"nome":"fulano","telefone":"0123456789"}"

7. Prototype e Herança

8. DOM

Document Object Model

DOM (Document Object Model) é o nome dado a estrutura de um documento HTML e XML. O documento é representado como um grupo de nós (árvore) e objetos com suas respectivas propriedades.

API

Quando em um contexto de um web browser você terá a sua disposição uma API para manipulação do DOM, com métodos como: document.getElementyById, parentNode.appendChild, element.addEventListener, etc.

Apesar da API, é muito comum manipular o DOM através de uma biblioteca como jQuery.

9. Node.js

10. Bibliografia e Recomendações de Leitura

Bibliografia

Livros

Links

MDN

MSDN

JavaScript Garden

Codecademy

Code School

Eloquent JavaScript

nodeschool.io

Fim

☺