Livro JavaScript Um Mero Resumo

JavaScript
Um mero resumo
Jonas Mayer
verso 1.0
Sumrio
1.Introduo.............................................................................................................................................................4 1.1.Inserindo o JavaScript ..................................................................................................................................4 1.2.Sintaxe Bsica...............................................................................................................................................4 1.3.Variveis.......................................................................................................................................................5 1.4.Declarando e inicializando variveis ...........................................................................................................5 1.5.Operadores ...................................................................................................................................................5 1.5.1.Aritmticos............................................................................................................................................5 1.5.2.Atribuio..............................................................................................................................................5 1.5.3.Relacional..............................................................................................................................................6 1.5.4.Lgico...................................................................................................................................................6 2.Comandos bsicos................................................................................................................................................6 3.Controle de fluxo..................................................................................................................................................7 3.1.if e else..........................................................................................................................................................7 3.2.switch............................................................................................................................................................7 3.3.while.............................................................................................................................................................7 3.4.do while........................................................................................................................................................7 3.5.for..................................................................................................................................................................7 4.Funes JavaScript...............................................................................................................................................7 4.1.Definindo uma funo..................................................................................................................................8 4.2.Chamando uma funo.................................................................................................................................8 4.3.Mtodo..........................................................................................................................................................8 4.4.Arguments.....................................................................................................................................................9 4.5.Funes internas...........................................................................................................................................9 5.Exceptions..........................................................................................................................................................10 6.Objetos JavaScript .............................................................................................................................................10 6.1.Objetos........................................................................................................................................................10 6.1.1.Criando um objeto...............................................................................................................................10 6.1.2.Recuperando o Valor de uma Propriedade..........................................................................................11 6.1.3.Alterando o Valor de uma Propriedade...............................................................................................11 6.1.4.Referncias..........................................................................................................................................12 6.1.5.Prottipos (herana)............................................................................................................................12 6.1.6.Removendo uma Propriedade.............................................................................................................14 6.1.7.Verificando a Existncia de uma Propriedade.....................................................................................14 6.2.Arrays.........................................................................................................................................................14 6.2.1.Declarando um array...........................................................................................................................14 6.2.2.Percorrendo um Array.........................................................................................................................14 6.2.3.Adicionando Elementos......................................................................................................................15 6.2.4.Removendo Elementos.......................................................................................................................15 6.2.5.Concatenando Arrays..........................................................................................................................15 6.2.6.Gerando uma String com os Elementos de um Array.........................................................................15 6.2.7.Removendo o ltimo Elemento..........................................................................................................16 6.2.8.Adicionando um Elemento na ltima Posio...................................................................................16 6.2.9.Invertendo os Elementos de um Array................................................................................................16 6.2.10.Removendo o Primeiro Elemento.....................................................................................................16 6.2.11.Copiando um Trecho de um Array....................................................................................................16 6.2.12.Removendo e Adicionando Elementos em um Array.......................................................................16 6.2.13.Adicionando um Elemento na Primeira Posio...............................................................................17 6.2.14.Arrays Multidimensionais.................................................................................................................17 6.2.14.1.Percorrendo um Array Multidimensional..................................................................................17 6.2.15.Mtodos do array..............................................................................................................................17 6.3.Mtodos das Strings ...................................................................................................................................18 6.3.1.Acessando os Caracteres de uma String por Posio..........................................................................18
6.3.2.Recuperando um Trecho de uma String..............................................................................................18 6.3.3.Dividindo uma String..........................................................................................................................18 6.4.Classe Date.................................................................................................................................................18 6.4.1.Criando um objeto Date......................................................................................................................18 6.4.2.Mtodos de objetos tipo Date..............................................................................................................18 6.5.Classe Math................................................................................................................................................19 6.5.1.Propriedades de math..........................................................................................................................19 6.5.2.Mtodos de Math ...............................................................................................................................20 6.6. Expresses Regulares (RegExp)................................................................................................................20 7.Objetos do navegador.........................................................................................................................................23 7.1.Janelas e Frames.........................................................................................................................................23 7.1.1.Propriedades........................................................................................................................................23 7.1.2.Mtodos...............................................................................................................................................24 7.2.Objeto Navigator........................................................................................................................................25 7.2.1.Propriedades........................................................................................................................................25 7.2.2.Mtodos...............................................................................................................................................25 7.3.Objeto Screen..............................................................................................................................................25 7.3.1.Propriedades........................................................................................................................................25 7.4.Objeto History............................................................................................................................................26 7.4.1.Propriedades........................................................................................................................................26 7.4.2.Mtodos...............................................................................................................................................26 7.5.Objeto Location..........................................................................................................................................26 7.5.1.Propriedades........................................................................................................................................26 7.5.2.Mtodos...............................................................................................................................................27 8.DOM HTML......................................................................................................................................................27 8.1.Intoduo....................................................................................................................................................27 8.1.1.DOM HTML.......................................................................................................................................28 8.1.2.DOM CSS...........................................................................................................................................28 8.2.Dom Document...........................................................................................................................................29 8.2.1.Propriedades........................................................................................................................................29 8.2.2.Mtodos...............................................................................................................................................29 8.3.DOM Eventos.............................................................................................................................................29 8.3.1.Eventos................................................................................................................................................30 8.4.DOM Elements...........................................................................................................................................35 9.Ncleo DOM......................................................................................................................................................35 9.1.Propriedades de ns....................................................................................................................................36 9.2.Mtodos de ns...........................................................................................................................................36 9.3.Tipos de n..................................................................................................................................................36 9.4.NodeList.....................................................................................................................................................38 9.5.NamedNodeMap.........................................................................................................................................38 9.6.O Objeto DOM Document..........................................................................................................................38 9.7.O Objeto DOM Element.............................................................................................................................39 9.8.O Objeto DOM Attr....................................................................................................................................39 10.PopupAlert........................................................................................................................................................40 11.Temporizao de eventos..................................................................................................................................41 12.Cookies.............................................................................................................................................................42 13.Validao .........................................................................................................................................................43 14.Segurana de JavaScript...................................................................................................................................44 15.Notas de verso................................................................................................................................................44 16.Princpios para Escrever JavaScript de forma Consistente e Idiomtica.........................................................45 16.1.Espao em branco.....................................................................................................................................45 16.2.Sintaxe bonita.......................................................................................................................................45 16.3.Checagem de escrita.................................................................................................................................49 16.4.Avaliao condicional...............................................................................................................................51 16.5.Estilo Prtico.............................................................................................................................................53 16.6.Nomenclatura............................................................................................................................................54
16.7. Miscelnea...............................................................................................................................................57 16.8.Comentrios..............................................................................................................................................60 16.8.1.Cdigo em apenas um idioma...........................................................................................................60 REFERNCIAS....................................................................................................................................................60
JavaScript
1.Introduo
JavaScript uma linguagem para auxilio na criao de pginas web, as funes 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 utilizao da linguagem JavaScript, se d sob a forma de funes, as quais so chamadas em determinadas situaes ou em resposta a determinados eventos. Um cdigo JavaScript pode ser inserido em um documento HTML de duas formas: colocando o cdigo 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 relativo ou absoluto para um arquivo que contenha o cdigo JavaScript. Por conveno costuma-se colocar todas as funes no incio do documento (entre as TAGs <HEAD> e </HEAD>, isso para garantir que o cdigo JavaScript seja carregado antes que o usurio 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 cdigo 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 Bsica
As linhas de instrues JavaScript assim como Java terminam com ; (ponto e vrgula). E os blocos so demarcados por { } (chaves). Para os comentrios usado : - /*de vrias linhas/* - //de linha Para que o cdigo JavaScript no seja mostrado em navegadores antigos pode-se usar: <html> <head> <script language="LiveScript">  </script> </head> <body> ... <script>hello();</script> ... </body> </html>
1.3.Variveis
Em JavaScript, variveis dinmicas podem ser criadas e inicializadas sem declaraes formais.
Existem dois tipos de abrangncia para as variveis: 1. Global - Declaradas/criadas fora de uma funo. As variveis globais podem ser acessadas em qualquer parte do programa. 2. Local - Declaradas/criadas dentro de uma funo. S podem ser utilizadas dentro da funo onde foram criadas e precisa ser definida com a instruo var. Existem trs tipos de variveis: Numricas, Booleanas e Strings. As strings podem ser delimitadas por aspas simples ou duplas. Podem ser includos dentro de uma string alguns caracteres especiais, a saber: /t -tabulao /n -prxima lina /f -form feed /b -back space /r -carrige return
1.4.Declarando e inicializando variveis

Em JavaScript podemos declarar e inicializar uma varivel da seguinte maneira: var numero = 0; var numeroComCasasDecimais = 1.405; var texto = Varivel com um texto ; var outroTexto = " Outra varivel com um texto "; var valorBooleano = true ;
1.5.Operadores 1.5.1.Aritmticos
+ * / % Soma Subtrao Multiplicao Diviso Mdulo
1.5.2.Atribuio
= += -= *= /= %= Simples Incremental Decremental Multiplicativa Divisria Modular
1.5.3.Relacional
== != < <= > >= Igualdade Diferena Menor Menor ou igual Maior Maior ou igual
1.5.4.Lgico
&& E || OU
2.Comandos bsicos
with Quando voc precisa manipular vrias propriedades de um mesmo objeto, provavelmente prefere no ser obrigado a repetir todas as vezes a digitao do nome do objeto. A instruo with, permite fazer isso eliminando a necessidade de digitar o nome do objeto todas as vezes. Forma geral: with (<objeto>){ ... Instrues } Exemplo: with (Math){ a=PI; b=Abs(x); c=E; } break Pode ser executado somente dentro de loops for... ou while... e tem por objetivo o cancelamento da execuo do loop sem que haja verificao na condio de sada do loop, passando a execuo a linha imediatamente posterior ao trmino do loop. Exemplo: for (var x=1; x <10; x++){ if (x==5){ break } } document.write(x) // resulta: 5 continue Pode ser executado somente dentro de loops for... ou while ... e tem por objetivo o cancelamento da execuo do bloco de comandos passando para o incio 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 preo do produto no 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(" tera-feira") break case 3: document.write(" quarta-feira") break default: document.write("Esse dia no 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.Funes JavaScript
Uma funo JavaScript uma sequncia de instrues JavaScript que sero executadas quando voc cham-la atravs do seu nome. As funes em JavaScript so objetos. Voc pode armazen-las em variveis, arrays e outros objetos. Elas podem ser passadas como argumento ou devolvidas por outra funo. Veja o exemplo abaixo. var multiplicacao = function (x, y) { return x * y; }
4.1.Definindo uma funo

Definindo uma funo simples em JavaScript: function imprimeOlaMundo() { document.writeln (Ol Mundo !); document.writeln (<br />); } Definindo uma funo que recebe parmetros: function imprimeMensagem (mensagem) { document. writeln ( mensagem ); document. writeln (<br />); } Definindo uma funo que retorna um valor:
function criaSaudacaoPersonalizada (nome) { return Ol , + nome + !; }
4.2.Chamando uma funo

Chamando uma funo dentro do cdigo JavaScript imprimeOlaMundo (); Chamando uma funo que recebe parmetros: imprimeMensagem (123 testando !! ); Chamando uma funo que retorna um valor: var saudacao = criaSaudacaoPersonalizada (Jonas ); Chamando uma funo JavaScript pelo HTML Os elementos HTML possuem alguns eventos que podem ser associados a funes JavaScript atravs de alguns atributos especiais cujos nomes comeam com o prefixo on. <html> <head> <meta http-equiv ="Content-Type" content="text/html;charset=UTF-8"> <title>Chamando uma funo JavaScript pelo HTML </title> <script type ="text/javascript"> function exibeOlaMundo () { alert ( Ol Mundo !); } </script> </head> <body> <input type =" button " value =" Exibe saudao " onclick =" exibeOlaMundo ()" /> </body> </html> Nota: considerado um erro chamar uma funo que se encontra numa tag script abaixo. recomendado declarar as funes dentro do elemento head para evitar erros e permitir que as funes sejam previamente carregadas.
4.3.Mtodo
Quando uma funo faz parte de um objeto, ela chamada de mtodo. Para executar um mtodo, devemos utilizar a referncia de um objeto e passar os parmetros necessrios. Observe o cdigo abaixo. var conta = { saldo : 0, deposita:function(valor){ this.saldo+=valor; } } conta.deposita(100) ; console.log(conta.saldo); Apply Uma funo pode ser associada momentaneamente a um objeto e executada atravs do mtodo apply. var deposita = function(valor) { this.saldo+= valor; } var conta = { saldo : 0 } deposita. apply (conta , [200]) ; console. log (conta. saldo);
4.4.Arguments
Os argumentos passados na chamada de uma funo podem ser recuperados atravs 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.Funes internas
JavaScript possui algumas funes internas que no esto ligadas diretamente a nenhum objeto. alert - Mostra uma caixa de alerta, seguido de um sinal sonoro e o boto de OK. Ex: alert('Esta uma janela de alerta!') confirm - Mostra uma caixa de dilogo, seguida de um sinal sonoro e os boto de OK e Cancel. Retorna um valor verdadeiro se o usurio escolher OK. Ex: retorno=confirm('Deseja prosseguir?') escape - Obtm o cdigo ASCII de um caracter que no seja alfa-numrico. Ex: document.write(escape("@")) eval - Avalia uma expresso numrica, retornando um resultado tambm numrico. Ex: document.write(eval(10*9*8*7*6*5*4*3*2)) parseFloat - Converte uma string que representa um nmero, para um nmero com ponto flutuante. Caso a string no possa ser avaliada, a funo retorna 0. Ex: document.write(parseFloat("-32.465e12") parseInt - Converte uma string, que representa um nmero em uma base predefinida para base 10. Caso a string possua um caracter que no possa ser convertido, a operao para, retornando o valor antes do erro. Ex: paseInt("string",base) parseInt("FF",15) // retorna 256 parseInt("3A",10) // retorna 3 parseInt("10",2) // retorna 2 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 contedo inicial da caixa. unespace- Faz exatamente o oposto da funo escape. isNaN(nmero) - Devolve um booleano dependendo do que recebe por parmetro. Se no um nmero devolve um true, se um nmero devolve false.
5.Exceptions
Quando um erro identificado no processamento de uma funo, podemos lanar uma exception para avisar que chamou a funo que houve um problema. var conta = { saldo : 0, deposita : function ( valor ) { if( valor <= 0) { throw { name : "ValorInvalido", message : " Valores menores ou iguais a 0 no podem ser depositados " } } else { this.saldo += valor ; } } } Na chamada do mtodo deposita(), podemos capturar um possvel erro como comando try-catch. try { conta.deposita(0) ; } catch(e) { console.log(e.name ); console.log(e.message ); }
6.Objetos JavaScript
6.1.Objetos
Um objeto um conjunto de propriedades. Toda propriedade possui nome e valor. O nome de uma propriedade pode ser qualquer sequncia 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 objeto
Existe mais de uma maneira de se criar um objeto em JavaScript. A maneira mais simples podemos acompanhar no cdigo abaixo: var contaBancaria = new Object (); contaBancaria. numero = 1234; contaBancaria. saldo = 1000; contaBancaria. deposita = function(valor) { if( valor> 0) { this. saldo += valor ; }else { alert (Valor invlido !); } }; Outra maneira de se criar um objeto utilizando a notao 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 invlido !); } } }
Um objeto pode ser criado de forma literal. Veja o exemplo a seguir. var objeto_vazio = {}; var curso = { sigla : " K11 ", nome : " Orientao a Objetos em Java "}; Um objeto pode se relacionar com outros objetos atravs de propriedades. Observe o cdigo abaixo. var formacao_java = {sigla:"K10", nome : "Formao Desenvolvedor Java", cursos : [ { sigla : " K11 ", nome : " Orientao a Objetos em Java "}, { sigla : " K12 ", nome : " Desenvolvimento Web com JSF2 e JPA2 "}, ] };
6.1.2.Recuperando o Valor de uma Propriedade

Para recuperar os valores das propriedades de um objeto, podemos utilizar o operador . ou []. Veja o exemplo a seguir. var curso = { sigla : " K11 ", nome : " Orientao 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 Propriedade

Para alterar o valor de uma propriedade, basta atribuir um novo valor a propriedade do objeto. var curso = { sigla : " K11 ", nome : " Orientao 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.Referncias
Os objetos so acessados atravs de referncias. var curso = { sigla : " K11 ", nome : " Orientao a Objetos em Java "}; //copiando uma referncia var x = curso ; x. sigla = " K12 "; x. nome = " Desenvolvimento Web com JSF2 e JPA2 "; // imprime K12 console. log ( curso. sigla ); //imprime Desenvolvimento Web com JSF2 e JPA2 console.log(curso,nome);
6.1.5.Prottipos (herana)
Podemos criar um objeto baseado em outro objeto existente (prottipo). Para isso, podemos utilizar a propriedade especial __proto__. Observe o cdigo abaixo. // criando um objeto com duas propriedades var curso = { sigla : " K11 ", nome : " Orientao a Objetos em Java "}; // criando um objeto sem propriedades var novo_curso = {}; // definindo o primeiro objeto como prtotipo do segundo
novo_curso. __proto__ = curso ; // imprime K11 console. log ( novo_curso. sigla ); // imprime Orientao a Objetos em Java console. log ( novo_curso. nome ); Tambm podemos utilizar o mtodo 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 : " Orientao a Objetos em Java "}; // criando um objeto sem propriedades var novo_curso = {}; // definindo o primeiro objeto como prtotipo do segundo novo_curso = Object. create ( curso ); // imprime K11 console. log ( novo_curso. sigla ); // imprime Orientao a Objetos em Java console. log ( novo_curso. nome ); Se uma propriedade for adicionada a um objeto, ela tambm ser adicionada a todos os objetos que o utilizam como prottipo. var curso = { sigla : " K11 ", nome : " Orientao a Objetos em Java "}; var novo_curso = Object. create ( curso ); curso. carga_horaria = 36; // imprime K11 console. log ( novo_curso. sigla ); // imprime Orientao a Objetos em Java console. log ( novo_curso. nome ); // imprime 36 console. log ( novo_curso. carga_horaria ); Por outro lado, se uma propriedade for adicionada a um objeto, ela no ser adicionada no prottipo desse objeto. var curso = { sigla : " K11 ", nome : " Orientao a Objetos em Java "}; var novo_curso = Object. create ( curso ); novo_curso. carga_horaria = 36; // imprime K11 console. log ( curso. sigla ); // imprime Orientao 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 prottipo podem ser afetados. var curso = { sigla : " K11 ", nome : " Orientao a Objetos em Java "}; var novo_curso = Object. create ( curso ); curso. sigla = " K12 "; curso. nome = " Desenvolvimento Web com JSF2 e JPA2 "; // imprime K12 console. log ( novo_curso. sigla );
// imprime Desenvolvimento Web com JSF2 e JPA2 console. log ( novo_curso. nome ); Por outro lado, alteraes nos valores das propriedades de um objeto no afetam o prottipo desse objeto. var curso = { sigla : " K11 ", nome : " Orientao a Objetos em Java "}; var novo_curso = Object. create ( curso ); novo_curso. sigla = " K12 "; novo_curso. nome = " Desenvolvimento Web com JSF2 e JPA2 "; //imprime K11 console.log ( curso. sigla ); //imprime Orientao a Objetos em Java console.log ( curso. nome ); Considere um objeto que foi construdo a partir de um prottipo. Se o valor de uma propriedade herdada do prottipo for alterada nesse objeto, ela se torna independente da propriedade no prottipo. Dessa forma, alteraes no valor dessa propriedade no prottipo no afetam mais o valor dela no objeto gerado a partir do prottipo. var curso = { sigla : " K11 ", nome : " Orientao 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 = " Persistncia com JPA2 e Hibernate "; // imprime K12 console.log ( novo_curso. sigla ); // imprime Desenvolvimento Web com JSF2 e JPA2 console.log ( novo_curso. nome );
6.1.6.Removendo uma Propriedade

Podemos remover uma propriedade de um objeto com a funo delete. var curso = { sigla : " K11 ", nome : " Orientao a Objetos em Java "}; // imprime K11 console.log ( curso. sigla ); delete curso. sigla ; // imprime undefined console.log ( curso. sigla );
6.1.7.Verificando a Existncia de uma Propriedade

Podemos verificar se uma propriedade existe, podemos utilizar a funo in. var curso = { sigla : " K11 ", nome : " Orientao a Objetos em Java "}; // imprime true console. log (" sigla " in curso ); // imprime false console. log (" carga_horaria " in curso );
6.2.Arrays
Os arrays em JavaScript so objetos e, portanto, possuem atributos e mtodos para nos ajudar na manipulao de seus dados. JavaScript prov um objeto com caractersticas semelhantes a um array. Para criar o objeto array, podemos cri-lo de forma literal. var vazio = [];
var cursos = [" K11 "," K12 "," K21 "," K22 "," K23 ", " K31 ", " K32 "]; console.log( vazio [0]) ; console.log( cursos [0]) ; console.log( vazio. length ); console.log( cursos. length );
6.2.1.Declarando um array
Podemos declarar um array de trs maneiras: atravs do prottipo Array sem parmetros, atravs do prottipo Array com parmetros e atravs da forma literal. var numeros = new Array (); numeros [0] = 34; numeros [1] = 52; numeros [2] = 83; var nomes = new Array (Jonas , Rafael , Marcelo ); var cidades = [So Paulo , Rio de Janeiro , Curitiba ];
6.2.2.Percorrendo um Array
Para percorrer um array, podemos utilizar o comando for. var cursos = [" K11 "," K12 "," K21 "," K22 "," K23 ", " K31 ", " K32 "]; for ( var i = 0; i <cursos. length ; i ++) { console. log ( cursos [i]); }
6.2.3.Adicionando Elementos
Para adicionar um elemento ao final do array, podemos utilizar a propriedade length. var cursos = [" K11 "," K12 "," K21 "," K22 "," K23 ", " K31 ", " K32 "]; cursos [ cursos. length ] = " K01 "; for ( var i = 0; i <cursos. length ; i ++) { console. log ( cursos [i]); } Ou voc pode adicionar os elementos ao final do array utilizando o mtodo push(). var cursos = [" K11 "," K12 "," K21 "," K22 "," K23 ", " K31 ", " K32 "]; cursos. push (" K01 "); for ( var i = 0; i <cursos. length ; i ++) { console. log ( cursos [i]); }
6.2.4.Removendo Elementos
O mtodo delete() permite remover elementos de um array. var cursos = [" K11 "," K12 "," K21 "," K22 "," K23 ", " K31 ", " K32 "]; delete cursos [0]; for ( var i = 0; i <cursos. length ; i ++) { console. log ( cursos [i]); } O mtodo delete() deixa uma posio indefinida no array. Para corrigir este problema, o array tem omtodo splice(). O primeiro parmetro desse mtodo indica qual o primeiro elemento que desejamos remover. O segundo indica quantos elementos deve ser removidos a partir do primeiro. var cursos = [" K11 "," K12 "," K21 "," K22 "," K23 ", " K31 ", " K32 "];
cursos. splice (0 ,2); for ( var i = 0; i <cursos. length ; i ++) { console. log ( cursos [i]); }
6.2.5.Concatenando Arrays
O mtodo 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 Array

O mtodo 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 Elemento

O mtodo 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 Posio

O mtodo 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 Array

O mtodo 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 Elemento

O mtodo 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 Array

O mtodo slice() cria uma cpia de uma poro 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 Array

O mtodo 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 Posio

O mtodo unshift() adiciona elementos na primeira posio 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 Multidimensionais
Os arrays multidimensionais so estruturas de dados que armazenam os valores em mais de uma dimenso. Em Javascript no existe um autntico objeto array-multidimensinal. Para utilizar estas estruturas poderemos definir arrays onde, em cada uma de suas posies 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

Tambm interessante ver como se percorre um array de duas dimenses. 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.Mtodos do array
Um array possui diversos mtodos para nos auxiliar nas tarefas mais comuns quando trabalhamos com arrays. Os m todos so: concat() - concatena dois ou mais arrays e retorna uma cpia 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 trs 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 comeo do array e retorna o novo tamanho do array. valueOf() - retorna o valor primitivo de um array.
6.3.Mtodos das Strings 6.3.1.Acessando os Caracteres de uma String por Posio

O mtodo charAt() retorna o caracter na posio especificada. var curso = " K12 "; console.log ( curso. charAt (0) );
6.3.2.Recuperando um Trecho de uma String

O mtodo slice() retorna uma poro de uma string. var curso = " K12 - Desenvolvimento Web com JSF2 e JPA2 "; console.log ( curso. slice (0 ,3));
6.3.3.Dividindo uma String

O mtodo 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 Date
Um 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 parmetros que passemos ao construir os objetos.
6.4.1.Criando um objeto Date

Para criar um objeto fecha com o dia e hora atuais, colocamos os parnteses 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 parnteses o momento para iniciar o objeto. Existem vrias maneiras de expressar um dia e hora vlida, por isso podemos construir uma data nos guiando por vrios esquemas. Estes so dois deles, suficientes para criar todo tipo de datas e horas. minhaData = new Date(ano,ms,dia,hora,minutos,segundos) minhaData = new Date(ano,ms,dia) Os valores que deve receber o construtor so sempre numricos. Um detalhe, o ms comea por 0, ou seja, janeiro o ms 0. Se no indicamos a hora, o objeto data se cria com hora 00:00:00.
6.4.2.Mtodos de objetos tipo Date

getDate() - Devolve o dia do ms. (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 ms (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 dgitos. getTimezoneOffset() - Retorna a diferena 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 ms UTC getUTCSeconds() - Retorna segundos UTC parse() -Analisa uma string de data e retorna o nmero de milissegundos desde a meia-noite de 01 de janeiro de 1970 setDate() - Define o dia do ms. (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 ms (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 dgitos. setTimezoneOffset() - Define a diferena 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 ms UTC setUTCSeconds() - Define segundos UTC toISOString() - Retorna a data como uma string, usando o padro 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 conveno local toLocaleTimeString() - Retorna a parte do tempo de um objeto Date como uma string, usando a conveno local toLocaleString()- Converte um objeto Date para uma String usando a conveno 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 nmero 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 Math
A classe Math proporciona os mecanismos para realizar operaes matemticas em Javascript.
6.5.1.Propriedades de math
Para us-las utiliza-se ao prefixo Math. e o nome da propriedade. E - Nmero 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 nmero para clculo com crculos. SQRT1_2 -Raiz quadrada de um meio. SQRT2 - Raiz quadrada de 2.
6.5.2.Mtodos de Math
Ainda assim, temos uma srie de mtodos para realizar operaes matemticas tpicas, embora um pouco complexas. abs() - Devolve o valor absoluto de um nmero. O valor depois de tirar o signo. acos() - Devolve o arco co-seno de um nmero em radianos. asin() - Devolve o arco co-seno de um nmero em radianos. atan() - Devolve um arco tangente de um nmero. ceil() - Devolve o inteiro igual ou imediatamente seguinte de um nmero. Por exemplo, ceil(3) vale 3, ceil(3.4) 4. cos() - Retorna o co-seno de um nmero. exp() - Retorna o resultado de elevar o nmero E por um nmero. floor() - O contrrio de ceil(), pois devolve um nmero igual ou imediatamente inferior. log() - Devolve o logaritmo neperiano de um nmero. max() - Retorna o maior de 2 nmeros. min() - Retorna o menor de 2 nmeros. pow() - Recebe dois nmeros como parmetros e devolve o primeiro nmero elevado ao segundo nmero. random() -Devolve um nmero aleatrio entre 0 e 1. Mtodo criado a partir de Javascript 1.1. round() -Arredonda ao inteiro mais prximo. sin() -Devolve o seno de um nmero com um ngulo em radianos. sqrt() -Retorna a raiz quadrada de um nmero. tan() -Calcula e devolve a tangente de um nmero em radianos.
6.6. Expresses Regulares (RegExp)

Expresso Regular uma forma de efetuar a validao sobre um texto atravs de um determinado padro, eliminando um longo trecho de cdigo para fazer esta funo. Uma Regular Expression composta de uma sequncia de smbolos e caracteres especiais que interpretada como uma regra, que indicar se um texto posterior segue todas as condies nela impostas. Vamos a um exemplo prtico: validao 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 invlido!); } }
Vamos entender o cdigo. Na segunda linha temos a declarao da Regular Expression escrita em uma das duas formas possveis. Pode-se utilizar o mtodo construtor RegExp, assim como no exemplo, ou atribuir diretamente a expresso.
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 expresso regular dinamicamente, passando uma string por parmetro, por exemplo. Na segunda forma, o contedo da expresso esttico, sendo definido no cdigo somente. Vamos por partes: 1. Primeira parte: ^[A-Za-z0-9_\-\.]+: os caracteres devem estar entre A e Z (apenas maisculo), entre a e z 2. Segunda parte: @: aps a primeira sequncia de caracteres deve encontrar uma arroba (@). 3. Terceira parte: [A-Za-z0-9_\-\.]{2,}: deve encontrar duas ou mais sequncias de caracteres que satisfaam a condio de ser alfanumrico, underline, trao ou ponto. 4. Quarta parte: \.[A-Za-z0-9]{2,}: deve encontrar duas ou mais sequncias de caracteres alfanumricos antecedidos por ponto. 5. Quinta parte: (\.[A-Za-z0-9])?: pode encontrar ou no uma seqncia contendo os caracteres que esto entre os parnteses. Por fim, a funo test ir validar a expresso, retornando um valor booleano que indicar se a string passada por parmetro est validada dentro da expresso. Para entender melhor, a Tabela 01 traz os sinalizadores utilizados nas expresses regulares e seus respectivos significados. Sinalizador Sinalizadores i g gi Descrio No faz distino entre letras maisculas e minsculas Pesquisa global de todas as ocorrncias de um padro Pesquisa global, sem distino entre letras maisculas e minsculas Exemplo /Java/i encontrar tanto "java" quanto "Java" e "JAVA" /ca/g encontrar as duas ocorrncias de "ca" na frase " cada macaco no seu galho" /ca/g encontrar as duas ocorrncias de "ca" na frase "Cada macaco no seu galho"
Caracteres literais \n Encontra um caractere de quebra de linha. \r Encontra um caractere de retorno de carro. Encontra um caractere de tabulao \t horizontal. Encontra um caractere de tabulao \v vertical. Encontra um indicador de quebra de \f pgina. Encontra o caractere ASCII expresso pelo \xxx valor octal xxx. Encontra o caractere ASCII expresso pelo \xdd valor hexadecimal dd. Encontra o caractere ASCII expresso pelo \uxxxx valor UNICODE xxxx. Posies dos itens de pesquisa Encontra somente no incio da string ^
"\50" encontra o caractere de abertura de parenteses "(" "\x28" encontra o caractere de abertura de parenteses "(" "\u00A3" encontra""
/^The/ encontra "The" in "The night" mas no encontra em "In The Night" Encontra somente no final da string. /and$/ encontra "and" em "Land" mas no encontra em $ "landing" Encontra nos extremos de uma palavra (os /ly\b/ encontra "ly" em "This is really cool." caracteres de teste devem existir no incio \b ou fim de uma palavra pertencente string). Encontra no meio de uma palavra da string, /\Bor/ encontra "or" em "normal" mas no encontra em \B ou seja, o inverso de \b. "origami." Classes de caracteres Encontra qualquer caractere pertencente ao /[AN]BC/ encontra "ABC" e"NBC" mas no encontra grupo de caracteres dentro dos colchetes. "BBC" uma vez que o "B" fora dos colchetes no faz parte Voc pode usar o hfen para definir uma do conjunto. [xyz] faixa. Por exemplo: /[a-z]/ encontra qualquer letra do alfabeto, /[0-9]/ encontra qualquer digito de 0 a 9. [^xyz] Encontra qualquer caractere que no esteja /[ÂN]BC/ encontra "BBC" mas no encontra "ABC" ou no conjunto entre colchetes. O smbolo ^ "NBC". nos colchetes indica negao. Obs: No confunda o smbolo ^ (negao)
dentro dos colchetes com o smbolo ^ que indica que o padro deve ser encontrado no incio da string. A negao deve ser usada somente dentro de colchetes. (ponto). Encontra qualquer caractere exceto . quebras de linha ou outro caractere UNICODE que significa trmino de linha. Encontra qualquer caractere alfanumrico \w incluindo o sublinhdo. Equivale [a-zAZ0-9_]. Encontra qualquer caractere que no esteja \W no conjunto [a-zA-Z0-9_]. Equivale [âzA-Z0-9_]. Encontra qualquer dgito de 0 a 9. Equivale \d a [0-9]. Encontra qualquer caractere que no seja \D um dgito. Equivale [^0-9]. Encontra um caractere que provoca um \s espao. Equivale [ \t\r\n\v\f]. Encontra qualquer caractere que no \S provoque um espao. Equivale [^ \t\r\n\v\f]. Padres de repeties Encontra exatamente x ocorrncias de um {x} padro. Encontra x ou mais ocorrncias de um {x,} padro. Encontra de x at y ocorrncias de um {x,y} padro. Encontra zero ou uma ocorrncia. Equivale ? {0,1}. Encontra zero ou mais ocorrncias. * Equivale {0,}. Encontra uma ou mais ocorrncias. + Equivale {1,}. Agrupamento de padres Agrupa caracteres para criar uma clusula. () Pode ser aninhado. Oferece alternativa para o padro. similar | a uma instruo "OU". Mtodos Mtodo exec test match search replace split lastIndex
/b.t/ encontra "bat", "bit", "bet" e assim por diante.
/\w/ encontra "200" em "200%"
/\W/ encontra "%" em "200%"
/\D/ encontra "No" em "No 342222"
/\d{5}/ encontra 5 dgitos. /\s{2,}/ encontra no mnimo 2 caracteres de espao. /\d{2,4}/ encontra no mnimo 2 mas no mais que 4 dgitos. /a\s?b/ encontra "ab" ou "a b". /we*/ encontra "w" em "why" e "wee" em "between", mas no encontra em "bad". /fe+d/ encontra tanto "fed" quanto "feed"
/(abc)+(def)/ encontra uma ou mais ocorrncias de "abc" seguida(s) por uma ocorrncia de "def". /(ab)|(cd)|(ef)/ encontra "ab" ou "cd" ou "ef".
$n source
Descrio Executa pesquisas em uma string e retorna um array das informaes obtidas. Indica se a string satisfaz os parmetros da expresso regular. Executa uma pesquisa em uma string e retorna um array das informaes obtidas ou nulo se nada for encontrado. Faz uma pesquisa na string e retorna o ndice do resultado, ou -1 se no for encontrado. Executa uma pesquisa em uma string e substitui o resultado encontrado por uma substring. Quebra uma string em um array de substrings. Armazena a posio da ltima pesquisa bem sucessida realizada na string. Se nada for encontrado, a propriedade lastIndex ser colocada como 1. n representa o numero de 1 a 9 Armazena os nove mais recentes pesquisa dentro de parnteses encontradas. Por exemplo, se o padro usado por uma regular expression para a ltima pesquisa foi /(Hello)(\s+)(world)/ e a string pesquisada foi Hello world o contedo de RegExp.$2 poderia ser qualquer caractere entro Hello e world. Armazena a copia do padro da regular expression.
7.Objetos do navegador
7.1.Janelas e Frames
O objeto window suportado por todos os navegadores. Ele representa a janela dos navegadores. Todos os objetos globais JavaScript, funes e variveis tornam-se automaticamente membros do objeto window. As variveis globais so propriedades do objeto janela. Funes globais so mtodos do objeto janela. Mesmo o objeto document (do DOM HTML) uma propriedade do objeto janela: Tamanho da Janela do navegador Para 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 no defaultStatus - Determina o contedo padro 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 referncias para as frames da janela atual. Ex: parent.frames.lenght // obtm o nmero 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 contedo innerWidth - Define ou retorna a largura interior de uma rea de janela de contedo length - Retorna o nmero 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 referncia 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 relao tela screenTop - Devolve os coordenada y da janela em relao tela screenX - Retorna a coordenada x da janela em relao tela screenY - Retorna a coordenada y da janela em relao tela self - Refere-se a janela atual. Ex: self.defaultStatus='Qualquer coisa' status - Define uma mensagem que ir aparecer no rodap do browser, em substituio 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 nvel mais alto do esquema hierrquico do JavaScript. Ex: top.close() // fecha a janela principal do browser
7.1.2.Mtodos
alert() - Mostra uma caixa de alerta, seguido de um sinal sonoro e o boto 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 sesso atual do browser. Ex: top.close() confirm()- Mostra uma caixa de dilogo, seguida de um sinal sonoro e os boto de OK e Cancel. Retorna um valor verdadeiro se o usurio 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 posio atual moveTo() - Move uma janela para a posio especificada open() - Abre uma nova sesso do browser, como se o usurio pressionasse <CTRL>+N Ex: window.open("URL", "Nome" [,"caractersticas"]) Onde: URL - endereo selecionado inicialmente quando da abertura da nova janela. Nome - nome da nova janela, definido pelo programador. caractersticas - srie de opes de configurao da nova janela, se especificados devem estar na mesma string, separados por vrulas e sem conter espaos. toolbar=0 ou 1 - Se deve ou no exibir a barra de ferramentas do navegador. O padro sim location=0 ou 1 - Se deve ou no exibir o campo de endereo. O padro sim titlebar= 0 ou 1 - Se deve ou no exibir a barra de ttulo. Ignorado a menos que o aplicativo de chamada um
aplicativo HTML ou uma caixa de dilogo de confiana. O padro sim status=0 ou 1 - Se deve ou no adicionar uma barra de status. O padro sim menubar=0 ou 1 - Se deve ou no exibir a barra de menu. O padro sim scrollbars=0 ou 1 - Se deve ou no exibir barras de rolagem. O padro sim resizable=0 ou 1 - Se ou no a janela redimensionvel. O padro sim width=valor inteiro positivo - A largura da janela. Min. valor de 100 height=valor inteiro positivo - A altura da janela. Min. valor de 100
Ex: 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 contedo 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 contedo inicial da caixa. resizeBy() - Redimensiona a janela pelos pixels especificados resizeTo() -Redimensiona a janela para a largura e altura especificadas scrollBy() - Rola o contedo por um nmero especificado de pixels scrollTo() - Rola o contedo para as coordenadas especificadas setInterval() - Chama uma funo ou avalia uma expresso em intervalos especficos (em milissegundos) setTimeout() - Faz com que uma expresso seja avaliada aps um determinado tempo (em milissegundos). Ex: setTimeout(code,millisec,lang) code - Obrigatrio. A funo que ser executada millisec - Obrigatrio. O nmero de milissegundos de espera antes de executar o cdigo
lang - Opcional. A linguagem de script: JScript | VBScript | JavaScript
7.2.Objeto Navigator
Com o objeto navigator voc pode detectar informaes dos navegadores, por exemplo: saber qual navegador o visitante est usando, se os cookies esto habilitados e etc. Ateno! A informao a partir do objeto de navegao pode muitas vezes ser enganosa, e no deve ser usada para detectar verses 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 no pode relatar novos sistemas operacionais, lanado mais depois que o navegador.
7.2.1.Propriedades
appName - nome do navegador; appVersion - mostra a verso do navegador; cookieEnabled - verifica se o navegador pode ler ou escrever cookies; platform - retorna o nome do sistema operacional.
7.2.2.Mtodos
javaEnabled() - verifica se o navegador suporta ou no Java;
7.3.Objeto Screen
O objeto window.screen contm informaes sobre a tela do usurio. O objeto window.screen podem ser gravados sem ser precedida janela.
7.3.1.Propriedades
availWidth - largura da tela disponvel availHeight - altura da tela disponvel colorDepth - Retorna a profundidade de bits da paleta de cores para exibir imagens height - Retorna a altura total da tela pixelDepth - Retorna a resoluo de cor (em bits por pixel) da tela width - Retorna a largura total da tela
7.4.Objeto History
Este objeto armazena todas as URL das pginas HTML por onde o usurio passou durante a sesso atual do browser. uma cpia das informaes armazenadas na opo Go da barra de menu do Navigator.
7.4.1.Propriedades
lenght - Informa a quantidade de pginas visitadas.
7.4.2.Mtodos
back - Retorna pgina anterior, de acordo com a relao de pginas do objeto history. Equivale a clicar o boto voltar do navegador. forward - Passa para a prxima pgina, de acordo com a relao de pginas do objeto history. Equivale a clicar o boto avanar do navegador. go - Permite que qualquer URL que esteja presente na relao de pginas visitadas do objeto history, seja carregada. Ex: history.go(parmetro) Existem duas possibilidades para "parmetro": 1. parmetro um nmero: Ao definir um nmero, este deve ser inteiro. Se for positivo, a pgina alvo est "parmetro"pginas
2.
frente. Ao passo que se for negativo, a pgina alvo est "parmetro" pginas para traz. parmetro uma string: Neste caso, o alvo a URL que mais se assemelhe ao valor da string definida por "parmetro".
7.5.Objeto Location
Contm informaes acerca da URL corrente, alm de permitir desviar o navegador para um outro endereo atravs da alterao desta URL. Uma URL normalmente constituda 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 nmero da porta utilizada pelo servidor para a URL. Nota: se o nmero da porta o padro (80) nada ser retornado. protocol - Retorna o protocolo de uma URL. EX: http: search - Retorna a parte de consulta de um URL. EX: ?email=someone@example.com
Como voc j deve ter percebido nem todos estes elementos esto presentes em todas as URLs. Se omitirmos o nome da propriedade, numa referncia ao objeto location, javascript assume que estamos referenciando a propriedade href. Sendo assim, as duas atribuies a seguir, provocam o mesmo resultado: location.href="http://www.nce.ufrj.br" location="http://www.nce.ufrj.br"
7.5.2.Mtodos
assign() - Carrega um novo documento reload() - Recarrega o documento atual replace() - Substitui o documento atual com um novo
8.DOM HTML
8.1.Intoduo
Com o DOM HTML, JavaScript pode acessar todos os elementos de um documento HTML. Quando uma pgina carregada, o navegador cria um Document Object Model da pgina. O modelo DOM HTML construdo como uma rvore de objetos.
Com um modelo de objeto programvel, JavaScript recebe todo o poder de que necessita para criar HTML dinamicamente: JavaScript pode mudar todos os elementos HTML na pgina JavaScript pode mudar todos os atributos HTML na pgina JavaScript pode mudar todos os estilos CSS na pgina JavaScript pode reagir a todos os eventos na pgina
Localizando elementos HTML pela id A maneira mais fcil 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 mtodo ir retornar o elemento como um objeto (x). Se o elemento no encontrado, x conter nulo. Localizando elementos HTML pela tag name Este 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 no funciona no Internet Explorer 5,6,7 e 8.
8.1.1.DOM HTML
O DOM HTML permite que o JavaScript para alterar o contedo de elementos HTML. Alterando o fluxo de sada HTML Em JavaScript, document.write () pode ser usado para gravar diretamente no fluxo de sada 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 contedo HTML A maneira mais fcil de modificar o contedo de um elemento HTML est usando a propriedade innerHTML. Para alterar o contedo de um elemento HTML, use esta sintaxe: document.getElementById (id). innerHTML = new HTML Este exemplo modifica o contedo 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 HTML Para 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 CSS
O DOM HTML permite que o JavaScript mude o estilo de elementos HTML. Mudando de estilo HTML Para 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 Document
Cada 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 pgina, a partir de um script. Dica: O objeto Document tambm faz parte do objeto da janela, e pode ser acessado atravs da propriedade window.document. Nota: O objeto do documento tambm pode usar as propriedades e mtodos do objeto Node.
8.2.1.Propriedades
anchors - Retorna uma coleo de todas as ncoras no documento applets - Retorna uma coleo 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 domnio do servidor que colocou o documento forms - Retorna uma coleo de todos os formulrios do documento images - Retorna uma coleo 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 coleo 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 ttulo do documento URL - Retorna a URL completa do documento
8.2.2.Mtodos
close() - Fecha o fluxo de sada previamente aberto com document.open () getElementsByName() - Acessa todos os elementos com um nome especificado open() - Abre um fluxo de sada para coletar a sada de document.write () ou document.writeln () write() - Escreve expresses HTML ou cdigo JavaScript em um documento writeln() - Mesmo que write(), mas acrescenta um caractere de nova linha aps cada declarao
8.3.DOM Eventos
HTML DOM permite que o JavaScript reaja a eventos HTML. Reagindo a Eventos Um JavaScript pode ser executado quando um evento ocorre, como quando um usurio clica em um elemento HTML. Para executar cdigo quando um usurio clica em um elemento, adicione o cdigo JavaScript a um atributo de evento HTML: onclick=JavaScript Exemplo: Neste exemplo, o contedo 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 HTML Para 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 cdigo JavaScript quando o usurio interrompe o carregamento de uma imagem, por exemplo, com um clique no boto Parar. Deve ser usado com o objeto imagem (IMG) de HTML. Exemplo: <img name="foto" SRC="minha_foto.gif" onAbort="alert('Voc no viu minha foto')"> onBlur Com o evento onBlur o usurio ir controlar o contedo de um elemento em um formulrio 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 funo para que caso o usurio deixe o campo em branco, seja exibida a mensagem de alerta: <script> <!-function teste(){ if (form1.campo1.value==""){ alert("FAVOR PREENCHER"); } }--> </script> <pre> <form name="form1"> Digite seu Nome: <input type="text" name="campo1" onBlur="teste()"> </form> onChange Com o evento onChange o usurio poder acionar alguma funo sempre que for alterado o contedo dos objetos textarea, text ou select. Este evento bem similar com o evento onBlur, porm ele verifica se o contedo do elemento foi alterado. Vejamos um exemplo de sua utilizao: Digite seu Endereo: <input type="text" name="campo2" onChange="alert('testando')"> onClick O evento onClick utilizado em links, botes, radio, checkbox, reset. Vejamos um exemplo de sua utilizao em um boto de formulrio: <input type="button" name="botao" value="Envia" onClick="alert('Obrigado pelos Dados')"> onDblClick Executa um cdigo JavaScript quando um duplo clique dado no objeto. Usado para document, Link, na forma onDblClick="algumaCoisa", onde "algumaCoisa" uma funo ou cdigo de JavaScript. Exemplo: <form> <input Type="button" Value="Teste" onDblClick="alert('Foi dado um duplo clique')"> </form> onDragDrop Executa um cdigo JavaScript quando um objeto arrastado para a janela do navegador. Usado para window, na forma onDragDrop="algumaCoisa", onde "algumaCoisa" uma funo ou cdigo de JavaScript. onError Executa um cdigo JavaScript quando um erro ocorre no carregamento de uma janela ou imagem. Usado para Image, window, na forma onError="algumaCoisa", onde "algumaCoisa" uma funo ou cdigo de JavaScript. O evento s ocorre em caso de erro de sintaxe no cdigo ou erro em tempo de execuo do mesmo. No reporta erros do navegador. Se forado 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 a janela. onFocus Com o manipulador onFocus o usurio poder criar uma ao sempre que os elementos select, text ou textarea receberem o foco.
Ao contrrio do evento onBlur que executa aes sempre que o elemento perde o foco. Veja um exemplo de sua utilizao: Digite seu Nome: <input type="text" name="campo1" onBlur="teste()" onFocus= "alert ('Digite seu nome completo')"> Digite seu Endereo: <input type="text" name="campo2" onChange="alert('testando')" onFocus="this.value='R. Castelo da Beira'"> onKeyDown Executa um cdigo JavaScript quando uma tecla pressionada. Usado para document, Image, Link, Text, Textarea, na forma onKeyDown="algumaCoisa", onde "algumaCoisa" uma funo ou cdigo 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 cdigo dado evita que o usurio insira o caractere "@" no campo "nome". onKeyPress Executa um cdigo JavaScript quando o usurio pressiona ou mantm pressionada uma tecla. Usado para document, Image, Link, Text, Textarea, na forma onKeyPress="algumaCoisa", onde "algumaCoisa" uma funo ou cdigo 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 cdigo 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 usurio mantm a tecla pressionada). onKeyUp Executa um cdigo JavaScript quando o usurio libera uma tecla que foi pressionada. Usado para document, Image, Link, Text, Textarea, na forma onKeyUp="algumaCoisa", onde "algumaCoisa" uma funo ou cdigo 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 cdigo dado exibe uma mensagem com o caractere da tecla liberada. onLoad Conforme exemplo mostrando anteriormente, com o evento onLoad executa alguma ao assim que o documento carregado no browser. Este objeto aplicado diretamente ao objeto window. Veja abaixo um exemplo de exibio de uma mensagem de alerta assim que a pgina carregada: <body onLoad="alert('Seja Bem Vindo')"> onUnload Com o evento onUnLoad o usurio pode determinar uma ao assim que o usurio sai da pgina, 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 usurio deixa a pgina: <body onLoad="alert('Seja Bem Vindo')" onUnLoad="alert('Obrigado pela visita!')"> onMouseDown Executa um cdigo JavaScript quando o usurio pressiona um boto do mouse. Usado para Button, document, Link, na forma onMouseDown="algumaCoisa", onde "algumaCoisa" uma funo ou cdigo de JavaScript. onMouseMove Executa um cdigo JavaScript quando o usurio move o cursor com o mouse. Usado na forma onMouseMove="algumaCoisa", onde "algumaCoisa" uma funo ou cdigo de JavaScript. Note que no associado a nenhum evento em particular por ser bastante frequente. onMouseOut Executa um cdigo JavaScript quando o usurio 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 funo ou cdigo de JavaScript. onMouseOver Com o evento onMouseOver o usurio criar uma ao que ser acionada sempre que o ponteiro do mouse se mover sobre um link. Veja um exemplo de sua utilizao: <a href="http://www.mg.senac.br"onMouseOver="defaultStatus='Olhe para a barra de Status'">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 instruo 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 aes para o mesmo evento, basta separ-las com um ponto e vrgula. onMove Executa um cdigo JavaScript quando o usurio move uma janela. Usado para window, na forma onMove="algumaCoisa", onde "algumaCoisa" uma funo ou cdigo de JavaScript. onReset Executa um cdigo JavaScript quando o usurio clica o boto Reset de um formulrio. Usado para Form, na forma onReset="algumaCoisa", onde "algumaCoisa" uma funo ou cdigo de JavaScript. Exemplo: <form name="form1" onReset="alert('Considerado meio padro de envio')"> Meio de envio: <input type="text" name="forma" value="Via area" size="2"_> <input type="reset" name="padrao" value="Limpar"> </form> O cdigo dado avisa que o meio padro ser considerado se o usurio clicar no boto "Limpar" do formulrio.
onResize Executa um cdigo JavaScript quando o usurio redimensiona uma janela ou um frame. Usado para window, na forma onResize="algumaCoisa", onde "algumaCoisa" uma funo ou cdigo 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 cdigo dado informa a nova largura e a nova altura sempre que a janela redimensionada. onSelect O evento onSelect ocorre sempre quando o usurio seleciona um texto dos elementos de formulrio text ou textarea. Vejamos um exemplo de sua utilizao: <form name="form1"> Digite seu Nome: <input type="text" name="campo1" onSelect="alert('O usurio selecionou '+this.value)"> onSubmit O evento onSubmit ocorre sempre que o usurio envia o formulrio. Com este evento o usurio poder determinar ou no o envio do formulrio. Vejamos um exemplo para sua utilizao: <form name="form1" onSubmit="alert('Formulrio Enviado')"> Com este evento o usurio poder verificar a validao de dados, como por exemplo se todos os campos do formulrio esto preenchidos. Veja agora um exemplo desta utilizao, caso o campo especfico esteja em branco o usurio receber uma mensagem informando que o campo no foi preenchido: <script> <!-function teste(){ if (form1.campo1.value==""){ alert("FAVOR PREENCHER"); return(false); }else { return(true); } } --> </script> <pre> <form name="form1" onSubmit="teste()"> Digite seu Nome: <input type="text" name="campo1"> </form> onUnload Executa um cdigo JavaScript quando o usurio sai da janela. Usado para window, na forma onUnload="algumaCoisa", onde "algumaCoisa" uma funo ou cdigo de JavaScript. Exemplo: <BODY onUnload="terminar()">
No cdigo dado, a funo a ser desenvolvida, "terminar()", deve fazer alguma ao que for necessria quando o usurio sair da janela.
8.4.DOM Elements
Adicionar e Remover ns (elementos HTML) Criao 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 existentes Para 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 tambm podem usar as propriedades / mtodos 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 visvel do contedo em uma pgina (no incluindo fronteiras, margens ou barras de rolagem) clientWidth - Retorna a largura visvel do contedo de uma pgina (no incluindo fronteiras, margens ou barras de rolagem) dir - Define ou retorna a direo do texto de um elemento id - Define ou retorna o ID de um elemento innerHTML - Define ou retorna o contedo HTML (+texto) de um elemento lang - Define ou retorna o cdigo de idioma de um elemento style - Define ou retorna o atributo estilo de um elemento tabIndex - Define ou retorna a ordem de tabulao de um elemento title - Define ou retorna o atributo Title de um elemento
Mtodos de elementos toString() - Converte um elemento em uma string
9.Ncleo DOM
O objeto Node representa um n no documento HTML. Um n em um documento HTML : o documento um elemento um atributo
texto um comentrio
9.1.Propriedades de ns
attributes - Retorna uma coleo de atributos de um n baseURI - Retorna a URI base absoluta de um n childNodes - Retorna uma NodeList de ns 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 prximo n no mesmo nvel 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 nvel do n de rvore textContent - Define ou retorna o contedo textual de um n e seus descendentes
9.2.Mtodos de ns
appendChild() - Adiciona um novo n filho, para o n especificado, como o ltimo n filho cloneNode() - Clones de um n compareDocumentPosition() - Compara a posio do documento de dois ns getFeature(feature,version) - Retorna um objeto DOM que implementa as APIs especializada do recurso e verso 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 contrrio, ele retorna false hasChildNodes() - Retorna true se um n tem os ns filho, caso contrrio, 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 padro, caso contrrio false isEqualNode() -Verifica se dois ns so iguais isSameNode() - Verifica se dois ns so o mesmo n isSupported() - Retorna true se um recurso especificado suportado em um n, caso contrrio false lookupNamespaceURI() - Retorna o namespace URI correspondente a um prefixo especificado lookupPrefix() - Retorna o prefixo correspondente a URI de namespace especificado normalize() - Une ns de texto adjacentes e remove ns 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 elemento Filhos: Element, Text, Comment, ProcessingInstruction, CDATASection, EntityReference Retorno nodeName: element name Retorno nodeValue: null Constante nome: ELEMENT_NODE 2. Attr Representa um atributo Filhos: Text, EntityReference Retorno nodeName: attribute name
Retorno nodeValue: attribute value Constante nome: ATTRIBUTE_NODE 3. Text Representa o contedo textual em um elemento ou atributo Filhos: nenhum Retorno nodeName: #text Retorno nodeValue: content of node Constante nome: TEXT_NODE 4. CDATASection Representa uma seo CDATA em um documento (texto que no ser analisado por um analisador) Filhos: nenhum Retorno nodeName: #cdata-section Retorno nodeValue: content of node Constante nome: CDATA_SECTION_NODE
5. EntityReference Representa uma referncia de entidade Filhos: Element, ProcessingInstruction, Comment, Text, CDATASection, EntityReference Retorno nodeName: entity reference name Retorno nodeValue: null Constante nome: ENTITY_REFERENCE_NODE
6. Entity Representa uma entidade Filhos: Element, ProcessingInstruction, Comment, Text, CDATASection, EntityReference Retorno nodeName: entity name Retorno nodeValue: null Constante nome: ENTITY_NODE 7. ProcessingInstruction Representa uma instruo de processamento Filhos: nenhum Retorno nodeName: target Retorno nodeValue: content of node Constante nome: PROCESSING_INSTRUCTION_NODE 8. Comment Representa um comentrio Filhos: nenhum Retorno nodeName: #comment Retorno nodeValue: comment text Constante nome: COMMENT_NODE 9. Document Representa todo o documento (o n raiz da rvore de DOM) Filhos: Element, ProcessingInstruction, Comment, DocumentType Retorno nodeName: #document Retorno nodeValue: null Constante nome: DOCUMENT_NODE 10. DocumentType Fornece uma interface para as entidades definidas para o documento Filhos: nenhum Retorno nodeName: doctype name Retorno nodeValue: null Constante nome: DOCUMENT_TYPE_NODE 11. DocumentFragment Representa um objeto de documento "lightweight", que pode conter uma parte de um documento Filhos: Element, ProcessingInstruction, Comment, Text, CDATASection, EntityReference Retorno nodeName: #document fragment Retorno nodeValue: null Constante nome: DOCUMENT_FRAGMENT_NODE 12. Notation
Representa uma notao declarada no DTD Filhos: nenhum Retorno nodeName: notation name Retorno nodeValue: null Constante nome: NOTATION_NODE
9.4.NodeList
Definio e Uso O objeto NodeList representa uma coleo ordenada de ns. Os ns no NodeList podem ser acessados atravs de seu nmero de ndice (a partir de 0). Um objeto NodeList pode ser uma coleo de n de ns filho. Propriedades lenght- nmeros de ns em uma coleo Mtodos
item() - Retorna o n com o ndice especificado em uma lista de ns
9.5.NamedNodeMap
O objeto NamedNodeMap representa uma coleo no-ordenada de ns. Os ns no NamedNodeMap pode ser acessado atravs do seu nome. Um objeto NamedNodeMap pode ser uma coleo de n de atributos. Propriedades: length - nmeros de ns em uma coleo Mtodos 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 Document

