Jan.01

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
Share this Story:
  • facebook
  • twitter
  • gplus

Leave a comment

Comment