<script>
function condicao(){
if(form1.nome.value==""){
alert("Favor Preencher o campo");
return form1.nome.focus();
}
}
</script>
<pre>
<form name="form1">
Nome:
<input type="text" name="nome" onBlur="condicao(this.value)">
Neste exemplo foi criada uma função que testará o conteúdo da variável
nome, que ocorrerá assim que o usuário retirar o foco do campo, caso o valor
da variável esteja vazio, será exibida uma mensagem de alerta informando
para o preenchimento e em seguida o foco será retornado para o campo
nome. Em caso contrário, o script continuará seu processamento normal até o
fim. Criaremos agora uma condição alternativa para quando o campo não
estiver vazio, observe:
<script>
function condicao(){
if(form1.nome.value==""){
alert("Favor Preencher o campo");
return form1.nome.focus();
}else{
alert("Obrigado, "+form1.nome.value);
return form1.nome.select();
}
}
</script>
<pre>
<form name="form1">
Nome:
<input type="text" name="nome" onBlur="condicao(this.value)">
Já neste exemplo, foi definido a instrução else que determinará o que deve
ocorrer caso a condição seja falsa. No exemplo anterior, caso o campo não
esteja vazio será exibida outra mensagem de alerta em em seguida foi definido
que como retorno o texto do campo será selecionado.
Além dos métodos condicionais apresentados, a linguagem JavaScript suporta
um método alternativo para criar expressões condicionais. Este método já
suportado em outras linguagens de programação permite ao usuário construir
um exemplo prático e simples para sua utilização. Sua sintaxe básica tem a
seguinte formação:
(condição) ? Valor verdadeiro : Valor falso;
Onde é condição, é a expressão à ser avaliada.
Onde é Valor verdadeiro, especifica a ação que ocorrerá se a condição for
verdadeira.
Onde é Valor falso, especifica a ação que ocorrerá caso a condição seja falsa.
Veja abaixo um exemplo de utilização deste tipo de expressão condicional:
exemplo=prompt("Digite seu nome ou clique em Cancelar.","");
(exemplo==null) ? alert("O usuário Cancelou!") : alert("O usuário
digitou: "+exemplo);
Assim como na maioria das linguagens de programação a instrução if não está
limitada a utilização apenas do sinal de igualdade (==). O usuário poderá
fazer diferentes tipos de testes lógicos como se os valores são diferentes,
maior que ou menor que, entre outros.
RETURN
Esta instrução tem como finalidade marcar o final de uma função. A linguagem
JavaScript ao encontrar esta instrução ele irá retornar para o ponto
imediatamente após a chamada da função. Ela ainda pode ser definida com um
valor de retorno ou não.
Quando um valor é incluído com esta instrução, a função irá retornar este valor
definido pela instrução. Quando um valor não é inclído com a instrução return,
então a função retorna um valor nulo.
Por padrão, esta instrução jamais é usada fora de uma função. Quando isto
acontece, a linguagem irá retornar um erro quando a mesma estiver definida
fora de uma função. Os parênteses apresentados no exemplo abaixo não são
obrigatórios.
Vejamos alguns exemplos de scripts usando a instrução return.
<script>
<!--
function teste(){
var valor=5;
if (valor>=5){
return (true);
} else {
return (false);
}
}
-->
</script>
SWITCH
Esta instrução é bem semelhante com uma estrutura IF, porém é mais
eficiente em razão de ser mais simples sua utilização e seu entendimento. Veja
a sintaxe utilizada para o uso de instruções SWITCH:
switch (expressão){
case CONSTANTE:
comandos;
break;
case CONSTANTE2:
comandos;
break;
case default:
comandos;
break;
}
INSTRUÇÃO WITH
Esta instrução faz com que um objeto se torne default para uma série de
opções existentes. Normalmente esta instrução é utilizada com o objeto Math,
uma vez que ele exige que o usuário especifique o nome do objeto quando
acessar qualquer uma de suas propriedades. Veja sua sintaxe:
with (objeto){
instruções
}
Vejamos alguns exemplos de sua utilização:
<script>
alert(Math.PI);
alert(Math.round(1234.5678));
</script>
Utilizando a instrução with o usuário irá determinar os valores que deseja
economizando tempo na aplicação. Observe como ficaria estas instruções
aplicadas com a instrução with:
<script>
with (Math){
alert(PI);
alert(round(1234.5678));
}
</script>
Veja pelo exemplo anterior, que o usuário não necessitou utilizar o objeto
Math várias vezes.
Outra questão, é que a instrução with não é utilizada somente com o objeto
Math. Ela poderá ser usada com a maioria dos outros objetos da linguagem
JavaScript.
FUNÇÕES
Funções em JavaScript nada mais são que uma rotina JavaScript que possui
um conjunto de instruções à serem executadas. Sua sintaxe compõem-se dos
seguintes parâmetros:
function nomeFunção(argumentos) {
Comandos
}
Se a função possuir argumentos, estes deverão estar colocados entre
parênteses após o nome da função. O corpo da função deverá ser colocado
entre chaves que indicarão o início do bloco de instruções e o fim do bloco de
instruções.
Normalmente, as funções são definidas dentro do cabeçalho da página HTML
representados pelo tag <HEAD>. Com isto, todas as funções são carregadas
assim que a página é carregada, bem antes que o usuário pense em executar
alguma ação.
Vejamos um exemplo simples de uma função que exibe uma mensagem na
tela:
function primeiraFuncao(){
alert("Isto é uma função JavaScript");
}
Com isto, o usuário apenas definiu a função, para que ela seja executada, é
necessário fazer a sua chamada. Para chamar a função basta incluir seu nome
no local do código que deseja que ela seja executada. No exemplo a seguir,
note que após a função foi feita sua chamada, bastando para tanto redigir seu
nome, observe:
function primeiraFuncao(){
alert("Isto é uma função JavaScript");
}
primeiraFuncao();
É padrão da linguagem JavaScript que ao encontrar a chamada de uma função,
ele desvia para as instruções respectivas desta função e ao terminá-la, volta
para o primeiro código após a chamada da função.
Uma função pode ser chamada de diversas formas, dentro da área do código
JavaScript e até mesmo através de um evento dentro de um tag HTML, como
um botão de formulário ou hiperlink. Veja um exemplo de uso da chamada de
uma função através da ação do usuário ao clicar em um botão de formulário:
<HTML>
<HEAD>
<TITLE>UTILIZANDO FUNÇÕES</TITLE>
</HEAD>
<BODY>
<SCRIPT>
function primeiraFuncao(){
alert("Isto é uma função JavaScript");
}
</SCRIPT>
<INPUT TYPE="BUTTON" VALUE="Clique aqui!" onClick="primeiraFuncao()">
</BODY>
</HTML>
Neste exemplo, foi definido a chamada da função através do evento onClick
que é processado assim que o usuário dá um clique sobre o botão que
executará a função.
O usuário poderá através do uso de funções passar valores a mesma, com isto
a função usará os valores no processamento. Vejamos no exemplo abaixo que
foi definido como argumento da função exemplo a variável texto, esta
variável é usada como o texto que será exibido pela instrução alert. Ao
chamar a função, basta o usuário definir o texto que deseja ser apresentado
como argumento da função:
<script>
function exemplo(texto){
alert(texto);
}
exemplo("Curso de JavaScript");
</script>
Em algumas situações o usuário talvez queira retornar um valor de uma
função. Para isto, basta fazer o uso da instrução return mais o valor que
queira retornar. Vejamos um exemplo típico do uso de uma função que irá
retornar um determinado valor. Observe:
<script>
var ret=prompt("digite o nome","");
var shor=mostranome(ret);
alert(shor);
function mostranome(nome){
if (nome=="" || nome==null)
return ("erro");
else
return (nome);
}
OBJETO ARGUMENTS
Normalmente as funções são declaradas para aceitar um determinado número
de parâmetros, vejamos um exemplo que usa uma função que é declarada
para usar dois argumentos e usados para exibir os mesmos em uma
mensagem de alerta:
<script>
mensagem("SENAC","Minas Gerais");
function mensagem(mensagem1,mensagem2){
alert(mensagem1);
alert(mensagem2);
}
</script>
É claro que se houvesse vários argumentos à serem exibidos, isto seria uma
maneira penosa de programar. Através da linguagem JavaScript, o usuário
poderá fazer uso do objeto arguments que é criado dentro de uma função.
Este objeto é um array que poderá receber todos os argumentos necessários
para passar a função quando a mesma for chamada. Veja no exemplo a seguir
sua utilização:
<script>
mensagem("SENAC","Minas Gerais");
mensagem("CFP","Informática");
function mensagem(){
for (i=0;i<mensagem.arguments.length;i++){
alert(mensagem.arguments[i]);
}
}
</script>
UTILIZANDO EVENTOS
EVENTO ONBLUR
Com o evento onBlur o usuário irá controlar o conteúdo de um elemento em
um formulário select, text ou textarea quando o mesmo remove o foco. Veja
pelo exemplo a seguir de uma caixa de texto exibir uma mensagem na tela
assim que o campo perde o foco:
<pre>
<form name="form1">
Digite seu Nome:
<input type="text" name="nome" onBlur="alert('Favor preencher')">
</form>
</pre>
Veja agora outro exemplo, criando uma função para que caso o usuário deixe o
campo em branco, seja exibida a mensagem de alerta:
<script>
<!--
function teste(){
if (form1.campo1.value==""){
alert("FAVOR PREENCHER");
}
}
-->
</script>
<pre>
<form name="form1">
Digite seu Nome:
<input type="text" name="campo1" onBlur="teste()">
</form>
EVENTO ONCHANGE
Com o evento onChange o usuário poderá acionar alguma função sempre que
for alterado o conteúdo dos objetos textarea, text ou select. Este evento é
bem similar com o evento onBlur, porém ele verifica se o conteúdo do
elemento foi alterado. Vejamos um exemplo de sua utilização:
Digite seu Endereço:
<input type="text" name="campo2" onChange="alert('testando')">
EVENTO ONCLICK
O evento onClick é utilizado em links, botões, radio, checkbox, reset. Vejamos
um exemplo de sua utilização em um botão de formulário:
<input type="button" name="botao" value="Envia"
onClick="alert('Obrigado pelos Dados')">
EVENTO ONFOCUS
Com o manipulador onFocus o usuário poderá criar uma ação sempre que os
elementos select, text ou textarea receberem o foco. Ao contrário do evento
onBlur que executa ações sempre que o elemento perde o foco. Veja um
exemplo de sua utilização:
Digite seu Nome:
<input type="text" name="campo1" onBlur="teste()"
onFocus= "alert ('Digite seu nome completo')">
Digite seu Endereço:
<input type="text" name="campo2" onChange="alert('testando')"
onFocus="this.value='R. Castelo da Beira'">
EVENTO ONLOAD
Conforme exemplo mostrando anteriormente, com o evento onLoad executa
alguma ação assim que o documento é carregado no browser. Este objeto é
aplicado diretamente ao objeto window.
Veja abaixo um exemplo de exibição de uma mensagem de alerta assim que a
página é carregada:
<body onLoad="alert('Seja Bem Vindo')">
EVENTO ONUNLOAD
Com o evento onUnLoad o usuário pode determinar uma ação assim que o
usuário sai da página, seja por meio de um hiperlink ou até mesmo fechando o
navegador. Com base no exemplo anterior foi criado uma mensagem de alerta
assim que o usuário deixa a página:
<body onLoad="alert('Seja Bem Vindo')"
onUnLoad="alert('Obrigado pela visita!')">
EVENTO ONMOUSEOVER
Com o evento onMouseOver o usuário criará uma ação que será acionada
sempre que o ponteiro do mouse se mover sobre um link. Veja um exemplo de
sua utilização:
<a href="http://www.mg.senac.br"
onMouseOver="defaultStatus='Olhe para a barra de
Status'">SENAC</A><BR>
Comentários
Postar um comentário