Redirecionando com JavaScript [RESOLVIDO]

1. Redirecionando com JavaScript [RESOLVIDO]

murilosoardi
(usa Ubuntu)

Enviado em 30/07/2013 - 18:19h

Sou iniciante, estou aprendendo a programar sozinho, comecei fazem 2 semanas e estou criando uma página html que quero testar algumas coisas.
Quero que funcione mais ou menos assim:
Campo(a)_________
Quando Campo(a) for igual a "murilo", por exemplo, seja direcionado para a página "murilo.hmtl".
Sendo campo(a) type="text".
Usando javascript, como eu faço isso?

0 0

Quote

2. Re: Redirecionando com JavaScript [RESOLVIDO]

EnzoFerber
(usa FreeBSD)

Enviado em 09/08/2013 - 10:05h

Olá,

HTML:


<input type="text" name="myInput" id="myName" />

JavaScript:


var myInput = document.getElementById('myName');

var control = {
    checkName: function ( event ) {
        var text = this.value;
        var pattern = new RegExp ( "(^| )google( |$)" );
        
        if ( pattern.test(text) ) {
            open ( "http://www.google.com" );
        }
    }
};

myInput.addEventListener ('input', control.checkName, false );

O que o código faz é pegar o input e colocá-lo em uma variável (usando getElementById), depois, defini-se um objeto control (só pra fins de organização, poderia ser uma função comum também). Dentro desse objeto é criado um método checkName, que usa uma expressão regular para ver se o texto digitado é 'google', se for, ele abre em uma nova aba o site do google. A variável 'text' contem o valor de texto do campo input.

E a ultima linha define um EventListner, onde toda vez que o campo input sofrer uma alteração (o usuário digitar um caractere) ele chama a função control.checkName, e esta vai testar nossa condição.

É isso aí.

NO JSFiddle você pode ver o snippet funcionando. ;)

URL do código no JSFiddle: http://jsfiddle.net/enzoferber/xV7cw/

Qualquer dúvida posta denovo,
Enzo Ferber
[]'s

0 0

Quote

3. Re: Redirecionando com JavaScript [RESOLVIDO]

EnzoFerber
(usa FreeBSD)

Enviado em 09/08/2013 - 10:10h

Ah!

Mais uma coisa, você pode usar a jQuery também, que simplifica muito as coisas.


$('#myName').change ( function (){ 
    if ( $(this).val() == "google" ) {
        open ( "http://google.com" );
    }
});

JSFiddle: http://jsfiddle.net/enzoferber/T6BXE/

Só que como você tá aprendendo JavaScript, é melhor fazer só no JavaScript. Experiência própria. Fui aprender primeiro a jQuery por causa da facilidade e agora tô aprendendo o JavaScript... faz falta.

P.S.: O único porém deste código é que o valor não é testado sempre que o usuário digita alguma coisa, e só quando o foco sai da input (como quando você termina de digitar e aperta TAB para ir ao próximo campo.

Enzo Ferber
[]'s

0 0

Quote

4. Re: Redirecionando com JavaScript [RESOLVIDO]

murilosoardi
(usa Ubuntu)

Enviado em 11/08/2013 - 10:59h

EnzoFerber escreveu:

Olá,

HTML:


<input type="text" name="myInput" id="myName" />

JavaScript:


var myInput = document.getElementById('myName');

var control = {
    checkName: function ( event ) {
        var text = this.value;
        var pattern = new RegExp ( "(^| )google( |$)" );
        
        if ( pattern.test(text) ) {
            open ( "http://www.google.com" );
        }
    }
};

myInput.addEventListener ('input', control.checkName, false );

Bah, valeu, vou testar aqui!

0 0

Quote

5. Re: Redirecionando com JavaScript [RESOLVIDO]

murilosoardi
(usa Ubuntu)

Enviado em 18/08/2013 - 20:59h

[spoiler]

EnzoFerber escreveu:

Olá,

HTML:


<input type="text" name="myInput" id="myName" />

JavaScript:


var myInput = document.getElementById('myName');

var control = {
    checkName: function ( event ) {
        var text = this.value;
        var pattern = new RegExp ( "(^| )google( |$)" );
        
        if ( pattern.test(text) ) {
            open ( "http://www.google.com" );
        }
    }
};

myInput.addEventListener ('input', control.checkName, false );

[/spoiler]

Enzo,
Funcionou bem do jeito que queria, mas queria adicionar mais comandos. Além de "google", gostaria de adicionar mais comandos, consegues me ajudar?

0 0

Quote

6. Re: Redirecionando com JavaScript [RESOLVIDO]

EnzoFerber
(usa FreeBSD)

Enviado em 18/08/2013 - 23:18h

http://jsfiddle.net/enzoferber/xV7cw/3/


var myInput = document.getElementById('myName');
var lookForThis = [['google', 'http://www.google.com'], 
                   ['vivaolinux', 'http://www.vivaolinux.com.br'],
                   ['stackoverflow', 'http://www.stackoverflow.com'],
                   ['gmail', 'http://mail.google.com']];
var control = {
    checkName: function ( event ) {
        var text = this.value;
        
        for ( var i = 0; i < lookForThis.length; i++ ) {
            
            if ( text == lookForThis[i][0] ) {
                alert ( lookForThis[i][1] );
                // open ( lookForThis[i][1] );
            }
        }
    }
};

myInput.addEventListener ('input', control.checkName, false );

Não usei a expressão regular porque acho que já que vai procurar tanto site, não precisa de algo que reconheça o texto com ou sem espaços, etc...

Mais a base é isso aí. Faz um array com tudo que você quer procurar e os links, depois é só fazer um for() que fica tudo certo.

[]'s
Enzo Ferber

0 0

Quote