Onde o objeto data js é gerado. Como posso acessar e processar objetos aninhados, arrays ou JSON? O que fazer se a “profundidade” da estrutura de dados for desconhecida para mim
Existem três tipos de objetos em JavaScript: objetos integrados, objetos de navegador e objetos que o próprio programador cria (Figura 2.1).
Arroz. 2.1. Objetos em JavaScript
Cada um desses tipos tem sua finalidade e características próprias.
Objetos integradosAbaixo listamos objetos integrados cujas propriedades e métodos estão disponíveis em scripts JavaScript sem primeiro definir esses objetos:
Aqui, * denota objetos internos definidos no Microsoft JScript versão 3.0. Esta versão é implementada no navegador Microsoft Internet Explorer versão 4.0.
Os objetos integrados são muito convenientes para realizar várias operações com strings, datas de calendário, matrizes, números e assim por diante. Eles liberam o programador de realizar diversas operações rotineiras, como conversão de strings ou cálculo de funções matemáticas.
Como trabalhar com objetos integrados?
Simples o suficiente. O programa cria instâncias de objetos e então acessa as propriedades e métodos dos objetos.
Como exemplo prático, considere um documento HTML que exibe a data e hora atuais. O texto fonte deste documento pode ser encontrado na Listagem 2.1.
Listagem 2.1. Arquivo capítulo2/data/data.html
Mostrar data e hora Mostrar data e horaAqui, o script JavaScript cria um objeto Data usando a palavra-chave new, familiar a todos os fãs de C++, e o construtor Date sem parâmetros:
var dt; dt = nova Data();O objeto Data criado desta forma é inicializado com a data local atual do usuário (não com o servidor Web do qual o documento HTML correspondente foi baixado).
A linha a seguir gera uma string de texto de data:
szDate = "Data: " + dt.getDate() + "." + dt.getMonth() + "." +dt.getAno();O valor da data do calendário, número do mês e número do ano é obtido aqui usando os métodos getDate, getMonth e getYear, respectivamente. Esses métodos são chamados em um objeto dt contendo a data atual.
A sequência de texto da data é enviada para o documento HTML usando o método write definido no objeto do documento:
documento.write(szDate);Já usamos esse método nos cenários de exemplo dados no primeiro capítulo do nosso livro.
Observe que o objeto Date também contém informações sobre a hora atual. Essas informações são recuperadas para exibição usando os métodos getHours, getMinutes e getSeconds (horas, minutos e segundos, respectivamente):
document.write("Hora: " + dt.getHours() + ":" + dt.getMinutes() + ":" + dt.getSeconds());A aparência de um documento HTML quando visualizado na janela do navegador Microsoft Internet Explorer versão 4.0 é mostrada na Fig. 2.2.
Arroz. 2.2. Ver data e hora local
Demonstraremos o uso de outros objetos embutidos mais tarde, à medida que estudarmos o material.
Objetos do navegadorDa perspectiva do JavaScript, o navegador parece ser uma coleção de objetos organizada hierarquicamente. Ao acessar as propriedades e métodos desses objetos, você pode realizar diversas operações na janela do navegador, no documento HTML carregado nesta janela, bem como em objetos individuais colocados no documento HTML. Por exemplo, você pode criar novas janelas do navegador carregando documentos HTML nelas, gerar dinamicamente o texto de um documento HTML, acessar campos de formulário definidos em um documento HTML e assim por diante.
Os objetos do navegador são a interface através da qual o JavaScript interage com o usuário e o documento HTML carregado na janela do navegador, bem como com o próprio navegador. Em JavaScript, você não pode criar novas classes com base nas classes correspondentes a esses objetos, mas as propriedades e métodos dos objetos do navegador estão disponíveis para você.
Hierarquia de objetos do navegadorA hierarquia dos objetos do navegador é mostrada esquematicamente na Fig. 2.2.
Arroz. 2.2. Hierarquia de objetos do navegador
O objeto window está na raiz da hierarquia. Quando um documento HTML é carregado em uma janela do navegador, outros objetos são criados dentro desse objeto – documento, pai, quadro, local e topo.
Se um documento HTML com quadros for carregado em uma janela do navegador, uma janela separada será criada para cada quadro e essa janela será criada como um objeto de janela.
O objeto de documento contém outros objetos, cuja composição é completamente determinada pelo documento HTML carregado na janela do navegador. Podem ser formulários, links para outros documentos HTML ou links locais dentro do mesmo documento, objetos que definem a URL do documento e assim por diante.
Se o documento contiver formulários, eles também serão representados como um conjunto hierárquico de objetos. Um objeto de formulário pode conter objetos como botões, opções e campos para inserir informações de texto.
Ao acessar as propriedades dos objetos listados acima, um script JavaScript pode determinar diversas características de um documento HTML, como o título. Tem acesso a todos os links colocados no documento, bem como ao conteúdo dos campos do formulário definidos no documento HTML.
Eventos relacionados a objetosVamos fazer mais uma observação muito importante em relação aos objetos do navegador.
Cada objeto está associado a um conjunto específico de eventos, cujo processamento é possível em um script JavaScript.
Por exemplo, os eventos onLoad e onUnload estão associados ao objeto window. O primeiro desses eventos ocorre quando o navegador termina de carregar a janela e todos os quadros dentro dela (se esses quadros estiverem definidos na janela). O segundo evento ocorre quando o usuário finaliza o documento fechando a janela do navegador ou alternando para outro documento.
O script JavaScript poderia, por exemplo, exibir uma mensagem de boas-vindas ao usuário ou solicitar informações adicionais ao manipular o evento onLoad. Quando uma janela é encerrada (quando o evento onUnload é gerado), o script pode liberar quaisquer recursos associados a essa janela ou exibir uma mensagem na tela do monitor.
Os eventos também estão associados a outros objetos do navegador. Falaremos sobre eles ao descrever esses objetos.
Objetos baseados em classes criadas pelo programadorNumerosos livros para iniciantes na linguagem de programação C++ sugerem imaginar uma classe como uma estrutura de dados, onde, além dos campos comuns, são definidos métodos de função para trabalhar com esses dados. Portanto, na linguagem JavaScript, o método exatamente oposto é usado para criar suas próprias classes.
Uma classe JavaScript é criada como uma função que define propriedades que atuam como dados. Quanto aos métodos, eles também são definidos como funções, mas separadamente.
Vamos dar um exemplo específico.
Digamos que precisamos criar uma classe para armazenar uma entrada imaginária no banco de dados telefônico. Nesta classe precisamos fornecer propriedades para armazenar nome, sobrenome, número de telefone, endereço, bem como um atributo especial para registros protegidos contra acesso não autorizado. Além disso, é necessário desenvolver métodos projetados para exibir o conteúdo de um objeto em forma tabular, como mostrado na Fig. 2.3.
Arroz. 2.3. Visualizando o conteúdo das postagens
Primeiro de tudo, vamos criar nossa própria classe chamada myRecord. Pode não ter nenhum método ainda, iremos adicioná-los mais tarde.
A classe necessária é criada da seguinte forma:
função meuRegistro(nome, família, telefone, endereço) ( this.name = nome; this.family = family; this.phone = phone; this.address = endereço; this.secure = false; )É fácil perceber que a descrição da nossa classe nada mais é do que uma função construtora. Os parâmetros do construtor destinam-se a definir as propriedades de um objeto quando ele é criado com base em uma classe.
As propriedades são definidas por referências simples aos seus nomes, seguidas pela palavra-chave this. Esta palavra-chave aqui indica que a instrução faz referência às propriedades do objeto para o qual o construtor é chamado, ou seja, o objeto que está sendo criado.
Observe que nosso construtor inicializa uma propriedade chamada secure como false. O parâmetro correspondente não é fornecido no construtor, o que é bastante aceitável.
Como usar uma classe específica?
Com base nesta classe, você pode criar um número arbitrário de objetos. Abaixo fornecemos um fragmento de um script JavaScript, onde dois objetos rec1 e rec2 são criados com base na classe myRecord:
var rec1; var rec2; rec1 = novo meuRegistro("Ivan", "Ivanov", "000-322-223", "Rua Malaya Bolshaya, 225, apto. 226"); rec2 = novo meuRecord("Petr", "Petrov", "001-223-3334", "Rua Bolshaya Malaya, 552, apt. 662"); rec2.secure = verdadeiro;Os objetos são criados usando o operador new, familiar para quem escreveu programas em C++ e Java. Aqui passamos parâmetros ao construtor para inicializar as propriedades dos objetos criados.
Já a propriedade denominada secure, no objeto rec2 ela é inicializada após a criação deste. O valor true é gravado nele. Não alteramos a propriedade segura do objeto rec1, portanto ele é armazenado como falso.
Agora nossa tarefa é adicionar novos métodos chamados printTableHead, printTableEnd e printRecord à classe que definimos. Os dois primeiros desses métodos geram, respectivamente, o fragmento inicial e final da tabela em um documento HTML, e o terceiro - linhas da tabela refletindo o conteúdo dos registros.
De forma abreviada, a nova definição da classe myRecord é apresentada abaixo:
função printTableHead() (. . . ) função printTableEnd() ( . . . ) função printRecord() ( . . . ) função myRecord (nome, família, telefone, endereço) ( this.name = nome; this.family = family ; this.phone = telefone; this.address = endereço; this.secure = false; this.printRecord = printRecord; this.printTableHead = printTableHead; this.printTableEnd = printTableEnd; )Aqui, antes da definição do construtor, colocamos definições para os métodos de função da nossa classe. Além disso, a definição de novas propriedades foi adicionada ao construtor:
this.printRecord = printRecord; this.printTableHead = printTableHead; this.printTableEnd = printTableEnd;Uma vez definida a classe desta forma, você pode criar objetos e chamar métodos específicos:
rec1.printTableHead(); rec1.printRecord(); rec1.printTableEnd(); rec2.printTableHead(); rec2.printRecord(); rec2.printTableEnd();Voltando ao documento mostrado acima na Fig. 2.3, apresentamos seu texto fonte completo (Listagem 2.2).
Listagem 2.2. Arquivo capítulo2/NewObject/NewObject.html
Ver entradas Ver entradasColocamos a definição da nova classe myRecord e seus métodos na área do cabeçalho do documento HTML, como é habitual.
O método printTableHead imprime o cabeçalho da tabela no documento HTML. A aparência deste cabeçalho depende do conteúdo das propriedades do objeto.
Primeiro, o método printTableHead verifica a propriedade segura, obtendo seu valor usando a palavra-chave this:
var szSec = ""; if(this.secure) szSec = "(Seguro)"; senão szSec = " (Inseguro)".fontcolor("vermelho");Aqui esta palavra-chave significa que é necessário usar a propriedade do objeto para o qual o método printTableHead foi chamado.
Se o conteúdo da propriedade secure for verdadeiro, a string "(Secure)" será gravada na variável de texto szSec. Se for falso, a string "(Unsecure)" será gravada nesta variável e a cor da string será definida como vermelho.
Como em JavaScript todas as strings de texto (incluindo literais) são objetos da classe String integrada, você pode chamar métodos definidos nesta classe para elas. Em particular, o método fontcolor permite definir a cor de uma linha, que foi a que usamos.
Em seguida, o método printTableHead envia a instrução para o documento HTML
"); }
O último método definido em nossa classe é chamado printRecord. Ele imprime o conteúdo das primeiras quatro propriedades do objeto como uma linha da tabela definida no documento HTML pela função printTableHead que acabamos de descrever.
Observe que o conteúdo das propriedades do objeto é impresso em itálico, para o qual chamamos o método itálico:
documento.write("Já descrevemos a definição da classe myRecord acima.
Vamos agora passar para a segunda parte do nosso script, localizada no corpo do documento HTML.
Aqui criamos dois objetos rec1 e rec2 com base na classe myRecord e, em seguida, definimos a propriedade secure do objeto rec2 como true.
Como você pode ver, usar nossa própria classe simplificou bastante a tarefa de inicializar e exibir o conteúdo dos registros em nosso banco de dados telefônico imaginário. Na verdade, reduzimos esta tarefa à chamada de vários métodos definidos antecipadamente em nossa classe.
Neste capítulo:
JavaScript possui vários objetos predefinidos que você pode usar ao escrever scripts. Isso inclui objetos como Array, Boolean, Date, Function, Math, Number, RegExp e String, bem como o objeto primitivo Object. Nas versões anteriores da linguagem, objetos de documento (janela, documento) também eram incluídos nela, mas agora estão excluídos do núcleo da linguagem JavaScript e pertencem à definição do modelo de objeto de documento (DOM), que será discutido mais tarde. Porém, algumas propriedades desses objetos (documento e janela) já nos são familiares.
No entanto, vamos voltar aos objetos JavaScript integrados no conceito moderno. Todos os objetos integrados, exceto Math e Date, possuem propriedades como construtor e protótipo. Eles são usados para adicionar novas propriedades a objetos existentes e são descritos no contexto de um objeto Function.
ObjetoTodos os objetos JavaScript são descendentes do objeto Object. Portanto, todas as propriedades e métodos deste objeto também estão disponíveis para qualquer outro objeto JavaScript.
Existem apenas 2 propriedades definidas para o objeto Object - construtor e protótipo. A propriedade construtora define uma função que cria um protótipo de um objeto - a função inteira, não apenas seu nome. Em outras palavras, considere a opção quando algum objeto de teste for definido e uma instância desse objeto tmp for criada:
Função teste(versão) ( this.versão = versão; ) tmp = novo teste(1);
Neste caso, usando a propriedade construtor, você pode ver o código fonte do objeto de teste (Fig. 4.6):
Alerta(tmp.construtor);
Arroz. 4.6.
Esta propriedade, entretanto, tem uma limitação: ela não pode imprimir o código de objetos JavaScript integrados: nesses casos, as informações de saída são limitadas ao nome da função protótipo e à string "".
Já a propriedade protótipo permite acessar a função protótipo do objeto atual. A utilização desta propriedade permite alterar as características do protótipo do objeto. Por exemplo, você pode adicionar uma nova propriedade para um objeto do tipo test usando a propriedade protótipo:
Test.prototype.comment = "Nova propriedade de comentário";
Agora todos os objetos do tipo test, incluindo a instância tmp já criada, terão a propriedade comment, que é fácil de verificar aplicando a seguinte verificação:
Alerta(tmp.comment);
Além disso, é possível modernizar objetos JavaScript integrados de maneira semelhante. Por exemplo, se precisarmos adicionar uma propriedade como uma descrição aos arrays, podemos fazer isso (apenas dentro do cenário atual, é claro!) referenciando o protótipo do objeto Array e adicionando a propriedade apropriada a ele:
Array.prototype.description = "";
Quanto aos métodos, há um pouco mais deles definidos para o objeto Object - até 5 deles. Estes são toSource, toString, watch, unwatch e valueOf, sua breve descrição é dada na Tabela 4.10.
Os métodos toString e valueOf se aplicam a quase todos os objetos JavaScript integrados e normalmente são chamados automaticamente pelo interpretador quando uma conversão é necessária. Quanto ao método toSource, na verdade ele apenas faz o trabalho para a propriedade do construtor.
Os demais métodos watch e unwatch, extensões proprietárias introduzidas no navegador Netscape 4 (agora também suportado pela Mozilla), destinam-se à depuração de scripts. Como a questão da depuração do programa não será considerada no âmbito desta publicação, não faz sentido descrever esses métodos. Mas, por precaução, você pode observar que o Sea Monkey (mas não o navegador Firefox) possui um depurador de script - JavaScript Debugger.
Objeto de matrizVariáveis de matriz contêm conjuntos ordenados de valores, representados como uma única variável por conveniência. Já encontramos arrays mais de uma vez (basta lembrar dos arrays de argumentos), agora é hora de entender todas as suas propriedades e sutilezas de aplicação.
Ao contrário de outras linguagens de programação, JavaScript não possui um tipo de dados array. Mas essa limitação é superada pelo fato de você poder usar um objeto array predefinido - Array. Para criar um objeto array, você pode usar uma das seguintes sintaxes:
ArrayName = novo Array(elemento1, elemento2, ... elementoN) ArrayName = novo Array(ArrayLength)
No primeiro caso, todos os componentes do array são listados, no segundo, o número de elementos é simplesmente indicado. Também é possível usar literais ao declarar um array:
Computadores = ["PC", "Mac", "Sol"];
Para preencher os elementos do array com valores, bem como para acessar os elementos do array em geral, você pode usar o índice do elemento. Deve-se levar em consideração que o índice dos elementos do array começa em zero:
Var cores = novo Array(3); cores = "Vermelho"; cores = "Azul"; cores = "Verde";
Muitas vezes é conveniente usar a capacidade fornecida pela linguagem JavaScript para preencher um array diretamente ao declará-lo:
Var cores = new Array("Vermelho","Azul","Verde");
Para descobrir o comprimento de um array (o número de elementos que compõem o array), você deve usar a propriedade length:
Var NumColors = cores.comprimento;
Além da propriedade length, o JavaScript também fornece diversas outras propriedades e métodos para trabalhar com arrays. Em particular, as propriedades do objeto Array, além do comprimento, incluem construtor e protótipo, que são universais para todos os objetos, bem como as propriedades de índice e entrada destinadas ao uso de arrays junto com expressões regulares.
Quanto aos métodos, além dos padrões toSource, toString e valueOf, os arrays são equipados com mais uma dúzia de métodos próprios, listados na Tabela 4.11.
| concat | Mescla dois arrays e retorna um novo |
| juntar | Concatena todos os elementos do array em uma string |
| pop | Remove o último elemento de um array e o retorna |
| empurrar | Adiciona um ou mais elementos ao final do array e retorna seu novo comprimento |
| reverter | Move os elementos de um array para que o primeiro seja o último e vice-versa |
| mudança | Remove o primeiro elemento de um array e o retorna |
| fatiar | Remove parte dos elementos do array e retorna um novo array |
| emendar | Adiciona e/ou remove um elemento de um array |
| organizar | Classifica os elementos do array em ordem alfabética |
| mudar de marcha | Adiciona um ou mais elementos ao início do array e retorna o novo comprimento do array (no MSIE 5.5 e 6, este método não retorna nada) |
Vejamos alguns métodos com mais detalhes. Então, usando o método concat você pode combinar 2 arrays em um:
Var a = new Array("A1", "A2"); var b = new Array("B1", "B2"); var ab = a.concat(b);
Aqui a variável ab se tornará um array contendo todos os 4 elementos dos dois arrays sendo colados. Se aplicarmos agora o método join a tal array, o resultado será uma string contendo todos os elementos deste array, separados por vírgulas:
Str = ab.join(); // obtém str = "A1,A2,B1,B2"
Quanto ao método pop, se o aplicarmos ao mesmo array, obteremos “B2” como resposta, e o array será reduzido aos três primeiros valores. O método shift, por outro lado, retorna o primeiro elemento (no nosso caso, “A1”) e faz o mesmo com o array, com a única diferença é que os demais elementos são deslocados para frente.
Para entender melhor como esses e outros métodos de array funcionam, considere o exemplo a seguir na Listagem 4.3.
Listagem 4.3. Trabalhando com matrizes
O mesmo exemplo pode ser visualizado no arquivo array.html, ao mesmo tempo você pode visualizar todos os resultados de seu trabalho no navegador (ver Fig. 4.7).
Arroz. 4.7. O resultado do uso do método splice: a matriz retornada e as alterações
Matrizes também podem ser multidimensionais, ou seja, um elemento de um array pode ser outro array. Neste caso, para acessar um elemento do array, utilize a seguinte sintaxe:
Array2D="Elemento 0,0" Array2D="Elemento 0,1" ... Array2D[N][N]="Elemento N,N"
Um exemplo de preenchimento e saída de um array bidimensional pode ser encontrado no arquivo arrays.html, e também há um exemplo interativo para quase todos os métodos de array.
Objeto booleanoUm objeto booleano é um wrapper para o tipo de dados de mesmo nome. Para definir um objeto do tipo Boolean, use a seguinte sintaxe:
BooleanObj = novo Booleano(valor)
Aqui o valor é uma expressão de inicialização que será convertida em verdadeiro ou falso, se necessário. Se você especificar um valor como 0, nulo, falso, NaN, indefinido ou uma string vazia, o resultado da inicialização de um objeto booleano será falso e, no caso de qualquer outro valor, o resultado será verdadeiro.
Os valores booleanos primitivos verdadeiro e falso não devem ser confundidos com os tipos de dados verdadeiro e falso de um objeto booleano. Por exemplo, se você declarar uma variável x e atribuir a ela o valor de um objeto booleano inicializado como falso, ela ainda será avaliada como verdadeira quando comparada:
X = novo Booleano(falso); // ao comparar if (x) obtemos verdadeiro
Ao mesmo tempo, se você simplesmente atribuir o tipo de dados primitivo falso a uma variável, ela receberá exatamente isso:
X = falso; // ao comparar if (x) obtemos falso
Quanto ao uso prático deste objeto, ele pode ser utilizado como função para converter valores de quaisquer outros tipos para booleanos:
UMA = 100; x = Booleano(a); // x será verdadeiro se (x) (...)
Mas, na verdade, é improvável que você faça isso, pois, se necessário, tais transformações são realizadas automaticamente pelo interpretador JavaScript - no exemplo acima, você poderia escrever imediatamente “if (a) ...”, e a transformação necessária neste caso será feito em qualquer caso.
Objeto de dataJavaScript não fornece um tipo de dados especial para trabalhar com datas; no entanto, como acontece com arrays, existe um objeto Data especial. Você pode usar qualquer um dos seguintes métodos para criar um objeto de data:
Nova Data() nova Data(Milissegundos) nova Data("Data_como_string")
No primeiro caso, é criado um objeto Date com a hora atual; no segundo, deve ser especificado o número de milissegundos que se passaram desde 1º de janeiro de 1970. Se a data for especificada como uma string, ela deverá estar no formato “28 de fevereiro de 2005”. Também é possível definir a data utilizando valores inteiros para ano, mês, dia, etc.:
Nova data (ano, mês, dia [, hora, minuto, segundo, milissegundo])
É claro que, neste caso, você pode evitar especificar segundos e milissegundos, especialmente porque milissegundos nem eram suportados em versões mais antigas de navegadores. Além disso, o JavaScript anterior à versão 1.3 não oferece suporte a datas anteriores a 1º de janeiro de 1970. Quanto ao formato dos valores indicados na linha, o ano é qualquer número de 4 dígitos (se você especificar um número de 2 dígitos, será adicionado 1900), o número do mês é de 0 ( Janeiro) a 11 (dezembro), e o dia é de 0 a 31. Assim, os valores de tempo também são limitados: para horas será um número inteiro de 0 a 23, para segundos e minutos - de 0 a 59, e para milissegundos - de 0 a 999. Assim, para especificar 9 de maio de 2005 como valor de um objeto do tipo Data, você deve escrever:
Var qualquer dia = nova Data(2005, 5, 9);
E se você precisar obter o valor atual de data e hora, nenhum parâmetro será necessário:
Var agora = nova Data();
Desde o JavaScript 1.3, o intervalo de datas pode ser de até 100 milhões de dias antes e depois de 01/01/1970 (são quase 550 mil anos no total!). Na mesma versão, existia a obrigatoriedade de indicar sempre o ano no formato de quatro dígitos, para evitar erros associados à mudança de séculos.
Para trabalhar com o objeto Date, existem 2 propriedades - construtor e protótipo, além de diversos métodos que permitem selecionar a parte desejada da data (ano, mês, dia, hora), exibi-la em um formato ou outro, etc. Todos eles estão listados na tabela 4.12.
| getData() | Retorna o dia do mês na hora local |
| getDia() | Retorna o dia da semana no horário local |
| getAnoFull() | Retorna o ano na hora local |
| getHoras() | Retorna a hora atual (horas) na hora local |
| getMilisegundos() | Retorna a hora atual (milissegundos) na hora local |
| getMinutos() | Retorna a hora atual (minutos) na hora local |
| getMês() | Retorna a hora atual (mês) na hora local |
| getSegundos() | Retorna a hora atual (segundos) na hora local |
| consiga tempo() | Retorna a hora atual como uma quantidade na hora local |
| getTimezoneOffset() | Retorna a diferença de horário em minutos em relação ao GMT na hora local |
| getUTCDate() | Retorna o dia do mês no horário universal |
| getUTCDay() | Retorna o dia da semana no horário universal |
| getUTCFullYear() | Retorna o ano no Tempo Universal |
| getUTCHhoras() | Retorna a hora atual (horas) no Tempo Universal |
| getUTCMilissegundos() | Retorna a hora atual (milissegundos) no Tempo Universal |
| getUTCMinutos() | Retorna a hora atual (minutos) no Tempo Universal |
| getUTCMês() | Retorna a hora atual (mês) no Horário Universal |
| getUTCSeconds() | Retorna a hora atual (segundos) no Tempo Universal |
| getAno() | Desatualizado. Retorna o ano no formato de hora universal abreviado (dois dígitos) |
| analisar(data_string) | Retorna o número de milissegundos decorridos desde 1º de janeiro de 1970 até o valor especificado no parâmetro, na hora local |
| definirData(dia) | Define o dia do mês na hora local |
| setFullYear(ano) | Define o ano na hora local |
| setHours(horas) | Define a hora (horas) na hora local |
| setMilliseconds (milissegundos) | Define a hora (milissegundos) na hora local |
| definirMinutos(minutos) | Define a hora (minutos) na hora local |
| setMês(mês) | Define a hora (mês) na hora local |
| setSeconds (segundos) | Define a hora (segundos) na hora local |
| setTime (milissegundos) | Define a hora em milissegundos para uma data específica na hora local |
| setUTCDate(dia) | Define o dia do mês no horário universal |
| setUTCFullYear (ano) | Define o ano no Tempo Universal |
| setUTCHhoras(horas) | Define a hora (horas) no Horário Universal |
| SetUTCMilliseconds(milissegundos) | Define a hora (milissegundos) na Hora Universal |
| setUTCMinutos (minutos) | Define a hora (minutos) no Tempo Universal |
| setUTCMês(mês) | Define a hora (mês) no horário universal |
| setUTCSeconds (segundos) | Define a hora (segundos) no Tempo Universal |
| definirAno(ano) | Desatualizado. Define o ano na hora local, um formato de dois dígitos é aceitável para o valor do ano |
| toGMTString() | Desatualizado. Converte uma data em uma string correspondente ao horário GMT |
| toLocaleString() | Retorna a data e a hora como uma string correspondente em formato às configurações do sistema local |
| toLocaleDateString() | Retorna a data como uma string correspondente ao formato das configurações do sistema local |
| toLocaleTimeString() | Retorna a hora como uma string formatada de acordo com as configurações do sistema local |
| paraFonte() | Retorna um objeto de data em representação literal |
| para sequenciar() | Retorna um objeto de data em representação de string |
| paraUTCString() | Converte uma data em uma string no formato de hora universal |
| UTC(parâmetros) | Retorna o número de milissegundos decorridos desde 1º de janeiro de 1970, no Tempo Universal. Os parâmetros indicam o ano, mês e dia, bem como (opcional) horas, minutos, segundos e milissegundos |
| valor de() | Retorna a data como um valor primitivo |
Apesar da abundância de métodos, trabalhar com o objeto Date é bastante simples: você só precisa entender o princípio de nomear os métodos:
- os métodos que começam com "set" servem para definir a data e a hora nos objetos Date;
- os métodos que começam com "get" servem para recuperar data, hora ou partes dela de objetos Date;
- métodos que começam com “to” retornam a data e a hora (ou partes delas) como valores de string;
- os métodos que contêm “UTC” diferem de outros semelhantes apenas porque funcionam com o formato de hora universal (ou seja, exibe o horário de Greenwich, levando em consideração o deslocamento em relação ao fuso horário atual).
Assim, resta adicionar para obter ou definir o nome da parte necessária da data ou hora para obter ou definir o parâmetro desejado, se necessário, também utilizando UTC. Bem, quando você precisar obter o resultado na forma “humana”, use os métodos to. Você também deve lembrar que para trabalhar com o ano você deve sempre usar apenas funções de formato completo (ou seja, getFullYear ou getUTCFullYear, e não getYear).
A representação em string de uma data em JavaScript tem o seguinte formato:
Dia da semana Mês Data Ano Horas:Minutos:Segundos GMT±Deslocamento
Para ver claramente a representação das datas e, ao mesmo tempo, considerar como funções como toString funcionam, vamos ver o que todas elas retornam como saída. Nesse caso, a primeira coisa que pode vir à mente ao visualizar o funcionamento de uma função específica é usar a saída de texto para um documento:
Document.writeln(DateObject.toString()); document.writeln(DateObject.toGMTString()); //etc
Mas, na verdade, como são muitas funções, seria bom escrever antecipadamente que tipo de ação foi realizada:
Document.writeln("DateObject.toString()" + DateObject.toString());
Agora vamos pensar novamente sobre quantas linhas realmente queremos gerar dessa maneira. Mesmo se você considerar o método de copiar e colar suportado por todos os editores de texto, isso não protegerá contra erros como este:
Document.writeln("DateObject.toLocaleString()" + DateObject.toString());
Mas, como diz o lema da IBM, as pessoas deveriam pensar e as máquinas deveriam funcionar. Então, vamos pensar em como fazer o computador funcionar, ao mesmo tempo que nos poupamos da necessidade de inserir bytes extras de código, para os quais recorremos à Listagem 4.4.
Listagem 4.4. Produzindo diferentes tipos de data e a função eval
Métodos de objeto de data
Em primeiro lugar, define a função printDate, que, de fato, exibe a data de uma forma ou de outra no documento. Mais precisamente, ele exibe a data no nosso caso, mas em princípio pode gerar qualquer coisa, desde que o argumento que aceita seja um trecho completo de código JavaScript. Nesse caso, o código é exibido primeiro como está (ou seja, a variável string é impressa em sua forma original) e, em seguida, o resultado da execução é exibido, para o qual a função eval é usada. Como resultado, tendo escrito tal função uma vez, você poderá consultá-la posteriormente em todo o documento, evitando a necessidade de inserir quase o mesmo texto duas vezes.
Seguindo a função de saída está a criação de um objeto do tipo Data, ao qual é atribuído o valor 2005, 3º mês (abril, já que janeiro é zero), 1º dia, 14 horas, 30 minutos, 45 segundos. A seguir, o documento é aberto para escrita e a função printDate é chamada sequencialmente para 6 métodos diferentes do objeto Date. O resultado deste script serão 6 linhas contendo pares de valores do método e o resultado de seu trabalho, separados por dois pontos (Fig. 4.8).
Arroz. 4.8. Produzindo a mesma data usando métodos diferentes
Ressalta-se que o método toSource, que exibe a data na representação interna do programa, é suportado apenas pelos navegadores Mozilla. Além disso, o formato de exibição de datas por todos os outros métodos também pode diferir ligeiramente em diferentes navegadores. Você pode carregar esse exemplo em vários programas de visualização e ver por si mesmo o que eles produzem (arquivo date.html).
Objeto de funçãoUm objeto Function predefinido define uma linha de código JavaScript que deve ser executada como uma função. Para declarar um objeto Function, use a seguinte sintaxe:
FunctionName = nova Função([argumento1, argumento2, ...argumentoN], FunctionBody)
Neste caso, o nome de qualquer variável ou propriedade de um objeto existente pode ser usado como nome da função. Também é possível especificar um objeto do tipo Function como o valor do manipulador de eventos do objeto. Digamos que se quisermos criar nosso próprio manipulador de eventos como “carregamento de documento completo” (document.onload), podemos escrever isto:
Document.onload = new Function([Argumento1, ...argumentoN], FunctionBody);
Os argumentos neste caso são parâmetros passados para a função, e o corpo da função é o código real que deve ser executado ao acessar este objeto de função. Por exemplo, você pode escrever esta versão de um objeto que será usado para elevar ao quadrado um número:
Var SquareObj = new Function("x", "return x*x");
Aqui SquareObj é o nome da variável, x é o argumento recebido e “return x*x” é o corpo da função. Preste atenção ao fato de que não apenas o corpo da função, mas também os argumentos que ela aceita estão entre aspas, e também que o nome do tipo de objeto, como é habitual em JavaScript, é escrito com letra maiúscula (Função) .
Usar variáveis criadas desta forma é semelhante a usar variáveis de qualquer outro tipo:
Var a = 5 + ObjQuadrado(2); // obtemos 9
Na verdade, um objeto do tipo Function sempre pode ser representado como uma função regular declarada usando a palavra-chave function. Assim, a mesma elevação à segunda potência pode ser descrita da seguinte forma:
Função SquareFunc(x) ( return x*x; )
Assim, você pode usar uma função declarada por tal método (neste caso, uma função em sua forma “pura”, e não um procedimento), de maneira semelhante:
Var a = 5 + SquareFunc(2); // também obtemos 9
Assim, atribuir um valor a uma variável como uma função usando um objeto Function é o mesmo que declarar a própria função. Mas, ao mesmo tempo, essas abordagens têm uma diferença: se SquareObj é uma variável cujo valor é uma referência a um objeto criado usando um objeto Function, então SquareFunc é o nome da função. Conseqüentemente, eles também se comportam de maneira diferente durante a execução do programa: para um objeto do tipo função, o interpretador avaliará todo o código da função toda vez que se deparar com uma variável (no nosso caso, SquareObj), e para funções declaradas da maneira usual, o o código é avaliado apenas no primeiro corredor Essa diferença pode não ser significativa se a função realizar um trabalho único, mas o uso de variáveis criadas a partir do objeto Function reduz significativamente a eficiência do programa em loops. Portanto, na prática, o uso de objetos de função é muito raro, mas, mesmo assim, às vezes eles podem ser convenientes, por exemplo, para adicionar métodos a outros objetos.
O objeto Function possui o construtor e o protótipo de propriedades JavaScript padrão, bem como um número próprio:
Argumentos – um array correspondente aos parâmetros da função argumentos.callee – corresponde ao corpo da função. argumentos.caller (obsoleto) – indica o nome da função a partir da qual o objeto foi chamado; argumentos.length – indica o número de parâmetros da função. length – indica o número de argumentos esperados pela função (e não o número recebido, como é o caso de argument.length);
ATENÇÃO
Todas as propriedades dos argumentos só podem ser vistas “de dentro” da função e, a partir do JavaScript 1.4, os argumentos não são mais uma propriedade do objeto Function, mas são uma variável local independente, implicitamente presente em qualquer função. Na verdade, para Function resta apenas 1 propriedade própria - comprimento.
Além das propriedades, o objeto Function possui vários métodos. Assim, o método apply permite aplicar um método de um objeto a outro, e o método call permite chamar um método de outro objeto no contexto do atual. Infelizmente, a implementação destes métodos na prática deixa claramente muito a desejar. Portanto, tudo o que resta é mencionar os métodos JavaScript padrão toString, toSource e valueOf, que também estão disponíveis para o objeto Function.
Objeto matemáticoMath é um objeto JavaScript integrado que possui constantes matemáticas básicas e funciona como métodos e propriedades. Por exemplo, a propriedade PI do objeto Math contém o valor de Pi (π), que é aproximadamente igual a 3,1416, e o método sin retorna o seno do número especificado.
Além do número π, o objeto Math possui as seguintes propriedades:
- E – base dos logaritmos naturais (aproximadamente 2,718)
- LN10 – logaritmo natural de 10 (aproximadamente 2,302)
- LN2 – logaritmo natural de 2 (aproximadamente 0,693)
- LOG10E – logaritmo decimal de E (aproximadamente 0,434)
- LOG2E – logaritmo binário de E (aproximadamente 1,442)
- SQRT1_2 – raiz quadrada de 0,5 (aproximadamente 0,707)
- SQRT2 – raiz quadrada de 2 (aproximadamente 1,414)
Como todas as propriedades do objeto Math são constantes predefinidas, a criação de outros objetos do tipo Math não só não é necessária, como também inaceitável, devendo ser sempre acessados da mesma forma, por exemplo:
Var Comprimento do Círculo = diâmetro * Math.PI;
Além das propriedades, o objeto Math também define métodos que correspondem a funções matemáticas básicas. Todos eles estão listados na tabela 4.13.
| abdômen (número) | Retorna o valor absoluto do argumento |
| atan2(y, x) | Retorna um número no intervalo de -? para?, representando o ângulo (em radianos) entre o eixo x e o ponto (x,y). Observe que o primeiro argumento é a coordenada Y |
| exp(número) | Retorna E elevado à potência especificada (logaritmo exponencial) |
| teto(número), piso(número) | Retorna o valor que é o inteiro maior (teto) ou menor (piso) mais próximo |
| min(número1, número2), max(número1, número2) | Retorna o número menor (mínimo) ou maior (máximo) dos dois argumentos que estão sendo comparados |
| sin(número),cos(número), tan(número),asin(número), acos(número),atan(número) | Retorne o resultado de funções trigonométricas padrão - seno, cosseno, tangente, arco seno, arco cosseno e arco tangente |
| pow(base, expoente) | Retorna a base à potência do expoente |
| aleatório() | Retorna um número pseudoaleatório entre 0 e 1 |
| número redondo) | Retorna o valor arredondado para o número inteiro mais próximo |
| quadrado(número) | Retorna a raiz quadrada de um número |
Assim como acontece com as propriedades, para usar os métodos de um objeto Math, você deve fazer referência ao próprio objeto em vez de cópias dele. Por exemplo, vamos escrever uma função que retornará o diâmetro com base na área do círculo:
Função CircleDiam (Quadrado) ( Raio = Math.sqrt (Quadrado / Math.PI) ; )
Para usá-lo na prática, você pode usar os métodos de prompt e alerta:
Var sq = prompt("Insira a área",1); var di = CircleDiam(sq); alert("Diâmetro do círculo: "+di);
O funcionamento destes e de outros métodos do objeto Math pode ser visto no arquivo math.html.
Objeto numéricoO objeto Number é uma representação de objetos de tipos numéricos simples. Possui propriedades especiais para constantes numéricas, como "número máximo", "não é um número" e "infinito". Para criar um novo objeto do tipo Number, use a seguinte sintaxe:
Novo Número (Valor)
Na prática, o uso mais comum do objeto Number é usar suas constantes para validar argumentos e rastrear erros em tempo de execução. Por exemplo, para verificar se o valor de uma variável é um número ou não, você pode usar este método:
Se (x!=Número.NaN);
Neste caso, a condição será verdadeira se a variável x contiver um número, pois é comparada com um valor especial - NaN, que significa “não é um número”. Além de NaN, você pode usar outros valores especiais - todos eles são propriedades do objeto Number:
- MAX_VALUE – número máximo possível
- MIN_VALUE – número mínimo possível
- NaN – não é um número
- NEGATIVE_INFINITY – “infinito negativo”, um valor especial retornado em caso de overflow
- POSITIVE_INFINITY – “infinito positivo”, um valor especial retornado em caso de overflow
Todas essas propriedades são constantes, portanto você não precisa criar um novo objeto Number para usá-las. Além das propriedades acima, as propriedades padrão construtor e protótipo também são definidas para Number
Além das propriedades, o objeto Number, é claro, também possui métodos. Além dos métodos toSource, toString e valueOf padrão, o JavaScript 1.5 introduziu três novos métodos nativos do objeto Number - toExponential, toFixed e toPrecision. Todos eles são projetados para converter números em strings com base em um formato ou outro. Assim, o método toExponential converte um número em uma string como um número com um expoente, o método toFixed o converte em uma string contendo um número com um número fixo de casas decimais, e o método toPrecision usa um desses métodos, dependendo do número e o número de casas decimais alocadas.
Vamos explorar esses métodos com mais detalhes, para os quais consideramos sua sintaxe:
Método ([Número de caracteres])
Obviamente, para todos os métodos, o número de dígitos indica o número de casas decimais, mas se para o método toFixed o valor padrão (ou seja, se nada for especificado) for 0, então para toExponential e toPrecision é o número de casas decimais necessárias para exibir o número inteiro. Para entender melhor o funcionamento e as diferenças de todos esses métodos, vamos analisá-los usando o exemplo da Listagem 4.5:
Listagem 4.5. Métodos toExponential, toFixed e toPrecision
Métodos do objeto Number
Aqui novamente (como na Listagem 4.4) usamos uma função que imprime primeiro a expressão e depois o resultado de sua interpretação, mas neste caso a chamamos de printNumber. Em seguida vem a declaração propriamente dita da variável sobre a qual os cálculos serão realizados. Neste caso, declaramos-no como um objeto do tipo Number, embora, na verdade, poderíamos ter nos limitado a uma simples declaração de variável (x = 12,45678). Finalmente, o documento é aberto para escrita e o valor da variável x é primeiro impresso nele sem nenhuma conversão explícita (mas já sabemos que na verdade o método toString() é aplicado automaticamente aqui), após o que todos os três métodos em questão são chamados primeiro sem especificar os caracteres numéricos e depois com os parâmetros 2 e 4. O resultado deste script será 10 linhas contendo pares “expressão: resultado do processamento” (Fig. 4.9).
Arroz. 4.9.
Concluindo, resta notar mais uma vez que esses métodos apareceram apenas no JavaScript 1.5 e, portanto, não funcionam nos navegadores Netscape 4, MSIE 4/5 e Opera até a versão 7.0. Ao mesmo tempo, eles fornecem mais flexibilidade na formatação de números na saída do que, digamos, o método round() do objeto Math.
01-08-2011 // Alguma dúvida, sugestão, comentário? Você pode
Na época do XHTML/HTML4, os desenvolvedores tinham apenas algumas opções que podiam usar para armazenar dados arbitrários relacionados ao DOM. Você poderia inventar seus próprios atributos, mas isso era arriscado - seu código não seria válido, os navegadores poderiam ignorar seus dados e isso poderia causar problemas se o nome correspondesse aos atributos HTML padrão.
Portanto, a maioria dos desenvolvedores manteve os atributos class ou rel, pois eram a única maneira razoável de armazenar linhas adicionais. Por exemplo, digamos que estamos criando um widget para exibir mensagens como uma linha do tempo de mensagens do Twitter. Idealmente, o JavaScript deve ser configurável sem a necessidade de reescrever o código, por isso definimos o ID do usuário no atributo de classe, assim:
Nosso código JavaScript procurará um elemento com ID msglist . Usando o script, procuraremos classes começando com user_ , e “bob” no nosso caso será o ID do usuário, e exibiremos todas as mensagens desse usuário.
Digamos que também gostaríamos de definir um número máximo de mensagens e ignorar mensagens com mais de seis meses (180 dias):
Nosso atributo de classe fica confuso muito rapidamente - é mais fácil cometer um erro e analisar strings em JavaScript se torna cada vez mais difícil.
Atributos de dados HTML5Felizmente, o HTML5 introduziu a capacidade de usar atributos personalizados. Você pode usar qualquer nome em letras minúsculas prefixado com data- , por exemplo:
Atributos de dados personalizados:
- são strings - você pode armazenar qualquer informação nelas que possa ser representada ou codificada como uma string, como JSON. A conversão de tipo deve ser feita usando JavaScript
- deve ser usado nos casos em que não há elementos ou atributos HTML5 adequados
- consulte apenas a página. Ao contrário dos microformatos, eles devem ser ignorados por sistemas externos, como motores de busca e rastreadores.
Todos os navegadores permitem obter e alterar atributos de dados usando os métodos getAttribute e setAttribute:
Var msglist = document.getElementById("msglist"); var show = msglist.getAttribute("tamanho da lista de dados"); msglist.setAttribute("tamanho da lista de dados", +show+3);
Isso funciona, mas só deve ser usado para manter a compatibilidade com navegadores mais antigos.
Exemplo nº 2 de processamento em JavaScript: o método data() da biblioteca jQueryA partir do jQuery 1.4.3, o método data() lida com atributos de dados HTML5. Você não precisa especificar explicitamente o prefixo data-, então um código como este funcionará:
Var listamsg = $("#msglist"); var show = msglist.data("tamanho da lista"); msglist.data("tamanho da lista", show+3);
No entanto, esteja ciente de que o jQuery tenta converter os valores de tais atributos em tipos apropriados (booleanos, números, objetos, arrays ou nulos) e afetará o DOM. Ao contrário de setAttribute , o método data() não substituirá fisicamente o atributo data-list-size - se você verificar seu valor fora do jQuery - ainda será 5.
Exemplo nº 3 de processamento de JavaScript: API para trabalhar com conjuntos de dadosFinalmente, temos uma API para trabalhar com conjuntos de dados HTML5 que retorna um objeto DOMStringMap. É importante lembrar que os atributos de dados são mapeados para um objeto sem prefixos de dados, os hífens são removidos dos nomes e os próprios nomes são convertidos para camelCase, por exemplo:
| Nome do Atributo | Nome da API do conjunto de dados |
| usuário de dados | do utilizador |
| máximo de dados | máximo |
| tamanho da lista de dados | tamanho da lista |
Nosso novo código:
Var msglist = document.getElementById("msglist"); var mostrar = msglist.dataset.listSize; msglist.dataset.listSize = +show+3;
Esta API é suportada por todos os navegadores modernos, mas não pelo IE10 e inferiores. Existe uma solução alternativa para esses navegadores, mas provavelmente será mais prático usar jQuery se você estiver escrevendo para navegadores mais antigos.
Ao trabalhar com data e hora em JavaScript, você usa o objeto Date. Acho que não há necessidade de explicar quantas vezes você tem que trabalhar com data e hora. E neste artigo você aprenderá como fazer isso em JavaScript.
Vamos começar, como sempre, com os construtores do objeto Date. Há quatro deles. O primeiro é um construtor sem parâmetros e retorna a hora e a data atuais:
Var data = nova Data();
documento.write(data);
Como resultado, você verá algo assim: "Qui, 14 de outubro de 2010, 11:42:06 GMT+0400".
O segundo construtor do objeto Date é um construtor de um parâmetro. Este parâmetro contém o número de milissegundos que se passaram desde 01/01/1970 (o nascimento da era Unix). Por exemplo, assim:
Data Var = nova Data(135253235);
documento.write(data);
Como resultado, você verá o seguinte: "Sexta-feira, 02 de janeiro de 1970, 16:34:13 GMT+0300".
O construtor a seguir permite criar um objeto Date com os seguintes parâmetros: ano, mês e dia:
Data Var = nova Data(2010, 0, 12);
documento.write(data);
Resultado: "Terça-feira, 12 de janeiro de 2010 00:00:00 GMT+0300". Observe também que o mês 0 é janeiro e o mês 11 é dezembro.
E o último construtor da classe Date em JavaScript permite criar um objeto Date com todos os parâmetros de data e hora: ano, mês, dia, horas, minutos e segundos.
Data Var = nova Data(2010, 0, 12, 23, 45, 12);
documento.write(data);
Você receberá esta linha: "Terça-feira, 12 de janeiro de 2010, 23:45:11 GMT+0300". Esses são todos os construtores de objetos JavaScript Date que os desenvolvedores nos forneceram.
A classe Date não possui propriedades especiais, então vamos direto aos métodos. Vamos começar imediatamente com um grupo de métodos que funcionam exatamente da mesma forma, mas cada um deles retorna seu próprio elemento de data e hora:
Var data = nova Data();
document.write("Ano - " + data.getFullYear() + "
");
document.write("Mês - " + data.getMonth() + "
");
document.write("Número - " + data.getDate() + "
");
document.write("Dia da semana - " + date.getDay() + "
");
document.write("Hora - " + date.getHours() + "
");
document.write("Minuto - " + data.getMinutes() + "
");
document.write("Segundo - " + date.getSeconds() + "
");
document.write("Milissegundos - " + date.getMilliseconds() + "
");
document.write("Número de milissegundos que se passaram desde 01/01/1970 - " + date.getTime() + "
");
Ao executar este script, você entenderá instantaneamente o que cada um desses métodos faz. A única coisa que gostaria de observar é que a numeração dos dias da semana também começa do zero. Além disso, domingo tem índice 0 e sábado tem índice 6.
Existem métodos semelhantes, mas mostrando a data e a hora no horário de Greenwich. Vamos escrever este código:
Var data = nova Data();
document.write("Ano - " + data.getUTCFullYear() + "
");
document.write("Mês - " + data.getUTCMonth() + "
");
document.write("Número - " + data.getUTCDate() + "
");
document.write("Dia da semana - " + date.getUTCDay() + "
");
document.write("Hora - " + date.getUTCHours() + "
");
document.write("Minuto - " + date.getUTCMinutes() + "
");
document.write("Segundo - " + date.getUTCSeconds() + "
");
document.write("Milissegundos - " + data.getUTCMilissegundos() + "
");
Ao executar este script, você descobrirá a data e hora atuais em Greenwich.
O oposto dos métodos get() são os métodos set(). Se os primeiros retornam determinados valores, os segundos, ao contrário, os alteram. Na verdade não consegui disponibilizar esse script, mas para que não restem dúvidas, vamos lá:
Var data = nova Data();
data.setFullYear(1990);
data.setMês(11);
data.setData(15);
data.setHoras(9);
data.setMinutos(20);
data.setSeconds(0);
data.setMilisegundos(10);
documento.write(data);
Espero que você tenha notado que o método setDay() não existe. Isso significa que o dia da semana é selecionado dependendo do ano, mês e data.
Existem também métodos semelhantes para Greenwich. Apenas o prefixo UTC é adicionado, por exemplo, para alterar o mês em que o método setUTCMonth() é usado.
E o último método é setTime() . Toma como parâmetro o número de milissegundos que se passaram desde 01/01/1970:
Data.setTime(39293012);
documento.write(data);
Como resultado, você verá isto: "Qui, 01 de janeiro de 1970, 13:54:53 GMT+0300".
São todos os construtores e métodos do objeto Date em JavaScript.
A lição cobrirá os tópicos de objetos Javascript. Falaremos sobre objetos customizados: criação de um objeto em javaScript, trabalho com propriedades e métodos de objetos, bem como protótipos javascript. Descreve resumidamente como trabalhar com objetos Localização, Navegador e Tela
O objetivo do site é fornecer aos usuários habilidades práticas para trabalhar com o idioma. Os trabalhos de laboratório em javaScript, apresentados à medida que a sua complexidade aumenta e apoiados em exemplos claros e resolvidos, permitir-lhe-ão compreender facilmente o material em estudo e aprender a criar de forma independente páginas web “vivas” e dinâmicas.
Existem vários tipos de objetos em JavaScript:
- objetos embutidos
- objetos do navegador
- objetos que o programador cria de forma independente (definidos pelo usuário)
Objetos incorporados são objetos predefinidos,... A maioria dos quais já foi abordada em lições anteriores.
Falaremos sobre objetos de navegador em JavaScript em lições futuras.
Agora é a hora de se familiarizar com objetos personalizados em JavaScript.
- Objeto
- Número (processamento de número)
- String (processamento de string)
- Variedade
- Matemática (fórmulas matemáticas, funções e constantes)
- Data (trabalhando com datas e horas)
- ExpReg
- Global (suas propriedades Infinity, NaN, indefinido)
- Função
Existem 2 maneiras de criar objetos:
var nome_objeto = new Objeto(); object_name.property = value;// notação de ponto object_name["property"] = value;// notação de colchetes
Importante: Vale ressaltar que você não pode usar um número como valor: myObg.rost = 2 // IMPOSSÍVEL! meuObg.rost = "2" // possível
Exemplo: Crie um objeto myBrowser com nome de propriedades (valor ) e versão (valor " 9.0 »)
✍ Solução 1:
var meuBrowser = new Object(); meuBrowser.name= "Microsoft Internet Explorer"; meuBrowser["versão"]= "9.0";
Exemplo: Crie dois objetos de coleção (carro e moto) com propriedades de cor e marca. Imprimir valor da propriedade cor no objeto carro e propriedades marca no objeto moto.
✍ Solução:
| var carro = new Object(); carro.color = "Branco"; carro.maxSpeed = 220; carro.marca = "Nissan"; document.write ("O carro tem a cor: " + car.color ); var moto = (cor: "Azul", cavalo-vapor: 130, marca: "Yamaha" ); document.write ("A motocicleta é feita por: " + moto.brand ); |
var carro = new Object(); carro.color = "Branco"; carro.maxSpeed=220; carro.marca = "Nissan"; document.write("O carro tem a cor: " + car.color); var moto = (cor: "Azul", cavalo-vapor: 130, marca: "Yamaha"); document.write("A motocicleta tem fabricante: " + moto.brand);
Loop "For each" ao trabalhar com objetos em javascript
Um pouco sobre esse design já foi dito.
O loop for in em javascript é projetado para iterar através de arrays, coleções e objetos.
Vejamos um exemplo de uso de for em:
| 1 2 3 4 5 6 7 8 | var meuBrowser = new Object(); meuBrowser.name = "Microsoft Internet Explorer"; meuBrowser[ "versão" ] = "9.0" ; for (var a in myBrowser) ( alert(a) ; // Itera pelas propriedades do objeto myBrowser. Retornará nome, versão alert(myBrowser[ a] ) ; // Retorna os valores das propriedades) |
var meuBrowser = new Object(); meuBrowser.name= "Microsoft Internet Explorer"; meuBrowser["versão"]= "9.0"; for (var a in myBrowser) ( alert(a); // Itera pelas propriedades do objeto myBrowser. Retornará nome, versão alert(myBrowser[a]); // Retorna os valores das propriedades)
A criação de classes construtoras é realizada em duas etapas:
Criando uma classe de objeto usando um construtor (criando classes construtoras):
função Object_class_name (sv1, sv2) ( this.sv1 = valor; this.sv2 = valor; )
Criando um novo objeto baseado no construtor para uma classe de objeto:
var object_name = new class_name("stack_value1","staff_value2");
var nome_objeto = novo nome_classe(); object_name.stv1="valor_stv1"; object_name.stv2="valor_stv2";
É comum escrever o nome da classe construtora com letra maiúscula!
Vejamos um exemplo:
Exemplo: Criando um construtor para uma classe de objetos e criando um objeto baseado nesta classe: crie um objeto myBrowser com propriedades nome (valor “Microsoft Internet Explorer”) e versão (valor " 9.0 »)
Solução aberta
| 1 2 3 4 5 6 7 8 | função Navegador (nome, versão) ( this .name = name; this .version = version; ) var myBrowser = new Browser("Microsoft Internet Explorer" , "9.0" ) ; alerta(meuBrowser.nome); alerta(meuBrowser.versão); |
função Navegador (nome, versão)( this.name = nome; this.version = versão; ) var myBrowser = new Browser("Microsoft Internet Explorer","9.0"); alerta(meuBrowser.nome); alerta(meuBrowser.versão);
Então, vamos comparar novamente com o primeiro método de criação de objetos:
// objeto de coleção var myBrowser = (nome: "Microsoft Internet Explorer", versão: "7.0"); alerta(meuBrowser.nome); alerta(meuBrowser.versão); // a linha a seguir é inválida! var meuBrowser1 = new meuBrowser("MozillaFirefox","3.5"); // NÃO É VERDADE! !!
Importante: Ao criar um objeto de coleção, você não pode criar uma instância da classe, pois não é uma classe
tarefa js 6_1. Crie um objeto Employee que contenha informações sobre os funcionários de uma determinada empresa, como Nome, Departamento, Telefone, Salário (use a função construtora e a palavra-chave this). Crie uma instância de objeto
Acessando propriedades de objetos em javascriptNome_objeto. nome da propriedade
| 1 2 | agente007.Name = "Vínculo"; alerta(agente007.Nome); |
agente007.Name = "Vínculo"; alerta(agente007.Nome);
O que é uma propriedade padrão
A função construtora permite atribuir propriedades padrão a um objeto. Cada instância do objeto criado terá essas propriedades.
| 1 2 3 4 5 6 7 8 9 10 | function Aluno(nome, telefone) ( this .name = name; this .phone = "22-22-22" ; // propriedade padrão! ) var ivanov = new Student("Ivan" , "33-33-33" ) ; alerta (ivanov.nome); // emitirá alerta "Ivan" (ivanov.phone ) ; // exibirá "22-22-22" ivanov.phone = "33-33-33" ; //alterar o alerta de propriedade padrão (ivanov.phone); // retornará "33-33-33" |
function Aluno(nome, telefone) ( this.name=name; this.phone="22-22-22"; // propriedade padrão! ) var ivanov = new Student("Ivan","33-33-33" ) ; alerta(ivanov.nome); // emitirá alerta "Ivan" (ivanov.phone); // exibirá "22-22-22" ivanov.phone="33-33-33"; //alterar o alerta de propriedade padrão (ivanov.phone); // retornará "33-33-33"
Adicionando propriedades a uma classe de objeto
Um valor de propriedade pode ser adicionado para:
- uma instância específica de um objeto;
- toda uma classe de objetos
Adicionando propriedades para um específico(instância) objeto:
nome_objeto. nome_propriedade = valor
ivanov.biologia = "excelente";
Importante: No exemplo, a propriedade está definida para um objeto específico, e não para uma classe de objetos!
Adicionando propriedades para a aula objetos:
nome_classe.prototype. nome_propriedade = valor
Student.prototype.biology = "excelente";
Importante: No exemplo, a propriedade (por padrão) está definida para uma classe de objetos! Isso é feito usando protótipo; protótipo - um objeto que define uma estrutura
| 1 2 | Aluno.prototype.email = " [e-mail protegido]" ; alert(ivanov.email ) ; // exibirá " [e-mail protegido]" |
Aluno.prototype.email=" [e-mail protegido]"; alert(ivanov.email); // exibirá " [e-mail protegido]"
Exemplo: Exemplo de exibição de todas as propriedades de um objeto com valores
| 1 2 3 4 5 6 7 8 9 | var summerTour= (turquia: 2000, espanha: 3000, egito: 1000); opção var; for (opção no summerTour) ( document.write (opção + ":" + summerTour[opção] + " " ) ; } |
var summerTour=( Turquia: 2000, Espanha: 3000, Egito: 1000 ); opção var; for (opção no summerTour)( document.write(option + ":" + summerTour + "
");
}
Protótipos Javascript (introdução)
Vejamos um exemplo de como classes javascript são construídas usando protótipos
Exemplo: Crie uma classe de objeto Carro (carro) com três propriedades: nome (nome), modelo (modelo), cor (cor). Crie uma instância de uma classe com valores de propriedade específicos. Então, através da instância criada, adicione para a aula propriedade do proprietário com um valor padrão específico ( Ivanov). Imprima todos os valores de propriedade da instância criada
| function Car(nome, modelo, cor) ( /* construtor do objeto carro*/ this .name = name; this .model = model; this .color = color; ) var myCar= new Car; meuCarro.nome = "Mers"; meuCarro.model = "600"; meuCarro.color = "verde"; Car.prototype .proprietário = "Ivanov" ; /* adiciona uma nova propriedade*/ alert(myCar.name + " " + myCar.model + " " + myCar.color + " " + myCar.owner ) ; |
function Car(nome, modelo, cor) ( /* construtor do objeto carro*/ this.name = name; this.model = model; this.color = color; ) var myCar=new Car; meuCarro.name="Mercedes"; meuCarro.model="600"; meuCarro.color="verde"; Car.prototype.owner = "Ivanov"; /* adiciona uma nova propriedade*/ alert(myCar.name+" "+myCar.model+" "+myCar.color+" "+myCar.owner);
tarefa js 6_2. Para a tarefa js 6_1 por meio da instância criada do objeto Employee, adicione uma nova propriedade de endereço à classe do objeto
Métodos de objeto JavaScriptCriando um método de objeto
Exemplo: Adicione um método aboutBrowser ao construtor do objeto Browser, que exibirá informações sobre as propriedades deste objeto na tela do navegador
| 1 2 3 4 5 6 7 8 9 10 11 12 13 | função showBrowser() (document.write("Navegador: " + este .nome + " " + esta .versão ) ; ) função Navegador(nome, versão) ( este .nome = nome; esta .versão = versão; este .aboutBrowser = showBrowser; ) var meuBrowser= new Browser("Microsoft Internet Explorer" , 8.0 ) ; meuBrowser.aboutBrowser(); |
function showBrowser() ( document.write("Browser: " + this.name + " " + this.version); ) function Browser(name, version) ( this.name = name; this.version = version; this.aboutBrowser = showBrowser; ) var meuBrowser=novo navegador("Microsoft Internet Explorer",8.0); meuBrowser.aboutBrowser();
function Browser(nome, versão) ( this.name = name; this.version = version; this.aboutBrowser = function())( document.write("Browser: " + name + " " + version); ) ) var myBrowser = novo navegador("Microsoft Internet Explorer",8.0); meuBrowser.aboutBrowser();
tarefa js 6_3. Crie uma classe de objeto (Tour) para a operação de uma agência de viagens com um método de cálculo do custo de uma viagem baseado em: número de pessoas * quantidade de dias * tarifa do país. Crie uma instância de um objeto TurkeyTour com valores de propriedade. Exiba todas as propriedades do objeto na tela. Crie um método de objeto de cálculo baseado em uma função.
Adicionando propriedades e métodos a objetos integrados (protótipo)
JavaScript é uma linguagem OOP (programação orientada a objetos) baseada em protótipo.
Protótipo - um objeto que define uma estrutura
Vejamos como trabalhar com protótipos usando um exemplo:
| 1 2 3 4 5 6 7 8 9 10 11 12 13 14 | /* Alterando o protótipo */ // Adicionando uma propriedade padrão ao objeto integrado String .prototype .color = "black" ; // Adiciona (altera) um método ao objeto integrado String .prototype .write = stringWrite; function stringWrite() (document.write ("" ) ; document.write (this .toString () ) ; document.write ("" ) ; ) // use a classe modificada var s = new String ("Esta é uma string "); s.color = "vermelho"; s.write(); |
/* Alterando o protótipo */ // Adicionando uma propriedade padrão ao objeto integrado String.prototype.color = "black"; // Adicionando (alterando) um método a um objeto integrado String.prototype.write = stringWrite; function stringWrite())( document.write(""); document.write(this.toString()); document.write(""); ) // usa a classe modificada var s = new String("This is a corda"); s.color = "vermelho"; s.write();
Importante: Você não pode adicionar propriedades ou métodos a um objeto Math.
tarefa js 6_4. Adicione o código do programa para concluir a tarefa: Adicione o método printMe() à classe String integrada, que imprime a palavra "Viva!" como cabeçalho (h... tag), nível especificado pelo usuário ().
O nível do cabeçalho (1, 2...6) pode ser adicionado como uma propriedade da classe String.
Vamos lembrar como devem ser as tags de título em HTML:
Complete o código:
| 1 2 3 4 5 6 7 8 | String .prototype .uroven = "1"; ... função printZagolovok () ( ... ... ) var s= novo ...; ... |
String.prototype.uroven="1"; ... função printZagolovok ()( ... ... ) var s=new ...; ...
Resumo: vamos comparar novamente duas opções para usar objetos personalizados em JavaScript:
| 1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 | var meuLivro= new Object() ; meuLivro.title = "livro"
;
myBook.price
=
"200"
;
alert(myBook[
"title"
]
)
;
// 1-й вариант обращения к свойствам
alert(meBook.price
)
;
// 2-й вариант обращения к свойствам
function
myBookShow()
{
for
(var
i in
myBook)
{
document.write
(i+
": "
+
myBook[
i]
+
"!} " ) ; // Iterar pelas propriedades ) ) myBook.show = myBookShow; myBook.show() ; |
var meuLivro=new Object(); meuLivro.title="livro";
myBook.price="200";
alert(myBook["title"]); // 1-й вариант обращения к свойствам
alert(meBook.price); // 2-й вариант обращения к свойствам
function myBookShow()
{
for (var i in myBook)
{
document.write(i+": "+myBook[i]+"!}
"); // Iterar pelas propriedades ) ) myBook.show=myBookShow; myBook.show();
| 1 2 3 4 5 6 7 8 9 10 11 12 13 14 | function myBook(title, price) ( // definindo propriedades this .title = title; this .price = price; // definindo o método this .show = show; function show() ( document.write ("Title: " + this .title ) ;document.write( "Preço: " + this .price ) ; ) ) var book = new myBook( "Book" , 200 ) ; livro.show(); |
function myBook(title,price)( // definindo propriedades this.title = title; this.price = price; // definindo o método this.show = show; function show() ( document.write("Title: " + this .title); document.write("Preço: " + this.price); ) ) var book = new meuLivro("Livro", 200); livro.show();> Vá para a página inicial ... ...
*Complexo: número de itens do menu, seus nomes e url deve ser solicitado ao usuário
Dica: para exibir uma string na tela no método show(), utilize o método document.write()
Vejamos como usar o objeto Navigator em JavaScript usando um exemplo:
Exemplo: Escreva uma função que exiba:
- nome do navegador
- idioma do navegador
- Nome do sistema operacional
- os cookies estão habilitados
- o usuário está conectado à internet?
- resolução da tela
- profundidade de cor
- endereço da página carregada
| 1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 | opção var; // exibe todas as propriedades do objeto navegador para (opção no navegador) ( document.write (option + " : " + navigator[ option] + " " ) ; ) // função para encontrar propriedades específicas do navegador de objetos function userDetails () ( document.write (" Nome do navegador: "+navigator.userAgent+" "); document.write("Idioma do navegador: " + navigator.idioma + " "); document.write("Nome do SO: " + navigator.oscpu + " "); document.write ("Os cookies estão habilitados:" + navigator.cookieEnabled + " "); document.write ("A Internet está conectada: " + navigator.nLine + " " ) ; ) Detalhes do usuario() ; |
opção var; // exibe todas as propriedades do objeto navegador para (opção no navegador)( document.write(option + " : " + navigator+ "
"); ) // função para encontrar propriedades específicas do navegador de objetos function userDetails ()( document.write("
Nome do navegador: "+navigator.userAgent+"
"); document.write("Idioma do navegador: " + navigator.idioma + "
"); document.write("Nome do SO: " + navigator.oscpu + "
"); document.write("Os cookies estão habilitados: " + navigator.cookieEnabled + "
"); document.write("A Internet está conectada: " + navigator.nLine + "
"); ) Detalhes do usuario();
Vejamos como usar o objeto Screen em JavaScript usando um exemplo:
função userDetails()(document.write("Resolução: " + screen.width + " x " + screen.height + "
"); document.write("Profundidade de cor: " + screen.colorDepth + " x " + screen.height + "
"); ) Detalhes do usuario();
Vejamos como usar o objeto Location em JavaScript usando um exemplo:
| 1 2 3 4 | function userDetails() ( document.write("Endereço da página carregada: " + location.href + " " ) ; ) Detalhes do usuario() ; |
function userDetails ()( document.write("Endereço da página carregada: " + location.href + "
"); ) Detalhes do usuario();
Conclusões:
- Usando expressões com a palavra-chave new, você pode criar instâncias de objetos, ou seja, instanciações concretas deles.
- Além disso, graças à propriedade protótipo javascript, é possível adicionar novas propriedades e métodos a objetos que foram inventados pelo usuário e não estavam presentes nos objetos integrados originais.
- A criação de objetos pode ser usada para criar bancos de dados.