JavaScript

All + All -

JavaScript

+ - O que é

Linguagem de Programação

+ - Linguagem de Scripting

+ - Interpretada
- Lenta
- Interpretação linha a linha
+ - Já existe JIT/VM para JS
- + - ~ JIT
  - Just In Time Compiler
- + - VM
  - Virtual Machine
- + - Implementações
  - + - ~ V8
    - Google Chrome
  - + - ~ SquirrelFish
    - Apple WebKit
  - + - ~ TraceMonkey
    - Mozilla Firefox 3.1 ALFA
    - Multiplica velocidade em 30x

Multiplataforma

+ - Roda no cliente

~
Aplicativo

Projetada para fácil integração

Fácil de aprender

Leve

+ - Especificação aberta

ECMA
ISO

+ - Descendente de

C
C++
Lisp
Scheme
Java

+ -

Semelhante ao Java, mas não é Java

Tem coisas que o Java não tem

E vice versa

+ - Comparação

JavaScript	Java
Orientada a Objetos; Herança é feita através de mecanismo de prototipação; Propriedades e métodos podem ser atribuídas a qualquer objeto dinamicamente.	Orientada a Objetos usando Classes; Objetos são divididos em classes e instâncias; Propriedades e métodos não podem ser atribuídas a qualquer objeto dinamicamente.
Tipos de dados não são declarados (dynamic typing); Exemplo: var i = 0; i = "Teste";	Tipos de dados devem ser declarados (static typing); Exemplo: int i = 0;
Não pode escrever em disco;	Pode escrever em disco;

Fonte: http://developer.mozilla.org/en/Core_JavaScript_1.5_Guide/JavaScript_Overview#What_is_JavaScript.3F

+ - Principal problema de JavaScript

Há muitas maneiras erradas de escrever código JavaScript

Desenvolvimento em JavaScript pode ser bottom-up ao invés de top-down

+ - Origem

+ -
Criação do LiveScript
- + - Netscape
  - + - Brendan Eich
    - Hoje é CTO da Mozilla
  1995
  Semelhante ao Java, mas não é Java
  
  Foi chamado de JavaScript no Netscape 2.0
+ -
Criação do JScript
- Microsoft
- 1996
- Semelhante ao JavaScript
+ -
Padronização da linguagem: ECMAScript
- + - ~ ECMA
  - European Computer Manufacturers Association
  - Padronizou a linguagem
  - ECMAScript
  - 1997
  - + - ~ Especificação 262
    - + - 1a Edição
      - 1997
      - + - Unificou as implementações
        JScript
        
        JavaScript
    - + - 2a Edição
      - 1998
      - Poucas mudanças
    - + - 3a Edição
      - 1999
      - Expressões Regulares
      - try... catch
      - Formatação de Strings
    - + - 4a Edição
      - ????
      - Grandes Mudanças na linguagem
      - JavaScript 2
      - + - Características
        Complexidade
        
        Namespaces
        
        Verificação de tipos de variáveis
      - + - Criticada por
        Microsoft
        
        Yahoo!
      - + - Defendida por
        Google
        
        Adobe
      - Cancelada por enquanto...
    - + - Edição 3.1
      - JavaScript Harmony
      - É só uma evolução da 3a Edição
      - Sobreviveu à luta da 4a Edição

+ - ~ Recursos JavaScript

+ - Recursos Online
- + - Portais
  - + - ~ JavaScript Language Resources
    - Fundação Mozilla
    - 2008
    - Portal de recursos JavaScript na Fundação Mozilla
    - ~ Link para especificação em PDF do JS
- + - Tutoriais
  - + - ~ JavaScript Tutorial
    - W3Schools
    - Tutorial Interativo
    - Um pouco antigo
    - Bastante completo
  - + - ~ A re-introduction to JavaScript
    - Simon Willison
    - Visão moderna da linguagem
    - O básico explicado
  - + - ~ JavaScript - Table of Contents
    - Peter-Paul Koch
    - 2007
    - Diversos artigos atualizados
    - + - ~ Corresponde a um livro impresso
      - ~ PPK on JavaScript
  - + - ~ Core JavaScript 1.5 Guide
    - Fundação Mozilla
    - 2008
    - Tutorial da Fundação Mozilla
    - Corresponde a um livro
  - + - ~ JavaScript Tutorial
    - + -
      - J2S
      - Colaborativo
    - + - 100% baseado em exemplos
      - Alguns são Antigos
      - A maior parte é intrusivo
