Leandro Garcia

Trabalhando com querystring e Javascript

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.

http://tutoriais.leandrogarcia.com/query/query.html?id=1

Vai ser exibido na tela A query é: 1 Abraços.

• Nenhum comentário
• Comentar
• Permalink
• Compartilhe

Querystring

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.

• Nenhum comentário
• Comentar
• Permalink
• Compartilhe

Síndrome da segunda-feira

Talvez você não conheça por este nome, talvez você conheça como síndrome do boa noite do fantástico, etc., mas dúvido que você nunca tenha sentido isso, ou sente.

Você já se perguntou, porquê suas segundas-feira costumam ser logas e chatas (Não estou falando do seu companheiro de trabalho que é alto e foi apelidado de segunda-feira), porquê é o dia típico para você se atrasar ou porquê você já quis chutar tudo e ir vender cocô na praia?

Te respondo, você está mal empregado.

Não é mal empregado apenas no sentido financeiro, mas no sentido psicológico.

Você pode ter um excelênte salário, pode viajar pela empresa, pode trabalhar perto de sua casa, pode ter benefícios, pode ter diversos outros itens que a sociedade julga ser requesitos ideais para se avaliar se você está bem empregado, mas mesmo com tudo isso você ao acordar no domingo sofre ao pensar que amanhã é segunda.

Isso acontece porque você não gosta do que você faz ou não gosta da empresa que você trabalha.

A maior parcela da culpa por isso, é da empresa, ou digamos, da sua fonte de renda. As empresas lentamente estão acordando e percebendo que um funcionário feliz é um funcionário que produz mais, porém a grande maioria ainda trata os funcionários como meros “escravos vendedores de mão de obra” e que se não gostarem de como são tratados haverão outros para tomar seu lugar. Sim haverão outros, mas serão outros que terão o mesmo tipo de problema, não produzirão o que podem…

As empresas precisam acordar e perceber que seus funcionários são a roda matriz de seu negócio, que um funcionário feliz, é um funcionário que trabalha mais e melhor, produz mais e com menos erros.

Lentamente algumas empresas passaram a entender a verdadeira razão da área dos recursos humanos, estão percebendo que o RH não é DP, que o RH cuida do bem-estar dos colaboradores, afinal essas pessoas passam no mínimo 6 horas dentro da empresa.

Quando será que todas as empresas passaram a ver seus funcionários como seres humanos? Dúvido que estarei vivo para ver isso.

Agora, as empresas não são as únicas culpadas pela síndrome da segunda-feira. Você também o é. Uma vez que você tem o poder de mudar seu ambiênte de trabalho ou de empresa, tentem ver sua ocupação não como uma obrigação, mas como uma parte de seu dia. Um dia tem 24 horas, se contarmos que você trabalha 8, mais uma hora de almoço mais 2 horas de trajeto, menos 8 horas de sono, te restam 5 horas para viver, por que não aproveitar as outras horas?

• Nenhum comentário
• Comentar
• Permalink
• Compartilhe

Unidades de Medida em CSS: em

Sempre que trabalhamos com CSS utilizamos algum tipo de unidade de medida para fontes ou margins…

A unidade mais comumente utilizada é o PX(Pixel), que é uma unidade relativa assim com o “EM”. Muitos dizem que o “em” é melhor para se utilizar em locais onde há um script de zoom nos textos.

Segundo o Maujor

A unidade de medida – em

A unidade de medida de comprimento em referencia-se ao tamanho da fonte (letra) do seletor onde for declarada. Quando em for declarada para a propriedade font-size referencia-se ao tamanho da fonte (letra) do elemento pai. Quando em for declarada para o elemento raiz do documento (p. ex: <html> em documentos html) referencia-se ao valor inicial (default) do tamanho de fonte (letra).

Os exemplos abaixo esclarecem as definições:

h1 { line-height: 1.2em }

line-height de <h1> será 20% maior do que o tamanho das letras de <h1>

h1 { font-size: 1.2em }

