livro javascript um mero resumo

JavaScript

Um mero resumo

Jonas Mayer

versão 1.0

Sumário1.Introdução.............................................................................................................................................................4

1.1.Inserindo o JavaScript ..................................................................................................................................41.2.Sintaxe Básica...............................................................................................................................................41.3.Variáveis.......................................................................................................................................................51.4.Declarando e inicializando variáveis ...........................................................................................................51.5.Operadores ...................................................................................................................................................5

1.5.1.Aritméticos............................................................................................................................................51.5.2.Atribuição..............................................................................................................................................51.5.3.Relacional..............................................................................................................................................61.5.4.Lógico...................................................................................................................................................6

2.Comandos básicos................................................................................................................................................63.Controle de fluxo..................................................................................................................................................7

3.1.if e else..........................................................................................................................................................73.2.switch............................................................................................................................................................73.3.while.............................................................................................................................................................73.4.do while........................................................................................................................................................73.5.for..................................................................................................................................................................7

4.Funções JavaScript...............................................................................................................................................74.1.Definindo uma função..................................................................................................................................84.2.Chamando uma função.................................................................................................................................84.3.Método..........................................................................................................................................................84.4.Arguments.....................................................................................................................................................94.5.Funções internas...........................................................................................................................................9

5.Exceptions..........................................................................................................................................................106.Objetos JavaScript .............................................................................................................................................10

6.1.Objetos........................................................................................................................................................106.1.1.Criando um objeto...............................................................................................................................106.1.2.Recuperando o Valor de uma Propriedade..........................................................................................116.1.3.Alterando o Valor de uma Propriedade...............................................................................................116.1.4.Referências..........................................................................................................................................126.1.5.Protótipos (herança)............................................................................................................................126.1.6.Removendo uma Propriedade.............................................................................................................146.1.7.Verificando a Existência de uma Propriedade.....................................................................................14

6.2.Arrays.........................................................................................................................................................146.2.1.Declarando um array...........................................................................................................................146.2.2.Percorrendo um Array.........................................................................................................................146.2.3.Adicionando Elementos......................................................................................................................156.2.4.Removendo Elementos.......................................................................................................................156.2.5.Concatenando Arrays..........................................................................................................................156.2.6.Gerando uma String com os Elementos de um Array.........................................................................156.2.7.Removendo o Último Elemento..........................................................................................................166.2.8.Adicionando um Elemento na Última Posição...................................................................................166.2.9.Invertendo os Elementos de um Array................................................................................................166.2.10.Removendo o Primeiro Elemento.....................................................................................................166.2.11.Copiando um Trecho de um Array....................................................................................................166.2.12.Removendo e Adicionando Elementos em um Array.......................................................................166.2.13.Adicionando um Elemento na Primeira Posição...............................................................................176.2.14.Arrays Multidimensionais.................................................................................................................17

6.2.14.1.Percorrendo um Array Multidimensional..................................................................................176.2.15.Métodos do array..............................................................................................................................17

6.3.Métodos das Strings ...................................................................................................................................186.3.1.Acessando os Caracteres de uma String por Posição..........................................................................18

6.3.2.Recuperando um Trecho de uma String..............................................................................................186.3.3.Dividindo uma String..........................................................................................................................18

6.4.Classe Date.................................................................................................................................................186.4.1.Criando um objeto Date......................................................................................................................186.4.2.Métodos de objetos tipo Date..............................................................................................................18

6.5.Classe Math................................................................................................................................................196.5.1.Propriedades de math..........................................................................................................................196.5.2.Métodos de Math ...............................................................................................................................20

6.6. Expressões Regulares (RegExp)................................................................................................................207.Objetos do navegador.........................................................................................................................................23

7.1.Janelas e Frames.........................................................................................................................................237.1.1.Propriedades........................................................................................................................................237.1.2.Métodos...............................................................................................................................................24

7.2.Objeto Navigator........................................................................................................................................257.2.1.Propriedades........................................................................................................................................257.2.2.Métodos...............................................................................................................................................25

7.3.Objeto Screen..............................................................................................................................................257.3.1.Propriedades........................................................................................................................................25

7.4.Objeto History............................................................................................................................................267.4.1.Propriedades........................................................................................................................................267.4.2.Métodos...............................................................................................................................................26

7.5.Objeto Location..........................................................................................................................................267.5.1.Propriedades........................................................................................................................................267.5.2.Métodos...............................................................................................................................................27

8.DOM HTML......................................................................................................................................................278.1.Intodução....................................................................................................................................................27

8.1.1.DOM HTML.......................................................................................................................................288.1.2.DOM CSS...........................................................................................................................................28

8.2.Dom Document...........................................................................................................................................298.2.1.Propriedades........................................................................................................................................298.2.2.Métodos...............................................................................................................................................29

8.3.DOM Eventos.............................................................................................................................................298.3.1.Eventos................................................................................................................................................30

8.4.DOM Elements...........................................................................................................................................359.Núcleo DOM......................................................................................................................................................35

9.1.Propriedades de nós....................................................................................................................................369.2.Métodos de nós...........................................................................................................................................369.3.Tipos de nó..................................................................................................................................................369.4.NodeList.....................................................................................................................................................389.5.NamedNodeMap.........................................................................................................................................389.6.O Objeto DOM Document..........................................................................................................................389.7.O Objeto DOM Element.............................................................................................................................399.8.O Objeto DOM Attr....................................................................................................................................39

10.PopupAlert........................................................................................................................................................4011.Temporização de eventos..................................................................................................................................4112.Cookies.............................................................................................................................................................4213.Validação .........................................................................................................................................................4314.Segurança de JavaScript...................................................................................................................................4415.Notas de versão................................................................................................................................................4416.Princípios para Escrever JavaScript de forma Consistente e Idiomática.........................................................45

16.1.Espaço em branco.....................................................................................................................................4516.2.Sintaxe bonita.......................................................................................................................................45

16.3.Checagem de escrita.................................................................................................................................4916.4.Avaliação condicional...............................................................................................................................5116.5.Estilo Prático.............................................................................................................................................5316.6.Nomenclatura............................................................................................................................................54

16.7. Miscelânea...............................................................................................................................................5716.8.Comentários..............................................................................................................................................60

16.8.1.Código em apenas um idioma...........................................................................................................60REFERÊNCIAS....................................................................................................................................................60

JavaScript

1.IntroduçãoJavaScript é uma linguagem para auxilio na criação de páginas web, as funções escritas em JavaScript podem ser embutidas dentro

de seu documento HTML, possibilitando o incremento das funcionalidades.

1.1.Inserindo o JavaScript Em documentos HTML, a utilização da linguagem JavaScript, se dá sob a forma de funções, as quais são chamadas em

determinadas situações ou em resposta a determinados eventos.Um código JavaScript pode ser inserido em um documento HTML de duas formas: colocando o código JavaScript como filho de

um elemento com a tag script ou utilizando o atributo src de um elemento com a tag script no qual devemos passar o caminho relativoou absoluto para um arquivo que contenha o código JavaScript.

Por convenção costuma-se colocar todas as funções no início do documento (entre as TAGs <HEAD> e </HEAD>, isso para garantir que o código JavaScript seja carregado antes que o usuário interaja com a Home Page), ou seja, antes do <BODY>.

Exemplo:

<html> <head> <meta http-equiv="Content-Type" content="text/html;charset=UTF-8"> <title>Inserindo código JavaScript em um documento HTML </title> <script type ="text/javascript" src ="codigo .js"></script> <script type ="text/javascript"> window.onload = function (){ document. getElementById (’ola -mundo ’). innerHTML = ’Olá Mundo !’; } </script> </head> <body> <p id="ola - mundo "></p> </body> </html>

1.2.Sintaxe BásicaAs linhas de instruções JavaScript assim como Java terminam com ; (ponto e vírgula). E os blocos são demarcados por { }

