NUNCA MAIS PASSE RAIVA POR NÃO CONSEGUIR RESOLVER UM PROBLEMA COM O EXCEL - GARANTIDO!

UNIVERSIDADE DO VBA - Domine o VBA no Excel Criando Sistemas Completos - Passo a Passo - CLIQUE AQUI

Você está em: PrincipalTutoriaisKeniareis : Jsbasico012
Quer receber novidades e e-books gratuitos?

FILTRO DE TUTORIAIS:


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.

 

Quer receber novidades e e-books gratuitos?

Cursos Online

  • Banco de Dados
  • Carreira
  • Criação/Web
  • Excel/Projetos
  • Formação
  • + Todas as categorias
  • Contato: Telefone: (51) 3717-3796 | E-mail: webmaster@juliobattisti.com.br | Whatsapp: (51) 99627-3434

    Júlio Battisti Livros e Cursos Ltda | CNPJ: 08.916.484/0001-25 | Rua Vereador Ivo Cláudio Weigel, 537 - Universitário, Santa Cruz do Sul/RS, CEP: 96816-208

    Todos os direitos reservados, Júlio Battisti 2001-2020 ®

    [LIVRO]: MACROS E PROGRAMAÇÃO VBA NO EXCEL 2010 - PASSO-A-PASSO

    APRENDA COM JULIO BATTISTI - 1124 PÁGINAS: CLIQUE AQUI