Você está aqui: JavaScript ::: Fundamentos da Linguagem ::: Estruturas de Controle

JavaScript para iniciantes - Como testar condições em JavaScript usando if e if..else

Quantidade de visualizações: 8764 vezes
As estruturas if (se) e if..else (se..senão) da linguagem JavaScript são muito usadas quando queremos testar condições em nossos códigos e, dependendo do resultado do teste, efetuar desvios na execução das instruções. Veja a sintáxe do if:

if(condição){
  // instrução ou conjunto de instruções
}

A condição é qualquer teste que resulte em um valor boolean (true ou false). Veja, por exemplo, como podemos verificar se um valor é maior que 10:

<html>
<head>
<title>Estudos JavaScript</title>
</head>
<body>

<script type="text/javascript">
  var valor = 15;

  // vamos testar se o valor é maior que 10
  if(valor > 10){
    document.write("O valor é maior que 10.");
  }  
</script>

</body>
</html>

Ao executarmos este código, o texto "O valor é maior que 10." será exibido na tela. Porém, também gostaríamos de exibir uma mensagem caso o valor não for maior que 10. Para isso podemos usar a cláusula else. Veja:

<script type="text/javascript">
  var valor = 5;

  // vamos testar se o valor é maior que 10
  if(valor > 10){
    document.write("O valor é maior que 10.");
  }
  else{
    document.write("O valor NÃO é maior que 10.");
  }  
</script>

Ao executarmos o exemplo novamente, o texto "O valor NÃO é maior que 10." será exibido. Isso aconteceu porque, ao não satisfazer a condição do if, o fluxo de código caiu na cláusula else.

Há algumas situações nas quais precisamos testar muitas condições ao mesmo tempo. Assim, além do if e else podemos empregar também a cláusula else if (senão se). Veja um exemplo no qual expandimos o exemplo anterior para testar se o valor é maior, menor ou igual a 10:

<html>
<head>
<title>Estudos JavaScript</title>
</head>
<body>

<script type="text/javascript">
  var valor = 5;

  // vamos testar se o valor é maior, menor ou igual a 10
  if(valor > 10){
    document.write("O valor é maior que 10.");
  }
  else if(valor < 10){
    document.write("O valor é menor que 10.");
  }
  else{
    document.write("O valor é igual a 10.");
  }  
</script>

</body>
</html>

Esta dica foi escrita e testada no Internet Explorer 8 e Firefox 3.6.


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 JavaScript

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

<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 ::: DOM (Document Object Model) ::: document Object

Como usar o método getElementById() do objeto document para localizar um elemento HTML baseado em seu id usando JavaScript

Quantidade de visualizações: 10421 vezes
O método getElementById() do objeto document é usado quando queremos localizar e retornar um elemento HTML baseado no valor de sua propriedade id. Veja um exemplo:

<html>
<head>
<title>Estudos JavaScript</title>

<script type="text/javascript">
  function localizarElemento(){
    // vamos localizar o elemento com o id "aviso"
    var elem = document.getElementById("aviso");

    // o elemento foi localizado
    if(elem != null){
      // vamos definir o conteúdo do elemento encontrado    
      elem.innerHTML = "Vejam este texto.";
    }
    else{
      window.alert("O elemento HTML pesquisado não foi encontrado."); 
    }
  }
</script>

</head>
<body>

<button onclick="localizarElemento()">Localizar DIV</button>

<div id="aviso"></div>

</body>
</html>

Execute o exemplo e clique no botão. Você verá que o texto do elemento div com o id "aviso" é definido para "Vejam este texto.". Note que, se o elemento não for encontrado, o retorno do método getElementById() é null na maioria dos browsers.

Há algumas observações interessantes em relação ao método getElementById() do objeto document:

a) Se o valor da propriedade id pertencer a uma coleção, ou seja, se houver mais de um elemento HTML com o mesmo id, o método retornará o primeiro elemento na coleção.

b) No Firefox, Opera, Google Chrome, Safari e Internet Explorer (IE) a partir da versão 8, o método getElementById() é case-sensitive (sensível a maiúsculas e minúsculas) em relação ao valor da propriedade id. Nas versões anteriores do IE isso não acontecia.


JavaScript ::: Dicas & Truques ::: Trigonometria - Funções Trigonométricas

JavaScript para Trigonometria - Como converter radianos em graus na linguagem JavaScript

Quantidade de visualizações: 1184 vezes
Todas os métodos e funções trigonométricas em JavaScript recebem seus argumentos em radianos, em vez de graus. Um exemplo disso é a função sin() do objeto Math. Esta função recebe o ângulo em radianos e retorna o seu seno.

No entanto, há momentos nos quais precisamos retornar alguns valores como graus. Para isso é importante sabermos fazer a conversão de radianos para graus. Veja a fórmula abaixo:

\[Graus = Radianos \times \frac{180}{\pi}\]

Agora veja como esta fórmula pode ser escrita em código JavaScript (incluindo a página HTML):

<!doctype html>
<html>
<head>
 <title>Estudos JavaScript</title>
</head>
<body>

<script type="text/javascript">
   // valor em radianos
   var radianos = 1.5;
   // obtém o valor em graus
   var graus = radianos * (180 / Math.PI);
   // mostra o resultado
   document.writeln(radianos + " radianos convertidos para " +
     "graus é " + graus);
</script>

</body>
</html>

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

1.5 radianos convertidos para graus é 85.94366926962348

Para fins de memorização, 1 radiano equivale a 57,2957795 graus.


JavaScript ::: ECMAScript 5 - JavaScript 5 - ES5 - ECMAScript 2009 ::: Arrays e Matrix (Vetores e Matrizes)

