Olá desenvolvedores, hoje dando continuidade ao minitreinamento de front-end, iremos trabalhar com a integração de JavaScript e HTML. O objetivo é apresentar a vocês essas importantes tecnologia de desenvolvimento web e incentivá-los a aprofundarem seus conhecimentos em HTML, CSS e JavaScript.

Então, dando início aos trabalhos como de costume, começaremos subindo nossa página web. E para isso iremos “startar” o servidor clicando em start na aba Servers da View para “subir” o projeto. Feito isso agora digite no navegador localhost:8080/front-end.

Até agora temos um pequeno formulário de cadastro de login e senha, onde trabalhamos um pouco de CSS estilizando campos e textos do formulário. Tornando-o um pouco mais atraente do que somente em HTML puro.

UM POUCO DE JAVASCRIPT

Com o JavaScript iremos validar diretamente na tela se todos os dados foram informados. É com o JavaScript que manipulamos os elementos HTML de formar a deixar nossa página mais interativa e interessante. E não apenas isso, o JavaScript nos permite fazer também requisições do lado do servidor.

Todo o código em JavaScript deverá estar envolvido pelas tags <script></script>, que serão inseridas dentro do <body>, logo a pós a tag de fechamento do formulário.

<script type=”text/javascript> <script>

O JavaScript está para funções como o Java está para Classes, assim, criaremos uma função de validação de dados.

Function validarDados(){
}

Para declararmos uma variável em JavaScript utilizamos o comando let ou var, onde o primeiro possui escopo local ao passo que var possui escopo global. Então utilizaremos o var para declarar nossas variáveis. E chamaremos o elemento identificador – o ID, do elemento que desejamos manipular do documento HTML, no caso do exemplo abaixo, o nome.

E para que possa visualizar o JavaScript em ação, utilizarem o método de saída de dados alert(). Com o alert() poderemos exibir uma mensagem no navegador com os dados digitados nos campos do formulário. O mesmo procedimento será feito com login e a senha.

Var nome = Document.getElementById(“nome”).value;
alert(nome);

Mas e como chamaremos a função validarDados()? Declare na tag do botão salvar o evento onCllick que será o responsável por disparar esta ação.

<td><input type="submit" value="Salvar" onclick="validarDados()"></td> 

Atualize o navegador, digite um nome e clique em salvar, note que o nome digitado será exibido em uma caixa no navegador.

VALIDANDO OS DADOS

Mas e se o usuário não informar algum dado importante para a validação, como podemos proceder? Neste caso implementaremos dentro da função validarDados() a estrutura de decisão if. Desse modo se nome for igual a vazio, será informado ao usuário que é preciso informar o nome. Faremos isso para todos os campos de texto do formulário.

If(nome == ‘ ’){
    alert("Informe o nome");
    return false;
}

E se ao final todos os dados tiverem sido inseridos corretamente, a função retornará verdadeiro “return true”. Assim os dados serão exibidos.

Mas antes de atualizar a página faremos mais um ajuste. Delete o evento Onclick inserido na tag do botão de ‘Salvar’. Porque iremos validar os dados antes do formulário ser enviado, visto que o formulário não pode ser enviado faltando dados. Assim, na tag form implemente a linha de código abaixo:

<form action=“” onsubmit = “return validarDados()”>

Dessa forma, se ao função validarDados() retornar um true os dados serão enviados, mas se receber false, significa que algum dado não foi informado, desse modo nada irá acontecer. Para essa validação utilizaremos um operador de condicional terciário.

<form action=“” onsubmit = “return validarDados()? True : false”>

MÉTODOS GET E POST

Quando inserir algum dado e clicar no botão salvar, observe que na url da página os dados são expostos, isso acontece porque por default o método de requisição utilizado é o “get” – que utiliza a própria URL para enviar dados ao servidor, quando enviamos um formulário.

Então, vamos informar que utilizaremos o método “post”, que é um método de requisição projetado para solicitar ao servidor web que aceite os dados anexados no corpo da mensagem de requisição para armazenamento.

<form action=“” method=”post” onsubmit = “return validarDados()? True : false”>

EM POUCAS PALAVRAS

E é neste momento que a sua escolha acerca da linguagem a ser utilizada irá se fazer notar. Tal validação do lado do servidor, ou seja, o back-end, pode ser feito em qualquer linguagem. Como o curso de Formação Java web é focado na linguagem Java, iremos então enviar estes dados para uma Servelet. Esta servelet será a responsável por interceptar estes dados.

Entretanto, até este ponto é igual para todas as linguagens. É a partir do back-end que as coisas mudam e você escolhe a linguagem qual irá se dedicar, até dominá-la. E isso demanda, como já falamos outras vezes, tempo, dedicação e disciplina. Eu fico por aqui, nos vemos em um próximo módulo.