iMasters - Se��o: javascript

Web abrindo aplica��es locais

mauricio.junior@gmail.com (Mauricio Junior) — Thu, 04 Feb 2010 11:00:00 +0100

�

Ol�, pessoal! Estava no trabalho precisando fazer um portal de produtos criados pela empresa, para ficar mais f�cil centralizar tudo. O usu�rio entra na intranet, loga apenas uma vez e abre os programas que quiser. Por�m, bati a cabe�a na porta quando percebi que a maioria dos produtos s�o locais, isto �, funcionam localmente na m�quina do usu�rio e precisam ser instalados para o devido funcionamento. Bati com a cabe�a na parede tamb�m por perceber que ainda existem programas feitos com a linguagem VB 6.0, Delphi, DOS e outros al�m de C#.NET.

Refer�ncias:

Ferramenta de desenvolvimento: Visual Studio .NET 2008

Linguagem: C#.NET

Linguagem Script: JavaScript

Framework 3.5

�

Al�m das refer�ncias acima, o c�digo pode ser feito em qualquer ferramenta do Visual Studio .NET, uma mais nova ou mais antiga sem problema. Isso serve tamb�m para o framework.

Continuando a hist�ria, estava com problemas, pois precisava passar usu�rio e senha para que n�o fosse necess�rio logar novamente dentro do aplicativo. A id�ia foi a seguinte: o usu�rio loga no portal e, com isso, todos os sistemas aparecem pra ele, de acordo com as permiss�es. Ao clicar em um programa, o software local aparece com a tela correta e logado.

Lembrando que cada software precisa de usu�rio e senha. Ficou bem complicado fazer com que esse portal funcionasse, por�m a empresa s� usa IE, o que ficou mais espec�fico. � muito importante fazer software web que funcione em todos os browsers, mas j� que a empresa usa apenas IE, aproveitei!

Tive que fazer uma altera��o nos aplicativos para receber usu�rio e senha, ou seja, o arquivo.exe recebe usu�rio e senha criptografados para logar automaticamente.

Na pr�tica

Pesquisando na internet e estudando sobre a linguagem C#.NET, vi que o portal fica na intranet e os aplicativos ficam localmente. Portanto, n�o posso usar o Process.Start ou qualquer outro comando do C#.NET, porque n�o existe software instalado no servidor, e sim na m�quina. Tive que passar para a linguagem script, VBScript ou JavaScript. Achei um c�digo que verifica um caminho espec�fico via javascript e funciona apenas no Internet Explorer:

�<script type="text/javascript" language="javascript">

        function AbreAplicacao(caminho, tipo, usuario, senha) {

            var fso = new ActiveXObject('Scripting.FileSystemObject');

            var WshShell = new ActiveXObject('WScript.Shell');

            if (fso.FileExists(caminho))

                WshShell.Exec(caminho+' '+tipo+' ' + usuario+ ' ' +senha);

            else

                alert('A aplica��o n�o est� instalada neste computador.')

        }

    </script>

Refer�ncia: Code 1.1

Em resumo, o c�digo usa ActiveX e acessa o FileSystemObject. Depois disso, uso o WScript.Shelll, se no FileSystemObject existir o arquivo que mandei como caminho na fun��o, ele chama passando os par�metros, caso contr�rio exibe um alerta na tela falando que a aplica��o n�o est� instalada.

No primeiro momento, chamando a fun��o passando os dados via javascript funcionou perfeitamente. Agora o desafio seria executar o mesmo dado pela linguagem C#.NET na plataforma ASP.NET.

Tentei de tudo, mas n�o estava dando certo. Resumindo, o que deu certo foi criar um Label <asp:label...> dentro da p�gina chamando a fun��o javascript:

//colocar no final da p�gina

<asp:Label ID="lblScript" runat="server"></asp:Label>



                    string comando = @"<script>AbreAplicacao('C:\\Caminho da Aplicacao\\Arquivo.exe','DIGITACAO','usuario','senha')</script>";

                    lblScript.Text = comando;

Refer�ncia: Code 1.2

Assim, mesmo a p�gina web estando no servidor, chama uma aplica��o que est� localmente na m�quina do usu�rio. Resolveu o meu problema perfeitamente. � l�gico que existe uma regra espec�fica para o tipo da aplica��o que n�o mostrei aqui, mas o importante � que voc� pode usar o c�digo explicado acima para chamar aplicativos dentro do seu computador.

Lembrando que s� funciona se o site tiver HTTPS e no Internet Explorer.

Fico por aqui, espero que tenha gostado.

Server Push com Javascript e JSP

fhuggler@hotmail.com (Felipe Huggler) — Fri, 22 Jan 2010 10:30:00 +0100

Resumidamente, o conceito de ServerPush � abrir um canal de comunica��o http e ficar recebendo os dados da aplica��o sem efetuar posts. Essa tecnologia foi introduzida em 1996�por PointCast e Marimba e, em 1997, Microsoft e NetScape aplicaram�esse canal dentro de seus Browsers. Para mais detalhes, wikipedia!

Vou demonstrar como desenvolver este mecanismo de comunica��o utilizando JSP e Javascript.

Nosso exemplo ter� tr�s p�ginas:

Index.jsp
Display.jsp
Streamer.jsp

