 |
|
||||
Você está aqui: JavaScript ::: Dicas & Truques ::: Strings e Caracteres |
Como substituir uma substring em uma string JavaScript usando a função replace()Quantidade de visualizações: 524 vezes |
|
Nesta dica mostrarei como podemos substituir parte de uma palavra, frase ou texto em JavaScript usando a função replace() do objeto String. Esta função recebe a substring a ser substituida e a substring que ocupará o seu lugar e retorna uma nova string. Veja a página HTML para o nosso primeiro 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>Strings em JavaScript</title>
</head>
<body>
<script type="text/javascript">
// vamos criar uma frase
var frase = "Gosto de Java, Java e mais Java";
document.write("A frase é: " + frase + "<br>");
// e agora vamos substituir a substring na string
var resultado = frase.replace("Java", "Python");
// e mostramos o resultado
document.write("Depois da substituição: " +
resultado);
</script>
</body>
</html>
Ao executar este código JavaScript nós teremos o seguinte resultado: A frase é: Gosto de Java, Java e mais Java Depois da substituição: Gosto de Python, Java e mais Java Note que apenas a primeira ocorrência da substring "Java" foi substituída por "Python". Para que todas as ocorrências sejam substituídas, temos que usar o sinalizador global. 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 criar uma frase
var frase = "Gosto de Java, Java e mais Java";
document.write("A frase é: " + frase + "<br>");
// e agora vamos substituir a substring na string
var resultado = frase.replace(/Java/g, "Python");
// e mostramos o resultado
document.write("Depois da substituição: " +
resultado);
</script>
Agora o resultado será: A frase é: Gosto de Java, Java e mais Java Depois da substituição: Gosto de Python, Python e mais Python |
 Link para compartilhar na Internet ou com seus amigos: |
