Arquivo da categoria: JavaScript

Aprenda tudo ou quase tudo sobre JavaScript.

Trocando itens de ListBoxes via JavaScript


Olá caro leitor! Neste tutorial você aprenderá de uma forma fácil e detalhada a trocar ítens entre ListBoxes através de um simples código JavaScript, uma das mais usadas ferramentas para programação Web/Client. Vamos então ver alguns conceitos básicos,para alguém que nunca utilizou essas ferramentas não ficar “boiando” no assunto 🙂 ….


I – Conceitos

1. ListBox
Um ListBox – ou caixa de listagem – nada mais é que a tag SELECT da linguagem HTML. Mas espera aí, a tag SELECT não é a que cria o ComboBox? Sim, em termos de código esses objetos são idênticos – não levando em conta o aspecto visual – com apenas um único diferencial: a propriedade size. Se essa propriedade tiver um valor maior que 1 então nossa tag SELECT será um ListBox, mas se ela tiver um valor igual a 1 ou for omitida teremos um ComboBox. A ListBox será o recipiente que nos permitirá manipular as informações que desejamos, as quais estarão contidas nas opções.

2. Opções
As opções serão as estruturas que armazenarão as informações que estaram contidas dentro do ListBox. Elas são criadas através da tag OPTION que será exemplificada mais a frente. Elas serão o alvo deste tutorial pois, nelas que estarão contidas as informações que serão aproveitadas.

3. JavaScript
A JavaScript é uma linguagem de scripts utilizada no cliente para alterar propriedades da página e de seus objetos e que cria até uma certa dinamicidade. Ela será a nossa ferramenta para manipular essas informações.
Bom, agora depois de todo esse blá blá blá vamos ao que realmente interessa:

II – Código
Para facilitar a compreensão, vou colocar como exemplo uma escola onde se deseja cadastrar os alunos em suas respectivas salas. Cada página desta, representará uma sala e teremos todos os alunos da escola em uma List e outra List vazia onde serão colocados os alunos que pertencerão a essa sala.
Vou colocar aqui o código completo para que você não tenha que ficar “caçando” linha a linha no tutorial caso queira utilizá-lo. As explicações vêm a seguir:

1. Este é o código HTML contendo as Lists e dois botões para podermos fazer as trocas:


<HTML>
<HEAD>
<TITLE>Exemplo de ListBox – Escola São João do JavaScript </TITLE>
</HEAD>
<BODY>
<FORM name=”form” action=”página_destino.htm” method=”post”>
<TABLE width=”80%” border=0>
<TR>
<TD width=35%><P align=”right”>Alunos<BR>
<SELECT name=”List1″ size=”5″ multiple style=”width: 100pt”>
<OPTION value=”Joãozinho”>Joãozinho</OPTION>
<OPTION value=”Pedrinho”>Pedrinho</OPTION>
<OPTION value=”Juquinha”>Juquinha</OPTION>
<OPTION value=”Mariazinha”>Mariazinha</OPTION>
</SELECT></P>
</TD>
<TD width=10%><P align=”center”>
<INPUT type=”button” name=”insere”value=”>>” OnClick=”TrocaList(document.form.List1,document.form.List2)”><BR>
<INPUT type=”button” name=”deleta” value=”<<” OnClick=”TrocaList(document.form.List2,document.form.List1)”><BR>
</TD></P>
<TD width=35%><P align=”left”>Classe<BR>
<SELECT name=”List2″ size =”5″ multiple style=”width: 100pt”></SELECT></P>
</TD>
</TR>
</TABLE><BR>

</FORM>

</BODY>
</HTML>

2. Esse é o código JavaScript que fará a transferência:

<SCRIPT language=JavaScript>
function TrocaList(ListOrigem,ListDestino)
{
var i;
for (i = 0; i < ListOrigem.options.length ; i++)
{
if (ListOrigem.options[i].selected == true)
{
var Op = document.createElement(“OPTION”);
Op.text = ListOrigem.options[i].text;
Op.value = ListOrigem.options[i].value;
ListDestino.options.add(Op);
ListOrigem.options.remove(i);
i–;
}
}
}
</SCRIPT>

Simples não é? Não? Então vamos ver passo a passo:

III – Passo a Passo
Nessa parte tentarei explicar do modo mais detalhado possível, sendo que é provável que muita coisa que estiver aqui você pode já estar careca de saber, mas pense em quem está começando a fazer páginas e tem apenas noções básicas de HTML.
Vamos começar pelo código HTML, que além de ser mais fácil de se entender é a base para compreendermos a utilidade do restante do código:

1. O imprescindível HTML

a) O Formulário
O formulário vai ser a tag onde estarão as ListBoxes e os botões que usaremos para trocar as opções entre os mesmos e também que direcionará a resposta do nosso HTML para outra página.

<FORM name=”form” action=”página_destino.htm” method=”post”>

Se você deseja passar as opções que selecionou para outra página, obrigatoriamente terá que usar um formulário para passar os parâmetros desejados para ela. Como a tabela foi usada apenas por um aspecto visual, não falaremos sobre ela.

b) A ListBox
Aí está a tão polêmica tag SELECT que neste caso está como uma ListBox e não como um ComboBox pois notem, a propriedade size possui valor 5, ou seja, este SELECT será uma ListBox com cinco linhas.

<SELECT name=”List1″ size=”5″ multiple style=”width: 100pt”></SELECT>

A propriedade multiple que está dentro da tag nos permite selecionar várias opções simultaneamente. Ela só será útil numa ListBox pois, como o size do ComboBox é 1, mesmo que colocássemos essa propriedade seria possível selecionar somente uma opção por vez.

c) As Opções
Como foi dito anteriormente, a OPTION armazena as informações que desejamos utilizar. Nela teremos dois tipos de informação: uma que será a que utilizaremos e outra que será a apresentada na página. Essa é uma das vantagens de uma ListBox – a informação apresentada não precisa ser necessariamente a que será utilizada.

<OPTION value=”Joãozinho”>Joãozinho</OPTION>

A informações que serão aproveitadas devem estar contidas na propriedade value. As aspas não são obrigatórias, a menos que a informação contenha espaços. As informações que serão apresentadas ao usuário devem estar entre as tag de abertura e a de fechamento. Estas não necessitam de aspas em qualquer hipótese, pois tudo que você escrever ali será visto na página, então se você digitar as aspas elas irão aparecer também.

Note que, nesse caso as duas informações são iguais, mas poderíamos colocar o número de matrícula na propriedade value, sendo assim o HTML mostraria o nome do aluno mas na verdade, estaria guardando o seu número de matricula.

Dica: se você deseja deixar uma opção selecionada por padrão, dentro da tag de abertura insira a palavra selected, que é uma propriedade da OPTION que indica se ela está selecionada ou não.

d) Os Botões
Os botões são objetos que usamos para acionar alguma mudança na página. Eles serão os nossos “mensageiros”, ou seja, eles que acionaram o código JS.

<INPUT type=”button” name=”insere” value=”>>” OnClick=”TrocaList(document.form.List1,document.form.List2)”>

Note que o nome será usado apenas como referência interna e a value conterá o texto que será mostrado no botão. O evento OnClick é acionado quando o botão é clicado. Ele chamará o nosso tão esperado código JS: a função TrocaList com os parâmetros document.form.List1 e document.form.List2 que serão explicados adiante.

Perceba também que no segundo botão a ordem dos parâmetros foi invertida. Quando estivermos na parte do JS falaremos o porque dessa troca.

e) o Script

<SCRIPT language=JavaScript></SCRIPT>

A tag SCRIPT indica o espaço onde se deve escrever o código do script. A propriedade language determina a linguagem de script que será utilizada – no nosso caso JavaScript.

2 – Finalmente, o JavaScript
Chegamos ao ponto crucial deste tutorial. Se você teve facilidade para entender o código acima, com certeza vai tirar de letra este aqui. Vamos lá então:

a) A Chamada da Função

Lembra do evento OnClick do botão, onde tinha a chamada da função:

TrocaList(document.form.List1,document.form.List2)

Então, começaremos por ele. TrocaList é o nome da função que iremos chamar, função esta que foi declarada dentro da tag SCRIPT desta página. O nome com o qual a função foi chamada deve ser exatamente o mesmo da que foi declarada.

