Feedback Imprimir

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 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 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"