Teste #1
Teste #2:
Exemplo de Código
Teste #1
Teste #2:
Tag: javascript
Alterar o valor de um campo do tipo “radio” a partir de um evento em JavaScript
Semana passada precisei fazer isso: alterar o valor de um campo radio a partir de um evento, que é feito de uma forma um pouco diferente que em outros campos, como uma caixa de texto comum, por exemplo.
Criei um modelo comentado para que você possa utilizar, caso precise. Para testar, copie em qualquer editor de texto simples (Notepad no Windows ou Gedit no Ubuntu) e salve como qualquercoisa.html Caso tenha dúvidas, poste nos comentários! 🙂
<html>
<head>
<script type="text/javascript">
function mudaRadio(posicao) {
/*
Pela função "mudaRadio" é passada uma variável, que é a posicao do campo radio.
Num grupo de radios, cada um tem um índice, que começa de 0, ou seja,
o primeiro radio possui índice zero, o segundo índice um e assim por diante.
Na linha abaixo, o valor do radio é alterado de acordo com a posição passada.
*/
document.forms[0]['cores'][posicao].checked = 1;
}
</script>
</head>
<body>
<form name="formulario">
<input type="radio" name="cores" value="azul" />Azul
<input type="radio" name="cores" value="verde" />Verde
<input type="radio" name="cores" value="vermelho" />Vermelho
<input type="radio" name="cores" value="amarelo" />Amarelo
<br /><br /><br />
<!-- O evento utilizado foi o onClick, mas poderia ter sido outro, a depender da sua necessidade -->
<input type="button" name="btnAzul" value="Azul" onClick="mudaRadio(0)" />
<input type="button" name="btnVerde" value="Verde" onClick="mudaRadio(1)" />
<input type="button" name="btnVermelho" value="Vermelho" onClick="mudaRadio(2)" />
<input type="button" name="btnAmarelo" value="Amarelo" onClick="mudaRadio(3)" />
</form>
</body>
</html>
Uma obra-prima de JavaScript!
Fui corrigir um problema em uma validação num JavaScript do Projeto "X", e encontrei a seguinte obra-prima:
if( !( ( (digitos / 10000000000) >= 1 ) && ( (digitos / 10000000000) < 10 ) ) ){
alert('O código deve conter 11 dígitos');
}
Longe de mim dizer que isso é um armengue ( 😛 ), mas acho que mais simples fazer isso:
if (digitos.length != 11) {
alert('O código deve conter 11 dígitos');
}
Tenso... 😛
Ilustração comparativa entre as linguagens de programação
Uma pequena comparação entre as linguagens. Osso é a colherzinha quebrada do PHP 😛
Comparação entre as linguagens de programação
Maiores erros no seu site
Muita gente resolve fazer seu próprio blog ou site, o que é ótimo, mas algumas vezes as pessoas esquecem de alguns detalhes que fazem muita diferença para a indexação do seu site no Google e para que os visitantes tenham interesse em acessá-lo. Vou listar alguns pontos que considero importantes:
Codificação
Usar CSS Inline: quando se escreve códigos CSS, é interessante que eles estejam em um arquivo externo, e não espalhados pelo corpo da página. Se estiver em um arquivo externo, várias páginas que chamem os mesmos estilos farão referência a esse arquivo, que só precisará ser baixado uma vez.- Não usar JavaScript em arquivos externos: mesma coisa do CSS. Tudo o JavaScript deve estar no mesmo arquivo.
- Não compactar arquivos JavaScript e CSS: existem pela web ferramentas que podem ajudar a reduzir o tamanho do código JS ou CSS, removendo comentários, espaços etc. Mas não se esqueça de guardar o arquivo original e testar tudo antes de publicar.
- Design usando tabelas: o design deverá ser feito usando tableless, ou seja, construído usado DIV’s, e não tabelas.
- Não usar CSS Sprites: O CSS Sprite junta as imagens do layout (não dos artigos) de um site em um arquivo. Isso aumenta a velocidade de carregamento.
- HTML e CSS inválidos: seus sites devem passar na validação do W3C, que é o órgão que padroniza o HTML, CSS etc.
- Usar @import para chamar os arquivos CSS (método lento).
- Imagens muito grandes: imagens muito grandes deixam o site muito lento. Uma imagem no seu site com mais de 200KB é inaceitável.
Usuabilidade
- Erros de português
- Muitas imagens, gráficos e animações
- Muitos termos técnicos
Servidor
- Links quebrados
- Servidor lento
- Muitas requisições a JavaScripts e CSS
- Não estar na raiz do seu domínio. Ex.: www.seusite.com/pasta/pasta/index.html
- Links complicados: http://www.seusite.com/produto.php?cateogoria=7&produto=236 ao invés de http://www.seusite.com/tv-de-led
Domínio
- Domínio com nome muito grande. Ex.: www.joaopaulofigueiredosilvajunior.com.br
- Domínio difícil de lembrar e/ou pronunciar
- Domínio com palavras irrelevantes ao assunto. Ex.: www.carrosusados.com mas tem artigos sobre informática. Isso acontece quando você começa a escrever sobre um assunto, mas perde o interesse sobre o assunto
Redirecionar automaticamente com JavaScript
O método location, da classe window do Javascript pode fazer o redirecionamento automático para uma página que você desejar.
Exemplo de Uso:
<script language="javascript" type="text/javascript"> window.location.href = "http://www.google.com.br/"; </script>
Máscaras para formulário com JavaScript e JQuery
Máscaras para formulário com JavaScript e JQuery
O Masked Input Plugin é um plugin pra JQuery que simplifica bastante o processo de mascarar um campo de formulário. Se você não conhece o JQuery, saiba que se trata de uma biblioteca JavaScript, que na prática, serve para facilitar o desenvolvimento de scripts em JavaScript. Isso quer dizer que o JQuery vai facilitar muito o seu trabalho, ao trabalhar com JavaScript.
Passando pouquissimos parâmetros é possível fazer uma validação em poucos minutos.
Primeiro vai ser necessário baixar dois arquivos:
– jquery.js em http://www.jquery.com
– jquery.maskedinput.js em em http://digitalbush.com/projects/masked-input-plugin
Também existem as versões comprimidas que você pode usar.
Depois é necessário fazer o chamado aos arquivos .js entre as tags <HEAD> e </HEAD> do seu site:
<script src="jquery.js" type="text/javascript"></script> <script src="jquery.maskedinput.js" type="text/javascript"></script>
Em seguida você define as características das máscaras. Alguns exemplos:
– Máscara para Data: 99/99/9999
– Máscara para Telefone: (99)9999-9999
– Máscara para CPF: 999.999.999-99
– 9 representa qualquer número, de 0 a 9
– a representa qualquer letra
– * representa qualquer letra ou número
Para utilizar as máscaras exemplificadas acima, é necessário colocar o seguinte código entre as tags <HEAD> e </HEAD>.
<script type="text/javascript">
jQuery(function($){
$("#data").mask("99/99/9999");
$("#telefone").mask("(99)999-9999");
$("#cpf").mask("999.999.999-99");
});
</script>
Lembre-se que será utilizado o id do campo que você quer mascarar. No caso do campo de telefone, utilizamos o id telefone, mas pode ser qualquer outro.
Pronto. Agora é só você criar suas próprias máscaras, da forma que desejar 🙂
Você pode obter mais informações em http://digitalbush.com/projects/masked-input-plugin
Javascript para o usuário aumentar ou diminuir fonte do site
Script que adiciona um link para que o usuário aumente o tamanho da fonte do texto, e outro link para que o usuário diminua o tamanho da fonte do texto.
Fonte: http://www.yogodoshi.com/blog/utilitarios/script-para-o-usuario-poder-aumentar-e-diminuir-a-fonte-do-site
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
<title>Untitled Document</title>
<script type="text/javascript">
// Início do código de Aumentar/ Diminuir a letra
// Para usar coloque o comando:
// "javascript:mudaTamanho('tag_ou_id_alvo', -1);" para diminuir
// e o comando "javascript:mudaTamanho('tag_ou_id_alvo', +1);" para aumentar
var tagAlvo = new Array('p'); //pega todas as tags p//
// Especificando os possíveis tamanhos de fontes, poderia ser: x-small, small...
var tamanhos = new Array( '9px','10px','11px','12px','13px','14px','15px' );
var tamanhoInicial = 2;
function mudaTamanho( idAlvo,acao ){
if (!document.getElementById) return
var selecionados = null,tamanho = tamanhoInicial,i,j,tagsAlvo;
tamanho += acao;
if ( tamanho < 0 ) tamanho = 0;
if ( tamanho > 6 ) tamanho = 6;
tamanhoInicial = tamanho;
if ( !( selecionados = document.getElementById( idAlvo ) ) ) selecionados = document.getElementsByTagName( idAlvo )[ 0 ];
selecionados.style.fontSize = tamanhos[ tamanho ];
for ( i = 0; i < tagAlvo.length; i++ ){
tagsAlvo = selecionados.getElementsByTagName( tagAlvo[ i ] );
for ( j = 0; j < tagsAlvo.length; j++ ) tagsAlvo[ j ].style.fontSize = tamanhos[ tamanho ];
}
}
// Fim do código de Aumentar/ Diminuir a letra
</script>
</head>
<body>
<a href="javascript:mudaTamanho('texto', -1);">Diminuir</a>
<a href="javascript:mudaTamanho('texto', 1);">Aumentar</a>
<div style="font-size: 11px;" id="texto">
<p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Curabitur scelerisque purus ut pede. Ut pulvinar diam vitae tellus. Nunc ultricies. Nam rhoncus justo vel dui. Morbi suscipit enim. Praesent dui dui, tincidunt eget, feugiat vel, tincidunt vel, elit. Curabitur tempus consequat nunc. Aliquam erat volutpat. Vivamus a massa non libero posuere blandit. Nulla ut velit quis leo luctus tincidunt. Vestibulum eget leo in augue ornare fringilla. Suspendisse suscipit dui. </p>
<p>Nullam ultrices justo eget mi. Curabitur porta augue eget magna. Nam imperdiet, ipsum eu aliquet interdum, justo ipsum pulvinar quam, quis convallis mi sapien eu ante. Etiam ac sem. Ut bibendum. Nulla facilisi. Vestibulum odio. Sed accumsan. Donec a dui. Cras lorem augue, egestas vel, accumsan vel, elementum sit amet, nisl. Cras id dui. Sed nulla ipsum, pulvinar et, suscipit a, vehicula eu, arcu. Fusce auctor nibh eget risus. Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia Curae; Vestibulum vitae ante in odio dapibus lobortis. </p>
</div>
</body>
</html>
Últimos comentários