Arquivo da categoria ‘JavaScript’

Websites – Object Management – Namespace – Javascript – Linux

Publicado: 1 de maio de 2014 em JavaScript
0

O primeiro passo para uma boa gestão objetos JavaScript está em ter um espaço de nomes, ou um objeto JavaScript que contém o nosso código, que você sabe que não vai entrar em conflito com o código do Firefox ou outras extensões. Declaração de namespace é melhor localizado em um arquivo próprio.

Por convenção, o nome de um módulo deve corresponder a seu namespace. O módulo desenvolvimentoaberto deve ser armazenado num ficheiro chamado desenvolvimentoaberto.js.

namespace-js

Namespace – Javascript

 

Exemplo:

Neste exemplo criamos um namespace que pode conter uma coleção de objetos.

Html / JavaScript

<!DOCTYPE html>
<html>

<head>
   <title>Desenvolvimento Aberto</title>
</head>

<body>

<h2>Desenvolvimento Aberto</h2>
<h3>Javascript Orientado a Objeto - Namespace</h3>
<h4>JavaScript</h4>
<br>

<pre>
<script>

// Declara namespace
var desenvolvimento; 

// Iniacializa namespace
if (!desenvolvimento) desenvolvimento = {};

//   Cria namespace
desenvolvimento.aberto = {};

//  Adiciona metodos
desenvolvimento.aberto.soma = function (x, y) { return x + y };
desenvolvimento.aberto.subt = function (x, y) { return x - y };

//  Cria Alias
var das = desenvolvimento.aberto.soma;
var dat = desenvolvimento.aberto.subt;

// Escreve no documento html    

document.writeln("O Namespace desenvolvimento.aberto contem:") 

document.writeln("\nSoma: 30 + 20 = " +  desenvolvimento.aberto.soma(30, 20));

document.writeln("Alias - Soma = " + das(30, 20));

document.writeln("\nSubtrai: 30 - 20 = " +  desenvolvimento.aberto.subt(30, 20));

document.writeln("Alias - Subtrai = " + dat(30, 20));

</script>
</pre>

</body>

</html>

Websites – Manipulando Matrizes – parte 3 – For Each, Map, Filter, Every e Some – Javascript – Linux

Publicado: 21 de abril de 2014 em JavaScript
0

O ECMAScript 3 define uma série de funções de manipulação de matrizes úteis sobre Array.prototype, o que significa que estão disponíveis como métodos de qualquer matriz. Aqui vamos mostrar alguns métodos uteis.

Matriz - Parte 3

Matriz – Parte 3

For Each

Executa a ação especificada para cada elemento em uma matriz.

Map

O método cria uma nova matriz com os resultados da chamada de uma função fornecida em cada elemento desta matriz.

Filter

Retorna os elementos de uma matriz que atendem à condição especificada em uma função de retorno.

Every

Determina se todos os membros de uma matriz satisfazem o teste especificado retornando verdadeiro ou falso.

Some

O método testa se algum elemento da matriz passou no teste executado pela função fornecida e retorna verdadeiro ou falso.

Exemplo:

Neste exemplo criamos uma matriz e testamos todos os métodos acima.

Html / Javascript

<!DOCTYPE html>
<html>

<head>
   <title>Desenvolvimento Aberto</title>
</head>

<body>

<h2>Desenvolvimento Aberto</h2>
<h3>For Each - Map - Filter - Every - Some</h3>
<h4>JavaScript</h4>
<br>

<pre>
<script>

// For Each

var matriz = [1,2,3,4,5];

document.writeln("For each - Itera os elementos da matriz: " + matriz);

matriz.forEach(function (valor,inc, arry ) { arry[inc] = valor + 1});

document.writeln("Resultado: "+ matriz);

// MAP

var mapa = [1, 2, 3, 4];

document.writeln("\nMap - Executa fun&#231&#227o nos elementos da matriz: " + mapa);
document.writeln("Resultado: " + mapa.map(function (quadrado) { return quadrado * quadrado}));

// Filter

var filtro = [1, 2, 3, 4, 5 , 6, 7, 8 ,9 , 10];

