Dicas Técnicas BufaloInfo

DHTML : Recuperar variável da Querystring pelo javascript

Não era uma coisa muito comum, mas hoje, com a Web 2.0 e muitos blogs (Live, BlogSpot, WordPress, etc) permitindo personalizações, surgiu esta necessidade : obter, via javascript, um parâmetro que tenha sido passado por transmissão GET.

Exemplo de uma transmissão GET : http://meusite/minhapagina.htm?v=1

Sendo que v=1 é uma variável de valor 1 transmitida via GET. Observe que a extensão da página pode ser qualquer uma, htm, asp, aspx, o que for.

O trecho de código abaixo simplifica a recuperação do valor da variável :

<script type='text/javascript'>
var request = { getParameter: _getParameter };

function _getParameter(querystring)
{
var querystr = new Array();
loc = window.location.search.substr(1).split('&');
if ((loc!='')&&(loc!=null)) {
for (var icnt=0;icnt< loc.length;icnt++)
{
var q = loc[icnt].split('=');
querystr[q[0]] = q[1];
}
return querystr[querystring];
}
else
{
return(null);
}
}
</script>

Temos no código uma função, _getParameter. A primeira linha do script, fora da função, realiza uma tarefa inusitada :

{getParameter : _getParameter} está fazendo a criação dinâmica de uma instância de uma classe (classe esta não definida), sendo que o método getParameter da classe será a função _getParameter.

A função _getParameter, por sua vez, recebe um parâmetro chamado querystring, que será o nome da variável que está sendo buscada.

Esta inteligente artimanha do javascript nos permitirá, em qualquer parte do script javascript, utilizar a seguinte sintaxe :

request.getParameter("v")

Recebendo de volta o valor da variável "v" contida na querystring. Interessante, não ?

Mas vamos analisar melhor o código :

O método "search" do objeto location extrai apenas a parte após a "?" (inclusive) na URL.

O substr(1) elimina a "?", que é o caracter 0

O split("&") irá dividir toda a string em pedaços, criando um array, separando a string exatamente a cada caracter "&" que for encontrado. O caracter "&" representa uma separação de duas variáveis na querystring.

Fazemos então um laço através de cada item do vetor para gerar um array com as variáveis que foram transmitidas via querystring.

Para cada item do "loc" é feito um split, separando a string pelo sinal de "=" e gerando mais um array, "q".

Preenchemos então o array querystr utilizando mais um interessante truque possível no javascript : O array não é indexado numericamente, mas indexado por chaves, que são os nomes das variáveis, que estão na posição q[0], sendo que cada elemento é preenchido com o valor da variável, que encontra-se em q[1].

Por fim utilizamos a variável querystring, que contém o nome da variável que o programador deseja, para retornar o elemento correto do array querystr.

O javascript guarda para nós muitos segredos interessantes e na era da web 2.0 investiga-los pode render bons frutos.

DHTML : Utilizando recursos avançados do browser

Frequentemente temos a necessidade de utilizar alguns recursos mais avançados no browser, via javascript.

Por exemplo : Imprimir sem mostrar um diálogo de impressão, fechar sem pedir confirmação, entre diversas outras operações.

Para podermos ter um controle do browser a este nível devemos inserir na página uma tag OBJECT com o objeto WebBrowser.

O classID do objeto que precisa ser inserido de acordo com a versão do browser. Então precisaremos fazer a montagem da tag OBJECT dinamicamente via javascript.

Podemos utilizar uma variavel para identificar os recursos do browser e assim determinar o classID a ser utilizado, veja :

<script language="JavaScript" type="text/javascript">
DA = (document.all) ? 1 : 0
</script>

Precisamos então montar a tag <OBJECT> utilizando um clsID conforme o valor da variável DA :

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