- + - Especificação da Linguagem
  - + - ECMAScript Language Specification
    - Comitê Técnico ECMA
    - 2000
    - Especificação da versão 3 da Linguagem
  - + - Document Object Model (HTML) Level 1
    - W3C
    - 1998
    - Especificação do DOM Nível 1
- + - Referências
  - + - ~ Core JavaScript 1.5 Reference
    - + -
      - Fundação Mozilla
      - Colaborativo
    - 2008
    - + - Referência
      - Classes
      - Objetos
      - Operadores
      - etc
    - Guia para uso de JavaScript no Firefox
  - + - HTML and DHTML Reference
    - Microsoft
    - 2008
    - Referência de JScript, apesar do nome
  - + - ~ JScript Language Reference
    - Microsoft
    - 2007
    - + - Referência
      - Classes
      - Objetos
      - Operadores
      - etc
    - Guia para uso de JScript no Internet Explorer
  - + - ~ GotApi
    - Agregador de referências
    - Referência a partir da compilação de diversos sites
  - + - ~ QuickRef
    - Agregador de referências
    - Referência a partir da compilação de diversos sites
  - + - ~ BOM Reference
    - + -
      - Google DocType
      - Colaborativo
    - 2008
    - + - Referência dos objetos de navegador
      - window
      - document
      - etc
    - Formato Wiki
  - + - ~ Aptana JavaScript Core Reference
    - Aptana
    - 2008
    - Referência da documentação do Aptana
  - + - ~ Aptana HTML DOM Level 0
    - Aptana
    - Referência do DOM Nível 0
  - + - ~ Aptana HTML DOM Level 2
    - Aptana
    - Referência do DOM Nível 2
- + - Snippets (fragmentos de código)
  - + - ~ HTML/CSS Examples
    - + -
      - Java2s
      - Colaborativo
    - + - Fragmentos de código para trabalhar com
      - HTML
      - CSS
    - + - Exemplos
      - Alguns antigos
      - Quase todos intrusivos
  - + - ~ JavaScript DHTML Examples
    - + -
      - Java2s
      - Colaborativo
    - + - Fragmentos de código para trabalhar com
      - DHTML
    - + - Exemplos
      - Alguns antigos
      - Quase todos intrusivos
- + - Tabelas
  - + - ~ Events
    - Elisabeth Castro
    - + - Eventos associados aos elementos do (X)HTML
      - onblur
      - onchange
      - onclick
      - ondblclick
      - etc
  - + - Tabelas Microsoft
    - Microsoft
    - 2007
    - + - ~ JScript Version Information
      - Indica compatibilidade de cada função do JScript
    - + - ~ Microsoft JScript Features NON-ECMA
      - Indica as funções do JScript fora do padrão ECMA
    - + - ~ Microsoft JScript Features ECMA
      - Indica a compatibilidade do JScript com o padrão ECMA
- + - Posters
  - + - ~ JavaScript and Browser Objects Quick Reference
    - Danny Goodman
    - 2007
    - 8 páginas
    - Todas as funções do JS
    - + - Referências aos capítulos do livro do Goodman
      - JavaScript Bible
    - Indica em qual navegador cada função existe
  - + - ~ JavaScript Cheat Sheet
    - Dave Child
    - 2005
    - + - Poster com referência a
      - Funções
      - Métodos
      - XMLHTTPRequest
      - Expressões Regulares
      - Eventos
- + - Lista de Links
  - + - ~ Web Design References - JavaScript
    - Laura L. Carlson
    - 2008
    - + - Dezenas de links e assuntos
      - Acessibilidade
      - Ajax
      - Vetores
      - Input e Output
      - + - BOM
        Browser Object Model
      - + - DOM
        Document Object Model
      - Eventos
      - Formulários
      - Funções
      - JS não intrusivo
      - etc
  - + - ~ Douglas Crockford's JavaScript
    - + - Douglas Crockford
      - Trabalha no Yahoo!
    - 2008
    - Links para artigos e ferramentas do autor
  - + - ~ JavaScript Links & Resources
    - Comunidade do fórum da SitePoint
    - 2008
    - Lista de Links sobre JavaScript compiladas pela comunidade do Fórum
  - ~ Meus links sobre JavaScript
