70-480

Prévia do material em texto

HTML5 - Usando Geolocalização
Usar o método getCurrentPosition () para obter a posição do utilizador.
O exemplo a seguir é um exemplo Geolocation simples retornando a latitude e longitude da posição do usuário:
<script>
var x=document.getElementById("demo");
function getLocation()
  {
  if (navigator.geolocation)
    {
    navigator.geolocation.getCurrentPosition(showPosition);
    }
  else{x.innerHTML="Geolocation is not supported by this browser.";}
  }
<!—- Metodo para apenas exibit longitude e latitude -- >
function showPosition(position)
  {
  x.innerHTML="Latitude: " + position.coords.latitude + 
  "<br>Longitude: " + position.coords.longitude; 
  }
</script>
Tratamento de erros e rejeições
O segundo parâmetro do método getCurrentPosition () é usado para tratar os erros. Ele especifica uma função a ser executada se não conseguir obter a localização do usuário:
  if (navigator.geolocation)
    {
    navigator.geolocation.getCurrentPosition(showPosition,showError);
    }
function showError(error)
  {
  switch(error.code) 
    {
    case error.PERMISSION_DENIED:
      x.innerHTML="User denied the request for Geolocation."
      break;
    case error.POSITION_UNAVAILABLE:
      x.innerHTML="Location information is unavailable."
      break;
    case error.TIMEOUT:
      x.innerHTML="The request to get user location timed out."
      break;
    case error.UNKNOWN_ERROR:
      x.innerHTML="An unknown error occurred."
      break;
    }
  }
Exibindo o resultado em um mapa
Para exibir o resultado em um mapa, você precisa de acesso a um serviço de mapas que pode usar a latitude e longitude, como o Google Maps:
function showPosition(position)
{
var latlon=position.coords.latitude+","+position.coords.longitude;
var img_url="http://maps.googleapis.com/maps/api/staticmap?center="
+latlon+"&zoom=14&size=400x300&sensor=false";
document.getElementById("mapholder").innerHTML="<img src='"+img_url+"'>";
}
O getCurrentPosition () Método - Data de Retorno
O getCurrentPosition () retorna um objeto se ele é bem sucedido. Propriedades a latitude, longitude e precisão são sempre devolvidos. As outras propriedades abaixo são devolvidos se disponível.
	Propriedade
	Descrição
	coords.latitude
	A latitude como um número decimal
	coords.longitude
	A longitude como um número decimal
	coords.accuracy
	A precisão da posição
	coords.altitude
	A altitude em metros acima do nível médio do mar
	coords.altitudeAccuracy
	A precisão da posição de altitude
	coords.heading
	A posição que graus em sentido horário a partir do Norte
	coords.speed
	A velocidade em metros por segundo
	timestamp
	A data / hora da resposta
Objeto Geolocation - Outros Métodos interessantes
watchPosition () - Retorna a posição atual do usuário e continua a retornar à posição atualizada conforme os movimentos do usuário (como o GPS em um carro).
clearWatch () - Interrompe a watchPosition () método.
O exemplo a seguir mostra o método watchPosition (). Você precisa de um dispositivo GPS precisa de testar isso (como o iPhone):
<script>
var x=document.getElementById("demo");
function getLocation()
  {
  if (navigator.geolocation)
    {
    navigator.geolocation.watchPosition(showPosition);
    }
  else{x.innerHTML="Geolocation is not supported by this browser.";}
  }
function showPosition(position)
  {
  x.innerHTML="Latitude: " + position.coords.latitude + 
  "<br>Longitude: " + position.coords.longitude; 
  }
</script>
O que é HTML5 Web Storage?
Com HTML5, páginas da web pode armazenar dados localmente no navegador do usuário.
Anteriormente, isso era feito com cookies. No entanto, Web Storage é mais seguro e mais rápido. Os dados não está incluído com cada solicitação do servidor, mas usados ​​apenas quando solicitado. Também é possível armazenar grandes quantidades de dados, sem afetar o desempenho do site.
Os dados são armazenados em pares chave / valor, e uma página web só pode acessar os dados armazenados por si só.
LocalStorage e sessionStorage 
Existem dois novos objectos para o armazenamento de dados no cliente:
localStorage - armazena dados sem data de validade
sessionStorage - armazena dados para uma sessão
Antes de usar o armazenamento web, verificar o suporte ao navegador para localStorage e sessionStorage:
if(typeof(Storage)!=="undefined")
  {
  // Yes! localStorage and sessionStorage support!
  // Some code.....
  }
else
  {
  // Sorry! No web storage support..
  }
O objeto localStorage
O objeto localStorage armazena os dados sem data de validade. Os dados não serão apagados quando o navegador é fechado, e estará disponível no próximo dia, semana ou ano.
<script>
if(typeof(Storage)!=="undefined")
 {
 localStorage.lastname="Smith";
 document.getElementById("result").innerHTML="Last name: " + localStorage.lastname;
 }
else
 {
 document.getElementById("result").innerHTML="Sorry, your browser does not support web storage...";
 }
</script>
O objeto sessionStorage
O objeto sessionStorage é igual ao objeto localStorage, exceto que ele armazena os dados por apenas uma sessão.Os dados são apagados quando o usuário fecha a janela do navegador.
O exemplo a seguir conta o número de vezes que um usuário clicou um botão, na sessão atual:
if (sessionStorage.clickcount)
  {
  sessionStorage.clickcount=Number(sessionStorage.clickcount)+1;
  }
else
  {
  sessionStorage.clickcount=1;
  }
document.getElementById("result").innerHTML="You have clicked the button " + sessionStorage.clickcount + " time(s) in this session.";
HTML5 Application Cache
Manifesto Básico de cache
Para habilitar o cache de aplicativos, incluir o atributo manifesto em tag <html> do documento:
<!DOCTYPE HTML>
<html manifest="demo.appcache">
...
</html>
Cada página com o atributo de manifesto especificado será armazenada em cache quando o usuário visita. Se o atributo manifesto não é especificado, a página não será armazenada em cache (a menos que a página é especificado diretamente no arquivo de manifesto).
A extensão de arquivo recomendado para arquivos de manifesto é: "AppCache".
Um arquivo de manifesto precisa ser servido com o tipo MIME correto- , que é "texto / cache-manifesto". Deve ser configurado no servidor web.
O arquivo de manifesto
O arquivo de manifesto é um arquivo de texto simples, que informa ao navegador o que fazer cache (e que nunca cache).
O arquivo de manifesto tem três seções:
Manifesto de cache - arquivos listados sob este cabeçalho será armazenada em cache após o download pela primeira vez
REDE - Os arquivos listados sob esse cabeçalho requerem uma conexão com o servidor, e nunca vai ser armazenada em cache
CONTINGÊNCIA - Arquivos listados sob esse cabeçalho especifica páginas fallback se uma página é inacessível
Manifesto de cache
A primeira linha, manifesto de cache, é necessário:
CACHE MANIFEST
/theme.css
/logo.gif
/main.js
O arquivo de manifesto acima lista três recursos: um arquivo de CSS, uma imagem GIF, e um arquivo JavaScript.Quando o arquivo de manifesto é carregada, o navegador irá baixar os três arquivos do diretório raiz do site. Então, sempre que o usuário não está conectado à Internet, os recursos ainda estará disponível.
REDE
A seção de rede abaixo especifica que o arquivo "login.asp" nunca deve ser armazenado em cache, e não estará disponível offline:
NETWORK:
login.asp
Um asterisco pode ser usado para indicar que todos os outros recursos / arquivos exige uma conexão de internet:
NETWORK:
*
FALLBACK
A seção FALLBACK abaixo especifica que "offline.html" será servido no lugar de todos os arquivos no html / / catálogo, no caso de uma conexão com a Internet não pode ser estabelecido:
FALLBACK:
/html/ /offline.html
Nota: O URI primeiro é o recurso, o segundo é o retorno.
Atualizando o cache
Uma vez que um aplicativo é armazenada em cache, ele permanece em cache até que uma das seguintes situações:
O usuário limpar o cache do navegador
O arquivode manifesto é modificado (ver dica abaixo)
O cache de aplicativo de programação é atualizada
Exemplo - arquivo manifesto completo Cache
CACHE MANIFEST
# 2012-02-21 v1.0.0
/theme.css
/logo.gif
/main.js
NETWORK:
login.asp
FALLBACK:
/html/ /offline.html
Dica: As linhas que começam com "#" são linhas de comentário, mas também pode servir a outro propósito. Cache de um aplicativo é atualizado apenas quando suas mudanças arquivo de manifesto. Se você editar uma imagem ou mudar uma função JavaScript, essas alterações não serão re-cache. Atualizando a data ea versão em uma linha de comentário é uma maneira de tornar o navegador re-cache seus arquivos.
Notas sobre Application Cache
Tenha cuidado com o que você de cache.
Uma vez que um arquivo é armazenado em cache, o navegador irá continuar a mostrar a versão em cache, mesmo se você mudar o arquivo no servidor. Para garantir que as atualizações para o navegador do cache, você precisa alterar o arquivo de manifesto.
Nota: Os navegadores podem ter limites de tamanhos diferentes para dados em cache (alguns navegadores têm um limite de 5MB por site).
Estabelecer o âmbito de objetos e variáveis
A resolução de nomes de propriedades em objetos
ECMAScript reconhece duas categorias de objeto, "objeto nativo" e "objeto de host" com uma sub-categoria de objetos nativos chamado "Objeto Built-in" (ECMA 262 3 Seção Ed 4.3). Objetos nativos pertencem à língua e de acolhimento objectos são fornecidos pelo ambiente, e pode ser, por exemplo, objectos de documentos, os nós de DOM e similares.
Objetos nativos são sacos soltos e dinâmica de propriedades nomeadas (algumas implementações que não são dinâmicos quando se trata de objeto construído na sub-categoria, embora geralmente isso não importa). As propriedades definidas chamado de um objeto irá conter um valor, que pode ser uma referência a outro objeto (funções também são objetos nesse sentido) ou um valor primitivo: String, Number, Boolean, nulo ou indefinido. O tipo Undefined primitivo é um pouco estranho, já que é possível atribuir um valor undefined a uma propriedade de um objeto, mas isso não elimina que a propriedade do objeto, que continua a ser uma propriedade definida nomeado, ele apenas mantém o valor indefinido .
O seguinte é uma descrição simplificada de como os valores de propriedade são ler e definir em objetos com os detalhes internos escovados para o máximo possível.
Atribuição de Valores
Nomeado propriedades dos objetos podem ser criados, ou valores definidos em propriedades existentes nomeados, atribuindo um valor a essa propriedade nomeado. Assim, dado: -
var objectRef = new Object (); / / criar um objeto javascript genérico.
Uma propriedade com o nome de "testNumber" pode ser criado como: -
objectRef.testNumber = 5;
 / * - ou: - * /