O objeto do documento a raiz de uma rvore do documento. O objeto Document nos d acesso aos dados do documento. Desde que ns do elemento, ns de texto, atributos, comentrios, etc, no pode existir fora do documento, o objeto Document contm mtodos 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 tambm pode usar as propriedades e mtodos do objeto Node. Propriedades doctype - Retorna a Declarao de Tipo de Documento associada ao documento documentElement - Retorna o Elemento documento do documento (o elemento HTML) documentURI - Define ou retorna a localizao do documento domConfig - Retorna a configurao usada quando normalizeDocument () invocado implementation - Retorna o objeto DOMImplementation que trata esta documento inputEncoding - Retorna a codificao econjunto de caracteres usados no o documento strictErrorChecking - Define ou retorna se de verificao de erros imposta ou no xmlEncoding - Retorna a codificao XML do documento XML xmlStandalone - Define ou retorna se o documento XML autnomo ou no xmlVersion - Define ou retorna a verso XML do documento XML Mtodos 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 comentrio 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 ns de texto vazio, e une os ns adjacentes renameNode() - Muda o nome do n especificado
9.7.O Objeto DOM Element

O objeto Elemento representa um elemento no documento HTML. O objeto elemento pode ter ns filhos do tipo Element, Text, Comment, CDATASection, ProcessingInstruction, e EntityReference. O objeto Element podem ter atributos, que tm o tipo de n Attr. Nota: O objeto Elemento tambm pode usar as propriedades e mtodos do objeto Node. Propriedades schemaTypeInfo - Retorna as informaes de tipo de elemento. tagName - Retorna o nome da tag do elemento Mtodos 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 coleo de todos os elementos filhos com a tag name especificada getElementsByTagNameNS() - Retorna uma coleo 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 contrrio, ele retorna false hasAttributeNS() - Retorna true se o elemento tem o atributo especificado, com o namespace especificado, caso contrrio 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 Attr