document.form.List1 e document.form.List2 são os parâmetros passados à função que, neste caso, estão indicando as Lists que iremos utilizar. Como o JS não reconhece as Lists como objetos autônomos, eu tenho que especificar a quem elas pertencem a partir do que é comum a todos elementos desta página, a própria página. Como não podemos dar um nome a página como nos objetos, document será a palavra que usaremos para referir-se a ela , form é o nome do formulário e List1 e List2 são as ListBoxes que queremos manipular. Como o ponto(.) indica que o que vem após ele é uma propriedade, objeto ou método de quem vem antes, List1 e List2 são objetos que estão contidos no formulário form que por sua vez é um objeto da página HTML.

b) A Declaração da Função

function TrocaList(ListOrigem,ListDestino)

Essa é a declaração da função. A palavra function indica ao JS que iremos declarar uma função. TrocaList será o nome da nossa função, e ListOrigem e ListDestino as variáveis que armazenaram o valor dos parâmetros que enviamos quando chamamos ela lá nos botões. A primeira variável, ListOrigem, como o próprio nome sugere será a List que enviará as opções e a segunda, ListDestino, a que receberá estes. Lembra que a ordem dos parâmetros no segundo botão estava invertida?! Justamente por isso, o primeiro botão envia as informações da List com o nome dos alunos para a List da classe que está sendo montada, e o segundo faz exatamente o contrário.

Nota: Poderíamos enviar o nome das Lists diretamente para função sem utilizar parâmetros, mas neste caso teríamos que fazer uma função para cada botão e nosso código JS dobraria de tamanho.

c) As Variáveis

var i;
var Op = document.createElement(“OPTION”);

Essas serão as variáveis que iremos usar, além das que receberam os parâmetros. Declararemos a variável i como um contador apenas e a variável Op como um objeto da página através do método createElement() do objeto document, ou seja, a página.

d) Fazendo a Transferência

Na verdade, não é possivel enviar uma OPTION de uma List para outra. O que? Como não? Calma leitor,  este tutorial não foi feito a toa. Como para tudo existe uma solução o que faremos será copiar os dados da OPTION selecionada numa variável – pra isso a declaração da variável Op -, remove-la da List de origem e criar uma nova com os mesmos valores na List de destino. Vamos as linhas:

for (i = 0; i < ListOrigem.options.length ; i++)

Como na nossa tag SELECT especificamos a propriedade multiple que possibilita selecionar mais de uma OPTION ao mesmo tempo ,teremos que controlá-las dentro do nosso código. Para isso, usaremos o comando for que é uma estrutura de repetição, juntamente com o nosso contador i que controlará o índice que identifica cada opção, já que a propriedade ListOrigem.options é uma matrix que referência todas as opções da List. O primeiro parâmetro do for, i = 0 indica o valor inicial do contador, que no caso é zero.

O segundo parâmetro, i < ListOrigem.options.length, indica a condição de existência do for, ou seja, enquanto esta sentença for verdadeira o for será executado. Neste caso i deve ser menor que a quantidade de opções – options.length – que a List de origem contém. O terceiro parâmetro indica o que deve ocorrer cada vez que o for for executado, que no caso é o incremento do nosso contador – i++ é a mesma coisa que i = i + 1 – para que ele possa percorrer todas as opções da List.

Sendo assim a segunda vez que o for for executado o contador valerá 1, na terceira vez 2 e assim sucessivamente até que i alcance o valor de ListOrigem.options.length, o que determinara o fim da execução do comando. Tudo que será executado pelo for deve estar entre chaves.
Vamos agora, analisar o seu conteúdo:

if (ListOrigem.options[i].selected == true)

O comando if determina uma condição. Neste caso só será executado o que está no seu interior se a opção de índice i estiver selecionada na List.

var Op = document.createElement(“OPTION”);

Esta variável está sendo declarada aqui para que não precisemos limpar seu conteúdo toda vez que formos reutilizá-la. Então, quando o if é iniciado ela é criada com seu conteúdo vazio e quando ele é encerrado ela é apagada.

Op.text = ListOrigem.options[i].text;

Aqui atribuímos o valor do text – que representa a informação que será mostrada na página – da opção a ser copiada da List de origem para nossa variável.

Op.value = ListOrigem.options[i].value;

Da mesma forma, aqui atribuímos o valor da opção – que representa a informação que será utilizada – para a variável.

