Você está aqui: Principal » Lista Completa de Tutoriais

Sobre este Tutorial

Autor:	Kenia Campos dos Reis
Data:	15-02-2006
Categoria:	Programação Web
Assunto:	JAVASCRIPT - BÁSICO
Visitas:

JAVASCRIPT- PARTE 12

Objetivos:

Nos tutoriais anteriores você aprendeu a utilizar objetos embutidos do JavaScript, como Date. Também aprendeu sobre os objetos browser, que permitem manipular documentos da Web. Esses objetos são mais utilizados no JavaScript, porem você pode criar objetos personalizados. Neste tutorial você aprendera a criar seus próprios objetos personalizados com JavaScript e no caminho aprenderá um pouco mais sobre como o JavaScript trata todos os vários tipos de objetos.

Pré-requisitos:

Para acompanhar a lição você deve estudar as primeiras partes desse tutorial.

Utilizando objetos para simplificar o script

Embora as variáveis e arrays do JavaScript sejam formas versáteis de armazenar dados, às vezes você precisa de uma estrutura mais complicada. Por exemplo, suponha que você esteja criando um script para trabalhar com um banco de dados de cartões de informações que contém nomes, endereços e números de telefone de uma variedade de pessoas.

Se você utilizar variáveis normais, você precisaria de varias variáveis separadas para cada pessoa no banco de dados, ou seja, uma variável para nome, uma variável para endereço e assim por diante. Para melhor entendimento o ideal seria utilizar os arrays, ou seja, você pode Ter um array de nomes, um array de endereços e um array de números de telefone. Cada pessoa no banco de dados teria uma entrada em cada array. Isso seria mais conveniente mais ainda não seria perfeito.

Com objetos, você pode tornar as variáveis que armazenam o banco de dados tão lógico quanto de informações. Cada pessoa é representada por um objeto Cart, que tem propriedade para nome, endereço e numero de telefone. você pode até adicionar métodos ao objeto para exibir ou trabalhar com as informações.

Nos tópicos a seguir você utilizará a JavaScript para realmente criar o objeto Cart e suas propriedades e métodos. Mais adiante utilizaremos o objeto Cart em um script para exibir as informações para vários membros do banco dados.

Definindo um objeto

O primeiro passo na criação de um objeto é atribuir um nome a eles e a suas propriedades. Já decidimos chamar o objeto de Cart. Cada objeto terá as seguintes propriedades:

» nome

» endereço

» telefone

O primeiro passo na utilização desse objeto em um programa de JavaScript é criar uma função para criar novos objetos Cart. Essa função é chamada construtor de um objeto. Como a função abaixo:

function Cart(nome, endereco, telefone)

{ this.nome = nome};

this.endereco = endereco;

this.telefone=telefone; }

O construtor é uma função simples que aceita parâmetros para inicializar um novo objeto e os atribui às propriedades correspondentes. Essa função aceita vários parametros da instrução que chama a função e então os atribui como propriedade de um objeto.Como a função é chamada Cart, o objeto é o objeto Cart.

Note que utilizei a palavra-chave this, voce vai utilizar essa palavra toda a vez que criar uma defnição de objeto. Utiliza this para referenciar o objeto atual ou seja aquele que esta sendo criado pela função.

Definindo um método de objeto

Agora vamos criar um metodo para trabalhar com o objeto Cart. Como todos os objetos Cart terao as mesmas propriedades, pode ser util ter uma função que imprime as propriedades em um formato organizado. Vamos chamar essa função de imprimircart.

A função imprimircart será utilizada como um metodo para objetos Cart, entao voce não precisa solicitar parametros. Em vez disso, voce pode utilizar a palavra-chave this novamente para referenciar a propriedade do objeto atual. Como a função abaixo:

function imprimircart( )