document.writeln("\nFilter - Filtra os elementos da matriz: " + filtro);
document.writeln("Resultado: " + filtro.filter(function (elemento) { return elemento > 5 }));

// Every

var todos = [1, 2, 3];

document.writeln("\nEvery - Analisa todos os elementos e retorna Verdadeiro ou Falso : " + todos);
document.writeln("Resultado: " + todos.every(function (elemento) { return elemento < 5 }));

// Some

var alguns = [1, 2, 3];

document.writeln("\nSome - Analisa  os elementos e retorna Verdadeiro ou Falso se \n" +
                 "houver pelo menos um elemento verdadeiro : " + alguns);
document.writeln("Resultado: " + alguns.some(function (elemento) { return elemento = 2 }));

</script>
</pre>

</body>

</html>

Websites – Manipulando Matrizes – parte 2 – UnShift – Shift, Splice, Slice e Concat – Javascript – Linux

Publicado: 14 de abril de 2014 em JavaScript
0

O ECMAScript 3 define uma série de funções de manipulação de matriz úteis sobre Array.prototype, o que significa que estão disponíveis como métodos de qualquer matriz. Aqui vamos mostrar alguns métodos uteis.

arrays3

Manipulando Matrizes

 

UnShift

Insere um elemento no inicio da matriz.

Shift

Remove um elemento no inicio da matriz.

Splice

Remove um certo numero de elementos de uma matriz

Slice

Retorna uma substring de uma matriz.

Concat

Concatena uma  ou mais strings a uma matriz.

Exemplo:

Neste exemplo criamos uma matriz e testamos todos os métodos acima.

Html / Javascript

<!DOCTYPE html>
<html>

<head>
   <title>Desenvolvimento Aberto</title>
</head>

<body>

<h2>Desenvolvimento Aberto</h2>
<h3>UnShift - Shift, Splice, Slice, Concat</h3>
<h4>JavaScript</h4>
<br>

<pre>
<script>

var valor = ["D", "C", "B", "A"];

document.writeln("Valor da Array:");
document.writeln(valor);

//   Unshift
document.writeln("\nUSnhift - insere um elemento no incio da Array");

valor.unshift("E");

document.writeln(valor);

//  Shift
document.writeln("\nShift - remove um elemento no incio da Array");

valor.shift();

document.writeln(valor);

//  Splice
document.writeln("\nSplice - remove um numero de elementos da Array");

valor.splice(2);

document.writeln(valor);

//  Slice
document.writeln("\nSlice - retorna uma substring da Array");

document.writeln(valor.slice(0,1));

//  Concat
document.writeln("\nConcat - concatena uma string a uma Array");

document.writeln(valor.concat("B","A"));

</script>
</pre>

</body>

</html>

Websites – Manipulação de Matrizes – Join, Reverse, Sort, Push, Pop – Javascript – Linux

Publicado: 13 de abril de 2014 em JavaScript
0

O ECMAScript 3 define uma série de funções de manipulação de matriz úteis sobre Array.prototype, o que significa que estão disponíveis como métodos de qualquer matriz. Aqui vamos mostrar alguns métodos uteis.

Join

Converte todos os elementos de uma matriz e os concatena.

Reverse

Inverte a ordem dos elementos de uma matriz.

Sort

Ordena os elementos de uma matriz.

Push

Adiciona um ou mais elementos em uma matriz.

Pop

Remove o ultimo elemento de uma matriz.

aarays-js

Matriz

Exemplo:

Neste exemplo criamos uma matriz e testamos todos os elementos acima.

Html / Javascript

<!DOCTYPE html>
<html>

<head>
   <title>Desenvolvimento Aberto</title>
</head>

<body>

<h2>Desenvolvimento Aberto -Join - Reverse - Sort </h2>
<br>
<h3>JavaScript</h3>
<br>

<pre>
<script>

var valor = ["D", "C", "B","A"];

// Exibe Array
document.writeln("Valores da Array:");
document.writeln(valor);

//  Join
document.writeln("\nComando Join une os valores de uma Array:");
document.writeln(valor.join(" - "));