(chaves).Para os comentários é usado :- /*de várias linhas/* - //de linha

Para que o código JavaScript não seja mostrado em navegadores antigos pode-se usar:

<html><head><script language="LiveScript"></script></head><body>...<script>hello();</script>...</body></html>

1.3.VariáveisEm JavaScript, variáveis dinâmicas podem ser criadas e inicializadas sem declarações formais.

Existem dois tipos de abrangência para as variáveis:1. “Global” - Declaradas/criadas fora de uma função. As variáveis globais podem ser acessadas em qualquer parte do programa.2. “Local” - Declaradas/criadas dentro de uma função. Só podem ser utilizadas dentro da função

onde foram criadas e precisa ser definida com a instrução var.Existem três tipos de variáveis: Numéricas, Booleanas e Strings.

As strings podem ser delimitadas por aspas simples ou duplas. Podem ser incluídos dentro de uma string alguns caracteres especiais, asaber:

• /t -tabulação• /n -próxima lina• /f -form feed• /b -back space• /r -carrige return

1.4.Declarando e inicializando variáveis Em JavaScript podemos declarar e inicializar uma variável da seguinte maneira:

var numero = 0;var numeroComCasasDecimais = 1.405;var texto = ’Variável com um texto ’;var outroTexto = " Outra variável com um texto ";var valorBooleano = true ;

1.5.Operadores

1.5.1.Aritméticos

+ Soma

- Subtração

* Multiplicação

/ Divisão

% Módulo

1.5.2.Atribuição

= Simples

+= Incremental

-= Decremental

*= Multiplicativa

/= Divisória

%= Modular

1.5.3.Relacional

== Igualdade

!= Diferença

< Menor

<= Menor ou igual

> Maior

>= Maior ou igual

1.5.4.Lógico

&& E

|| OU

2.Comandos básicoswith

Quando você precisa manipular várias propriedades de um mesmo objeto, provavelmente prefere não ser obrigado a repetir todas as vezes a digitação do nome do objeto. A instrução “with”, permite fazer isso eliminando a necessidade de digitar o nome do objeto todas as vezes.Forma geral:

with (<objeto>){... Instruções}

Exemplo:

with (Math){ a=PI; b=Abs(x); c=E;}

breakPode ser executado somente dentro de loops “for”... ou “while”... e tem por objetivo o cancelamento da execução do loop sem que

haja verificação na condição de saída do loop, passando a execução a linha imediatamente posterior ao término do loop.

Exemplo:

for (var x=1; x <10; x++){ if (x==5){ break }}document.write(x) // resulta: 5

continuePode ser executado somente dentro de loops “for”... ou “while” ... e tem por objetivo o cancelamento da execução do bloco de

comandos passando para o início do loop.

for (var x=1; x<10; x++){ if (x==5){ continue } document.write(x)}

3.Controle de fluxo

3.1.if e else

if ( preco<0) { alert (’O preço do produto não pode ser negativo ’);}else{ alert (’Produto cadastrado com sucesso ’);}

3.2.switch

switch (dia_da_semana){ case 1: document.write("É segunda-feira")

break case 2: document.write("É terça-feira") break case 3: document.write("É quarta-feira") break … default: document.write("Esse dia não existe") }

3.3.while

var contador = 0;while ( contador <100) { document. writeln (’Bom Dia ’); contador ++;}

3.4.do while

var color do { color = me dá uma cor } while (color!="vermelho")

3.5.for

for ( var contador = 0; contador <100; contador ++) { document. writeln (’Bom Dia ’);}

4.Funções JavaScriptUma função JavaScript é uma sequência de instruções JavaScript que serão executadas quando você chamá-la através do seu

nome.As funções em JavaScript são objetos. Você pode armazená-las em variáveis, arrays e outros objetos.Elas podem ser passadas como argumento ou devolvidas por outra função. Veja o exemplo abaixo.

var multiplicacao = function (x, y) { return x * y;}

4.1.Definindo uma funçãoDefinindo uma função simples em JavaScript:

function imprimeOlaMundo() { document.writeln (’Olá Mundo !’); document.writeln (’<br />’);}

Definindo uma função que recebe parâmetros:

function imprimeMensagem (mensagem) { document. writeln ( mensagem ); document. writeln (’<br />’);}

Definindo uma função que retorna um valor:

4.4.ArgumentsOs argumentos passados na chamada de uma função podem ser recuperados através do array Arguments. Inclusive, esse array

permite que os argumentos excedentes sejam acessados.

var soma = function(){ var soma = 0; for( var i = 0; i <arguments. length ; i ++) { soma += arguments [i]; } return soma ;}var resultado = soma (2 ,4 ,5 ,6 ,1);console. log ( resultado );

4.5.Funções internasJavaScript possui algumas funções internas que não estão ligadas diretamente a nenhum objeto.

alert - Mostra uma caixa de alerta, seguido de um sinal sonoro e o botão de OK.Ex:

alert('Esta é uma janela de alerta!')

confirm - Mostra uma caixa de diálogo, seguida de um sinal sonoro e os botão de OK e Cancel.Retorna um valor verdadeiro se o usuário escolher OK.Ex:

retorno=confirm('Deseja prosseguir?')

escape - Obtém o código ASCII de um caracter que não seja alfa-numérico.Ex:

document.write(escape("@"))

eval - Avalia uma expressão numérica, retornando um resultado também numérico.Ex:

document.write(eval(10*9*8*7*6*5*4*3*2))

parseFloat - Converte uma string que representa um número, para um número com ponto flutuante.Caso a string não possa ser avaliada, a função retorna 0.Ex:

document.write(parseFloat("-32.465e12")

parseInt - Converte uma string, que representa um número em uma base predefinida para base 10.Caso a string possua um caracter que não possa ser convertido, a operação para, retornando o valor antesdo erro.Ex:

paseInt("string",base)parseInt("FF",15) // retorna 256parseInt("3A",10) // retorna 3parseInt("10",2) // retorna 2

prompt - Monta uma caixa de entrada de dados, de forma simplificada comparando-se com o objetotext.Ex:

prompt(label [,valor])

onde:label - texto que aparece ao lado da caixa.valor - é o conteúdo inicial da caixa.

unespace- Faz exatamente o oposto da função escape.

isNaN(número) - Devolve um booleano dependendo do que recebe por parâmetro. Se não é um número devolve um true, se é um número devolve false.

5.ExceptionsQuando um erro é identificado no processamento de uma função, podemos lançar uma exception para avisar que chamou a função

que houve um problema.

var conta = { saldo : 0, deposita : function ( valor ) { if( valor <= 0) { throw { name : "ValorInvalido", message : " Valores menores ou iguais a 0 não podem ser depositados " } } else { this.saldo += valor ; } }}

Na chamada do método deposita(), podemos capturar um possível erro como comando try-catch.

try { conta.deposita(0) ;} catch(e) { console.log(e.name ); console.log(e.message );}

6.Objetos JavaScript

6.1.ObjetosUm objeto é um conjunto de propriedades. Toda propriedade possui nome e valor. O nome de uma propriedade pode ser qualquer

sequência de caracteres. O valor de uma propriedade pode ser qualquer valor exceto undefined. Podemos adicionar uma nova propriedade a um objeto que já existe. Um objeto pode herdar propriedades de outro objeto utilizando a ideia de prototype.

6.1.1.Criando um objetoExiste mais de uma maneira de se criar um objeto em JavaScript. A maneira mais simples podemos acompanhar no código abaixo:

var contaBancaria = new Object ();contaBancaria. numero = 1234;contaBancaria. saldo = 1000;contaBancaria. deposita = function(valor) { if( valor> 0) { this. saldo += valor ; }else { alert (’Valor inválido !’); } };

Outra maneira de se criar um objeto é utilizando a notação literal mais conhecida como JSON (JavaScript Object Notation):

var contaBancaria = { numero : 1234 , saldo : 1000 , deposita : function ( valor ) { if( valor> 0) { this. saldo += valor ; }else { alert (’Valor inválido !’); } }}

Um objeto pode ser criado de forma literal. Veja o exemplo a seguir.

var objeto_vazio = {};var curso = { sigla : " K11 ", nome : " Orientação a Objetos em Java "};

Um objeto pode se relacionar com outros objetos através de propriedades. Observe o códigoabaixo.

var formacao_java = {sigla:"K10", nome : "Formação Desenvolvedor Java", cursos : [ { sigla : " K11 ", nome : " Orientação a Objetos em Java "}, { sigla : " K12 ", nome : " Desenvolvimento Web com JSF2 e JPA2 "}, ]};

6.1.2.Recuperando o Valor de uma PropriedadePara recuperar os valores das propriedades de um objeto, podemos utilizar o operador “.” ou “[]”.

Veja o exemplo a seguir.

var curso = { sigla : " K11 ", nome : " Orientação a Objetos em Java "};console.log(curso. sigla );console.log(curso [" sigla "]);var sigla = "sigla";console.log(curso [ sigla ]);

6.1.3.Alterando o Valor de uma PropriedadePara alterar o valor de uma propriedade, basta atribuir um novo valor a propriedade do objeto.

var curso = { sigla : " K11 ", nome : " Orientação a Objetos em Java "};curso.sigla = "K12 ";curso.nome = "Desenvolvimento Web com JSF2 e JPA2 ";

console.log(curso. sigla );console.log(curso. nome );

6.1.4.ReferênciasOs objetos são acessados através de referências.

var curso = { sigla : " K11 ", nome : " Orientação a Objetos em Java "};

//copiando uma referênciavar x = curso ;

x. sigla = " K12 ";x. nome = " Desenvolvimento Web com JSF2 e JPA2 ";

// imprime K12console. log ( curso. sigla );

//imprime Desenvolvimento Web com JSF2 e JPA2console.log(curso,nome);

6.1.5.Protótipos (herança)Podemos criar um objeto baseado em outro objeto existente (protótipo). Para isso, podemos utilizar a propriedade especial

__proto__. Observe o código abaixo.

// criando um objeto com duas propriedades var curso = { sigla : " K11 ", nome : " Orientação a Objetos em Java "};

// criando um objeto sem propriedades var novo_curso = {};

// definindo o primeiro objeto como prótotipo do segundo

novo_curso. __proto__ = curso ;

// imprime K11 console. log ( novo_curso. sigla );

// imprime Orientação a Objetos em Java console. log ( novo_curso. nome );

Também podemos utilizar o método create de Object para criar objetos baseados em objetos existentes. Veja o exemplo abaixo.

// criando um objeto com duas propriedades var curso = { sigla : " K11 ", nome : " Orientação a Objetos em Java "};

// criando um objeto sem propriedades var novo_curso = {};

// definindo o primeiro objeto como prótotipo do segundo novo_curso = Object. create ( curso );



Se uma propriedade for adicionada a um objeto, ela também será adicionada a todos os objetos que o utilizam como protótipo.


var novo_curso = Object. create ( curso );

curso. carga_horaria = 36;



// imprime 36 console. log ( novo_curso. carga_horaria );

Por outro lado, se uma propriedade for adicionada a um objeto, ela não será adicionada no protótipo desse objeto.


var novo_curso = Object. create ( curso );

novo_curso. carga_horaria = 36;

// imprime K11 console. log ( curso. sigla );

// imprime Orientação a Objetos em Java console. log ( curso. nome );

// imprime undefined console. log ( curso. carga_horaria );

Se o valor de uma propriedade de um objeto for modificado, os objetos que o utilizam como protótipo podem ser afetados.

var curso = { sigla : " K11 ", nome : " Orientação a Objetos em Java "};var novo_curso = Object. create ( curso );curso. sigla = " K12 "; curso. nome = " Desenvolvimento Web com JSF2 e JPA2 ";


// imprime Desenvolvimento Web com JSF2 e JPA2 console. log ( novo_curso. nome );

Por outro lado, alterações nos valores das propriedades de um objeto não afetam o protótipo desse objeto.

var curso = { sigla : " K11 ", nome : " Orientação a Objetos em Java "};var novo_curso = Object. create ( curso );

novo_curso. sigla = " K12 ";novo_curso. nome = " Desenvolvimento Web com JSF2 e JPA2 ";

//imprime K11console.log ( curso. sigla );

//imprime Orientação a Objetos em Javaconsole.log ( curso. nome );

Considere um objeto que foi construído a partir de um protótipo. Se o valor de uma propriedade herdada do protótipo for alterada nesse objeto, ela se torna independente da propriedade no protótipo.

Dessa forma, alterações no valor dessa propriedade no protótipo não afetam mais o valor dela no objeto gerado a partir do protótipo.

var curso = { sigla : " K11 ", nome : " Orientação a Objetos em Java "};var novo_curso = Object. create ( curso );

novo_curso. sigla = " K12 ";novo_curso. nome = " Desenvolvimento Web com JSF2 e JPA2 ";

curso. sigla = " K21 ";curso.nome = " Persistência com JPA2 e Hibernate ";

// imprime K12console.log ( novo_curso. sigla );

// imprime Desenvolvimento Web com JSF2 e JPA2console.log ( novo_curso. nome );

6.1.6.Removendo uma PropriedadePodemos remover uma propriedade de um objeto com a função delete.


// imprime K11console.log ( curso. sigla );delete curso. sigla ;

// imprime undefinedconsole.log ( curso. sigla );

6.1.7.Verificando a Existência de uma PropriedadePodemos verificar se uma propriedade existe, podemos utilizar a função in.

var curso = { sigla : " K11 ", nome : " Orientação a Objetos em Java "}; // imprime true console. log (" sigla " in curso );

// imprime false console. log (" carga_horaria " in curso );

6.2.ArraysOs arrays em JavaScript são objetos e, portanto, possuem atributos e métodos para nos ajudar na manipulação de seus dados.JavaScript provê um objeto com características semelhantes a um array. Para criar o objeto array, podemos criá-lo de forma literal.

var vazio = [];

cursos. splice (0 ,2);

for ( var i = 0; i <cursos. length ; i ++) { console. log ( cursos [i]); }

6.2.5.Concatenando ArraysO método concat() permite concatenar dois arrays.

var formacao_java = [" K11 "," K12 "];var formacao_java_avancado = [" K21 "," K22 "," K23 "];

var formacao_completa = formacao_java. concat ( formacao_java_avancado );

for ( var i = 0; i <formacao_completa. length ; i ++) { console. log ( formacao_completa [i]); }

6.2.6.Gerando uma String com os Elementos de um ArrayO método join() cria uma string a partir de um array.

var formacao_java = [" K11 "," K12 "];

var resultado = formacao_java. join (","); console. log ( resultado );

6.2.7.Removendo o Último ElementoO método pop() remove e retorna o último elemento.

var cursos = [" K11 "," K12 "," K21 "," K22 "," K23 "]; var curso = cursos. pop (); console. log ( curso );

6.2.8.Adicionando um Elemento na Última PosiçãoO método push() adiciona um elemento ao final do array.

var cursos = [" K11 "," K12 "," K21 "," K22 "]; cursos. push (" K23 "); for ( var i = 0; i <cursos. length ; i ++) { console. log ( cursos [i]); }

6.2.9.Invertendo os Elementos de um ArrayO método reverse() inverte a ordem dos elementos de um array.

var cursos = [" K11 "," K12 "," K21 "," K22 "," K23 "]; cursos. reverse (); for ( var i = 0; i <cursos. length ; i ++) { console. log ( cursos [i]); }

6.2.10.Removendo o Primeiro ElementoO método shift() remove e retorna o primeiro elemento de um array.

var cursos = [" K11 "," K12 "," K21 "," K22 "," K23 "];var curso = cursos. shift ();console. log (" Elemento removido : " + curso );for ( var i = 0; i <cursos. length ; i ++) {

console. log ( cursos [i]);}

6.2.11.Copiando um Trecho de um ArrayO método slice() cria uma cópia de uma porção de um array.

var cursos = [" K11 "," K12 "," K21 "," K22 "," K23 "]; var formacao_java = cursos. slice (0 ,2);

for ( var i = 0; i <formacao_java. length ; i ++) { console.log( formacao_java [i]); }

6.2.12.Removendo e Adicionando Elementos em um ArrayO método splice() permite remover elementos do array e adicionar novos elementos.

var cursos = [" K11 "," K12 "," K21 "," K22 "," K23 "]; cursos. splice (2 ,3 ," K31 "," K32 "); for ( var i = 0; i <cursos. length ; i ++) { console. log ( cursos [i]); }

6.2.13.Adicionando um Elemento na Primeira PosiçãoO método unshift() adiciona elementos na primeira posição de um array.

var cursos = [" K12 "," K21 "," K22 "," K23 "]; cursos. unshift (" K11 "); for ( var i = 0; i <cursos. length ; i ++) { console. log ( cursos [i]); }

6.2.14.Arrays MultidimensionaisOs arrays multidimensionais são estruturas de dados que armazenam os valores em mais de uma dimensão. Em Javascript não existe um autêntico objeto array-multidimensinal. Para utilizar estas estruturas poderemos definir arrays onde,

em cada uma de suas posições haverá outro array.

var temperaturas_medias_cidade0 = new Array(3) temperaturas_medias_cidade0[0] = 12 temperaturas_medias_cidade0[1] = 10 temperaturas_medias_cidade0[2] = 11

var temperaturas_medias_cidade1 = new Array (3) temperaturas_medias_cidade1[0] = 5 temperaturas_medias_cidade1[1] = 0 temperaturas_medias_cidade1[2] = 2

var temperaturas_medias_cidade2 = new Array (3) temperaturas_medias_cidade2[0] = 10 temperaturas_medias_cidade2[1] = 8 temperaturas_medias_cidade2[2] = 10

var temperaturas_cidades = new Array (3) temperaturas_cidades[0] = temperaturas_medias_cidade0 temperaturas_cidades[1] = temperaturas_medias_cidade1 temperaturas_cidades[2] = temperaturas_medias_cidade2

6.2.14.1.Percorrendo um Array Multidimensional

Também é interessante ver como se percorre um array de duas dimensões. Para isso temos que fazer um percurso por cada um dos campos do array bidimensional e dentro destes fazer um novo percurso para cada um de seus campos internos. Ou seja, um percurso

por um array dentro de outro.

document.write("<table width=200 border=1 cellpadding=1 cellspacing=1>"); for (i=0;i<temperaturas_cidades.length;i++){ document.write("<tr>") document.write("<td><b>Cidade " + i + "</b></td>") for (j=0;j<temperaturas_cidades[i].length;j++){ document.write("<td>" + temperaturas_cidades[i][j] + "</td>") } document.write("</tr>") } document.write("</table>")

6.2.15.Métodos do arrayUm array possui diversos métodos para nos auxiliar nas tarefas mais comuns quando trabalhamos com arrays. Os mé todos são:• concat() - concatena dois ou mais arrays e retorna uma cópia ro resultado.• indexOf() - procura por um objeto dentro do array e retorna o índice caso o encontre.• join() - concatena todos os elementos de um array em uma string.• lastIndexOf() - procura, de trás para frente, por um objeto dentro array e retorna o índice caso o encontre.• pop() - remove o último objeto de um array e retorna o objeto removido.• push() - adiciona um objeto no final do array e retorno o novo tamanho do array.• reverse() - inverte a ordem dos objetos de um array.• shift() - remove o primeiro objeto de um array e retorna o objeto removido.• slice() - seleciona parte de um array e retorna uma copia da parte selecionada.• sort() - ordena os objetos de um array.• splice() - adiciona e/ou remove objetos de um array.• toString() - converte um array em uma string e retorna o resultado.• unshift() - adiciona um objeto no começo do array e retorna o novo tamanho do array.• valueOf() - retorna o valor primitivo de um array.

6.3.Métodos das Strings

6.3.1.Acessando os Caracteres de uma String por PosiçãoO método charAt() retorna o caracter na posição especificada.

var curso = " K12 ";console.log ( curso. charAt (0) );

6.3.2.Recuperando um Trecho de uma StringO método slice() retorna uma porção de uma string.

var curso = " K12 - Desenvolvimento Web com JSF2 e JPA2 "; console.log ( curso. slice (0 ,3));

6.3.3.Dividindo uma StringO método split() cria uma array de strings a partir de um separador.

var curso = "K12 - Desenvolvimento Web com JSF2 e JPA2 ";var aux = curso. split ("-"); console.log ( aux [0]) ; console.log ( aux [1]) ;

6.4.Classe DateUm objeto da classe Date pode ser criado de duas maneiras distintas. Por um lado podemos criar o objeto com o dia e hora atuais

e por outro podemos cria-lo com um dia e hora distintos aos atuais. Isto depende dos parâmetros que passemos ao construir os objetos.

6.4.1.Criando um objeto DatePara criar um objeto fecha com o dia e hora atuais, colocamos os parênteses vazios ao chamar ao construtor da classe Date.

minhaData = new Date()

Para criar um objeto data com um dia e hora diferentes dos atuais temos que indicar entre parênteses o momento para iniciar o objeto. Existem várias maneiras de expressar um dia e hora válida, por isso podemos construir uma data nos guiando por vários esquemas. Estes são dois deles, suficientes para criar todo tipo de datas e horas.

minhaData = new Date(ano,mês,dia,hora,minutos,segundos) minhaData = new Date(ano,mês,dia)

Os valores que deve receber o construtor são sempre numéricos. Um detalhe, o mês começa por 0, ou seja, janeiro é o mês 0. Se não indicamos a hora, o objeto data se cria com hora 00:00:00.

6.4.2.Métodos de objetos tipo Date• getDate() - Devolve o dia do mês. (1-31)• getDay() - Devolve o dia da semana. (0-6)• getHours() - Retorna a hora. (0-23)• getMinutes() - Devolve os minutos. (0-59)• getMonth() - Devolve o mês (0-11). • getSeconds() - Devolve os segundos. (0-59)• getTime() - Devolve os segundos transcorridos entre o dia 1 de janeiro de 1970 e a data correspondente ao objeto ao que se

passa a mensagem. • getFullYear() - Retorna o ano com todos os dígitos. • getTimezoneOffset() - Retorna a diferença de tempo entre a hora do UTC e a hora local, em minutos. • getUTCDate() - Retorna data UTC• getUTCDay() - Retorna dia UTC• getUTCFullYear() -Retorna ano UTC• getUTCHours() - Retorna hora UTC• getUTCMilliseconds()-Retorna milissegundos UTC• getUTCMinutes() -Retorna minutos UTC• getUTCMonth() -Retorna mês UTC• getUTCSeconds() - Retorna segundos UTC• parse() -Analisa uma string de data e retorna o número de milissegundos desde a meia-noite de 01 de janeiro de 1970• setDate() - Define o dia do mês. (1-31)• setDay() - Define o dia da semana. (0-6)

• setHours() - Define a hora. (0-23)• setMinutes() - Define os minutos. (0-59)• setMonth() - Define o mês (0-11). • setSeconds() - Define os segundos. (0-59)• setTime() - Define os segundos transcorridos entre o dia 1 de janeiro de 1970 e a data correspondente ao objeto ao que se

passa a mensagem. • setFullYear() - Define o ano com todos os dígitos. • setTimezoneOffset() - Define a diferença de tempo entre a hora do UTC e a hora local, em minutos. • setUTCDate() - Define data UTC• setUTCDay() - Define dia UTC• setUTCFullYear() - Define ano UTC• setUTCHours() - Define hora UTC• setUTCMilliseconds()- Define milissegundos UTC• setUTCMinutes() - Define minutos UTC• setUTCMonth() - Define mês UTC• setUTCSeconds() - Define segundos UTC• toISOString() - Retorna a data como uma string, usando o padrão ISO• toJSON() - Retorna a data como uma string, formatado como uma data JSON• toLocaleDateString() - Retorna a parte de data de um objeto Date como uma string, usando a convenção local• toLocaleTimeString() - Retorna a parte do tempo de um objeto Date como uma string, usando a convenção local• toLocaleString()- Converte um objeto Date para uma String usando a convenção local• toString()- Converte o objeto Date em String• toTimeString() - Converte a parte do tempo de um objeto Date para uma string• toUTCString()- Converte um objeto de data para uma String, de acordo com a hora universal

• UTC() - Retorna o número de milissegundos em um string de data desde a meia-noite de 1 de janeiro de 1970, de acordo com a hora universal

• valueOf() - Retorna o valor primitivo de um objeto Date

6.5.Classe MathA classe Math proporciona os mecanismos para realizar operações matemáticas em Javascript.

6.5.1.Propriedades de mathPara usá-las utiliza-se ao prefixo Math. e o nome da propriedade.

• E - Número E ou constante de Euler, a base dos logaritmos neperianos. • LN2 - Logaritmo neperiano de 2. • LN10 - Logaritmo neperiano de 10. • LOG2E - Logaritmo em base 2 de E. • LOG10E - Logaritmo em base 10 de E. • PI - Conhecido número para cálculo com círculos. • SQRT1_2 -Raiz quadrada de um meio. • SQRT2 - Raiz quadrada de 2.

6.5.2.Métodos de Math Ainda assim, temos uma série de métodos para realizar operações matemáticas típicas, embora um pouco complexas.• abs() - Devolve o valor absoluto de um número. O valor depois de tirar o signo. • acos() - Devolve o arco co-seno de um número em radianos. • asin() - Devolve o arco co-seno de um número em radianos. • atan() - Devolve um arco tangente de um número. • ceil() - Devolve o inteiro igual ou imediatamente seguinte de um número. Por exemplo, ceil(3) vale 3, ceil(3.4) é 4. • cos() - Retorna o co-seno de um número. • exp() - Retorna o resultado de elevar o número E por um número. • floor() - O contrário de ceil(), pois devolve um número igual ou imediatamente inferior. • log() - Devolve o logaritmo neperiano de um número. • max() - Retorna o maior de 2 números. • min() - Retorna o menor de 2 números. • pow() - Recebe dois números como parâmetros e devolve o primeiro número elevado ao segundo número. • random() -Devolve um número aleatório entre 0 e 1. Método criado a partir de Javascript 1.1. • round() -Arredonda ao inteiro mais próximo. • sin() -Devolve o seno de um número com um ângulo em radianos. • sqrt() -Retorna a raiz quadrada de um número. • tan() -Calcula e devolve a tangente de um número em radianos.

6.6. Expressões Regulares (RegExp)Expressão Regular é uma forma de efetuar a validação sobre um texto através de um determinado padrão, eliminando um longo

trecho de código para fazer esta função.Uma Regular Expression é composta de uma sequência de símbolos e caracteres especiais que é interpretada como uma regra, que

indicará se um texto posterior segue todas as condições nela impostas.Vamos a um exemplo prático: validação de e-mail.

function validaEmail(mail){var er = RegExp(/^[A-Za-z0-9_\-\.]+@[A-Za-z0-9_\-\.]{2,}\.[A-Za-z0-9]{2,}(\.[A-Za-z0-9])?/); if(mail == “”){ window.alert(“Informe seu e-mail!”); }else if(er.test(mail) == false){ window.alert(“E-mail inválido!”); } }

Vamos entender o código. Na segunda linha temos a declaração da Regular Expression escrita em uma das duas formas possíveis.

Pode-se utilizar o método construtor RegExp, assim como no exemplo, ou atribuir diretamente a expressão.

var er = /^[A-Za-z0-9_\-\.]+@[A-Za-z0-9_\-\.]{2,}\.[A-Za-z0-9]{2,}(\.[A-Za-z0-9])?/;

Da primeira forma você pode-se atribuir a expressão regular dinamicamente, passando uma string por parâmetro, por exemplo. Nasegunda forma, o conteúdo da expressão é estático, sendo definido no código somente.Vamos por partes:

1. Primeira parte: ^[A-Za-z0-9_\-\.]+: os caracteres devem estar entre A e Z (apenas maiúsculo), entre a e z2. Segunda parte: @: após a primeira sequência de caracteres deve encontrar uma arroba (@).3. Terceira parte: [A-Za-z0-9_\-\.]{2,}: deve encontrar duas ou mais sequências de caracteres que satisfaçam a condição de ser

alfanumérico, underline, traço ou ponto.4. Quarta parte: \.[A-Za-z0-9]{2,}: deve encontrar duas ou mais sequências de caracteres alfanuméricos antecedidos por ponto.5. Quinta parte: (\.[A-Za-z0-9])?: pode encontrar ou não uma seqüência contendo os caracteres que estão entre os parênteses.

Por fim, a função test irá validar a expressão, retornando um valor booleano que indicará se a string passada por parâmetro está validada dentro da expressão.

Para entender melhor, a Tabela 01 traz os sinalizadores utilizados nas expressões regulares e seus respectivos significados.

Sinalizador Descrição Exemplo

Sinalizadores

iNão faz distinção entre letras maiúsculas e minúsculas

/Java/i encontrará tanto "java" quanto "Java" e "JAVA"

gPesquisa global de todas as ocorrências de um padrão

/ca/g encontrará as duas ocorrências de "ca" na frase "É cada macaco no seu galho"

giPesquisa global, sem distinção entre letras maiúsculas e minúsculas

/ca/g encontrará as duas ocorrências de "ca" na frase "Cadamacaco no seu galho"

Caracteres literais

\n Encontra um caractere de quebra de linha.

\r Encontra um caractere de retorno de carro.

\tEncontra um caractere de tabulação horizontal.

\vEncontra um caractere de tabulação vertical.

\fEncontra um indicador de quebra de página.

\xxxEncontra o caractere ASCII expresso pelo valor octal xxx.

"\50" encontra o caractere de abertura de parenteses "("

\xddEncontra o caractere ASCII expresso pelo valor hexadecimal dd.

"\x28" encontra o caractere de abertura de parenteses "("

\uxxxxEncontra o caractere ASCII expresso pelo valor UNICODE xxxx.

"\u00A3" encontra"£"

Posições dos itens de pesquisa

^Encontra somente no início da string /^The/ encontra "The" in "The night" mas não encontra em

"In The Night"

$Encontra somente no final da string. /and$/ encontra "and" em "Land" mas não encontra em

"landing"

\b

Encontra nos extremos de uma palavra (os caracteres de teste devem existir no início ou fim de uma palavra pertencente à string).

/ly\b/ encontra "ly" em "This is really cool."

\BEncontra no meio de uma palavra da string,ou seja, o inverso de \b.

/\Bor/ encontra "or" em "normal" mas não encontra em "origami."

Classes de caracteres

[xyz]

Encontra qualquer caractere pertencente ao grupo de caracteres dentro dos colchetes. Você pode usar o hífen para definir uma faixa. Por exemplo: /[a-z]/ encontra qualquer letra do alfabeto, /[0-9]/ encontra qualquer digito de 0 a 9.

/[AN]BC/ encontra "ABC" e"NBC" mas não encontra "BBC" uma vez que o "B" fora dos colchetes não faz parte do conjunto.

[^xyz] Encontra qualquer caractere que não esteja no conjunto entre colchetes. O símbolo ^ nos colchetes indica negação. Obs: Não confunda o símbolo ^ (negação)

/[^AN]BC/ encontra "BBC" mas não encontra "ABC" ou "NBC".

dentro dos colchetes com o símbolo ^ que indica que o padrão deve ser encontrado no início da string. A negação deve ser usada somente dentro de colchetes.

.(ponto). Encontra qualquer caractere excetoquebras de linha ou outro caractere UNICODE que significa término de linha.

/b.t/ encontra "bat", "bit", "bet" e assim por diante.

\wEncontra qualquer caractere alfanumérico incluindo o sublinhdo. Equivale à [a-zA-Z0-9_].

/\w/ encontra "200" em "200%"

\WEncontra qualquer caractere que não esteja no conjunto [a-zA-Z0-9_]. Equivale à [^a-zA-Z0-9_].

/\W/ encontra "%" em "200%"

\dEncontra qualquer dígito de 0 a 9. Equivale a [0-9].

\DEncontra qualquer caractere que não seja um dígito. Equivale à [^0-9].

/\D/ encontra "No" em "No 342222"

\sEncontra um caractere que provoca um espaço. Equivale à [ \t\r\n\v\f].

\SEncontra qualquer caractere que não provoque um espaço. Equivale à [^ \t\r\n\v\f].

Padrões de repetições

{x}Encontra exatamente x ocorrências de um padrão.

/\d{5}/ encontra 5 dígitos.

{x,}Encontra x ou mais ocorrências de um padrão.

/\s{2,}/ encontra no mínimo 2 caracteres de espaço.

{x,y}Encontra de x até y ocorrências de um padrão.

/\d{2,4}/ encontra no mínimo 2 mas não mais que 4 dígitos.

?Encontra zero ou uma ocorrência. Equivale à {0,1}.

/a\s?b/ encontra "ab" ou "a b".

*Encontra zero ou mais ocorrências. Equivale à {0,}.

/we*/ encontra "w" em "why" e "wee" em "between", mas não encontra em "bad".