{ line1= “ Nome: “+this,nome +”<BR>\n;

line2= “ Endereço: “+this,endereco +”<BR>\n;

line3= “ Telefone: “+this,telefone +”<BR>\n;

document.write(line1,line2,line3);

}

Essa função simplesmente lê a propriedades do objeto ataul( this), imprime cada uma com uma legenda e pula para um nova linha.

Você agora tem uma função que imprime um cartão, mas não é oficialmente um metodo do objeto Card. A ultima coisa que voce precisa fazer é tornar imprimircart parte da definição de função para objetos Cart. Logo abaixo esta a modficação da função Cart:

function Cart(nome ,endereco, telefone)

{ this.nome = nome;

this.endereco = endereco;

this.telefone=telefone;

this. imprimircart= imprimircart ;

}

A instrução adicionada se parece exatamente como a definição de outra propriedade, mas refere-se a função imprimircart. Essa funcionará contanto que a função imprimircart seja definida com sua própria definição de função.

Criando uma instancia de objeto

Agora vamos utilizar definição de objeto e método que você criou acima. A fim de utilizar a definição de objeto, vamos criar um novo objeto. Isso é feito com a palavra-chave new. Essa é a mesma palavra-chave que você utilizou para criar os objetos Date e Array.

A seguinte instrução criar um novo objeto Cart chamado kenia.

kenia=new(“kenia campos”, “Rua da Amora, 123”, “(34) 3216-8796”);

Como você pode ver, criar um objeto é muito fácil. Tudo que você faz é chamar a função Cart( ) e conferir a ela os atributos exigidos, na mesma ordem que a definição.

Uma vez que essa instrução executa, um novo objeto é criado para armazenar as informações da kenia. Isso é chamado de instancia do objeto Cart. Assim como pode haver diversas variáveis de strings em um programa, pode haver diversas instancias de um objeto que você define.

Em vez de especificar todas as informações em um cartão com a palavra- chave new, você pode atribui-las depois de feito. Por exemplo, você pode criar um objeto Cart vazio chamado kenia e depois atribuir suas propriedades, como a seguir:

kenia=new Cart ( );

kenia.nome= “kenia campos”;

kenia.endereco= “Rua da Amora, 123”;

kenia.telefone= “(34) 3216-8796” ;

Uma vez que você criou uma instancia do objeto Cart utilizando qualquer um desses métodos, você pode utilizar o método imprimircart ( ) para exibir suas informações. Por exemplo,essa instrução exibe as propriedades do cartão da kenia:

kenia.imprimircart ( );

Personalizando objetos embutidos

O JavaScript inclui um recurso que permite estender as definições de objetos embutidos. Por exemplo, se você acha que o objeto String não atende às suas necessidades, você pode estendê-lo, adicionando uma nova propriedade ou método.

Isso talvez seja muito útil se você for criar um script grande que utilize muitas strings.

Você pode adicionar tanto propriedades como métodos a um objeto existente utilizando a palavra- chave prototype. ( um protótipo e outro nome para a definição de um objeto ou uma função construtora).A palavra-chave prototype permite alterar a definição de um objeto fora de sua função construtora. Como um exemplo, vamos adicionar um método à definição de objeto String. Você criará um método chamado heading, que converte uma string em um título de HTML. A seguinte instrução define uma string chamada title:

title=” Minha Pagina na Web”;

Essa instrução daria saída ao conteúdo da string de title como um titulo de HTML de nível 1:

document.write(title.heading(1));

O exemplo abaixo adiciona um método heading à definição de objeto String que exibirá a string como um titulo e então exibira os seguinte exemplo:

<html>

<head><titler> Testando o método heading</title>

</head>

<body>

<Script>

function addhead(level)

{ html= “H”+level;

text= this.toString( );

start=“<”+html +“>”;

stop=“</”+html +“>”;

return start +text +stop;

}

String.prototype.heading=addhead;

document.write(“ Isto é somente um teste”.heading(1));

</Script>

</body>

</html>