- + - Ferramentas
  - + - ~ JSLint, The JavaScript Verifier
    - DouglasCrockford
    - 2008
    - Validador de código JavaScript
    - Verifica problemas no código
+ - Livros
- + - Use a cabeça JavaScript
  - 2008
  - Michael Morrison
  - Editora AltaBooks
  - ~
  - Referência básica, mas bastante completa
- + - O Melhor do JavaScript
  - 2008
    Douglas Crockford
    Editora AltaBooks ~
    Avançado, para bons programadores
- + - JavaScript: Guia de Consulta Rápida
  - Edgard B. Damiani
  - 2006
  - Editora Novatec
  - Em Português
  - É apenas uma referência, mas é bastante completo
- + - ~ Eloquent JavaScript
  - Marijn Haverbeke
  - 2008
  - Livro interativo
  - Não tem versão papel
  - Visão moderna do JavaScript
- + - ~ PPK on JavaScript
  - Peter-Paul Kock
  - 2006
  - 1a Edição
  - Possui versão online de alguns capítulos
- + - ~ JavaScript Bible
  - Danny Goodman
  - 2007
  - 1016 páginas
  - 6a Edição
  - Referência bastante completa e atualizada

+ -

Onde pode ser executada

+ -
principalmente no navegador Web
- + - Páginas
  - Netscape
  - Internet Explorer
  - Opera
  - Firefox
  - Safari
  - etc...
- + - Extensões
  - Em Geral
  - GreaseMonkey
- + - Bookmarklets
  - JavaScript como bookmark
  - javascript:
+ -
também para automatizar programas
- PDF
- HD-DVD
- Rhino
- SpiderMonkey
- V8
+ -
e para desenvolvimento em Geral
- + - Adobe
  - AIR
  - Flash
  - Flex
- + - Microsoft
  - Silverlight
  - JScript.NET
JavaScript não é só para Web

+ - Capacidades

+ -
O que dá para fazer
- + -
  Implementar comportamento em Páginas Web
  - Menus Dinâmicos
  - Tabelas animadas
  - Animações
  - Efeitos especiais em geral
  + - DHTML
  - Reescrever o código HTML de uma página depois de carregar a página
    ~
    Reescrever o código CSS de uma página depois de carregar a página
    ~
    Criar imagens depois de carregar a página
  Validar formulários
  
  Escrever cookies
  
  Detectar qual é o navegador
  Tocar sons
  + - Emular recursos não existentes em certos navegadores
  - Corrigir bugs do IE6 e 7
    
    Implementar CSS3
    
    Implementar HTML5
  etc...
+ -
O que não dá para fazer no browser
- Ler arquivos do Sistema Operacional
  
  Executar outros programas
  
  Enviar um email sem avisar o usuário
  Ler o histórico do navegador
  
  Executar um código em páginas que venham de outro servidor
  Configurar o upload de um arquivo
  
  Fechar uma janela que não foi aberta pelo JavaScript

+ - O Mundo do ECMAScript

+ - Linguagens
- + - Principais
  - JScript
  - JScript.Net
  - ActionScript
  - JavaScript
- + - Outras
  - DMDScript
  - QTScript
  - InScript
  - ExtendScript
+ - Nomes
- + - ECMAScript 3
  - + - AKA
    - JavaScript
    - ES3
    - ECMAScript 262-3
    - JScript
  - É o padrão
- + - ECMAScript 4
  - + - AKA
    - ES4
    - JavaScript2
  - Baseado no ActionScript 3
  - Morreu...
- + - ECMAScript 3.1
  - + - AKA
    - ES3.1
  - Poucas diferenças do ES3
  - + - Defendido por
    - Yahoo!
    - Microsoft
- + - ActionScript 3
  - + - AKA
    - AS3
  - Origem do ES4
- + - Tamarin
  - VM da Adobe
  - Doada para a fundação Mozilla
  - Roda AS3
- + - Harmony
  - Sucessor do ES3.1
  - Ganhou algumas características do ES4

+ - Versões

+ - JavaScript

