![]() |
|
||||
![]() Diga adeus às planilhas do Excel e tenha 100% de controle sobre suas contas a pagar e a receber, gestão de receitas e despesas, cadastro de clientes e fornecedores com fotos e histórico de atendimentos. Código fonte completo e funcional, com instruções para instalação e configuração do banco de dados MySQL. Fácil de modificar e adicionar novas funcionalidades. Clique aqui e saiba mais |
Você está aqui: JavaScript ::: Dicas & Truques ::: Programação Orientada a Objetos |
||||||||
JavaScript para iniciantes - Programação orientada a objetos em JavaScript: Classes, objetos, métodos e variáveis de instânciaQuantidade de visualizações: 1585 vezes |
||||||||
A melhor forma de entender a programação orientada a objetos é começar com uma analogia simples. Suponha que você queira dirigir um carro e fazê-lo ir mais rápido pressionado o acelerador. O que deve acontecer antes que você seja capaz de fazer isso? Bem, antes que você possa dirigir um carro, alguém tem que projetá-lo. Um carro geralmente começa com desenhos feitos pelos engenheiros responsáveis por tal tarefa, tal qual a planta de uma casa. Tais desenhos incluem o projeto de um acelerador que possibilita ao carro ir mais rápido. O pedal do acelerador "oculta" os mecanismos complexos responsáveis por fazer o carro ir mais rápido, da mesma forma que o pedal de freio "oculta" os mecanismos que fazem o carro ir mais devagar e o volante "oculta" os mecanismos que fazem com que o carro possa virar para a direita ou esquerda. Isso permite que pessoas com pequeno ou nenhum conhecimento de motores possam facilmente dirigir um carro. Infelizmente, não é possível dirigir o projeto de um carro. Antes que possamos dirigí-lo, o carro deve ser construído a partir do projeto que o descreve. Um carro já finalizado tem um pedal de aceleração de verdade, que faz com que o carro vá mais rápido. Ainda assim, é preciso que o motorista pressione o pedal. O carro não acelerará por conta própria. Agora vamos usar nosso exemplo do carro para introduzir alguns conceitos de programação importantes à programação orientada a objetos. A execução de uma determinada tarefa em um programa exige um método. O método (ou função) descreve os mecanismos que, na verdade, executam a tarefa. O método oculta tais mecanismos do usuário, da mesma forma que o pedal de aceleração de um carro oculta do motorista os mecanismos complexos que fazem com que um carro vá mais rápido. Em JavaScript, começamos criando uma unidade de programa chamada classe para abrigar um método, da mesma forma que o projeto de um carro abriga o design do pedal de acelerador. Em uma classe JavaScript nós fornecemos um ou mais métodos que são projetados para executar as tarefas da classe. Por exemplo, a classe que representa uma conta bancária poderia conter muitos métodos, incluindo um método para depositar dinheiro na conta, outro para retirar dinheiro, um terceiro para verificar o saldo, e assim por diante. Da mesma forma que não podemos dirigir o projeto de um carro, nós não podemos "dirigir" uma classe. Da mesma forma que alguém teve que construir um carro a partir de seu projeto antes que pudessémos dirigí-lo, devemos construir um objeto de uma classe antes de conseguirmos executar as tarefas descritas nela. Quando dirigimos um carro, o pressionamento do acelerador envia uma mensagem ao carro informando-o da tarefa a ser executada (neste caso informando-o de que queremos ir mais rápido). Da mesma forma, enviamos mensagens aos objetos de uma classe. Cada mensagem é uma chamada de método ou função e informa ao objeto qual ou quais tarefas devem ser executadas. Até aqui nós usamos a analogia do carro para introduzir classes, objetos e métodos. Já é hora de saber que um carro possui atributos (propriedades) tais como cor, o número de portas, a quantidade de gasolina em seu tanque, a velocidade atual, etc. Tais atributos são representados como parte do projeto do carro. Quando o estamos dirigindo, estes atributos estão sempre associados ao carro que estamos usando, e cada carro construído a partir do projeto sofrerá variações nos valores destes atributos em um determinado momento. Da mesma forma, um objeto tem atributos associados a ele quando o usamos em um programa. Estes atributos são definidos na classe a partir da qual o objeto é instanciado (criado) e são chamados de variáveis de instância da classe. Veremos agora como definir uma classe em JavaScript e usar um objeto desta classe em um trecho de código. Veja que nesta dica eu vou usar a palavra-chave class introduzida no ECMAScript 2015 (também conhecido como ECMAScript 6 ou ES6) para declarar uma classe JavaScript. No momento que escrevo, quase todos os navegadores web dão suporte ao ES6. Se o seu navegador recusar a palavra-chave class, você poderá declarar suas classes usando a notação literal ou a combinação de função e o operador new para declarar seus objetos e criar novas instâncias a partir dessas declarações. Nas outras dicas desse seção eu mostro como isso pode ser feito. Então, vamos declarar uma classe Cliente. Veja o código JavaScript a seguir:
Veja que nossa classe possui dois atributos: nome e email. Vejamos agora como podemos criar dois objetos dessa classe. Segue o código JavaScript completo (incluindo a página HTML):
Ao executar este código nós teremos o seguinte resultado: Nome: Osmar E-Mail: osmar@exemplo.com.br Nome: Fátima E-Mail: fatima@exemplo.com.br |
||||||||
![]() |
||||||||
JavaScript ::: Dicas & Truques ::: Strings e Caracteres |
||||
Como converter uma string em um valor de ponto-flutuante em JavaScript usando a função parseFloat()Quantidade de visualizações: 7803 vezes |
||||
Em algumas situações nós precisamos receber uma string informada pelo usuário e convertê-la para um valor real válido. Um valor em JavaScript é o mesmo que um valor com casas decimais, ou seja, um valor de ponto-flutuante. Esta tarefa pode ser realizada com o auxílio da função parseFloat(). Veja uma página HTML completa demonstrando o seu uso:
Ao executarmos este código JavaScript nós teremos o seguinte resultado: 87.32 NaN 65 Note que apenas a primeira string pôde ser convertida para um valor fracionário com sucesso. | ||||
JavaScript ::: Web APIs (APIs Web) ::: MediaDevices Interface (Interface MediaDevices) |
||||
HTML5 + JavaScript - Como usar a interface MediaDevices em seus códigos JavaScriptQuantidade de visualizações: 1594 vezes |
||||
A interface MediaDevices é um daqueles objetos que vemos com frequencia em códigos JavaScript e não entendemos muito bem o seu funcionamento. Nesta dica vou decifrá-la. O objetivo da interface MediaDevices é fornecer acesso aos dispositivos de entrada de mídia conectadas e às quais o navegador tem acesso, a saber, câmeras, microfone e compartilhamento de tela. É por meio dessa interface que acessamos tais dispositivos. A interface MediaDevices está disponível como um objeto do objeto navigator. Veja como testar sua existência e suporte no seu navegador web:
Note que mediaDevices é um objeto Singleton do objeto navigator, ou seja, só há uma instância desse objeto disponível no contexto de execução de códigos no navegador. Há também a preocupação em relação à segurança. Alguns navegador podem restringir o acesso a este objeto se você não estiver em um ambiente HTTPS ou localhost. | ||||
JavaScript ::: Dicas & Truques ::: Cookies |
||||
Como verificar se cookies estão habilitados no navegador do usuário usando JavaScriptQuantidade de visualizações: 20 vezes |
||||
Em algumas situações nós gostaríamos de checar se os cookies estão habilitados no browser do usuário antes de gravarmos alguma informação. Nesta dica eu mostro como isso pode ser feito. Note que tudo que precisamos fazer é criar um cookie temporário e tentar acessá-lo em seguida. Veja o código completo para o exemplo (incluindo a página HTML):
Ao executar este código teremos o seguinte resultado: Os cookies estão habilitados no seu navegador. | ||||
Desafios, Exercícios e Algoritmos Resolvidos de JavaScript |
Veja mais Dicas e truques de JavaScript |
Dicas e truques de outras linguagens |
E-Books em PDF |
||||
|
||||
|
||||
Linguagens Mais Populares |
||||
1º lugar: Java |