O objeto Attr representa um atributo no documento HTML. Um atributo sempre pertence a um objeto elemento. Nota: O objeto Attr tambm pode usar as propriedades e mtodos do objeto Node. Propriedades isId - Retorna true se o atributo do tipo ID, caso contrrio, ele retorna false name - Retorna o nome do atributo ownerElement - Retorna o elemento pertence a este atributo schemaTypeInfo - Retorna as informaes de tipo de atributo specified - Retorna true se o atributo foi especificado, caso contrrio, ele retorna false value - Define ou retorna o valor do atributo
10.PopupAlert
JavaScript tem trs tipos de caixas de pop-up: caixa de alerta, caixa de confirmao, e caixa de Prompt. Caixa de Alerta Uma caixa de alerta usada para disponibilizar informaes ao usurio. Sintaxe: window.alert("sometext"); O mtodo 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 Confirmao Uma caixa de confirmao muitas vezes usada se voc deseja que o usurio verifique ou aceite algo. Quando uma caixa de confirmao aparece, o usurio ter de clicar em "OK" ou "Cancelar" para prosseguir. Se o usurio clicar em "OK", a caixa retorna true. Se o usurio clica em "Cancelar", a caixa retorna falso. Sintaxe window.confirm("sometext"); O mtodo 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 Prompt A caixa de dilogo de prompt nos possibilita requerer uma entrada ao usurio apesar de no ser to til, pois esse recurso pode facilmente ser substitudo por um campo de texto feito em HTML. Para chamarmos esta caixa de dilogo, usamos a funo prompt() que recebe uma string como parmetro. Esse parmetro ser a mensagem a ser exibida dentro da caixa de dilogo. nome = prompt ("Qual o seu nome?");
11.Temporizao de eventos
Com JavaScript, possvel executar um cdigo em intervalos de tempo especificados. Isto chamado de temporizao de eventos. muito fcil de eventos temporizados em JavaScript. Os dois mtodos principais que so utilizados so os seguintes: setInterval() - executa uma funo, repetidamente, em intervalos de tempo especificados
setTimeout() - executa uma funo, repetidas vezes, depois de esperar um nmero especificado de milissegundos Nota: A setInterval() e setTimeout() so os dois mtodos do objeto DOM HTML Window. O mtodo setTimeout() Sintaxe: window.setTimeout("javascript function",milliseconds); O window.setTimeout() pode ser escrito sem o prefixo window. O mtodo setTimeout() ir esperar o nmero especificado de milissegundos, e em seguida, executar a funo especificada. O primeiro parmetro de setTimeout() deve ser uma funo. O segundo parmetro indica quantos milissegundos, a partir de agora, voc quer executar o primeiro parmetro. Exemplo: Espera 3 segundos e ento da um alerta com "Hello": setTimeout(function(){alert("Hello")},3000); Como parar a execuo? O mtodo clearTimeout() utilizado para parar a execuo da funo especificada no mtodo setTimeout(). Sintaxe: window.clearTimeout(timeoutVariable) O mtodo window.clearTimeout() pode ser escrito sem o prefixo window. Para ser capaz de usar o mtodo clearTimeout(), voc deve usar uma varivel global ao criar o mtodo do timeout: myVar=setTimeout("javascript function",milliseconds); Ento, se a funo no tiver sido executado, voc ser capaz de parar a execuo chamando o mtodo. clearTimeout(): Exemplo: var myVar; function myFunction(){ myVar=setTimeout(function(){alert("Hello")},3000); } function myStopFunction(){ clearTimeout(myVar); }
12.Cookies
Um cookie frequentemente utilizado para identificar um usurio. O que um cookie? Um cookie uma varivel que armazenado no computador do visitante. Cada vez que o computador solicita mesmo uma pgina com um navegador, ele enviar o cookie tambm. 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 pgina web, ele ou ela deve preencher o seu nome. O nome ento armazenado em um cookie. Prxima vez que o visitante chega a sua pgina, ele ou ela pode receber uma mensagem de boas-vindas como "Bem-vindo John Doe!" O nome recuperado do cookie armazenado Data cookie - A primeira vez que um visitante chega sua pgina web, a data atual armazenado em um cookie. Prxima vez que o visitante chega a sua pgina, ele ou ela pode receber uma mensagem como "Sua ltima visita foi na tera-feira 11 de agosto de 2005!" A data recuperado do cookie armazenado Criar e armazenar um cookie Neste exemplo vamos criar um cookie que armazena o nome de um visitante. A primeira vez que um visitante acessa pgina web, ele ou ela ser convidado a preencher seu nome. O nome ento armazenado em um cookie. A prxima vez que o visitante acessa a mesma pgina, ele ou ela receber uma mensagem de boas-vindas. Primeiro, vamos criar uma funo que armazena o nome do visitante em uma varivel 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 parmetros da funo acima armazenar o nome do cookie, o valor do cookie e o nmero de dias at que o cookie expira. A funo acima, primeiro converte o nmero de dias numa data vlida, ento adiciona o nmero 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. Ento, criamos outra funo 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 funo 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. Ns criamos a funo que exibe uma mensagem de boas-vindas se o cookie definido, e se o cookie no est definido que vai exibir uma caixa de alerta, pedindo o nome do usurio, e armazena o cookie nome de usurio para 365 dias, chamando a funo 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.Validao
Validao de formulrio com JavaScript JavaScript pode ser usado para validar dados em formulrios HTML antes de enviar o contedo para um servidor. O JavaScript pode verificar se o usurio: Deixou campos obrigatrios vazios Informou um e-mail vlido Informou uma data vlida Digitou texto em campo nmerico Campos obrigatrios A funo abaixo verifica se um campo foi deixado vazio. Se o campo estiver em branco, uma caixa de alerta avisa com uma mensagem, a funo retorna falso, e o formulrio no 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 funo acima pode ser chamado quando um formulrio 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 validao A funo abaixo verifica se o contedo 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 (.). Alm disso, o @ no deve ser o primeiro caractere do endereo de e-mail, e do ltimo ponto deve estar presente aps o sinal @, e um mnimo 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 funo acima pode ser chamada quando um formulrio 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.Segurana de JavaScript 15.Notas de verso

