|
JavaScript em Exemplos - Página 2 Este script abre e fecha uma janela quando o usuário clica em botões.. ( veja funcionando ). < script> temp=window.open("", "tempwindow", "toolbar=0,location=0,directories=0,status=0,menubar=0,scrollbars=0,resizable=0,width=550,height=120"); temp.document.writeln("Você clicou no botão para abrir a janela"); // com window.open abre uma janela com vários parâmetros. document.uberaba.botao1.disabled = true ; // desabilita o botão botao1 document.uberaba.botao2.disabled = false ; // habilita o botão botao2 } function fechajanela() { // cria a função fechajanela temp.window.close(); // fecha a janela aberta com window.open na função abrejanela document.uberaba.botao1.disabled = false ; // habilita o botão botao1 document.uberaba.botao2.disabled = true ; // disabilita o botão botao2 } function inicio() { // cria a função inicio() document.uberaba.botao1.disabled = false ; // habilita o botão botao1 document.uberaba.botao2.disabled = true ; // disabilita o botão botao2 } < /script> < body onLoad="inicio()"> // Quando a página for carregada pelo browser, a função inicio() será executada < br>< br>< br>< br>// muda de linha, cada é como se fosse um enter. < form name="uberaba"> // cria um formulário html com nome uberaba < input type="button" name="botao1" value="Mostra" onClick="abrejanela()"> // cria o botão botao1, quando o usuário clicar neste botão a função abrejanela() será executada. < input type="button" name="botao2" value="Fecha" onClick="fechajanela()"> // cria o botão botao2 quando o usuário clicar neste botão a função fechajanela() será executada. < /form> // finaliza o formulário uberaba < /body> Este script calcula o fatorial de um número informado pelo usuário. ( veja funcionando ). < script> var a = 0; // cria a a variavel a var b = 1; // cria a a variavel b var c = 1; // cria a a variavel c if ( isNaN(document.araxa.v1.value) ) { // verifica se o número digitado realmente é um número alert("Você não digitou un número !") ; // se a informação digitada não é numérico avisa o usuário. document.araxa.v1.value = 0; // coloca zero no campo v1, porque o usuário digitou errado. } else { // se a informação digitada em v1 é numérica a = parseInt( document.araxa.v1.value ) ; // a variável a recebe o conteúdo de v1, convertido para integer. while ( b <= a ) { // enquanto a variável b for menor ou igual a variavel a, faça c = c * b ; // a variável c recebe o resultado da multiplicação de c * b b++ ; // a variável b será incrementada em 1, também poderia ser escrito b = b + 1 ; } // final do laço while document.araxa.r1.value = c ; // o campo r1 do formulário recebe o fatorial do número digitado em v1 } // fecha o if } // fecha o function function inicio() { // cria a função inicio() document.araxa.r1.disabled = true ; // disabilita o acesso ao campo r1, porque será utilizado apenas para mostrar o resultado. document.araxa.v1.focus() ; // coloca o cursor no campo v1, para o usuário digitar o número } // fecha o function < /script> < body onLoad="inicio()"> // quando a página for carregada pelo browser, será executado a função inicio(). < form name="araxa"> // cria um formulário html com nome araxa Digite um número : < input type="text" name="v1" value=""> // cria o campo v1 < input type="button" name="b1" value="Processa" onClick="calcula()"> // cria o botão fecha o function o fatorial do número digitado é : < input type="text" name="r1"> // campo r1 para mostrar o resultado. // finaliza o formulário araxa. Este script mostra uma sequência de números de 0 até 30. O usuário informa qual será o valor do incremente. Por exemplo: se o usuário digitar 5, o script mostrará 0, 5, 10, 15, 20, 25, 30. ( veja funcionando ). < script> var a = b = 0; // Cria as variáveis a e b, com valor inicial zero. var c = ''; // Cria a variavel c. if ( isNaN(document.form1.v1.value) ) { // Se o usuário digitar caracteres não númerio no campo v1. alert("Você não digitou un número !"); // avisa que v1 deve ser numérico. document.form1.v1.value = 0; // Coloca ZERO em v1. } else { // Senão, o usuário digitou apenas caracteres numérios if ( parseInt(document.form1.v1.value) > 10 ) { // Se o número digitado pelo usuário for maior que 10 alert("Você digitou un número maior que 10 !"); // avisa o usuário que o número não pode ser maior que 10 document.form1.v1.value = 0; // coloca zero no campo v1 } else { // Senão, significa que o usuário digitou um número menor ou igual a 10 if ( parseInt(document.form1.v1.value) < 1 ) { // Se o número digitado pelo usuário for menor que 1 alert("Você digitou um número menor que 1 !"); // Avisa o usuário que o número não pode ser menor que 1 document.form1.v1.value = 0; // coloca zero no campo v1 } else { // Senão, significa que o usuário digitou um número entre 1 e 10. b = parseInt( document.form1.v1.value ); // Converte a informação digitada pelo usuário para integer e coloca na variável b for ( a = 0 ; a <= 30 ; a+=b ) {// a recebe zero; enquanto a menor ou igual a 30; a = a + b c = c + a + ', '; // na variável c concatena-se o resultado a ser mostrado, a cada laço do for. } document.form1.r1.value = c ; // O campo r1 recebe o conteúdo da variável c. } } } } function inicio() { // Cria a função inicio(). document.form1.r1.disabled = true ; // Não permite que o usuário altere o campo r1. document.form1.v1.focus() ; // coloca o cursor no campo v1. } < /script> < body onLoad="inicio()"> // Quando o browser carregar está página, será executado a função inicio(). Mostra de 0 até 30. O usuário informa qual será o valor de incremento : < form name="form1"> // Cria o fomulário form1 Digite um número de 1 a 10 em seguida digite enter ou tab : < input type="text" name="v1" value="" onchange="calcula()"> // Cria o campo v1, quando este campo for alterado pelo usuário (onchange), será executado a função calcula(). Resultado : < input type="text" name="r1" size="90"> // Cria o campo r1, com tamanho 90 < /form> Este script mostra que pode-se ter acesso aos campos de um formulário html, sem fazer referencia ao nome do campo. Isto é possivel utilizando-se ELEMENTS. ( veja funcionando ). < script> var a = b = 0; // Cria as variáveis a e b com valor inical zero. var c = ''; // Cria a variavel c. a = parseInt(document.form1.elements.length) ; // elements.length retorna o número de objetos (campos) existem em um formulário. Neste exemplo document.form1.elements.length é igual a 5 (v1,v2,v3,v4 e v5). Assim a variável a receberá o valor 5. while ( b < a ) { // Enquanto b for menor que a c = c + b + "=" + document.form1.elements[b].value + " ; " ; // elements[0].value é igual a v1.value , elements[1].value é igual a v2.value e assim sucessivamente. Portanto na variável c estamos concatenando o resultado que desejamos mostrar. b++ ; // este comando equivale a : b = b + 1 ; } document.writeln ( c ); // mostra o conteúdo da variável c. } < /script> < form name="form1"> // Cria o formulário form1 < input type="text" name="v1"> // Cria o campo (objeto) v1 < input type="text" name="v2"> // Cria o campo (objeto) v2 < input type="text" name="v3">// Cria o campo (objeto) v3 < input type="text" name="v4"> // Cria o campo (objeto) v4 < input type="text" name="v5" value="" onchange="mostra()"> // Cria o campo (objeto) v5, quando v5 é alterado (onchange) é executado a função mostra(). < /form> Este script mostra que utilizando o método indexOf pode-se descubrir se existe uma letra em uma palavra ou frase. ( veja funcionando ). < script>function verifica() { // Cria a função verifica(), responsável por verificar a existência da letra na palavra var a = new String ; // Cria variável a , do tipo string. var b = new String ; // Cria variável b , do tipo string. a = document.f1.p.value ; // Coloca na variável a a palavra digitada no campo p. b = document.f1.l.value ; // Coloca na variável b a letra digitada no campo l. if ( a.indexOf(b) == -1 ) { // Se o indxOf da letra, que agora está na variável b, for igual a -1, significa que não existe a letra dentro da palavra que agora está na variável a. alert("Não foi encontrado a letra " + b + " na palavra " + a );// Avisa o usuário que não tem a letra } else { // Senão, o indexOf retornou o número onde foi encontrado a letra. alert("Foi encontrado a letra [ " + b + " ] na palavra " + a + ", está na posição " + (a.indexOf(b)+1) ); // Avisa o usuário que existe a letra, e a posição onde ela foi encontrada } } < /script> < form name="f1"> Digite uma palavra : < input type="text" name="palavra" size="15"> Digite uma letra : < input type="text" name="letra" size="2" maxlength="1" onchange="verifica()"> < /form> // Veja outro exemplo de como o indexOf funciona
: ( veja funcionando ) alert( "a letra v não está na palavra uberaba, indexof= [ " + x + " ]"); // Mostra o valor de x |