If DA Then
wbvers="8856F961-340A-11D0-A96B-00C04FD705A2"
Else
wbvers="EAB22AC3-30C1-11CF-A7EB-0000C05BAE0B"
End If
document.write("<object ID=""WB"" width=0 height=0 classid="" clsid:")
document.write(wbvers & """> </object>")
</script>

Pronto ! Temos um objeto WB que podemos utilizar no javascript para manipular recursos avançados do browser.

Por exemplo :

WB.ExecWB(6,2) : Imprimir sem mostrar perguntas ao usuário
WB.ExecWB(45,1) : Fechar o browser sem perguntar nada

Existem muitas outras funções que o ExecWB pode realizar. A página em http://flytang.spaces.live.com/blog/cns!597FF55AA8CE68FF!313.entry cita algumas, mas uma outra opção para descobrir todas é inserir um objeto ActiveX WebBrowser em um formulário windows (não vale o webbrowser do .NET, tem que ser o ActiveX direto) e observar os parâmetros e Enums envolvidos com a ExecWB

Importante : Infelizmente isso deixou de rodar a partir do IE 7 e segundo alguns também apresenta problemas com o SP 2 do XP. Assim que identificar uma alternativa, publicarei.

DHTML : Identificar se um popup foi bloqueado

Com os atuais bloqueadores de popup, essa é uma necessidade constante hoje.

Mas resolver isso é simples: basta verificar o objeto retornado pelo window.open

Veja :

function AbrindoPopUp()
{
var janela;

janela = window.open("Seu popUp", "ATRIBUTOS","POPUP.HTM");
if(janela == null)
alert("FOI BLOQUEADO!");

}

Se a janela retornada pelo window.open for null, então foi bloqueado.

DHTML : Copiando código para o clipBoard

Especialmente em sites que exibem muito código, é interessante fornecer aos usuários a possibilidade de copiar o código para o clipBoard para que este seja colado em uma ferramenta de desenvolvimento.

Podemos utilizar código javascript para fazer a cópia para o clipBoard de forma que apenas clicando em um botão ou link o código seja copiado para o clipBoard, simplificando a visa do visitante.

Veja uma função javascript para realizar a cópia para o clipBoard :

function copyToClipboard(pre){
if(document.getElementById||(document.all && !(document.getElementById))){
textarea1.value = pre.innerText;
var Copied = textarea1.createTextRange();
Copied.execCommand("Copy");
alert("Copied to clipboard.");
}
}

A função recebe como parâmetro uma variável PRE, que pode ser, por exemplo, uma tag PRE na página.

O primeiro IF da função é uma verificação se estamos trabalhando realmente no internet explorer, porque o que vem depois é código específico do IE.

Primeiro o conteúdo do PRE (innerText) é passado para um objeto textArea, este objeto já estava na página, oculto.

No objeto textArea disparamos o método createTextRange, este método nos dará o objeto sobre o qual poderemos fazer a cópia para o clipBoard.

Por fim, utilizamos o método execCommand("Copy") para copiar o texto (código) para o clipBoard. Observe que "Copy" é um parâmetro, o método execCommand aceita inúmeros outros parâmetros úteis.

Para saber mais sobre o execCommand : http://msdn.microsoft.com/library/default.asp?url=/workshop/author/dhtml/reference/methods/execcommand.asp

Para ver uma lista dos parâmetros aceitos pelo execCommand : http://msdn.microsoft.com/library/default.asp?url=/workshop/author/dhtml/reference/commandids.asp

DHTML : Habilitando o botão RSS no Windows Vista (IE7)

O novo IE 7 que vem com o Windows Vista possui um botão chamado RSS, bem destacado na barra superior.

Se entramos em um site qualquer e este site possui um fornecimento de RSS, o botão fica habilitado, indicando isso e permitindo ao visitante assinar o feed.

Mas afinal, como o IE vai saber se um site tem ou não RSS ? O site tem que avisar isso ao IE 7 de alguma forma, não tem ?

Exatamente, tem. Isso é feito através de uma tag link alternate, veja como fica

<link rel="alternate" type="application/rss+xml" title="CelulasRio" href="http://rss.groups.yahoo.com/group/CelulasRio/rss">

Este exemplo foi tirado do site do yahoogrupos.

Desta forma sempre que estiver disponibilizando RSS passe a utilizar a tag link alternate, isso passará a ser muito importante.

DHTML : Fazendo acentuação em arquivos .JS

Muitas vezes utilizamos o javascript para gerar mensagens e interatividade com o usuário. Isso nos leva a usar muitas mensagens acentuadas, dada as características de nossa lingua.

Porém quando utilizamos arquivos .JS nem sempre esses caracteres são reconhecidos pelo client. As mensagens podem muitas vezes ser distorcidas, gerando problemas para a aplicação.

Para evitar isso podemos utilizar um atributo a mais na tag script, indicando o characterset que utilizaremos, veja :

<script language="javascript" src="biblioteca.js" CHARSET="ISO-8859-1"></script>

Com esse atributo a mais os acentos serão interpretados corretamente dentro do arquivo JS

Obs : Dica produzida com auxilio de Leandro Ribeiro (http://br.thespoke.net/MyBlog/Lele_Ribeiro/MyBlog.aspx)

DHTML : Inserindo em seu site o seu status no MSN

É possível inserir em seu site o seu status no MSN (ON/OFF), veja como isso pode ser feito :

1) Adicione ao seu MSN o contato: msnbot9@bencastricum.nl esse contato é um BOT que informa n informações. Para quem está lembrado dos BOTs das salas de bate papo de IRC é a mesma coisa. Você irá precisar dele apenas para pegar o seu UID do MSN.

2) Logo após de adicionar o BOT abra uma janela de chat com ele e digite !uid para saber o seu UID do MSN. O BOT irá retornar a sua chave.

3)Com o UID em mãos, insira-o no lugar das ## na seguinte URL: http://www.bencastricum.nl/msn/status.php/##.png

4) Digite a URL com o seu UID no seu Browser e você poderá ver o seu status

5) No seu site insira uma imagem apontando para esta URL da seguinte forma :
<img src="http://www.bencastricum.nl/msn/status.php/##.png "> (trocando o ## por seu uid no MSN.

Desta forma você terá seu status do MSN em seu site.

O serviço fornecido por www.bencastricum.nl é um serviço de terceiros, sem ligação direta com a MS.

Esta dica foi obtida no blog de Rodrigo Kono, em http://br.thespoke.net/myblog/kono/myblog.aspx

DHTML : Fazendo entrada na web apenas em Maiúsculas

Existe um pequeno truque simples mas muito útil com CSS : Converter todo o conteúdo sendo digitado pelo usuário para maiúsculas.

Basta inserir o seguinte na página :

<style>.upper{text-transform : uppercase;}</style>

Com este trecho criamos a classe upper (classe css) que irá transformar textos em maiúsculas. Para completar o trabalho devemos inserir o seguinte nas tags dos inputs :

class="upper"

Pronto, tudo o que o usuário digitar nestes inputs sairá em maiúscula

DHTML : Deixar imagem transparente usando CSS

O CSS possui muitos recursos interessantes, alguns específicos para o Internet Explorer, mas isso não é problema nos dias de hoje. Veja um exemplo :

<DIV STYLE="filter:alpha(opacity=50, style=2); height:1">
<img src="SuaFoto.jpg" width="640" height="410" alt="" border="0">
</DIV>

Opacity - Apresenta o grau de transparência do objeto e seu valor refere-se a
%. Opacity=100 apresenta um objeto totalmente opaco e opacity=0 um objeto
totalmente invisível.
Style - Seus estilos podem ser 0 (uniforme), 1 (linear), 2 (radial) ou 3
Retangular.

Um recurso interessante e fácil de implementar

DHTML : Mudando o Texto de Maneira Aleatória:

Se você quer dar uma impressão de atualização constante em seu site, mas não tem como atualizá-lo sempre, use um pequeno código em JavaScript que gerencia aleatoriamente, textos pré-definidos.

Com esse código, a cada nova visita ou atualização, o usuário verá um texto diferente no site.

Para fazer isso, basta acrescentar no lugar que você desejar em sua página o seguinte código:

<Script Language="JavaScript">
hoje = new Date()
numero_de_textos = 5
segundos = hoje.getSeconds()
numero = segundos % numero_de_textos
if (numero == 0){
texto = "Aqui fica o primeiro texto"
}
if (numero == 01){
texto = "Aqui fica o segundo texto"
}
if (numero == 02){
texto = "Aqui fica o terceiro texto"
}
if (numero == 03){
texto = "Aqui fica o quarto texto"
}
if (numero == 04){
texto = "Aqui fica o quinto texto"
}
document.write('' + texto +'')
</script>

Mude o texto para a frase que você quiser e caso queira acrescentar novos textos e só aumentar o número de textos e acrescentar um IF antes de document.write.

Observe que dentro dos parentêses ao lado de document.write, são apóstrofos e não aspas.

Patricia Daltro

Inscrições abertas para Treinamento de Webdesigner!
Turmas as sábados (9hs às 18 hs) ou de 2ª a 6ª feira (8:30 hs às 12:30)
Consulte o calendário no site da Búfalo e faça logo sua inscrição!