codigojavascript: setembro 2008

Calculadora 3

Calculadora 2

3 parts to this script

=====================================================

PART 1

====================================================

<SCRIPT>

<!--

===============================================================

PART 3 - put this where you want the calculator to show

================================================================

<FORM NAME="PAD">

<TABLE BORDER>

<TR><TD COLSPAN=8>

<INPUT NAME="CAL" TYPE="TEXT" SIZE=1 VALUE="">

Result:

<INPUT NAME="SUM" TYPE="TEXT" SIZE=36 VALUE="" onChange="KeyinNum()">

<TR>

<TD><INPUT TYPE="BUTTON" VALUE="C" onClick="resetNum()" WIDTH=100>

<TD><INPUT TYPE="BUTTON" VALUE="OFF" onClick="TurnOff()" WIDTH=100>

<TD><INPUT TYPE="BUTTON" VALUE="Square" onClick="calc1('^2')" WIDTH=100>

<TD><INPUT TYPE="BUTTON" VALUE="X !" onClick="fra()" WIDTH=100>

<TR>

<TD><INPUT TYPE="BUTTON" VALUE="1" onClick="entry('1')" WIDTH=100>

<TD><INPUT TYPE="BUTTON" VALUE="2" onClick="entry('2')" WIDTH=100>

<TD><INPUT TYPE="BUTTON" VALUE="3" onClick="entry('3')" WIDTH=100>

<TD><INPUT TYPE="BUTTON" VALUE="+" onClick="calc2('+')" WIDTH=100>

<TR>

<TD><INPUT TYPE="BUTTON" VALUE="4" onClick="entry('4')" WIDTH=100>

<TD><INPUT TYPE="BUTTON" VALUE="5" onClick="entry('5')" WIDTH=100>

<TD><INPUT TYPE="BUTTON" VALUE="6" onClick="entry('6')" WIDTH=100>

<TD><INPUT TYPE="BUTTON" VALUE="-" onClick="calc2('-')" WIDTH=100>

<TR>

<TD><INPUT TYPE="BUTTON" VALUE="7" onClick="entry('7')" WIDTH=100>

<TD><INPUT TYPE="BUTTON" VALUE="8" onClick="entry('8')" WIDTH=100>

<TD><INPUT TYPE="BUTTON" VALUE="9" onClick="entry('9')" WIDTH=100>

<TD><INPUT TYPE="BUTTON" VALUE="X" onClick="calc2('*')" WIDTH=100>

<TR>

<TD><INPUT TYPE="BUTTON" VALUE="0" onClick="entry('0')" WIDTH=100>

<TD><INPUT TYPE="BUTTON" VALUE="." onClick="entry('.')" WIDTH=100>

<TD><INPUT TYPE="BUTTON" VALUE="=" onClick="calc1('=')" WIDTH=100>

<TD><INPUT TYPE="BUTTON" VALUE="÷" onClick="calc2('/')" WIDTH=100>

<TR>

<TD><INPUT TYPE="BUTTON" VALUE="Backspace" onClick="entry('B')" WIDTH=100>

<TD><INPUT TYPE="BUTTON" VALUE="SQRT" onClick="calc1('¡Ô')" WIDTH=100>

<TD><INPUT TYPE="BUTTON" VALUE="Pi" onClick="entry('P')" WIDTH=100>

<TD><INPUT TYPE="BUTTON" VALUE="+/-" onClick="neg()" WIDTH=100>

</TABLE>

</FORM>

Calculadora 1

<html><head><title>Calculadora</title><SCRIPT LANGUAGE="JavaScript">

<!--

var wynik=0, op=0, nowe=0, nowe2=0, done=1, oset=0, kropka, temp;

function reset(value)

{

document.form1.ekran.value = value;

wynik = 0,

op = 0,

nowe = 0,

nowe2 = 0;

done = 1;

oset = 0;

}

function wspolna(new_temp)

{

kropka = 1;

if(nowe || done) {

nowe = 0;

done = 0;

temp = new_temp;

}

{

if (temp.indexOf(".")!=-1) {

kropka=0;

}

}

}

function button(ktory,ktory2)