Neste exemplo, foi definido a função addhead( ), que servira como o novo método de string. Ela aceita um numero para especificar o nível de titulo. As variáveis start e stop são utilizadas para armazenar as tag HTML “abre titulo”e “fecha titulo”, como < H1> e </H1>.

Depois que a função foi definida, utilize a palavra-chave prototype para adiciona-la como um método do objeto String. você então pode utilizar esse método em qualquer objeto String ou, de fato, a qualquer string de JavaScript. Isso é demostrado pela ultima instrução, que exibe uma string de texto como um titulo de nível 1, visto na figura abaixo:

Armazenando dados em objetos

Depois de termos criamos um novo objeto para armazenar os cartões de informações e um método para imprimi-los. Agora para entender melhor sobre propriedades, funções e métodos, vamos utilizar esse objetos em uma página da Web para exibir dados para vários cartões.

O documento de HTML precisará incluir a definição de função para imprimircart, junto com a definição para o objeto Cart. Neste exemplo vamos criar três cartões e imprimi-los no corpo do documento. O exemplo abaixo mostra o código completo do documento de HTML, que tal testa-lo ?

<html>

<head><titler> Cartões </title>

<Script>

function imprimircart( )

{ line1= “<B> Nome: </B>“+this.nome +”<BR>\n;

line2= “<B>Endereço: </B> “+this.endereco +”<BR>\n;

line3= “<B>Telefone: </B> “+this.telefone +”<BR>\n;

document.write(line1,line2,line3);

}

function Cart(nome ,endereço, telefone)

{ this.nome = nome;

this.endereco = endereco;

this.telefone=telefone;

this. imprimircart= imprimircart;

}

</Script>

</head>

<body>

<H1> Cartões de Teste</H1>

Temos as seguintes informações: <HR>

<Script>

kenia=new Cart(“kenia campos”, “Rua da Amora, 123”, “(34) 3216-8796”);

felipe=new Cart(“Felipe Oliveira”, “Rua da Maça, 321”, “(34) 3216-9687”);

henrique=new Cart(“Henrique Matos”, “Rua dos Patos, 456”, “(34) 3213-9696”);

// imprimindo

kenia.imprimircart ( );

felipe.imprimircart ( );

henrique.imprimircart ( );

</Script>

Fim do Cartão.

</body>

</html>

Neste exemplo você pode notar que a função imprimircart foi um pouco modificada para melhor aparência das coisas, com quebras de linha de HTML e negrito.

Nota : Esse exemplo não é um banco de dados muito sofisticado porque te de incluir os dados para cada pessoa no documento HTML. Entretanto, o objeto Cart pode ser utilizado de maneira igualmente fácil para armazenar um registro de banco de dados recuperado de um servidor de banco de dados com milhares de registros.

Conclusão:

Neste tutorial você aprendeu a criar seus próprios objetos no JavaScript. você aprendeu mais sobre objeto, adicionou propriedades e métodos ao objeto , além de criar instancia de objetos, e aprendeu como a utilizar todos juntos em um script completo. Também aprendeu a modificar objetos embutidos do JavaScript, como no exemplo que fizemos do objeto String. No próximo tutorial você vai aprender sobre handlers de eventos, que permitem que seu script responda quando o usuário da um clique no mouse, pressiona uma tecla ou outro para chamar a atenção do usuário.

LISTA DE TODOS OS TUTORIAIS DISPONÍVEIS

LIVROS CAMPEÕES DE VENDA NO SITE

Cursos Online com Certificado e Suporte à Dúvidas

