Escolar Documentos
Profissional Documentos
Cultura Documentos
Javascript
3a edição
Edgard B. Damiani
Novatec
Copyright 2006 da Novatec Editora Ltda.
ISBN: 978-85-7522-150-1
Parte I – ECMAScript.....................................................................7
Introdução ao ECMAScript......................................................7
O padrão ECMAScript.......................................................7
Implementações do padrão ECMA-262...............................8
Edições do padrão ECMA-262............................................8
Suporte dos navegadores ao padrão ECMA-262...................8
Conceitos básicos.....................................................................9
JavaScript é uma linguagem orientada a objetos...................9
...baseada em protótipos.....................................................9
Executando código JavaScript........................................... 10
Forma 1:.................................................................... 10
Forma 2:.....................................................................11
Forma 3:.....................................................................11
Identificadores..................................................................11
Nomeando identificadores...........................................11
Palavras reservadas do JavaScript.................................11
Variáveis e constantes....................................................... 12
Declaração e escopo................................................... 12
Tipos de dados do ECMAScript........................................ 13
Dados primários ou primitivos................................... 13
Dados especiais.......................................................... 14
Dados compostos ou de referência.............................. 15
Conversão de dados................................................... 15
Por valor X por referência........................................... 15
Passando valores para funções.................................... 16
Funções........................................................................... 16
Criando funções........................................................ 16
Objetos............................................................................ 17
Criando objetos......................................................... 17
Acessando propriedades e métodos............................. 18
Personalizando objetos............................................... 18
Apagando propriedades e métodos............................. 18
Herança de objetos.................................................... 19
Expressões regulares......................................................... 19
Opções da pesquisa................................................... 20
Sintaxe de expressões regulares................................... 20
Quantificadores..........................................................21
Expressões entre colchetes e atalhos............................ 22
Expressões entre parênteses........................................ 23
Instruções.............................................................................. 24
Operadores............................................................................ 30
Aritméticos...................................................................... 30
Lógicos e relacionais........................................................ 30
Bitwise.............................................................................31
Atribuição e atribuição composta..................................... 32
Outros operadores........................................................... 32
Precedência de operadores................................................ 32
Objetos do ECMAScript......................................................... 33
arguments........................................................................ 33
Array............................................................................... 33
Boolean...........................................................................36
Date................................................................................ 37
Error...............................................................................40
Function...........................................................................41
Global............................................................................. 42
Math...............................................................................44
Number........................................................................... 45
Object............................................................................. 47
RegExp............................................................................48
String.............................................................................. 50
Sumário
Parte II – DOM............................................................................ 55
Introdução ao DOM............................................................... 55
Versões e divisões do DOM.............................................. 55
Tratando exceções............................................................56
Verificando a compatibilidade do navegador......................56
Seção I – DOM Core nível 2................................................... 57
Attr 57
Document....................................................................... 57
Element........................................................................... 58
Node...............................................................................60
NamedNodeMap............................................................. 63
Seção II – DOM HTML nível 2...............................................64
Acessando elementos do DOM HTML..............................64
Objetos do DOM HTML.................................................. 65
HTMLElement.......................................................... 65
Anchor <a>...............................................................66
Applet <applet> obsoleto......................................................................................67
Area <area>............................................................... 67
Base <base />............................................................68
BaseFont <basefont> obsoleto......................................................................... 68
Body <body>.............................................................68
Br <br />................................................................... 69
Button <button>....................................................... 69
Collection.................................................................. 69
Div <div>.................................................................. 70
Directory <dir> obsoleto.......................................................................................70
DList <dl> obsoleto....................................................................................................70
document...................................................................71
FieldSet <fieldset> obsoleto................................................................................72
Font <font> obsoleto.................................................................................................72
Form <form>............................................................. 73
Frame <frame>.......................................................... 73
FrameSet <frameset>................................................. 74
Hr <hr />.................................................................. 74
Head <head>............................................................. 74
Heading <h1> ... <h6>.............................................. 74
Html <html>............................................................. 75
IFrame <iframe>....................................................... 75
Image <img>............................................................. 75
Input <input>........................................................... 76
IsIndex <isindex> obsoleto................................................................................. 77
Label <label>............................................................77
Legend <legend>....................................................... 78
Define um título para um FieldSet....................... 78
Li <li>....................................................................... 78
Link <link />............................................................. 78
Map <map>.............................................................. 79
Menu <menu> obsoleto.........................................................................................79
Meta <meta />.......................................................... 79
Mod <ins>, <del>.....................................................80
Object <object>.........................................................80
OList <ol>.................................................................81
OptGroup <optgroup>...............................................81
Option <option>....................................................... 82
OptionsCollection...................................................... 82
Paragraph <p>.......................................................... 83
Param <param>......................................................... 83
Pre <pre>.................................................................. 83
Quote <q>, <blockquote>......................................... 83
Script <script>........................................................... 83
Select <select>...........................................................84
Sumário
Style <style>.............................................................. 85
Table <table>............................................................86
TableCaption <caption>.............................................88
TableCell <th>, <td>.................................................88
TableCol <col>, <colgroup>...................................... 89
TableRow <tr>...........................................................90
TableSection <tbody>, <tfoot>, <thead>.....................91
TextArea <textarea>....................................................91
Title <title>............................................................... 92
UList <ul>................................................................ 92
Seção III – Objeto window (DOM Views nível 2)..................... 93
history............................................................................. 93
location........................................................................... 93
navigator......................................................................... 94
screen.............................................................................. 95
window........................................................................... 95
Seção IV – DOM Events nível 2............................................ 100
Introdução..................................................................... 100
O que são eventos?................................................... 100
O que são listeners?................................................. 100
Fluxo de eventos....................................................... 101
Cancelando eventos.................................................. 101
Criando eventos – document.createEvent................... 101
A interface EventTarget.................................................... 101
Event..............................................................................102
Categorias de eventos..................................................... 104
MouseEvent............................................................. 104
MutationEvent......................................................... 105
UIEvent................................................................... 106
Lista de eventos..............................................................107
HTMLEvents............................................................107
MouseEvents........................................................... 108
MutationEvents....................................................... 109
UIEvents................................................................... 110
Incompatibilidades do IE................................................. 110
event é um objeto global............................................ 110
Fases de captura........................................................ 110
Registrando listeners................................................. 110
Propriedades do objeto event do IE.............................111
Seção V – Style nível 2 (CSS).................................................. 112
Introdução...................................................................... 112
Inserindo CSS........................................................... 112
Tipos de regras CSS................................................... 112
Estrutura CSS de um documento..................................... 113
Hierarquia de elementos........................................... 113
Pai, filho, descendente e ancestral............................... 114
Herança de propriedades........................................... 114
Elementos-bloco e elementos inline........................... 114
Área de conteúdo dos elementos................................ 115
Elementos substituídos............................................. 115
Geração automática de elementos inline.................... 116
Alterando o comportamento visual dos elementos..... 116
Acessando folhas de estilo............................................... 116
Objeto CSSStyleSheet................................................ 116
Coleção MediaList.................................................... 117
Coleção StyleSheetList.............................................. 118
Manipulando regras de folhas de estilo...................... 119
CSSRule.................................................................... 119
CSSStyleDeclaration................................................. 120
CSSValue.................................................................. 121
CSSCharsetRule........................................................122
Sumário
CSSFontFaceRule......................................................122
CSSImportRule.........................................................122
CSSMediaRule..........................................................122
CSSPageRule.............................................................123
CSSStyleRule............................................................123
CSSUnknownRule....................................................124
Regras inline e Propriedades CSS.....................................124
Acessando regras de estilo inline................................124
Propriedades CSS......................................................124
Convenções da listagem de propriedades CSS........... 128
Lista de propriedades CSS........................................ 130
Informações adicionais................................................................139
Onde obter mais informações................................................139
Comentários e sugestões.......................................................139
Notação utilizada neste guia..................................................139
Introdução ao ECMAScript
Parte I – ECMAScript
Introdução ao ECMAScript
Atualmente, falar de JavaScript tornou-se um assunto de
escopo muito limitado. A linguagem foi criada em 1995 pela
Netscape, com o objetivo de permitir a manipulação dinâmica
dos elementos de uma página HTML que fosse apresentada no
seu navegador, o Netscape Navigator.
Devido ao seu grande sucesso, a Microsoft decidiu
implementar sua versão do JavaScript que seria utilizada no
Internet Explorer. Em 1996 nascia o JScript.
Neste mesmo ano a Netscape decidiu entregar o JavaScript
para a ECMA (European Computer Manufacturers Association),
com o objetivo de padronizar a linguagem. Em junho de 1997
foi lançada a primeira edição e tanto a Netscape quanto a
Microsoft concordaram em adequar suas linguagens ao padrão
estabelecido. A partir daí começou-se a falar em ECMAScript.
Aliás, que fique claro: JavaScript e Java são linguagens
completamente diferentes!
Mas qual é a vantagem de padronizar uma linguagem como
o JavaScript? O grande desafio que todo programador web
encontra é criar códigos que funcionem em todos os navegadores.
Como cada empresa define o que entra ou o que não entra em
suas linguagens, às vezes o programador acaba usando uma
função ou um objeto que existe neste navegador, mas não
naquele. Com isso, o código perde em interoperabilidade, e o
webdesigner é obrigado a colocar na página inicial a clássica
mensagem “Este site é melhor visualizado no navegador X”.
Em teoria, a padronização obriga as empresas fabricantes
de navegadores a implementarem no mínimo aquele conjunto
de funcionalidades. Assim o programador terá a certeza de que,
ao usar tais funcionalidades, seu código executará em qualquer
navegador da maneira que ele previa.
No entanto, na prática sempre falta um detalhezinho aqui
ou ali. Alguns navegadores (como o Opera, por exemplo)
atestam que implementaram 100% do padrão, mas não custa
manter a prudência ao escrever um código – portanto, não deixe
de testá-lo em diferentes plataformas, para evitar surpresas
desagradáveis.
O padrão ECMAScript
A ECMA (European Computer Manufacturers Association),
em sua especificação de número 262, descreve a linguagem
ECMAScript como “uma linguagem de programação
multiplataforma de propósitos gerais”. O ECMAScript, portanto,
não é uma linguagem limitada ao ambiente dos navegadores
web, podendo ser embutida em qualquer ambiente.
Apesar do JavaScript ter surgido antes, hoje ele deve ser visto
como uma das implementações existentes do padrão ECMA-262,
que é o código de especificação da linguagem ECMAScript.
Introdução ao ECMAScript
Conceitos básicos
JavaScript é uma linguagem orientada a objetos...
Da maneira mais resumida possível, a orientação a objetos
define um paradigma de programação onde os dados e as
funções são agrupados (ou encapsulados) numa entidade
chamada objeto.
A orientação a objetos tem dois objetivo principais:
• Isolar os dados, diminuindo o risco de alterações
indevidas.
• Isolar as áreas do código que sofrem constantes
modificações, tendo em vista a manutenção e a
reusabilidade.
Para alcançar estes dois objetivos, ela se apóia em três
pilares:
1. Encapsulamento: cada objeto é responsável pelos seus
dados, escondendo-os do resto do programa e expondo
apenas as funções que os manipulam. Dessa maneira,
evita-se a alteração indevida dos dados e esconde-se os
detalhes de implementação – o programador deve se
preocupar apenas em quais funções acessar e não em
como elas funcionam.
2. Herança: assim como os pais transmitem características
para os filhos, os objetos também podem passar suas
características – dados e funções – adiante. Com isso,
objetos podem ser estendidos facilmente dentro da linha
de raciocínio “é-um”. Tome como exemplo um objeto
chamado Animal que possui duas funções definidas: mover()
e comer(). Agora, imagine um outro objeto chamado Gato.
Como gato é um animal, você pode derivar o objeto Gato
do objeto Animal, herdando suas características – ou seja,
as funções mover() e comer(). Agora, além destas funções, o
objeto Gato pode definir outras funções exclusivas dele, tais
como caçar(), pular(), brincarComNoveloDeLã() e por aí vai...
A herança permite começar com objetos genéricos,
partindo para implementações mais específicas.Assim, é
possível padronizar as funcionalidades comuns a vários
objetos, auxiliando na reusabilidade do código.
3. Polimorfismo: seguindo o exemplo anterior, todo
animal se movimenta, mas nem todos se movimentam
da mesma maneira.Apesar de todos os objetos derivados
de Animal compartilharem a função mover(), cada um a
implementa à sua maneira – a cobra rasteja, a águia
voa, o peixe nada... O polimorfismo focaliza a atenção
do programador para a interface do objeto.
...baseada em protótipos
Existem duas maneiras de se construir uma linguagem orientada
a objetos: baseada em classes e baseada em protótipos.
10 Conceitos básicos
Forma 1:
Colocando as instruções entre as tags <script> e </script>.
Exemplo:
<html><head></head>
<body>
<script language="JavaScript 1.5">
<!--
//O número de versão da linguagem é opcional
var str = "Olá, Silvana!";
document.write(str);
-->
</script>
</body>
</html>
Forma 2:
Inserindo manipuladores de eventos dentro de tags HTML
específicas. Exemplo:
<body onLoad="umaFunção();">
Forma 3:
Inserindo código JavaScript dentro de um arquivo com extensão
.js e colocando o seu nome como valor do atributo src da tag
<script>. Exemplo:
<script src="scriptExterno.js"></script>
Identificadores
O nome de qualquer variável,constante,função,objeto,propriedade,
método ou coleção é considerado um identificador.
Nomeando identificadores
Siga as seguintes regras para declarar nomes de identificadores
válidos:
• o primeiro caractere do nome deve ser uma letra
(maiúscula ou minúscula) ou o caractere underscore
("_"). Números e demais caracteres não podem ser usados
como tal.
• os demais caracteres do nome podem ser letras, números
e/ou o caractere underscore;
• não deve haver espaços entre os caracteres do nome;
• o nome do identificador não deve ser igual a uma palavra
reservada do JavaScript (veja a seguir).
Variáveis e constantes
Variáveis são nomes que identificam endereços de memória,
nos quais são armazenados valores que podem ser acessados
e modificados por um programa. Constantes são semelhantes
às variáveis, no entanto, uma vez definido o seu valor, ele não
pode ser modificado.
No ECMAScript não é necessário declarar o tipo da variável –
o que não significa que ela não possua uma declaração do seu tipo
de dado. Quando um valor é atribuído à variável, o interpretador
se encarrega de identificá-lo. O ECMAScript faz distinção entre
maiúsculas e minúsculas na declaração de variáveis e constantes,
portanto var1 e Var1 são duas variáveis diferentes.
Declaração e escopo
A declaração das variáveis possui a seguinte sintaxe:
var nome_var [= expr] [, ..., nome_varN [= exprN]];
Argumento Descrição
nome_var...nome_varN Nomes das variáveis declaradas.
expr...exprN Valores ou expressões que resultarão nos valores
das variáveis declaradas (opcional).
Para declarar constantes, apenas troque var por const.
Múltiplas variáveis podem ser declaradas na mesma
instrução, separadas por vírgulas, e seus valores não precisam
ser atribuídos no momento da declaração. Variáveis declaradas
sem um valor atribuído serão inicializadas com valor indefinido
(undefined – note que essa não é uma palavra reservada do
ECMAScript). É possível checar se uma variável tem valor
indefinido, comparando-a com undefined.
Apesar de a sintaxe correta da declaração de variáveis
começar com a instrução var, é possível declará-las sem essa
instrução, declaração essa denominada implícita. O mesmo
não pode ser feito com constantes.
O modo como uma variável ou constante é declarada influi
em seu escopo da seguinte forma:
• qualquer variável declarada implicitamente será
considerada uma variável global, ou seja, poderá ser
vista e manipulada de qualquer outra parte do script;
• para declarar uma variável local, ou seja, que é vista
somente dentro da função em que foi declarada, é
obrigatório o uso da instrução var.
Conceitos básicos 13
Booleano
Os valores booleanos expressam a validade de uma condição
mediante os valores literais true (verdadeiro) ou false (falso).
Em uma comparação, uma expressão que resulte em zero ou
em uma string vazia é considerada falsa, enquanto qualquer
número resultante diferente de 0 ou uma string que não seja
vazia são considerados verdadeiros.
Número
O ECMAScript entende números inteiros e de ponto flutuante,
porém isso não faz diferença, já que todos os números são
considerados de ponto flutuante pelo interpretador.
Números inteiros podem ser positivos, negativos ou o zero,
e podem ser representados em três bases numéricas diferentes:
decimal (base 10), octal (base 8), que pode conter dígitos de 1 a
7 e deve ser iniciado com o prefixo 0 ou 00, e hexadecimal (base
16), que pode conter os dígitos de 0 a 9 mais as letras de A a F.
Um número hexadecimal deve iniciar com o prefixo 0x.
Os números de ponto-flutuante englobam os números
decimais normais ( 1 0 0 . 5 4 , por exemplo) e os números
representados por notação científica, em que aparece um
caractere e maiúsculo ou minúsculo seguido de um número
inteiro (o caractere e significa "dez elevado à potência de" – por
exemplo, 1.54e2 é o mesmo que 1.54 x 102). Um número iniciado
por 0 seguido de um ponto é considerado um número decimal (e
não octal), enquanto um número com o prefixo 00 seguido de um
ponto gerará uma mensagem de erro, já que esse prefixo indica
que o número deve ser obrigatoriamente octal. Vale lembrar,
também, que o separador decimal é o ponto, e não a vírgula.
Além desses valores, o ECMAScript contém números com
valores especiais: NaN (Not a Number), que indica operação
matemática realizada com dados inapropriados; infinito
positivo, que indica um número positivo muito grande para ser
representado pelo ECMAScript; infinito negativo, que indica
um número negativo muito grande para ser representado
pelo ECMAScript; e zero positivo e zero negativo, ja que o
ECMAScript faz essa distinção.
Dados especiais
undefined
Você terá como retorno o valor undefined quando tenta usar uma
propriedade que não existe em um objeto ou declarar uma
variável, mas não atribuir valor a ela.
null
Um valor null significa que a variável não possui nenhum tipo
de valor válido nela. Para apagar o valor de uma variável sem
apagar a própria variável, basta atribuir-lhe o valor null. Vale
lembrar que null não é o mesmo que zero.
Conceitos básicos 15
Conversão de dados
De Para Resultado
Representação numérica (arredondada, se
String Número necessário) da string.
false se a string estiver vazia (length = 0),
String Booleano caso contrário, retorna true.
Booleano String "true" se true, "false" se false.