Você está aqui: JavaScript ::: Dicas & Truques ::: Strings e Caracteres

Como converter uma string em um valor inteiro em JavaScript usando a função parseInt()

Quantidade de visualizações: 26571 vezes

Nesta dica mostrarei como podemos usar a função parseInt() do JavaScript para transformar uma string em um valor inteiro. Esse procedimento é necessário quando estamos efetuando cálculos com valores vindos de campos de formulários.

Veja a página HTML completa para o exemplo:

----------------------------------------------------------------------
Se precisar de ajuda com o código abaixo, pode me chamar
no WhatsApp +55 (62) 98553-6711 (Osmar)
----------------------------------------------------------------------

<!doctype html>
<html>
<head>
  <title>Strings em JavaScript</title>
</head>
<body>

<script type="text/javascript">
  var string1 = "110";
  var string2 = "Arquivo";
  var string3 = "65,54";
 
  document.write(parseInt(string1) + "<br>");
  document.write(parseInt(string2) + "<br>");
  document.write(parseInt(string3));  
</script>
  
</body>
</html>

Ao executar este código JavaScript nós teremos o seguinte resultado:

110
NaN
65

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 JavaScript

Quantidade de visualizações: 2138 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 ::: 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 Linear

Quantidade de visualizações: 4678 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 com o código abaixo, pode me chamar
no WhatsApp +55 (62) 98553-6711 (Osmar)
----------------------------------------------------------------------

<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 ::: Data e Hora

Como usar o objeto Date em JavaScript - Curso de JavaScript para iniciantes

Quantidade de visualizações: 7329 vezes

O objeto Date é um tipo de dados embutido na linguagem JavaScript. Objetos Date são criados, em sua forma mais simples (construtor sem argumentos), da seguinte forma:

----------------------------------------------------------------------
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>

<script type="text/javascript">
  // vamos criar um novo objeto Date
  var hoje = new Date();

  // vamos exibir a representação deste objeto Date
  document.write("Data e hora atual: " + hoje);
</script>

</body>
</html>

Ao executarmos este código teremos um resultado parecido com:

Data e hora atual: Fri Mar 18 10:02:02 UTC-0300 2011

Note que a representação textual de um objeto Date é a data atual no formato curto (em inglês), as horas e a diferença em relação ao horário UTC (Universal Time Coordinated, sucessor do GMT - Greenwich Mean Time).

Uma vez criado um objeto Date, podemos usar vários de seus métodos para operar sobre seus valores de datas e horas. A maioria dos métodos serve simplesmente para obter ou definir os valores dos campos ano, mês, dia, horas, minutos, segundos e milisegundos, usando a hora local ou UTC. O método toString() e suas variantes nos permitem converter datas e horas para os formatos comumente exibidos aos usuários. Veja um exemplo:

----------------------------------------------------------------------
Se precisar de ajuda com o código abaixo, pode me chamar
no WhatsApp +55 (62) 98553-6711 (Osmar)
----------------------------------------------------------------------

<script type="text/javascript">
  // vamos criar um novo objeto Date
  var hoje = new Date();

  // vamos exibir a representação deste objeto Date
  document.write("Data e hora atual: " + hoje.toLocaleString());
</script>

Ao executarmos este código teremos um resultado parecido com:

Data e hora atual: sexta-feira, 18 de março de 2011 15:44:07

Aqui nós usamos o método toLocaleString() do objeto Date para exibir a data e hora de acordo com as configurações regionais do computador local. Os métodos getTime() e setTime() obtém ou definem a representação interna do objeto Date como o número de milisegundos decorridos desde a meia-noite do dia 1º de janeiro de 1970 (GMT). Neste formato padrão de milisegundos, a data e hora são representadas por um único inteiro, o que facilita os cálculos envolvendo datas e horas. O padrão ECMAScript exige que o objeto Date seja capaz de representar qualquer data e hora, na precisão de milisegundos, na faixa de 100 milhões de anos antes ou depois de 01/01/1970.

Desafios, Exercícios e Algoritmos Resolvidos de JavaScript

Como testar se uma string está vazia em JavaScript - Exercício Resolvido de JavaScript