CURSOS ONLINE COM CERTIFICADO - INDICADOS POR JÚLIO BATTISTI EM PARCERIA COM CURSOS 24 HORAS
AdministraÇÃo
Administração Contábil e Financeira Administração de Empresas Administração do Tempo Aprenda a Falar em Público Chefia e Liderança Departamento Pessoal Empreendedorismo Gestão da Qualidade Gestão de Compras	Gestão de Projetos Gestão Escolar Gestão Hoteleira Gestão Pública Logística Matemática Financeira HP 12C Planejamento Estratégico Qualidade de Vida no Trabalho
COMUNICAÇÃO E MARKETING
Administração de Empresas Aprenda a Falar em Público Comércio Exterior Empreendedorismo Escrita e Redação Etiqueta Social e Empresarial Jornalismo Online Marketing Pessoal	Marketing Social Planejamento Estratégico Produção de Eventos Propaganda e Marketing Sucesso Profissional Técnicas de Vendas Telemarketing
CONCURSOS PÚBLICOS
Conhecimentos Bancários Gestão Pública Memorização e Leitura Dinâmica	Noções Gerais de Direito Raciocínio Lógico
CONTABILIDADE E ECONOMIA
Administração Contábil e Financeira Administração de Empresas Bolsa de Valores Comércio Exterior	Conhecimentos Bancários Contabilidade Básica Finanças Pessoais Matemática Financeira HP 12C
DIREITO
Assistente Social Departamento Pessoal	Gestão Pública Noções Gerais de Direito
GESTÃO E LIDERANÇA
Administração de Empresas Administração do Tempo Aprenda a Falar em Público Chefia e Liderança Empreendedorismo Etiqueta Social e Empresarial Gestão de Compras Gestão de Projetos Gestão Escolar	Gestão Hoteleira Gestão Pública Marketing Pessoal Memorização e Leitura Dinâmica Negociação Propaganda e Marketing Recolocação Profissional Secretariado Executivo Sucesso Profissional
INFORMÁTICA
Access 2007 ASP AutoCad 2D AutoCad 3D CorelDraw Excel 2007 Flash Linux MS Project 2007	Photoshop PowerPoint 2007 Raciocínio Lógico Redes e Noções de Hardware Segurança na Internet Webmaster Windows 7 Word 2007 Word e Excel
MEIO AMBIENTE
Educação Ambiental Guia de Turismo	Marketing Social Reciclagem e Energias Renováveis
PEDAGOGIA
Bullying Distúrbios de Aprendizagem Educação Ambiental Educação de Jovens e Adultos Educação Especial	Educação Infantil Escrita e Redação Gestão Escolar Saúde Emocional do Educador
ProfissionalizanteS
Administração de Empresas Assistente Social Comércio Exterior Departamento Pessoal Educação de Jovens e Adultos Educação Infantil Enfermagem Fotografia Digital Gestão da Qualidade Gestão de Compras Guia de Gastronomia	Guia de Turismo Jornalismo Online Logística Produção de Eventos Recepcionista de Hotel Recrutamento e Seleção Secretariado Executivo Segurança do Trabalho Técnicas de Vendas Telemarketing Webmaster
RECURSOS HUMANOS
Administração de Empresas Departamento Pessoal Gestão Pública	Qualidade de Vida no Trabalho Recrutamento e Seleção
SAÚDE
Assistente Social Bullying Enfermagem	Primeiros Socorros Saúde Emocional do Educador Segurança do Trabalho
TURISMO E HOTELARIA
Gestão Hoteleira Guia de Gastronomia	Guia de Turismo Recepcionista de Hotel