Versão JavaScript	Versão do Firefox / Navigator
JavaScript 1.0	Navigator 2.0
JavaScript 1.1	Navigator 3.0
JavaScript 1.2	Navigator 4.0-4.05
JavaScript 1.3	Navigator 4.06-4.7x
JavaScript 1.4
JavaScript 1.5	Navigator 6.0 Mozilla (open source browser)
JavaScript 1.6	Firefox 1.5, other Mozilla 1.8-based products
JavaScript 1.7	Firefox 2, other Mozilla 1.8.1-based products
JavaScript 1.8	Firefox 3, other Gecko 1.9-based products

Fonte: http://developer.mozilla.org/en/Core_JavaScript_1.5_Guide/About#What_you_should_already_know

+ - JScript

Host Application	1.0	2.0	3.0	4.0	5.0	5.1	5.5	5.6	5.8
Microsoft Internet Explorer 3.0	x
Microsoft Internet Information Server 3.0		x
Microsoft Internet Explorer 4.0			x
Microsoft Internet Information Server 4.0			x
Microsoft Visual Studio 6.0				x
Microsoft Internet Explorer 5.0					x
Microsoft Internet Explorer 5.01						x
Microsoft Windows 2000						x
Microsoft Internet Explorer 5.5							x
Microsoft Windows Millennium Edition							x
Microsoft Internet Explorer 6.0								X
Microsoft Windows XP								x
Microsoft Internet Explorer 8.0									x

Fonte: http://msdn.microsoft.com/en-us/library/s4esdbwz(VS.85).aspx

+ - Relacionando JScript, JavaScript e ECMAScript

JavaScript	JScript	ECMAScript
1.0 (Netscape 2.0, Março 1996)	1.0 (IE 3.0 - primeiras versões, Agosto 1996)
1.1 (Netscape 3.0, Agosto 1996)	2.0 (IE 3.0 - versões posteriorer, Janeiro 1997)
1.2 (Netscape 4.0-4.05, Junho 1997)
1.3 (Netscape 4.06-4.7x, Outubro 1998)	3.0 (IE 4.0, Oct 1997)	Edição 1 (Junho 1997) / Edição 2 (June 1998)
1.4 (Apenas para Servidor Netscape)	4.0 (Visual Studio 6, não tem versão do IE)
	5.0 (IE 5.0, Março 1999)
	5.1 (IE 5.01)
1.5 (Netscape 6.0, Nov 2000; depois no Mozilla)	5.5 (IE 5.5, July 2000)	Edition 3 (December 1999)
	5.6 (IE 6.0, Outubro 2001)
1.6 (Gecko 1.8, Firefox 1.5, Novembro 2005)		Edição 3, com melhorias complementares: E4X, `Array` extras (e.g. `Array.prototype.forEach`), `Array` and `String` generics (New in JavaScript 1.6)
1.7 (Gecko 1.8.1, Firefox 2, October 2006)		Edição 3 mais melhorias do 1.6 e generators no estilo do Python, array comprehensions (`[a*a for (a in iter)]`), escopo de bloco com `let`, destructing assigments (`var [a,b]=[1,2]`) (New in JavaScript 1.7)
1.8 (Gecko 1.9, Firefox 3, June 2008)		Edição 3 mais melhorias do 1.7, mais expression closures (`function(x) x * x`), generator expressions (New in JavaScript 1.8)
	JScript .NET (ASP.NET; sem versão do IE)
JavaScript 2.0 Cancelado!

Fonte: http://en.wikipedia.org/wiki/ECMAScript#Version_correspondence

+ -

Versões mais seguras de se trabalhar

JavaScript 1.5
JScript 5.5
ECMAScript 3

+ - Colocando JavaScript em uma página

+ - Internamente, no início da página
- + - Dentro da Tag <body>
  - Completamente Desaconselhável
    Tag <script>
    Código intrusivo
    ~
- + - Dentro da Tag <head>
  - Desaconselhável
    Tag <script>
    Sem controle do momento exato que a página termina de carregar ~
+ - Internamente
- + - No fim do <body>
  - Executa quando os elementos da página terminam de serem construídos
  - É a maneira que trabalharemos no começo!
  - ~