Como somar dois números em JavaScript - O operador de adição da linguagem JavaScript - Exercícios Resolvidos de JavaScript

Como multiplicar dois números em JavaScript - O operador de multiplicação da linguagem JavaScript - Exercício Resolvido de JavaScript

Como testar se uma variável é do tipo string em JavaScript - Exercício Resolvido de JavaScript

Como subtrair dois números em JavaScript - O operador de subtração da linguagem JavaScript - Exercícios Resolvidos de JavaScript

Ler três números inteiros e indicar se eles estão em ordem crescente ou decrescente - Exercícios Resolvidos de JavaScript

Como encontrar o menor valor em um array de inteiros em JavaScript - Exercícios Resolvidos de JavaScript

Como testar se o argumento de uma função JavaScript é do tipo String - Exercícios Resolvidos de JavaScript

Veja mais Dicas e truques de JavaScript

Como retornar o ano com quatro dígitos em JavaScript usando a função getFullYear() do objeto Date - Datas e horas em JavaScript

Como chamar o método toString de um array

Como converter uma string para letras maiúsculas em JavaScript usando a função toUpperCase() do objeto String - JavaScript para iniciantes

Usando o método getElementsByName() do objeto document para obter uma coleção de elementos HTML com o mesmo nome (atributo name)

Como retornar o dia da semana em JavaScript no formato Domingo, Segunda-feira, Terça-feira, etc

Como adicionar novas opções (elementos option) a um elemento select usando o método add() da coleção options

Como detectar se JavaScript está desabilitado e direcionar o browser para outra página

Remover espaços no início e fim de uma string

Como retornar o tamanho de uma string em JavaScript usando a propriedade length do objeto String

Como calcular porcentagem em JavaScript - Como efetuar cálculos de porcentagem em JavaScript

Dicas e truques de outras linguagens

Java - Como adicionar todos os elementos de uma ArrayList ou coleção à uma outra ArrayList do Java usando o método addAll()

Java - Java para iniciantes - Como usar a classe Console da linguagem Java

C# - Como converter um tipo string para um tipo decimal em C# usando o método Parse() da classe Decimal

PHP - Como verificar se um ano é bissexto usando PHP

Java - Estruturas de dados em Java - Como criar uma lista singularmente ligada, inserindo e exibindo os valores contidos em cada nó

PHP - Como excluir um arquivo ou imagem em PHP usando a função unlink()

Java - Como retornar a quantidade de palavras em uma string Java usando um objeto da classe StringTokenizer

Rust - Como somar os elementos de um array em Rust

Python - Como formatar valores de ponto-flutuante com uma determinada quantidade de zeros à esquerda em Python

Python - Exercícios Resolvidos de Python - Como calcular salário líquido em Python - Calculando o salário líquido de um professor

Códigos Fonte

Programa de Gestão Financeira Controle de Contas a Pagar e a Receber com Cadastro de Clientes e Fornecedores

Software de Gestão Financeira com código fonte em PHP, MySQL, Bootstrap, jQuery - Inclui cadastro de clientes, fornecedores e ticket de atendimento
Diga 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 funcionalidades
Tenha 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
2º lugar: Python
3º lugar: C#
4º lugar: PHP
5º lugar: Delphi
6º lugar: C
7º lugar: JavaScript
8º lugar: C++
9º lugar: VB.NET
10º lugar: Ruby

Você está aqui: JavaScript ::: Dicas & Truques ::: Strings e Caracteres

Como converter uma string em um valor inteiro em JavaScript usando a função parseInt()

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 JavaScript

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 Linear

JavaScript ::: Dicas & Truques ::: Data e Hora

Como usar o objeto Date em JavaScript - Curso de JavaScript para iniciantes

Questões de Concurso para Engenharia Civil

Exercícios Resolvidos

Bancos de Dados

Questões de Concurso

Frameworks

Projetos e Códigos Fonte

Especializações

Calculadoras

Ferramentas

Todas as Linguagens, Frameworks, Biliotecas e Bancos de Dados

Compre pelo WhatsApp: +55 (062) 98553-6711

E-Book 650 Dicas e Truques de Python - Com comentários em Português

PDF COM 1.200 PÁGINAS

Apenas R$ 32,90