Curso Web Design | O que é Javascript e qual sua importância para páginas web

Link to Blog do Curso Web Design - Microcamp SP

O que é Javascript e qual sua importância para páginas web

Posted: 24 Apr 2014 06:03 AM PDT

Sendo conhecida como linguagem de script dinâmica, Javascript é muito utilizada em desenvolvimentos de aplicações web e também na maioria das vezes para validações de formulários e apresentar máscaras de entrada. Mas ele pode ir muito além de simples validações: saiba neste post o que é Javascript, qual sua diferença em relação ao Java, como utilizá-lo em suas páginas web, como utilizá-lo em validações em formulários e muito mais!

O que é Javascript?

O primeiro ponto que deve ser esclarecido é que Javascript não é uma linguagem de programação e sim uma linguagem de scripts dinâmica, que é executada no navegador, muito utilizada para o desenvolvimento web, facilitando a verificação de campos e validações sem que seja necessário o envio da página para o servidor.

Qual é a diferença entre o Java e o Javascript?

Não se sabe por quais motivos profissionais da área confundem tanto Java com Javascript, afinal ambas são totalmente distintas, e para dizimar essa dúvida observe a figura 1 a comparação entre elas:

Inserindo o Javascript em uma página HTML

Existem duas maneiras de inserir Javascript em seus trabalhos. Ambas as formas são responsáveis pela execução do código, a única diferença é que dependendo da forma que for inserida seu código poderá ficar mais “limpo”. Observe as duas maneiras a seguir.

Javascript em arquivos externos

Por padrão, o código Javascript sempre estará dentro da tag de cabeçalho <head></head> de seu documento HTML. É possível criar um arquivo com todas as funções de sua página, salvar como .js e importar para dentro de sua página, basta invocar o arquivo da seguinte maneira:

Javascript in-line

Quando optamos por incluir Javascript dentro do código podemos fazer de duas maneiras: Dentro do cabeçalho da página - Basta colocar dentro da tag HEAD, as tags Javascript como mostra o código abaixo:

Dentro do corpo da página - A grande diferença é que quando colocamos a tag Javascript dentro do cabeçalho, ela só será executada quando for chamada através de algum evento como onclick, onload, onmouseover. Dentro da tag do corpo da página o código é executado assim que a página for carregada. Observe o código abaixo:

Funções em Javascript

Javascript consiste boa parte de seu código na invocação de suas funções, que são criadas de acordo com a sua necessidade. As funções oferecem o benefício de manter seu código limpo e organizado, auxilia na reutilização do código, uma vez que para executar o mesmo bloco de comandos novamente basta invocar a função, sem contar que o código ao ser executado apresenta melhor desempenho. As funções também são muito utilizadas para realizarem chamadas a eventos, como um clique do mouse ou submeter os dados de um formulário. Obrigatoriamente as funções possuem como estrutura a palavra Function seguida do nome da função, parênteses por onde serão passados os parâmetros e é delimitada por chaves, como segue o exemplo abaixo. Exemplo:

function validar(parâmetro) {

bloco de comandos…

}

Tipos de Funções

Em Javascript temos dois tipos de funções: com retorno ou sem retorno.

Funções sem retorno

São as funções mais criadas, podem ou não possuir parâmetros, ideais para criação de trechos de códigos que serão reutilizados por diversas vezes no código-fonte. Observe o código abaixo, que apresenta uma função simples sem retorno e que exibe um alerta de boas vindas na tela. Observe a figura 5: na linha 11 é feita a invocação da função no método onload (que será executado assim que a página carregar):

Funções com retorno

As funções com retorno seguem o mesmo padrão das sem retorno, sua característica principal é que elas conseguem devolver um valor através do Script, seja ele qual for. Podendo posteriormente ser exibido ou atribuído a algum elemento de sua página. Um outro diferencial muito importante que facilita a identificação sobre o tipo da função é que toda função que possui retorno obrigatoriamente possui a palavra "return" em seu bloco de comandos. Para exemplificar, vamos realizar um cálculo simples de subtração e retornar o resultado, conforme você pode observar na figura 6:

Funções com Parâmetros ou Argumentos

São funções que necessitam receber um valor na hora que está sendo invocada e esse valor pode ser passado através da assinatura da função. Esses valores são denominados parâmetros ou argumentos. Uma função pode ter um ou vários argumentos, mas devem estar separados por vírgulas e não podem ter a mesma nomenclatura. Observe o exemplo na figura 7:

Validando um formulário com Javascript

Uma das principais funções do Javascript é realizar validações antes que a página seja enviada ao servidor (submeter à página). Não poderíamos encerrar essa postagem sem dar um exemplo de validação de formulários. As validações são imprescindíveis na criação de uma página, pois como sabemos os códigos Javascript rodam no lado do cliente e isso diminui drasticamente o tempo de processo, assim não precisamos enviar a página para o servidor, realizar a validação e devolver para o cliente. Além das validações de preenchimento é muito comum utilizar o recurso de máscara de entrada de dados, no HTML5 muitos campos dispensam esse tipo de verificação. Dica: Para quem utiliza máscaras de entradas, esse método não é muito recomendável. O ideal é informar ao seu cliente a maneira correta de inserir os dados, pois se em algum momento aquele tipo de dado necessitar mudar seu padrão, não será necessário reformular toda sua função. Um exemplo que define bem isso é o caso das empresas de telefonia, que adotavam o padrão de oito dígitos e incluíram mais um dígito apenas para alguns estados, tornando a validação por meio de máscara de entradas inviável.

Criando um formulário

O código da figura 8 apresenta um formulário simples para podermos realizar a verificação dos campos, se eles estão vazios ou não, e caso estejam será emitido um alerta para informar:

Realizando a validação do formulário

Para criar a validação dos campos basta criar uma função Javascript que resgate o valor digitado em cada campo e valide se está preenchido ou não. Note que a função é invocada através da função onclick do botão. Observe a figura 9.

Considerações Finais

Funções Javascript são de extrema importância para as páginas na internet, porque sem elas ao errar o preenchimento de qualquer campo, só será possível descobrir o erro após o envio do formulário. Afinal, a página será enviada para o servidor e o mesmo processará a informação e devolverá informando o erro, tornando um simples processo de validação mais demorado. Sem contar que Javascript também pode ser utilizada com outras linguagens aplicar recursos maravilhosos ao seu site, tais como: Ajax, JQuery, entre outras que poderiam ser citadas aqui. Aproveite o que foi ensinado nesse post e crie suas próprias funções, de validações, preenchimento automático, use e abuse de tudo o que o Javascript possa te oferecer. Não se esqueça de curtir e compartilhar com seus amigos, e divida conosco as sugestões, dúvidas, elogios e críticas ao final desse post.

Páginas

quinta-feira, 24 de abril de 2014