{

temp = document.form1.ekran.value;

if(ktory2=='.') {

wspolna('0');

if(kropka==1) {

temp += ktory2;

document.form1.ekran.value = temp;

oset = 0;

}

}

if(ktory>=0 && ktory<=9) {

wspolna('');

if(temp==0 && kropka==1) temp='';

temp += ktory;

document.form1.ekran.value = temp;

oset = 1;

}

if(ktory2=='-' || ktory2=='+' || ktory2=='/' || ktory2=='*') {

if(nowe) op = ktory2

else {

if(!nowe2) {

op = ktory2;

wynik = temp;

nowe2=1;

}

else {

wynik = eval(wynik + op + temp);

op = ktory2;

document.form1.ekran.value = wynik;

}

oset=0;

nowe = 1;

}

}

if(ktory2=='1/x' ) { wynik = eval(1 / temp) ; reset(wynik); }

if(ktory2=='sqrt') { wynik = Math.sqrt(temp); reset(wynik); }

if(ktory2=='exp' ) { wynik = Math.exp(temp) ; reset(wynik); }

if(ktory2=='+/-') document.form1.ekran.value = eval(-temp);

if(ktory2=='=' && oset && op!='0') reset(eval(wynik + op + temp));

if (ktory2=='C') reset(0);

if(document.form1.ekran.value[0] == '.')

document.form1.ekran.value = '0' + document.form1.ekran.value;

}

//-->

</SCRIPT>

<p>

 <body bgcolor="black"><center><i><font face="arial" color="white" size="2">

Obrigado por usar nossos serviços</font></i>

<form name="form1">

<TABLE bgcolor="#FF6600">

<TR>

<TD>

<TABLE BORDER=0 cellspacing=3 cellpadding=1 bgcolor="#FF9933">

<TR align=center bgcolor="#FF6600">

<TD colspan=5>

<input type="text" name="ekran" value="0">

</TD>

</TR>

<TR align=center bgcolor="#FF6600">

<TD colspan=4>

<B>

<font color="Black" face="Georgia, Times New Roman, Times, serif" size="3">

Calculadora

</font>

</B>

</TD>

<TD>

<input type="button" name="C" value=" C " onClick="button(11,'C')">

</TD>

</TR>

<TR align=center bgcolor="#FF6600">

<TD>

<input type="button" name="7" value=" 7 " onclick="button(7 ,'')">

</TD>

<TD>

<input type="button" name="8" value=" 8 " onclick="button(8 ,'')">

</TD>

<TD>

<input type="button" name="9" value=" 9 " onclick="button(9 ,'')">

</TD>

<TD>

<input type="button" name="/" value=" / " onclick="button(11,'/')">

</TD>

<TD>

<input type="button" name="sqrt" value="V¯¯" onClick="button(11,'sqrt')">

</TD>

</TR>

<TR align=center bgcolor="#FF6600">

<TD>

<input type="button" name="4" value=" 4 " onClick="button(4,'')">

</TD>

<TD>

<input type="button" name="5" value=" 5 " onClick="button(5,'')">

</TD>

<TD>

<input type="button" name="6" value=" 6 " onClick="button(6,'')">

</TD>

<TD>

<input type="button" name="*" value=" * " onclick="button(11,'*')">

</TD>

<TD>

<input type="button" name="exp" value="exp" onClick="button(11,'exp')">

</TD>

</TR>

<TR align=center bgcolor="#FF6600">

<TD>

<input type="button" name="1" value=" 1 " onclick="button(1,'')">

</TD>

<TD>

<input type="button" name="2" value=" 2 " onclick="button(2,'')">

</TD>

<TD>

<input type="button" name="3" value=" 3 " onclick="button(3,'')">

</TD>

<TD>

<input type="button" name="-" value=" - " onclick="button(11,'-')">

</TD>

<TD>

<input type="button" name="1/x" value="1/x " onClick="button(11,'1/x')">

</TD>

</TR>

<TR align=center bgcolor="#FF6600">

<TD>

<input type="button" name="0" value=" 0 " onclick="button(0,'')">

</TD>

<TD>

<input type="button" name="+/-" value=" +/- " onClick="button(11,'+/-')">

</TD>

<TD>

<input type="button" name="." value=" , " onclick="button(11,'.')">

</TD>

<TD>

<input type="button" name="+" value=" + " onclick="button(11,'+')">

</TD>

<TD>

<input type="button" name="=" value=" = " onclick="button(11,'=')">

</TD>

</TR>

</TABLE>

</TD>

</TR>

</TABLE>

</form>

</head>

<FORM>

<INPUT TYPE="button" NAME="Button"