ListDestino.options.add(Op);

Aqui utilizaremos o método add() da matriz ListDestino.options, que adicionará uma nova opção com os valores da variável Op que foi passada como parâmetro. Note que dessa vez não utilizamos índice pois a opção será adicionada na matriz de opções e não em uma opção específica.

ListOrigem.options.remove(i);

E para terminar removeremos a opção, que já está armazenada na List de destino, da List de origem através de método remove() da matriz ListOrigem.options.

i–;

Agora imagine que o contador estivesse com o valor 3. Quando removermos esse item de índice 3 o JS vai passar este índice para a opção subseqüente, ou seja, a opção que tinha o índice 4 agora passa a ter índice 3. Logo, quando o for for executado novamente e incrementar a variável i, esse item será pulado criando assim um bug em nosso código. Por isso, no final de todo código ainda dentro if devemos decrementar o contador – i– é a mesma coisa que i = i -1 – , para que ele retorne a este mesmo índice e não pule esse item.

Nota: Cuidado para não colocar o decremento fora do if. Se isso acontecer você estará criando o que chamamos de loop eterno, o que poderá travar o seu navegador quando for executar a página.

IV – Observações
Pronto, você viu como é simples ? Agora para finalizar preciso passar a você algumas observações que podem ser vitais ao bom funcionamento deste código:

1. Case Sensitive
O JavaScript é uma linguagem case sensitive, ou seja, ela diferencia letras maiúsculas de minúsculas – então cuidado com elas.

2. Ponto-e-Vírgula
Esquecer um ponto-e-vírgula no JS é “caso de morte”: todas as sentenças que não utilizarem chaves devem conter um ponto-e-vírgula no final.

3. Chaves
As chaves delimitam estruturas de repetição ou de condição ou funções. Recomendo que ao abrir uma chave, imediatamente feche-a e vá digitando o código entre elas, assim não há perigo de você esquecer de fechá-las.

Espero que tenha sido proveitoso este código, que apesar de simples tem muita utilidade, principalmente para quem faz sites comerciais 🙂 …

Anúncios

Tabela de cores com Javascript


Em HTML construímos qualquer cor misturando o vermelho, verde e azul (RGB) nas proporções que desejarmos. Isto é um fato que deveria saber antes de ler este artigo. Explicamos com detalhes a construção de cores no artigo As cores e HTML. Será necessário que, aquele que não estiver familiarizado com este assunto, leia o artigo.

Além de como construir cores, o artigo As cores e HTML mostra também quais são as cores puras, que se vêem sem problemas em todas as profundidades de cor que possa ter a configuração dos computadores dos visitantes. Para a construção de cores puras misturamos as cores RGB sempre nestas quantidades 00, 33, 66, 99, CC, FF. Novamente, para quem não conhece isto deve ler a reportagem assinalada anteriormente.

O exemplo que pretendemos construir tem a ver com as cores puras em tyodas as definições. Trata-se de construir uma tabela em uma página web que contenha todos as cores puras, além do código RGB de cada cor. Esta tabela pode servir para selecionar uma cor que pretendemos utilizar em uma página web. Se nos limitarmos somente a utilizar as cores da tabela teremos a segurança que nossa paleta será respeitada em todos os casos.

Para gerar todos as cores puras vamos utilizar três arrays Javascript com os possíveis valores para cada uma das cores RGB. Portanto, teremos três arrays como os que podem ser vistos a seguir:

var r = new Array(“00″,”33″,”66″,”99″,”CC”,”FF”);
var g = new Array(“00″,”33″,”66″,”99″,”CC”,”FF”);
var b = new Array(“00″,”33″,”66″,”99″,”CC”,”FF”);

Para escrever a tabela na página web, faremos um percorrido a estes três arrays. Para isso, vamos utilizar loops aninhados, que são loops dentro de outros loops.

Vamos tratar de explicar porque necessitamos os loops aninhados; se fizermos as contas das cores que devemos ir gerando obteremos uma lista como a que segue:

#000000 #000033 #000066 #000099 #0000CC #0000FF #003300 #003333 #003366 #003399 #0033CC #0033FF #006600 #006633 #006666 #006699 #0066CC #0066FF…
Pode-se ver a conta completa aqui.