+Encontra uma ou mais ocorrências. Equivale à {1,}.

/fe+d/ encontra tanto "fed" quanto "feed"

Agrupamento de padrões

( )Agrupa caracteres para criar uma cláusula. Pode ser aninhado.

/(abc)+(def)/ encontra uma ou mais ocorrências de "abc" seguida(s) por uma ocorrência de "def".

|Oferece alternativa para o padrão. É similara uma instrução "OU".

/(ab)|(cd)|(ef)/ encontra "ab" ou "cd" ou "ef".

Métodos

Método Descrição

exec Executa pesquisas em uma string e retorna um array das informações obtidas.

test Indica se a string satisfaz os parâmetros da expressão regular.

matchExecuta uma pesquisa em uma string e retorna um array das informações obtidas ou nulo se nada for encontrado.

search Faz uma pesquisa na string e retorna o índice do resultado, ou -1 se não for encontrado.

replace Executa uma pesquisa em uma string e substitui o resultado encontrado por uma substring.

split Quebra uma string em um array de substrings.

lastIndexArmazena a posição da última pesquisa bem sucessida realizada na string. Se nada for encontrado, a propriedade lastIndex será colocada como –1.

$n

n representa o numero de 1 a 9 Armazena os nove mais recentes pesquisa dentro de parênteses encontradas. Por exemplo, se o padrãousado por uma regular expression para a última pesquisa foi /(Hello)(\s+)(world)/ e a string pesquisadafoi “Hello world” o conteúdo de RegExp.$2 poderia ser qualquer caractere entro “Hello” e “world”.