objectRef ["testNumber"] = 5;
O objeto não tinha "testNumber" propriedade antes da atribuição, mas um é criado quando a atribuição é feita. Qualquer cessão posterior não precisa criar a propriedade, apenas re-define seu valor: -
objectRef.testNumber = 8;
 / * - ou: - * /
objectRef ["testNumber"] = 8;
Objetos Javascript protótipos que podem eles próprios ser objectos, tal como será descrito em breve, e que o protótipo pode ter propriedades nomeadas. Mas isso não tem nenhum papel na atribuição. Se for atribuído um valor eo objeto real não tem uma propriedade com o nome correspondente a propriedade de que o nome é criado eo valor é atribuído a ele. Se ele tem a propriedade então o seu valor é re-definido.
Leitura de Valores
É na leitura de valores de propriedades de objeto que os protótipos entram em jogo. Se um objeto tem uma propriedade com o nome da propriedade usada no acessador de propriedade, então o valor da propriedade é retornado: -
/ * Atribuir um valor a uma propriedade chamada. Se o objeto não tiver um
 propriedade com o nome correspondente antes da atribuição que
 terá um após-o: -
* /
objectRef.testNumber = 8;
/ * Leia o valor de volta do imóvel: - * /
var val = objectRef.testNumber;
/ * E - val - agora contém o valor 8, que foi apenas atribuído ao
 nome da propriedade do objeto. * /
 
Cria um objeto com o protótipo Object.prototype que em si tem um protótipo nulo. Assim, a cadeia de protótipos para objectRef contém apenas um objeto: Object.prototype . No entanto: -
/ * A "construtor" função para a criação de objetos de um -
 MyObject1 - tipo.
* /
função MyObject1 (formalParameter) {
 / * Dar o objeto construído uma propriedade chamada - testNumber - e
 atribuir a ele o valor passado para o construtor como seu primeiro
 argumento: -
 * /
 this.testNumber formalParameter =;
}
/ * A "construtor" função para a criação de objetos de um -
 MyObject2 - tipo: -
* /
função MyObject2 (formalParameter) {
 / * Dar o objeto construído uma propriedade chamada - testString -
 e atribuir a ela o valor passado para o construtor como seu primeiro
 argumento: -
 * /
 this.testString = formalParameter;
}
/ * A próxima operação substitui o protótipo padrão associado
 todos MyObject2 instâncias com uma instância de MyObject1, passando a
 argumento - 8 - para o construtor MyObject1 para que a sua -
 testNumber - propriedade será definido para esse valor: -
* /
MyObject2.prototype = new MyObject1 (8);
/ * Finalmente, criar uma instância de - MyObject2 - e atribuir uma referência
 para esse objeto para a variável - objectRef - passando uma string como o
 primeiro argumento para o construtor: -
* /
var objectRef = new MyObject2 ("string_value");
 setTimeout com referências de função
Um uso comum para um fecho é o de proporcionar os parâmetros para a execução de uma função, antes da execução da função. Por exemplo, quando uma função é para ser fornecido como o primeiro argumento para o setTimout função que é comum em ambientes web browser.
setTimeout agenda a execução de uma função (ou uma seqüência de javascript código-fonte, mas não neste contexto), fornecido como seu primeiro argumento, depois de um intervalo, expresso em milissegundos (como seu segundo argumento). Se uma parte do código quer usar setTimeout ele chama o setTimeout função e passa uma referência a um objeto de função como primeiro argumento e o intervalo milissegundo como o segundo, mas uma referência a uma função de objeto não pode fornecer os parâmetros para a execução regular dessa função.
No entanto, o código pode chamar outra função que retornou uma referência a um objeto de função interna, com a função de objeto interior a ser passado por referência para o setTimeout função. Os parâmetros a serem utilizados para a execução da função interior são passados ​​com a chamada para a função que retorna. setTimout executa a função interior sem a passagem de argumentos, mas que a função interior ainda pode acessar os parâmetros fornecidos pela chamada para a função externa que devolveu: -
função callLater (paramA, paramB, paramC) {
 retorno * / uma referência a uma função interna anônima criado
 com uma expressão de função: -
 * /
 função de retorno (() {
 / * Esta função interna é para ser executado com - setTimeout
 - E quando ele é executado ele pode ler, e agir de acordo, o
 parâmetros passados ​​para a função externa: -
 * /
 paramA [paramB] = paramC;
 });
}
...
/ * Chama a função que irá retornar uma referência à função interna
 objeto criado em seu contexto de execução. Passando os parâmetros que
 a função interna irá usar quando for finalmente executado como
 argumentos para a função exterior. A referência retornada para o interior
 função de objeto é atribuído a uma variável local: -
* /
var functRef = callLater (elStyle, "display", "nenhum");
/ * Chama a função setTimeout, passando a referência para o interior
 função atribuída ao - functRef - variável como o primeiro argumento: -