Então, vemos que no início os três valores de RGB valem 00 e como em sucessivas repetições se vai aumentando o valor de B (o valor atribuído ao azul) até chegarmos a FF. Para continuar, aumenta-se o valor de G e voltamos a realizar a conta com B. É como se contássemos e as unidades fossem os valores de RBG.

O caso é que realizamos a conta com o valor B, quando chegamos a FF aumentamos o valor de G e quando chegarmos a FF em G aumentaremos em um valor R. Assim, pode-se ver a estrutura em pseudocódigo como esta.

Contamos desde 00 até FF com o valor R{
Contamos desde 00 até FF com o valor G{
Contamos desde 00 até FF com o valor R{
Imprimimos o valor atual de RGB
}
}
}

Esta estrutura imprime todos as cores puras, e já é próxima a nossa solução, embora ainda não esteja escrita em Javascript e falte colocar todas as etiquetas HTML que necessitamos para mostrar uma tabela em uma página web.

Como não importa ir um pouco mais devagar contanto que todo o mundo entenda o problema, vamos escrever em Javascript este loop para que simplesmente liste as cores puras, sem introduzi-las ainda em uma tabela. Será interessante para ver um pouco melhor o funcionamento de loops aninhados.

//criamos os arrays
var r = new Array(“00″,”33″,”66″,”99″,”CC”,”FF”);
var g = new Array(“00″,”33″,”66″,”99″,”CC”,”FF”);
var b = new Array(“00″,”33″,”66″,”99″,”CC”,”FF”);

//fazemos o loop aninhado
for (i=0;i<r.length;i++) {
for (j=0;j<g.length;j++) {
for (k=0;k<b.length;k++) {
//creamos el color
var nuevoc = “#” + r[i] + g[j] + b[k];
//imprimimos a cor
document.write(novoc + “<br>”);
}
}
}

Para percorrer um array os loops se criam com um índice que servirá para acessar à posição atual do array. Os índices em arrays começam em 0, é por isso que nossos loops for contém uma iniciação a 0 da variável que vai servir de índice. Ademais o índice deve crescer de um em um até chegar à última posição do array, que se obtém acessando a sua propriedade length (que salva a longitude ou o número de elementos do array).

Colocando um loop dentro de outro poderemos realizar essa conta. O loop mais externo será o que menos vezes se executar, portanto com o loop exterior levaremos a conta de R. O loop do meio será para levar a conta de G e o mais interno (o que mais vezes se repetirá) para levar a conta de B, que é o valor que vai mudando constantemente.

Podemos vê-la em funcionamento neste link.

A tabela das cores completa

Para terminar, vamos ver o exemplo completo, com todas as linhas de código que incluem os textos HTML necessários para que a tabela saia convenientemente formatada e com as cores de fundo em cada uma das células iguais à cor atual.

Para isso, o primeiro que faremos é escrever o cabeçalho da tabela e a finalização da mesma, que ficam fora da estrutura de loops. Dentro dos loops realizaremos as sentenças para imprimir cada uma das filas e células da tabela.

Nossa tabela vai ter em cada fila um conjunto de cores, onde os valores RG não mudam e o valor B varia entre todos os possíveis. Na seguinte fila se incrementaria em um o valor G e faríamos outra vez a conta de valores B… assim até terminarmos com todos os valores R, G e B possíveis.

O código é o seguinte:

<table width=”80%”>
<script language=”javascript”>
var r = new Array(“00″,”33″,”66″,”99″,”CC”,”FF”);
var g = new Array(“00″,”33″,”66″,”99″,”CC”,”FF”);
var b = new Array(“00″,”33″,”66″,”99″,”CC”,”FF”);

for (i=0;i<r.length;i++){
for (j=0;j<g.length;j++) {
document.write(“<tr>”);
for (k=0;k<b.length;k++) {
var novoc = “#” + r[i] + g[j] + b[k];
document.write(“<td bgcolor=\”” + novoc + “\” align=center>”);
document.write(novoc);
document.write(“</td>”);
}
document.write(“</tr>”);
}
}
</script>
</table>