//  Reverse
document.writeln("\nComando Reverse inverte os valores de uma Array:");
document.writeln(valor.reverse());

//  Sort
document.writeln("\nComando Sort ordena os valores de uma Array:");
document.writeln(valor.sort());

//  Pop
document.writeln("\nComando Pop deleta um valor de uma Array:");

valor.pop();

document.writeln(valor);

//  Push
document.writeln("\nComando Pop insere um valor de uma Array:");

valor.push("D");

document.writeln(valor);

</script>
</pre>

</body>

</html>

Websites – Objetos – Getter e Setter – JavaScript – Linux

Publicado: 11 de abril de 2014 em JavaScript
0

Assim como é comum métodos Getter e Setter para as linguagens de programação C++ e Java, também podemos criar métodos Getter e Setter para objetos JavaScript, entretanto precisamos respeitar as diferenças do conceito de objeto para a linguagem JavaScript. Um objeto em JavaScript tem propriedades associadas a ele. Uma propriedade de um objeto pode ser explicada como uma variável que é ligada ao objeto.

getter-setter

Getter e Setter

 

Objetos

A linguagem JavaScript é projetada com base em um simples paradigma orientado a objeto. Um objeto é uma coleção de propriedades, e uma propriedade é uma associação entre um nome e um valor. Um valor de propriedade pode ser uma função, que é então considerada um método do objeto. Além dos objetos que são pré-definidos no browser, você pode definir seus próprios objetos.

Getter

Um getter é um método que obtém o valor de uma propriedade específica.

Setter

Um setter é um método que define o valor de uma propriedade específica.

Exemplo:

Neste exemplo criamos um objeto com uma única propriedade e métodos getter e setter para manipular sua propriedade.

Html / JavaScript

<!DOCTYPE html>
<html>

<head>
   <title>Desenvolvimento Aberto</title>
</head>

<body>

<h2>Desenvolvimento Aberto -Getter e Setter </h2>
<br>
<h3>JavaScript</h3>
<br>

<pre>
<script>

// Cria objeto com getter and Setter

var objeto =
{
    nome:"", 

    get retorna() { return this.nome; },

    set adiciona(x) { this.nome = x; }

};

// Seta nome do objeto - Setter
objeto.adiciona = "Desenvolvimento Aberto";

// Recupera nome do objeto - Getter
document.writeln("Objeto - O metodo Setter adiciona o conteudo");
document.writeln("Objeto - O metodo Getter retorna o conteudo: " + objeto.retorna);
document.writeln("\nA propriedade nome do Objeto tamb&#233m &#233: " + objeto.nome);

</script>
</pre>

</body>

</html>

 

Websites – Objects – New, Create, Prototypes – Inheritance – JavaScript – Linux

Publicado: 6 de abril de 2014 em JavaScript
0

É possível criar objetos herdados de outros objetos, para isto é necessário conhecer o conceito dos objetos javascript. Cada objeto javascript na verdade possui um outro objeto javascript associado a ele. Este segundo objeto é chamado protótipo, e o primeiro objeto herda as propriedades do protótipo. Para herdar um objeto em javascript é preciso criar uma função usando os comandos abaixo:

New

O operador New cria e inicializa um novo objeto. A nova palavra-chave deve ser seguida por uma chamada de função ().

Object.Prototypes

A propriedade protótipo de um objeto faz referencia ao segundo objeto chamado protótipo.

Object.Create

cria um novo objeto, utilizando o seu primeiro argumento como o protótipo do objeto.

heranca

Herança

Exemplo:

Neste exemplo criamos uma função que usa o conceito de objetos para criar heranças, e usamos esta função para herdar propriedades de um objeto e usa-la em novos objetos. Você pode ver que o objeto caminhonete recebe heranças do objeto carro, o novo objeto contém todas as propriedades herdadas e suas próprias propriedades.

Html / JavaScript

<!DOCTYPE html>
<html>

<head>
   <title>Desenvolvimento Aberto</title>
</head>

<body>