Como usar o método some() para verificar se ao menos um elemento de um array satisfaz uma condição

Quantidade de visualizações: 696 vezes
O método some(), adicionado à linguagem JavaScript por meio do ECMAScript 5 (JavaScript 5, ECMAScript 2009, ES5) pode ser usado quando queremos verificar se um ou mais elementos de um vetor satisfaz uma determinada condição.

Este método nos permite fornecer uma função de callback que será chamada para cada um dos elementos do vetor. E o retorno do método some() é um valor true se ao menos um dos elementos passar no teste e false em caso contrário. Tão logo o valor true seja satisfeito, a função some() encerra sua execução imediatamente.

Veja um exemplo no qual testamos se AO MENOS um elemento do array é maior que 70:

<script type="text/javascript">
  function testar(valor, indice, vetor){
    if(valor > 70){
      return true;
    }
  }  

  var valores = new Array(21, 50, 30, 71, 12, 3);
  // vamos verificar se AO MENOS um valor é maior que 70
  var res = valores.some(testar);  
  window.alert("Alguns valores passaram no teste: " + res);
</script>

Aqui o resultado será true, pois o valor 71 passou no teste. É importante observar que, assim que a função de callback retorna true pela primeira vez, o método some() já abandona sua execução.

Uma função passada para o método some() pode conter os seguintes argumentos (nessa mesma ordem):

a) O valor do item;
b) O índice do item (opcional);
c) O vetor a partir do qual o método some() está sendo chamado (opcional).

Como última observação, o método some() não modifica o array original.


JavaScript ::: Dicas & Truques ::: Validação de Formulários

Validação de formulários em JavaScript - Como validar um formulário contendo usuário e senha em JavaScript

Quantidade de visualizações: 26314 vezes
A validação de formulários em JavaScript é uma das primeiras técnicas que devemos aprender, pois ela avita a perda de tempo que ocorre com a validação somente do lado do servidor (não se esqueça: as duas são necessárias).

Ao validar no navegador, o usuário já vai as devidas correções sem ter que esperar o processamento de seus dados para, só então, ser comunicado de que alguma informação está incorreta.

Assim, nesta dica, mostrarei como podemos validar um nome de usuário e senha em JavaScript. Deixei o exemplo bem mais, mas você pode melhorá-lo, adicionando até expressões regulares para ampliar as situações que podem ocorrer.

O código abaixo vai gerar o seguinte formulário HTML:



E agora o código completo para o exemplo:

<html>
<head>
<title>Estudando JavaScript</title>

<style type="text/css">
  input {margin-bottom: 3px; margin-top: 3px}
</style>

<script language="JavaScript">
  function validar(){
    // só permitirá o envio se os dados forem fornecidos
    if(document.login.nome.value == ""){
      alert("Forneça o nome do usuário");
      document.login.nome.focus();
      return false;
    }
    else if(document.login.senha.value == ""){
      alert("Forneça a senha do usuário");
      document.login.senha.focus();
      return false;
    }
    else{
      return true;
    }
  }
</script>

</head>
<body>

<form name="login" action="gravar.php" method="post" 
     onsubmit="return validar()">
  Usuário:<br>
  <input type="text" id="nome" name="nome"><br>
  Senha:<br>
  <input type="password" id="senha" name="senha"><br>
  <input type="submit" value="Entrar!">
</form>
 
</body>
</html>



Veja mais Dicas e truques de JavaScript

Dicas e truques de outras linguagens

Quem Somos

Osmar J. Silva
WhatsApp +55 (062) 98553-6711

Goiânia-GO
Full Stack Developer, Professional Java Developer, PHP, C/C++, Python Programmer, wxWidgets Professional C++ Programmer, Freelance Programmer. Formado em Ciência da Computação pela UNIP (Universidade Paulista Campus Goiânia) e cursando Engenharia Elétrica pela PUC-Goiás. Possuo conhecimentos avançados de Java, Python, JavaScript, C, C++, PHP, C#, VB.NET, Delphi, Android, Perl, e várias tecnologias que envolvem o desenvolvimento web, desktop, front-end e back-end. Atuo há mais de 15 anos como programador freelancer, atendendo clientes no Brasil, Portugal, Argentina e vários outros paises.
Entre em contato comigo para, juntos, vermos em que posso contribuir para resolver ou agilizar o desenvolvimento de seus códigos.
José de Angelis
WhatsApp +55 (062) 98243-1195

Goiânia-GO
Formado em Sistemas de Informação pela Faculdade Delta, Pós graduado em Engenharia de Software (PUC MINAS), Pós graduado Marketing Digital (IGTI) com ênfase em Growth Hacking. Mais de 15 anos de experiência em programação Web. Marketing Digital focado em desempenho, desenvolvimento de estratégia competitiva, analise de concorrência, SEO, webvitals, e Adwords, Métricas de retorno. Especialista Google Certificado desde 2011 Possui domínio nas linguagens PHP, C#, JavaScript, MySQL e frameworks Laravel, jQuery, flutter. Atualmente aluno de mestrado em Ciência da Computação (UFG)
Não basta ter um site. É necessário ter um site que é localizado e converte usuários em clientes. Se sua página não faz isso, Fale comigo e vamos fazer uma analise e conseguir resultados mais satisfatórios..

Linguagens Mais Populares

1º lugar: Java
2º lugar: C#
3º lugar: PHP
4º lugar: Delphi
5º lugar: Python
6º lugar: JavaScript
7º lugar: C
8º lugar: C++
9º lugar: VB.NET
10º lugar: JSP (Java Server Pages)



© 2021 Arquivo de Códigos - Todos os direitos reservados | Versión en Español | Versão em Português