Arquivos da categoria "JavaScript":
30/10/2008 - 21:01
Resolvi escrever o post anterior, pois percebi que algumas pessoas que estão começando com internet ou programação não sabiam o que era. Meu intuito em principio era falar apenas sobre como trabalhar com querystring no javascript.
Quando trabalhamos apenas com a interface de um projeto, ou com um site sem backend, não temos acesso a linguagens Servidor (ASP, JSP, PHP…). Isso se torna um problemão quando nos pedem que determinada página realiza uma ação, como por exemplo um alert, apartir do clique em uma outra página. Ficou confuso? Vou tentar melhorar.
Uma página, vou chamar de teste, ao ser aberta exibe um texto escrito “teste”, e mais nada. Uma segunda página, chamarei de index, exibe um link direcionado para a página “teste”, mas o projeto requer que após o clique no link, ao acessar a página seja exibido um alert dizendo “trabalhando com querystrings”. Como fazer isso? Com querystrings. Como? Utilize a função abaixo.
function QueryString(variavel){
var variaveis=location.search.replace(/\x3F/,"").replace(/\x2B/g," ").split("&")
var nvar
if(variaveis!=""){
var qs=[ ]
for(var i=0;i<variaveis.length;i++){
nvar=variaveis[i].split("=")
qs[nvar[0]]=unescape(nvar[1])
}
return qs[variavel]
}
return null
}
Explicando linha por linha:
function QueryString(variavel){ - define a função com o nome
var variaveis=location.search.replace(/\x3F/,”").replace(/\x2B/g,” “).split(”&”) - cria uma variável onde são pegadas todos itens da query.
var nvar - caria uma variável
if(variaveis!=”"){ - pergunta se a variável que criamos anteriormente com os itens da query tem conteúdo
var qs=[ ] - Cria uma variável array chamada qs
for(var i=0;i<variaveis.length;i++){ - faz um looping para percorrer todas as variáveis encontradas na query
nvar=variaveis[i].split(”=”) - define o valor da variáve
qs[nvar[0]]=unescape(nvar[1]) - define o valor para cada iten do array } - fecha o loop;
return qs[variavel] - retorna o que encontrou. Agora você tem como pegar os itens da query, mas ainda não está funcionando, pois você precisa chamar esta função de alguma maneira. Vou chamá-la através de uma escrita.
<script>
document.write('A query é:' + QueryString('id') )
</script>
A variável id chamada é a que passamos via barra de endereços. Ex.
www.leandrogarcia.com/tutorials/query/query.html?id=1
Vai ser exibido na tela A query é: 1 Abraços.
Enviado por: Leandro Garcia - Categoria(s): JavaScript, dicas, tutorial
Tags relacionadas: dicas, função, JavaScript
30/10/2008 - 19:57
Quem programa em qualquer linguagem backend para internet (ASP, PHP, Colffusion, ,NET…) conhece o que é uma querystring, mas para quem não conhece vou dar uma pequena explicação:
Querystring é a maneira utilizada para passarmos parametros para outras páginas através da barra de endereços sem a necessidade de um formulário.
Como é usado?
A estrutura é simples e não varia de linguagem para linguagem. Veja:
nomedapagina.html?variavel=conteudo&id=1
nomedapagina.html - é o endereço da página, pode ser qualquer extensão Web, PHP, ASP, ASPX…;
? - Esse é o x. É com o ponto de interrogação (?) que dizemos ao browser, ou às linguagens, que a partir dalí não é mais a página, mas sim uma variável;
variavel - é o nome que você dá, pode ser qualquer coisa. É muito comum utilizar “id” para passar um identificador;
conteudo - o que você quer passar para a outra página
& - outro ponto importante, o & indica ao browser, ou a linguagem, que a partir dalí haverá uma outra variável, ou seja, você pode passar mais do que uma variável por este método.
Um conselho: Evite passar variáveins em demasia desta maneira, pois o usuário consegue ver o conteúdo o que em algumas ocasiões deixa as aplicações mais vulneráveis.
Espero que seja útil.
Enviado por: Leandro Garcia - Categoria(s): JavaScript, dicas
Tags relacionadas: básicos, Praticas
02/10/2008 - 17:44
Vira e mexe alguns de nós, por falta de dinheiro ou por displicência, acabamos atrasando o pagaento de alguma conta.
Tinha que pagar o IPTu de minha casa, me esqueci de pagar a primeira parcela e “temendo” ir ao banco acabei atrasando algumas parcelas. Resolvi pagá-las, mas precisava saber quanto, mais ou menos, eu pagaria de juros para que pudesse sacar do banco. Pensando nisso, acabei criando um script que calcula o valor do juros e da mora.
A primeira versão, faz o cálculo de porcentagem, ou seja, você coloca o valor do boleto o valor em porcentagem da multa, o valor em porcentagem da mora e a data data para pagamento. O script calcula quantos meses está atrasado e a partir daí dá o valor que, provavelmente, você terá que pagar. Eu digo provavelmente, pois não conheço muito bem as nuances dessas coisas.
Se por um acaso vocês acharem que os cálculos estão errados e puderem me dizer o porque, eu fico agradecido, assim posso alterar e deixar bem funcional para que todos possamos usá-lo.
Clique aqui para abrir a calculadora
Enviado por: Leandro Garcia - Categoria(s): JavaScript, dicas
Tags relacionadas: calculadora, JavaScript, juros, mora
20/08/2008 - 20:33
Certa vez precisei incluir a funcionalidade de impressão em um sistema. Deveria imprimir um relatório, mas tendo a opção de imprimir ao clicar em um botão.
Pesquisei e encontrei uma fucionalidade em Javascript que faz isso, window.print();
Essa funcionalidade passou a estar disponível a partir da versão 4.0 do internet explorer. Hoje, até onde sei, está presente em todos os browsers atuais.
Qual é a vantagem desta funcionalidade?
Não obriga o usuário a ir em arquivo -> imprimir ou Ctrl+p. Além desta facilidade, lhe dá mais opções para layout.
Abaixo a função para impressão
<script type="text/javascript">
function DoPrinting(){
if (!window.print){
alert("Use o Netscape ou Internet Explorer \n nas versões 4.0 ou superior!")
return
}
window.print()
}
</script>
Esta função deve ser incluída entre as tags header de seu HTML ou em um arquivo externo .js que você deve linkar.
dentro do body
<input type="button" value="imprimir" onClick="DoPrinting" id="botao" />
Legal, mas o botão também foi impresso. Eu não preciso do botão impresso.
Temos como não imrprimir o botão, mas vamos fazer de uma maneira melhor. Vamos configurar o layout de impressão.
Como?
Através de CSS.
<style rel="stylesheet" type="text/css" media="print">
#botao{display:none}
</style>
Como formatar, vai da sua imaginação.
Abraços
Enviado por: Leandro Garcia - Categoria(s): CSS, Descategorizado, JavaScript
Tags relacionadas: função, imprimir, JavaScript, print, window
25/07/2008 - 19:45
Buenas, assiduos leitores de de vez em quando….
Boa parte de quem desenvolve interface HTML e se preocupa com a validação do código já se deparou com um problema grave: Minha página precisa conter um arquivo em flash, um vídeo do You Tube, porém isso deixa o código impossível de ser validado. Não mais… Eu lhes trago a solução pra isso.
Há duas maneiras de se fazer isso, um por Javascript, onde você inclue o código na página através de um innerHTML, ou através de um código mais suscinto. Abaixo mostro as três maneiras de se por o código.
A gerada pelo flash e o Youtube, porém errada.
<object>
<param name=“movie” value=“http://www.youtube.com/v/izSOrOmxRgE”></param>
<param name=“wmode” value=“transparent”> </param>
<embed src=“http://www.youtube.com/v/izSOrOmxRgE” type=“application/x-shockwave-flash” wmode=“transparent” width=“390″ height=“321″> </embed>
</object>
A Gerada por innerHTML
function iniciaFlash(){
var flash = “<object id=’imgflash’ width=’514′ height=’250′ align=’middle’ codebase=’http://download.macromedia.com/pub/shockwave/cabs/flash/swflash.cab#version=7,0,0,0′ classid=’clsid:d27cdb6e-ae6d-11cf-96b8-444553540000′>”+
“ <param value=’sameDomain’ name=’allowScriptAccess’/>”+
“ <param value=’images/imgflash.swf’ name=’movie’/>”+
“ <param value=’high’ name=’quality’/>”+
“ <param value=’#324b2e’ name=’bgcolor’/>”+
“ <param value=’transparent’ name=’wmode’/>”+
“ <embed width=’514′ height=’250′ align=’middle’ pluginspage=’http://www.macromedia.com/go/getflashplayer’ type=’application/x-shockwave-flash’ allowscriptaccess=’sameDomain’ name=’imgflash’ bgcolor=’#324b2e’ quality=’high’ src=’images/imgflash.swf’/>”+
“</object>”
document.getElementById(”imagensflash”).innerHTML = flash;
}
Dentro da função iniciaFlash, crio uma variável com os dados do flash e incluo dentro da div que tem o id “imagensflash”.
Após isso inicio a função dentro do onload do body.
<body onLoad=”iniciaFlash()”>
E a mais simples e talvez a melhor.
<object type=”application/x-shockwave-flash” data=”arquivo.swf” width=”390” height=”321“>
<param name=”movie” value=”arquivo.swf” />
</object>
Agora você pode escolher a que melhor se encaixar no seu projeto.
Abraços e até o próximo Post.
Enviado por: Leandro Garcia - Categoria(s): JavaScript, Praticas
Tags relacionadas: CSS, Flash, HTML, JavaScript, Praticas, W3C
19/05/2008 - 18:29
Esta é uma função simples que criei tem algum tempo e utilizo sempre que preciso abrir algum tipo de Janela em formato pop-up.
Eu poderia utilizar uma função específica para cada tipo de pop-up, mas pesem: Se um site tiver links para abrir 5 pop-ups, seria 5 códigos diferentes, ou seja, como resultado o dódigo da página seria maior e a necessidade de ampliar a bande de acesso ao site poderia aumentar.
A função:
<script type=”text/javascript”>
function abre(caminho,largura,altura,rolagem){
w = largura;
h = altura;
rol = rolagem;
largura = screen.width;
altura = screen.height;
XX = (largura-w)/2;
YY = (altura-h)/2;
janela = window.open(caminho,nm_janela, ‘width=’+w+’, height=’+h+’, left=’+XX+’, top=’+YY+’menubar=no, toolbar=no,status=no,scrollbars=’+rol+’,');
janela.focus(); }
</script>
Vamos ver linha a linha como funciona.
Linha 1
function abre(caminho,nm_janela,largura,altura,rolagem){
Esta linha é onde se inicia a função, ou seja, é o nome da função e as variáveis que ela utiliza (caminho,largura,altura,rolagem).
As linhas 2, 3 e 4, nestas linhas eu coloco o conteúdo das variáveis que eu recebi via função em uma variáel que com um nome de minha preferência. Não há a necessidade de iniciar essas variáveis, uma vez que eu poderia usar os nomes que vem entre os parênteses, mas a títuli de clareza das informações, eu prefiro utilizar.
As Linhas 5 e 6 iniciam as variáveis largura e altura com o tamanho da tela de pessoa que está acessando o site utiliza. ex. 1024×768 px
Linhas 7 e 8, estas linhas são a chave para que a pop-up seja aberta centralizada na tela. É iniciada as variáveis XX e YY com a largura(altura) - a largura(altura) que você enviou via função w(h) e divide por 2.
Linha 9 inicia a veriável que abrirá a pop-up, mais uma vez, eu não precisaria iniciar a variável, bastaria que eu escrevesse o caminho depois do igual, mas para deixar o código claro, prefiro iniciar a variável.
window.open = abre a janela
caminho, esta é a variável recebida via função. Ex. “www.leandrogarcia.com/blog”
nm_janela, está é uma outra variável reebida pela função que diz qual é o nome da Janela, é o que dirá se você clicar em um outro link com esta função se deve abrir a nova página na Janela já aberta ou em uma nova. Ex. nm_janela = um, abre uma Janela; segundo clique, nm_janela = um, abre por cima da outra janela. nm_janela = dois, abre uma nova janela
width=’+w+’, é a largura da Janela
height=’+h+, é a altura da Janela
left=’+XX+’, é onde o browser entede que deve centralizar a abertura da Janela horizontalmente
top=’+YY+’, é onde o browser entede que deve centralizar a abertura da Janela verticalmente
menubar=no,toolbar=no,status=no, diz ao browser para não exibir a barra de menus, de ferramentas e a barra de status.
scrollbars=’+rol+’, diz ao rowser se haverá barra de rolagem, yes, no e auto (eu defini como variável da função, pois posso dizer se vai ou não ter barra de rolagem, mas poderia ter iniciado com yes, no ou auto.
e por último, janela.focus(); é onde o browser recebe a ordem de excutar a variável janela
Legal, coloquei esta função no meu site, como eu faço para executála?
Simples, você chama ela via link. Ex. <a href=”javascript:abre(’http://www.leandrogarcia.com/blog’,'blog do Garcia’,'500′,’500′,’no’);”>Abrir Janela</a> ou, <a href=”#” onClick=”abre(’http://www.leandrogarcia.com/blog’,'blog do Garcia’,'500′,’500′,’no’);”>Abrir Janela</a>
A função descrita deve ser colada entre as tags <head> e </head> do seu html, ou chamada externamente, mas isso deixa pra uma outra hora.
Espero que esta Função Ajude.
Enviado por: Leandro Garcia - Categoria(s): JavaScript
Tags relacionadas: Java Script, JavaScript, Window.Open