Index.jsp: nessa p�gina criaremos os frames [display.jsp e streamer.jsp] e os tratamentos javascript�para as�mensagens que chegar�o.

A p�gina display.jsp vai conter nossos objetos que ser�o atualizados. Ex: Grids, Divs, Tabelas, ou�pode ser�tamb�m uma p�gina em branco, se for apenas printar a mensagem recebida.

A p�gina Streamer.jsp ir� conter a regra de neg�cio. O grande lance aqui � a possibilidade de utilizar�a "Thread.sleep" do Jsp... Nesse exemplo estamos apenas printando de tempo em tempo um contador, mas uma implementa��o significativa seria a ida em um banco de dados resgatando os �ltimos cadastrados, as melhores ofertas de compra, etc...

Quando a aplica��o estiver rodando, o streamer.jsp enviar� o conte�do�para a fun��o push localizada no Index.jsp.

O push pegar� o conte�do e jogar� no frame "display". Podemos tamb�m acessar atrav�s do button que chamar� a fun��o SendEvent, que enviar� para o tratarMensagemPublicada a mensagem digitada no input. Nesse caso, o tratarMensagemPublicada far� um Split na mensagem e, de acordo com as condi��es, encaminhar� a mensagem para os devidos m�todos.

Fa�a o download do Exemplo

Coding Standards

walkeralencar@gmail.com (Walker de Alencar Oliveira) — Fri, 08 Jan 2010 10:00:00 +0100

Por que aprender Coding Standards?

Atualmente, fala-se um pouco sobre Code Standards. Por�m, fala-se bem mais do que h� 5 anos. Com o "boom" do Tableless, a W3C ganhou um pouco mais de visibilidade, e seus padr�es come�aram a ser praticados no meio web, abrangendo basicamente HTML, CSS, XML, etc.

O grande diferencial passa a ser notado quando se define Code Standards no desenvolvimento em linguagens como: PHP, JavaScript, etc. A Sun tem uma �tima documenta��o de Code Standards, que normalmente � seguida pelos desenvolvedores Java, e criou tamb�m, um Padr�o de Documenta��o em C�digo excelente, conhecido como JavaDoc, onde h� ferramentas que geram a documenta��o em HTML e outros formatos baseados nos blocos de documenta��o feitos no c�digo fonte.

Mais tarde, baseados nesse padr�o, surgiram: PHPDoc, JSDoc e CSSDoc, seguindo a mesma base e estrutura de documenta��o, o que facilita a tomada de decis�o com rela��o a qual padr�o de documenta��o deve-se seguir.

Qual a import�ncia?

Em se definindo e aplicando "Padr�es de Codifica��o e Documenta��o", h� um enorme ganho com:

Facilidade de implementa��o;
Melhorias no c�digo em:
- Visibilidade;
- Portabilidade;
- Reaproveitamento;
Redu��o de tempo em:
- Adapta��o de novos desenvolvedores.
- Manuten��o;
- Migra��o;
- Identifica��o, rastreamento e corre��o de erros.
Diminui��o de reescrita de c�digo por falta de documenta��o.

Nas f�bricas de software, padr�es de codifica��o, nomenclaturas e documenta��o refletem diretamente na diminui��o do aloca��o de recursos e consequentemente prazo de entrega, tempo de desenvolvimento e custo final do projeto.

Fator profissional

Por ser uma pr�tica pouco conhecida e disseminada entre desenvolvedores J�nior e Pleno, o profissional que trabalha sob coding standards destaca-se entre os demais. A necessidade/utilidade � percebida ao entrar em um ambiente de desenvolvimento com maior n�mero de profissionais, observando a realidade das f�bricas de softwares.

Com certeza, h� uma tend�ncia natural de que Code Standards seja um requisito obrigat�rio para quem � ou pretende ser arquiteto de linguagem, seja Java, PHP, Delphi ou qualquer outra. Para desenvolvedores Java � praticamente requisito indispens�vel seguir o padr�o oferecido pela SUN, e para desenvolvedores PHP j� temos �tima dissemina��o do assunto nos recentes eventos nacionais e regionais, bem como o "PHP Standards", que est� sendo discutido e elaborado por v�rios l�deres de �projetos/frameworks de renome. Em breve, teremos um padr�o a ser seguido para projetos a partir da vers�o 5.3 do PHP.

Onde encontrar informa��es:

Se voc� trabalha com PHP, h� o artigo: PHP Coding Standards falando sobre o assunto e com materiais de refer�ncia que ir�o facilitar muito sua vida. Sendo Java: Code Conventions for the Java Programming Language.

Em breve publicarei mais artigos aprofundando esse assunto que, com certeza, � bastante abrangente e importante.

Abra�os e sucesso!

Abrindo uma janela de forma modal

mauricio.junior@gmail.com (Mauricio Junior) — Tue, 08 Dec 2009 10:30:00 +0100

Ol� pessoal, gostaria de mostrar hoje uma forma pr�tica de como abrir uma janela de forma modal web, ou seja, na internet. Outro dia eu precisei disso e n�o tinha achado da forma que necessitava. N�o � das coisas mais complicadas a fazer, mas at� descobrir como chegar l�, eu penei um pouco.

