 |
|
Você está aqui: JavaScript ::: Dicas & Truques ::: Browsers |
Ocultar código JavaScript dos navegadores que não suportam a linguagemQuantidade de visualizações: 63 vezes |
<HTML>
<HEAD>
<TITLE>Ocultando o código JavaScript dos browsers que
não suportam a linguagem</TITLE>
</HEAD>
<BODY>
<SCRIPT LANGUAGE="JavaScript" TYPE="text/javascript">
<!--
/*
todo o código inserido entre os simbolos <!-- e //-->
não será executado por browsers que não suportam a
linguagem
*/
//-->
</SCRIPT>
</BODY>
</HTML>
|
 Link para compartilhar na Internet ou com seus amigos: |
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. |
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 ::: Web APIs (APIs Web) ::: MediaDevices Interface (Interface MediaDevices) |
Como acessar as mídias do usuário em JavaScript usando a função getUserMedia() da interface MediaDevicesQuantidade de visualizações: 2638 vezes |
|
O método getUserMedia() da interface MediaDevices nos permite acessar as entradas de mídias do usuários, tais como áudio e vídeo. Isso facilita o desenvolvimento de aplicações muito interessantes, a saber, tirar foto usando a webcam, gravar áudio a partir do microfone, gravar vídeo a partir da webcam, etc. No entanto, antes de usar o MediaStream retornado pelo método getUserMedia(), é importante saber que o usuário deverá dar a sua permissão. Assim, sempre que o método getUserMedia() é chamado, uma janela de informação é mostrada para que o usuário concorde ou não em permitir o acesso às suas mídias. Veja, por exemplo, como solicitar acesso à webcam/câmera do usuário: ----------------------------------------------------------------------
Se precisar de ajuda com o código abaixo, pode me chamar
no WhatsApp +55 (62) 98553-6711 (Osmar)
----------------------------------------------------------------------
<!DOCTYPE html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
<title>A interface MediaDevices</title>
</head>
<body>
<script type="text/javascript">
async function obterMediaUsuario(){
// vamos obter o stream
var stream = null;
try{
stream = await navigator.mediaDevices.getUserMedia({video: true});
window.alert("A mídia para vídeo foi obtida com sucesso.");
// agora podemos fazer algo com o stream aqui
}
catch(erro){
window.alert("Houve um erro: " + erro);
}
}
// o browser suporta o MediaDevices?
if(navigator.mediaDevices){
obterMediaUsuario()
}
else{
window.alert("O navegador não suporta o MediaDevices");
}
</script>
</body>
</html>
Veja que usamos uma função assíncrona para getUserMedia(). Isso é necessário porque esta função retorna uma Promise que, em caso de sucesso, será convertida em um objeto MediaStream. Se o usuário não permitir o acesso, um erro do tipo NotAllowedError ou NotFoundError será retornado. Alguns navegadores só permitem o uso do método getUserMedia() em ambiente seguro HTTPS ou localhost. Em mais dicas dessa seção você verá como tirar proveito do MediaStream retornado pela função getUserMedia() e também como tratar melhor os erros retornados. |
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 |