source Armazena a copia do padrão da regular expression.

7.Objetos do navegador

7.1.Janelas e FramesO objeto window é suportado por todos os navegadores. Ele representa a janela dos navegadores.Todos os objetos globais JavaScript, funções e variáveis tornam-se automaticamente membros do objeto window.• As variáveis globais são propriedades do objeto janela.• Funções globais são métodos do objeto janela.Mesmo o objeto document (do DOM HTML) é uma propriedade do objeto janela:

Tamanho da Janela do navegadorPara Internet Explorer, Chrome, Firefox, Opera, e Safari:

• window.innerHeight - a altura interior da janela do navegador• window.innerWidth - o comprimento interior da janela do navegador

Para Internet Explorer 8, 7, 6, 5:• document.documentElement.clientHeight• document.documentElement.clientWidth

ou• document.body.clientHeight• document.body.clientWidth

Para conseguir o tamanho da janela do navegador em todos os navegadores:

var w=window.innerWidth|| document.documentElement.clientWidth|| document.body.clientWidth;

var h=window.innerHeight|| document.documentElement.clientHeight|| document.body.clientHeight;

7.1.1.Propriedades• closed - Retorna um valor booleano que indica se uma janela foi fechada ou não• defaultStatus - Determina o conteúdo padrão da barra de status do browser, quando nada de importate estiver acontecendo.

Ex: widow.defaultStatus='Qualquer coisa'• document - Retorna o objeto Document da janela• frames - Vetor que armazena as referências para as frames da janela atual.

Ex: parent.frames.lenght // obtém o número de frames da janela principal, assumindo que estamos em uma frame.• history - Retorna o objeto History da janela• innerHeight - Define ou retorna a altura interior de uma área de janela de conteúdo• innerWidth - Define ou retorna a largura interior de uma área de janela de conteúdo• length - Retorna o número de frames (incluindo iframes) em uma janela• location - Retorna o objeto Location da janela• name - Define ou retorna o nome de uma janela• navigator - Retorna o objeto Navigator da janela• opener - Retorna uma referência para a janela que criou a janela• outerHeight - Define ou retorna a altura exterior de uma janela, incluindo barras de ferramentas / scrollbars• outerWidth - Define ou retorna a largura exterior de uma janela, incluindo barras de ferramentas / scrollbars• pageXOffset - Devolve os pixels (horizontal) do documento actual tiver sido rolado a partir do canto superior esquerdo da

janela• pageYOffset - Devolve os pixels do documento actual que tiver sido rolado (verticalmente) a partir do canto superior

esquerdo da janela• parent - Refere-se a janela pai da frame atual.• screen - Retorna o objeto Screen da janela• screenLeft - Retorna a coordenada x da janela em relação à tela• screenTop - Devolve os coordenada y da janela em relação à tela• screenX - Retorna a coordenada x da janela em relação à tela• screenY - Retorna a coordenada y da janela em relação à tela• self - Refere-se a janela atual.

Ex: self.defaultStatus='Qualquer coisa'• status - Define uma mensagem que irá aparecer no rodapé do browser, em substituição por exemplo, a URL de um link,

quando estivermos com o mouse sobre o link.Ex: window.status="qualquer texto"

• top - Refere-se a janela de nível mais alto do esquema hierárquico do JavaScript.Ex: top.close() // fecha a janela principal do browser

7.1.2.Métodos

• alert() - Mostra uma caixa de alerta, seguido de um sinal sonoro e o botão de OK.Ex: alert('Esta é uma janela de alerta!')

• blur() - Remove o foco da janela atual

• clearInterval() - Limpa um conjunto temporizador com setInterval ()

• clearTimeout() - Limpa um temporizador definido com setTimeout ()

• close()- Termina a sessão atual do browser.Ex: top.close()

• confirm()- Mostra uma caixa de diálogo, seguida de um sinal sonoro e os botão de OK e Cancel. Retorna um valor verdadeiro se o usuário escolher OK.

Ex: retorno=confirm('Deseja prosseguir?')

• createPopup() - Cria uma janela pop-up

• focus() - Define o foco para a janela atual

• moveBy() - Move um parente janela para sua posição atual

• moveTo() - Move uma janela para a posição especificada

• open() - Abre uma nova sessão do browser, como se o usuário pressionasse <CTRL>+NEx: window.open("URL", "Nome" [,"características"])Onde:

◦ URL - endereço selecionado inicialmente quando da abertura da nova janela.◦ Nome - nome da nova janela, definido pelo programador.◦ características - série de opções de configuração da nova janela, se especificados devem estar na mesma string,

separados por vírulas e sem conter espaços.

▪ toolbar=0 ou 1 - Se deve ou não exibir a barra de ferramentas do navegador. O padrão é sim

▪ location=0 ou 1 - Se deve ou não exibir o campo de endereço. O padrão é sim

▪ titlebar= 0 ou 1 - Se deve ou não exibir a barra de título. Ignorado a menos que o aplicativo de chamada é um aplicativo HTML ou uma caixa de diálogo de confiança. O padrão é sim

▪ status=0 ou 1 - Se deve ou não adicionar uma barra de status. O padrão é sim

▪ menubar=0 ou 1 - Se deve ou não exibir a barra de menu. O padrão é sim

▪ scrollbars=0 ou 1 - Se deve ou não exibir barras de rolagem. O padrão é sim

▪ resizable=0 ou 1 - Se ou não a janela é redimensionável. O padrão é sim

▪ width=valor inteiro positivo - A largura da janela. Min. valor é de 100

▪ height=valor inteiro positivo - A altura da janela. Min. valor é de 100Ex: window.open("http://www.geocities.com/CapitolHill/6126/javainde.htm","NovaJanela","toolbar=1,location=1,directories=0,status=1,menubar=1,scrollbars=1,resizable=0,width=320,height=240")

• print() - Imprime o conteúdo da janela atual

• prompt() - Monta uma caixa de entrada de dados, de forma simplificada comparando-se com o objeto text.Ex: prompt(label [,valor])Onde:

◦ label - texto que aparece ao lado da caixa.

◦ valor - é o conteúdo inicial da caixa.

• resizeBy() - Redimensiona a janela pelos pixels especificados

• resizeTo() -Redimensiona a janela para a largura e altura especificadas

• scrollBy() - Rola o conteúdo por um número especificado de pixels

• scrollTo() - Rola o conteúdo para as coordenadas especificadas

• setInterval() - Chama uma função ou avalia uma expressão em intervalos específicos (em milissegundos)

• setTimeout() - Faz com que uma expressão seja avaliada após um determinado tempo (em milissegundos).Ex: setTimeout(code,millisec,lang)

◦ code - Obrigatório. A função que será executada

◦ millisec - Obrigatório. O número de milissegundos de espera antes de executar o código

◦ lang - Opcional. A linguagem de script: JScript | VBScript | JavaScript

7.2.Objeto NavigatorCom o objeto navigator você pode detectar informações dos navegadores, por exemplo: saber qual navegador o visitante está

usando, se os cookies estão habilitados e etc.

Atenção!A informação a partir do objeto de navegação pode muitas vezes ser enganosa, e não deve ser usada para detectar versões do navegador porque:

• Os dados do navegador pode ser alterado pelo dono navegador• Alguns navegadores classificam-se erroneamente para ignorar os testes do site. • Navegadores não pode relatar novos sistemas operacionais, lançado mais depois que o navegador.

7.2.1.Propriedades• appName - nome do navegador;• appVersion - mostra a versão do navegador;• cookieEnabled - verifica se o navegador pode ler ou escrever cookies;• platform - retorna o nome do sistema operacional.

7.2.2.Métodos• javaEnabled() - verifica se o navegador suporta ou não Java;

7.3.Objeto ScreenO objeto window.screen contém informações sobre a tela do usuário.O objeto window.screen podem ser gravados sem ser precedida janela.

7.3.1.Propriedades• availWidth - largura da tela disponível• availHeight - altura da tela disponível• colorDepth - Retorna a profundidade de bits da paleta de cores para exibir imagens• height - Retorna a altura total da tela• pixelDepth - Retorna a resolução de cor (em bits por pixel) da tela• width - Retorna a largura total da tela

7.4.Objeto HistoryEste objeto armazena todas as URL das páginas HTML por onde o usuário passou durante a sessão atual do browser. É uma cópia

das informações armazenadas na opção Go da barra de menu do Navigator.

7.4.1.Propriedades• lenght - Informa a quantidade de páginas visitadas.

7.4.2.Métodos• back - Retorna à página anterior, de acordo com a relação de páginas do objeto history. Equivale a clicar o botão voltar do

navegador.• forward - Passa para a próxima página, de acordo com a relação de páginas do objeto history. Equivale a clicar o botão

avançar do navegador.• go - Permite que qualquer URL que esteja presente na relação de páginas visitadas do objeto history, seja carregada.

Ex: history.go(parâmetro)

Existem duas possibilidades para "parâmetro":1. parâmetro é um número: Ao definir um número, este deve ser inteiro. Se for positivo, a página alvo está "parâmetro"páginas

à frente. Ao passo que se for negativo, a página alvo está "parâmetro" páginas para traz.2. parâmetro é uma string: Neste caso, o alvo é a URL que mais se assemelhe ao valor da string definida por "parâmetro".

7.5.Objeto LocationContém informações acerca da URL corrente, além de permitir desviar o navegador para um outro endereço através da alteração

desta URL.

Uma URL normalmente é constituída da seguinte forma:

protocolo://servidor:porta/caminho#indice?parametros

Existem propriedades que refletem cada uma destas partes da URL.

