Jul.20

Workshop Javascript – FUCAPI / Alexandre Rocha

Anotações sobre o Workshop de Javascript proposto pelo nosso colega Alexandre Rocha!

— RIA —

Interface Rica: Interface diferente das propostas até os anos 90 (cliente/servidor) onde não possuia interface interativa com usuário, eram apenas formulario para envio de dados e que aguardavam o processamento do servidor. Com a inteface rica geralmente possuimos requisições assincronas que permitem uma maior utilização do usuário sem depender de uma resposta imediata do servidor.

Tecnologias:  DHTML (javascript + DOM + CSS) , Ajax, Json (Javascript Object Notation).

Funcionalidades: Drag and Drop, auto-complete, efeitos visuais e etc.

Ganhos: Otimização do uso da rede, do servidor e melhor resposta para os eventos da UI (Interface de Usuário)

Restrições: Processamento por parte do Cliente, perda de integridade, não são indexados por sites de busca e alta complexidade do desenvolvimento e nos testes.

— Javascript —

CrossBrowser: São os comandos que funcionam em todos/maioria dos browsers.

Tipagem: Fraca, dinâmica e implícita. (Uma variavel que guarda um valor inteiro, pode facilmente ser alterada por um outro tipo como por exemplo String)

Case Sensitive: ou seja uma variavel declarada em minuscula é diferente de uma variavel declarada em maiuscula:


var a = "teste";

var A = "teste";

**: Uma das coisas mais importantes para se trabalhar com interface rica é requisições assincronas.

Tipos Primitivos: String, Number, Boolean, Undefined (não declarado), null.

Códigos

Trabalhar com arrays é bem simples com javascript podemos trabalhar da seguinte maneira:


var meuArray = new Array();

//Para adicionarmos um elemento podemos utilizar:

meuArray.push("1");

//ou Então:

meuArray[0] = "1";

Podemos declarar uma lista pre-definida também:


var brinquedos = ["carrinho", "video-game", "bola"];

//inclusive caso queiramos alterar o separador dessa lista basta utilizarmos o comando "join"

//sendo assim será impresso da seguinte maneira: "carrinho~vide-game~bola";

document.write(brinquedos.join("~"));

Arrays Multidirecionais (Matriz) também podem ser implementados e um detalhe que um indice nao precisa ser um valor numérico:


var arr = new Array();

arr['comida'] = new Array();

arr['bebida'] = new Array();

Formularios

Para pegar todos os formularios existentes na pagina com javascript é bem simples:


var formularios = document.forms;

De modo que é retornado uma lista com todos os formularios presentes na pagina

— Orientação a Objetos —

Trabalhar com orientação a objetos em javascript é bem interessante, podemos criar classes estáticas e classes que podem ser instanciadas (utilizam funções anônimas).

Classe Estática:


var Pessoa = {

this.nome : null,

this.idade : null,

init : function(nome, idade){

this.nome = nome;

this.idade = idade;
}

}

Classes que podem ser instanciadas:


var Pessoa = function(nome,idade){

this.nome = nome,

this.idade = idade,

}

//Com isso nos podemos instanciar um novo objeto do tipo pessoa:

var p1 = new Pessoa("Hussama",21);

Encapsulamento:

Podemos melhorar com as boas práticas de OO utilizando encapsulamento. Só serão enxergados fora da classe os atributos e métodos que possuem o this. como prefixo, os demais são considerados private e por conversão devem possuir o prefixo _.

Recriando a classe pessoa ficaria assim:


var Pessoa = function(nom){

nome = nom,

this.setNome : function(n1){

nome = n1;

},

this.getNome(){

return nome;
}

};

JSON —

Para retornar um objeto a partir de uma String Json é só utilizar o eval:


var objeto = eval("{ nome : 'Hussama', idade : '18' }");

JavaScript

Feb.01

Como ler um ItemFileReadStore com DOJO?

Boa tarde Pessoal, tudo bem?

Estes dias estava pesquisando como poderiamos fazer para ler um temFileReadStore do DOJO que é alimentado por meio de uma URL, encontrei código que me ajudou bastante nessa tarefa, aqui segue o mesmo:

Exemplo de formato JSON:

{items: [{nomeCompleto: 'USUARIO DE TESTES'}]}

Código para leitura do JSON:

var store = new dojo.data.ItemFileReadStore( { url: 'enderecoURL' });

store.fetch( { query: { nomeCompleto: '*' },
onItem: function(item) {
console.log( 'Nome Completo Resgatado: ', store.getValue( item,'nomeCompleto' ) );
}
});

Espero que ajude!

JavaScript,DOJO

Dec.11

Como gerar documentação estilo javadoc para códigos JavaScript? (JSDOC)

Bom dia pessoal, tudo bem?

Esses dias estou pesquisando algumas formas de gerar documentação de código javascript, mais especificamente código dojo.

Pesquisando encontramos uma api que faz isso muito bem que é a JSDOC, e uma implementação dessa api para utilização no maven que é a JSDOCTK:

Endereço do Projeto:

http://code.google.com/p/jsdoctk-plugin/

Lá tem tudo explicadinho relacionando instalação, funcionamento e anotações!

Abração!

Spring Security,JavaScript

Nov.21

Redirecionando página / iframe / pop-up com Javascript!

Pessoal, temos uma maneira bem simples de redirecionar uma página com javascript.

 

Basta colocar o comando abaixo na sua função:


window.location.href = "enderecoDaPagina";

 

Redirecionando paginas contendo iframe:

Quando estamos na página mais especificas e queremos redirecionar a página que está chamando os iframes basta utilizar o comando abaixo:


top.location = "enderecoDaPagina";

 

Quando estamos nas especificas e queremos redirecionar apenas elas basta utilizar:


self.location = "enderecoDaPagina";

 

Abração!

JavaScript

Nov.16

Como deixar a barra de scroll sempre em baixo numa DIV ou TEXTAREA? Javascript – JQuery

Iae pessoal, tudo bem?

Estes dias estavamos enfrentando um probleminha relacionando textarea, limitação de caracteres e scrollbar, sempre que o limite era atingido a função implementada para fazer a checagem fazia uma operação que subia o scroll para o inicio do textarea, o que dava um efeito meio ruim para o usuário, feito isso pesquisamos e achamos uma solução bem simples que deixa o scroll sempre em baixo, tirando esse “bug” xD

Segue o código utilizando JQUERY:


$("#nomeCampoOuDiv").scrollTop($("#nomeCampoOuDiv")[0].scrollHeight);

Codigo Utilizando JavaScript:


document.getElementById("idCampo").scrollTop = document.getElementById("idCampo").scrollHeight;

Só lembrando: A maioria das implementações efetuam uma operação com subString assim que o limite é atingido, entao nesse momento a configuração do scroll deve ser setada.

HTML,JavaScript

Nov.08