 |
|
Você está aqui: JavaScript ::: Dicas & Truques ::: Programação Orientada a Objetos |
Programação Orientada a Objetos em JavaScript - Como declarar e criar novos objetos usando a notação de funçãoQuantidade de visualizações: 1587 vezes |
|
Embora o ECMAScript 2015 (também conhecido como ECMAScript 6 ou ES6) tenha incluído a palavra-chave class para permitir a declaração de classes JavaScript no estilo Java e C++, é comum encontrarmos códigos antigos (e até mesmo sendo desevolvidos) que ainda usam a notação de função. Sim, é possível usar new para criar um objeto a partir de uma função. Vamos ver como isso é possível? Comece analisando o seguinte código: ----------------------------------------------------------------------
Se precisar de ajuda com o código abaixo, pode me chamar
no WhatsApp +55 (62) 98553-6711 (Osmar)
----------------------------------------------------------------------
<html>
<head>
<title>Estudando JavaScript</title>
</head>
<body>
<script type="text/javascript">
// declara uma "classe" Produto
function Produto(){
this.nome;
this.preco;
// método que permite definir o nome
this.setNome = function(nome){
this.nome = nome;
}
// método que permite definir o preço
this.setPreco = function(preco){
this.preco = preco;
}
// método que permite obter o nome
this.getNome = function(){
return this.nome;
}
// método que permite obter o preço
this.getPreco = function(){
return this.preco;
}
}
// vamos criar um novo objeto Produto
var p = new Produto();
p.setNome("Notebook AGT 250");
p.setPreco(2400);
document.writeln("Nome: " + p.getNome());
document.writeln("<br>Preço: " + p.getPreco());
</script>
</body>
</html>
Veja que aqui nós criamos uma "classe" com o nome de Produto, que possui dois atributos: nome e preco. Ela possui também quatro métodos: setNome(), setPreco(), getNome() e getPreco(). O fato de eu ter colocado classe entre aspas, é porque estamos na verdade criando funções, simulando o comportamento da palavra-chave class ES6. Ao executarmos este código nós teremos o seguinte resultado: Nome: Notebook AGT 250 Preço: 2400 E agora a notícia mais importante. Quando estamos criando classes JavaScript como objetos de função, nós não estamos limitados à criação de apenas um objeto (como ocorre na criação de classes usando a notação de objeto). Usando a notação de funções, nós podemos criar quantos objetos quisermos. Veja, por exemplo, como criar dois produtos (que possuem a mesma estrutura e comportamento da classe Produto, porém, com atributos diferentes): ----------------------------------------------------------------------
Se precisar de ajuda com o código abaixo, pode me chamar
no WhatsApp +55 (62) 98553-6711 (Osmar)
----------------------------------------------------------------------
<html>
<head>
<title>Estudando JavaScript</title>
</head>
<body>
<script type="text/javascript">
// declara uma "classe" Produto
function Produto(){
this.nome;
this.preco;
// método que permite definir o nome
this.setNome = function(nome){
this.nome = nome;
}
// método que permite definir o preço
this.setPreco = function(preco){
this.preco = preco;
}
// método que permite obter o nome
this.getNome = function(){
return this.nome;
}
// método que permite obter o preço
this.getPreco = function(){
return this.preco;
}
}
// vamos criar um novo objeto Produto
var p = new Produto();
p.setNome("Notebook AGT 250");
p.setPreco(2400);
document.writeln("Nome: " + p.getNome());
document.writeln("<br>Preço: " + p.getPreco());
// vamos criar mais um objeto Produto
var p2 = new Produto();
p2.setNome("Impressora LX");
p2.setPreco(654.70);
document.writeln("<br><br>Nome: " + p2.getNome());
document.writeln("<br>Preço: " + p2.getPreco());
</script>
</body>
</html>
Ao executar o código novamente nós teremos o seguinte resultado: Nome: Notebook AGT 250 Preço: 2400 Nome: Impressora LX Preço: 654.7 |
 Link para compartilhar na Internet ou com seus amigos: |