VALUE="Fechar" ONCLICK="window.close()">

</FORM></center></body></html>

AjaxLib

Descrição: Pequena ferramenta que permite trabalhar com a metodologia AJAX de forma simplificada. Compatíel com IE6, Opera 8, Firefox 1+, Mozilla 1.3+ e Safari 1+

// AJAXLib v. 1.0
// author: Jacek Karaszewski, http://www.karaszewski.com/tools/ajaxlib/
// licenced under Creative Commons Attribution 2.5 License

// public

// function loadXMLDoc(xml_url, function_name, ignore_white)
function loadXMLDoc(url, callFunc, ignoreWhite) {
functionToCall = callFunc;
stripWS = ignoreWhite;
xmlRequestObj = window.XMLHttpRequest?new XMLHttpRequest():new ActiveXObject("Microsoft.XMLHTTP")
xmlRequestObj.onreadystatechange = proccessXML;
xmlRequestObj.open("GET", url, true);
xmlRequestObj.send(null);
}

// private

function is_ws(nod) {
return !(/[^\t\n\r ]/.test(nod.data));
}

function findWhiteSpace(node, nodeNo) {
for (i=0; i if (node.childNodes[i].nodeType == 3 && is_ws(node.childNodes[i])) {
nodesToDelete[nodesToDelete.length] = node.childNodes[i]
}
if (node.childNodes[i].hasChildNodes()) {
findWhiteSpace(node.childNodes[i], i);
}
}
node = node.parentNode;
i = nodeNo;
}

function stripWhiteSpace(node) {
nodesToDelete = Array();
findWhiteSpace(node, 0);
for(i=nodesToDelete.length-1;i>=0;i--) {
nodeRef = nodesToDelete[i];
nodeRef.parentNode.removeChild(nodeRef)
}
}

function proccessXML() {
if (xmlRequestObj.readyState == 4 && (xmlRequestObj.status == 200 || xmlRequestObj.status == 304)) {
if(stripWS) {
stripWhiteSpace(xmlRequestObj.responseXML);
}
resultXML = xmlRequestObj.responseXML;
functionToCall()
}
}

Expressões de loops do while

Usa-se o do while quando se quer que um trecho de código se repita n vezes, mas executa o bloco de código antes da verificação da condição.

<html>  <body>    <script>    numero = 0    do  {   numero++  }  while (numero < 10)    alert(numero)    </script>    </body>  </html>

A diferença de ter um do na frente é que o código será executado antes da condição ser verificada. Execute exemplo e verifique se o resultado é diferente do while normal.

Expressões de loops while

Usa-se o while quando se quer que um trecho de código se repita n vezes, com condicional bem simples.

<html>  <body>    <script>    numero = 0    while (numero < 10)  {   numero++  }    alert(numero)    </script>    </body>  </html>

Enquanto a condição for verdadeira, o bloco será executado. Note que dentro do bloco estamos executando um código que fará a condição ser falsa depois de algumas repetições. Se não fizéssemos a condição ficar falsa, ele entraria no que chamamos de loop infinito, o que não é nada bom.

Expressões de loops for

Usa-se o for quando se quer que um trecho de código se repita n vezes.

<html>  <body>    <script>    a = 2    for (i = 0; i < 2; i++)  {   a = i  }    alert(a)    </script>    </body>  </html>

A novidade é a linha de código acima mostrada em vermelho. Vamos analizá-la.

for (i = 0; i < 2; i++)

Utilizamos uma variável temporária chamada i. Inicializamos ela com valor igual a zero.

for (i = 0; i < 2; i++)

O bloco do meio funciona como um if. Se o valor de i for menor que 2, ele entra no loop.

for (i = 0; i < 2; i++)

A última parte diz o que fazer com a variável i. Neste caso a cada repetição, estamos incrementando o valor de i. Se não fizéssemos isto, a condição anterior (i < 2) sempre seria verdadeira, e entraríamos em um loop infinito, pois o valor de i sempre seria menor que dois.

Expressões seletoras switch

Usar o switch para condições de comparações simples, ao invés de utilizar o if

<html>  <body>    <script>    farol = "amarelo"    switch (farol) {   case "vermelho":    alert("Pare")    break   case "amarelo":    alert("Atencao")    break   case "verde":    alert("Prossiga")    break   default:    alert("Cor ilegal")  }     </script>    </body>  </html>

