 |
|
||||
Você está aqui: JavaScript ::: Fundamentos da Linguagem ::: Estruturas de Controle |
Apostila de JavaScript - Como usar o laço for da linguagem JavaScriptQuantidade de visualizações: 7931 vezes |
O laço for (também chamado de loop for ou laço para) é usado quando queremos repetir uma instrução ou um conjunto de instruções um determinado número de vezes. Este laço é composto de três partes: inicialização, teste de continuídade e incremento ou decremento da variável de controle. 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
----------------------------------------------------------------------
for(inicialização; teste; incremento/decremento){
instrução ou conjunto de instruções
}
Na parte da inicialização nós podemos inicializar a variável a ser usada para controlar a quantidade de repetições do laço. Na parte do teste de continuídade nós avaliamos uma condição boolean (verdadeiro/falso) para determinar se o laço deve ser interrompido ou continuar sua execução. Na parte de incremento/decremento nós incrementamos ou decrementamos o valor da variável de controle. Veja um trecho de código no qual usamos o laço for 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">
for(var i = 0; i <= 10; i++){
document.write(i + "<br>");
}
</script>
</body>
</html>
Este código exibirá o seguinte resultado: 0 1 2 3 4 5 6 7 8 9 10 Veja que a condição de continuídade do laço é o valor da variável i menor ou igual a 10. Eis agora uma modificação deste código que conta 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">
for(var i = 10; i >= 0; i--){
document.write(i + "<br>");
}
</script>
</body>
</html>
Agora o código exibirá o seguinte resultado: 10 9 8 7 6 5 4 3 2 1 0 Agora que já vimos um exemplo do uso deste laço, é importante saber quando e quantas vezes as três partes de um laço for são executadas: a) A parte de inicialização é executada apenas uma vez, ou seja, na entrada da estrutura do laço. b) O teste de continuídade é feito ANTES de cada repetição (iteração) do laço. Se o teste de continuída não resultar satisfatório já na primeira repetição, as instruções contidas no laço não serão executadas e o fluxo do código continuará após sua chave de fechamento. c) A parte de incremento/decremento da variável de controle é feita DEPOIS de cada repetição do laço. Com exceção do teste de continuídade, as demais partes de um laço for podem conter mais de uma instrução. Quando isso acontece nós as separamos usando vírgulas. Veja 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
----------------------------------------------------------------------
<html>
<head>
<title>Estudos JavaScript</title>
</head>
<body>
<script type="text/javascript">
for(var i = 0, j = 2; i <= 10; i++, j = j + 3){
document.write("i = " + i + "; j = " + j + "<br>");
}
</script>
</body>
</html>
Ao executar este código teremos o seguinte resultado: i = 0; j = 2 i = 1; j = 5 i = 2; j = 8 i = 3; j = 11 i = 4; j = 14 i = 5; j = 17 i = 6; j = 20 i = 7; j = 23 i = 8; j = 26 i = 9; j = 29 i = 10; j = 32 Esta dica foi escrita e testada no Internet Explorer 8 e Firefox 3.6. |
 Link para compartilhar na Internet ou com seus amigos: |
