 |
|
Você está aqui: JavaScript ::: Elementos de Formulários HTML ::: select Element/Object |
Como usar o evento onchange para detectar a mudança de seleção de item no elemento HTML selectQuantidade de visualizações: 16711 vezes |
|
Em algumas situações gostaríamos de detectar a mudança de seleção de item em um elemento HTML do tipo select. Isso pode ser feito por meio do evento onchange, que é disparado sempre que o usuário usa o mouse ou o teclado para selecionar um novo item no controle select. Veja uma página HTML contendo um elemento HTML select. Quando o usuário mudar a seleção de item nós exibiremos o texto e o valor da opção selecionada: ----------------------------------------------------------------------
Se precisar de ajuda com o código abaixo, pode me chamar
no WhatsApp +55 (62) 98553-6711 (Osmar)
----------------------------------------------------------------------
<html>
<head>
<title>Estudos JavaScript</title>
<script type="text/javascript">
// Função personalizada que é chamada sempre que
// houver uma mudança de item no elemento select
// Note que a função recebe, como argumento, o elemento
// select no qual o evento onchange foi disparado
function mudancaSelecao(elemento){
// vamos obter a opção selecionada
var selecionada = elemento.options[elemento.options.selectedIndex];
// vamos exibir o texto da opção selecionada
window.alert("Texto da opção: " + selecionada.text);
// vamos exibir o valor da opção selecionada
window.alert("Valor da opção: " + selecionada.value);
}
</script>
</head>
<body>
<form name="form1">
<select name="cidades" id="cidades" onchange="mudancaSelecao(this)">
<option value="5" selected="selected">Goiânia</option>
<option value="2">São Paulo</option>
<option value="7">Cuiabá</option>
</select>
</form>
</body>
</html>
Neste exemplo nós usamos a técnica de fornecer o tratador de evento (event handler) onchange como um atributo do elemento select: ---------------------------------------------------------------------- Se precisar de ajuda com o código abaixo, pode me chamar no WhatsApp +55 (62) 98553-6711 (Osmar) ---------------------------------------------------------------------- <select name="cidades" id="cidades" onchange="mudancaSelecao(this)"> O valor this fornecido como argumento para a função mudancaSelecao() indica que uma referência ao elemento select, no qual a mudança de item ocorreu, está sendo passada para a função. Veja uma modificação do exemplo anterior, desta vez usando as funções addEventListener() e attachEvent() para atrelar ao elemento select a função a ser disparada quando o evento onchange ocorrer: ----------------------------------------------------------------------
Se precisar de ajuda com o código abaixo, pode me chamar
no WhatsApp +55 (62) 98553-6711 (Osmar)
----------------------------------------------------------------------
<html>
<head>
<title>Estudos JavaScript</title>
<script type="text/javascript">
// Função personalizada que é chamada sempre que
// houver uma mudança de item no elemento select
function mudancaSelecao(elem){
// vamos obter a opção selecionada
var selecionada = elem.options[elem.options.selectedIndex];
// vamos exibir o texto da opção selecionada
window.alert("Texto da opção: " + selecionada.text);
// vamos exibir o valor da opção selecionada
window.alert("Valor da opção: " + selecionada.value);
}
</script>
</head>
<body>
<form name="form1">
<select name="cidades" id="cidades">
<option value="5" selected="selected">Goiânia</option>
<option value="2">São Paulo</option>
<option value="7">Cuiabá</option>
</select>
</form>
<script type="text/javascript">
// vamos atribuir uma chamada à função mudancaSelecao() ao
// evento onchange do elemento select com o id "cidades"
var elemento = document.getElementById("cidades");
if(elemento.addEventListener){ // Firefox, Google Chrome, Safari, Opera
elemento.addEventListener("change", new
Function("mudancaSelecao(elemento)"), false);
}
else if(elemento.attachEvent){ // Internet Explorer, Opera
elemento.attachEvent('onchange', new Function("mudancaSelecao(elemento)"));
}
</script>
</body>
</html>
Veja que neste exemplo precisei fazer um teste de browser, visto que o IE não suporta a função addEventListener(). Esta dica foi escrita e testada no Internet Explorer 8 e Firefox 3.6. |
 Link para compartilhar na Internet ou com seus amigos: |