Atenção, não esqueça do break!

Sempre inclua um default. Se todas as condições anteriores forem falsas, o switch entrará no default. Ele é muito importante. O sistema de telefonia dos Estados Unidos já foi uma vez paralisada por várias horas por causa da falta de um default!

Agrupando condições:

<html>  <body>    <script>    letra = "e"    switch (letra) {   case "a":   case "e":   case "i":   case "o":   case "u":    alert("Vogal")   default:    alert("Outro caracter")  }     </script>    </body>  </html>

Ilustramos acima o porquê do uso (ou desuso) do break.

Expressões condicionais if else encadeadas

Demonstrar o uso encadeado do if else

<html>  <body>    <script>    bananas = 22    if (bananas == 6)  {   alert("Temos seis de bananas")  }  else if (bananas == 10)  {   alert("Temos dez bananas")  }  else  {   alert("Temos outra quantidade de bananas")  }    </script>    </body>  </html>

No exemplo acima, cairemos em "Temos outra quantidade de bananas". Experimente trocar o valor de bananas (para seis ou para dez) para cair nas outras condições.

Expressões condicionais if else

Utilizar o else, quando o if não for verdadeiro

<html>  <body>    <script>    bananas = 22    if (bananas == 6)  {   alert("É verdade. Temos meia dúzia de bananas")  }  else  {   alert("Não é verdade. Temos outra quantidade de bananas")  }    </script>    </body>  </html>

Neste exemplo estamos utilizando o if else.

Leia-se: Se (if) o número de bananas for igual a 6, faça alert("É verdade. Temos meia dúzia de bananas"). Senão (else), faça alert("Não é verdade. Temos outra quantidade de bananas").

Expressões condicionais if

Implementar o uso de expressões condicionais

<html>  <body>    <script>    bananas = 6    if (bananas == 6)  {   alert("É verdade. Temos meia dúzia de bananas")  }    </script>    </body>  </html>

O if é a mais básica das expressões condicionais no JavaScript. Com ele, você pode decidir se quer executar uma ação ou não.

Entendendo o código:

bananas = 6

Faz com que a variável "bananas" receba o número 6.

if (bananas == 6)  {   alert("É verdade. Temos meia dúzia de bananas")  }

O trecho acima é uma expressão condicional if.

Vamos analisar:

if (bananas == 6)  {   alert("É verdade. Temos meia dúzia de bananas")  }

Esta é a expressão condicional. Se ela for verdadeira (no caso, se bananas for igual a seis), entraremos no bloco de código. A seguir, temos a estrutura de um bloco de código.

if (bananas == 6)  {   alert("É verdade. Temos meia dúzia de bananas")  }

Abre o bloco de código. Este é conjunto de operações que se deseja realizar. Reforçando, só estaremos executando esta parte se a condicional for verdadeira.

if (bananas == 6)  {   alert("É verdade. Temos meia dúzia de bananas")  }

Nos mostra uma janelinha de aviso o seguinte texto: É verdade. Temos meia dúzia de bananas

if (bananas == 6)  {   alert("É verdade. Temos meia dúzia de bananas")  }

Fecha o conjunto de operações.

Você pode fazer experimentos, trocando o "bananas = 6" por "bananas = 10" ou qualquer outro valor que não seja 6.

Já que a condicional não vai ser verdadeira, ele simplesmente não entra no bloco do código que faz o alert("É verdade. Temos meia dúzia de bananas").

Exemplo básico, manipulação de variável

Fazer aparecer na tela o resultado de um cálculo.

<html>  <body>    <script>    a = 2  b = 9  c = a + b    alert(c)    </script>    </body>  </html>

Temos aqui manipulação de variáveis, assim como na matemática tradicional.

Entendendo o código:

a = 2

Faz com que a variável a receba o número 2.

b = 9

Faz com que a variável b receba o número 9.

c = a + b

Faz com que a variável c receba o resultado de a + b.

alert(c)

Faz com que uma janela exiba o conteúdo da variável c. Note que não usamos aspas na frente e atrás do c porque estamos consultando o valor de uma variável. Se colocássemos aspas, ele iria mostrar apenas a letra c, literalmente.

Onde coloco o código JavaScript?

02 - Onde coloco o código JavaScript?

Mostrar onde se digita o código JavaScript dentro de uma página HTML.

O Código JavaScript fica Entre o <script> e o </script>.

