 |
|
||||
Você está aqui: JavaScript ::: Dicas & Truques ::: Arrays e Matrix (Vetores e Matrizes) |
Como adicionar um elemento ao final de um arrayQuantidade de visualizações: 8413 vezes |
<script language="javascript">
<!--
var valores = new Array(1, 2, 3, 4, 5);
document.write("Valores no Array: " + valores + "<br>");
valores.push(6);
document.write("Adicionei um novo elemento ao final do array<br>");
document.write("Valores no Array: " + valores);
//-->
</script>
|
 Link para compartilhar na Internet ou com seus amigos: |
JavaScript ::: Dicas & Truques ::: Formulários |
Como enviar um formulário via código - Enviar um formulário usando JavaScript - Como disparar o método submit() do form a partir de um link - RevisadoQuantidade de visualizações: 19731 vezes |
|
Na maioria das páginas web, o formulário é enviado quando clicamos em um botão (o botão Enviar, por exemplo). Nesta dica mostrarei como é possível enviar um formulário clicando em um link, ou seja, disparando o método submit() do formulário HTML via programação mesmo. Veja o código completo: ----------------------------------------------------------------------
Se precisar de ajuda para ajustar o código abaixo de acordo com as
suas necessidades, chama a gente no WhatsApp +55 (62) 98553-6711 (Osmar)
Ah, e se puder, faça uma DOAÇÃO de qualquer valor para nos ajudar
a manter o site livre de anúncios. Ficaremos eternamente gratos ;-)
Nosso PIX é: osmar@arquivodecodigos.com.br
----------------------------------------------------------------------
<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.submit();}">Enviar o Formulário</a>
</body>
</html>
Abra esta página no seu servidor web, clique no link e veja o resultado. |
JavaScript ::: Dicas & Truques ::: Operadores de Manipulação de Bits (Bitwise Operators) |
JavaScript Avançado - Como usar o operador de bits & (E/AND sobre bits) da linguagem JavaScriptQuantidade de visualizações: 1228 vezes |
|
O operador de bits & (E/AND sobre bits) da linguagem JavaScript é usado quando queremos comparar os bits individuais de dois valores integrais (inteiros) e produzir um terceiro resultado. Os bits no resultado serão configurados como 1 se os bits correspondentes nos dois outros valores foram 1. Em caso contrário os bits são configurados como 0. Para quem gosta de Lógica Matemática, ou a Tabela Verdade da Lógica de Boole, vai se lembrar do conectivo "^", que diz que a proposição resultante da conjunção só será verdadeira quando as proposições simples individuais forem verdadeiras. O operador de bits & do JavaScript é similar ao conectivo "^" da Lógica Proposicional. Vamos analisar os seguintes valores binários: a) 0101 (5 decimal) b) 0100 (4 decimal) Quando aplicamos o operador & nestes dois valores teremos o seguinte resultado: ---------------------------------------------------------------------- Se precisar de ajuda para ajustar o código abaixo de acordo com as suas necessidades, chama a gente no WhatsApp +55 (62) 98553-6711 (Osmar) Ah, e se puder, faça uma DOAÇÃO de qualquer valor para nos ajudar a manter o site livre de anúncios. Ficaremos eternamente gratos ;-) Nosso PIX é: osmar@arquivodecodigos.com.br ---------------------------------------------------------------------- 0101 0100 ---- 0100 Veja que o resultado é 0100, uma vez que apenas o segundo bit de cada valor está configurado como 1. Vamos ver isso em JavaScript agora. Observe o seguinte trecho de código: ----------------------------------------------------------------------
Se precisar de ajuda para ajustar o código abaixo de acordo com as
suas necessidades, chama a gente no WhatsApp +55 (62) 98553-6711 (Osmar)
Ah, e se puder, faça uma DOAÇÃO de qualquer valor para nos ajudar
a manter o site livre de anúncios. Ficaremos eternamente gratos ;-)
Nosso PIX é: osmar@arquivodecodigos.com.br
----------------------------------------------------------------------
<html>
<head>
<title>Manipulação de Bits em JavaScript</title>
</head>
<body>
<script type="text/javascript">
var a = 5;
var b = 4;
var c = a & b;
// exibe o resultado (em binário e em decimal)
document.writeln("a = " + obterBits(a) + " (" + a + ")");
document.writeln("<br>b = " + obterBits(b) + " (" + b + ")");
document.writeln("<br>a & b = " + obterBits(c) + " (" + c + ")");
// função auxiliar que converte um decimal em sua representação em bits
function obterBits(valor){
var mascara = 1 << 31; // 10000000 00000000 00000000 00000000
var buffer = ""; // um buffer para guardar os bits dos bytes
for(var i = 1; i <= 32; i++){
// compara os bits individuais dos dois valores inteiros
if((valor & mascara) == 0){
buffer = buffer + "0";
}
else{
buffer = buffer + "1";
}
valor = valor << 1; // desloca uma posição para a esquerda
// Cada troca à esquerda corresponde à multiplicação do
// valor por 2
if(i % 8 == 0){ // completou um byte?
buffer = buffer + " ";
}
}
return buffer;
}
</script>
</body>
</html>
Ao executar este código teremos o seguinte resultado: ----------------------------------------------------------------------
Se precisar de ajuda para ajustar o código abaixo de acordo com as
suas necessidades, chama a gente no WhatsApp +55 (62) 98553-6711 (Osmar)
Ah, e se puder, faça uma DOAÇÃO de qualquer valor para nos ajudar
a manter o site livre de anúncios. Ficaremos eternamente gratos ;-)
Nosso PIX é: osmar@arquivodecodigos.com.br
----------------------------------------------------------------------
a = 00000000 00000000 00000000 00000101 (5)
b = 00000000 00000000 00000000 00000100 (4)
a & b = 00000000 00000000 00000000 00000100 (4)
|
JavaScript ::: DOM (Document Object Model) ::: window Object (Objeto window) |
Como usar o objeto window em suas aplicações HTML + JavaScriptQuantidade de visualizações: 8791 vezes |
|
O objeto window representa a janela do browser, uma janela em um frame ou janela de diálogo contendo um documento HTML. Este objeto fornece várias informações a respeito da janela (name, navigator, location, history, etc.), permite acesso ao documento contido na janela e suporta vários métodos úteis (alert(), confirm(), addEventListener(), attachEvent(), etc). Veja uma página HTML na qual temos um código JavaScript que acessa a janela atual e usa seu método alert() para exibir uma mensagem ao usuário: ----------------------------------------------------------------------
Se precisar de ajuda para ajustar o código abaixo de acordo com as
suas necessidades, chama a gente no WhatsApp +55 (62) 98553-6711 (Osmar)
Ah, e se puder, faça uma DOAÇÃO de qualquer valor para nos ajudar
a manter o site livre de anúncios. Ficaremos eternamente gratos ;-)
Nosso PIX é: osmar@arquivodecodigos.com.br
----------------------------------------------------------------------
<html>
<head>
<title>Estudos JavaScript</title>
</head>
<body>
<script type="text/javascript">
// vamos exibir uma mensagem ao usuário
window.alert("JavaScript é muito bacana!");
</script>
</body>
</html>
O objeto window pode também representar uma janela contida em um frame ou em um elemento iframe, ou ainda em uma janela secundária (criada com os métodos open(), showModalDialog() ou showModelessDialog()). Eis algumas observações que devem ser bem memorizadas: a) Se a janela estiver contida em um frame ou elemento iframe, ela é uma janela filha da janela que contém o elemento frame. Para obter a janela mãe só precisamos usar a propriedade parent da janela filha. Veja: ---------------------------------------------------------------------- Se precisar de ajuda para ajustar o código abaixo de acordo com as suas necessidades, chama a gente no WhatsApp +55 (62) 98553-6711 (Osmar) Ah, e se puder, faça uma DOAÇÃO de qualquer valor para nos ajudar a manter o site livre de anúncios. Ficaremos eternamente gratos ;-) Nosso PIX é: osmar@arquivodecodigos.com.br ---------------------------------------------------------------------- <script type="text/javascript"> // vamos obter a janela mãe var janela_mae = window.parent; </script> b) Se a janela for aberta por meio dos métodos open(), showModalDialog() ou showModelessDialog(), então a janela que a criou pode ser acessada por meio da propriedade opener. Os membros da janela atual podem ser acessados diretamente, sem a necessidade de passarmos pelo objeto window, ou seja, podemos usar alert() em vez de window.alert(), ainda que a última forma é a preferida. O objeto window está disponível para acesso a partir de qualquer ponto de nossos códigos JavaScript. Assim, devemos nos esforçar ao máximo para não termos variáveis com o mesmo nome das propriedades e métodos deste objeto. Dica escrita e testada no Internet Explorer (IE 8) e no Firefox 3.6. |
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: 2676 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 para ajustar o código abaixo de acordo com as
suas necessidades, chama a gente no WhatsApp +55 (62) 98553-6711 (Osmar)
Ah, e se puder, faça uma DOAÇÃO de qualquer valor para nos ajudar
a manter o site livre de anúncios. Ficaremos eternamente gratos ;-)
Nosso PIX é: osmar@arquivodecodigos.com.br
----------------------------------------------------------------------
<!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. |
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: 7228 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 para ajustar o código abaixo de acordo com as
suas necessidades, chama a gente no WhatsApp +55 (62) 98553-6711 (Osmar)
Ah, e se puder, faça uma DOAÇÃO de qualquer valor para nos ajudar
a manter o site livre de anúncios. Ficaremos eternamente gratos ;-)
Nosso PIX é: osmar@arquivodecodigos.com.br
----------------------------------------------------------------------
<!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 adicionar elementos no início de um array JavaScript usando a função unshift() do objeto ArrayQuantidade de visualizações: 7811 vezes |
|
Nesta dica mostrarei como adicionar um ou mais elementos no início de um array da linguagem JavaScript usando a função unshift() do objeto Array. Esta função é chamada na variável do tipo array e recebe um ou mais elementos, os quais serão inseridos no início do vetor. Veja o código JavaScript completo para o exemplo: ----------------------------------------------------------------------
Se precisar de ajuda para ajustar o código abaixo de acordo com as
suas necessidades, chama a gente no WhatsApp +55 (62) 98553-6711 (Osmar)
Ah, e se puder, faça uma DOAÇÃO de qualquer valor para nos ajudar
a manter o site livre de anúncios. Ficaremos eternamente gratos ;-)
Nosso PIX é: osmar@arquivodecodigos.com.br
----------------------------------------------------------------------
<!doctype html>
<html>
<head>
<title>Arrays em JavaScript</title>
</head>
<body>
<script type="text/javascript">
// vamos criar um array em JavaScript
var valores = new Array(1, 2, 3, 4, 5);
// agora vamos mostrar o vetor criado
document.write("Valores no array: " + valores
+ "<br>");
// vamos adicionar três elementos no início do
// array
valores.unshift(6, 7, 8);
// e mostramos o resultado
document.write("Adicionei três elementos no início do array<br>");
document.write("Valores no array: " + valores);
</script>
</body>
</html>
Ao executar este código JavaScript nós teremos o seguinte resultado: Valores no array: 1,2,3,4,5 Adicionei três elementos no início do array Valores no array: 6,7,8,1,2,3,4,5 |
JavaScript ::: Dicas & Truques ::: Data e Hora |
Como somar dias a uma data em JavaScript usando uma função personalizada adicionar_dias() que retorna um objeto DateQuantidade de visualizações: 13546 vezes |
|
Nesta dica mostrarei como podemos escrever uma função JavaScript que permite adicionar dias a uma data recebida como argumento e retorna um novo objeto Date. Como pequenas modificações esta função pode ser usada também para subtrair dias da data. Veja a página HTML completa para o exemplo: ----------------------------------------------------------------------
Se precisar de ajuda para ajustar o código abaixo de acordo com as
suas necessidades, chama a gente no WhatsApp +55 (62) 98553-6711 (Osmar)
Ah, e se puder, faça uma DOAÇÃO de qualquer valor para nos ajudar
a manter o site livre de anúncios. Ficaremos eternamente gratos ;-)
Nosso PIX é: osmar@arquivodecodigos.com.br
----------------------------------------------------------------------
<!doctype html>
<html>
<head>
<title>Data e hora em JavaScript</title>
</head>
<body>
<script type="text/javascript">
// função que recebe um objeto Date e uma quantidade
// de dias e soma esses dias ao Date recebido e
// e retorna um novo objeto Date
function adicionar_dias(data, dias){
return new Date(data.getTime() + (dias * 24 * 60
* 60 * 1000));
}
// testa a função
var hoje = new Date();
document.write("Hoje é " + hoje.toLocaleDateString() + "<br>");
// vamos adicionar 5 dias ao objeto Date
var data_futura = adicionar_dias(hoje, 5);
document.write("Daqui 5 dias será: " +
data_futura.toLocaleDateString());
</script>
</body>
</html>
Ao executar este código JavaScript nós teremos o seguinte resultado: Hoje é 06/02/2023 Daqui 5 dias será: 11/02/2023 |
JavaScript ::: Dicas & Truques ::: Strings e Caracteres |
Como testar se uma string termina com uma determinada substring em JavaScript usando a função endsWith()Quantidade de visualizações: 1756 vezes |
|
O método endsWith() da linguagem JavaScript foi adicionado ao objeto String na revisão ECMAScript 2015, ou ES6, também chamado de ECMAScript 6. Este método é chamado diretamente em uma variável do tipo string e retorna true se a palavra, frase ou texto terminar com uma substring específica e false em caso contrário. Veja um exemplo no qual verificamos se uma frase termina com a palavra "JavaScript": ----------------------------------------------------------------------
Se precisar de ajuda para ajustar o código abaixo de acordo com as
suas necessidades, chama a gente no WhatsApp +55 (62) 98553-6711 (Osmar)
Ah, e se puder, faça uma DOAÇÃO de qualquer valor para nos ajudar
a manter o site livre de anúncios. Ficaremos eternamente gratos ;-)
Nosso PIX é: osmar@arquivodecodigos.com.br
----------------------------------------------------------------------
<!doctype html>
<html>
<head>
<title>JavaScript 6</title>
</head>
<body>
<script type="text/javascript">
var frase = "Eu prefiro programar em JavaScript";
if(frase.endsWith("JavaScript")){
document.writeln("A frase termina com a palavra JavaScript");
}
else{
document.writeln("A frase não termina com a palavra JavaScript");
}
</script>
</body>
</html>
Ao executarmos este código JavaScript nós teremos o seguinte resultado: A frase termina com a palavra JavaScript É importante ter em mente que a função endsWith() diferencia letras maiúsculas de letras minúsculas. |
Desafios, Exercícios e Algoritmos Resolvidos de JavaScript |
Veja mais Dicas e truques de JavaScript |
Dicas e truques de outras linguagens |
E-Books em PDF |
||||
|
||||
|
||||
Linguagens Mais Populares |
||||
|
1º lugar: Java |