JavaScript ::: Dicas & Truques ::: Data e Hora |
Como retornar a quantidade de dias para um determinado mês e ano em JavaScriptQuantidade de visualizações: 8630 vezes |
|
Sempre que estamos desenvolvendo aplicações de calendário ou outras tarefas envolvendo datas e horas em JavaScript nós precisamos saber quantos dias um determinado mês possui. Nesta dica que mostro como escrever uma função JavaScript chamada diasNoMes() que recebe um mês e um ano e retorna a quantidade de dias que tal mês possui. Veja a página HTML completa para o exemplo: ----------------------------------------------------------------------
Se precisar de ajuda com o código abaixo, pode me chamar
no WhatsApp +55 (62) 98553-6711 (Osmar)
----------------------------------------------------------------------
<!doctype html>
<html>
<head>
<title>Data e hora em JavaScript</title>
</head>
<body>
<script type="text/javascript">
// função que recebe um mês e ano e retorna
// a quantidade de dias no mês informado
function diasNoMes(mes, ano){
return 32 - new Date(ano, mes, 32).getDate();
}
// o mês começa com 0 (Fevereiro = 1)
document.write("O mês informado possui " +
diasNoMes(1, 2023) + " dias");
</script>
</body>
</html>
Ao executar este código JavaScript nós teremos o seguinte resultado: O mês informado possui 28 dias |
JavaScript ::: Dicas & Truques ::: Tratamento de Erros |
Como retornar o rastreio da pilha de um erro de tempo de execução em JavaScript usando a propriedade stack do objeto ErrorQuantidade de visualizações: 7132 vezes |
|
A propriedade stack do objeto Error da linguagem JavaScript pode ser usada quando queremos obter mais informações sobre as causas do aparecimento de um erro em tempo de execução. Dessa forma nós conseguimos rastrear o erro até a sua origem. Veja um trecho de código JavaScript completo demonstrando o seu uso: ----------------------------------------------------------------------
Se precisar de ajuda com o código abaixo, pode me chamar
no WhatsApp +55 (62) 98553-6711 (Osmar)
----------------------------------------------------------------------
<!doctype html>
<html>
<head>
<title>Estudos JavaScript</title>
</head>
<body>
<script language="javascript">
// o trecho de código a seguir vai provocar
// um erro de tempo de execução em JavaScript
try{
// y não foi definido
var x = y;
}
catch(e){
// mostra a pilha de rastreio do erro
document.write("Rastreio da pilha: " + e.stack);
}
</script>
</body>
</html>
Ao executar este código JavaScript nós teremos o seguinte resultado: Rastreio da pilha: ReferenceError: y is not defined at http://localhost/estudos/estudos_js.html:13:13 |
JavaScript ::: Dicas & Truques ::: Arrays e Matrix (Vetores e Matrizes) |
Como testar se todos os elementos de um array satisfazem uma condição em JavaScript usando a função every()Quantidade de visualizações: 1400 vezes |
|
Em algumas situações nós gostaríamos de testar todos os elementos de um vetor e verificar se todos eles passam em um determinado teste. Para isso podemos usar a função every(), adicionada à linguagem JavaScript por meio do ECMAScript 5 (JavaScript 5, ECMAScript 2009, ES5). Este método nos permite fornecer uma função de callback que será chamada para cada um dos elementos do vetor. E o retorno do método every() é um valor true se todos os elementos passarem no teste e false em caso contrário. Veja um exemplo no qual testamos se TODOS os elementos de um vetor são maiores que 10: ----------------------------------------------------------------------
Se precisar de ajuda com o código abaixo, pode me chamar
no WhatsApp +55 (62) 98553-6711 (Osmar)
----------------------------------------------------------------------
<script type="text/javascript">
function testarTodos(valor, indice, vetor){
if(valor > 10){
return true;
}
}
var valores = new Array(21, 50, 30, 70, 12, 3);
// vamos verificar se TODOS os valores são
// maiores que 10
var res = valores.every(testarTodos);
window.alert("Todos passaram no teste: " + res);
</script>
Aqui o resultado será false, pois o valor 3 não passou no teste. É importante observar que, assim que a função de callback retorna false pela primeira vez, o método every() já abandona sua execução. Uma função passada para o método every() pode conter os seguintes argumentos (nessa mesma ordem): a) O valor do item; b) O índice do item (opcional); c) O vetor a partir do qual o método every() está sendo chamado (opcional). Como última observação, o método every() não modifica o array original. |
Vamos testar seus conhecimentos em |
| Dimensionamento de lajes maciças à flexão As lajes maciças são armadas em cruz, quando apresentam a relação entre o maior e o menor vão inferior a 2. Nessas situações, a laje pode ser dimensionada a partir de valores preestabelecidos em tabelas como a de Marcus. Considere a laje maciça armada em cruz apresentada na figura a seguir:  Dados: Peso específico do concreto = 25kN/m3 Carga do contrapiso + revestimento = 2,00kN/m2 Carga acidental = 2,50kN/m2 Altura da laje (h) = 10cm Altura útil (d) = 6cm Cobrimento nominal = 2,5cm fcd = fck / 1,4 (considerar concreto de 20MPa) fyd = fyk / 1,15 (considerar aço CA-50) Assinale a alternativa correta: A) A altura de 10cm não é suficiente para resistir ao momento máximo atuante, devendo ser empregada, pelo menos, uma altura de 11cm na laje em questão. B) A altura de 10cm não é suficiente para resistir ao momento máximo atuante, devendo ser empregada, pelo menos, uma altura de 12cm na laje. C) A altura de 10cm não é suficiente para resistir ao momento máximo atuante, devendo ser empregada, pelo menos, uma altura de 13cm na laje. D) A altura de 10cm não é suficiente para resistir ao momento máximo atuante, devendo ser empregada, pelo menos, uma altura de 14cm na laje. E) A altura de 10cm não é suficiente para resistir ao momento máximo atuante, devendo ser empregada, pelo menos, uma altura de 15cm na laje. Verificar Resposta Estudar Cards Todas as Questões |
Vamos testar seus conhecimentos em Engenharia Civil - Estruturas de Aço e Madeira |
| Evolução das estruturas Os materiais e os sistemas construtivos e estruturais têm, no último século, apresentado uma enorme evolução, com inúmeras tecnologias inovadoras. Contudo, se recuarmos há 125 anos atrás, a história da arquitetura anterior a esta época estaria restrita às construções utilizando poucos materiais. Assinale abaixo a opção que melhor representa estes materiais: Selecione a resposta: A) Alvenaria e madeira. B) Madeira e aço. C) Madeira e pedra. D) Tijolo e madeira. E) Tijolo e aço. Verificar Resposta Estudar Cards Todas as Questões |
Vamos testar seus conhecimentos em Engenharia Civil - Construção Civil |
| Formas: Confecção e colocação Durante a execução e cura de estruturas em concreto armado, as formas são submetidas a diversos tipos de solicitações, desde a montagem, passando pelo lançamento do concreto, peso da massa e armadura, etc. Sobre esses esforços, assinale a alternativa correta. A) As formas dos pilares são mais solicitadas por cargas verticais. B) As formas de lajes são mais solicitadas por cargas horizontais. C) O peso da armadura é o principal esforço sobre qualquer tipo de forma. D) As formas das vigas são mais solicitadas por esforços verticais. E) O peso da armadura é determinante no dimensionamento da forma de vigas. Verificar Resposta Estudar Cards Todas as Questões |
Vamos testar seus conhecimentos em Ética e Legislação Profissional |
| Introdução à Ética Na modernidade, o conceito de ethos passa a refletir as transformações sociais, culturais e filosóficas desse período, profundamente influenciado pela dissolução do absolutismo e pelas revoluções liberais. A compreensão do ethos como caráter moral é então recontextualizada, influenciada pelas rupturas que reorganizam as sociedades. Considerando as transformações sociais, políticas e produtivas desse período, como o ethos se manifesta no contexto? Selecione a resposta: A) Inalterado, mantendo características morais tradicionais. B) Ênfase na tradição e conservadorismo com resistência às mudanças e rupturas. C) Rejeição total das normas coletivas e valorização do individualismo. D) Teoria filosófica sem conexões com as aplicações morais práticas. E) Reflete as transformações sociais, políticas, econômicas, culturais e/ou filosóficas. Verificar Resposta Estudar Cards Todas as Questões |
Vamos testar seus conhecimentos em Ética e Legislação Profissional |
| Responsabilidade civil dos prepostos e preponentes De acordo com as definições de preponente, assinale a alternativa correta. A) O preponente responde com o gerente pelos atos que este pratique em seu próprio nome, mas à conta daquele. B) O preposto pode, a qualquer tempo no exercício do seu oficio, fazer-se substituir por alguém de sua confiança no desempenho da preposição. C) Ao preposto não é vedado negociar por conta própria ou de terceiro, tampouco lhe é vedado participar, desde que indiretamente, de operação do mesmo gênero da que lhe foi cometida. D) O gerente não pode estar em juízo em nome do preponente, mesmo que pelas obrigações resultantes do exercício da sua função. E) A responsabilidade dos preponentes pelos atos de quaisquer prepostos, praticados nos seus estabelecimentos e relativos à atividade da empresa, é limitada aos atos autorizados por escrito. Verificar Resposta Estudar Cards Todas as Questões |
Desafios, Exercícios e Algoritmos Resolvidos de JavaScript |
Veja mais Dicas e truques de JavaScript |
Dicas e truques de outras linguagens |
Códigos Fonte |
 Software de Gestão Financeira com código fonte em PHP, MySQL, Bootstrap, jQuery - Inclui cadastro de clientes, fornecedores e ticket de atendimentoDiga adeus às planilhas do Excel e tenha 100% de controle sobre suas contas a pagar e a receber, gestão de receitas e despesas, cadastro de clientes e fornecedores com fotos e histórico de atendimentos. Código fonte completo e funcional, com instruções para instalação e configuração do banco de dados MySQL. Fácil de modificar e adicionar novas funcionalidades. Clique aqui e saiba mais |
 Controle de Estoque completo com código fonte em PHP, MySQL, Bootstrap, jQuery - 100% funcional e fácil de modificar e implementar novas funcionalidadesTenha o seu próprio sistema de controle de estoque web. com cadastro de produtos, categorias, fornecedores, entradas e saídas de produtos, com relatórios por data, margem de lucro e muito mais. Código simples e fácil de modificar. Acompanha instruções para instalação e criação do banco de dados MySQL. Clique aqui e saiba mais |
Linguagens Mais Populares |
|
1º lugar: Java |