+ - Em um manipulador de evento
- + - No elemento <body>
  - Boa solução
    + - Tag <script> + eventos
    - onload
    - onunload
    HTML misturado com JavaScript ~
- + - Em um elemento qualquer
  - Evitar!
    + - Tag <script> + eventos
    - onclick
    - ondblclick
    - onmouseover
    - etc...
    Código intrusivo
    ~
+ - Em um arquivo externo
- Separação entre JavaScript e HTML
  Tag <script> + Atributo src
  Não impede que se coloque código intrusivo ~ ~

+ - Depurando JavaScript

+ - Função alert
- Difícil de controlar
- Interrompe a execução da página
- Não permite alteração de valores em tempo de execução
+ - ~ Firebug
- Depurador completo
- + - ~ Linha de comando
- + - ~ Comandos especiais
  - console.log
- Exclusivo para Firefox
- + - Edição de
  - HTML
  - CSS
  - JavaScript
- Profiling
- Logging
- DOM Parser
+ - ~ Firebug Lite
- Opera
- IE
- Mais simples que o Firebug
+ - ~ NitobiBug
- Opera
- IE
- Firefox
- Safari
- Melhor que o Firebug Lite
+ - ~ Companion.JS
- IE
- Versão Beta
...

+ - Características da Linguagem

+ - Divisão
- + - Core
  - Definida em ECMAScript
- + - DOM
  - Document Object Model
  - Definida pelo W3C
  - Define como representar o documento HTML
- + - BOM
  - Browser Object Model
  - Trabalha com os objetos do navegador
Identificadores
+ - Variáveis
- Criadas com var
- Não é necessário declarar o tipo;
- var i = 0;
- var nome="Bruno";
- var a, b;
+ - Tipos básicos
- + - String
  - "Este é um String"
  - 'Este é um String'
- + - Booleano
  - true
  - false
- + - Números
  - + - Inteiro
    - 1
    - 10
    - -1000
  - + - Ponto Flutuante
    - 1.1
    - 1.34
    - + - Notação Científica
      - + - 1.5E2
        1.5x10^2
        
        150
    - + - Números Hexadecimais
      - Base 16
      - + - 0xCC
        204 (decimal)
    - + - Números Octais
      - Base 8
      - + - 0010
        8 (decimal)
    - + - NaN
      - + - Not a Number
        Infinito
- + - Vetores
  - var cores = ["Azul", "Amarelo", "Laranja"];
  - var cores = new Array("Azul", "Amarelo", "Laranja");
  - var cores = Array("Azul", "Amarelo", "Laranja");
- + - Funções
  - var a = function () { alert("Sou uma funcao!"); };
    
    a();
- + - Objetos
  - Não precisam de classes
    São protótipos
    
    var flipper = { cor:"azul", rodas:4 };
    
    alert(flipper.cor);
    
    alert(flipper.rodas);
+ - Entrada de Dados
- + - <input type="text" id="op1">
  - Dentro do código HTML
- + - var op1 = document.getElementById("op1").value;
  - Dentro do código JavaScript
+ - Saída de Dados
- var res = document.getElementById("resultado");
- res.innerHTML = "Teste";

+ - Exemplos

+ - Mário em JavaScript
- ~ Em 20 Linhas
~ Editor JavaScript em JavaScript
~ Painéis deslizantes
~ Alteração do CSS

+ - Comandos Básicos

+ - Exibir janela de mensagem
- + - ~ Método window.alert
  - ~ Referência Mozilla
  - ~ Referência Microsoft
  - ~ Referência Google
  - + - Exemplo
    - alert("Olá, Mundo!");
+ - Fazer referência a um elemento em uma página HTML
- + - ~ Método document.getElementById
  - ~ Referência Mozilla
  - ~ Referência Microsoft
  - ~ Referência Google
  - + - Exemplo
    - + - HTML
      - <input type="text" id="x">
    - + - JavaScript
      - var meuX=document.getElementById("x");
+ - Escrever em um elemento HTML
- + - Propriedade Element.innerHTML
  - ~ Referência Mozilla
  - ~ Referência Microsoft
  - + - Exemplo
    - <div id="resultado"></div>
    - var res = document.getElementById("resultado");
    - res.innerHTML = "Teste";
+ - Mudar a classe de um elemento
- Propriedade Element.className