Caixas de di�logo (dialog) s�o um recurso de interface muito �til em programas gr�ficos basados em janelas, quando se recorrer a uma janela secund�ria para solicitar ao usu�rio informa��es complementares. Existem dois tipos de associa��o entre uma janela de di�logo e a janela principal � qual est� associada. Uma delas � a modal, quando a abertura da janela de di�logo bloqueia qualquer intera��o na janela principal, at� que o di�logo seja encerrado.

Requisitos:

Javascript
Linguagem C#.NET
Ferramenta de desenvolvimento: Visual Studio .NET 2008

JavaScript

No meu caso, criei um arquivo .js e importei na minha p�gina .ASPX. Eu posso chamar a fun��o criada no arquivo .js de qualquer plataforma ou linguagem. No meu caso estou chamando dentro de um componente chamado GridView. Segue o arquivo (Code 1)

�/*

    ### fun��o que abre um popup de forma modal

    ### deve ser passado a url, nome, tamanho e largura

    por exemplo OnClick="dialogModal('pagina.html', 'nome', '620', '1024');

*/

function dialogModal(url, nome, nrTamanho, nrLargura) {

    eval(window.showModalDialog(url, nome,'Resizable:no; DialogHeight:'+nrTamanho+'px ; DialogWidth:'+nrLargura+'px; Edge:raised; Help:no; Scroll:no; Status:no; Center:yes;'));

    //eval(caixa);

}

Code 1

GridView

Dentro do meu gridview, tenho as colunas normais da tabela do banco e um bot�o imagem (Code 2).

�<asp:GridView ID="gridView" runat="server"

                AutoGenerateColumns="false"

                Width="100%" onrowdatabound="gridView_RowDataBound" HorizontalAlign="Center">

                <Columns>

                    <asp:TemplateField ItemStyle-Wrap="false">

                        <ItemTemplate>



                            <asp:ImageButton ID="cmdImagemGrid"

                                runat="server" ImageUrl="~/App_Themes/default/image/Doc.gif"></asp:ImageButton>



                        </ItemTemplate>

                    </asp:TemplateField>

                    <asp:BoundField DataField="Descricao" HeaderText="Crp" />

                    <asp:BoundField DataField="Sequencial" HeaderText="Passada" />

                    <asp:BoundField DataField="DataMovimento" HeaderText="Data Movimento" />

                    <asp:BoundField DataField="DataInicial" HeaderText="Inicio Transf." />

                    <asp:BoundField DataField="DataFinal" HeaderText="Fim Transf." />

                    <asp:BoundField DataField="TempoTransferencia" HeaderText="Tempo Trans." />

                    <asp:BoundField DataField="QtdDocumentos" HeaderText="Qtd. Docs" />

                    <asp:BoundField DataField="QtdFalhas" HeaderText="Falhas" />

                    <asp:BoundField DataField="Responsavel" HeaderText="Digitalizado por" />

                    <asp:BoundField DataField="PassadaId" HeaderText="Passada" />

                </Columns>

            </asp:GridView>

Code 2

O bot�o dentro do gridview est� separado, dentro da tag <ItemTemplate> (Code 3).

<ItemTemplate>
<asp:ImageButton ID="cmdImagemGrid" runat="server" ImageUrl="~/App_Themes/default/image/Doc.gif"></asp:ImageButton>
</ItemTemplate>

Code 3

C�digo C#

Para pegar esse bot�o e adicionar uma propriedade pra ele, tenho que criar o RowDataBound do componente GridView, isso dentro c�digo C#. Veja o Code 4.

protected void gridView_RowDataBound(object sender, GridViewRowEventArgs e)

        {



            if (e.Row.RowType == DataControlRowType.DataRow)

            {

                //adiciona no botao de imagem o comando javascript dialogModal no onclickClient

                ImageButton img = (ImageButton)(e.Row.FindControl("cmdImagemGrid"));



                    img.OnClientClick = "dialogModal ('ControleQualidadeImagem.aspx"','pesquisa1', '620', '1000')";

                }

        }

Code 4

Verifiquei primeiro se o tipo da linha era DataRow, depois usei o FindControl para achar o componente chamado cmdImagemGrid e ent�o adicionei o atributo OnClienteClick a esse componente, passando o nome da fun��o criada em JavaScript anteriormente.

Resultado Final

O resultado final � uma janela como a mostrada a seguir (Imagem 1)

�

Imagem 1

Espero ter ajudado. Qualquer d�vida pode entrar em contato pelo coment�rio do site.

Mensagem em JavaScript com .NET

mauricio.junior@gmail.com (Mauricio Junior) — Wed, 02 Dec 2009 10:30:00 +0100

Ol�, pessoal. Gostaria de deixar registrado aqui no iMasters a maneira f�cil e simples de mostrar uma mensagem na tela via javascript. Antigamente colocava um c�digo e agora com o Ajax, mas � melhor colocar de outra forma.

Alert

Isso n�o quer dizer que da maneira anterior n�o funcione, por�m a melhor maneira � um pouco diferente.

Antigamente, voc� colocaria o c�digo:

Response.Write("<script>alert('mensagem');</script>");

Mas, para a exibi��o de uma mensagem na tela ficar melhor, sem problemas com Ajax nem nada, uso o seguinte c�digo:

�
  ClientScript.RegisterStartupScript(Page.GetType(),
  "msg", "<script>alert('Mensagem');</script>"

Confirm

Existe a possibilidade de colocar em um bot�o uma mensagem de confirma��o antes de a funcionalidade ser realmente feita. Gosto muito desse tipo de mensagem para alertar o usu�rio.

A primeira coisa � adicionar um bot�o na parte da p�gina ASPX.

��
  <asp:Button
  id="cmdEnviar" runat="server" />

Depois basta colocar na parte C#.NET ou no arquivo .CS, .VB uma mensagem de confirma��o.

� cmdEnviar.Attributes.Add("onclick", "return
  confirm('Deseja realmente enviar?')");

�� isso a�. Espero ter ajudado!

Adicionando bibliotecas javascript ao seu tema ou plugin WordPress

stallefish@gmail.com (Marcelo Mesquita) — Wed, 18 Nov 2009 10:00:00 +0100

Normalmente, quando estamos desenvolvendo um tema ou um plugin, sentimos a necessidade de utilizar alguma biblioteca em javascript para facilitar a realiza��o de determinada tarefa. A maneira mais f�cil � sem d�vida utilizando a tag '<script>' no corpo do seu arquivo. Agora imagine que todos os desenvolvedores que utilizam jquery resolvam adicionar as chamadas � biblioteca no corpo de seus plugins. Usu�rios que possuam v�rios plugins ativos provavelmente ter�o uma baita dor de cabe�a mais cedo ou mais tarde quando esses plugins causarem algum conflito.

Como n�o podia deixar de ser, o WordPress j� tem uma solu��o para os nossos problemas. Uma fun��o chamada 'wp_enqueue_scripts' que � respons�vel por enfileirar e ordenar a chamada das bibliotecas, evitando assim a duplica��o de arquivos e, possibilitanto, o carregamento das depend�ncias antes.

A primeira coisa que voc� deve fazer � registrar a biblioteca para que o WordPress saiba que ela existe. Isso deve ser feito utilizando a seguinte fun��o:

wp_register_script($handle, $src, $deps = array(), $ver = false)

O par�metro obrigat�rio '$handle' � o identificador �nico da biblioteca, o nome pelo qual o WordPress saber� quem � quem no conjunto de bibliotecas dispon�vel. Em seguida vem o '$src', que informa o endere�o do arquivo, tamb�m obrigat�rio. Caso esse arquivo tenha alguma depend�ncia, esta deve ser informadas em '$deps' no formato de array, onde cada item do array � uma depend�ncia a ser satisfeita. Essas depend�ncias s�o informadas pelo '$handle' das respectivas depend�ncias. E por �ltimo (e menos importante) '$ver' � a vers�o do script.

N�o � poss�vel registrar um script que j� esteja registrado. Caso voc� tente, seu script ser� ignorado. Mas se for realmente necess�rio, voc� pode remover um script anterior para adicionar o seu. Isso pode acontecer quando voc� desenvolve para vers�es mais antigas do WP. Para remover um script utilize:

wp_deregister_script($handle)

Onde '$handle' � o identificador do script que voc� deseja remover.

Depois de definidos, os scripts e suas depend�ncias, voc� deve informar quais scripts devem ser carregados e onde eles ser�o carregados. Para a primeira quest�o, use:

wp_enqueue_script($handle, $src = false, $deps = array(), $ver = false)

Apesar de todos os par�metros dessa fun��o, o �nico obrigat�rio � o '$handle' que informa qual o script ser� carregado. Os outros par�metros s�o exatamente iguais aos par�metros do wp_register_script e funcionam da mesma forma. A resposta pra isso � que se o script definido pelo $handle n�o estiver registrado o WordPress utiliza o atual.

Pronto! Agora s� falta informar onde o script deve ser carregado. Nos temas, basta colocar a chamada 'wp_queue_script' no template onde a biblioteca ser� utilizada e o 'wp_head' faz o resto. Assim, se voc� pretende usar a biblioteca jquery nos resultados das buscas, adicione ao search.php a linha:

<?php wp_enqueue_script('jquery'); ?>

J� na �rea administrativa voc� precisa criar uma fun��o que carregue o script e adiciona-la � a��o 'init', por exemplo:

function load_scripts()
{
wp_enqueue_script('jquery');
}
�
add_action('init', 'load_scripts');

� isso essa explica��o tamb�m se aplica aos estilos voc� s� precisa mudar as fun��es para 'wp_register_style', 'wp_deregister_style' e 'wp_enqueue_style' respectivamente. E para conferir os scripts e estilos que o WordPress carrega por padr�o, confira o arquivo script-loader.php na pasta wp-includes.

JavaScript - dez dicas e boas pr�ticas

blog@igorescobar.com (Igor Escobar) — Wed, 11 Nov 2009 10:30:00 +0100

Recentemente alguns site e blogs v�m divulgando listas de dicas para se codificar em javascript, apresentando melhores pr�ticas de desenvolvimento e muitas dicas bacanas. Pensei que este seria um bom t�pico para se estender e compartilhar com voc�s. Neste artigo, re�no as minhas top 10 dicas e boas pr�ticas para codifica��o javascript. Espero que gostem.

1. Use o atributo defer para indicar o uso scripts externos no IE

O prop�sito do defer � avisar o script que est� sendo requisitado externamente para esperar at� que a p�gina seja carregada ou o DOM esteja preparado. O mesmo pode ser realizado atrav�s de bons m�todos n�o-obstrutivos via javascript, que usualmente inclui c�digos que previnem a execu��o de scripts antes que o DOM seja carregado por completo.

A vantagem do defer ocorre quando utilizamos o Internet Explorer, tendo em vista que � �nico browser que suporta o atributo defer. Ent�o, se voc� precisa de um r�pido script que rode �nica e exclusivamente no Internet Explorer, e voc� n�o quer que ele execute antes que o DOM esteja preparado, ent�o simplesmente adicione defer="defer" na sua tag <script> e ela ir� rapidamente tratar o seu problema. Corrigir a transpar�ncia de arquivos PNG no IE6 � uma das possibilidades pr�ticas do uso do defer.

(Edit: O atributo defer deve ser usado quando escondemos um script de outros browsers com o uso dos coment�rios condicionais� - conditional comment - que afete somente os navegadores da Microsoft - de outra maneira o script vai rodar normalmente em outros browsers.)

2. Use o CData Section para previnir erros de valida��o XHTML Strict

Muitas vezes seus scripts v�o residir em arquivos externos e chamados dentro da tag <script> dentro do� <head> do documento, ou ent�o antes do fechamento da tag </body>.

Mas este documento pode estar eventualmente sendo usado em um local que junto dele existem marca��es HTML, como abaixo:

<div>
<p>
<script type="text/javascript">
var my_variable = 100;
if (my_variable < 50) {
	// alguma coisa aqui...
}
</script>
</p>
</div>

Voc� pode notar que no c�digo acima, dentro do if, existe o s�mbolo <� que representa "menos", que � parte da sintax, correto? Este s�mbolo causa um erro de valida��o. O validador interpreta ele como um in�cio de uma marca��o ou uma tag HTML que n�o foi fechada, a n�o ser que voc� encapsule o seu c�digo com o CData, assim:

<div>
<p>
<script type="text/javascript">
//<![CDATA[
var my_variable = 100;
if (my_variable < 50) {
	// alguma coisa aqui...
}
//]]>
</script>
</p>
</div>

3. Evite palavras-chave reservadas do JavaScript quando estiver criando fun��es e identificadores

Muitas palavras s�o reservadas no javascript, ent�o voc� deve evit�-las quando forem criar vari�veis ou outros idenficadores. A lista completa de palavras-chaves do javascript segue abaixo:

break
case
catch
continue
default
delete
do
else
finally
for
function
if
in
instanceof
new
return
switch
this
throw
try
typeof
var
void
while
with

4. Evite palavras reservadas do JavaScript quando estiver criando fun��es e identificadores

Que est�o tamb�m algumas palavras reservadas, que n�o est�o necessariamente sendo usadas pela linguagem mas s�o reservadas para o uso futuro. S�o estas:

abstract
boolean
byte
char
class
const
debugger
double
enum
export
extends
final
float
goto
implements
import
int
interface
long
native
package
private
protected
public
short
static
super
synchronized
throws
transient
volatile

5. N�o mude o tipo das vari�veis depois da declara��o inicial

No javascript, tecnicamente, isso � perfeitamente legal:

var my_variable = "Esta � uma string";
my_variable = 50;

Depois que a vari�vel � inicialmente declarada como string na linha 1, na linha 2 o seu valor � mudado e o seu tipo tamb�m. Esta n�o � uma boa pr�tica e deve ser evitada.

6. N�o use vari�veis globais

Para preveinir poss�veis conflitos, em 99% dos casos, use o "var" no in�cio quando estivermos declarando uma vari�vel e seu valor. Isso faz com que a sua vari�vel exista somente no escopo da fun��o e n�o fora dela, ou seja, toda vari�vel criada pelo var s� poder� ser acess�vel dentro do escopo no qual ela foi declarada e n�o mais fora dele. Ent�o, se acontecer de voc� utilizar duas vari�veis com o mesmo valor em lugares diferentes do seu script, nenhum conflito ocorrer�.

7. Javascript � Case-Sensitive

Lembre-se do que vem a seguir: No c�digo que segue temos duas vari�veis que est�o armazenando seus valores em 2 lugares diferentes na mem�ria, e n�o um s�, como alguns podem pensar. S�o duas vari�veis completamente diferentes alocadas em lugares diferentes na mem�ria:

var myVariable = "data";
var myvariable = "more data";

8. Use o switch para lidar com multiplas condi��es

N�o fa�a isto:

if (example_variable == "cyan") {
	// fa�a algo aqui...
} else if (example_variable == "magenta") {
	// fa�a algo aqui...
} else if (example_variable == "yellow") {
	// fa�a algo aqui...
} else if (example_variable == "black") {
	// fa�a algo aqui...
} else {
	// fa�a algo aqui...
}

Fa�a isto:

switch (example_variable) {
	case "cyan":
		// fa�a algo aqui...
		break;
	case "magenta":
		// fa�a algo aqui...
		break;
	case "yellow":
		// fa�a algo aqui...
		break;
	case "black":
		// fa�a algo aqui...
		break;
	default:
		// fa�a algo aqui...
		break;
}

O segundo bloco de c�digo faz exatamente a mesma coisa que o primeiro, mas o segundo � limpo, f�cil de ler, f�cil de dar manuten��o e modificar.

9. Use o try-catch para prevenir que erros sejam expostos para os usu�rios

Encapsulando todo o seu c�digo no try-catch, voc� pode evitar que o usu�rio final nunca veja um feio erro de javascript exposto na tela. Assim:

try {
	funcaoQueNaoExiste();
} catch (error) {
	document.write("Um erro ocorreu.")
}

No c�digo acima, eu tentei chamar uma fun��o que n�o existe, para for�ar um erro. O navegador n�o vai exibir o t�pico erro "not an object" ou "object expected", mas ao inv�s disso, vai exibir um erro mais customiz�vel que eu inclu� dentro do meu "catch". Voc� pode tamb�m deixar o catch vazio para nada ser mostrado para o usu�rio, ou voc� pode criar uma fun��o que seja chamada dentro do catch que fa�a o tratamento deste erro para prop�sitos de debug etc.

Mantenha na sua cabe�a que isso pode esconder erros do desenvolvedor tamb�m, ent�o uma boa documenta��o do c�digo e coment�rios podem ser �teis neste ponto.

10. Fa�a coment�rios multi-linhas leg�veis, mas simples

Em javascript, voc� pode comentar uma linha de c�digo colocando um // no in�cio da linha. Voc� tamb�m pode criar um coment�rio em bloco como mostra a seguir: /* [coment�rio aqui ] */. Algumas vezes voc� precisa incluir um coment�rio longo, um coment�rio de mais de uma linha. Um bom m�todo para se utilizar que n�o tenha uma visual esmagador, mas � f�cil de identificar o c�digo � este a seguir:

/*
 * Este � um coment�rio multi-linha...
 * bla bla bla...
 * bla bla bla...
 * bla bla bla...
 * bla bla bla...
 */

E � isso!

Este artigo � uma adapta��o e tradu��o do texto: 10 JavaScript Quick Tips and Best Practices

Trabalhando com o componente TabContainer

mauricio.junior@gmail.com (Mauricio Junior) — Mon, 26 Oct 2009 11:00:00 +0100

TabContainer � um componente do ASP.NET Ajax Control Toolkit localizado nesse endere�o. Existem v�deos explicando como trabalhar com alguns componentes, por�m tudo em ingl�s. Veja tamb�m o site www.asp.net.

Nesse artigo, veremos como trabalhar com o componente TabContainer, pegar qual aba est� selecionada e qual o nome dessa determinada aba.

Requisitos:

Tecnologia: ASP.NET

Ferramenta: Visual Studio .NET 2008

Componentes: Ajax

Linguagens declarativas: Tags HTML e JavaScript

Primeiro Passo

Instale os componentes baixados dos sites que mencionei acima, gratuitamente. Na imagem (1.1) mostro que, al�m de instalar na m�quina os "plugins" feitos pela Microsoft, coloquei tamb�m no meu toolbox. Basta clicar com o bot�o direito em cima do toolbox e escolher a op��o Choose Items.

Imagem 1.1

Na op��o Choose Item... procurei a DLL chamada AjaxControlToolkit.dll e anexei. Automaticamente apareceram todos os componentes na tela (Imagem 1.2).

Imagem 1.2

Depois disso foi s� alegria e felicidades para usar os componentes. Arrastei o TabContainer para a minha tela. Adicionei o AutoPostBack = true, dei um nome de tabControle e comecei a olhar as propriedades.

Percebi que existia o OnClienteActiveTabChanged; isto �, na mudan�a de aba, eu posso saber qual o id atual e o nome da aba.

Antes de entrar nessa etapa, vou criar algumas abas (Refer�ncia Code 1.1)

<cc1:TabContainer ID="tabControle" runat="server"                        AutoPostBack="true">
                        <cc1:TabPanel ID="tabIndexacao" runat="server" HeaderText="Indexa��o">
                            <ContentTemplate>
                                <table style="width:100%;" cellpadding="0" cellspacing="0" border="0">
                                    <tr valign="top">
                                        <td>
                                            Prontu�rio: <asp:TextBox Width="200px" ID="txtIndexacaoProntuario" runat="server"></asp:TextBox>
                                        </td>
                                        <td>
                                            Qtde Documentos: 10
                                            <br /><br />
                                        </td>
                                    </tr>
                                    <tr valign="top">
                                        <td>
                                            Documentos: <br />
                                            <asp:ListBox ID="lstIndexacaoDocumentos" runat="server" Height="100" Width="362px"></asp:ListBox>
                                        </td>
                                        <td>
                                            Descri��o da ocorr�ncia: <br />
                                            <asp:ListBox ID="lstIndexacaoDescricaoOcorrencia" runat="server" Height="100" Width="362"></asp:ListBox>
                                        </td>
                                    </tr>
                                    <tr>
                                        <td colspan="2">Frente (Ctrl+F)&nbsp; Verso (Ctrl+V)</td>
                                    </tr>
                                    <tr>
                                        <td colspan="2">
                                            Imagem
                                        </td>
                                    </tr>
                                </table>


                            </ContentTemplate>
                        </cc1:TabPanel>

                        <cc1:TabPanel ID="tabControleQualidade" runat="server" HeaderText="Controle de Qualidade">
                            <ContentTemplate>
                                teste qualidade
                            </ContentTemplate>
                        </cc1:TabPanel>

                        <cc1:TabPanel ID="tabDuplicados" runat="server" HeaderText="Duplicados">
                            <ContentTemplate>
                                teste duplicados
                            </ContentTemplate>
                        </cc1:TabPanel>

                        <cc1:TabPanel ID="tabRedigitalizacao" runat="server" HeaderText="CPS Redigitaliza��o">
                            <ContentTemplate>
                                teste de redigitalizacao
                            </ContentTemplate>
                        </cc1:TabPanel>

Code 1.1

Note que o que delimita uma aba � um TabPanel com um <Content>. Em cada Content eu posso colocar as tags que quiser, por exemplo: <asp:TextBox...>, <asp:ListBox...> e outros. Veja o Code 1.2:

 <cc1:TabPanel ID="tabRedigitalizacao" runat="server" HeaderText="CPS Redigitaliza��o">

                            <ContentTemplate>

                                teste de redigitalizacao

                            </ContentTemplate>

                        </cc1:TabPanel>

Code 1.2

Pegando o nome e o id da aba em tempo real

Para pegar os dados em tempo real, coloquei no componente principal e n�o na TabPanel chamado OnClientActiveTabChanged="getTab". Esse nome getTab � apenas um m�todo em JavaScript (Code 1.3).

�<cc1:TabContainer ID="tabControle" runat="server"

                        AutoPostBack="true" OnClientActiveTabChanged="getTab">

                        <cc1:TabPanel ID="tabIndexacao" runat="server" HeaderText="Indexa��o">

                            <ContentTemplate>

                                <table style="width:100%;" cellpadding="0" cellspacing="0" border="0">

                                    <tr valign="top">

                                        <td>

                                            Prontu�rio: <asp:TextBox Width="200px" ID="txtIndexacaoProntuario" runat="server"></asp:TextBox>

                                        </td>

                                        <td>

                                            Qtde Documentos: 10

                                            <br /><br />

                                        </td>

                                    </tr>

                                    <tr valign="top">

                                        <td>

                                            Documentos: <br />

                                            <asp:ListBox ID="lstIndexacaoDocumentos" runat="server" Height="100" Width="362px"></asp:ListBox>

                                        </td>

                                        <td>

                                            Descri��o da ocorr�ncia: <br />

                                            <asp:ListBox ID="lstIndexacaoDescricaoOcorrencia" runat="server" Height="100" Width="362"></asp:ListBox>

                                        </td>

                                    </tr>

                                    <tr>

                                        <td colspan="2">Frente (Ctrl+F)&nbsp; Verso (Ctrl+V)</td>

                                    </tr>

                                    <tr>

                                        <td colspan="2">

                                            Imagem

                                        </td>

                                    </tr>

                                </table>





                            </ContentTemplate>

                        </cc1:TabPanel>



                        <cc1:TabPanel ID="tabControleQualidade" runat="server" HeaderText="Controle de Qualidade">

                            <ContentTemplate>

                                teste qualidade

                            </ContentTemplate>

                        </cc1:TabPanel>



                        <cc1:TabPanel ID="tabDuplicados" runat="server" HeaderText="Duplicados">

                            <ContentTemplate>

                                teste duplicados

                            </ContentTemplate>

                        </cc1:TabPanel>



                        <cc1:TabPanel ID="tabRedigitalizacao" runat="server" HeaderText="CPS Redigitaliza��o">

                            <ContentTemplate>

                                teste de redigitalizacao

                            </ContentTemplate>

                        </cc1:TabPanel>

                    </cc1:TabContainer>

Code 1.3

� bom que voc� d� uma boa olhada no c�digo, prestando aten��o aos detalhes, para entender de acordo com sua necessidade.

Em seguida, gerei um m�todo javascript chamado getTab recebendo dois par�metros de entrar como se fosse uma fun��o em c#.net. Por exemplo: getTab(sender, args). Veja o Code 1.4:

<script type="text/javascript">

    var indexTab = 0;

    var nomeTab;

    function getTab(sender, args) {

        // do what ever i want with lastTab value

        indexTab = sender.get_activeTabIndex();

        //var teste = sender.get_activeTabIndex().get_HeaderText();

        nomeTab = sender.get_activeTab().get_headerText();

        alert(indexTab + " - " + nomeTab);

    }

</script>

Code 1.4

Declarei duas vari�veis: indexTab e nomeTab. Para pegar o nome do index, escrevi esse c�digo (sender.get_activeTabIndex();) para pegar o nome do tab (sender.get_activeTab().get_headerText();) e, no final, gerei um alert com os nomes das vari�veis. Veja o resultado em tela:

Imagem 1.3

Imagem 1.4

Fico por aqui, espero ter ajudado. Qualquer d�vida ou sugest�o, deixem nos coment�rios.

YUI - por onde come�ar?

eduardocfarias@gmail.com (Eduardo Farias) — Wed, 21 Oct 2009 11:00:00 +0100

Desenvolvimento, tecnologia e mobilidade s�o assuntos do Ambiente Tecnologia, um dos tr�s que fazem parte do InterCon 2009. Na �rea Desenvolvimento & Tecnologia, que tem curadoria de Paulo Michelazzo, da F�brica Livre, est�o em pauta Google Wave, Abilo Dream Extreme, Opera Unite, Metodologias �geis e Yahoo! Query Language, palestra que ser� ministrada por Bruno Zanchet, da Equipe Yahoo! UI. Nesse artigo voc� confere um pouco dessa ferramenta. N�o deixe de fazer sua inscri��o no InterCon e participar de uma discuss�o aprofundada sobre o framework YUI.

O que � o YUI?

YUI � um biblioteca de conjuntos de utilit�rios e controles constru�da pelo Yahoo!, escrita em JavaScript, para constru��o de aplica��es web interativas e ricas, atrav�s de t�cnicas como o DOM scripting, DHTML e AJAX. YUI est� dispon�vel sob uma licen�a BSD e � gr�tis para todas as utiliza��es.

Se quiser saber um pouco mais sobre framework YUI, clique aqui.

Utilit�rio Evento: Evento simples de manipula��o e de transforma��o

Nesse artigo, iremos utilizar a propriedade "YAHOO.util.Event.addListener" que � encontrada nas bibliotecas "build/event/event-min.js" e "build/yuiloader/yuiloader-min.js"

O YUI Event Utility � um simples e poderoso recurso para a cria��o de eventos de aplica��es no navegador. Iremos tamb�m verificar o evento que poder� ser usado dentro de um manipulador de eventos para proporcionar maior controle.

Para ilustrar, vamos criar tr�s caixas atrav�s de div's e tr�s mensagens de alerta. Quando ocorrer eventos do tipo click, over ou out do mouse, aparecer� uma mensagem. Preste aten��o que n�o ser� colocado nenhum tipo de c�digo javascript incorporado no HTML.

Abaixo o c�digo HTML

Foram criados 3 div's com identificadores, n�s iremos criar um arquivo js para referenciarmos os controles do yui com o HTML.��

Abaixo o script exemplo.js

Estudando melhor o c�digo, d� para ter id�ia de como fica mais l�gico e entendido trabalhar com o framework YUI.

Esse simples exemplo servir� como par�metro para desenvolvermos aplica��es mais complexas que irei disponibilizar nos pr�ximos artigos:

Carrossel de Noticias no YUI
Calend�rio de eventos do YUI

Abra�os e at� a pr�xima.

Adicionando bibliotecas javascript ao seu tema ou plugin Wordpress

stallefish@gmail.com (Marcelo Mesquita) — Wed, 30 Sep 2009 11:00:00 +0100

Normalmente quando desenvolvemos um tema ou um plugin, sentimos a necessidade de utilizar alguma biblioteca em javascript para facilitar a realiza��o de determinada tarefa. A maneira mais f�cil �, sem d�vida, utilizando a tag '<script>' no corpo do seu arquivo. Agora imagine que todos os desenvolvedores que utilizam jquery resolvam adicionar as chamadas � biblioteca no corpo de seus plugins. Usu�rios que possuam v�rios plugins ativos provavelmente ter�o uma baita dor de cabe�a, mais cedo ou mais tarde, quando esses plugins causarem algum conflito.

Como n�o podia deixar de ser, o WordPress j� tem uma solu��o para os nossos problemas. Uma fun��o chamada 'wp_enqueue_scripts', que � respons�vel por enfileirar e ordenar a chamada das bibliotecas, evitando assim a duplica��o de arquivos e possibilitando o carregamento das depend�ncias antes.

A primeira coisa que voc� deve fazer � registrar a biblioteca para que o WordPress saiba que ela existe. Isso deve ser feito utilizando a seguinte fun��o:

wp_register_script($handle, $src, $deps = array(), $ver = false)

O par�metro obrigat�rio '$handle' � o identificador �nico da biblioteca, o nome pelo qual o WordPress saber� quem � quem no conjunto de bibliotecas dispon�vel. Em seguida vem o '$src', que informa o endere�o do arquivo, tamb�m obrigat�rio. Caso esse arquivo tenha alguma depend�ncia, esta deve ser informada em '$deps' no formato de array, onde cada item do array � uma depend�ncia a ser satisfeita. Essas depend�ncias s�o informadas pelo '$handle' das respectivas depend�ncias. E por �ltimo (e menos importante) '$ver' � a vers�o do script.

wp_deregister_script($handle)

Onde '$handle' � o identificador do script que voc� deseja remover.

Depois de definidos os scripts e suas depend�ncias, voc� deve informar quais scripts devem ser carregados e onde eles ser�o carregados. Para a primeira quest�o, use:

wp_enqueue_script($handle, $src = false, $deps = array(), $ver = false)

<?php wp_enqueue_script('jquery'); ?>

J� na �rea administrativa voc� precisa criar uma fun��o que carregue o script e adicion�-la � a��o 'init', por exemplo:

function load_scripts()
{
wp_enqueue_script('jquery');
}
�
add_action('init', 'load_scripts');

� isso. Essa explica��o tamb�m se aplica aos estilos, voc� s� precisa mudar as fun��es para 'wp_register_style', 'wp_deregister_style' e 'wp_enqueue_style', respectivamente. E para conferir os scripts e estilos que o WordPress carrega por padr�o, confira o arquivo script-loader.php na pasta wp-includes.