<h2>Desenvolvimento Aberto -Inheritance </h2>
<br>
<h3>JavaScript</h3>
<br>

<pre>
<script>

// Função herança

function inherit(objeto)
{

  if (objeto == null) throw TypeError();  

  if (Object.create)
  return Object.create(objeto); 

  var tipo = typeof objeto;  

  if (tipo !== "object" && tipo !== "function") throw TypeError();

  function funcao() {};
  funcao.prototype = objeto;
  return new funcao();  

}

// Cria objeto carro

var carro = { marca:"" , portas:"" , combustivel:"" };

carro.marca = "Ford";
carro.portas= "4 portas";
carro.combustivel = "Gasolina";

document.writeln("O objeto carro possui as seguintes caracteristicas:\n");
document.writeln("Marca: " + carro.marca);
document.writeln("Portas: " + carro.portas);
document.writeln("Combustivel: " + carro.combustivel);

// Herda objeto carro e cria um novo objeto caminhonete

var caminhonete = inherit(carro);

caminhonete.marca ="Ford";
caminhonete.portas= "4 portas";
caminhonete.combustivel = "Disel";

// Adiciona novas propriedades ao objeto
caminhonete.cabine = "Dupla";

document.writeln("\nHeran&#231a JavaScript\n");
document.writeln("O objeto carro passa suas propriedade para o objeto caminhonete\n");
document.writeln("O objeto caminhonete possui as seguintes caracteristicas:\n");
document.writeln("Marca: " + caminhonete.marca);
document.writeln("Portas: " + caminhonete.portas);
document.writeln("Combustivel: " + caminhonete.combustivel);
document.writeln("Cabine: " + caminhonete.cabine);

</script>
</pre>

</body>

</html>

Websites – Try…Catch – Throw – JavaScript – Linux

Publicado: 4 de abril de 2014 em JavaScript
0

Um erro de aplicativo é um erro de tempo de execução que não pode necessariamente ser evitado escrevendo um código livre de erros. Erros de tempo de execução podem ocorrer por uma variedade de razões. No entanto, nem todos os erros devem ser tratados como exceções em seu código. Em alguns casos, um erro de programa pode refletir uma condição de erro esperada ou de rotina. Neste caso, você pode querer evitar o uso de tratamento de exceção para lidar com o erro do programa. Em outros casos, um erro de programa reflete uma condição de erro inesperado que pode ser manipulado em seu código. Por exemplo, mesmo que você tenha verificado para garantir que existe um arquivo, ele pode ser excluído antes que você possa abri-lo, ou ele pode estar corrompido.

A falha do sistema é um erro de tempo de execução que não podem ser tratadas por meio de programação de uma maneira significativa. Por exemplo, qualquer método pode lançar uma exceção OutOfMemory se o Runtime é incapaz de alocar memória adicional

Um modelo de tratamento de exceção que se baseia a representação de exceções como objetos, e a separação de código de programa e o código de tratamento de exceções em blocos TRY e blocos CATCH. Pode haver um ou mais blocos catch, cada um projetado para lidar com um determinado tipo de exceção, ou um bloco projetado para capturar uma exceção mais específica que outro bloco.

Try…Catch

Marca um bloco de instruções para tentar (try) e especifica uma resposta(catch), uma exceção deve ser lançada (throw).

try-catch

Try…Catch Throw – Divisão por zero

 

Divisão por Zero

Em programação, uma tentativa de dividir um número de ponto flutuante por zero deve resultar no número infinito (positivo ou negativo) de acordo com o padrão IEEE 754 para pontos flutuantes. No entanto, dependendo do ambiente de programação e do tipo de número sendo dividido por zero (como o inteiro, por exemplo), é possível que: seja gerada uma exceção, seja produzida uma mensagem de erro, faça o programa terminar, resulte em infinito positivo ou negativo ou resulte em um valor especial não numérico (NaN).

Exemplo:

Neste exemplo executamos uma tentativa de dividir um numero inteiro por zero, na maioria das linguagens de programação está tentativa resultará em um erro em tempo de execução, em JavaScript está divisão resultará em um numero infinito, neste caso vamos criar uma exceção e lançar uma mensagem de erro para o usuário.

