O objeto SELECT
O objeto Select é um objeto composto: um objeto que contém uma array de objetos Option. Sua lista pode ser instantânea, que só permite uma única seleção, ou então, uma lista rolável, que permite aceitar várias seleções pelo usuário.
Propriedade selectedIndex
Retorna o número de índice do item atualmente selecionado. O primeiro item (no topo da lista) possui um índice zero. O valor de selectedIndex é fundamental para permitir que você acesse propriedades da opção selecionada.
Sintaxe:
document.form_org.nomeSelecao.selectedIndex;
Propriedade text
A propriedade text é a String que aparece na tela, no objeto Select. Sintaxe:
document.form_org.nomeSelecao.options[n].text;
Propriedade value
A propriedade value permite a leitura da string oculta de cada tag Option definida.
Sintaxe:
document.form_org.nomeSelecao.options[n].value;
Onde:
n = Índice da lista;
Passando dados e elementos do formulário a funções
Existem atalhos valiosos para a transferência de informações sobre formulários ou controle do formulário diretamente para a função, sem a necessidade de se lidar com aquelas referências normalmente longas que começam ao nível do objeto window ou document.
O JavaScript possui uma palavra-chave – this – que sempre se refere ao objeto que contém o script em que a palavra-chave é usada. Assim, em um manipulador de evento onChange para um campo de texto, você pode passar uma referência ao objeto de texto para a função inserindo a palavra-chave this como parâmetro da função:
<input type=”text” name=”nomeAluno” onChange=”upperMe(this)”>
No extremo receptor, a função define uma variável de parâmetro que transforma essa referência em uma variável, que pode ser usada pelo restante da função:
function upperMe(campo){
instruções
}
Objetos da janela e do documento
Acessando as propriedades e métodos da janela
O objeto window representa uma janela do navegador ou um frame em um frameset. Toda janela aberta do navegador possui um objeto window, que se refere a ela própria – isso torna o objeto à base na hierarquia do modelo de objetos do navegador.
Sintaxe:
window.nomePropriedade; window.nomeMétodo([parâmetros])
Um objeto window também possui um sinônimo quando o script realizando a referência aponta para a janela que abriga o documento. O sinônimo é self.
Sintaxe:
self.nomePropriedade; self.nomeMétodo([parâmetros])
Método back
Restaura a última informação registrada no histórico sobre o conteúdo apresentado nos frames de uma janela do navegador. É o mesmo que pressionar o botão Voltar (Back) da barra de ferramentas do navegador.
Sintaxe:
window.back();
Método close()
Fecha a janela especificada – se ela foi aberta usando o método open ou se o seu histórico estiver vazio, nenhum aviso será gerado. Em todos os outros casos, será gerada uma mensagem de confirmação de seu fechamento.
Sintaxe:
window.close();
Método open()
Abre uma nova janela.
Este método contém até três parâmetros que definem a características da janela, como o URL do documento a ser carregado, seu nome para fins de referência do atributo TARGET em tags HTML e aparência física (tamanho e etc).
Sintaxe:
var varJanela = window.open(URL, nomeJanela
[,propriedades] );
Exemplo:
var novaJanela = window.open(“janelaNova.html”, “Minha Janela”, “height=200, width=300”);
Propriedades do método open():
height: Altura (em pixels) da nova janela.
menubar: Se yes, é criada a barra de menus.
resizable: Se yes, o usuário poderá redimensionar a janela.
screenX: Distância (em pixels) do canto esquerdo da tela até o canto esquerdo da janela.
screenY: Distância (em pixels) do topo da tela até o topo da janela.
scrollbars: Se yes, permite o surgimento das barras de rolagem vertical e horizontal, quando necessárias.
status: Se yes, é criada a barra de status na base da janela.
toolbar: Se yes, é criada a barra de ferramentas da janela.
width: Largura (em pixels) da nova janela.
Método print()
Imprime o conteúdo da janela em questão. Sintaxe:
window.print();
Exercícios
Criar uma nova página chamada script1.html que realize as seguintes tarefas:
Fazer uma função que subtraia dois valores quaisquer e apresentá-las em uma mensagem de alerta com a seguinte frase: “A subtração de ? e
? é igual à ? ”.
Substitua o sinal ? dado no exemplo, pelos valores de sua escolha e seu resultado respectivamente.
Na mesma função, fazer um comando condicional IF para saber se o primeiro valor é maior que o segundo valor, caso a afirmação seja verdadeira então se executa a conta e mostra-se o resultado, caso contrário então deve mostrar a mensagem “O valor ? é menor que o valor de ?.”
Substitua o sinal ? dado no exemplo, pelos valores e seu resultado respectivamente.
Criar uma nova página chamada script2.html que realize as seguintes tarefas:
Criar um script que contenha apenas uma mensagem de Confirmação. A frase desta caixa de mensagem deverá ser “Você está gostando do curso?”.
Caso o usuário clique em OK deverá aparecer a mensagem “Parabéns!”, escrita no corpo do documento da página, caso seja o contrário deverá aparecer a mensagem “Que pena!”, também escrita no corpo do documento da página.
Nesta mesma página chame o evento onLoad na tag BODY, este deverá apresentar uma mensagem de alerta exibindo a mensagem “Bem vindo ao curso de Java Script”.
Criar uma variável que calcule a soma de 2 números e que exiba o resultado escrevendo no corpo do documento.
Criar uma nova página chamada script3.html que realize as seguintes tarefas:
Crie um campo do tipo TEXT e um botão.
Crie uma função que leia o valor da TEXT. Esta função será chamada pelo evento onClick do botão que deverá imprimir na tela os seguintes valores a respeito da String que foi digitada no campo TEXT:
Tamanho da String;
String em maiúsculo;
String em minúsculo;
Na mesma página do script4.html, faça as seguintes tarefas:
Crie um formulário com 3 campos do tipo TEXT. O campo 1 deve-se chamar valorA, o segundo valorB e o terceiro valorTotal.
Criar um botão no formulário que possua o evento onClick. Ao se clicar neste botão deverá ser chamada uma função que realize a multiplicação dos valores dos campos valorA e valorB, o resultado deverá ser mostrado no campo valorTotal.
Na página ColegiadoOrgaoManutencao.html, criada anteriormente, realizar as seguintes tarefas:
Criar uma função para validar todos os campos do formulário. Esta função deverá se chamar validaCampo().
A função deverá verificar se o campo está preenchido. Caso o campo esteja em branco deverá ser exibida uma caixa de alerta informando para o usuário, que deverá depois retornar o foco para o campo em questão.
Esta função deverá ser chamada pelo botão Salvar da tela no evento onSubmit() do formulário.
Crie uma página chamada script6.html e realize as seguintes tarefas:
Criar um botão chamado Unesp
Este botão deverá chamar uma função que deverá abrir uma nova página com o endereço do site da Unesp.
A aparência física da janela deverá ter barra de rolagem, altura de 400 e largura de 500.
Comentários
Postar um comentário