Ficaremos com a seguinte estrutura:

<html>  <body>    <script>    alert("Minha primeira mensagem!")    </script>    </body>  </html>

Eis nosso primeiro código. Vamos analisá-lo?

Entendendo o código:

alert("Minha primeira mensagem!")

Exibe uma janela com a frase Minha primeira mensagem! com apenas um botão de OK. Teste você mesmo, crie um arquivo com extensão .htm e execute.

Há mais três diferentes maneiras de colocar o código JavaScript na página, mas iremos utilizar o método acima em nosso tutorial.

01 - Introdução

Iniciando o Tutorial...

Para quem é direcionado este Tutorial de JavaScript?

Para quem não sabe nada de JavaScript ainda, mas já sabe básico de HTML.

O que é JavaScript?

É uma linguagem utilizada principalmente para auxílio de desenvolvimento de páginas para a Internet.

JavaScript é a mesma coisa que Java?

Não, JavaScript é mais simples que Java. Aprender JavaScript é o melhor começo se você quer aprender Java, C, C++, PHP, pois a sintaxe (forma de escrever a linguagem) é semelhante.

O que posso fazer com o JavaScript?

Você pode tornar suas páginas mais "inteligentes", com recursos adicionais como: botões que mudam ao passar o mouse em cima, exibir o horário atual, verificar se o preenchimento de um formulário está correto, e muito mais! O JavaScript pode lhe salvar nas horas em que você menos espera, pois as possibilidades de utilização são infinitas.

Rollover com Javascript

Aprenda a fazer um efeito de iluminação sobre uma imagem ao passar o mouse por cima. Pelo ponto de vista prático, você mesmo será capaz de fazer em alguns minutos.

Exemplo de rollover

Fazer com que mude uma imagem ao passar o mouse por cima, como convidando a clicar, chamamos de rollover. É um dos efeitos mais vistosos que podemos incluir em uma página web con poucas linhas de Javascript, e sem necessidade de saber programar.

Vamos ver a técnica pela prática e com uma elemental receita:

Colocamos na página a imagem que tem o desenho apagado. Além disso, lhe atribuímos um nome, para poder nos referirmos a ela mediante JavaScript.

<img src="desenho_apagado.gif" name="imagen1">

Agora colocamos o link cujo queremos navegar no momento no qual o usuário clique nele.

<a href="ir_a.html">

3. Começamos com JavaScript

Devemos colocar dois atributos HTML ao link que vai nos servir para realizar o efeito buscado.

OnMouseOver, com ele indicaremos, mediante JavaScirpt, a ação a realizar quando pousarmos o mouse em cima da imagem.

OnMouseOut nos serve para definir o evento de retirar o mouse da imagem,

<a href="ir_a.html" onmouseover="-Código JavaScript-" onmouseout="-Código JavaScript-">

4. Pegamos as imagens com JavaScript

Vamos declarar duas variáveis com JavaScript para salvar as imagens iluminada e apagada. Para isso, vamos utilizar a etiqueta <SCRIPT> de HTML. Podemos colocar o script em qualquer lugar, mas seria mais adequado colocar antes da imagem.

Os números que vocês verão correspondem com a largura e com a altura da imagem que estão pegando.

<script language=javascript>

iluminada = new Image(84,34)

iluminada.src = "desenho_iluminado.gif"

apagada = new Image(84,34)

apagada.src = "desenho_apagado.gif"

</script>

5. Escrevemos o código dos eventos

Para acessar um elemento de JavaScript utilizamos a hierarquia de objetos de JavaScript. Pode ser complicada, mas nosso objetivo é simples, assim faremos:

window.document['nome_da_imagem'].src = variavel_imagem_javascript.src

Teoricamente, os atributos HTML dos eventos onmouseover e onmouseout ficarão assim:

onmouseover="window.document['imagem1'].src= iluminada.src

onmouseout="window.document['imagem1'].src = apagada.src

5. Este é o código completo

Efeitos rápidos com Javascript

Antes de aprofundarmos na matéria, veremos alguns exemplos de códigos simples de grande utilidade.

Antes de aprofundarmos na matéria, podemos ver uma série de efeitos rápidos que se podem programar com Javascript. Isto, pode nos dar uma idéia más clara e exata das capacidades e da potência da linguagem na hora de percorrer os próximos capítulos.

Abrir uma janela secundária

