Skip to content

Commit af6df2d

Browse files
wbrunowbruno
committed
Texto inicial para Estruturas de Controle e Laços
1 parent e7fe6dd commit af6df2d

File tree

2 files changed

+150
-0
lines changed

2 files changed

+150
-0
lines changed

‎_includes/submenu-js.html

+1
Original file line numberDiff line numberDiff line change
@@ -6,6 +6,7 @@ <h3><a href="#menu-js">JavaScript</a></h3>
66
<li><a href="variaveis.html">Variáveis</a></li>
77
<li><a href="operadores.html">Operadores</a></li>
88
<li><a href="funcoes.html">Funções</a></li>
9+
<li><a href="estruturas-de-controle-e-lacos.html">Estruturas de controle e Laços</a></li>
910
<li><a href="arrays.html">Arrays</a></li>
1011
<li><a href="objetos.html">Objetos</a></li>
1112
<li><a href="o-que-framework.html">O que é um framework?</a></li>

‎manual/js/estruturas-de-controle-e-lacos.html

+149
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,149 @@
1+
---
2+
layout: interna
3+
title: Estruturas de Controle e Laços
4+
---
5+
{% include submenu-js.html %}
6+
7+
<article class="content">
8+
<h1>Declarações (Statements)</h1>
9+
<h2>Entendendo declarações condicionais e laços de repetição</h2>
10+
11+
<h2>Controle de Fluxo</h2>
12+
<p>São comandos da linguagem que permitem desviar o fluxo do programa, dependendo de um teste.</p>
13+
14+
<h3>IF</h3>
15+
<p>A sintaxe do if é a seguinte:</p>
16+
<pre class="lang-javascript linenums prettyprint">
17+
if (&lt;teste>) {
18+
&lt;código a ser executado caso o teste seja verdadeiro>
19+
}
20+
</pre>
21+
22+
<p>Podemos por exemplo, executar um trecho do código, unicamente se uma variavel nossa for maior do que dez.</p>
23+
<pre class="lang-javascript linenums prettyprint">
24+
var x = 11;
25+
if (x > 10) {
26+
console.log('x é maior do que dez, corram para as colinas!');
27+
}
28+
</pre>
29+
30+
<p>Note, que o console.log não apareceria caso o valor de x fosse 10, 9, 8...</p>
31+
<pre class="lang-javascript linenums prettyprint">
32+
var x = 9;
33+
if (x > 10) {
34+
console.log('x é maior do que dez, corram para as colinas!');
35+
}
36+
console.log('Serei executado independente do if ser true ou false');
37+
</pre>
38+
39+
<h3>ELSE</h3>
40+
<p>o else é a contraparte do if. Não existe sem o if, pois ele não testa nada. Só é executado caso o teste do if retorne falso.</p>
41+
<pre class="lang-javascript linenums prettyprint">
42+
var x = 9;
43+
if (x > 10) {
44+
console.log('x é maior do que dez, corram para as colinas!');
45+
} else {
46+
console.log('Está tudo bem, podemos ficar tranquilos.');
47+
}
48+
</pre>
49+
50+
<h3>SWITCH</h3>
51+
<p>O switch é uma estrutura para testes simples, muito usado quando temos que testar uma mesma condição diversas vezes, pois é mais legível do que uma cadeia de else if.</p>
52+
<pre class="lang-javascript linenums prettyprint">
53+
var tinta = 'azul';
54+
switch (tinta) {
55+
case 'azul':
56+
console.log('Irei pintar o carro de azul');
57+
break;
58+
case 'amarela':
59+
console.log('Vou pintar a casa de amarelo');
60+
break;
61+
case 'verde':
62+
console.log('Vou pintar o chão da garagem de verde');
63+
break;
64+
default:
65+
console.log('Não vou pintar nada');
66+
break;
67+
}
68+
</pre>
69+
70+
<p>Note que para cada uma das cores eu farei uma coisa completamente diferente da outra. Caso a tinta seja verde, eu vou pintar o chão da garagem, mas se a tinha for amarela, irei pintar a casa.</p>
71+
72+
<p>Se fossemos reescrever esses testes com elseif, ficaria assim:</p>
73+
<pre class="lang-javascript linenums prettyprint">
74+
var tinta = 'azul';
75+
76+
if (tinta === 'azul') {
77+
console.log('Irei pintar o carro de azul');
78+
} else if(tinta === 'amarela') {
79+
console.log('Vou pintar a casa de amarelo');
80+
} else if (tinta === 'verde') {
81+
console.log('Vou pintar o chão da garagem de verde');
82+
} else {
83+
console.log('Não vou pintar nada');
84+
}
85+
</pre>
86+
<p>Fica melhor com o switch, ne?!</p>
87+
88+
<h2>Laços de repetição (loops)</h2>
89+
<p>Se existe uma coisa que os computadores são muito bons é em executar uma coisa várias vezes. Desde que saibamos o que queremos que o computador faça. Felizmente, para não precisamos repetir inúmeras vezes a invocação de uma função ou certo código, existe os loops (laços de repetição).</p>
90+
91+
<h3>FOR</h3>
92+
<p>Formado por três partes: inicialização, condição e incremento. A sintaxe é:</p>
93+
<pre class="lang-javascript linenums prettyprint">
94+
for (var i = 0; i &lt;= 10; i++) {
95+
//código a ser executado até a condição se tornar falsa
96+
}
97+
</pre>
98+
99+
<h3>FOR IN</h3>
100+
<p>É utilizado quando não sabemos quantas vezes temos que interar sobre um array ou objeto.</p>
101+
<pre class="lang-javascript linenums prettyprint">
102+
var arr = [1,2,3];
103+
for(var n in arr) {
104+
console.log(n);
105+
}
106+
</pre>
107+
108+
<h3>FOREACH</h3>
109+
<p>Utilizamos o <code>foreach</code> quando queremos percorrer as propriedades de um objeto ou os itens de um array, sem precisamos nos preocupar em contar quantos são.</p>
110+
<pre class="lang-javascript linenums prettyprint">
111+
var arr = [1,2,3];
112+
arr.forEach(function(each){
113+
console.log(each);
114+
});
115+
</pre>
116+
117+
<h3>WHILE</h3>
118+
<p>Funciona basicamente igual ao for, e é possível sempre trocar o for() por um while(). Escolhemos um ou outro pela clareza do que estamos fazendo. Geralmente preferimos utilizar o loop for() para interar com contadores e loops while() até que alguma condição mude (de true para false, por exemplo).</p>
119+
<pre class="lang-javascript linenums prettyprint">
120+
var x = true;
121+
while(x) {
122+
console.log('Jane Doe');
123+
x = false;
124+
}
125+
</pre>
126+
127+
<p>Nesse caso acima, o console.log será executado uma única vez, pois eu altero para false a variavel x, logo na primeira interação do laço. Mas eu poderia ter feito algo assim:</p>
128+
<pre class="lang-javascript linenums prettyprint">
129+
var i = 1,
130+
x = 2;
131+
132+
while(x &lt; 20) {
133+
x = x + (x * i);
134+
135+
console.log('O valor atual de x é: ' + x);
136+
i++;
137+
}
138+
</pre>
139+
140+
<h3>DO WHILE</h3>
141+
<p>Segue o mesmo princípio do while, mas o corpo é sempre executado pelo menos uma vez, independente da condição, pois primeiro ele faz <b>do</b> e depois testa a condição.</p>
142+
<pre class="lang-javascript linenums prettyprint">
143+
do {
144+
console.log('Jane Doe');
145+
} while(false);
146+
</pre>
147+
<p>Apesar da condição já começar como falsa, veremos a string "Jane Doe" uma vez no console do browser.</p>
148+
149+
</article>

0 commit comments

Comments
 (0)