Html / JavaScript

<!DOCTYPE html>
<html>

<head>
   <title>Desenvolvimento Aberto</title>
</head>

<body>

<h2>Desenvolvimento Aberto -Try...Catch</h2>
<br>
<h3>JavaScript</h3>
<br>

<pre>
<script>

var n1 = 10;
var n2 = 0

document.writeln("Um numero n&#227o pode ser divido por zero\n");
document.writeln("vamos tentar dividir " + n1 + " por " + n2 );

try {
       var divisao = n1 / n2;
	    if (divisao == Infinity)
	    {

	    throw "Desenvolvimento Aberto - Impossivel dividir por zero. Valor = " + divisao;
       }
     }
catch (erro)
    {
   	alert(erro)
    } 

</script>
</pre>

</body>

</html>

Websites – For – Looping (Laços) – JavaScript – Linux

Publicado: 2 de abril de 2014 em JavaScript
0

Executa a declaração e expressão de laço repetidamente, até que a condição da expressão se torna falsa.

O FOR possui 3 parâmetros nem todos obrigatórios e escritos pela seguinte sintaxe:

FOR (parâmetro 1; parâmetro 2; parametro3)  {  conteúdo do laço; }

Parâmetros

  • Parâmetro1 = inicialização do laço, exemplo: int variável = 0;
  • Paramero2 = condição do laço, exemplo: variável < 100;
  • Parametro3 = incremento ou decremento do laço, exemplo: variável++; ou variável–;

Obs:

Um erro muito comum é escrever comandos da categoria laços com uma condição infinita, um laço interminável não permite que o compilador termine o conteúdo do comando.

for-js

For

 

Exemplo

No exemplo a seguir vamos criar uma simples tabuada:

Python

<!DOCTYPE html>
<html>

<head>
   <title>Desenvolvimento Aberto</title>
</head>

<body>

<h2>Desenvolvimento Aberto -For</h2>
<br>
<h3>JavaScript</h3>
<br>

<pre>
<script>

var i;

document.writeln("O comando For permite criar um looping para uma determinada condicao\n")

for (i=0; i<= 10; i++) 
{

var tabuada = 2 * i;
document.writeln("tabuada 2 x " + i + " = " + tabuada);
	
}

</script>
</pre>

</body>

</html>

Websites – Acentos e Caracteres Especiais – UTF-8 – Entities e ASCII – Html – JavaScript – Linux

Publicado: 1 de abril de 2014 em JavaScript
0

Você deve ter percebido que até agora todas nossa paginas Html não continham acentuação ou caracteres especiais, e se você trocou os caracteres dos exemplos para caracteres acentuados quando usou alguns de nosso exemplos anteriores, você conseguiu uma interpretação estranha do Browser, que lhe retornou alguns caracteres ilógicos ao invés do acentos no qual estamos acostumados.

Isto é porque no Linux geralmente se usa um padrão de caracteres universal chamado UTF-8, paginas web foram projetadas para serem usadas em um Browser no qual roda em vários servidores de países diferentes contendo línguas e caracteres diferentes, cada sistema operacional local possui uma codificação especial para traduzir estes caracteres para a língua local. Por exemplo em Windows alguns destes exemplos podem ser acentuados normalmente pois o Codepage usado pelo Windows pt-br é 1252 que contem todos os nossos caracteres e não está na codificação UTF-8.

Para garantir que sua pagina seja vista igualmente em todo o mundo precisamos usar uma tabela de conversão de caracteres Html chamada Entities ou podemos usar a tabela ASCII.

UTF-8

UTF-8 (8-bit Unicode Transformation Format) é um tipo de codificação Unicode de comprimento variável criado por Ken Thompson e Rob Pike. Pode representar qualquer carácter universal padrão do Unicode, sendo também compatível com o ASCII. Por esta razão, está lentamente a ser adoptado como tipo de codificação padrão para email, páginas web, e outros locais onde os caracteres são armazenados.