JavaScript ::: Dicas & Truques ::: Trigonometria - Funções Trigonométricas |
Como calcular o comprimento da hipotenusa em JavaScript dadas as medidas do cateto oposto e do cateto adjascenteQuantidade de visualizações: 900 vezes |
Nesta dica mostrarei como é possível usar a linguagem JavaScript para retornar o comprimento da hipotenusa dadas as medidas do cateto oposto e do cateto adjascente. Vamos começar analisando a imagem a seguir: Veja que, nessa imagem, eu já coloquei os comprimentos da hipotenusa, do cateto oposto e do cateto adjascente. Para facilitar a conferência dos cálculos, eu coloquei também os ângulos theta (que alguns livros chamam de alfa) e beta já devidamente calculados. Então, sabendo que o quadrado da hipotenusa é igual à soma dos quadrados dos catetos (Teorema de Pitógoras): \[c^2 = a^2 + b^2\] Tudo que temos a fazer a converter esta fórmula para código JavaScript. 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">
var a = 20; // medida do cateto oposto
var b = 30; // medida do cateto adjascente
// agora vamos calcular o comprimento da hipotenusa
var c = Math.sqrt(Math.pow(a, 2) + Math.pow(b, 2));
// e mostramos o resultado
document.writeln("O comprimento da hipotenusa é: " + c);
</script>
</body>
</html>
Ao executar este código JavaScript nós teremos o seguinte resultado: O comprimento da hipotenusa é: 36.05551275463989 Como podemos ver, o resultado retornado com o código JavaScript confere com os valores da imagem apresentada. |
JavaScript ::: Dicas & Truques ::: Strings e Caracteres |
Como converter uma string para letras maiúsculas em JavaScript usando a função toUpperCase() do objeto String - JavaScript para iniciantesQuantidade de visualizações: 26 vezes |
|
A função toUpperCase() do objeto String da linguagem JavaScript nos permite transformar todos os caracteres de uma palavra, frase ou texto em letras maiúsculas. 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">
var frase = "Veja Esta Frase.";
document.writeln(frase);
frase = frase.toUpperCase();
document.writeln("<br>" + frase);
</script>
</body>
</html>
Ao executarmos este código nós teremos o seguinte resultado: Veja Esta Frase. VEJA ESTA FRASE. |
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 ::: Arrays e Matrix (Vetores e Matrizes) |
Como remover o primeiro elemento de um array em JavaScript - Como usar a função shift() do objeto Array do JavaScriptQuantidade de visualizações: 8638 vezes |
|
Neste dica mostrarei como usar o método shift() do objeto Array da linguagem JavaScript para remover e retornar o primeiro elemento de um vetor. A ação de remover o primeiro elemento, ou seja, o elemento do topo do vetor é muito usada na construção da estrutura de dados pilha. Veja o código completo, incluindo a página HTML que permite executar 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>
<meta charset="utf-8">
<title>Estudos JavaScript</title>
</head>
<body>
<script language="javascript">
// vamos declarar e instanciar um vetor com 5 elementos
var valores = new Array(1, 2, 3, 4, 5);
document.write("Valores no vetor: " + valores + "<br>");
// vamos remover o primeiro elemento
var primeiro = valores.shift();
document.write("Removendo o primeiro elemento: " +
primeiro + "<br>");
document.write("Valores no vetor: " + valores);
</script>
</body>
</html>
Ao abrir esta página HTML nós teremos o seguinte resultado: Valores no vetor: 1,2,3,4,5 Removendo o primeiro elemento: 1 Valores no vetor: 2,3,4,5 |
JavaScript ::: Dicas & Truques ::: Strings e Caracteres |
Como retornar o tamanho de uma string em JavaScript usando a propriedade length do objeto StringQuantidade de visualizações: 154 vezes |
|
Em várias situações nós precisamos obter a quantidade de caracteres, ou seja, o tamanho de uma palavra, frase ou texto em JavaScript. Para isso nós podemos usar a propriedade length do objeto String. A propriedade length do objeto String da linguagem JavaScript nos retorna um valor inteiro representando a quantidade de caracteres na string, incluindo espaços em branco e pontuações. Veja o código JavaScript 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>Estudos JavaScript</title>
</head>
<body>
<script type="text/javascript">
// vamos declarar uma nova string
var frase = "JavaScript é bom demais";
// agora vamos obter o tamanho da string
var tam = frase.length;
// e mostramos o resultado
window.alert("Esta string possui " + tam
+ " caracteres.");
</script>
</body>
</html>
Ao abrir esta página HTML no navegador nós teremos uma mensagem window.alert() com o seguinte conteúdo: Esta string possui 23 caracteres. |
JavaScript ::: Dicas & Truques ::: Rotinas de Conversão |
JavaScript para iniciantes - Como converter uma string em um valor numérico usando o método Number() do JavaScriptQuantidade de visualizações: 23753 vezes |
|
Algumas vezes nós precisamos converter um texto inserido pelo usuário em um valor numérico. Se sabemos que o valor é inteiro, podemos usar Number.parseInt(), enquanto, se soubermos que o valor inserido é um decimal, podemos usar Number.parseFlot(). No entanto, se estivermos na dúvida, pode usar somente a função Number(), pois ela tentará converter a string para um valor numérico (inteiro ou de ponto-flutuante) e, em caso de falha, retornará NaN (Not a Number, não é um número). 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">
var valor = "95,23";
valor = Number(valor);
document.write("O resultado da conversão é: "
+ valor);
</script>
</body>
</html>
Ao executar este código nós teremos o seguinte resultado: O resultado da conversão é: NaN Experimente trocar "95,23" por "95.23" e veja como a conversão de string para número ocorre sem problemas. |
JavaScript ::: Dicas & Truques ::: Matemática e Estatística |
Como calcular raiz quadrada usando o método sqrt() do objeto Math do JavaScriptQuantidade de visualizações: 15213 vezes |
|
Em várias situações, principalmente quando estamos desenvolvendo códigos para aplicações financeiras, nós precisamos calcular a raiz quadrada de um determinado valor numérico. Para isso nós podemos usar a função sqrt() do objeto Math da linguagem JavaScript. Esta função recebe um valor numérico (inteiro ou real) e desenvolve também um valor numérico. Veja um exemplo de 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>Estudando JavaScript</title>
</head>
<body>
<script type="text/javascript">
var numero = 9;
var raiz = Math.sqrt(numero);
document.write("A raiz quadrada de " + numero + " é " +
raiz);
</script>
</body>
</html>
Ao executar este código JavaScript nós teremos o seguinte resultado: A raiz quadrada de 9 é 3 |
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 JavaScriptQuantidade de visualizações: 2238 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 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 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 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 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. |
Vamos testar seus conhecimentos em Java |
Analise o seguinte código Javadouble a = 0.0 / 0; System.out.println(a); Qual é o resultado de sua execução? A) Infinity B) NaN C) Uma exceção java.lang.ArithmeticException: / by zero D) 0 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 O primeiro passo para você entender uma rede de distribuição de água (RDA) é conhecer as duas formas nas quais diferentes condutos podem se associar: em série ou em paralelo. Quanto aos condutos em série e paralelo pode-se dizer que as afirmações a seguir: I) Para manter a vazão constante, a velocidade do escoamento se altera, sendo inversamente proporcional à área. Assim, se a área da seção transversal aumenta, a velocidade diminui, e vice-versa. II) O que você precisa saber em uma associação de condutos em paralelo é que existe uma perda de carga entre A e B, ou seja, o início e final de um segmento. Essa perda de carga é constante, independentemente do trecho pelo qual o escoamento flui. III) Quando em paralelo, a vazão que parte do nó A se divide em função das características da tubulação e do escoamento, como diâmetro, rugosidade e velocidade, quando chega em B, houve alteração nesta vazão a variação da velocidade diferenciada em cada um dos caminhos ao qual fora dividida. Pode-se dizer que: A) I e III estão corretas B) Somente III está correta C) Somente I está correta D) I e II estão corretas E) Todas estão corretas Verificar Resposta Estudar Cards Todas as Questões |
Vamos testar seus conhecimentos em Hidrologia |
| Como é chamado o processo em que a água passa do estado líquido para o estado sólido no meio atmosférico? A) Infiltração. B) Condensação. C) Evapotranspiração. D) Transpiração. E) Precipitação. Verificar Resposta Estudar Cards Todas as Questões |
Vamos testar seus conhecimentos em Fundações |
| Fundações profundas A grande vantagem das estacas moldadas in solo em relação às pré-moldadas é permitir que o comprimento estritamente necessário seja concretado. O tipo de fundação profunda constituída por concreto, moldada in loco e executada por meio de trado contínuo e injeção de concreto pela própria haste do trado, é a: A) estaca escavada mecanicamente. B) estaca injetada. C) estaca hélice contínua. D) estaca Franki. E) estaca-raiz. Verificar Resposta Estudar Cards Todas as Questões |
Vamos testar seus conhecimentos em |
| Cálculo de vigas-parede As armaduras das vigas-parede sofrem variação a depender da região de aplicação das cargas, se em sua face superior ou em sua face superior. A área de aço longitudinal (tração) necessária calculada, considerando aço CA-50, para uma viga-parede biapoiada com vão de 3,8m, altura de 2,0m, espessura de 15cm e sujeita a carga distribuída aplicada em sua face superior de 40kN/m é: A) 1,58cm2. B) 1,64cm2. C) 1,97cm2. D) 2,11cm2. E) 2,35cm2. 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 |