font-size de <h1> será 20% maior do que o tamanho das letras herdado por <h1> p.ex.: se h1 estiver contido numa div com font-size=10px então font-size de h1 = 12px

1em = 16px

Caso deseje começar a utilizar o em, existe uma calculadora on-line para tal no link abaixo.

Calculadora Em

• Nenhum comentário
• Comentar
• Permalink
• Compartilhe

Tabela ASCII

Eu cheguei a usar essa tabela algumas vezes quando programava para desktop, depois não mais precisei, porém acredito que seja interessante termos em mão caso precisemos.

Segundo o wikipedia

ASCII (acrônimo para American Standard Code for Information Interchange, que em português significa “Código Padrão Americano para o Intercâmbio de Informação”) é uma codificação de caracteres de sete bits baseada no alfabeto inglês. Desenvolvida a partir de 1960, grande parte das codificações de caracteres modernas a herdaram como base.

A codificação define 128 caracteres, preenchendo completamente os sete bits disponíveis. Desses, 33 não são imprimíveis, como caracteres de controle atualmente obsoletos, que afetam o processamento do texto. Exceto pelo caractere de espaço, o restante é composto por caracteres imprimíveis.

Link da tabela

• Nenhum comentário
• Comentar
• Permalink
• Compartilhe

Calculadora de Juros

Vira e mexe alguns de nós, por falta de dinheiro ou por displicência, acabamos atrasando o pagamento 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

• 7 comentários
• Comentar
• Permalink
• Compartilhe

O que é e para que serve um DOCTYPE?

O que é?

O doctype é a maneira de você dizer para qualquer navegador como ele deve agir ao ler seu código HTML.

Uma estórinha…

Certa vez Joãozinho, programador web experiente e usuário de firefox, programou seu site vendo-o apenas no firefox. Ele já esperava que quando fosse abrir pelo Internet Explorer fosse acontecer alguns problemas de layout, normal, porém o que ele viu deixou-o perplexo… Seu site, todo seu trabalho de dias e horas estava totalmente quebrado. Xingou a Microsoft por seu software. Resolveu abrir no Opera, no Safari, no Google Chrome, e… Tudo estranho. Joãozinho ficou desesperado, arrancando seus cabelos, mas como programador experiente que é, parou. Saiu, se acalmou e foi avaliar seu código. Seu primeiro passo foi validar seu código via W3C e para sua surpresa, o erro era simples, faltava o DOCTYPE.

Moral da estória… preste atenção no que você faz!

Por que a falta do DOCTYPE no site do João zinho causou tantos problemas?

Porque cada browser tem um padrão próprio de renderizar o HTML sem DOCTYPE.

Bela estória Garcia. Mas me diga uma coisa, Que tipos de DOCTYPES existem e onde colocá-los em meu código?

Até onde sei são quatro tipos para cada compilação HTML (HTML 4.0, HTML 4,1, XHTML, etc).

Os DOCTYPES devem ser a primeira coisa que um browser lê em seu código HTMl, ou seja, na primeira linha.

Quais são eles?

Strict, Transitional e Frameset.

XHTML STRICT

<!DOCTYPE html PUBLIC “-//W3C//DTD XHTML 1.0 Strict//EN” “http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd”>

O Strict é o “melhor” uma vez que ao dizer para um browser renderizar com ele, você está dizendo que seguirá rigorozamente os padrões.

XHTML Transitional

<!DOCTYPE html PUBLIC “-//W3C//DTD XHTML 1.0 Transitional//EN” “http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd”>

Com este você diz ao Browser que seu código está em transição, não necessáriamente seguirá rigorozamente os padrões, mas não fará um “ninho de  ratos”

XHTML FRAMESET

<!DOCTYPE html PUBLIC “-//W3C//DTD XHTML 1.0 Frameset//EN” “http://www.w3.org/TR/xhtml1/DTD/xhtml1-frameset.dtd”>

Já o Frameser, ser para renderizar os enfadonhos e arcáicos Frames.

• 4 comentários
• Comentar
• Permalink
• Compartilhe