Caso não queira utilizar os caracteres ASCII ou Entities abaixo, você simplesmente pode definir seu documento com UTF-8 declarando a tag abaixo dentro de sua tag <head>:

<meta charset="utf-8" />

ASCII

ASCII (acrônimo para American Standard Code for Information Interchange, que em português significa “Código Padrão Americano para o Intercâmbio de Informação”, mas comumente utilizamos a sigla em inglês para referencia direta) é uma codificação de caracteres de sete bits baseada no alfabeto inglês. Cada sequencia de códigos na tabela ASCII corresponde a um caractere, comumente representados pelos 8 bits (equivalente a um byte), sendo que o oitavo bit (da direita para a esquerda) serve como um bit de paridade, utilizado para detecção de erro. Os códigos ASCII representam texto em computadores, equipamentos de comunicação, entre outros dispositivos que trabalham com texto. Desenvolvida a partir de 1960, grande parte das codificações de caracteres modernas a herdaram como base.

Tabelas de Caracteres

Você pode acessar as tabelas Entities ou ASCII para converter o seu texto nas paginas html com codificação universal:

Entities : http://en.wikipedia.org/wiki/List_of_XML_and_HTML_character_entity_references

ASCII: http://en.wikipedia.org/wiki/ASCII

USP – Entities e ASCII: http://www.ime.usp.br/~glauber/html/acentos.htm

acentos

Entities e ASCII

 

Exemplo:

Neste exemplo criamos uma pagina html em codificação UTF-8 padrão e usamos Entites e ASCII para traduzir os caracteres acentuados para o português Brasil.

Html / JavaScript

<!DOCTYPE html>
<html>

<head>
   <title>Desenvolvimento Aberto</title>
</head>

<body>

<h2>Desenvolvimento Aberto - Acentos - HTML </h2>
<br>
<h3>JavaScript</h3>
<br>

<pre>
<script>

document.writeln("Html - texto com entrada direta");
document.writeln("Este texto é incorreto pois não mostra acentuação\n");

document.writeln("Html - texto usando Entities");
document.writeln("Este texto &eacute incorreto pois n&atildeo mostra acentua&ccedil&atildeo\n");

document.writeln("Html - texto usando ASCII");
document.writeln("Este texto &#233 incorreto pois n&#227o mostra acentua&#231&#227o\n");

</script>
</pre>

</body>

</html>

Websites – While e Do While – Loops – JavaScript – Linux

Publicado: 1 de abril de 2014 em JavaScript
0

O comando While executa uma instrução ou um bloco de instruções até que uma expressão especificada seja avaliada como falsa. O comando Do While (faça… enquanto) executa um comando repetidamente até que a condição de término especificada retorne falso.

A diferença entre eles é posicionamento da expressão em suas sintaxes, a instrução Do While executará a instrução pelo menos uma vez independente se a condição for falsa.

dowhile

While – Do While

 

Exemplo:

Neste exemplo criamos um laço até que um contador atinja seu limite definido em uma expressão.

Html / JavaScript

<!DOCTYPE html>
<html>

<head>
   <title>Desenvolvimento Aberto</title>
</head>

<body>

<h2>Desenvolvimento Aberto - While - Do While </h2>
<br>
<h3>JavaScript</h3>
<br>

<pre>
<script>
document.writeln("Comandos de Loop: \n");
document.writeln("While - executa uma instrucao enquanto a expressao for verdadeira");
document.writeln("Do - While - executa uma instrucao enquando a expressao for verdadeira\n");
document.writeln("A diferenca entre While e Do While e que Do While excutara a instrucao pelo uma vez");
document.writeln("independentemente se a expressao for falsa\n");

var contador = 0;

document.writeln("While:");

while (contador < 5)
{
    document.writeln("Contador While = " + contador);
    contador = contador + 1;
}

document.writeln();
document.writeln("Do While:" + contador);

var contador = 0 ;
do {

    document.writeln("Contador Do While = " +  contador);
    contador = contador + 1;
	
} while (contador < 5 );

</script>
</pre>

</body>

</html>
Entradas mais Antigas
Entradas mais Recentes