Olá pessoal!
Sou da área de publicidade e recentemente tentei arriscar mais uma vez o estudo da programação. Na época que entrei na faculdade, entrei pelo curso de Desenvolvimento de Jogos Digitais mas na época, 2007, não tínhamos tanto mercado aqui no RS. Agora estou focado em aprender, bater a cabeça e desenvolver novamente a programação pois quero voltar para essa área. Temos novas facilidades de aprendizado, a informação está muito mais acessível, etc.
Dito isso, como uma tentativa de consolidar os vários conhecimentos que eu vi nesse curso, tentei desenvolver uma tela de login inteira em JS (sem sucesso). Em minhas pesquisas, concluí que é obrigatório utilizar HTML e CSS para complementar esse projeto, mas fica de aprendizado.
Abaixo vocês podem ver o código que tentei desenvolver do zero, apenas da cabeça. Nesse caso, o botão de assimilar as informações com as cadastradas não está funcionando, mas fiquem livres para darem sugestões e etc:
<meta charset="UTF-8">
<script>
function pularLinha(){
document.write("<br>");
}
function username (){
loginInformado = document.write("<input/>");
}
function senha (){
senhaInformada = document.write("<input/>");
}
function loginButton (){
document.write("<button>Login</button>");
}
function verificarCadastro(){
if(userInformado == userRegistrado && senhaInformada == senhaRegistrada){
alert("Bem vindo!");
} else {
alert("Login inválido");
}
while(tentativaAtual <= maximoTentativas){
if(userInformado == userRegistrado && senhaInformada == senhaRegistrada){
alert("Bem-vindo ao site novamente!");
break;
} else {
alert("Login inválido, tente novamente.")
tentativaAtual++;
username();
senha();
if(tentativaAtual == maximoTentativas){
alert("Você expirou seu número de tentativas");
break;
}
}
}
}
var button = loginButton;
var userRegistrado = "user";
var senhaRegistrada = "teste01";
var userInformado = username;
var senhaInformada = senha;
var tentativaAtual = 1;
var maximoTentativas = 3;
username();
pularLinha();
senha();
pularLinha();
loginButton();
button.onclick = verificarCadastro;
</script>