* /
hideMenu = setTimeout (functRef, 500);
O charAt () e charCodeAt() Métodos-Seleção de um único caractere de uma String
Se você quiser descobrir informações sobre um único caractere dentro de uma cadeia, é necessário o charAt () e charCodeAt () métodos. Estes métodos podem ser muito úteis para verificar a validade de entrada do usuário, algo que vamos ver mais emCapítulo 6 , quando olhamos para formulários HTML.
O charAt () método tem um parâmetro: a posição de índice do personagem que você quer na cadeia. Em seguida, retorna o personagem. charAt () trata as posições dos caracteres da cadeia, como a partir de 0, então o primeiro caractere está no índice 0, o segundo no índice 1, e assim por diante.
Por exemplo, para encontrar o último caractere em uma string, podemos usar o código
var myString = prompt ("Digite o texto", "Olá Mundo!"); 
var theLastChar = myString.charAt (myString.length - 1); 
document.write ("O último personagem é" + theLastChar);
Na primeira linha que solicita ao usuário uma corda, com o padrão de "Olá Mundo!" e armazenar essa string na variável myString .
Na próxima linha, usamos o charAt () método para recuperar o último caractere na string. Nós usamos a posição de índice (myString.length - 1) . Por quê? Vamos dar a string "Olá Mundo!" como um exemplo. O comprimento dessa seqüência é de 12, mas a posição do último caractere é de 11 desde que a indexação começa em 0. Portanto, temos de subtrair um do comprimento da corda para obter a posição do último caractere.
Na linha final, escrever o último caractere na cadeia para a página.
O charCodeAt () método é semelhante em uso para o charAt () método, mas em vez de devolver a própria personagem, ele retorna um número que representa o código de caractere decimal no conjunto de caracteres Unicode para esse personagem. Lembre-se que os computadores só entendem números para o computador, todas as nossas cadeias são apenas dados numéricos. Quando pedimos o texto em vez de números, o computador faz uma conversão com base na sua compreensão interna de cada número e fornece o respectivo personagem.
Por exemplo, para encontrar o código de caractere do primeiro caractere em uma string, podemos escrever
var myString = prompt ("Digite o texto", "Olá Mundo!"); 
var theFirstCharCode = myString.charCodeAt (0); 
document.write ("O código primeiro personagem é" + theFirstCharCode);
que irá obter o código de caracteres para o caractere no índice zero posição na seqüência dada pelo usuário, e escrevê-lo para a página.
Códigos de caracteres, de modo ir assim, por exemplo, a letra A tem o código 65, B tem 66, e assim por diante. Letras minúsculas partir de 97 (uma é de 97, b é de 98, e assim por diante). Dígitos ir de 48 (para o número 0), a 57 (para o número 9). Você pode usar esta informação para vários fins, como veremos no próximo exemplo.
O método fromCharCode () convertendo-códigos de caracteres para uma String
O método fromCharCode () pode ser pensado como o oposto de charCodeAt () , em que você passar uma série de números separados por vírgula representando códigos de caracteres, e converte-os em uma única seqüência.
No entanto, o fromCharCode () método é incomum, pois é uma estática -método não precisamos ter criado uma corda objeto para usar com ele. Em vez disso, podemos usar a corda expressão.
Por exemplo, as seguintes linhas colocar a string "ABC" na variável myString .
var myString; 
myString = String.fromCharCode (65,66,67);
O fromCharCode () método pode ser muito útil quando usado com variáveis. Por exemplo, para construir uma cadeia que consiste de todas as letras maiúsculas do alfabeto, poderíamos usar o seguinte código:
var myString = ""; 
charCode var; 
    
for (charCode = 65; charCode <= 90; charCode + +) 
{ 
   myString = myString + String.fromCharCode (charCode); 
} 
    
document.write (myString);
Nós usamos o de loop para selecionar cada personagem de A a Z, por sua vez e concatenar isso myString . Note-se que, enquanto isso é bom como um exemplo, é mais eficiente e menos memória com fome do que simplesmente escrever
var myString = "ABCDEFGHIJKLMNOPQRSTUVWXYZ"
O indexOf () e lastIndexOf () Métodos-Encontrar uma String dentro de outra string
O métodos indexOf () e lastIndexOf () são utilizados para procurar a ocorrência de uma cadeia dentro de outra. Uma seqüência contido dentro de outro é geralmente chamado de substring . Eles são úteis quando temos uma seqüência de informações, mas quer apenas uma pequena parte dela. Por exemplo, no nosso teste trivia quando alguém entra em uma resposta de texto, queremos verificar se determinadas palavras-chave estão presentes dentro da cadeia.
Ambos indexOf () e lastIndexOf () tomar dois parâmetros:
A seqüência que você deseja encontrar
A posição de caractere que você quer iniciar a pesquisa (opcional)
Tal como acontece com o método charAt (), posições de caracteres começar do zero. Se você não incluir o segundo parâmetro, em busca começa a partir do início da cadeia.
O valor de retorno de indexOf () e lastIndexOf () é a posição do caractere na seqüência em que o substring foi encontrada. Mais uma vez, é baseado em zero, então se a substring é encontrado no início da cadeia, em seguida, 0 é retornado. Se não houver correspondência, o valor -1 é retornado.
Por exemplo, para procurar o substring "Paul" na string "Olá Paulo. How are you Paulo" , pode-se usar o código
<script type="text/javascript"> language="JavaScript" 
    
var myString = "Olá paul Como você Paul."; 
foundAtPosition var; 
    
foundAtPosition = myString.indexOf ("Paulo"); 
alerta (foundAtPosition); 
    
</ script >
Este código deve resultar em uma caixa de mensagem com o número 24, que é a posição do caractere de "Paul" . Você pode estar se perguntando por que é 24, o que claramente se refere ao segundo "Paul" na cadeia, em vez de 6 para o primeiro "paul" . Bem, isso é devido a sensibilidade do caso novamente. É trabalhando o ponto um pouco, mas leva JavaScript sensibilidade caso muito a sério, tanto em sua sintaxe e ao fazer comparações. Se você digitar IndexOf () em vez de indexOf () , JavaScript vai reclamar.Da mesma forma, "Paul" não é o mesmo que "Paul" . Erros com caso são tão fáceis de fazer, mesmo para os especialistas, que o melhor é estar muito ciente do caso durante a programação.
Temos visto indexOf () em ação, mas como é que lastIndexOf () diferem? Bem, enquanto indexOf () inicia a pesquisa a partir do início da cadeia, ou da posição especificada no segundo parâmetro, e trabalha para o final, lastIndexOf () inicia-se no final da cadeia, ou da posição especificada, e funciona para o início da cadeia.
No exemplo que primeiro pesquisar usando indexOf () , que encontra o primeiro "Paulo" (alterado para o caso correto do último exemplo). A caixa de alerta exibe este resultado, que é a posição 6 caracteres. Então nós pesquisar usando lastIndexOf () .Este começa a procurar no final da cadeia, e assim que o Paulo primeiro se trata de é o último na string na posição de carácter 24. Portanto, a segunda caixa de alerta exibe o resultado 24.
<script language="JavaScript" type="text/javascript"> 
    
var myString = "Olá Paulo Como você Paul."; 
foundAtPosition var; 
    
foundAtPosition = myString.indexOf ("Paulo"); 
    
alerta (foundAtPosition); 
    
foundAtPosition = myString . lastIndexOf ("Paulo"); 
alerta (foundAtPosition); 
    
</ script>
O substr () e substring () Parte Métodos Cópia de uma String
Se quiséssemos cortar parte de uma string e atribuir esse corte de parte a outra variável ou usá-lo em uma expressão, nós usaríamos o substr () e substring () métodos. Ambos os métodos proporcionam o mesmo resultado final, ou seja, uma parte de uma cadeia, mas diferem nos parâmetros que necessitam.
O método substring () tem dois parâmetros: a posição inicial caráter ea posição final caráter da parte da corda que queremos. O segundo parâmetro é opcional, se você não incluí-lo, todos os caracteres da posição inicial para o fim da cadeia estão incluídos.
Por exemplo, se a nossa cadeia é "JavaScript" e queremosapenas o texto "Java" , poderíamos chamar o método assim:
var myString = "JavaScript"; 
var mySubString = myString.substring (0,4); 
alerta (mySubString);
Como em todos os métodos da Cadeia objeto, até agora, as posições de caracteres começar do zero. No entanto, você pode estar se perguntando por que especificou o caráter final, como 4. Este método é um pouco confuso, porque o personagem final é o marcador final, que não está incluído na substring que é cortado. Ele ajuda a pensar como os parâmetros especificando o comprimento da corda que está sendo retornado: os parâmetros 0 e 4 retornará (4 - 0) caracteres começando e incluindo o caractere na posição 0.Representados graficamente parece que esta:
	Posição caráter
	0
	1
	2
	3
	4
	5
	6
	7
	8
	9
	Caráter
	J
	um
	v
	um
	S
	c
	r
	Eu
	p
	t