JavaScript 1.0 - J suportava um grande nmero de funes e instrues. - Padro: ECMA-262, edio 3 - Verso do Netscape: 2.0. - Verso do Internet Explorer: 3.0. - Lanamento: Dezembro/1995. JavaScript 1.1 - Padro: Serviu de base para o ECMA-262. - Verso do Netscape: 3.0. - Verso do Internet Explorer: 4.0. - Lanamento: Novembro/1996. JavaScript 1.2 - Padro: No compatvel com o ECMA-262. - Verso do Netscape: 4.0. - Verso do Internet Explorer: 4.0. - Lanamento: Dezembro/1997. JavaScript 1.3 - JavaScript Console. - Suporte a Unicode. - Padro: ECMA-262, edio 1. - Verso do Netscape: 4.06. - Lanamento: Maio/1998. JavaScript 1.4 - Novos Operadores: in e instanceof. - Tratamento de excees.
- Padro: ECMA-262, edio 1. - Verso do Netscape: 4.07. - Lanamento: Outubro/1998. JavaScript 1.5 - Erros em tempo de execuo. - Aprimoramento de expresses. - Padro: ECMA-262, edio 3. - Verso do Netscape: 6.0. - Verso do Firefox: 1.0 - Lanamento: Setembro/2000. JavaScript 1.6 - Array extras, arrays e strings genricas - Suporte a E4X - Verso do Firefox: 1.5 - Lanamento: Novembro/2005 JavaScript 1.7 - Geradores Pythonic - Iteradores - let - Verso do Firefox: 2.0 - Lanamento: Outubro/2006 JavaScript 1.8 - Expresses geradoras - Expresses de clausura - Verso do Firefox: 3.0 - Lanamento: Junho/2008 JavaScript 1.8.1 - Suporte nativo a JSON - Verso do Firefox: 3.5 - Lanamento: Junho/2008 JavaScript 1.8.5 - ECMAScript 5 Compliance - Verso do Firefox: 4 - Lanamento: Julho/2010
16.Princpios para Escrever JavaScript de forma Consistente e Idiomtica