Primeiro vamos ver que com uma linha de Javascript podemos fazer coisas bastante atrativas. Por exemplo podemos ver como abrir uma janela secundária sem barras de menus que mostre o buscador Google. O código seria o seguinte:

<script>

window.open("http://www.google.com","","width=550,height=420,menubar=no")

</script>

Podemos ver o exemplo em funcionamento aqui.

Uma mensagem de boas vindas

Podemos mostrar uma caixa de texto emergente ao terminar de carregar o portal de nosso site web, que poderia dar as boas vindas aos visitantes.

<script>

window.alert("Bem-vindo ao meu site web. Obrigado...")

</script>

Podemos ver o exemplo em uma página a parte.

Data atual

Vejamos agora um simples script para mostrar a data de hoje. Às vezes é muito interessante mostrá-la nas webs para dar um efeito de que a página está "ao dia", ou seja, está atualizada.

<script> document.write(new Date()) </script>

Estas linhas deveriam ser introduzidas dentro do corpo da página no lugar onde quisermos que apareça a data da última atualização. Podemos ver o exemplo em funcionamento aqui.

Nota: Um detalhe a destacar é que a data aparece em um formato um pouco raro, indicando também a hora e outros atributos da mesma, mas já aprenderemos a obter exatamente o que desejarmos no formato correto.

Botão de voltar

Outro exemplo rápido pode ser visto a seguir. Trata-se de um botão para voltar para trás, como o que temos na barra de ferramentas do navegador. Agora veremos uma linha de código que mistura HTML e Javascript para criar este botão que mostra a página anterior no histórico, se é que havia.

<input type=button value=Atrás onclick="history.go(-1)">

Como diferença com os exemplos anteriores, há que destacar que neste caso a instrução Javascript se encontra dentro de um atributo de HTML, onclick, que indica que essa instrução tem de ser executada como resposta ao clicar no botão.

É possível comprovar a facilidade com a qual se podem realizar algumas ações interessantes, e existiriam muitas outras mostras, mas que reservamos para capítulos posteriores.

Script para informar da segurança de uma senha, com Javascript

Queremos informar ao usuário, quando escreve uma senha, sobre o grau de segurança da senha. Para fazer isso, vejamos este simples script Javascript.

Veremos um simples script em Javascript para comprovar o grau de segurança de uma senha escrita pelo usuário. Como é um script javascript do lado do cliente, permitirá mostrar o nível de segurança da senha ao mesmo tempo que o usuário a escreve em um campo de formulário.

Poderemos utilizar este script livremente em nossas páginas, de modo que ofereçamos aos visitantes uma informação sobre o segura ou insegura que é a senha que estão escolhendo, o que lhes motivará a escrever senhas mais seguras que as que habitualmente se escrevem.

Podemos ver um exemplo do objetivo buscado antes de continuar.

Em um artigo anterior do Workshop de Javascript estivemos mostrando a maneira de fazer várias funções para comprovar um string e saber se tem letras, números, maiúsculas e minúsculas. Utilizaremos estas funções agora para este script de informação de segurança da senha.

Para valorizar o grau de segurança de uma senha vamos ter em conta estas pontuações sobre diferentes conceitos:

Tem letras e números: +30%

Tem maiúsculas e minúsculas: +30%

Tem entre 4 e 5 caracteres: +10%

Tem entre 6 e 8 caracteres: +30%

Tem mais de 8 caracteres: +40%

Poderíamos ter escolhido qualquer outra pontuação para a segurança da senha, porém esta valerá. Também poderíamos ter criado outros critérios para decidir o grau de segurança. De qualquer forma para que fique claro este cálculo, ponho um par de exemplos:

A) Uma senha com números e letras, com 7 caracteres teria: 30% por letras e números + 30% por ter entre 6 e 8 caracteres = 60% de segurança.

B) Outra senha com letras maiúsculas e minúsculas, sem números, e com 8 caracteres: 30% por maiúsculas e minúsculas + 40% por mais de 8 caracteres = 70% de segurança.

Para controlar a segurança, apoiando-nos nas funções de validação alfanumérica de strings vistas anteriormente, faremos uma função como esta:

function seguranca_senha(senha){

var seguranca = 0;

if (senha.length!=0){

if (tem_numeros(senha) && tem_letras(senha)){

seguranca += 30;

}

if (tem_minusculas(senha) && tem_maiusculas(senha)){

seguranca += 30;

}

if (senha.length >= 4 && senha.length <= 5){

seguranca += 10;

}else{

if (senha.length >= 6 && senha.length <= 8){

seguranca += 30;

}else{

if (senha.length > 8){

seguranca += 40;

}

}

}

}

return seguranca

}

Vamos comprovando se o string tem diversas coisas, como letras, números, maiúsculas, minúsculas, assim como sua longitude, para ir atribuindo um maior valor à segurança.

Exemplo de uso em um formulário que pede uma senha

Agora, vejamos um simples exemplo de uso da função em um formulário, que mostra a segurança de uma senha escrita pelo usuário:

O formulário poderia ser como este:

<form>

Senha: <input type="password" size=15 name="senha" onkeyup="mostra_seguranca_senha(this.value, this.form)">

<i>seguranca:</i> <input name="seguranca" type="text" style="border: 0px; background-color:ffffff; text-decoration:italic;" onfocus="blur()">

</form>

Como vemos, temos 1 campo INPUT de tipo PASSWORD onde escreveremos a senha. A este campo se introduziu um evento ONKEYUP que se executa quando o usuário clica uma tecla, porém no momento de soltá-la. Essa função será a encarregada de fazer com que se visualize a segurança da senha.

Ademais, colocamos outro campo de texto, para colocar o valor de segurança da senha. Este campo o forçamos a que não se possa escrever nele com o evento onfocus="blur()">. Só se poderá modificar mediante Javascript.

Vejamos a função mostra_seguranca_senha(), que é a que se encarrega de receber tanto a senha escrita como o formulário onde se encontra, para atualizar o valor de segurança.

function mostra_seguranca_senha(senha,formulario){

seguridad=seguranca_senha(senha);

formulario.seguranca.value=seguranca + "%";

}

Como vemos, se faz uso da função que devolve a segurança de um string que se utilizará como senha. Logo, se coloca esse valor no campo de texto adicional que há no formulário.

codigojavascript

Calculadora 3

Calculadora 2

Calculadora 1

AjaxLib

Expressões de loops do while

Usa-se o do while quando se quer que um trecho de código se repita n vezes, mas executa o bloco de código antes da verificação da condição.

Expressões de loops while

Usa-se o while quando se quer que um trecho de código se repita n vezes, com condicional bem simples.

Expressões de loops for

Usa-se o for quando se quer que um trecho de código se repita n vezes.

Expressões seletoras switch

Usar o switch para condições de comparações simples, ao invés de utilizar o if

Agrupando condições:

Expressões condicionais if else encadeadas

Demonstrar o uso encadeado do if else

Expressões condicionais if else

Utilizar o else, quando o if não for verdadeiro

Expressões condicionais if

Implementar o uso de expressões condicionais

Entendendo o código:

Vamos analisar:

Exemplo básico, manipulação de variável

Fazer aparecer na tela o resultado de um cálculo.

Entendendo o código:

Onde coloco o código JavaScript?

Mostrar onde se digita o código JavaScript dentro de uma página HTML.

Entendendo o código:

01 - Introdução

Para quem é direcionado este Tutorial de JavaScript?

O que é JavaScript?

JavaScript é a mesma coisa que Java?

O que posso fazer com o JavaScript?

Rollover com Javascript

Efeitos rápidos com Javascript

Script para informar da segurança de uma senha, com Javascript

Marcadores

Arquivo do blog

Usa-se o do while quando se quer que um trecho de código se repita n vezes, mas executa o bloco de código antes da verificação da condição.

Usa-se o while quando se quer que um trecho de código se repita n vezes, com condicional bem simples.

Usa-se o for quando se quer que um trecho de código se repita n vezes.

Usar o switch para condições de comparações simples, ao invés de utilizar o if

Agrupando condições:

Demonstrar o uso encadeado do if else

Utilizar o else, quando o if não for verdadeiro

Implementar o uso de expressões condicionais

Entendendo o código:

Vamos analisar:

Fazer aparecer na tela o resultado de um cálculo.

Entendendo o código:

Mostrar onde se digita o código JavaScript dentro de uma página HTML.

Entendendo o código:

Para quem é direcionado este Tutorial de JavaScript?

O que é JavaScript?

JavaScript é a mesma coisa que Java?

O que posso fazer com o JavaScript?

Inscrever-se

Marcadores

Arquivo do blog