JavaScript ::: DOM (Document Object Model) ::: document Object |
JavaScript DOM - Como usar o objeto document em seus códigos JavaScriptQuantidade de visualizações: 7862 vezes |
O objeto document representa a página HTML e fornece possibilidades para acessar, criar e manipular todos os elementos HTML no documento. Este objeto está logo abaixo do objeto window na hierarquia do DOM (Document Object Model), ou seja, podemos dizer que este elemento é filho do objeto window. Assim, para acessá-lo a partir de nossos códigos JavaScript podemos usar window.document ou simplesmente document. 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
----------------------------------------------------------------------
<html>
<head>
<title>Estudos JavaScript</title>
</head>
<body>
<script type="text/javascript">
// vamos obter o título desta página
var titulo = window.document.title;
// vamos exibir o resultado em uma mensagem alert
window.alert("O título da página é: " + titulo);
</script>
</body>
</html>
Neste exemplo nós usamos o objeto window para obter o objeto document. O passo seguinte foi obter o valor de sua propriedade title, que é usada para definir ou obter o título da página HTML. Para obter um elemento em um documento HTML nós podemos usar as coleções (all, anchors, applets, etc), os métodos getElementById(), getElementsByName() e getElementsByTagName() e algumas outras propriedades e métodos. Se precisarmos acessar o elemento body ou html, podemos usar as propriedades document.documentElement e document.body. Veja um trecho de código no qual acessamos o corpo do documento HTML e definimos sua cor de fundo: ---------------------------------------------------------------------- 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 definir a cor de fundo da página HTML window.document.body.bgColor = "Beige"; </script> Uma vez que o objeto document é um objeto contâiner para um documento HTML, ele fornece métodos para a crição de novos elementos (por meio do método createElement()), nós textos (createTextNode()) e nós de comentários (createComment()). Depois que um nó (node) é criado, ele pode ser inserido no documento por meio de chamadas aos métodos appendChild() e insertBefore(). Veja um trecho de código no qual usamos o método createElement() para criar um novo elemento div e logo em seguida usamos o método appendChild() para adicionar o elemento recém-criado no final do documento 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>Estudos JavaScript</title>
</head>
<body>
<script type="text/javascript">
// vamos criar um novo elemento div
var elem = document.createElement("div");
elem.innerHTML = "Sou uma div criada dinâmicamente";
elem.style.backgroundColor = "beige";
// vamos adicionar este novo elemento no final do documento
document.body.appendChild(elem);
</script>
</body>
</html>
Os documentos HTML contidos em elementos frames e iframes possuem seus próprios objetos document. Para obter tais objetos, devemos usar a propriedade contentDocument. |
JavaScript ::: Web APIs (APIs Web) ::: MediaDevices Interface (Interface MediaDevices) |
HTML5 + JavaScript - Como usar a interface MediaDevices em seus códigos JavaScriptQuantidade de visualizações: 1624 vezes |
|
A interface MediaDevices é um daqueles objetos que vemos com frequencia em códigos JavaScript e não entendemos muito bem o seu funcionamento. Nesta dica vou decifrá-la. O objetivo da interface MediaDevices é fornecer acesso aos dispositivos de entrada de mídia conectadas e às quais o navegador tem acesso, a saber, câmeras, microfone e compartilhamento de tela. É por meio dessa interface que acessamos tais dispositivos. A interface MediaDevices está disponível como um objeto do objeto navigator. Veja como testar sua existência e suporte no seu navegador web: ----------------------------------------------------------------------
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">
// o browser suporta o MediaDevices?
if(navigator.mediaDevices){
window.alert("O navegador suporta o MediaDevices");
}
else{
window.alert("O navegador não suporta o MediaDevices");
}
</script>
</body>
</html>
Note que mediaDevices é um objeto Singleton do objeto navigator, ou seja, só há uma instância desse objeto disponível no contexto de execução de códigos no navegador. Há também a preocupação em relação à segurança. Alguns navegador podem restringir o acesso a este objeto se você não estiver em um ambiente HTTPS ou localhost. |
JavaScript ::: W3C DOM - (Wide Web Consortium) Document Object Model ::: Navegação e Pesquisa de Nós (Nodes) |
Como usar a propriedade parentNode para obter o objeto pai de um elemento na hierarquia do DOM do JavaScriptQuantidade de visualizações: 10224 vezes |
|
Em algumas situações precisamos verificar o objeto pai do elemento atual na hierarquia do DOM (Document Object Model). Para isso podemos usar a propriedade parentNode. Veja um trecho de código no qual temos um elemento <a> (um link) dentro de um elemento div. Note como usamos uma função para obter o elemento pai do link e exibir seu nome de tag e valor da propriedade id: ----------------------------------------------------------------------
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>
<script type="text/javascript">
function obterParentNode(){
// vamos obter o link com o id "link"
var no = document.getElementById("link");
// vamos obter o nó pai deste link
var noPai = no.parentNode;
// vamos exibir o nome da tag e id do nó pai
window.alert("A tag do nó pai é: " + noPai.tagName);
// vamos exibir o valor da propriedade id do nó pai
window.alert("O id do nó pai é: " + noPai.id);
}
</script>
</head>
<body>
<div id="container">
<a id="link" href="http://www.google.com">Sou um link</a>
</div>
<br>
<button onclick="obterParentNode()">Obter Nó Pai do Link</button>
</body>
</html>
Ao executar este código JavaScript nós teremos o seguinte resultado: A tag do nó pai é: DIV O id do nó pai é: container Veja que o nome da tag do elemento pai é obtido por meio da propriedade tagName. Note também que a propriedade parentNode de um elemento HTML é somente-leitura, ou seja, não podemos alterar seu valor durante a execução de nossos códigos. Esta dica foi escrita e testada no Google Chrome 127.0.6533.122 (Versão oficial) 64 bits. |
JavaScript ::: Dicas & Truques ::: Mouse e Teclado |
Como obter o código da tecla pressionada em um elemento HTML usando o evento onkeypress do JavaScriptQuantidade de visualizações: 176 vezes |
|
Nesta dica eu mostrarei como é possível usar o evento onkeypress do HTML + JavaScript para obter o código da tecla pressionada pelo usuário. Note que usei a propriedade keyCode do objeto event para capturar o código da tecla. Veja o código JavaScript completo, incluindo a página 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>
</head>
<body>
<p>Experimente pressionar qualquer tecla e uma
mensagem mostrará o código da tecla pressionada.</p>
<script type="text/javascript">
function tecla(){
window.alert("O código da tecla pressionada foi: "
+ event.keyCode);
}
document.body.onkeypress = tecla;
</script>
</body>
</html>
Abra esta página no seu navegador e experimente pressionar uma tecla. Se você presssionar, por exemplo, a tecla "a", teremos a seguinte mensagem: O código da tecla pressionada foi: 97 |
JavaScript ::: JavaScript para Engenharia ::: Geometria Analítica e Álgebra Linear |
Como calcular a distância entre dois pontos no plano em JavaScript - JavaScript para Geometria Analítica e Álgebra LinearQuantidade de visualizações: 4808 vezes |
|
Como calcular a Distância Euclidiana entre dois pontos usando JavaScript Em várias aplicações envolvendo geometria, principalmente no desenvolvimento de jogos em JavaScript, é comum nos depararmos com a necessidade de calcular a distância entre dois pontos A e B. Nessa dica mostrarei como efetuar esse cálculo no R2, ou seja, no plano. Em outra dica eu abordo o cálculo no R3 (espaço). Comece analisando a imagem abaixo:  Veja que temos um ponto A (x = 3; y = 6) e um ponto B (x = 9; y = 4). Para determinarmos a distância entre esses dois pontos no plano cartesiano, temos que realizar a análise tanto no sentido do eixo das abscissas (x) quanto no do eixo das ordenadas (y). Veja a fórmula: \[d_{AB} = \sqrt{\left(x_b - x_a\right)^2 + \left(y_b - y_a\right)^2}\] Agora, jogando os valores dos dois pontos da fórmula nós teremos: \[d_{AB} = \sqrt{\left(9 - 3\right)^2 + \left(6 - 4\right)^2}\] Que resulta em 6,32 (aproximadamente). E agora veja o código JavaScript completo que define as coordenadas dos dois pontos e mostra a distância entre eles: ----------------------------------------------------------------------
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">
// função que permite calcular a distância
// entre dois pontos no plano (R2)
function distancia2d(x1, y1, x2, y2){
var a = x2 - x1;
var b = y2 - y1;
var c = Math.sqrt(Math.pow(a, 2) + Math.pow(b, 2));
return c;
}
// vamos definir os dados do primeiro ponto
var x1 = 3;
var y1 = 6;
// vamos ler os dados do segundo ponto
var x2 = 9;
var y2 = 4;
// vamos obter a distância entre eles
var distancia = distancia2d(x1, y1, x2, y2);
document.writeln("Distância entre os dois pontos: " +
distancia);
</script>
</body>
</html>
Ao executarmos este código JavaScript nós teremos o seguinte resultado: Distância entre os dois pontos: 6.324555320336759 |
JavaScript ::: Dicas & Truques ::: Strings e Caracteres |
Como converter uma string em um valor de ponto-flutuante em JavaScript usando a função parseFloat()Quantidade de visualizações: 7821 vezes |
|
Em algumas situações nós precisamos receber uma string informada pelo usuário e convertê-la para um valor real válido. Um valor em JavaScript é o mesmo que um valor com casas decimais, ou seja, um valor de ponto-flutuante. Esta tarefa pode ser realizada com o auxílio da função parseFloat(). Veja uma página HTML completa 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>Strings em JavaScript</title> </head> <body> <script type="text/javascript"> var valor1 = "87.32"; var valor2 = "Arquivo"; var valor3 = "65,54"; // vamos exibir os resultados document.write(parseFloat(valor1) + "<br>"); document.write(parseFloat(valor2) + "<br>"); document.write(parseFloat(valor3)); </script> </body> </html> Ao executarmos este código JavaScript nós teremos o seguinte resultado: 87.32 NaN 65 Note que apenas a primeira string pôde ser convertida para um valor fracionário com sucesso. |
JavaScript ::: Dicas & Truques ::: Data e Hora |
Como adicionar horas a um objeto Date em JavaScript - Datas e horas em JavaScriptQuantidade de visualizações: 8649 vezes |
|
Nesta dica mostrarei como é possível adicionar horas a um objeto Date da linguagem JavaScript. Note que criei uma função personalizada para este propósito, e ela retorna um novo objeto Date com a nova data e hora já construída. Veja o código 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
----------------------------------------------------------------------
<html>
<head>
<title>Estudando JavaScript</title>
</head>
<body>
<script type="text/javascript">
function adicionarHoras(data, horas){
return new Date(data.getTime() + (horas *
60 * 60 * 1000));
}
document.write('Agora são: ' +
(new Date()).toLocaleString() + '<br>');
document.write('Daqui 5 horas será: ' +
adicionarHoras(new Date(), 5).toLocaleString());
</script>
</body>
</html>
Ao executar este código nós teremos o seguinte resultado: Agora são: 24/03/2021 17:21:40 Daqui 5 horas será: 24/03/2021 22:21:40 |
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 Fundações |
| Sondagem à Percussão (SPT) e Rotativa (RQD) Qual a densidade relativa calculada pela formulação empírica de Skempton, considerando que o valor de N corrigido foi de 20 a uma profundidade de 2m em um solo cujo peso específico é de 20 kN/m3? A) 0,82. B) 0,78. C) 0,87. D) 0,72. E) 0,61. Verificar Resposta Estudar Cards Todas as Questões |
Vamos testar seus conhecimentos em Fenômeno de Transportes e Hidráulica |
| Tipos de Escoamentos Para um conduto cilíndrico de raio R, calcular a área molhada, o perímetro molhado e o raio hidráulico em duas situações: (1) conduto completamente cheio de água e (2) conduto 50% preenchido. Identificar o escoamento que ocorre em cada uma das situações e qual escoamento é mais influenciado pelas paredes do contorno sólido. A) A1 = πR2; PM1 = 2πR, RH1 = R, escoamento em conduto forçado A2 = (πR2)/2; PM2 = πR, RH2 = R/2, escoamento à superfície livre. O escoamento em 2 é o mais influenciado pelas paredes, pois o RH é menor. B) A1 = πR2; PM1 = 2πR, RH1 = R/2, escoamento em conduto forçado A2 = (πR2)/2; PM2 = πR, RH2 = R/2, escoamento à superfície lívre. Ambos os escoamentos possuem a mesma influência, pois o valor de RH é igual nos dois casos. C) A1 = πR2; PM1 = 2πR, RH1 = R, escoamento em conduto forçado A2 = (πR2)/2; PM2 = πR, RH2 = R/2, escoamento à superfície livre. O escoamento em 1 é o mais influenciado pelas paredes, pois o RH é maior. D) A1 = πR2; PM1 = 2πR, RH1 = R/2, escoamento em conduto forçado A2 = (πR2)/2; PM2 = πR, RH2 = R/2, escoamento à superfície livre. O escoamento em 2 é o mais influenciado pelas paredes, pois a A2 é menor. E) A1 = πR2; PM1 = 2πR, RH1 = R/2, escoamento à superfície livre A2 = (πR2)/2; PM2 = πR, RH2 = R/2, escoamento em conduto forçado. Ambos os escoamentos possuem a mesma influência, pois o valor de RH é igual nos dois casos. Verificar Resposta Estudar Cards Todas as Questões |
Vamos testar seus conhecimentos em Python |
| Qual das formas abaixo é válida para a criação de um DICIONÁRIO em Python? A) estados = ["SP": "SÃO PAULO", "GO": "GOIÁS"] B) estados = ("SP": "SÃO PAULO", "GO": "GOIÁS") C) estados = set("SP": "SÃO PAULO", "GO": "GOIÁS") D) estados = "SP": "SÃO PAULO", "GO": "GOIÁS" E) estados = {"SP": "SÃO PAULO", "GO": "GOIÁS"} Verificar Resposta Estudar Cards Todas as Questões |
Vamos testar seus conhecimentos em Ética e Legislação Profissional |
| A responsabilidade moral A responsabilidade causal surge quando determinado evento ou estado causa outro. Por exemplo, um curto-circuito pode ser responsável por incêndio, um furacão por enchente e assim por diante. Na perspectiva de irmos para além da responsabilidade causal, pode-se dizer que a responsabilidade moral se refere: A) ao fato de viver em sociedade. B) às consequências das relações sociais. C) às ações nas relações sociais somente. D) ao convívio com outros humanos somente. E) às ações e suas consequências nas relações sociais. Verificar Resposta Estudar Cards Todas as Questões |
Vamos testar seus conhecimentos em Engenharia Civil - Instalações Hidráulicas Prediais |
| Dimensionamento de Redes de Distribuição de Água Qual a vazão em marcha e específica para uma cidade com 250.000 habitantes, área de 1.250 ha e consumo per capta de 275 L/hab.dia? Considere que existem 12 km de rede instalados. A) qm = 0,12 L/s.ha e qd = 1,15 L/s.m. B) qm = 1,15 L/s.ha e qd = 0,12 L/s.m. C) Q = 1,43 m3/s. D) qm = 1,15 L/s.m e qd = 0,12 L/s.ha. E) qm = 0,12 L/s.m e qd = 1,15 L/s.ha. 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 |