Vemos que antes de começar o loop mais interno, cria-se uma nova célula com <TR> e que quando se acaba, termina também a célula com </TR>. Ademais, dentro do loop mais interno se compõe primeiro a cor atual e logo se escreve uma célula com o atributo bgcolor atribuído a essa cor atual e dentro dela o texto da cor atual.

A tabela que nos gera este script pode ser vista aqui:

var r = new Array(“00″,”33″,”66″,”99″,”CC”,”FF”);
var g = new Array(“00″,”33″,”66″,”99″,”CC”,”FF”);
var b = new Array(“00″,”33″,”66″,”99″,”CC”,”FF”);
for (i=0;i<r.length;i++)
for (j=0;j<g.length;j++) {
document.write(“<tr>”);
for (k=0;k<b.length;k++) {
var nuevoc = “#” + r[i] + g[j] + b[k];
document.write(“<td bgcolor=\”” + nuevoc + “\” align=center>”);
document.write(nuevoc);
}
document.write(“</tr>”);
}

#000000 #000033 #000066 #000099 #0000CC #0000FF
#003300 #003333 #003366 #003399 #0033CC #0033FF
#006600 #006633 #006666 #006699 #0066CC #0066FF
#009900 #009933 #009966 #009999 #0099CC #0099FF
#00CC00 #00CC33 #00CC66 #00CC99 #00CCCC #00CCFF
#00FF00 #00FF33 #00FF66 #00FF99 #00FFCC #00FFFF
#330000 #330033 #330066 #330099 #3300CC #3300FF
#333300 #333333 #333366 #333399 #3333CC #3333FF
#336600 #336633 #336666 #336699 #3366CC #3366FF
#339900 #339933 #339966 #339999 #3399CC #3399FF
#33CC00 #33CC33 #33CC66 #33CC99 #33CCCC #33CCFF
#33FF00 #33FF33 #33FF66 #33FF99 #33FFCC #33FFFF
#660000 #660033 #660066 #660099 #6600CC #6600FF
#663300 #663333 #663366 #663399 #6633CC #6633FF
#666600 #666633 #666666 #666699 #6666CC #6666FF
#669900 #669933 #669966 #669999 #6699CC #6699FF
#66CC00 #66CC33 #66CC66 #66CC99 #66CCCC #66CCFF
#66FF00 #66FF33 #66FF66 #66FF99 #66FFCC #66FFFF
#990000 #990033 #990066 #990099 #9900CC #9900FF
#993300 #993333 #993366 #993399 #9933CC #9933FF
#996600 #996633 #996666 #996699 #9966CC #9966FF
#999900 #999933 #999966 #999999 #9999CC #9999FF
#99CC00 #99CC33 #99CC66 #99CC99 #99CCCC #99CCFF
#99FF00 #99FF33 #99FF66 #99FF99 #99FFCC #99FFFF
#CC0000 #CC0033 #CC0066 #CC0099 #CC00CC #CC00FF
#CC3300 #CC3333 #CC3366 #CC3399 #CC33CC #CC33FF
#CC6600 #CC6633 #CC6666 #CC6699 #CC66CC #CC66FF
#CC9900 #CC9933 #CC9966 #CC9999 #CC99CC #CC99FF
#CCCC00 #CCCC33 #CCCC66 #CCCC99 #CCCCCC #CCCCFF
#CCFF00 #CCFF33 #CCFF66 #CCFF99 #CCFFCC #CCFFFF
#FF0000 #FF0033 #FF0066 #FF0099 #FF00CC #FF00FF
#FF3300 #FF3333 #FF3366 #FF3399 #FF33CC #FF33FF
#FF6600 #FF6633 #FF6666 #FF6699 #FF66CC #FF66FF
#FF9900 #FF9933 #FF9966 #FF9999 #FF99CC #FF99FF
#FFCC00 #FFCC33 #FFCC66 #FFCC99 #FFCCCC #FFCCFF
#FFFF00 #FFFF33 #FFFF66 #FFFF99 #FFFFCC #FFFFFF

Podemos ver uma página web onde está somente esta tabela.

Redirecionar página de acordo com a resolução


Quem nunca teve problema com a resolução que o cliente usa?

Quando o site é pequeno fica sobrando um grande espaço e quando o site é grande fica a barra de rolagem…

Bom eu fiz um pequeno script em javascript que vai resolver a sua vida, segue o código comentado:

<script language="JavaScript1.2">
/*
Redireciona de acordo com a resolução
(Por Lucas Barbosa Lacerda)
*/
//para resolução 800x600
if (screen.width==800||screen.height==600) 
   window.location.replace("800600/index.php")

//para resolução 640x480
else if (screen.width==640||screen.height==480) 
   window.location.replace("640480/index.php")

//para resolução 1024x768
else if (screen.width==1024||screen.height==768) 
   window.location.replace("1240768/index.php")

//para outras resoluções
else 
   window.location.replace("1240768/index.php ") 
</script>

Espero ter ajudado
Comente por favor!

Gráfico em barra com javascript


Neste artigo mostrarei como gerar um gráfico, com legenda em javascript, simples e sem complicações.

Abra um editor de texto de sua preferência e no topo adicione o CSS abaixo.

<style type="text/css">

#tbGrafico{
font-family:Verdana, Arial, Helvetica, sans-serif;
font-size:10px;
color:#000000;
 }
.cssLabel{
text-align:left;
opacity:0.70;
filter: alpha(opacity=70);
width:200px;
position:absolute;
z-index:9900px;
margin-top:20px;
margin-left:0px;
padding:4px;
font-family:Verdana;
color:#000;
font-size:11px;
}
</style>

Após a inclusão do css, vamos JavaScript

Criaremos uma função chamada Empresa com a seguintes propriedades {Nome,AreamCrescimentoAnual,CorBarra},

function Empresa()
{ // SERÁ USADA PARA CADASTRAR AS EMPRESAS
this.Nome;
this.Area;
this.CrescimentoAnual;
this.CorBarra;
}

A próxima função apenas mostra as propriedades de cada empresa.

function ExibirLabel(obj,Id)
{// ADICIONAMOS AO DIV LABELGRAFICO O CONTEUDO DE CADA OJETO
// EMPRESA PASSADO POR ELE
 var alvo = document.getElementById("LabelGrafico"+Id);
 alvo.innerHTML  = "";
 alvo.innerHTML  = "<b>"+ obj.Nome +"</b><hr>";
 alvo.innerHTML += "Area de atuação: "+obj.Area;
 alvo.innerHTML += "
Cresimento Anual: "+obj.CrescimentoAnual + "%";
 alvo.style.display = '';
}

se estamos mostrando as propriedades, temos que ocultar J

function OcultarLabel(Id)
{// SIMPLESMENTE ESTAMOS OCULTANDO O ID CORRENTE.
var alvo = document.getElementById("LabelGrafico"+Id);
alvo.style.display = 'none';
}

Agora vamos ao coração do programa, a função GRAFICOS.

function Graficos(dados){
var  Abarra = 19;   // altura da barra
var  Lbarra = 0;  // largura da barra
var  calc_largura = 0;  // calculo da largura da barra
var  calc_percent = 0;  // calculo do percent de valores
var  construtor = "";   // responsavel por montar todo o grafico
var  total = 0;         // contabilizador de valores
var  i;
//AQUI ESTAMOS SOMANDO O CRESIMENTO ANUAL
     // DE CADA EMPRESA
for (i = 0; i <dados.length;i++) {
 total+=parseInt(dados[i].CrescimentoAnual);
}

Lbarra = total;
//NOSSA CONSUTRUÇÃO COMEÇA AQUI!
construtor = '<table id="tbGrafico" border="0" cellspacing="2" cellpadding="0">'
for (i=0;i<dados.length;i++){
//  CALCULO PARA PERCENTE DE CADA EMPRESA.
calc_percent = Math.round(dados[i].CrescimentoAnual*100/total);
calc_largura = Math.round(Lbarra*(calc_percent/100));
construtor  += '<tr><td><div id="LabelGrafico'+i+'" class="csslabel" ';
construtor+= 'style="display:none;background-color:'+dados[i].CorBarra+';';
construtor+= 'border:1px solid'+dados[i].CorBarra+';"></div>';
construtor+= '<div style="width:'+((calc_largura*1.9))+'px; height:'+Abarra+'px; ';
     // ESTAMOS AQUI AGREGANDO A COR PARA A BARRA DA EMPRESA.
construtor+= 'background-color:'+dados[i].CorBarra+';" ';
// AQUI ENTRA OS EVENTOS.
construtor+= 'onmouseover="ExibirLabel(dados['+i+'],'+i+');" ';
construtor+= 'onmouseout="OcultarLabel('+i+');" ></div> ';
construtor+= '</td><td> '+calc_percent+'%</td></tr>';
}
construtor  += '</table>';
return construtor;
}