CURSOS ONLINE COM CERTIFICADO - INDICADOS POR JÚLIO BATTISTI EM PARCERIA COM BRAVA CURSOS
INFORMÁTICA
Curso de Digitação Formatando e Instalando Computador Excel para Iniciantes Curso Compre no Ebay Informática Educativa Curso de Linux	Segurança na Internet Montagem e Manutenção de Computadores Curso Remoção de Vírus Curso Ubuntu Instalação Linux - Ubuntu
AdministraÇÃo
Gestão de Projetos e Empreendedorismo Benefícios da Previdência Curso HP 12C Matemática Financeira Curso Análise Salarial	Processo de Elaboração de Questionário Excelência no Atendimento ao Cliente Logística do Transporte Licitações e Contratos Administrativos
Profissionalizante
Adestramento Canino Como fazer pesquisa Científica e Monografia Curso de Corte e Costura Supervisor de Telemarketing Balconista de Padaria Curso Educação Infantil	Recepcionista e Secretaria Velas Artesanais Relações Interpessoais Curso de Arbitragem Bullying e Cyberbullying Capacitação de Tutores em EAD
EstÉtica
Curso de Massoterapia Curso de Depilação Drenagem Linfática Curso de Maquiagem Limpeza Turbinada de Pele	Alisamento e Relaxamento Capilar Curso de Etiqueta SPA de Vinhoterapia na Estética Facial Curso de Shantala Introdução à Colorimetria Capilar
Pessoal
Curso de Caligrafia Memorização Chefia e Liderança Curso Falar em Público Curso Bases Neurológicas Leitura Dinâmica Planejamento de Projeto Pessoal Reforma Ortográfica	Como Passar em Concursos Públicos Direção Defensiva Administração do Tempo Curso de Redação Curso de Meditação Como Passar no Vestibular Atualização Gramatical
NegÓCIOS
Relações Humanas e Ética Profissional Marketing e Vendas Diretas	Persuasão em Vendas
Entretenimento
Curso de Mágica
SaÚde
Primeiros Socorros Curso de Fitoterapia Curso de Aromaterapia Medicina Alternativa Plantas Medicinais	Técnicas básicas de Enfermagem O Trabalho do Agente Comunitário de Saúde Ergonomia - Postura Correta em Frente ao Computador Ética Profissional - Ênfase em Radiologia Adolescência: Visão Saúde do Assunto
Meio Ambiente
Curso Gestão Ambiental Jardinagem e Paisagismo	Curso de Reciclagem Curso de Bonsai
MÚsica
Curso de Violão
NutriÇÃo
Higiene e Manipulação de Alimentos Congelamento de Alimentos	Culinária Básica Culinária Intermediária
RelaÇÕes Humanas
Curso Gestão de Pessoas Departamento Pessoal Desenvolvimento Pessoal Empresarial Curso de Telemarketing Curso Dinâmica em Grupo Rescisão Contrato de Trabalho Folha de Pagamento na Prática	Atendimento ao Cliente Adm. da Empregada Doméstica Curso de Homolognet Recursos Humanos - Férias Recursos Humanos - 13° Salário Registro de Empregados
Web Master
Curso de HTML Curso de WordPress	Curso de HTML5
Designer GrÁfico
Curso de Corel Draw Efeitos Especiais com InDesign CS5	Efeitos Tipográficos com InDesign CS5

CURSO EM FORMATO DE VÍDEO-AULA

EXEMPLOS PRÁTICOS PASSO A PASSO COM SOM E IMAGEM

Clique no curso para informações detalhadas

Curso

Duração

Informações

ACCESS

Vídeo Aula: Access 2007 - Consultas - Curso Completo e Prático

4:30h

LOJA DE LIVROS

VÍDEO-AULAS

E-BOOKS/CURSOS

CURSOS ONLINE COM CERTIFICADO

CURSOS COMPLETOS EM CD

CD-01

CD-02

CD-03

CD-04

CD-05

CD-06

CD-07

CD-08

CD-09

CD-10

CONTATO

Você está aqui: Principal » Lista Completa de Tutoriais

Sobre este Tutorial

JAVASCRIPT- PARTE 12

Objetivos:

Pré-requisitos:

Utilizando objetos para simplificar o script

Definindo um objeto

Definindo um método de objeto

Criando uma instancia de objeto

Personalizando objetos embutidos

Armazenando dados em objetos

Conclusão:

:: Tutoriais Relacionados

CURSOS
COMPLETOS EM CD