JavaScript ::: Dicas & Truques ::: Rotinas de Conversão |
JavaScript para iniciantes - Como converter uma string em um valor numérico usando o método Number() do JavaScriptQuantidade de visualizações: 23716 vezes |
|
Algumas vezes nós precisamos converter um texto inserido pelo usuário em um valor numérico. Se sabemos que o valor é inteiro, podemos usar Number.parseInt(), enquanto, se soubermos que o valor inserido é um decimal, podemos usar Number.parseFlot(). No entanto, se estivermos na dúvida, pode usar somente a função Number(), pois ela tentará converter a string para um valor numérico (inteiro ou de ponto-flutuante) e, em caso de falha, retornará NaN (Not a Number, não é um número). Veja o código completo para o exemplo: ----------------------------------------------------------------------
Se precisar de ajuda com o código abaixo, pode me chamar
no WhatsApp +55 (62) 98553-6711 (Osmar)
----------------------------------------------------------------------
<html>
<head>
<title>Estudando JavaScript</title>
</head>
<body>
<script type="text/javascript">
var valor = "95,23";
valor = Number(valor);
document.write("O resultado da conversão é: "
+ valor);
</script>
</body>
</html>
Ao executar este código nós teremos o seguinte resultado: O resultado da conversão é: NaN Experimente trocar "95,23" por "95.23" e veja como a conversão de string para número ocorre sem problemas. |
JavaScript ::: JavaScript para Engenharia ::: Geometria Analítica e Álgebra Linear |
Como calcular a distância entre dois pontos no plano em JavaScript - JavaScript para Geometria Analítica e Álgebra LinearQuantidade de visualizações: 4729 vezes |
|
Como calcular a Distância Euclidiana entre dois pontos usando JavaScript Em várias aplicações envolvendo geometria, principalmente no desenvolvimento de jogos em JavaScript, é comum nos depararmos com a necessidade de calcular a distância entre dois pontos A e B. Nessa dica mostrarei como efetuar esse cálculo no R2, ou seja, no plano. Em outra dica eu abordo o cálculo no R3 (espaço). Comece analisando a imagem abaixo:  Veja que temos um ponto A (x = 3; y = 6) e um ponto B (x = 9; y = 4). Para determinarmos a distância entre esses dois pontos no plano cartesiano, temos que realizar a análise tanto no sentido do eixo das abscissas (x) quanto no do eixo das ordenadas (y). Veja a fórmula: \[d_{AB} = \sqrt{\left(x_b - x_a\right)^2 + \left(y_b - y_a\right)^2}\] Agora, jogando os valores dos dois pontos da fórmula nós teremos: \[d_{AB} = \sqrt{\left(9 - 3\right)^2 + \left(6 - 4\right)^2}\] Que resulta em 6,32 (aproximadamente). E agora veja o código JavaScript completo que define as coordenadas dos dois pontos e mostra a distância entre eles: ----------------------------------------------------------------------
Se precisar de ajuda com o código abaixo, pode me chamar
no WhatsApp +55 (62) 98553-6711 (Osmar)
----------------------------------------------------------------------
<html>
<head>
<title>Estudos JavaScript</title>
</head>
<body>
<script type="text/javascript">
// função que permite calcular a distância
// entre dois pontos no plano (R2)
function distancia2d(x1, y1, x2, y2){
var a = x2 - x1;
var b = y2 - y1;
var c = Math.sqrt(Math.pow(a, 2) + Math.pow(b, 2));
return c;
}
// vamos definir os dados do primeiro ponto
var x1 = 3;
var y1 = 6;
// vamos ler os dados do segundo ponto
var x2 = 9;
var y2 = 4;
// vamos obter a distância entre eles
var distancia = distancia2d(x1, y1, x2, y2);
document.writeln("Distância entre os dois pontos: " +
distancia);
</script>
</body>
</html>
Ao executarmos este código JavaScript nós teremos o seguinte resultado: Distância entre os dois pontos: 6.324555320336759 |
JavaScript ::: Fundamentos da Linguagem ::: Métodos, Procedimentos e Funções |
JavaScript Avançado - Como escrever uma função JavaScript que aceita um número variável de argumentosQuantidade de visualizações: 8162 vezes |
|
Em algumas situações precisamos criar funções JavaScript que aceitam um número variável de argumentos, ou seja, queremos ser capazes de chamar a função e fornecer 0, 1, 2 ou mais argumentos. Nesta dica eu mostrarei como isso é possível. A técnica aqui é usar o objeto arguments, que representa os argumentos da função que está sendo executada no momento. Para saber a quantidade de argumentos fornecidos, só precisamos usar a propriedade length deste objeto. A partir daí um laço for nos permite acessar cada um dos argumentos fornecidos individualmente. Veja uma página HTML contendo uma função JavaScript que permite somar os valores fornecidos como argumentos. Note que podemos passar quantos valores quisermos para a função: ----------------------------------------------------------------------
Se precisar de ajuda com o código abaixo, pode me chamar
no WhatsApp +55 (62) 98553-6711 (Osmar)
----------------------------------------------------------------------
<html>
<head>
<title>Estudos JavaScript</title>
<script type="text/javascript">
function somar(){
var soma = 0;
// vamos percorrer os argumentos fornecidos
for(var i = 0; i < arguments.length; i++){
soma += arguments[i];
}
window.alert("A soma dos valores é: " + soma);
}
// vamos somar alguns valores
somar(3); // um argumento
somar(2, 8); // dois argumentos
somar(1, 2, 4, 4); // quatro argumentos
</script>
</head>
<body>
</body>
</html>
O objeto argumentos não pode ser criado explicitamente. Este objeto está disponível somente quando uma função inicia sua execução. O objeto arguments de uma função não é um array (matriz), mas os argumentos individuais podem ser acessados da mesma forma que os elementos de um array, ou seja, usando índices. O índice é, na verdade, uma referência a uma das propriedades 0...n do objeto arguments. |
Desafios, Exercícios e Algoritmos Resolvidos de JavaScript |
Veja mais Dicas e truques de JavaScript |
Dicas e truques de outras linguagens |
|
C# - C# Windows Forms para iniciantes - Como limpar todo o conteúdo de um controle TextBox via código |
Códigos Fonte |
 Software de Gestão Financeira com código fonte em PHP, MySQL, Bootstrap, jQuery - Inclui cadastro de clientes, fornecedores e ticket de atendimentoDiga 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 |
 Controle de Estoque completo com código fonte em PHP, MySQL, Bootstrap, jQuery - 100% funcional e fácil de modificar e implementar novas funcionalidadesTenha o seu próprio sistema de controle de estoque web. com cadastro de produtos, categorias, fornecedores, entradas e saídas de produtos, com relatórios por data, margem de lucro e muito mais. Código simples e fácil de modificar. Acompanha instruções para instalação e criação do banco de dados MySQL. Clique aqui e saiba mais |
Linguagens Mais Populares |
|
1º lugar: Java |
