Você está aqui: 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 ::: Miscelâneas |
JavaScript para iniciantes - Como usar o método escape() para codificar uma frase em JavaScriptQuantidade de visualizações: 12624 vezes |
A função escape() da linguagem JavaScript é usada quando precisamos codificar uma palavra, frase ou texto, ou seja, uma string. Em geral nós a usamos para codificar caracteres especiais em uma string, com a exceção dos caracteres e símbolos "* @ - _ + . /". Veja um exemplo 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> <script type="text/javascript"> var frase = "Programar em JavaScript é muito bom"; document.write("Original: " + frase + "<br>"); document.write("Codificada: " + escape(frase)); </script> </body> </html> Ao executarmos este código nós teremos o seguinte resultado: Original: Programar em JavaScript é muito bom Codificada: Programar%20em%20JavaScript %20%E9%20muito%20bom Lembre-se de que o objetivo da função escape() é tornar uma string portável, ou seja, que pode ser transmitida pela rede para qualquer computador que suportar os caracteres ASCII. Nota: A função escape() foi marcada como desatualizada (deprecated) a partir do JavaScript 1.5. Em vez dela nós devemos usar as funções encodeURI() ou encodeURIComponent(). |
JavaScript ::: Dicas & Truques ::: Set (Conjunto) |
Como usar objetos Set em seus códigos JavaScriptQuantidade de visualizações: 1159 vezes |
Os objetos Set, introduzidos no JavaScript na revisão ECMAScript 2015, também chamada de ES6 e ECMAScript 6, trazem para a linguagem a noção de conjuntos. Um conjunto é uma coleção de valores únicos, ou seja, cada valor pode aparecer somente uma vez. Dessa forma, objetos Set do JavaScript obedecem esta regra e podem armazenar todos os tipos de dados, desde os tipos primitivos númericos até objetos de classes definidas pelo usuário. Nesta dica veremos como adicionar elementos a um Set e depois percorrer o seu conteúdo e exibir todos os seus valores. Veja o código a seguir: ---------------------------------------------------------------------- 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>O método setInterval() do JavaScript</title> </head> <body> <script type="text/javascript"> // vamos criar um novo conjunto var linguagens = new Set(); // vamos adicioar 4 linguagens linguagens.add("Java"); linguagens.add("PHP"); linguagens.add("C++"); linguagens.add("Python"); // vamos percorrer os elementos do conjunto for(var linguagem of linguagens){ document.writeln(linguagem + "<br>"); } </script> </body> </html> Ao executar este código nós teremos o seguinte resultado: Java PHP C++ Python Em mais dicas dessa seção você aprenderá mais sobre os métodos e propriedades do objeto Set da linguagem JavaScript. |
JavaScript ::: Dicas & Truques ::: Arrays e Matrix (Vetores e Matrizes) |
Como retornar apenas os três primeiros elementos de um array em JavaScript usando a função slice() do objeto ArrayQuantidade de visualizações: 8779 vezes |
Nesta dica eu mostrarei como é possível usar o método slice() do objeto Array da linguagem JavaScript para retornar um ou mais elementos de um vetor, como um novo objeto array. Para isso só precisamos fornecer ao método o índice inicial e o índice final (não incluindo) dos elementos a serem retornados. É importante observar que o método slice() não modifica o vetor original. Veja o exemplo 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> <script type="text/javascript"> var valores = new Array(1, 2, 3, 4, 5, 6, 7); document.write("Valores no vetor: " + valores + "<br>"); document.write("Retornando os três primeiros elementos<br>"); var valores2 = valores.slice(0, 3); document.write("Valores no novo vetor: " + valores2); </script> </body> </html> Ao executarmos este código nós teremos o seguinte resultado: Valores no vetor: 1,2,3,4,5,6,7 Retornando os três primeiros elementos Valores no novo vetor: 1,2,3 |
JavaScript ::: Dicas & Truques ::: Data e Hora |
Como subtrair dias de uma data em JavaScript - Data e horas em JavaScriptQuantidade de visualizações: 16682 vezes |
Em algumas situações, principalmente quando estamos desenvolvendo aplicações que envolvem datas, horas e calendários em JavaScript, nós precisamos subtrair dias de uma data. Nesta dica eu mostro como isso pode ser feito. Veja o código completo abaixo: ---------------------------------------------------------------------- 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> <script type="text/javascript"> function subtrairDias(data, dias){ return new Date(data.getTime() - (dias * 24 * 60 * 60 * 1000)); } document.write('Hoje é: ' + (new Date()).toLocaleDateString() + '<br>'); document.write('5 dias atrás era: ' + subtrairDias(new Date(), 5).toLocaleDateString()); </script> </body> </html> Ao executarmos este código nós teremos o seguinte resultado: Hoje é: 25/03/2021 5 dias atrás era: 20/03/2021 |
JavaScript ::: Dicas & Truques ::: Arrays e Matrix (Vetores e Matrizes) |
Como testar se um objeto é um array em JavaScript usando a função Array.isArray()Quantidade de visualizações: 2714 vezes |
Em algumas situações nós precisamos verificar se um determinado objeto é um array (vetor ou matriz). Para isso podemos usar o método Array.isArray(), adicionado ao ECMAScript 2009 (JavaScript 5). Este método recebe o objeto como argumento e retorna true se o objeto for um array e false em caso contrário. Veja o exemplo a seguir: ---------------------------------------------------------------------- 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 criar um vetor de inteiros var valores = [34, 6, 32, 10]; // vamos testar se o objeto valores é mesmo um array if(Array.isArray(valores)){ window.alert("O objeto é um array"); } else{ window.alert("O objeto não é um array"); } </script> Ao executar este código você verá a mensagem "O objeto é um array". Isso está correto, pois o objeto valores realmente é um vetor. No entanto, há casos em que não sabemos, principalmente ao usarmos códigos de terceiros, se um determinado retorno será do tipo array. Veja mais um 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 ---------------------------------------------------------------------- <script type="text/javascript"> // vamos criar um objeto String var frase = "Gosto muito de JavaScript"; // vamos quebrar esta frase. O retorno deverá ser uma array var pedacos = frase.split(" "); // vamos testar se o objeto valores é mesmo um array if(Array.isArray(pedacos)){ window.alert("O objeto é um array"); } else{ window.alert("O objeto não é um array"); } </script> Novamente o retorno será verdadeiro, pois o método split() do objeto String quebra o seu conteúdo de acordo com o delimitador informado e retorna seus pedaços como um array (vetor). |
JavaScript ::: Fundamentos da Linguagem ::: Estruturas de Controle |
JavaScript para leigos - Como usar o laço while da linguagem JavaScriptQuantidade de visualizações: 7214 vezes |
O laço while (também chamado de loop ou laço enquanto) da linguagem JavaScript é usado quando queremos repetir uma instrução ou um grupo de instruções ENQUANTO uma condição for satisfeita. Veja sua sintáxe:---------------------------------------------------------------------- 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 ---------------------------------------------------------------------- while(condição){ // uma instrução ou grupo de instruções } A condição pode ser qualquer expressão que resulte em um valor boolean (true ou false). Note também que o teste condicional é feito antes de cada iteração (repetição) do laço. Isso faz com que este laço, dependendo da condição inicial, possa nunca ser executado. Veja um trecho de código no qual usamos o laço while para contar de 0 até 10: ---------------------------------------------------------------------- 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"> var i = 0; while(i <= 10){ document.write(i + "<br>"); i++; } </script> </body> </html> Ao executarmos este código teremos o seguinte resultado: 0 1 2 3 4 5 6 7 8 9 10 Veja que declaramos uma variável de controle i e a inicializamos com o valor 0. Na entrada do laço nós verificamos se seu valor é menor ou igual a 10. Como esta condição é satisfeita, o laço é executado pela primeira vez. No corpo do laço nós exibimos o valor da variável de controle e a incrementamos em 1. Agora o ciclo se repete. A condição é testada novamente. Se esta for satisfeita, o código entra no corpo do laço novamente e assim por diante. Veja agora como modificar o laço while anterior para exibir os números de 10 até 0: ---------------------------------------------------------------------- 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"> var i = 10; while(i >= 0){ document.write(i + "<br>"); i--; } </script> </body> </html> Agora o resultado do código será: 10 9 8 7 6 5 4 3 2 1 0 Esta dica foi escrita e testada no Internet Explorer 8 e Firefox 3.6. |
JavaScript ::: Dicas & Truques ::: Cookies |
Cookies em JavaScript - Como escrever uma função para a criação de cookies em JavaScriptQuantidade de visualizações: 2 vezes |
Nesta dica mostrarei como podemos criar uma função JavaScript chamada gravarCookie() que recebe o nome, o valor e a duração de dias do cookie. Em outras dicas desse seção você encontra a função que faz a leitura dos cookies criados. Veja o código JavaScript completo, incluindo o código HTML: ---------------------------------------------------------------------- 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> <script type="text/javascript"> // função que permite gravar um cookie function gravarCookie(nome, valor, diasDuracao){ var dataExpiracao = new Date(); dataExpiracao.setTime(dataExpiracao.getTime() + (diasDuracao * 24 * 3600 * 1000)); document.cookie = nome + "=" + escape(valor) + ((diasDuracao == null) ? "" : "; expires=" + dataExpiracao); } </script> </head> <body> <script type="text/javascript"> // cria um cookie que durará um dia gravarCookie("nome_visitante", "Osmar", 1); document.writeln("Cookie criado com sucesso."); </script> </body> </html> Ao executar este código nós teremos o seguinte resultado: Cookie criado com sucesso. |
JavaScript ::: Dicas & Truques ::: Data e Hora |
Como calcular a quantidade de dias restantes para uma determinada data em JavaScriptQuantidade de visualizações: 9040 vezes |
Em algumas situações nós precisamos calcular quantos dias faltam para uma determinada data em JavaScript. Por exemplo, você gostaria de saber quantos dias ainda falta para o Natal, ou para o seu aniversário? 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"> // vamos obter a data de hoje var hoje = new Date(); // vamos construir a data do Natal var data_natal = new Date(hoje.getFullYear(), 11, 25); // quantidade de milisegundos em um dia var dia = 1000 * 60 * 60 * 24; // calculamos os dias restantes para a data escolhida var restantes = Math.ceil((data_natal.getTime() - hoje.getTime()) / dia); // e mostramos o resultado document.write("Hoje é: " + hoje.toLocaleDateString() + "<br>"); document.write("Faltam " + restantes + " dias para o natal."); </script> </body> </html> Ao executar este código JavaScript nós teremos o seguinte resultado: Hoje é: 06/02/2023 Faltam 322 dias para o natal. |
Vamos testar seus conhecimentos em |
Dimensionamento de lajes maciças à flexão As lajes de concreto armado são elementos planos e horizontais, submetidos a carregamentos perpendiculares ao plano. Esses carregamentos promovem o desenvolvimento de esforços internos de flexão. Analise as afirmativas a seguir referentes aos tipos de flexão: I. A flexão normal ocorre em uma seção transversal em que atuam apenas momento fletor e esforço normal de tração ou compressão. II. A flexão reta ocorre quando os momentos fletores atuam em planos ortogonais aos eixos principais de inércia da seção transversal. III. Diz-se que a seção transversal de uma laje está submetida à flexão pura quando sobre ela atuam somente momentos fletores. IV. A seção transversal de uma laje está submetida à flexão composta quando, sobre esta, atuam momentos de flexão e forças normais. Assinale a alternativa correta: A) Apenas a afirmativa I está correta. B) Apenas a afirmativa III está correta. C) As afirmativas I, II e IV estão corretas. D) As afirmativas II, III e IV estão corretas. E) As afirmativas I, II, III e IV estão corretas. Verificar Resposta Estudar Cards Todas as Questões |
Vamos testar seus conhecimentos em JavaScript |
Qual é a forma correta de se exibir um diálogo de alerta em JavaScript? A) msgBox("Texto do aviso"); B) alertBox("Texto do aviso"); C) alert("Texto do aviso"); D) msg("Texto do aviso"); Verificar Resposta Estudar Cards Todas as Questões |
Vamos testar seus conhecimentos em Topografia |
Azimute e Rumo FGV-2015 - No lançamento do projeto geométrico de uma estrada, o topógrafo levantou que o azimute do ponto 10 para o 11 foi de 254º 22' 26''. Nesse caso, o rumo foi de: A) 54º 22' 26'' S B) 54º 22' 26'' NW C) 74º 22' 26'' SW D) 74º 22' 26'' N E) 105º 3' 3'' SW 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 É definido como a pessoa que responde pelos atos da atividade empresária e normalmente pode também ser identificado como o patrão, empregador ou dono do negócio. Assinale a alternativa que corresponde a esta definição. A) Preposto. B) Gerente. C) Preponente. D) Contabilista. E) Advogado. 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 |
E-Books em PDF |
||||
|
||||
|
||||
Linguagens Mais Populares |
||||
1º lugar: Java |