7.5.1.Propriedades• hash - Retorna a parte âncora de uma URL, incluindo o sinal de sustenido (#). EX: #part2 • host - Retorna o hostname e a porta de uma URL. EX: www.w3schools.com • hostname - Retorna o hostname de um URL. EX:www.w3schools.com • href - Retorna a URL inteira• pathname - Retorna o caminho de uma URL EX:/jsref/prop_loc_pathname.asp • port - Retorna o número da porta utilizada pelo servidor para a URL. Nota: se o número da porta é o padrão (80) nada será

retornado.• protocol - Retorna o protocolo de uma URL. EX: http: • search - Retorna a parte de consulta de um URL. EX: [email protected]

Como você já deve ter percebido nem todos estes elementos estão presentes em todas as URLs. Se omitirmos o nome da propriedade, numa referência ao objeto location, javascript assume que estamos referenciando a

propriedade href. Sendo assim, as duas atribuições a seguir, provocam o mesmo resultado:

location.href="http://www.nce.ufrj.br"location="http://www.nce.ufrj.br"

7.5.2.Métodos• assign() - Carrega um novo documento• reload() - Recarrega o documento atual• replace() - Substitui o documento atual com um novo

8.DOM HTML

8.1.IntoduçãoCom o DOM HTML, JavaScript pode acessar todos os elementos de um documento HTML.Quando uma página é carregada, o navegador cria um Document Object Model da página.O modelo DOM HTML é construído como uma árvore de objetos.

Com um modelo de objeto programável, JavaScript recebe todo o poder de que necessita para criar HTML dinamicamente:

• JavaScript pode mudar todos os elementos HTML na página• JavaScript pode mudar todos os atributos HTML na página• JavaScript pode mudar todos os estilos CSS na página• JavaScript pode reagir a todos os eventos na página

Localizando elementos HTML pela idA maneira mais fácil de encontrar elementos HTML no DOM, é usando o id do elemento.Este exemplo encontra o elemento com id = "intro":

var x=document.getElementById("intro");

Se o elemento é encontrado, o método irá retornar o elemento como um objeto (x).Se o elemento não é encontrado, x conterá nulo.

Localizando elementos HTML pela tag nameEste exemplo encontra o elemento com id = "main", e em seguida, encontra todos os elementos <p> dentro de "main":

var x=document.getElementById("main");var y=x.getElementsByTagName("p");

Nota: Encontrar elementos pelo nome da classe não funciona no Internet Explorer 5,6,7 e 8.

8.1.1.DOM HTMLO DOM HTML permite que o JavaScript para alterar o conteúdo de elementos HTML.

Alterando o fluxo de saída HTMLEm JavaScript, document.write () pode ser usado para gravar diretamente no fluxo de saída HTML:

Exemplo:

<!DOCTYPE html><html> <body>

<script> document.write(Date()); </script>

</body></html>

Nota: Nunca use document.write () depois que o documento é carregado. Ele vai substituir o documento.

Alterar conteúdo HTMLA maneira mais fácil de modificar o conteúdo de um elemento HTML está usando a propriedade innerHTML.Para alterar o conteúdo de um elemento HTML, use esta sintaxe:

document.getElementById (id). innerHTML = new HTML

Este exemplo modifica o conteúdo de um elemento <p>:Exemplo:

<html> <body>

<p id="p1">Hello World!</p>

<script> document.getElementById("p1").innerHTML="New text!"; </script>

</body></html>

Alterando um atributo HTMLPara alterar o atributo de um elemento HTML, use esta sintaxe:

document.getElementById(id).attribute=new value

Exemplo:Este exemplo altera o atributo src de um elemento <img>:

<!DOCTYPE html><html> <body>

<img id="image" src="smiley.gif">

<script> document.getElementById("image").src="landscape.jpg"; </script>

</body></html>

8.1.2.DOM CSSO DOM HTML permite que o JavaScript mude o estilo de elementos HTML.

Mudando de estilo HTMLPara alterar o estilo de um elemento HTML, use esta sintaxe:

document.getElementById(id).style.property=new style

Exemplo:O exemplo a seguir altera o estilo de um elemento <p>:

<html><body>

<p id="p2">Hello World!</p>

<script>document.getElementById("p2").style.color="blue";</script>

<p>The paragraph above was changed by a script.</p>

</body></html>

8.2.Dom DocumentCada documento HTML carregado em uma janela do navegador se torna um objeto Document.O objeto Document fornece acesso a todos os elementos HTML em uma página, a partir de um script.Dica: O objeto Document também faz parte do objeto da janela, e pode ser acessado através da propriedade window.document.Nota: O objeto do documento também pode usar as propriedades e métodos do objeto Node.

8.2.1.Propriedades• anchors - Retorna uma coleção de todas as âncoras no documento• applets - Retorna uma coleção de todos os applets no documento• body - Retorna o elemento body do documento• cookie - Retorna todos os pares nome / valor dos cookies do documento• documentMode - Retorna o modo utilizado pelo navegador para processar o documento• domain - Retorna o nome do domínio do servidor que colocou o documento• forms - Retorna uma coleção de todos os formulários do documento• images - Retorna uma coleção de todas as imagens no documento• lastModified - Retorna a data e a hora em que o documento foi modificada pela última vez• links - Retorna uma coleção de todos os links no documento• readyState - Retorna o status (carregamento) do documento

• referrer - Retorna a URL do documento que carregou o documento atual• title - Define ou retorna o título do documento• URL - Retorna a URL completa do documento

8.2.2.Métodos• close() - Fecha o fluxo de saída previamente aberto com document.open ()• getElementsByName() - Acessa todos os elementos com um nome especificado• open() - Abre um fluxo de saída para coletar a saída de document.write () ou document.writeln ()• write() - Escreve expressões HTML ou código JavaScript em um documento• writeln() - Mesmo que write(), mas acrescenta um caractere de nova linha após cada declaração

8.3.DOM EventosHTML DOM permite que o JavaScript reaja a eventos HTML.

Reagindo a EventosUm JavaScript pode ser executado quando um evento ocorre, como quando um usuário clica em um elemento HTML.

Para executar código quando um usuário clica em um elemento, adicione o código JavaScript a um atributo de evento HTML:

onclick=JavaScript

Exemplo:Neste exemplo, o conteúdo do elemento <h1> é alterado quando um utilizador clica nele:

<!DOCTYPE html><html><body><h1 onclick="this.innerHTML='Ooops!'">Click on this text!</h1></body></html>

Atributos de Eventos HTMLPara atribuir eventos a elementos HTML que você pode usar os atributos de eventos.Exemplo:Atribuir um evento onclick a um elemento button:

<button onclick="displayDate()">Try it</button>

Atribuir eventos Usando o DOM HTML O DOM HTML permite atribuir eventos a elementos HTML usando JavaScript:Exemplo:Atribuir um evento onclick a um elemento button:

<script>document.getElementById("myBtn").onclick=function(){displayDate()};</script>

8.3.1.Eventos• onAbort

Executa um código JavaScript quando o usuário interrompe o carregamento de uma imagem, por exemplo, com um clique no botão Parar. Deve ser usado com o objeto imagem (IMG) de HTML.

Exemplo:

<img name="foto" SRC="minha_foto.gif" onAbort="alert('Você não viu minha foto')">

• onBlurCom o evento onBlur o usuário irá controlar o conteúdo de um elemento em um formulário select, text ou textarea quando o

mesmo remove o foco. Veja pelo exemplo a seguir de uma caixa de texto exibir uma mensagem na tela assim que o campo perde o foco:

<pre> <form name="form1"> Digite seu Nome: <input type="text" name="nome" onBlur="alert('Favor preencher')"> </form>

</pre> Veja agora outro exemplo, criando uma função para que caso o usuário deixe ocampo em branco, seja exibida a mensagem de alerta: <script> </script><pre> <form name="form1"> Digite seu Nome: <input type="text" name="campo1" onBlur="teste()"></form>

• onChangeCom o evento onChange o usuário poderá acionar alguma função sempre que for alterado o conteúdo dos objetos textarea, text ou

select. Este evento é bem similar com o evento onBlur, porém ele verifica se o conteúdo do elemento foi alterado. Vejamos um exemplo de sua utilização:Digite seu Endereço:

<input type="text" name="campo2" onChange="alert('testando')">

• onClickO evento onClick é utilizado em links, botões, radio, checkbox, reset. Vejamos um exemplo de sua utilização em um botão de

formulário:

<input type="button" name="botao" value="Envia"onClick="alert('Obrigado pelos Dados')">

• onDblClickExecuta um código JavaScript quando um duplo clique é dado no objeto. Usado para document, Link, na forma

onDblClick="algumaCoisa", onde "algumaCoisa" é uma função ou código de JavaScript.

Exemplo:

<form><input Type="button" Value="Teste" onDblClick="alert('Foi dado um duplo clique')"></form>

• onDragDropExecuta um código JavaScript quando um objeto é arrastado para a janela do navegador. Usado para window, na forma

onDragDrop="algumaCoisa", onde "algumaCoisa" é uma função ou código de JavaScript.

• onErrorExecuta um código JavaScript quando um erro ocorre no carregamento de uma janela ou imagem. Usado para Image, window, na

forma onError="algumaCoisa", onde "algumaCoisa" é uma função ou código de JavaScript.O evento só ocorre em caso de erro de sintaxe no código ou erro em tempo de execução do mesmo. Não reporta erros do

navegador.Se é forçado para nulo, suprime mensagens de erro.

Exemplo 1:

<img name="foto" src="foto.gif" align="left" border="2" onError="null">

Exemplo 2:

<script language="javascript"_>window.onerror=null</script><img name="foto" src="foto.gif" align="left" BORDER="2">

O primeiro exemplo suprime mensagens de erro apenas no carregamento da imagem foto.gif. O segundo exemplo suprime para toda ajanela.

• onFocusCom o manipulador onFocus o usuário poderá criar uma ação sempre que os elementos select, text ou textarea receberem o foco.

Ao contrário do evento onBlur que executa ações sempre que o elemento perde o foco. Veja um exemplo de sua utilização:Digite seu Nome:

<input type="text" name="campo1" onBlur="teste()"onFocus= "alert ('Digite seu nome completo')">

Digite seu Endereço:

<input type="text" name="campo2" onChange="alert('testando')"onFocus="this.value='R. Castelo da Beira'">

• onKeyDownExecuta um código JavaScript quando uma tecla é pressionada. Usado para document, Image, Link, Text, Textarea, na forma

onKeyDown="algumaCoisa", onde "algumaCoisa" é uma função ou código de JavaScript.

Exemplo:

<script language="javascript"> function semArroba(e){ var carac = String.fromCharCode(e.which); if (carac == '@') return false; } document.form1.nome.onkeydown = semArroba;</script>

<form name="form1"> <input type="text" value="" name="nome"></form>

O código dado evita que o usuário insira o caractere "@" no campo "nome".

• onKeyPressExecuta um código JavaScript quando o usuário pressiona ou mantém pressionada uma tecla. Usado para document, Image, Link,

Text, Textarea, na forma onKeyPress="algumaCoisa", onde "algumaCoisa" é uma função ou código de JavaScript.

Exemplo:

<script language="javascript">

function rolar(e){ var carac = String.fromCharCode(e.which); if (carac == 'c') self.scrollBy(0,10); else if(carac == 'b') self.scrollBy(0,-10); else return false;}

document.captureEvents(Event.KEYPRESS);document.onkeypress = rolar;</script>

O código dado rola a tela 10 pixels acima se o caractere "c" for pressionado e abaixo se "b" for pressionado (o evento KeyPress é repetido continuamente enquanto o usuário mantém a tecla pressionada).

• onKeyUpExecuta um código JavaScript quando o usuário libera uma tecla que foi pressionada. Usado para document, Image, Link, Text,

Textarea, na forma onKeyUp="algumaCoisa", onde "algumaCoisa" é uma função ou código de JavaScript.

Exemplo:

<script language="javascript">

function teclaLiberada(e){var carac = String.fromCharCode(e.which);alert("Você liberou a tecla " + carac);}document.onkeyup=teclaLiberada;

document.captureEvents(Event.KEYUP);

</script>

O código dado exibe uma mensagem com o caractere da tecla liberada.

• onLoadConforme exemplo mostrando anteriormente, com o evento onLoad executa alguma ação assim que o documento é carregado no

browser. Este objeto é aplicado diretamente ao objeto window.Veja abaixo um exemplo de exibição de uma mensagem de alerta assim que a página é carregada:

<body onLoad="alert('Seja Bem Vindo')">

• onUnloadCom o evento onUnLoad o usuário pode determinar uma ação assim que o usuário sai da página, seja por meio de um hiperlink ou

até mesmo fechando o navegador. Com base no exemplo anterior foi criado uma mensagem de alerta assim que o usuário deixa a página:

<body onLoad="alert('Seja Bem Vindo')"onUnLoad="alert('Obrigado pela visita!')">

• onMouseDownExecuta um código JavaScript quando o usuário pressiona um botão do mouse. Usado para Button, document, Link, na forma

onMouseDown="algumaCoisa", onde "algumaCoisa" é uma função ou código de JavaScript.

• onMouseMoveExecuta um código JavaScript quando o usuário move o cursor com o mouse. Usado na forma onMouseMove="algumaCoisa",

onde "algumaCoisa" é uma função ou código de JavaScript.

Note que não é associado a nenhum evento em particular por ser bastante frequente.

• onMouseOutExecuta um código JavaScript quando o usuário move o cursor de dentro para fora de uma determinada área (mapa de imagem ou

link). Usado para Layer, Link, na forma onMouseOut="algumaCoisa", onde "algumaCoisa" é uma função ou código de JavaScript.

• onMouseOverCom o evento onMouseOver o usuário criará uma ação que será acionada sempre que o ponteiro do mouse se mover sobre um

link. Veja um exemplo de sua utilização:

<a href="http://www.mg.senac.br"onMouseOver="defaultStatus='Olhe para a barra deStatus'">SENAC</a><br>

Será exibida uma mensagem na barra de status, assim que o mouse sair de cima do link. Para evitar este problema, atribua para este evento a instrução return true que executará o comando é executado sem problemas. Veja pelo exemplo a seguir:

<a href="http://www.mg.senac.br"onMouseOver="defaultStatus='Olhe para a barra de Status';return true">SENAC</a><br>

Lembre-se que quando quiser executar duas ações para o mesmo evento, basta separá-las com um ponto e vírgula.

• onMoveExecuta um código JavaScript quando o usuário move uma janela. Usado para window, na forma onMove="algumaCoisa", onde

"algumaCoisa" é uma função ou código de JavaScript.

• onResetExecuta um código JavaScript quando o usuário clica o botão Reset de um formulário. Usado para Form, na forma

onReset="algumaCoisa", onde "algumaCoisa" é uma função ou código de JavaScript.

Exemplo:

<form name="form1" onReset="alert('Considerado meio padrão de envio')">Meio de envio:<input type="text" name="forma" value="Via aérea" size="2"_><input type="reset" name="padrao" value="Limpar"></form>

O código dado avisa que o meio padrão será considerado se o usuário clicar no botão "Limpar" do formulário.

• onResizeExecuta um código JavaScript quando o usuário redimensiona uma janela ou um frame. Usado para window, na forma

onResize="algumaCoisa", onde "algumaCoisa" é uma função ou código de JavaScript.

Exemplo:

<script language="javascript">function abrirJanela(){ var janela; janela=window.open("janela.htm",null,"width=200, height=200, resizable=yes, menubar=no, location=no"); janela.captureEvents(Event.RESIZE); janela.onresize=informar;}function informar(){ alert("Janela redimensionada para largura: " + this.outerWidth + "e altura: " +this.outerHeight); this.focus();}</script>

O código dado informa a nova largura e a nova altura sempre que a janela é redimensionada.

• onSelectO evento onSelect ocorre sempre quando o usuário seleciona um texto dos elementos de formulário text ou textarea.

Vejamos um exemplo de sua utilização:

<form name="form1">Digite seu Nome:<input type="text" name="campo1"onSelect="alert('O usuário selecionou '+this.value)">

• onSubmitO evento onSubmit ocorre sempre que o usuário envia o formulário. Com este

evento o usuário poderá determinar ou não o envio do formulário. Vejamos umexemplo para sua utilização:

<form name="form1" onSubmit="alert('Formulário Enviado')">

Com este evento o usuário poderá verificar a validação de dados, como porexemplo se todos os campos do formulário estão preenchidos.

Veja agora um exemplo desta utilização, caso o campo específico esteja embranco o usuário receberá uma mensagem informando que o campo não foipreenchido:

<script></script><pre><form name="form1" onSubmit="teste()"> Digite seu Nome: <input type="text" name="campo1"></form>

• onUnloadExecuta um código JavaScript quando o usuário sai da janela. Usado para window, na forma onUnload="algumaCoisa", onde

"algumaCoisa" é uma função ou código de JavaScript.

Exemplo:

<BODY onUnload="terminar()">

No código dado, a função a ser desenvolvida, "terminar()", deve fazer alguma ação que for necessária quando o usuário sair da janela.

8.4.DOM ElementsAdicionar e Remover nós (elementos HTML)Criação de novos elementos HTML

Para adicionar um novo elemento para o DOM HTML, você deve primeiro criar o elemento (elemento node),, e depois anexá-lo a um elemento existente.

<div id="div1"><p id="p1">This is a paragraph.</p><p id="p2">This is another paragraph.</p></div>

<script> var para=document.createElement("p"); var node=document.createTextNode("This is new."); para.appendChild(node);

var element=document.getElementById("div1"); element.appendChild(para);</script>

Removendo elementos HTML existentesPara remover um elemento HTML, você deve conhecer o pai do elemento:

<div id="div1"><p id="p1">This is a paragraph.</p><p id="p2">This is another paragraph.</p></div><script> var parent=document.getElementById("div1"); var child=document.getElementById("p1"); parent.removeChild(child);</script>

Propriedades Nota: Todos os elementos também podem usar as propriedades / métodos do objeto Node e do objeto Element.

• accessKey - Define ou retorna uma chave de acesso para um elemento

• className - Define ou retorna o atributo classe de um elemento

• clientHeight - Retorna a altura visível do conteúdo em uma página (não incluindo fronteiras, margens ou barras de rolagem)

• clientWidth - Retorna a largura visível do conteúdo de uma página (não incluindo fronteiras, margens ou barras de rolagem)

• dir - Define ou retorna a direção do texto de um elemento

• id - Define ou retorna o ID de um elemento

• innerHTML - Define ou retorna o conteúdo HTML (+texto) de um elemento

• lang - Define ou retorna o código de idioma de um elemento

• style - Define ou retorna o atributo estilo de um elemento

• tabIndex - Define ou retorna a ordem de tabulação de um elemento

• title - Define ou retorna o atributo Title de um elemento

Métodos de elementos

• toString() - Converte um elemento em uma string

9.Núcleo DOMO objeto Node representa um nó no documento HTML.Um nó em um documento HTML é:• o documento• um elemento• um atributo

• texto• um comentário

9.1.Propriedades de nós• attributes - Retorna uma coleção de atributos de um nó• baseURI - Retorna a URI base absoluta de um nó• childNodes - Retorna uma NodeList de nós filhos de um nó• firstChild - Retorna o primeiro filho de um nó• lastChild - Retorna o último filho de um nó• localName - Retorna a parte local do nome de um nó• namespaceURI - Retorna o namespace URI de um nó• nextSibling - Retorna o próximo nó no mesmo nível do nó de árvore• nodeName - Retorna o nome de um nó, dependendo do seu tipo• nodeType - Retorna o tipo de um nó• nodeValue -Define ou retorna o valor de um nó, dependendo do seu tipo• ownerDocument - Retorna o elemento raiz (objeto documento) para um nó• parentNode - Retorna o nó pai de um nó• prefix - Define ou retorna o prefixo de namespace de um nó• previousSibling - Retorna o nó anterior no mesmo nível do nó de árvore• textContent - Define ou retorna o conteúdo textual de um nó e seus descendentes

9.2.Métodos de nós

• appendChild() - Adiciona um novo nó filho, para o nó especificado, como o último nó filho

• cloneNode() - Clones de um nó

• compareDocumentPosition() - Compara a posição do documento de dois nós

• getFeature(feature,version) - Retorna um objeto DOM que implementa as APIs especializada do recurso e versão especificada

• getUserData(key) - Retorna um objeto associado a uma chave ou a este nó. O objeto deve primeiro ter sido definido para este nó chamando setUserData com a mesma chave

• hasAttributes() - Retorna true se o nó tem algum atributo, caso contrário, ele retorna false

• hasChildNodes() - Retorna true se um nó tem os nós filho, caso contrário, ele retorna false

• insertBefore() - Insere um novo nó filho antes que um determinado nó filho, já existente,

• isDefaultNamespace() - Retorna verdadeiro se o namespaceURI especificado é o padrão, caso contrário false

• isEqualNode() -Verifica se dois nós são iguais

• isSameNode() - Verifica se dois nós são o mesmo nó

• isSupported() - Retorna true se um recurso especificado é suportado em um nó, caso contrário false

• lookupNamespaceURI() - Retorna o namespace URI correspondente a um prefixo especificado

• lookupPrefix() - Retorna o prefixo correspondente a URI de namespace especificadonormalize() - Une nós de texto adjacentes e remove nós de texto vazios

• removeChild() - Remove um nó filho

• replaceChild() - Substitui um nó filho

• setUserData(key,data,handler) - Associa um objeto a uma chave de um nó

9.3.Tipos de nó1. Element

Representa um elementoFilhos: Element, Text, Comment, ProcessingInstruction, CDATASection, EntityReferenceRetorno nodeName: element nameRetorno nodeValue: nullConstante nome: ELEMENT_NODE

2. AttrRepresenta um atributoFilhos: Text, EntityReferenceRetorno nodeName: attribute name

Retorno nodeValue: attribute valueConstante nome: ATTRIBUTE_NODE

3. TextRepresenta o conteúdo textual em um elemento ou atributoFilhos: nenhumRetorno nodeName: #textRetorno nodeValue: content of nodeConstante nome: TEXT_NODE

4. CDATASectionRepresenta uma seção CDATA em um documento (texto que não será analisado por um analisador)Filhos: nenhumRetorno nodeName: #cdata-sectionRetorno nodeValue: content of nodeConstante nome: CDATA_SECTION_NODE

5. EntityReference Representa uma referência de entidadeFilhos: Element, ProcessingInstruction, Comment, Text, CDATASection, EntityReferenceRetorno nodeName: entity reference nameRetorno nodeValue: nullConstante nome: ENTITY_REFERENCE_NODE

6. EntityRepresenta uma entidadeFilhos: Element, ProcessingInstruction, Comment, Text, CDATASection, EntityReferenceRetorno nodeName: entity nameRetorno nodeValue: nullConstante nome: ENTITY_NODE

7. ProcessingInstructionRepresenta uma instrução de processamentoFilhos: nenhumRetorno nodeName: targetRetorno nodeValue: content of nodeConstante nome: PROCESSING_INSTRUCTION_NODE

8. CommentRepresenta um comentárioFilhos: nenhumRetorno nodeName: #commentRetorno nodeValue: comment textConstante nome: COMMENT_NODE

9. DocumentRepresenta todo o documento (o nó raiz da árvore de DOM)Filhos: Element, ProcessingInstruction, Comment, DocumentTypeRetorno nodeName: #documentRetorno nodeValue: nullConstante nome: DOCUMENT_NODE

10. DocumentTypeFornece uma interface para as entidades definidas para o documentoFilhos: nenhumRetorno nodeName: doctype nameRetorno nodeValue: nullConstante nome: DOCUMENT_TYPE_NODE

11. DocumentFragmentRepresenta um objeto de documento "lightweight", que pode conter uma parte de um documentoFilhos: Element, ProcessingInstruction, Comment, Text, CDATASection, EntityReferenceRetorno nodeName: #document fragmentRetorno nodeValue: nullConstante nome: DOCUMENT_FRAGMENT_NODE

12. Notation

Representa uma notação declarada no DTDFilhos: nenhumRetorno nodeName: notation nameRetorno nodeValue: nullConstante nome: NOTATION_NODE

9.4.NodeListDefinição e Uso

O objeto NodeList representa uma coleção ordenada de nós.Os nós no NodeList podem ser acessados através de seu número de índice (a partir de 0).Um objeto NodeList pode ser uma coleção de nó de nós filho.

Propriedades

• lenght- números de nós em uma coleção

Métodos

• item() - Retorna o nó com o índice especificado em uma lista de nós

9.5.NamedNodeMapO objeto NamedNodeMap representa uma coleção não-ordenada de nós.Os nós no NamedNodeMap pode ser acessado através do seu nome.Um objeto NamedNodeMap pode ser uma coleção de nó de atributos.

Propriedades:

• length - números de nós em uma coleção

Métodos• getNamedItem() - Retorna o nó especificado (por nome)• getNamedItemNS() - Retorna o nó especificado (por nome e namespace)• item() - Retorna o nó do índice especificado no namedNodeMap• removeNamedItem() - Remove o nó especificado (por nome)• removeNamedItemNS() -Remove o nó especificado (por nome e namespace)• setNamedItem() - Define o nó especificado (por nome)• setNamedItemNS() - Define o nó especificado (por nome e namespace)

9.6.O Objeto DOM DocumentO objeto do documento é a raiz de uma árvore do documento.O objeto Document nos dá acesso aos dados do documento.Desde que nós do elemento, nós de texto, atributos, comentários, etc, não pode existir fora do documento, o objeto Document

contém métodos para criar esses objetos. Todos os objetos Node tem uma propriedade ownerDocument que associa com o documento em que foram criados.

Nota: O objeto do documento também pode usar as propriedades e métodos do objeto Node.

Propriedades• doctype - Retorna a Declaração de Tipo de Documento associada ao documento• documentElement - Retorna o Elemento documento do documento (o elemento HTML)• documentURI - Define ou retorna a localização do documento• domConfig - Retorna a configuração usada quando normalizeDocument () é invocado• implementation - Retorna o objeto DOMImplementation que trata esta documento• inputEncoding - Retorna a codificação econjunto de caracteres usados no o documento• strictErrorChecking - Define ou retorna se de verificação de erros é imposta ou não• xmlEncoding - Retorna a codificação XML do documento XML• xmlStandalone - Define ou retorna se o documento XML é autônomo ou não• xmlVersion - Define ou retorna a versão XML do documento XML

Métodos• adoptNode(node) - Adota um nó de outro documento para este documento. Retorna o nó adotado• createAttribute() - Cria um nó de atributo

• createAttributeNS(URI,name) - Cria um atributo com o nome especificado e namspaceURI• createCDATASection() - Cria um nó CDATA com o texto especificado. Apenas para XML DOM • createComment() - Cria um nó de comentário com o texto especificado• createDocumentFragment() - Cria um nó DocumentFragment vazio• createElement() - Cria um nó elemento • createElementNS() - Cria um elemento com o namespace especificado• createEntityReference() - Cria um nó EntityReference. Apenas para XML DOM• createProcessingInstruction() - Cria um nó EntityReference. Apenas para XML DOM• createTextNode() - Cria um nó texto• getElementById() - Retorna o elemento que tem o atributo ID com o valor especificado• getElementsByTagName() - Retorna uma NodeList contendo todos os elementos com a tag name especificada• getElementsByTagNameNS() - Retorna uma NodeList contendo todos os elementos com a namespaceURI e a tag name

especificadas• importNode() - Importa um nó de outro documento• normalizeDocument() - Remove os nós de texto vazio, e une os nós adjacentes• renameNode() - Muda o nome do nó especificado

9.7.O Objeto DOM ElementO objeto Elemento representa um elemento no documento HTML.O objeto elemento pode ter nós filhos do tipo Element, Text, Comment, CDATASection, ProcessingInstruction, e

EntityReference.O objeto Element podem ter atributos, que têm o tipo de nó Attr.

Nota: O objeto Elemento também pode usar as propriedades e métodos do objeto Node.

Propriedades

• schemaTypeInfo - Retorna as informações de tipo de elemento.

• tagName - Retorna o nome da tag do elemento

Métodos• getAttribute() - Retorna o valor do atributo especificado• getAttributeNS() - Retorna o valor do atributo especificado, com o namespace especificado. Apenas para XML DOM• getAttributeNode() - Retorna o nó de atributo especificado• getAttributeNodeNS() - Retorna o nó de atributo especificado, com o namespace especificado.Apenas para XML DOM• getElementsByTagName() - Retorna uma coleção de todos os elementos filhos com a tag name especificada• getElementsByTagNameNS() - Retorna uma coleção de todos os elementos filho com o tagname e o namespace

especificado. Apenas para XML DOM• hasAttribute() - Retorna true se o elemento tem o atributo especificado, caso contrário, ele retorna false• hasAttributeNS() - Retorna true se o elemento tem o atributo especificado, com o namespace especificado, caso contrário

ele retorna false. Apenas para XML DOM• removeAttribute() - Remove o atributo especificado• removeAttributeNS() - Remove o atributo com o nome especificado e o namespace. Apenas para XML DOM• removeAttributeNode() - Remove o nó de atributo especificado e retorna o nó removido• setAttribute() -Define ou altera o atributo especificado, para o valor especificado• setAttributeNS() -Define ou altera o atributo especificado com o namespace especificado, para o valor especificado. Apenas

para XML DOM• setAttributeNode() -Define ou altera o nó de atributo especificado• setAttributeNodeNS() -Define ou altera o nó de atributo especificado

9.8.O Objeto DOM AttrO objeto Attr representa um atributo no documento HTML.Um atributo sempre pertence a um objeto elemento.

Nota: O objeto Attr também pode usar as propriedades e métodos do objeto Node.

Propriedades• isId - Retorna true se o atributo é do tipo ID, caso contrário, ele retorna false• name - Retorna o nome do atributo• ownerElement - Retorna o elemento pertence a este atributo• schemaTypeInfo - Retorna as informações de tipo de atributo• specified - Retorna true se o atributo foi especificado, caso contrário, ele retorna false• value - Define ou retorna o valor do atributo

10.PopupAlertJavaScript tem três tipos de caixas de pop-up: caixa de alerta, caixa de confirmação, e caixa de Prompt.

Caixa de AlertaUma caixa de alerta é usada para disponibilizar informações ao usuário.

Sintaxe:

window.alert("sometext");

O método window.alert pode ser escrita sem o prefixo window.Exemplo:

<!DOCTYPE html><html><head><script>function myFunction(){alert("I am an alert box!");}</script></head><body>

<input type="button" onclick="myFunction()" value="Show alert box">

</body></html>

Caixa de ConfirmaçãoUma caixa de confirmação é muitas vezes usada se você deseja que o usuário verifique ou aceite algo.Quando uma caixa de confirmação aparece, o usuário terá de clicar em "OK" ou "Cancelar" para prosseguir.Se o usuário clicar em "OK", a caixa retorna true. Se o usuário clica em "Cancelar", a caixa retorna falso.

Sintaxe

window.confirm("sometext");

O método window.confirm() pode ser escrito sem o prefixo window.Exemplo:

var r=confirm("Press a button");if (r==true) { x="You pressed OK!"; }else { x="You pressed Cancel!"; }

Caixa de PromptA caixa de diálogo de prompt nos possibilita requerer uma entrada ao usuário apesar de não ser tão útil, pois esse recurso pode

facilmente ser substituído por um campo de texto feito em HTML.

Para chamarmos esta caixa de diálogo, usamos a função prompt() que recebe uma string como parâmetro. Esse parâmetro será a mensagem a ser exibida dentro da caixa de diálogo.

nome = prompt ("Qual é o seu nome?");

11.Temporização de eventosCom JavaScript, é possível executar um código em intervalos de tempo especificados. Isto é chamado de temporização de eventos.

É muito fácil de eventos temporizados em JavaScript. Os dois métodos principais que são utilizados são os seguintes:

• setInterval() - executa uma função, repetidamente, em intervalos de tempo especificados

• setTimeout() - executa uma função, repetidas vezes, depois de esperar um número especificado de milissegundosNota: A setInterval() e setTimeout() são os dois métodos do objeto DOM HTML Window.

O método setTimeout()Sintaxe:

window.setTimeout("javascript function",milliseconds);

O window.setTimeout() pode ser escrito sem o prefixo window.O método setTimeout() irá esperar o número especificado de milissegundos, e em seguida, executar a função especificada.O primeiro parâmetro de setTimeout() deve ser uma função.O segundo parâmetro indica quantos milissegundos, a partir de agora, você quer executar o primeiro parâmetro.

Exemplo:Espera 3 segundos e então da um alerta com "Hello":

setTimeout(function(){alert("Hello")},3000);

Como parar a execução?O método clearTimeout() é utilizado para parar a execução da função especificada no método setTimeout().

Sintaxe:

window.clearTimeout(timeoutVariable)

O método window.clearTimeout() pode ser escrito sem o prefixo window.

Para ser capaz de usar o método clearTimeout(), você deve usar uma variável global ao criar o método do timeout:

myVar=setTimeout("javascript function",milliseconds);

Então, se a função não tiver sido executado, você será capaz de parar a execução chamando o método. clearTimeout():

Exemplo:

var myVar;

function myFunction(){ myVar=setTimeout(function(){alert("Hello")},3000);}

function myStopFunction(){ clearTimeout(myVar);}

12.CookiesUm cookie é frequentemente utilizado para identificar um usuário.

O que é um cookie?Um cookie é uma variável que é armazenado no computador do visitante. Cada vez que o computador solicita mesmo uma página

com um navegador, ele enviará o cookie também. Com JavaScript, você tanto pode criar e recuperar valores de um cookie.

Exemplos de cookies:

Cookie de nome - A primeira vez que um visitante acessa à sua página web, ele ou ela deve preencher o seu nome. O nome é então armazenado em um cookie. Próxima vez que o visitante chega a sua página, ele ou ela pode receber uma mensagem de boas-vindas como "Bem-vindo John Doe!" O nome é recuperado do cookie armazenadoData cookie - A primeira vez que um visitante chega à sua página web, a data atual é armazenado em um cookie. Próxima vez que o visitante chega a sua página, ele ou ela pode receber uma mensagem como "Sua última visita foi na terça-feira 11 de agosto de 2005!" A data é recuperado do cookie armazenado

Criar e armazenar um cookieNeste exemplo vamos criar um cookie que armazena o nome de um visitante. A primeira vez que um visitante acessa à página web,

ele ou ela será convidado a preencher seu nome. O nome é então armazenado em um cookie. A próxima vez que o visitante acessa a mesma página, ele ou ela receberá uma mensagem de boas-vindas.

Primeiro, vamos criar uma função que armazena o nome do visitante em uma variável cookie:

function setCookie(c_name,value,exdays){ var exdate=new Date();

exdate.setDate(exdate.getDate() + exdays); var c_value=escape(value) + ((exdays==null) ? "" : "; expires="+exdate.toUTCString()); document.cookie=c_name + "=" + c_value;}

Os parâmetros da função acima armazenar o nome do cookie, o valor do cookie e o número de dias até que o cookie expira.

A função acima, primeiro converte o número de dias numa data válida, então adiciona o número de dias até que o cookie expire. Depois que armazenar o nome do cookie, o valor do cookie e a data de validade no objeto document.cookie.

Então, criamos outra função que retorna um cookie especificado:

function getCookie(c_name){ var i,x,y,ARRcookies=document.cookie.split(";"); for (i=0;i<ARRcookies.length;i++){ x=ARRcookies[i].substr(0,ARRcookies[i].indexOf("=")); y=ARRcookies[i].substr(ARRcookies[i].indexOf("=")+1); x=x.replace(/^\s+|\s+$/g,""); if (x==c_name){ return unescape(y); } }}

A função acima faz uma matriz para recuperar nomes e valores de cookie, em seguida, ele verifica se o cookie especificado existe, e retorna o valor do cookie.

Nós criamos a função que exibe uma mensagem de boas-vindas se o cookie é definido, e se o cookie não está definido que vai exibir uma caixa de alerta, pedindo o nome do usuário, e armazena o cookie nome de usuário para 365 dias, chamando a função setCookie:

function checkCookie(){ var username=getCookie("username"); if (username!=null && username!="") { alert("Welcome again " + username); }else { username=prompt("Please enter your name:",""); if (username!=null && username!=""){ setCookie("username",username,365); } }}

13.Validação Validação de formulário com JavaScript

JavaScript pode ser usado para validar dados em formulários HTML antes de enviar o conteúdo para um servidor.

O JavaScript pode verificar se o usuário:• Deixou campos obrigatórios vazios• Informou um e-mail válido• Informou uma data válida• Digitou texto em campo númerico

Campos obrigatóriosA função abaixo verifica se um campo foi deixado vazio. Se o campo estiver em branco, uma caixa de alerta avisa com uma

mensagem, a função retorna falso, e o formulário não será submetido:

function validateForm(){ var x=document.forms["myForm"]["fname"].value; if (x==null || x=="") { alert("First name must be filled out"); return false; }}

A função acima pode ser chamado quando um formulário é submetido:

<form name="myForm" action="demo_form.asp" onsubmit="return validateForm()" method="post">First name: <input type="text" name="fname"><input type="submit" value="Submit"></form>

E-mail de validaçãoA função abaixo verifica se o conteúdo tem a sintaxe geral de um e-mail.

Isto significa que os dados de entrada devem conter um sinal de @ e pelo menos um ponto (.). Além disso, o @ não deve ser o primeiro caractere do endereço de e-mail, e do último ponto deve estar presente após o sinal @, e um mínimo de 2 caracteres antes do fim:

function validateForm(){ var x=document.forms["myForm"]["email"].value; var atpos=x.indexOf("@"); var dotpos=x.lastIndexOf("."); if (atpos<1 || dotpos<atpos+2 || dotpos+2>=x.length){ alert("Not a valid e-mail address"); return false; }}

A função acima pode ser chamada quando um formulário é submetido:

<form name="myForm" action="demo_form.asp" onsubmit="return validateForm();" method="post">Email: <input type="text" name="email"><input type="submit" value="Submit"></form>

14.Segurança de JavaScript

15.Notas de versãoJavaScript 1.0 - Já suportava um grande número de funções e instruções. - Padrão: ECMA-262, edição 3 - Versão do Netscape: 2.0. - Versão do Internet Explorer: 3.0. - Lançamento: Dezembro/1995.

JavaScript 1.1- Padrão: Serviu de base para o ECMA-262. - Versão do Netscape: 3.0. - Versão do Internet Explorer: 4.0. - Lançamento: Novembro/1996.

JavaScript 1.2- Padrão: Não compatível com o ECMA-262. - Versão do Netscape: 4.0. - Versão do Internet Explorer: 4.0. - Lançamento: Dezembro/1997.

JavaScript 1.3- JavaScript Console. - Suporte a Unicode. - Padrão: ECMA-262, edição 1. - Versão do Netscape: 4.06. - Lançamento: Maio/1998.

JavaScript 1.4- Novos Operadores: in e instanceof. - Tratamento de exceções.

- Padrão: ECMA-262, edição 1. - Versão do Netscape: 4.07. - Lançamento: Outubro/1998.

JavaScript 1.5- Erros em tempo de execução. - Aprimoramento de expressões. - Padrão: ECMA-262, edição 3. - Versão do Netscape: 6.0.- Versão do Firefox: 1.0- Lançamento: Setembro/2000.

JavaScript 1.6- Array extras, arrays e strings genéricas- Suporte a E4X- Versão do Firefox: 1.5- Lançamento: Novembro/2005

JavaScript 1.7 - Geradores Pythonic- Iteradores- let- Versão do Firefox: 2.0- Lançamento: Outubro/2006

JavaScript 1.8- Expressões geradoras- Expressões de clausura- Versão do Firefox: 3.0- Lançamento: Junho/2008

JavaScript 1.8.1- Suporte nativo a JSON- Versão do Firefox: 3.5- Lançamento: Junho/2008

JavaScript 1.8.5- ECMAScript 5 Compliance- Versão do Firefox: 4- Lançamento: Julho/2010

16.Princípios para Escrever JavaScript de forma Consistente e IdiomáticaEste capírulo faz parte do texto Principles of Writing Consistent, Idiomatic JavaScript [WAL]

16.1.Espaço em branco• Nunca misture espaços e tabs.• Quando começar um projeto, antes de escrever qualquer código, escolha entre indentação suave (espaços) ou tabulação real

(tabs), considere isso como lei.◦ Pela legibilidade, eu sempre recomendo que configure o tamanho de indentação de seu editor para dois caracteres - isso

significa dois espaços ou dois espaços representando um tab real.• Se o seu editor suportar, sempre trabalhe com a configuração de "mostrar caracteres invisíveis" ligada. Os benefícios desta

prática são:◦ fortalecer a consistência;◦ eliminar espaço em branco ao final da linha;◦ eliminar espaços em uma linha em branco;◦ commits e diffs mais legíveis.

16.2.Sintaxe bonitaA. Parênteses, chaves e quebras de linhas

// if/else/for/while/try sempre tem espaços, chaves e ocorrem em múltiplas linhas// isso facilita a legibilidade

// 2.A.1.1// Exemplos de código pouco claro/bagunçado

if(condicao) facaAlgo();

while(condicao) iteracao++;

for(var i=0;i<100;i++) algumaIteracao();

// 2.A.1.1// Use espaço em branco para facilitar a leitura

if ( condicao ) {// instruções}

while ( condicao ) {// instruções}

for ( var i = 0; i <100; i++ ) {// instruções}

// Melhor ainda:

var i,length = 100;

for ( i = 0; i <length; i++ ) {// instruções}

// Ou...

var i = 0,length = 100;

for ( ; i <length; i++ ) {// instruções}

var prop;

for ( prop in object ) {// instruções}

if ( true ) {// instruções} else {// instruções}

B. Atribuições, declarações, funções (nomenclatura, expressão, construtor)

// 2.B.1.1// Variáveisvar foo = "bar",num = 1,undef;

// Notações literais:var array = [],object = {};

// 2.B.1.2

// Utilizando apenas um `var` por escopo (função) promove legibilidade// e mantém a sua lista de declaração livre de desordem (além de evitar algumas tecladas)

// Ruimvar foo = "";var bar = "";var qux;

// Bomvar foo = "",bar = "",quux;

// ou..var // comentário aquifoo = "",bar = "",quux;

// 2.B.1.3// declarações de variáveis devem sempre estar no início de seu respectivo escopo (função)// O mesmo deve acontecer para declarações de `const` e `let` do ECMAScript 6.

// Ruimfunction foo() {

// algumas instruções aqui

var bar = "", qux;}

// Bomfunction foo() {var bar = "", qux;

// algumas instruções depois das declarações de variáveis}

// 2.B.2.1// Declaração de função nomeadafunction foo( arg1, argN ) {

}

// Utilizaçãofoo( arg1, argN );

// 2.B.2.2// Declaração de função nomeadafunction square( number ) {return number * number;}

// Utilizaçãosquare( 10 );

// Estilo de passagem artificialmente contínuafunction square( number, callback ) {callback( number * number );}

square( 10, function( square ) {// instruções de callback});

// 2.B.2.3// Expressão de funçãovar square = function( number ) {// Retorna algo de valor e relevantereturn number * number;};

// Expressão de função com identificador// Esse formato preferencial tem o valor adicional de permitir// chamar a si mesmo e ter uma identidade na pilha de comandos:var factorial = function factorial( number ) {if ( number <2 ) { return 1;}

return number * factorial( number-1 );};

// 2.B.2.4// Declaração de construtorfunction FooBar( options ) {

this.options = options;}

// Utilizaçãovar fooBar = new FooBar({ a: "alpha" });

fooBar.options;// { a: "alpha" }

C. Exceções, pequenos desvios

// 2.C.1.1// Funções com callbacksfoo(function() {// Veja que não há espaço extra entre os parênteses// da chamada de função e a palavra "function"});

// Função recebendo uma array, sem espaçofoo([ "alpha", "beta" ]);

// 2.C.1.2// Função recebendo um objeto, sem espaçofoo({a: "alpha",b: "beta"});

// String literal como argumento único, sem espaçofoo("bar");

// Parênteses internos de agrupamento, sem espaçoif ( !("foo" in obj) ) {

}

D. Consistência sempre ganha

Nas seções 2.A-2.C, as regras de espaço em branco são recomendadas sob um propósito simples e maior: consistência. É importante notar que preferências de formatação, tais como "espaço em branco interno" deve ser considerado opcional, mas apenas um estilo deve existir por toda a fonte de seu projeto.

// 2.D.1.1

if (condition) {

// instruções}

while (condition) {// instruções}

for (var i = 0; i <100; i++) {// instruções}

if (true) {// instruções} else {// instruções}

E. Aspas

Se você preferir usar simples ou dupla não importa, não há diferença em como o JavaScript analisa elas. O que ABSOLUTAMENTE PRECISA ser aplicado é consistência. Nunca misture diferentes tipos de aspas em um mesmo projeto. Escolha um estilo e fique com ele.

F. Finais de linha e linhas vazias

Espaços em branco podem arruinar diffs e fazer com que changesets sejam impossíveis de se ler. Considere incorporar um gancho de pre-commit que remova espaços em branco ao final das linhas e espaços em branco em linhas vazias automaticamente.

16.3.Checagem de escrita

A. Tipos existentes

String:

typeof variavel === "string"

Number:

typeof variavel === "number"

Boolean:

typeof variavel === "boolean"

Object:

typeof variavel === "object"

Array:

Array.isArray( variavel ) (quando possível)

null:

variavel === null

null ou undefined:

variavel == null

undefined:

Variáveis Globais:

typeof variavel === "undefined"

Variáveis Locais:

variavel === undefined

Propriedades:

object.prop === undefinedobject.hasOwnProperty( prop )"prop" in object

B. Tipos coagidos

Considere as implicações do seguinte...

Dado este HTML:

<input type="text" id="foo-input" value="1">

// 3.B.1.1

// `foo` foi declarado com o valor `0` e seu tipo é `number`var foo = 0;

// typeof foo;// "number"...

// Algum momento depois no seu código, você precisa atualizar `foo`// com um novo valor derivado de um elemento ìnput`

foo = document.getElementById("foo-input").value;

// Se você testasse `typeof foo` agora, o resultado seria uma `string`// Isso significa que se tivesse uma lógica que testasse `foo` como:

if ( foo === 1 ) {

importantTask();

}

// ìmportantTask()` nunca seria chamado, mesmo que `foo` tivesse um valor "1"

// 3.B.1.2

// Você pode prevenir problemas utilizando uma coerção automática com os operadores + ou -:

foo = +document.getElementById("foo-input").value;// ^ o operador + irá converter o operando do lado direito para um número

// typeof foo;// "number"

if ( foo === 1 ) {

importantTask();

}

// ìmportantTask()` será chamado

Aqui temos alguns casos comuns com coerções:

// 3.B.2.2

var number = 1, string = "1",

bool = true;

string === number;// false

string === number + "";// true

+string === number;// true

bool === number;// false

+bool === number;// true

bool === string;// false

bool === !!string;// true

// 3.B.2.3

var array = [ "a", "b", "c" ];

!!~array.indexOf( "a" );// true

!!~array.indexOf( "b" );// true

!!~array.indexOf( "c" );// true

!!~array.indexOf( "d" );// false

// Note que o que está acima deve ser considerado// "desnecessariamente inteligente".// Prefira a aproximação óbvia de comparar o valor retornado do// indexOf, como por exemplo:

if ( array.indexOf( "a" )>= 0 ) { // ...}

// 3.B.2.3

var num = 2.5;

parseInt( num, 10 );

// é o mesmo que...

~~num;

num>> 0;num>>> 0;

// Todos resultam em 2

// De qualquer forma, lembre-se que números negativos são tratados// de forma diferente...

var neg = -2.5;

parseInt( neg, 10 );

// é o mesmo que...

~~neg;

neg>> 0;

// Resulta em -2// Porém...

neg>>> 0;

// Vai resultar em 4294967294

16.4.Avaliação condicional

// 4.1.1// Quando estiver apenas avaliando se um array tem tamanho,// ao invés disso:if ( array.length> 0 ) ...

// ...avalie a verdade lógica, como isso:if ( array.length ) ...

// 4.1.2// Quando estiver apenas avaliando se um array está vazio,// ao invés disso:if ( array.length === 0 ) ...

// ...avalie a verdade lógica, como isso:if ( !array.length ) ...

// 4.1.3// Quando estiver apenas avaliando se uma string não está vazia,// ao invés disso:if ( string !== "" ) ...

// ...avalie a verdade lógica, como isso:if ( string ) ...

// 4.1.4// Quando estiver apenas avaliando se uma string está vazia,// ao invés disso:if ( string === "" ) ...

// ...avalie se ela é logicamente falsa, como isso:if ( !string ) ...

// 4.1.5// Quando estiver avaliando se uma referência é verdadeira,// ao invés disso:if ( foo === true ) ...

// ...avalie como se quisesse isso, use a vantagem de suas capacidades primitivas:if ( foo ) ...

// 4.1.6// Quando estiver avaliando se uma referência é falsa,// ao invés disso:if ( foo === false ) ...

// ...use a negação para coagir para uma avaliação verdadeira

if ( !foo ) ...

// ...Seja cuidadoso, isso também irá funcionar com: 0, "", null, undefined, NaN// Se você _PRECISA_ testar um valor falso de tipo booleano, então useif ( foo === false ) ...

// 4.1.7// Quando apenas estiver avaliando uma referência que pode ser `null` ou `undefined`, mas NÃO `false`, "" ou 0,// ao invés disso:if ( foo === null || foo === undefined ) ...

// ...aproveite a vantagem da coerção de tipo com ==, como isso:if ( foo == null ) ...

// Lembre-se, utilizando == irá funcionar em um `null` TANTO para `null` quanto para `undefined`// mas não para `false`, "" ou 0null == undefined

SEMPRE avalie para o melhor e mais preciso resultado - o que está acima é uma recomendação, não um dogma.

// 4.2.1// Coerção de tipo e notas sobre avaliações

Prefira `===` ao invés de `==` (ao menos em casos que necessitem avaliação de tipos flexíveis)

=== não faz coerção de tipo, o que significa que:

"1" === 1;// false

== faz coerção de tipo, o que significa que:

"1" == 1;// true

// 4.2.2// Booleanos, verdades e negações

// Booleanos:true, false

// Verdades:"foo", 1

// Negações:"", 0, null, undefined, NaN, void 0

16.5.Estilo Prático

// 5.1.1// Um módulo prático

(function( global ) {var Module = (function() {

var data = "segredo";

return { // Essa é uma propriedade booleana bool: true, // Algum valor de string string: "uma string", // Uma propriedade em array array: [ 1, 2, 3, 4 ], // Uma propriedade em objeto

object: { lang: "pt-BR" }, getData: function() { // pega o valor atual de `data` return data; }, setData: function( value ) { // atribui o valor a data que é retornado return ( data = value ); } };})();

// Outras coisas que também podem acontecer aqui

// Expor seu módulo ao objeto globalglobal.Module = Module;

})( this );

// 5.2.1// Um construtor prático

(function( global ) {

function Ctor( foo ) {

this.foo = foo;

return this;}

Ctor.prototype.getFoo = function() { return this.foo;};

Ctor.prototype.setFoo = function( val ) { return ( this.foo = val );};

// Para chamar um construtor sem o `new`, você pode fazer assim:var ctor = function( foo ) { return new Ctor( foo );};

// exponha nosso construtor ao objeto globalglobal.ctor = ctor;

})( this );

16.6.Nomenclatura

A. Se você não é um compilador humano ou compactador de código, não tente ser um.

O código a seguir é um exemplo de nomenclatura ruim:

// 6.A.1.1// Exemplo de código com nomenclaturas fracas

function q(s) {return document.querySelectorAll(s);}

var i,a=[],els=q("#foo");for(i=0;i<els.length;i++){a.push(els[i]);}

Sem dúvida, você já deve ter escrito código assim - provavelmente isso acaba hoje.

Aqui temos o mesmo trecho lógico, porém com uma nomenclatura simpática e mais inteligente (e uma estrutura legível):

// 6.A.2.1// Exemplo de código com nomenclatura melhorada

function query( selector ) {return document.querySelectorAll( selector );}

var idx = 0,elements = [],matches = query("#foo"),length = matches.length;

for( ; idx <length; idx++ ){elements.push( matches[ idx ] );}

Algumas indicações adicionais de nomenclaturas

// 6.A.3.1// Nomes de strings

`dog` é uma string

// 6.A.3.2// Nomes de arrays

`dogs` é uma array de strings `dog`

// 6.A.3.3// Nomes de funções, objetos, instancias, etc

// funções e declarações de variáveiscamelCase;

// 6.A.3.4// Nomes de construtores, protótipos, etc

// função construtoraPascalCase;

// 6.A.3.5// Nomes de expressões regulares

rDesc = //;

// 6.A.3.6// Do Guia de Estilos da Biblioteca do Google Closure

funcoesNomeadasAssim;variaveisNomeadasAssim;ConstrutoresNomeadosAssim;EnumNomeadosAssim;metodosNomeadosAssim;CONSTANTES_SIMBOLICAS_ASSIM;

// nota da tradução: não havia tradução no Google Closure, o original é o seguinte:

functionNamesLikeThis;variableNamesLikeThis;ConstructorNamesLikeThis;

EnumNamesLikeThis;methodNamesLikeThis;SYMBOLIC_CONSTANTS_LIKE_THIS;

B. Faces do this

Além dos mais conhecidos casos de uso do call e apply, sempre prefira .bind( this ) ou um equivalente funcional, para criar definições BoundFunction que possam serem invocadas posteriormente. Somente recorra ao aliasing quando não houver disponível uma outra opção preferencial.

// 6.B.1function Device( opts ) {

this.value = null;

// abre um stream assíncrono, // isso será chamado continuamente stream.read( opts.path, function( data ) {

// Atualiza o valor atual dessa instancia // com o valor mais recente do // data stream this.value = data;

}.bind(this) );

// Suprime a frequencia de eventos emitidos por // essa instancia de Device setInterval(function() {

// Emite um evento suprimido this.emit("event");

}.bind(this), opts.freq || 100 );}

// Apenas suponha que nós temos herdado um EventEmitter ;)

Quando não disponível, equivalentes funcionais ao .bind existem em muitas bibliotecas JavaScript modernas.

// 6.B.2

// ex.: lodash/underscore, _.bind()function Device( opts ) {

this.value = null;

stream.read( opts.path, _.bind(function( data ) {

this.value = data;

}, this) );

setInterval(_.bind(function() {

this.emit("event");

}, this), opts.freq || 100 );}

// ex.: jQuery.proxyfunction Device( opts ) {

this.value = null;

stream.read( opts.path, jQuery.proxy(function( data ) {

this.value = data;

}, this) );

setInterval( jQuery.proxy(function() {

this.emit("event");

}, this), opts.freq || 100 );}

// ex.: dojo.hitchfunction Device( opts ) {

this.value = null;

stream.read( opts.path, dojo.hitch( this, function( data ) {

this.value = data;

}) );

setInterval( dojo.hitch( this, function() {

this.emit("event");

}), opts.freq || 100 );}

Como último recurso, crie uma referência ao this utilizando self como identificador. Isso é bastante propenso a bugs e deve ser evitado sempre que possível.

// 6.B.3

function Device( opts ) { var self = this;

this.value = null;

stream.read( opts.path, function( data ) {

self.value = data;

});

setInterval(function() {

self.emit("event");

}, opts.freq || 100 );}

C. Utilize thisArg

Vários metodos de prototipagem internos do ES 5.1 vem com a assinatura especial de 'thisArg', que deve ser utilizada quando for possível.

// 6.C.1

var obj;

obj = { f: "foo", b: "bar", q: "qux" };

Object.keys( obj ).forEach(function( key ) {

// |this| agora se refere a `obj`

console.log( this[ key ] );

}, obj ); // <-- o último argumento é `thisArg`

// Prints...

// "foo"// "bar"// "qux"

thisArg pode ser utilizado com Array.prototype.every, Array.prototype.forEach, Array.prototype.some, Array.prototype.map, Array.prototype.filter

16.7. Miscelânea

Esta seção deve servir para ilustrar idéias e conceitos sobre como não se considerar isso como um dogma, mas ao invés disso deve encorajar o questionamento de práticas na tentativa de encontrar formas melhores para executar tarefas comuns na programação em JavaScript.

A. Evite utilizar switch, métodos modernos de verificação deverão adicionar funções com switch em suas listas negras

Parecem haver melhorias drásticas à execução do comando switch nas últimas versões do Firefox e do Chrome: http://jsperf.com/switch-vs-object-literal-vs-module

// 7.A.1.1// Um exemplo de uma instrução switch

switch( foo ) {case "alpha": alpha(); break;case "beta": beta(); break;default: // algo para executar por padrão break;}

// 7.A.1.2// Uma maneira alternativa de dar suporte para facilidade de composição e// reutiilização é utilizar um objeto que guarde "cases" e uma função// para delegar:

var cases, delegator;

// Retornos de exemplo apenas para ilustração.cases = {alpha: function() { // instruções // um retorno return [ "Alpha", arguments.length ];},beta: function() { // instruções // um retorno return [ "Beta", arguments.length ];},_default: function() { // instruções // um retorno return [ "Default", arguments.length ];}};

delegator = function() {var args, key, delegate;

// Transforma a lista de argumentos em uma arrayargs = [].slice.call( arguments );

// Retira a chave inicial dos argumentoskey = args.shift();

// Atribui o manipulador de caso padrãodelegate = cases._default;

// Deriva o método para delegar a operação paraif ( cases.hasOwnProperty( key ) ) { delegate = cases[ key ];}

// O argumento de escopo pode ser definido para algo específico// nesse caso, |null| será suficientereturn delegate.apply( null, args );};

// 7.A.1.3// Coloque a API do 7.A.1.2 para funcionar:

delegator( "alpha", 1, 2, 3, 4, 5 );// [ "Alpha", 5 ]

// Claro que a argumento de chave inicial pode ser facilmente baseada// em alguma outra condição arbitrária.

var caseKey, someUserInput;

// Possivelmente alguma maneira de entrada de formulário?someUserInput = 9;

if ( someUserInput> 10 ) {caseKey = "alpha";} else {caseKey = "beta";}

// ou...

caseKey = someUserInput> 10 ? "alpha" : "beta";

// E assim...

delegator( caseKey, someUserInput );// [ "Beta", 1 ]

// E claro...

delegator();// [ "Default", 0 ]

B. Retornos antecipados promovem legibilidade de código com mínima diferença de performance

// 7.B.1.1// Ruim:function returnLate( foo ) {var ret;

if ( foo ) { ret = "foo";} else { ret = "quux";}

return ret;}

// Bom:

function returnEarly( foo ) {

if ( foo ) { return "foo";}return "quux";}

16.8.Comentários• Uma linha única acima do código que é comentado• Multiplas linhas é bom• Comentários ao final da linha são proibidos!• O estilo do JSDoc é bom, porém requer um investimento de tempo significante

16.8.1.Código em apenas um idiomaProgramas devem ser escritos em um único idioma, não importe o idioma que seja, a ser definido por quem o mantém.

REFERÊNCIAS

[W3] W3scholl; JavaScript tutorial, http://www.w3schools.com/js/default.asp

[K19] K19; K02-Desenvolvimento Web com HTML, CSS e JavaScript

[WAL] WALDRON. Rich, et al ; Principles of Writing Consistent, Idiomatic JavaScript https://github.com/rwldrn/idiomatic.js/

https://github.com/rwldrn/idiomatic.js/

http://www.w3schools.com/js/default.asp

livro javascript um mero resumo

Documents