JavaScript

O Conceito de Edição JavaScript no Scriptcase é associar aos campos dos formulários eventos em JavaScript, ou seja, para cada campo você pode editar ações associadas aos seus eventos.

Interface Edição de Javascript

Atributos
- Escolha o objeto : Nesse Combobox são exibido todos os campos que fazem parte da aplicação de Formulário, assim como o objeto Form “formulário”.
- Escolha o evento : Nesse Combobox devemos escolher o evento associado ao campo, para o qual iremos escrever o código JavaScript. Veja os eventos disponíveis:
  - onclick : Ocorre no click do mouse sobre o campo.
  - onblur : Ocorre quando o objeto perde o foco.
  - onChange : Ocorre sempre que o objeto perde o foco e o valor do campo é alterado .
  - onFocus : Ocorre sempre que o objeto ganha o foco.
  - onMouseOver : Ocorre sempre que o ponteiro do mouse estiver sobre o campo.
  - onMouseOut : Sempre que o ponteiro do mouse sair de cima do campo.
- Eventos ligados ao Form “formulário” : Os eventos abaixo estão diretamente associados ao formulário.
  - OnLoad : Este evento ocorre quando a página é carregada, ou seja, ao navegar de um registro para outro. Ao clicar nos botões (novo, inserir, anterior etc).
  - onSubmit: Este evento ocorre ao clicar nos botões “inserir”, “alterar” e “excluir”.
- Edição de JavaScript
  - Após selecionar o objeto e o evento e clicar no botão (Editar), será aberta a tela de edição da ação JavaScript, que será executada quando o evento selecionado ocorrer. Nessa tela podemos informar ações JavaScript personalizadas ou ainda usar eventos padrão do Scriptcase, como por exemplo:. nm_recarga_form(); que efetua a recarga do formulário.
  Interface Edição de Javascript
  - Após salvar o comando JavaScript clicando no botão (atualizar), estará concluído o trabalho.
  - A linguagem JavaScript nem sempre tem o mesmo comportamento em todos os Browsers disponíveis no mercado. Sempre que for necessário escrever um bloco mais elaborado ou complexo nessa linguagem, é importante fazer os devidos testes nos browsers em que a aplicação será executada.
Exemplo onClick
- Ao clicar sobre um campo do tipo rádio, pode-se habilitar ou desabilitar uma série de campos do formulário de acordo com o valor selecionado.

 if(document.F1.sexo[0].checked){
     document.F1.aux_maternidade.disabled = false;
     document.F1.aux_maternidade.style.background='FFFFFF'
 }
 if(document.F1.sexo[1].checked){
    document.F1.aux_maternidade.disabled = true;
    document.F1.aux_maternidade.style.background='FCEEBC'
 }

Para acessar um campo tipo rádio é necessário utilizar-se de um índice.

Exemplo onBlur

Pode-se definir uma crítica em torno do campo “carga_horaria_semanal” quando o mesmo perder o foco.

  if (document.F1.tp_folha[0].checked  && document.F1.carga_horaria_semanal.value > '20')
  {    
       alert("carga horaria acima da permitida");
       document.F1.carga_horaria_semanal.value = "";
       document.F1.carga_horaria_semanal.focus();
  }

Exemplos onChange
- Ao alterar o “Sálario” de um funcionário e sair do campo, ocorrerá um “onchange”, nesse momento aproveitamos para checar se o “cargo” é “jardineiro”.
```
  if (document.F1.salario.value > 5000.00 && document.F1.cargo.value == 'jardineiro'){
         
  alert('quando eu crescer quero ser Jardineiro);
  }
```

Exemplo OnFocus

Após informar o valor da Compra e selecionar a modalidade de pagamento em um objeto do tipo “Select: forma_pagto”, o código JavaScript abaixo calcula o valor da parcela.

  if (document.F1.fpagto[document.F1.forma_pagto.selectedIndex].text == 'avista')
  {
        document.F1.valorparcela.value = document.F1.valorcompra.value;
  }
  if (document.F1.fpagto[document.F1.forma_pagto.selectedIndex].text == '30/60')
  {
        document.F1.valorparcela.value = document.F1.valorcompra.value / 2;
  }
  if (document.F1.fpagto[document.F1.forma_pagto.selectedIndex].text == '30/60/90')
  {
        document.F1.valorparcela.value = document.F1.valorcompra.value / 3;
  }

Exemplo onMouseOver
- Pode-se mudar o estilo (cor do fundo, da fonte etc.) quando o mouse estiver sobre o campo.
```
  document.F1.nome_do_Campo.style.bgColor = "0FFCCA"
```
Exemplo onMouseOut
- Setar uma cor de fundo quando o mouse sair do foco do campo.
```
  document.F1.nome_do_Campo.style.bgColor = "FFFFFF"
```

JavaScript

Links Relacionados

Videos Relacionados