Este caprulo faz parte do texto Principles of Writing Consistent, Idiomatic JavaScript [WAL]
16.1.Espao em branco
Nunca misture espaos e tabs. Quando comear um projeto, antes de escrever qualquer cdigo, escolha entre indentao suave (espaos) ou tabulao real (tabs), considere isso como lei. Pela legibilidade, eu sempre recomendo que configure o tamanho de indentao de seu editor para dois caracteres - isso significa dois espaos ou dois espaos representando um tab real. Se o seu editor suportar, sempre trabalhe com a configurao de "mostrar caracteres invisveis" ligada. Os benefcios desta prtica so: fortalecer a consistncia; eliminar espao em branco ao final da linha; eliminar espaos em uma linha em branco; commits e diffs mais legveis.
16.2.Sintaxe bonita
A. Parnteses, chaves e quebras de linhas // if/else/for/while/try sempre tem espaos, chaves e ocorrem em mltiplas linhas // isso facilita a legibilidade
// 2.A.1.1 // Exemplos de cdigo pouco claro/bagunado if(condicao) facaAlgo(); while(condicao) iteracao++; for(var i=0;i<100;i++) algumaIteracao(); // 2.A.1.1 // Use espao em branco para facilitar a leitura if ( condicao ) { // instrues } while ( condicao ) { // instrues } for ( var i = 0; i <100; i++ ) { // instrues } // Melhor ainda: var i, length = 100; for ( i = 0; i <length; i++ ) { // instrues } // Ou... var i = 0, length = 100; for ( ; i <length; i++ ) { // instrues } var prop; for ( prop in object ) { // instrues } if ( true ) { // instrues } else { // instrues } B. Atribuies, declaraes, funes (nomenclatura, expresso, construtor) // 2.B.1.1 // Variveis var foo = "bar", num = 1, undef; // Notaes literais: var array = [], object = {}; // 2.B.1.2
// Utilizando apenas um `var` por escopo (funo) promove legibilidade // e mantm a sua lista de declarao livre de desordem (alm de evitar algumas tecladas) // Ruim var foo = ""; var bar = ""; var qux; // Bom var foo = "", bar = "", quux; // ou.. var // comentrio aqui foo = "", bar = "", quux; // 2.B.1.3 // declaraes de variveis devem sempre estar no incio de seu respectivo escopo (funo) // O mesmo deve acontecer para declaraes de `const` e `let` do ECMAScript 6. // Ruim function foo() { // algumas instrues aqui var bar = "", qux; } // Bom function foo() { var bar = "", qux; // algumas instrues depois das declaraes de variveis } // 2.B.2.1 // Declarao de funo nomeada function foo( arg1, argN ) { } // Utilizao foo( arg1, argN ); // 2.B.2.2 // Declarao de funo nomeada function square( number ) { return number * number; } // Utilizao square( 10 ); // Estilo de passagem artificialmente contnua function square( number, callback ) { callback( number * number ); } square( 10, function( square ) { // instrues de callback });
// 2.B.2.3 // Expresso de funo var square = function( number ) { // Retorna algo de valor e relevante return number * number; }; // Expresso de funo 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 // Declarao de construtor function FooBar( options ) { this.options = options; } // Utilizao var fooBar = new FooBar({ a: "alpha" }); fooBar.options; // { a: "alpha" } C. Excees, pequenos desvios // 2.C.1.1 // Funes com callbacks foo(function() { // Veja que no h espao extra entre os parnteses // da chamada de funo e a palavra "function" }); // Funo recebendo uma array, sem espao foo([ "alpha", "beta" ]); // 2.C.1.2 // Funo recebendo um objeto, sem espao foo({ a: "alpha", b: "beta" }); // String literal como argumento nico, sem espao foo("bar"); // Parnteses internos de agrupamento, sem espao if ( !("foo" in obj) ) { } D. Consistncia sempre ganha Nas sees 2.A-2.C, as regras de espao em branco so recomendadas sob um propsito simples e maior: consistncia. importante notar que preferncias de formatao, tais como "espao 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) {
// instrues } while (condition) { // instrues } for (var i = 0; i <100; i++) { // instrues } if (true) { // instrues } else { // instrues } E. Aspas Se voc preferir usar simples ou dupla no importa, no h diferena em como o JavaScript analisa elas. O que ABSOLUTAMENTE PRECISA ser aplicado consistncia. Nunca misture diferentes tipos de aspas em um mesmo projeto. Escolha um estilo e fique com ele. F. Finais de linha e linhas vazias Espaos em branco podem arruinar diffs e fazer com que changesets sejam impossveis de se ler. Considere incorporar um gancho de pre-commit que remova espaos em branco ao final das linhas e espaos 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 possvel) null: variavel === null null ou undefined: variavel == null undefined: Variveis Globais: typeof variavel === "undefined"
Variveis Locais: variavel === undefined Propriedades: object.prop === undefined object.hasOwnProperty( prop ) "prop" in object B. Tipos coagidos Considere as implicaes 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 cdigo, 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 lgica 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 coero automtica com os operadores + ou -: foo = +document.getElementById("foo-input").value; // ^ o operador + ir converter o operando do lado direito para um nmero // typeof foo; // "number" if ( foo === 1 ) { importantTask(); } // ìmportantTask()` ser chamado Aqui temos alguns casos comuns com coeres: // 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 aproximao 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 nmeros negativos so tratados // de forma diferente...
var neg = -2.5; parseInt( neg, 10 ); // o mesmo que... ~~neg; neg>> 0; // Resulta em -2 // Porm... neg>>> 0; // Vai resultar em 4294967294
16.4.Avaliao condicional
// 4.1.1 // Quando estiver apenas avaliando se um array tem tamanho, // ao invs disso: if ( array.length> 0 ) ... // ...avalie a verdade lgica, como isso: if ( array.length ) ... // 4.1.2 // Quando estiver apenas avaliando se um array est vazio, // ao invs disso: if ( array.length === 0 ) ... // ...avalie a verdade lgica, como isso: if ( !array.length ) ... // 4.1.3 // Quando estiver apenas avaliando se uma string no est vazia, // ao invs disso: if ( string !== "" ) ... // ...avalie a verdade lgica, como isso: if ( string ) ... // 4.1.4 // Quando estiver apenas avaliando se uma string est vazia, // ao invs disso: if ( string === "" ) ... // ...avalie se ela logicamente falsa, como isso: if ( !string ) ... // 4.1.5 // Quando estiver avaliando se uma referncia verdadeira, // ao invs 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 referncia falsa, // ao invs disso: if ( foo === false ) ... // ...use a negao para coagir para uma avaliao verdadeira
if ( !foo ) ... // ...Seja cuidadoso, isso tambm ir funcionar com: 0, "", null, undefined, NaN // Se voc _PRECISA_ testar um valor falso de tipo booleano, ento use if ( foo === false ) ... // 4.1.7 // Quando apenas estiver avaliando uma referncia que pode ser `null` ou ùndefined`, mas NO `false`, "" ou 0, // ao invs disso: if ( foo === null || foo === undefined ) ... // ...aproveite a vantagem da coero de tipo com ==, como isso: if ( foo == null ) ... // Lembre-se, utilizando == ir funcionar em um `null` TANTO para `null` quanto para ùndefined` // mas no para `false`, "" ou 0 null == undefined SEMPRE avalie para o melhor e mais preciso resultado - o que est acima uma recomendao, no um dogma. // 4.2.1 // Coero de tipo e notas sobre avaliaes Prefira `===` ao invs de `==` (ao menos em casos que necessitem avaliao de tipos flexveis) === no faz coero de tipo, o que significa que: "1" === 1; // false == faz coero de tipo, o que significa que: "1" == 1; // true // 4.2.2 // Booleanos, verdades e negaes // Booleanos: true, false // Verdades: "foo", 1 // Negaes: "", 0, null, undefined, NaN, void 0
16.5.Estilo Prtico
// 5.1.1 // Um mdulo prtico (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 tambm podem acontecer aqui // Expor seu mdulo ao objeto global global.Module = Module; })( this ); // 5.2.1 // Um construtor prtico (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 global global.ctor = ctor; })( this );
16.6.Nomenclatura
A. Se voc no um compilador humano ou compactador de cdigo, no tente ser um. O cdigo a seguir um exemplo de nomenclatura ruim: // 6.A.1.1 // Exemplo de cdigo 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 dvida, voc j deve ter escrito cdigo assim - provavelmente isso acaba hoje. Aqui temos o mesmo trecho lgico, porm com uma nomenclatura simptica e mais inteligente (e uma estrutura legvel): // 6.A.2.1 // Exemplo de cdigo 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 indicaes 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 funes, objetos, instancias, etc // funes e declaraes de variveis camelCase; // 6.A.3.4 // Nomes de construtores, prottipos, etc // funo construtora PascalCase; // 6.A.3.5 // Nomes de expresses 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 traduo: no havia traduo no Google Closure, o original o seguinte: functionNamesLikeThis; variableNamesLikeThis; ConstructorNamesLikeThis;
EnumNamesLikeThis; methodNamesLikeThis; SYMBOLIC_CONSTANTS_LIKE_THIS; B. Faces do this Alm dos mais conhecidos casos de uso do call e apply, sempre prefira .bind( this ) ou um equivalente funcional, para criar definies BoundFunction que possam serem invocadas posteriormente. Somente recorra ao aliasing quando no houver disponvel uma outra opo preferencial. // 6.B.1 function Device( opts ) { this.value = null; // abre um stream assncrono, // 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 ns temos herdado um EventEmitter ;) Quando no disponvel, 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.proxy function 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.hitch function 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 referncia ao this utilizando self como identificador. Isso bastante propenso a bugs e deve ser evitado sempre que possvel. // 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 Vrios metodos de prototipagem internos do ES 5.1 vem com a assinatura especial de 'thisArg', que deve ser utilizada quando for possvel. // 6.C.1 var obj; obj = { f: "foo", b: "bar", q: "qux" }; Object.keys( obj ).forEach(function( key ) { // |this| agora se refere a òbj` 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. Miscelnea
Esta seo deve servir para ilustrar idias e conceitos sobre como no se considerar isso como um dogma, mas ao invs disso deve encorajar o questionamento de prticas na tentativa de encontrar formas melhores para executar tarefas comuns na programao em JavaScript. A. Evite utilizar switch, mtodos modernos de verificao devero adicionar funes com switch em suas listas negras Parecem haver melhorias drsticas execuo do comando switch nas ltimas verses do Firefox e do Chrome: http://jsperf.com/switch-vs-object-literal-vs-module // 7.A.1.1 // Um exemplo de uma instruo switch switch( foo ) { case "alpha": alpha(); break; case "beta": beta(); break; default: // algo para executar por padro break; } // 7.A.1.2 // Uma maneira alternativa de dar suporte para facilidade de composio e // reutiilizao utilizar um objeto que guarde "cases" e uma funo // para delegar: var cases, delegator; // Retornos de exemplo apenas para ilustrao. cases = { alpha: function() { // instrues // um retorno return [ "Alpha", arguments.length ]; }, beta: function() { // instrues // um retorno return [ "Beta", arguments.length ]; }, _default: function() { // instrues // um retorno return [ "Default", arguments.length ]; } };
delegator = function() { var args, key, delegate; // Transforma a lista de argumentos em uma array args = [].slice.call( arguments ); // Retira a chave inicial dos argumentos key = args.shift(); // Atribui o manipulador de caso padro delegate = cases._default; // Deriva o mtodo para delegar a operao para if ( cases.hasOwnProperty( key ) ) { delegate = cases[ key ]; } // O argumento de escopo pode ser definido para algo especfico // nesse caso, |null| ser suficiente return 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 condio arbitrria. var caseKey, someUserInput; // Possivelmente alguma maneira de entrada de formulrio? 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 cdigo com mnima diferena 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.Comentrios
Uma linha nica acima do cdigo que comentado Multiplas linhas bom Comentrios ao final da linha so proibidos! O estilo do JSDoc bom, porm requer um investimento de tempo significante
16.8.1.Cdigo em apenas um idioma

Programas devem ser escritos em um nico idioma, no importe o idioma que seja, a ser definido por quem o mantm.
REFERNCIAS
[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/

Livro JavaScript Um Mero Resumo

Caricato da

Informazioni sul documento

Titolo originale

Copyright

Formati disponibili

Condividi questo documento

Condividi o incorpora il documento

Opzioni di condivisione

Hai trovato utile questo documento?

Questo contenuto è inappropriato?

Copyright:

Formati disponibili

Livro JavaScript Um Mero Resumo

Caricato da

Copyright:

Formati disponibili

JavaScript

1.4.Declarando e inicializando variveis

4.1.Definindo uma funo

function criaSaudacaoPersonalizada (nome) { return Ol , + nome + !; }

4.2.Chamando uma funo

6.1.2.Recuperando o Valor de uma Propriedade

6.1.3.Alterando o Valor de uma Propriedade

6.1.6.Removendo uma Propriedade

6.1.7.Verificando a Existncia de uma Propriedade

6.2.6.Gerando uma String com os Elementos de um Array

6.2.7.Removendo o ltimo Elemento

6.2.8.Adicionando um Elemento na ltima Posio

6.2.9.Invertendo os Elementos de um Array

6.2.10.Removendo o Primeiro Elemento

console. log ( cursos [i]); }

6.2.11.Copiando um Trecho de um Array

6.2.12.Removendo e Adicionando Elementos em um Array

6.2.13.Adicionando um Elemento na Primeira Posio

6.2.14.1.Percorrendo um Array Multidimensional

6.3.Mtodos das Strings 6.3.1.Acessando os Caracteres de uma String por Posio

6.3.2.Recuperando um Trecho de uma String

6.3.3.Dividindo uma String

6.4.1.Criando um objeto Date

6.4.2.Mtodos de objetos tipo Date

6.6. Expresses Regulares (RegExp)

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

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

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

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

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

Mtodos de elementos toString() - Converte um elemento em uma string

item() - Retorna o n com o ndice especificado em uma lista de ns

9.6.O Objeto DOM Document

9.7.O Objeto DOM Element

9.8.O Objeto DOM Attr

14.Segurana de JavaScript 15.Notas de verso

16.Princpios para Escrever JavaScript de forma Consistente e Idiomtica

16.8.1.Cdigo em apenas um idioma

Potrebbero piacerti anche