Você está aqui: JavaScript ::: Dicas & Truques ::: Formulários |
Resetar (redefinir) um formulário via códigoQuantidade de visualizações: 16984 vezes |
<html> <head> <title>Estudando JavaScript</title> </head> <body> <form name="cadastro" action="http://www.google.com" method="get"> <input type="text" name="nome"> </form> <a href="javascript:{document.cadastro.reset();}"> Redefinar o Formulário</a> </body> </html> |
![]() |
JavaScript ::: Dicas & Truques ::: Mouse e Teclado |
Como bloquear o botão direito do mouse em suas páginas HTML usando JavaScriptQuantidade de visualizações: 2 vezes |
Em algumas situações, principalmente games desenvolvidos em JavaScript ou HTML5, nós gostaríamos de evitar o botão direito do mouse, ou seja, o menu de contexto no corpo da página web. Para isso só precisamos retornar false para o evento oncontextmenu. Veja como isso pode ser feito no trecho de código JavaScript abaixo: ---------------------------------------------------------------------- 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> </head> <body oncontextmenu="return false"> <h1>Você não pode usar o botão direito nessa página</h1> </body> </html> Uma boa idéia é avisar ao usuário (por meio de uma mensagem window.alert) que ele não pode usar o botão de contexto no documento HTML. Veja: ---------------------------------------------------------------------- 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> </head> <body oncontextmenu="return aviso()"> <script type="text/javascript"> function aviso(){ window.alert("Botão direito não permitido."); return false; } </script> </body> </html> Agora, ao clicarmos com o botão direito do mouse na página, uma mensagem window.alert será exibida com o seguinte texto: Botão direito não permitido. |
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: 7192 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 ::: DOM (Document Object Model) ::: Eventos JavaScript + DOM (Document Object Model) |
Como usar o evento DOMContentLoaded para verificar se o DOM (Document Object Model) já está disponível para manipulação via JavaScriptQuantidade de visualizações: 2183 vezes |
Em algumas situações nós precisamos iniciar a manipulação dos elementos de uma página HTML a partir de nossos códigos JavaScript mas não sabemos com certeza se os elementos do DOM (Document Object Model) já estão disponíveis para acesso. Para essas situações nós podemos usar o evento DOMContentLoaded, que é disparado quando todo o conteúdo DOM já estiver carregado, mesmo que imagens e folhas de estilo CSS ainda estejam pendentes de carregamento. Vamos ver um exemplo? Considere o código JavaScript abaixo (incluindo o código HTML): ---------------------------------------------------------------------- Se precisar de ajuda com o código abaixo, pode me chamar no WhatsApp +55 (62) 98553-6711 (Osmar) ---------------------------------------------------------------------- <html> <head> <title>Estudos PHP</title> <script type="text/javascript"> // vamos obter uma referência ao elemento DIV var divElem = document.getElementById("m_div"); // vamos a cor do texto da DIV divElem.style.color = 'blue'; </script> </head> <body> <div id="m_div">Sou um elemento DIV</div> </body> </html> Veja que temos um elemento DIV na parte <body> do página e, na parte <head> temos um código JavaScript que tenta alterar a cor do texto da DIV. Como já era de se esperar, ao abrirmos este documento HTM no navegador, teremos o seguinte erro: Uncaught TypeError: Cannot read property 'style' of null at index.html:9 Isso aconteceu porque o código JavaScript foi executado antes que o elemento DIV fosse inserido no DOM da página. Para evitar isso, só precisamos usar o evento DOMContentLoaded. Veja a nova versão do código: ---------------------------------------------------------------------- Se precisar de ajuda com o código abaixo, pode me chamar no WhatsApp +55 (62) 98553-6711 (Osmar) ---------------------------------------------------------------------- <html> <head> <title>Estudos PHP</title> <script type="text/javascript"> // vamos tratar o evento DOMContentLoaded document.addEventListener('DOMContentLoaded', function(e){ // vamos obter uma referência ao elemento DIV var divElem = document.getElementById("m_div"); // vamos a cor do texto da DIV divElem.style.color = 'blue'; }); </script> </head> <body> <div id="m_div">Sou um elemento DIV</div> </body> </html> Agora execute o exemplo novamente e veja como o texto do elemento DIV é colorido de azul, uma boa indicação de que o evento DOMContentLoaded foi disparado com sucesso. Note ainda como usamos o método addEventListener() do objeto document para fazer a associação do evento. |
Desafios, Exercícios e Algoritmos Resolvidos de JavaScript |
Veja mais Dicas e truques de JavaScript |
Dicas e truques de outras linguagens |
Python - Como criar arrays (vetores e matrizes) usando o objeto ndarray da biblioteca Numpy do Python MySQL - Como excluir a chave primária de uma tabela MySQL usando o comando ALTER TABLE DROP PRIMARY KEY |
Códigos Fonte |
![]() Diga 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 |
![]() Tenha 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 |