Como substring () , o método substr () novamente tem dois parâmetros, sendo o primeiro a posição de início do primeiro caractere que você deseja incluir em seu substring. No entanto, desta vez o segundo parâmetro especifica o comprimento da cadeia de caracteres que você quer cortar fora da cadeia mais longa. Por exemplo, poderíamos reescrever o código anterior da
var myString = "JavaScript"; 
var mySubString = myString.substr (0,4); 
alerta (mySubString);
Tal como acontece com a subsequência () método, o segundo parâmetro é opcional. Se você não incluí-lo, todos os caracteres da posição inicial em diante serão incluídos.
A principal razão para a utilização de um método ao invés do outro é que o substring () método é suportado pelo IE 3 + e por NN 2 + navegadores. No entanto, o substr () método só funciona com a versão 4 (e posterior) navegadores.
Vamos olhar para o uso do substr () e lastIndexOf () métodos juntos. No próximo capítulo , vamos ver como podemos recuperar o caminho do arquivo eo nome da página web atualmente carregado. No entanto, não há nenhuma maneira de recuperar apenas o nome do arquivo sozinho. Assim, se, por exemplo, o arquivo é http://mywebsite/temp/myfile.htm , você pode precisar para extrair o myfile.htm parte. Este é o lugar onde substr () e lastIndexOf () são úteis.
var fileName = window.location.href; 
fileName = fileName.substr (fileName.lastIndexOf ("\") + 1); 
document.write ("O nome do arquivo da página é" fileName +);
A primeira linha define a variável fileName para o caminho do arquivo atual e nome, como / mywebsite / temp / myfile.htm . Não se preocupe em entender esta linha, nós vamos estar a olhar para ele no próximo capítulo .
A segunda linha é onde a ação é interessante. Você pode ver que eu usei o valor de retorno da lastIndexOf () método como um parâmetro para outro método, algo que é perfeitamente correto e muito útil. Nosso objetivo em utilizar fileName.lastIndexOf ("/") é encontrar a posição do final de barra ( / ), que será o último caractere antes do nome do arquivo. Nós adicionamos um para este valor, porque não deseja incluir esse personagem, e depois passar este novo valor para o substr () método. Não há segundo parâmetro aqui (o comprimento), porque nós não conhecemos. Como resultado, substr () irá retornar todos os personagens até o final da cadeia, que é o que nós queremos.
	
	Nota 
	Este exemplo recupera o nome da página na máquina local, porque não estamos acessando a página de um servidor web. No entanto, não deixe que isto levá-lo a pensar que o acesso a arquivos em um disco rígido a partir de uma página web é algo que você vai ser capaz de fazer com JavaScript sozinho. Para proteger os usuários de hackers maliciosos, JavaS
O toLowerCase () e toUpperCase () Métodos-Alterar o caso de uma seqüência
Se quisermos alterar o caso de uma cadeia, por exemplo, para remover sensibilidade do caso quando se compara cordas, precisamos da toLowerCase () e toUpperCase () métodos. Não é difícil adivinhar o que estes dois métodos de fazer. Ambos retornam um string que é o valor da cadeia na Cadeia objeto, mas com o seu caso seja convertido em superior ou inferior, dependendo do método invocado. Quaisquer caracteres não-alfabéticos permanecem inalterados por essas funções.
No exemplo a seguir, pode-se ver que, alterando o caso de ambas as cadeias que pode comparar-los sem sensibilidade caso de ser um problema.
var myString = "Eu não me importo sobre o caso" 
    
se (myString.toLowerCase () == "Eu não me importo sobre o caso") 
{ 
   alert ("Quem se importa sobre o caso?"); 
}
Mesmo que toLowerCase () e toUpperCase () não tomar quaisquer parâmetros, você deve lembrar de colocar os dois parênteses vazios no final, isto é, () , se você quiser chamar um método.
O objeto Math
O Math objeto fornece uma série de funções úteis e métodos matemáticos de manipulação de números. Vamos dar uma olhada em alguns deles aqui, mas você vai encontrar o resto descrito no Apêndice B .
O Math objeto é um pouco incomum em que o JavaScript cria automaticamente para você. Não há necessidade de declarar uma variável como um Math objeto ou definir um novo Math objeto antes de ser capaz de usá-lo, tornando-o um pouco mais fácil de usar.
As propriedades do Math objecto incluem algumas constantes matemáticas úteis, tais como o PI propriedade (que dá o valor 3,14159 e assim por diante). Nós acessar essas propriedades, como de costume, colocando um ponto após o nome do objeto ( Matemática) e em seguida, escrever o nome da propriedade. Por exemplo, para calcular a área de um círculo, que pode utilizar o seguinte código:
var raio = prompt ("Dê o raio do círculo", ""); 
área var = (Math.PI) * raio * raio; 
document.write ("A área é" área +);
Os métodos da matemática objeto incluir algumas operações que são impossíveis, ou complexo, para realizar utilizando os operadores padrão matemáticos (+, -, * e /). Por exemplo, o cos () método retorna o co-seno do valor passado como parâmetro. Nós vamos olhar para alguns destes métodos agora.
O abs () Método
O abs () método retorna o valor absoluto do número passado como parâmetro. Essencialmente, isso significa que ela retorna o valor positivo do número. Assim, -1 é retornado como um , -4 , como 4 , e assim por diante. No entanto, uma seria devolvido como umporque é já positivo.
Por exemplo, o código a seguir escrever o número 101 para a página.
var myNumber = -101; 
document.write (Math.abs (myNumber));
O ceil () Método
O ceil () método sempre arredonda um número até o maior número inteiro ou inteiro. Assim, torna-se 10,01 11, e torna-se -9,99 -9 (-9 porque é maior do que -10). O ceil () método tem apenas um parâmetro, ou seja, o número que você deseja arredondar para cima.
Usando ceil () é diferente de usar o parseInt () função vimos no Capítulo 2 , porque parseInt () simplesmente corta os números depois do ponto decimal para deixar um número inteiro, enquanto ceil () arredonda o número para cima.
Por exemplo, o código seguinte grava duas linhas na página, a primeira contendo o número 102 e a segunda, contendo o número 101.
var myNumber = 101,01; 
document.write (Math.ceil (myNumber) + "<br>"); 
document.write (parseInt (myNumber));
O piso () Método
Como o ceil () método, o chão () método remove todos os números depois do ponto decimal, e retorna um número inteiro ou inteiro. A diferença é que andar () sempre arredonda o número para baixo. Então, se nós passamos 10,01 que seriam devolvidos 10, e se nós passarmos -9,99, veremos -10 retornado.
A rodada () Método
O round () método é muito semelhante ao ceil () e floor () , exceto que em vez de sempre arredondamento para cima ou para sempre arredondamento para baixo, arredonda-se apenas se a parte decimal é 0,5 ou maior, e arredonda de outra forma.
Por exemplo
var myNumber = 44,5; 
document.write (Math.round (myNumber) + "<br>"); 
    
myNumber = 44,49; 
document.write (Math.round (myNumber));
iria escrever os números 45 e 44 para a página.
Resumo de métodos de arredondamento
Como vimos, o ceil () , floor () e round () todos os métodos remover os números após um ponto decimal e retornar apenas um número inteiro. No entanto, o queeles retornam número inteiro depende do método utilizado: floor () retorna o menor, ceil () mais alto, e round () o inteiro mais próximo equivalente. Isso pode ser um pouco confuso, então o seguinte é uma tabela de valores e qual o número inteiro seria devolvido se esses valores foram passados ​​para o parseInt () função, e ceil () , floor () e round () métodos.
	Parâmetro
	parseInt () retorna
	ceil () retorna
	retornos de chão ()
	redondas () retorna
	10,25
	10
	11
	10
	10
	10,75
	10
	11
	10
	11
	10,5
	10
	11
	10
	11
	-10,25
	-10
	-10
	-11
	-10
	-10,75
	-10
	-10
	-11
	-11
	-10,5
	-10
	-10
	-11
	-10
	
	Nota 
	Recordar que parseInt () é uma função JavaScript nativo e não um método da Math objecto, tal como os outros métodos apresentados nesta tabela.
O método random ()
O random () método retorna um número de ponto flutuante aleatório no intervalo entre 0 e 1, onde 0 é incluído e um não é. Isso pode ser muito útil para a exibição de imagens de banners aleatórios ou para gravar um jogo de JavaScript.
Vamos dar uma olhada em como você iria imitar o rolo de um único die. Na página seguinte, 10 números aleatórios são escritos para a página. Clique no botão Atualizar do navegador para obter outro conjunto de números aleatórios.
<html> 
<body> 
<script language="JavaScript" type="text/javascript"> 
var throwCount; 
lance de dados var; 
for (throwCount = 0; throwCount <10; throwCount + +) 
{ 
   lance de dados = (Math.floor (Math.random () * 6) + 1); 
   document.write (+ lance de dados "<br>"); 
} 
    
</ script> 
</ body> 
</ html>
Queremos lance de dados a ser entre 1 e 6. O random () retorna um número de ponto flutuante entre 0 e pouco menos de 1. Multiplicando este número por 6, obtemos um número entre 0 e pouco menos de 6. Em seguida, adicionando 1, obtemos um número entre 1 e pouco menos de 7. Usando floor () para sempre arredondar para baixo para o menor número inteiro mais próximo, podemos garantir que vamos acabar com um número entre 1 e 6.
Se quiséssemos um número aleatório entre 1 e 100, teríamos apenas alterar o código para que Math.random () é multiplicado por 100, em vez de 6.
O pow () Método
O pow () método gera um número a uma potência especificada. Ele tem dois parâmetros, sendo o primeiro o número que deseja elevado a uma potência, eo segundo é o poder em si. Por exemplo, para elevar 2 à potência de 8 (isto é, para o cálculo 2 * 2 * 2 * 2 * 2 * 2 * 2 * 2), que iria escrever Math.pow (2,8) -o resultado sendo 256 . Ao contrário de alguns dos outros métodos matemáticos, como sin () , cos () , e acos () , que não são comumente usados ​​em programação web a menos que seja uma aplicação científica que você está escrevendo, o pow () método muitas vezes pode ser muito útil .
Experimente - Usando pow ()
No exemplo a seguir, vamos escrever uma função usando pow () , que fixa o número de casas decimais em uma função de número um que está faltando a partir de versões anteriores do JavaScript embora agora adicionado ao Jscript 5.5 e JavaScript 1.5, como veremos mais tarde neste capítulo. Isso ajuda a demonstrar que, mesmo que uma função está em falta a partir de JavaScript, normalmente você pode usar funções existentes para criar o que quiser.
<html> 
<head> 
<script language="JavaScript" type="text/javascript"> 
    
correção função (fixNumber, CasasDecimais) 
{ 
   var div = Math.pow (10, CasasDecimais); 
   fixNumber = Math.round (fixNumber * div ) / div; 
   fixNumber retorno; 
} 
</ script> 
</ head> 
<body> 
type="text/javascript"> language="JavaScript" <script 
    
var numero1 = prompt ("Digite o número de casas decimais que você deseja corrigir "," ");
var numero2 = prompt ("Quantas casas decimais que você quer?", ""); 
    
document.write (numero1 + "fixado" + numero2 + "casas decimais é:"); 
document.write (correção (número1, número2 )); 
    
</ script> 
</ body> 
</ html>
Salve a página como ch4_examp4.htm . Quando você carregar a página em seu navegador, você será presenteado com duas caixas de prompt. No primeiro, digite o número para o qual deseja fixar o número de casas decimais, por exemplo 2,2345. Na segunda, digite o número de casas decimais que você quer fixa, por exemplo, 2. Então, o resultado de fixar o número que você entrou para o número de casas decimais que você escolheu será escrito na página, como mostrado na Figura 4-2 . Para os números de exemplo que eu dei, este será 2,23.
 
O Método toFixed ()
O toFixed () método é novo para JavaScript 1.5 e 5.5-Jscript então basicamente ela está disponível no Netscape 6 + e IE 5.5 + apenas. O método corta um número fora depois de um certo ponto. Vamos dizer que queria exibir um preço depois de impostos de vendas. Se o nosso preço é R $ 9,99 e imposto sobre vendas é de 7,5%, o que significa que o custo após impostos será $ 10,73925. Bem, este é mais um valor estranho para uma transação de dinheiro-o que nós realmente queremos fazer é fixar o número de não mais de duas casas decimais. Vamos criar um exemplo.
var itemCost = 9,99; 
var itemCostAfterTax = 9,99 * 1,075; 
document.write ("custo do item é de R $" + + itemCostAfterTax "<br>"); 
itemCostAfterTax = itemCostAfterTax.toFixed (2); 
document.write ("custo do item fixado 2 casas decimais é "itemCostAfterTax +);
O primeiro document.write () irá imprimir o seguinte à página:
Custo do item é $ 10,73925
No entanto, este não é o formato que queremos, em vez disso, queremos duas casas decimais, então na próxima linha, entramos
itemCostAfterTax = itemCostAfterTax.toFixed (2);
Nós usamos o toFixed () método do Número objectivo fixar a variável número que itemCostAfterTax detém a duas casas decimais. Único parâmetro do método é o número de casas decimais que queremos para o nosso número fixado. Esta linha significa que o próximo document.write exibe
Custo do item fixado para 2 casas decimais é $ 10,74
A primeira coisa que você pode se perguntar por que é 10,74 e não 10,73? Bem, a toFixed () método não apenas cortar os dígitos não necessários, mas também arredonda para cima ou para baixo. Neste caso, foi 10,739, que arredonda para 10,74. Se fosse 10,732, teria sido arredondado para 10,73.
Note-se que só podemos fixar um número de 0 a 20 lugares decimais.
Como o método é suportado apenas em navegadores mais recentes, é uma boa idéia para checar primeiro se o navegador suporta, assim:
var varNumber = 22,234; 
se (varNumber.toFixed) 
{ 
     método Browser / / suporta toFixed () 
     = varNumber varNumber.toFixed (2) 
} 
    
mais 
{ 
     método / / Browser não suporta toFixed () para usar algum outro código 
     var div = Math. pow (10,2); 
   varNumber = Math.round (varNumber * div) / div; 
}
A propriedade-Encontrando comprimento quantos elementos estão em uma matriz
O comprimento propriedade nos dá o número de elementos dentro de uma matriz. Nós já vimos este uso em no Quiz Trivia no Capítulo 3 . Às vezes sabemos exatamente quanto tempo a matriz é, mas há situações em que pode ter sido a adição de novos elementos para uma matriz com nenhuma maneira fácil de manter o controle de quantas foram adicionados.
O comprimento propriedade pode ser usada para encontrar o índice do último elemento na matriz. Isto é ilustrado no exemplo seguinte.
var names = new Array (); 
    
nomes [0] = "Paulo"; 
nomes [1] = "Catherine"; 
nomes [11] = "Steve"; 
    
document.write ("O último nome é" + nomes [nomes. comprimento - 1]);
Note-se que temos dados inseridos nos elementos com posições de índice 0, 1, e 11. O índice começa em 0, de modo que o último elemento é no índice comprimento - 1 , que é de 11, em vez do valor do comprimento de propriedade, que é 12.
Outra situação em que o comprimento de propriedade onde se mostrou útil é um método JavaScript retorna uma matriz que se construiu. Por exemplo, no capítulo 8 de manipulação de strings avançado, vamos ver que a corda objeto tem o split () método, que divide o texto em partes e passa de volta o resultadocomo uma matriz de objeto. Porque o JavaScript criada a matriz, não há nenhuma maneira de saber, sem o comprimento da propriedade, o que o índice é do último elemento na matriz.
O método concat () Juntando-Matrizes Juntos
Se queremos levar duas matrizes distintas e juntá-las em um array grande, podemos usar a matriz objeto concat () método. O concat () método retorna uma nova matriz, a qual é a combinação das duas matrizes: os elementos da primeira matriz, então os elementos da segunda matriz. Para fazer isso, usamos o método em nosso primeiro array e passar o nome da segunda matriz como parâmetro.
Por exemplo, digamos que temos duas matrizes, nomes e idades , e, separadamente, eles se parecem com isto:
	matriz nomes
	Índice elemento
	0
	1
	2
	 
	Valor
	Paul
	Catherine
	Steve
	 
	matriz idades
	Índice elemento
	0
	1
	2
	 
	Valor
	31
	29
	34
	 
Se nós combiná-las usando names.concat (idades) , vamos obter uma matriz assim:
	Índice elemento
	0
	1
	2
	3
	4
	5
	Valor
	Paul
	Catherine
	Steve
	31
	29
	34
No código a seguir, este é exatamente o que estamos fazendo.
var names = new Array ("Paul", "Catherine", "Steve"); 
var idades = new Array (31,29,34); 
    
var concatArray; 
    
concatArray = names.concat (idade);
Também é possível combinar duas matrizes em um, mas atribuir a nova matriz para o nome da matriz existente em primeiro lugar, usando nomes = names.concat (idades) .
Se fôssemos usar ages.concat (nomes) , o que seria a diferença? Bem, como você pode ver na tabela a seguir, a diferença é que agora as idades elementos da matriz são, primeiro, e os elementos do nomes matriz serão concatenados no final.
	Índice elemento
	0
	1
	2
	3
	4
	5
	Valor
	31
	29
	34
	Paul
	Catherine
	Steve
Ao usar o concat () método, é importante notar que ela só está disponível na versão 4 ou navegadores posteriores.
O slice () Parte método de cópia de um Array
Quando nós queremos apenas copiar uma parte de uma matriz, podemos usar o slice () método. Usando o slice () método, podemos cortar fora uma parte da matriz e atribuir isso a um novo nome variável. O slice () método tem dois parâmetros:
O índice do primeiro elemento que você quer ser copiado
O índice do elemento que marca o fim da porção de corte que está de fora (opcional)
Assim como a cópia string com substr () e substring () , o ponto de partida está incluído na cópia, mas o ponto final não é. Novamente, se você não incluir o segundo parâmetro, todos os elementos do índice inicial em diante são copiados.
Suponhamos que temos a matriz nomes mostrados na tabela a seguir.
	Índice
	0
	1
	2
	3
	4
	Valor
	Paul
	Sarah
	Louise
	Adão
	Prumo
Se queremos criar uma nova matriz com os elementos 1, Sarah, e 2, Louise, que poderia especificar um índice inicial de 1 e um índice final do 3. O código seria algo parecido com isto:
var names = new Array ("Paul", "Sarah", "Louise", "Adão", "Bob"); 
var slicedArray = names.slice (1,3);
Note-se que quando o JavaScript copia a matriz, ele copia os novos elementos a um array onde eles têm índices 0 e 1, e não seus índices antigas de 1 e 2. Após o corte, o slicedArray parecido com este:
	Índice
	0
	1
	 
	Valor
	Sarah
	Louise
	 
A primeira matriz, nomes , não é afetada pelo corte.
Como com o concat () método, o slice () método está disponível apenas na versão 4 e navegadores posteriores.
O método join ()-Convertendo um Array em uma única seqüência
O join () concatena método todos os elementos de uma matriz e retorna-los como uma string. Ele também permite que você especifique os caracteres que deseja inserir entre cada elemento como eles são unidos. O método tem apenas um parâmetro, e essa é a string que deseja entre cada elemento.
As coisas vão ser mais claro se olharmos para um exemplo. Vamos imaginar que eu tenho a minha lista de compras semanal armazenados em uma matriz, que é algo como isto:
	Índice
	0
	1
	2
	3
	4
	Valor
	Ovos
	Leite
	Batatas
	Cereal
	Banana
Agora eu quero escrever a minha lista de compras para a página usando document.write () . Eu quero que cada item a ser em uma linha diferente, então isso significa que eu preciso para usar o <br> tag entre cada elemento. Primeiro, eu preciso declarar minha matriz.
var myShopping = new Array ("ovos", "leite", "batata", "cereal", "banana");
Agora, vamos converter a matriz em uma string com o join () método.
var myShoppingList = myShopping.join ("<br>");
Agora a variável myShoppingList irá realizar o seguinte texto:
"Ovos <br> Leite <br> Batatas Banana <br> cereal"
que podemos escrever para a página com document.write () .
document.write (myShoppingList);
Agora, a lista de compras irá aparecer na página com cada item em uma nova linha, como mostrado na Figura 4-3 .
 
Figura 4-3
O método sort ()-Colocar o array em ordem
Se você tem uma matriz que contém dados semelhantes, como uma lista de nomes ou uma lista de idades, você pode querer colocá-los em ordem alfabética ou numérica. Isso é algo que o sort () método torna muito fácil. No código a seguir, nós definimos a nossa matriz e depois colocá-lo em ordem alfabética crescente usando names.sort () . Finalmente, a saída é para que possamos ver que é em ordem.
var names = new Array ("Paul", "Sarah", "Louise", "Adão", "Bob"); 
elementIndex var; 
    
names.sort (); 
document.write ("Ora, os nomes em ordem novamente" + " <br> "); 
    
for (elementIndex = 0; elementIndex <names.length; elementIndex + +) 
{ 
   document.write (nomes [elementIndex] + "<br>"); 
}
Não se esqueça que a classificação é sensível, por isso Paulo virá antes paul. Lembre-se que letras lojas JavaScript codificado em seu número equivalente Unicode. A ordenação é feita com base no número de Unicode em vez da letra real. Acontece que números Unicode coincidir com a ordem do alfabeto. No entanto, as letras minúsculas são dadas uma seqüência diferente de números, que vêm após as letras maiúsculas. Assim, a matriz com elementos Adão, Adão, Zoл, zoл, serão classificados para a ordem Adam, Zoл, adam, zoл.
Note-se que no nosso para declaração foi usada a Matriz objeto comprimento propriedade na declaração de condição, em vez de inserir o comprimento da matriz ( 5 ) a nós mesmos, como esta:
para (elementIndex = 0; elementIndex <5; elementIndex + +)
Por que fazer isso? Afinal, sabemos de antemão que há cinco elementos na matriz. Bem, o que aconteceria se alterou o número de elementos em nossa matriz, adicionando mais dois nomes?
var names = new Array ("Paul", "Sarah", "Louise", "Adão", "Bob", "Karen", "Steve");
Se tivéssemos inserido 5 em vez de names.length , nosso código de loop não iria trabalhar como nós queremos que ele. Não seria exibir os dois últimos elementos a menos que mudou a condição da parte de loop para 7. Ao usar o comprimento da propriedade, nós fizemos a vida mais fácil para nós, porque agora não há necessidade de mudar o código em outro lugar, se somarmos os elementos de matriz.
OK, nós colocamos as coisas em ordem crescente, mas o que se quiséssemos ordem decrescente? É aí que o reverso () método vem dentro
O método reverse ()-Colocar sua matriz em ordem inversa
O método final nós vamos olhar para a matriz objeto é o reverso () método, que-não prêmios para adivinhar-inverte a ordem da matriz para que os elementos na parte de trás são movidos para a frente. Vamos dar a nossa lista de compras novamente como exemplo.
	Índice
	0
	1
	2
	3
	4
	Valor
	Ovos
	Leite
	Batatas
	Cereal
	Banana
Se usássemos a reverse () método
var myShopping = new Array ("ovos", "leite", "batata", "cereal", "banana"); 
myShopping.reverse ();
vamos acabar com os elementos da matriz, nesta ordem:
	Índice
	0
	1
	2
	3
	4
	Valor
	Banana
	Cereal
	Batatas
	Leite
	Ovos
Para provar isso, poderia escrevê-lo para a página com o join () método que vimos anteriormente.
var myShoppingList = myShopping.join ("<br>") 
document.write (myShoppingList);
Experimente - Classificaçãode uma matriz
Quando usado em conjunto com o tipo () método, o reverso () do método pode ser usado para classificar um array de modo a que os seus elementos aparecem na ordem inversa ordem alfabética ou numérica. Isto é mostrado no exemplo a seguir.
<html> 
<body> 
<script language="JavaScript" type="text/javascript"> 
    
myShopping var = new Array ("Ovos", "Milk", "batatas", "cereal", "Banana"); 
    
var ord = prompt ("Digite 1 para a ordem alfabética, e -1 para ordem inversa", 1);
    
if (ord == 1) 
{ 
   myShopping.sort (); 
   document.write (myShopping.join ("<br>")); 
} 
else if (ord == 
não é uma entrada válida "); 
} 
</ script> 
</ body> 
</ html>
Salve o exemplo como ch4_examp5.htm . Quando você carrega isso em seu navegador, você será solicitado a digitar alguma entrada, dependendo se você quer que a matriz para ser ordenadas em ordem para a frente ou para trás. Se você inserir 1, a matriz será exibido na ordem direta. Se você digitar -1, a matriz será exibido na ordem inversa. Se você digitar nenhum desses valores, você será informado de que a sua entrada não era válido.
Como funciona
No topo do bloco de script que define a matriz que contém a nossa lista de compras. Em seguida, definimos a variável ord ser o valor inserido pelo usuário em uma caixa de diálogo.
var ord = prompt ("Digite 1 para a ordem alfabética, e -1 para ordem inversa", 1);
Este valor é usado nas condições do caso afirmações que se seguem. O primeiro se verifica se o valor de ord é um , ou seja, se o usuário queria a matriz em ordem alfabética. Se assim o seguinte código é executado:
myShopping.sort (); 
document.write (myShopping.join ("<br>"));
A matriz é classificada e exibida para o usuário em linhas separadas usando o join () método. Em seguida, no outro se declaração que verificar se o valor de ord é -1 , ou seja, se o usuário quer o array em ordem alfabética inversa. Se assim for, o seguinte código é executado:
myShopping.sort (); 
myShopping.reverse (); 
document.write (myShopping.join ("<br>"));
Aqui, nós classificar a matriz antes de inverter a sua ordem. Mais uma vez a matriz é exibida para o usuário usando o join () método.
Finalmente, se ord não tem nem o valor do 1 nem o valor -1 , nós dizer ao usuário que sua entrada não era válido.
document.write ("Isso não é uma entrada válida");
Obtendo valores de data
É tudo muito bom ter armazenado uma data, mas como podemos obter as informações de novo? Bem, nós apenas usar os get métodos. Estes estão resumidos na tabela a seguir.
	Método
	Retorna
	getDate ()
	O dia do mês.
	getDay ()
	O dia da semana como um número inteiro, com o domingo como 0, segunda-feira, 1, e assim por diante.
	getMonth ()
	O mês como um número inteiro, com janeiro como 0, Fevereiro como 1, e assim por diante.
	getFullYear ()
	O ano como um número de quatro dígitos.
	toDateString ()
	Retorna a data integral com base no fuso horário atual como uma string legível. Por exemplo, "Qua 31 de dezembro de 2003". Note que este é disponível apenas no IE 5.5 + e Netscape 6 +.
Por exemplo, se queremos chegar o mês em ourDateObj , podemos simplesmente escrever
theMonth myDateObject.getMonth = ();
Todos os métodos de trabalho de uma forma muito semelhante, e todos os valores retornados são baseadas no horário local, ou seja, locais para a máquina o código está sendo executado. Também é possível usar o Tempo Universal, anteriormente conhecido como GMT, mas vamos salvar a olhar para isso até o capítulo 9 .
Note que o getFullYear () método está disponível apenas no IE 4 + e + 4,06 NN.
Obtendo Valores de Tempo
Recuperar os dados de tempo individuais funciona como os get métodos para valores de data. Os métodos que usamos aqui são
getHours ()
getMinutes ()
getSeconds ()
getMilliseconds ()
toTimeString ()
Estes métodos retornam, respectivamente, as horas, minutos, segundos, milissegundos e em tempo integral do especificado Data objeto, onde o tempo é baseada no relógio de 24 horas: 0 para a meia-noite e 23 para 23:00 O último método é semelhante aotoDateString () método em que ele retorna uma seqüência de fácil leitura, só que neste caso, ele contém o tempo (por exemplo, "13:03:51 UTC").
Note que os getMilliseconds () método está disponível apenas no IE 4 + e NN 4,06 + navegadores.
Experimente - Escrevendo o Tempo atual em uma página da Web
Vejamos um exemplo que grava o tempo atual para a página.
<html> 
<body> 
<script language="JavaScript" type="text/javascript"> 
    
var saudação; 
    
nowDate var = new Date (); 
var nowHour = nowDate.getHours (); 
var nowMinute = nowDate.getMinutes (); 
var nowSecond nowDate.getSeconds = (); 
    
if (nowMinute <10) 
{ 
   nowMinute = "0" + nowMinute; 
} 
    
if (nowSecond <10) 
{ 
   nowSecond = "0" nowSecond +; 
} 
    
if (nowHour <12) 
{ 
   saudação = "Bom dia"; 
} 
else if (nowHour <17) 
{ 
   saudacao = "Boa Tarde"; 
} 
mais 
{ 
   saudacao = "Boa Noite"; 
} 
    
document.write ("<h4>" saudação + + "e bem vindo ao meu site </ h4> ") 
document.write ("De acordo com o relógio o tempo é"); 
    
document.write (nowHour + ":" + nowMinute + ":" + nowSecond); 
    
</ script> 
</ body> 
</ html>
Definindo uma classe
Vamos começar criando uma classe para a reserva de um cliente. Nossa classe será chamado CustomerBooking classe. A primeira coisa que precisamos fazer é criar o construtor da classe.
O construtor para a nossa classe é mostrada aqui:
CustomerBooking função (bookingId, customerName, cinema, showDate) 
{ 
  this.customerName = customerName; 
  this.bookingId = bookingId; 
  this.showDate = showDate; 
  this.film filme =; 
}
Seu primeiro pensamento pode ser que o que temos aqui é simplesmente uma função, e você estaria certo. Não é até que começar a definir os CustomerBooking propriedades e métodos de classe que se torna uma classe. Isto está em contraste com algumas linguagens de programação, que têm uma forma mais formal de definição de classes.
Ao olhar para o código, a coisa importante a notar é que o nome da função de construtor deve coincidir com o da classe estamos definindo-neste caso, o CustomerBooking classe. Dessa forma, quando uma nova instância de nossa classe como um objeto (chamado de uma instância de objeto ) é criado, essa função será chamada automaticamente. Note que temos quatro parâmetros para a nossa função de construtor, e estes são usados ​​dentro da própria classe. No entanto, note que usamos a esta palavra-chave.Por exemplo
this.customerName = customerName;
Dentro de uma função de construtor ou dentro de um método de classe, a esta palavra-chave irá se referir a essa instância objeto de nossa classe. Aqui nos referimos ao customerName propriedade deste objeto de classe, e configurá-lo para igualar ocustomerName parâmetro. Se você já usou outras linguagens de programação orientada a objeto, você pode se perguntar onde nós definimos esta customerName propriedade. A resposta é que não o fez; simplesmente atribuindo uma propriedade um valor, JavaScript cria para nós. Não há nenhuma verificação de que a propriedade existe; JavaScript cria-la como ela precisa. O mesmo é verdade se usarmos o objeto com uma propriedade nunca mencionou em nossa definição de classe. Tudo isso criação propriedade livre pode parecer grande, mas tem desvantagens, sendo a principal delas que se escreve errado acidentalmente um nome de propriedade, JavaScript não vai nos dizer, ele vai apenas criar uma nova propriedade com o nome escrito errado, algo que pode tornam difícil rastrear bugs. Uma maneira de contornar este problema é a criação de métodos que obter um valor de propriedade e nos permite definir o valor de uma propriedade. Agora, isso pode soar como um trabalho árduo, mas pode reduzir erros ou pelo menos torná-los mais fáceis de detectar. Vamos criar uma propriedade poucas obter / definir métodos para a nossa CustomerBooking classe.
CustomerBooking.prototype.getCustomerName = function () 
{ 
this.customerNameretorno; 
} 
    
CustomerBooking.prototype.setCustomerName = function (customerName) 
{ 
this.customerName = customerName; 
} 
    
CustomerBooking.prototype.getShowDate = function () 
{ 
this.showDate retorno; 
} 
    
CustomerBooking.prototype.setShowDate = function (showDate) 
{ 
this.showDate = showDate; 
} 
    
CustomerBooking.prototype.getFilm = function () 
{ 
retorno this.film; 
} 
    
CustomerBooking.prototype.setFilm = função (filme) 
{ 
this.film = filme ; 
} 
    
CustomerBooking.prototype.getBookingId = function () 
{ 
retorno this.bookingId; 
} 
    
CustomerBooking.prototype.setBookingId = function (bookingId) 
{ 
this.bookingId = bookingId; 
}
Agora temos definido um conjunto e obter método para cada uma de nossas classes de quatro propriedades, bookingId , filme , customerName , e showDate . Vamos ver como é que criou um dos métodos, o getCustomerName () método.
CustomerBooking.prototype.getCustomerName = function () 
{ 
  this.customerName retorno; 
}
A primeira coisa que notamos é que é uma forma muito estranha de definir uma função. À esquerda, defina a propriedade da classe protótipo getCustomerName para igualar uma função, que, então, definir imediatamente depois. Na verdade, JavaScript fornece a maioria dos objetos com uma propriedade de protótipo, que permite que novas propriedades e métodos a serem criados. Assim, sempre que queremos criar um método para a nossa classe, nós simplesmente escrever
className . protótipo. methodName = função ( lista de parâmetros de método ) 
{ 
   / code método / 
}
Nós criamos nossa classe, mas como é que vamos agora criar novos objetos com base nessa classe? Bem, nós olhamos para isso na próxima seção .
Criação e uso de instâncias de objetos de classes
Nós criar instâncias de nossas aulas, da mesma forma que criamos instâncias de classes built-in JavaScript: usando a nova palavra-chave. Então, para criar uma nova instância do nosso CustomerBooking aula, ia escrever
var firstBooking = new 
CustomerBooking (1234, "Robert Smith", "Touro Indomável", "25 de julho de 2004 18:20"); 
    
secondBooking var = new 
CustomerBooking (1244, "Arnold Palmer", "Toy Story", "27 de julho de 2004 20:15 ");
Aqui, como com uma corda objeto, criámos dois novos objetos e armazenados em variáveis, firstBooking e secondBooking , mas desta vez é um novo objeto com base em nossa classe.
Vamos chamar a getCustomerName () método de cada um dos dois objetos e escrever os resultados para a página.
document.write ("nome da primeira pessoa reserva é" + 
                firstBooking.getCustomerName () + "<br>"); 
document.write ("nome da pessoa reserva 2 é" + 
                secondBooking.getCustomerName ());
E vamos ver
Nome primeira pessoa reserva é Robert Smith
O nome da pessoa de reserva segundo é Arnold Palmer
escrito na página de informações contidas em nossos objetos de classe. Agora vamos colocar isso junto em uma página.
<html> 
<body> 
    
<script language="JavaScript" type="text/javascript"> 
    
/ CustomerBooking / classe 
    
CustomerBooking função (bookingId, customerName, cinema, showDate) 
{ 
  this.customerName = customerName; 
  this.bookingId = bookingId; 
  esta . showDate = showDate; 
  this.film filme =; 
} 
    
CustomerBooking.prototype.getCustomerName = function () 
{ 
this.customerName retorno; 
} 
    
CustomerBooking.prototype.setCustomerName = function (customerName) 
{ 
; this.customerName = customerName 
} 
    
CustomerBooking.prototype. getShowDate = function () 
{ 
this.showDate retorno; 
} 
    
CustomerBooking.prototype.setShowDate = function (showDate) 
{ 
this.showDate = showDate; 
} 
    
CustomerBooking.prototype.getFilm = function () 
{ 
retorno this.film; 
} 
    
CustomerBooking.prototype. setFilm = função (filme) 
{ 
this.film filme =; 
} 
    
CustomerBooking.prototype.getBookingId = function () 
{ 
retorno this.bookingId; 
} 
    
CustomerBooking.prototype.setBookingId = function (bookingId) 
{ 
this.bookingId = bookingId; 
} 
    
var firstBooking = CustomerBooking novo (1234, 
                        "Robert Smith", "Touro Indomável", "25 de julho de 2004 18:20"); 
var secondBooking = CustomerBooking novo (1244, 
                        "Arnold Palmer", "Toy Story", "Julho 27, 2004 20: 15 "); 
document.write ("primeira reserva nome das pessoas é" + 
                firstBooking.getCustomerName () + "<br>"); 
document.write ("segunda reserva nome das pessoas é" + 
                secondBooking.getCustomerName ()); 
    
</ script> 
    
</ body> 
</ html>
No topo de cada página é nossa <script> tag, dentro do qual é o código que define a nossa classe. Devemos incluir código definição de classe em cada página que usa a nossa classe para criar objetos. Por conveniência, pode, portanto, decidir colocar nossas definições de classe em um arquivo separado e importar esse arquivo para cada página que usa a classe. Podemos fazer isso usando o <script> marca, mas em vez de colocar o código dentro das tags de abertura e fechamento, usamos a tag script src atributo para apontar para o arquivo que contém o JavaScript. Por exemplo, se criar um arquivo chamado MyCinemaBookingClasses.js e colocar o nosso código da classe lá, podemos importá-lo para uma página como mostrado aqui:
<script language="JavaScript" src="MyCinemaBookingClasses.js"> </ script>
Os src pontos de atributos para a URL de nossa classe, que neste caso assume que a classe . js arquivo está no mesmo diretório que a nossa página.
Eventos do Mouse
	Propriedade
	Descrição
	DOM
	onclick
	O evento ocorre quando o usuário clica em um elemento
	2
	ondblclick
	O evento ocorre quando o usuário clica duas vezes sobre um elemento
	2
	onmousedown
	O evento ocorre quando o usuário pressiona um botão do mouse sobre um elemento
	2
	onmousemove
	O evento ocorre quando o ponteiro se move enquanto está sobre um elemento
	2
	onmouseover
	O evento ocorre quando o ponteiro é movido para um elemento
	2
	onmouseout
	O evento ocorre quando o usuário move o ponteiro do mouse para fora de um elemento
	2
	onmouseup
	O evento ocorre quando o usuário libera um botão do mouse sobre um elemento
	2
Eventos do Teclado
	Atributo
	Descrição
	DOM
	onkeydown
	O evento ocorre quando o utilizador pressiona uma tecla
	2
	onkeypress
	O evento ocorre quando o usuário pressiona uma tecla
	2
	onkeyup
	O evento ocorre quando o usuário solta uma tecla
	2
Quadro / Objeto Eventos
	Atributo
	Descrição
	DOM
	OnAbort
	O evento ocorre quando uma imagem é interrompida antes de carregar completamente carregado (por <object>)
	2
	onerror
	O evento ocorre quando uma imagem não carrega corretamente (por <object> <body> e <frameset>)
	 
	onload
	O evento ocorre quando um documento, conjunto de quadros ou <object> foi carregado
	2
	onresize
	O evento ocorre quando uma exibição do documento é redimensionado
	2
	OnScroll
	O evento ocorre quando uma exibição do documento é rolada
	2
	onunload
	O evento ocorre uma vez que uma página tenha descarregado (para <body> e <frameset>)
	2
Eventos de formulário
	Atributo
	Descrição
	DOM
	onblur
	O evento ocorre quando um elemento de formulário perde o foco
	2
	onchange
	O evento ocorre quando o conteúdo de um elemento de formulário, a seleção, ou o estado verificado mudaram (para <input>, <select>, e <textarea>)
	2
	onfocus
	O evento ocorre quando um elemento recebe foco (para <label>, <input>, <select>, textarea>, e <button>)
	2
	onreset
	O evento ocorre quando um formulário é reiniciado
	2
	onSelect
	O evento ocorre quando um usuário seleciona um texto (para <input> e <textarea>)
	2
	onSubmit
	O evento ocorre quando um formulário é enviado
	2
Objeto de evento
Constantes
	Constante
	Descrição
	DOM
	CAPTURING_PHASE
	A fase de evento corrente é a fase de captura (3)
	1
	AT_TARGET
	O evento é correntena fase de destino, isto é, está a ser avaliado para o alvo evento (1)
	2
	BUBBLING_PHASE
	A fase acontecimento actual é a fase borbulhante (2)
	3
Propriedades
	Propriedade
	Descrição
	DOM
	bolhas
	Retorna se ou não de um evento é um evento bolha
	2
	cancelable
	Retorna se ou não de um evento pode ter sua ação padrão impedido
	2
	currentTarget
	Retorna o elemento cujo evento ouvintes disparou o evento
	2
	eventPhase
	Retorna que fase do fluxo de eventos está sendo avaliada
	2
	alvo
	Retorna o elemento que desencadeou o evento
	2
	timeStamp
	Retorna o tempo (em milissegundos relativos à época) em que o evento foi criado
	2
	tipo
	Retorna o nome do evento
	2
Métodos
	Método
	Descrição
	DOM
	initEvent ()
	Especifica o tipo de evento, seja ou não o evento pode refletir, ou não ação padrão do evento pode ser evitado
	2
	preventDefault ()
	Para cancelar o evento se é cancelável, o que significa que qualquer ação padrão normalmente tomadas pela implementação, como resultado do evento não irá ocorrer
	2
	stopPropagation ()
	Para evitar a propagação de um evento durante o fluxo de eventos
	2
Objeto EventTarget
Métodos
	Método
	Descrição
	DOM
	addEventListener ()
	Permite o registo de ouvintes de evento sobre o destino do evento (IE8 = attachEvent ())
	2
	dispatchEvent ()
	Permite enviar o evento para os ouvintes de eventos subscritas (IE8 = fireEvent ())
	2
	removeEventListener ()
	Permite a remoção de ouvintes de evento sobre o destino do evento (IE8 = detachEvent ())
	2
Objeto EventListener
Métodos
	Método
	Descrição
	DOM
	handleEvent ()
	Chamado sempre que ocorre um evento do tipo de evento para o qual a interface EventListener foi registrado
	2
Objeto DocumentEvent
Métodos
	Método
	Descrição
	DOM
	createEvent ()
	 
	2
MouseEvent / KeyboardEvent objeto
Propriedades
	Propriedade
	Descrição
	DOM
	altKey
	Retorna se ou não a tecla "Alt" foi pressionado quando um evento foi desencadeada
	2
	botão
	Retorna qual botão do mouse foi clicado quando um evento foi desencadeada
	2
	clientX
	Retorna a coordenada horizontal do ponteiro do mouse, relativa à janela atual, quando um evento foi desencadeada
	2
	clientY
	Retorna a coordenada vertical do ponteiro do mouse, relativa à janela atual, quando um evento foi desencadeada
	2
	ctrlKey
	Retorna se ou não a tecla "Ctrl" foi pressionado quando um evento foi desencadeada
	2
	KeyIdentifier
	Retorna o identificador de uma chave
	3
	keyLocation
	Retorna a localização da chave no conselho
	3
	metaKey
	Retorna se ou não a "meta" tecla foi pressionada quando um evento foi desencadeada
	2
	relatedTarget
	Retorna o elemento relacionado com o elemento que desencadeou o evento
	2
	screenX
	Retorna a coordenada horizontal do ponteiro do mouse, em relação à tela, quando um evento foi desencadeada
	2
	screenY
	Retorna a coordenada vertical do ponteiro do mouse, em relação à tela, quando um evento foi desencadeada
	2
	shiftKey
	Retorna se ou não a tecla "Shift" foi pressionado quando um evento foi desencadeada
	2
Métodos
	Método
	Descrição
	W3C
	initMouseEvent ()
	Inicializa o valor de um objeto MouseEvent
	2
	initKeyboardEvent ()
	Inicializa o valor de um objeto KeyboardEvent
	3