Você está aqui: JavaScript ::: Dicas & Truques ::: Strings e Caracteres |
Limitar a quantidade de caracteres em um textareaQuantidade de visualizações: 118 vezes |
<HTML> <HEAD><TITLE>Limitar a quantidade de caracteres em um textarea</TITLE> </HEAD> <BODY> <p>O elemento textarea abaixo aceita somente 20 caracteres. Experimente digitar ou colar mais que isso e verá o resultado.</p> <script language="JavaScript"> function limitar(obj){ var tecla = window.event.keyCode; var res = new RegExp(" ","g"); var x = obj.value.replace(res,"").length; if((x >= obj.maxLength) && ((tecla > 33 && tecla < 255) || (tecla > 95 && tecla < 106)) && (tecla != 13)){ if(obj.erro){ alert(obj.erro); } window.event.returnValue=false; } // tratamento para o texto colado if((obj.value.length >= obj.maxLength) && (window.event.type == 'paste')){ var texto = obj.value; obj.value = ""; obj.value = texto.slice(0, obj.maxLength - 1); } } </script> <form> <textarea cols="20" rows="5" name="mensagem" onkeypress="limitar(this)" onpaste="limitar(this)" maxLength="20" erro="O número máximo de caracteres foi atingido."></textarea> </form> </BODY> </HTML> |
![]() |
JavaScript ::: Dicas & Truques ::: Matemática e Estatística |
Como calcular juros simples e montante usando JavaScriptQuantidade de visualizações: 16726 vezes |
O regime de juros será simples quando o percentual de juros incidir apenas sobre o valor principal. Sobre os juros gerados a cada período não incidirão novos juros. Valor Principal ou simplesmente principal é o valor inicial emprestado ou aplicado, antes de somarmos os juros. Transformando em fórmula temos: J = P . i . n Onde: J = juros P = principal (capital) i = taxa de juros n = número de períodos Imaginemos uma dívida de R$ 2.000,00 que deverá ser paga com juros de 5% a.m. pelo regime de juros simples e o prazo para o pagamento é de 2 meses. O cálculo em JavaScript pode ser feito assim: ---------------------------------------------------------------------- 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"> var principal = 2000.00; var taxa = 0.08; var meses = 2; var juros = principal * taxa * meses; document.write("O total de juros a ser pago é: " + juros); </script> O montante da dívida pode ser obtido das seguintes formas: a) Montante = Principal + Juros b) Montante = Principal + (Principal x Taxa de juros x Número de períodos) M = P . (1 + (i . n)) Veja o 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 ---------------------------------------------------------------------- <script type="text/javascript"> var principal = 2000.00; var taxa = 0.08; var meses = 2; var juros = principal * taxa * meses; var montante = principal + juros; document.write("O total de juros a ser pago é: " + juros + "<br>"); document.write("O montante da dívida é: " + montante); </script> |
JavaScript ::: Dicas & Truques ::: Data e Hora |
Como exibir a data e hora atual em JavaScript usando o objeto DateQuantidade de visualizações: 8241 vezes |
O objeto Date da linguagem JavaScript pode ser usado quando queremos retornar ou exibir a data e hora atual. Nesta dica eu mostro como criar um objeto Date e em seguida mostrar os resultados na página. Veja o código HTML 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>Datas em JavaScript</title> </head> <body> <script type="text/javascript"> // vamos obter a data e hora atual var data = Date(); // e mostramos o resultado document.write("Data e hora atual: " + data); </script> </body> </html> Ao executar este código JavaScript nós teremos o seguinte resultado: Data e hora atual: Sat Feb 04 2023 15:08:32 GMT-0300 (Horário Padrão de Brasília) |
JavaScript ::: DOM (Document Object Model) ::: Navegação e Pesquisa de Nós (Nodes) |
Como obter o tipo de um nó no DOM (Document Object Model) usando a propriedade nodeType a partir de seus códigos JavaScriptQuantidade de visualizações: 8331 vezes |
Como obter o tipo de um nó no DOM (Document Object Model) usando a propriedade nodeType a partir de seus códigos JavaScript A propriedade nodeType, definida no World Wide Web Consortium (W3C) Document Object Model (DOM) Level 1, pode ser usada quando precisamos obter o tipo de um determinado nó (node) na hierarquia de elementos HTML no DOM (Document Object Model). Esta propriedade retorna um valor inteiro indicando o tipo de nó sendo testado. Os valores mais comuns são 1 (nó elemento) e 3 (nó texto). Veja uma página HTML na qual temos um parágrafo e um elemento span. Na primeira vez nós vamos obter uma referência ao parágrafo e testar o tipo do nó. Na segunda vez nós obtemos uma referência ao primeiro nó filho do elemento span, o que resultará em seu conteúdo sendo testado. 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> <script type="text/javascript"> function obterNodeType(){ // vamos obter uma referência ao parágrafo com o id "paragrafo" var elem = document.getElementById("paragrafo"); // vamos obter o tipo de nó deste elemento var tipo = elem.nodeType; // vamos mostrar o resultado window.alert("O tipo deste elemento é: " + tipo); // vamos obter uma referência ao span com o id "frase" elem = document.getElementById("frase"); // vamos obter o tipo de nó do primeiro filho deste elemento tipo = elem.firstChild.nodeType; // vamos mostrar o resultado window.alert("O tipo deste elemento é: " + tipo); } </script> </head> <body> <p id="paragrafo">Sou um parágrafo</p> <span id="frase">Veja esta frase</span> <br><button onclick="obterNodeType()">Obter tipo do nó (nodeType)</button> </body> </html> Note que esta propriedade é somente-leitura, ou seja, não podemos modificar seu valor em tempo de execução. A propriedade nodeType pode ser obtida a partir dos seguintes elementos: a, abbr, acronym, address, applet, area, b, base, basefont, bdo, bgsound, big, blink, blockquote, body, br, button, caption, center, cite, code, col, colgroup, comment, dd, del, dfn, dir, div, dl, dt, em, embed, fieldset, font, form, frame, frameset, h1, h2, h3, h4, h5, h6, head, hr, html, i, iframe, img, input:button, input:checkbox, input:file, input:hidden, input:image, input:password, input:radio, input:range, input:reset, input:search, input:submit, input:text, ins, isindex, kbd, keygen, label, legend, li, link, listing, map, marquee, menu, meta, nobr, noframes, noscript, object, ol, optgroup, option, p, param, plaintext, pre, q, rt, ruby, s, samp, script, select, small, span, strike, strong, style, sub, sup, table, tbody, td, textarea, tfoot, th, thead, title, tr, tt, u, ul, var, wbr, xml e xmp. Esta dica foi escrita e testada no Internet Explorer 8 e Firefox 3.6. |
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. |
JavaScript ::: Dicas & Truques ::: Miscelâneas |
Como adicionar um método isPar() ao objeto Number do JavaScript que indicará se um número é par ou imparQuantidade de visualizações: 7472 vezes |
Nesta dica mostrarei como é possível adicionar uma função isPar() ao objeto Number da linguagem JavaScript por meio do objeto prototype. Nossa função aceitará um valor numérico e retornará true se o valor for par, e false em caso contrário. 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>Estudos JavaScript</title> </head> <body> <script type="text/javascript"> // vamos adicionar uma nova função ao objeto Number Number.prototype.isPar = function(){ // retorna true se o número for par return (this % 2 == 0); } // agora vamos testar a nova função isPar() var numero = 13; // declara um valor numérico // vamos verificar se o número é par ou ímpar if(numero.isPar()){ document.write("O número informado é par."); } else{ document.write("O número informado NÃO é par."); } </script> </body> </html> Ao executar este código JavaScript nós teremos o seguinte resultado: O número informado NÃO é par. |
JavaScript ::: Dicas & Truques ::: Formulários |
Formulários HTML - Como marcar ou desmarcar todas as checkboxes de um formulário HTML de uma só vez usando JavaScriptQuantidade de visualizações: 18429 vezes |
Nesta dica mostrarei como é possível clicar em um botão (pode ser um link também) e chamar uma função JavaScript que marca ou desmarca todos os elementos HTML checkbox de uma só vez. Para isso usaremos o método getElementsByName() para retornar todas as checkbox e em seguida manipular sua propriedade checked. Veja a imagem abaixo: ![]() E agora o código HTML e JavaScript 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="teste"> <input type="checkbox" name="linguagem">Java <input type="checkbox" name="linguagem">Delphi <input type="checkbox" name="linguagem">C++ </form> <a href="javascript:marcar()">Marcar Todas</a> | <a href="javascript:desmarcar()">Desmarcar Todas</a> <script language="JavaScript"> function marcar(){ var boxes = document.getElementsByName("linguagem"); for(var i = 0; i < boxes.length; i++) boxes[i].checked = true; } function desmarcar(){ var boxes = document.getElementsByName("linguagem"); for(var i = 0; i < boxes.length; i++) boxes[i].checked = false; } </script> </body> </html> |
JavaScript ::: Dicas & Truques ::: Validação de Formulários |
Validação de formulários em JavaScript - Como validar CPF (com pontos e hífen) usando expressões regularesQuantidade de visualizações: 44261 vezes |
Nesta dica mostrarei como podemos escrever uma função JavaScript para a validação de números de CPF, dessa vez usando pontos e o hífen. Isso é interessante porque, muitas vezes, o usuário copia seu CPF de outro lugar e cola nas caixas de texto de nossas aplicações. A pagina HTML que contém o formulário se parece com a imagem abaixo: ![]() E agora veja o código JavaScript completo para o exemplo, incluindo o código HTML para a página: ---------------------------------------------------------------------- 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> <style type="text/css"> input {margin-bottom: 3px; margin-top: 3px} </style> <script type="text/javascript"> function validarCPF(){ var cpf = document.cadastro.cpf.value; var filtro = /^\d{3}.\d{3}.\d{3}-\d{2}$/i; if(!filtro.test(cpf)){ window.alert("CPF inválido. Tente novamente."); return false; } cpf = remove(cpf, "."); cpf = remove(cpf, "-"); if(cpf.length != 11 || cpf == "00000000000" || cpf == "11111111111" || cpf == "22222222222" || cpf == "33333333333" || cpf == "44444444444" || cpf == "55555555555" || cpf == "66666666666" || cpf == "77777777777" || cpf == "88888888888" || cpf == "99999999999"){ window.alert("CPF inválido. Tente novamente."); return false; } soma = 0; for(i = 0; i < 9; i++){ soma += parseInt(cpf.charAt(i)) * (10 - i); } resto = 11 - (soma % 11); if(resto == 10 || resto == 11){ resto = 0; } if(resto != parseInt(cpf.charAt(9))){ window.alert("CPF inválido. Tente novamente."); return false; } soma = 0; for(i = 0; i < 10; i ++){ soma += parseInt(cpf.charAt(i)) * (11 - i); } resto = 11 - (soma % 11); if(resto == 10 || resto == 11){ resto = 0; } if(resto != parseInt(cpf.charAt(10))){ window.alert("CPF inválido. Tente novamente."); return false; } window.alert("CPF válido. Muito obrigado."); return true; } function remove(str, sub) { i = str.indexOf(sub); r = ""; if (i == -1) return str; r += str.substring(0,i) + remove(str.substring(i + sub.length), sub); return r; } </script> </head> <body> <form name="cadastro" onSubmit="return validarCPF()"> Informe seu CPF (use os pontos e o hífen):<br> <input type="text" maxlength="14" name="cpf"> <input type="submit" value="Enviar!"> </form> </body> </html> |
JavaScript ::: Dicas & Truques ::: Data e Hora |
Como retornar a quantidade de dias para um determinado mês e ano em JavaScriptQuantidade de visualizações: 8730 vezes |
Sempre que estamos desenvolvendo aplicações de calendário ou outras tarefas envolvendo datas e horas em JavaScript nós precisamos saber quantos dias um determinado mês possui. Nesta dica que mostro como escrever uma função JavaScript chamada diasNoMes() que recebe um mês e um ano e retorna a quantidade de dias que tal mês possui. 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 mês e ano e retorna // a quantidade de dias no mês informado function diasNoMes(mes, ano){ return 32 - new Date(ano, mes, 32).getDate(); } // o mês começa com 0 (Fevereiro = 1) document.write("O mês informado possui " + diasNoMes(1, 2023) + " dias"); </script> </body> </html> Ao executar este código JavaScript nós teremos o seguinte resultado: O mês informado possui 28 dias |
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 |