Agora o que falta para nosso programa funcionar, é criamos as empresas e chamar a função gráfico.

// CRIAMOS UM ARRAY E DENTRO DE CADA INDICE ALOCAMOS
// UMA NOVA INSTANCIA DE EMPRESA , SIMPLES ASSIM!  J
var  dados =new Array()
dados[0] = empresa = new Empresa();
dados[0].CorBarra ="#CCFFCC";
dados[0].Nome = 'CODIGO FONTE';
dados[0].CrescimentoAnual = 93.37;
dados[0].Area = 'TI';

dados[1] = empresa = new Empresa();
dados[1].CorBarra ="#CCFFFF";
dados[1].Nome = 'PIRAQUE';
dados[1].CrescimentoAnual = 54.94;
dados[1].Area = 'COMERCIO';

dados[2] = empresa = new Empresa();
dados[2].CorBarra ="#FFCC99";
dados[2].Nome = 'JEANS TK';
dados[2].CrescimentoAnual = 78.01;
dados[2].Area = 'TEXTIL';
// AGORA SÓ PASSAR ESSE ARRAY PARA O GRAFICOS e PRONTO RESULTADO NA HORA!
document.write(Graficos(dados));

salve em uma página html e pronto! 😉

bom pessoal, até o próximo artigo!

Abraços, Alex Araújo.

Esconder e Mostrar DIV’s


Este script é bem simplesinho mas de grande utilidade.

Nos exemplos estou utilizando 3 divs, com ID’s diferentes.

<script>
function OpenSel(op) {

if (op == 1) {
document.getElementById('principal').style.display="block";
document.getElementById('divum').style.display="none";
document.getElementById('divdois').style.display="none";
}else if (op == 2) {
document.getElementById('principal').style.display="none";
document.getElementById('divum').style.display="block";
document.getElementById('divdois').style.display="none";
}else {
document.getElementById('principal').style.display="none";
document.getElementById('divum').style.display="none";
document.getElementById('divdois').style.display="block";
}
}
</script>
<div id="principal">
<a href="#" onclick="OpenSel(2);">Mostrar DIV 1</a>

<a href="#" onclick="OpenSel(3);">Mostrar DIV 2</a>
</div>
<div id="divum" style="display:none;">MOSTRAR DIV NÚMERO UM<a href="#" onclick="OpenSel(1);">VOLTAR MENU PRINCIPAL</a></div>
<div id="divdois" style="display:none;">MORTRAR DIV NÚMERO DOIS<a href="#" onclick="OpenSel(1);">VOLTAR MENU PRINCIPAL</a></div>

Outra maneira de fazer este código é utilizando CASE em javascript, veja:

<script>
function abrefecha(obj) {

switch (obj.id) {
case 'primeiro':

document.getElementById('principal').style.display="block";
document.getElementById('divum').style.display="none";
document.getElementById('divdois').style.display="none";

break
case 'segundo':

document.getElementById('principal').style.display="none";
document.getElementById('divum').style.display="block";
document.getElementById('divdois').style.display="none";

break

case 'terceiro':

document.getElementById('principal').style.display="none";
document.getElementById('divum').style.display="none";
document.getElementById('divdois').style.display="block";

break
}
}
</script>
<div id="principal">
<a href="#" id="segundo" onclick="abrefecha(this);">Mostrar DIV 1</a>

<a href="#" id="terceiro" onclick="abrefecha(this);">Mostrar DIV 2</a>
</div>
<div id="divum" style="display:none;">MOSTRAR DIV NÚMERO UM<a href="#" id="primeiro" onclick="abrefecha(this);">VOLTAR MENU PRINCIPAL</a></div>
<div id="divdois" style="display:none;">MORTRAR DIV NÚMERO DOIS<a href="#" id="primeiro" onclick="abrefecha(this);">VOLTAR MENU PRINCIPAL</a></div>

Espero que tenham gostado!

Abraços.