document.write (`

<style id="css"> </style>

  <header>
    <h1>Intro to Coding with <span>JavaScript</span></h1>
  </header>

  <nav id="nav"></nav>

  <main id="page-content">
    <h1>For loops</h1>

    <h2>What are for loops?</h2>
    <p>For loops allow you to repeat work without repeating code. For loops
    follow a pattern, generally being starting at a number, increasing or
    decreasing by a number, and stopping at a number. To write a 
    <code>for</code> loop, first type the <code>for</code> keyword, 
    and then provide three things in parentheses:</p>
    <pre><code>
    for (let lineX = 75; lineX <= 225; lineX += 75) {
      line(lineX, 0, lineX, height);
    }
    </code></pre>
    <p>What is each part doing?</p>
    <ol>
      <li><code>let lineX = 75;</code>: declaring the variable which starts
      the loop.</li>
      <li><code>lineX <= 225;</code>: the loop will keep running as long
      as this condition is true.</li>
      <li><code>lineX += 75;</code>: reassigning the variable after each
      iteration of the loop so it keeps advancing the pattern.</li>
    </ol>

    <p>At the start of each iteration, the condition will be checked again
    with the updated variable. If it is <code>true</code>, the body of the loop is
    executed again; if not, the loop exits and the program moves past
    it.</p>

    <h2>Uses of for loops (for us)</h2>
    <p>For loops make it easier to make more complicated patterns.
    Let's say you have a program which draws some lines:</p>

    <pre><code>
    function setup() {
      createCanvas(300, 300);
    }

    function draw() {
      background(100);
      stroke(255);

      line(30, 0, 30, height);
      line(60, 0, 60, height);
      line(90, 0, 90, height);
      line(120, 0, 120, height);
      line(150, 0, 150, height);
      line(180, 0, 180, height);
      line(210, 0, 210, height);
      line(240, 0, 240, height);
      line(270, 0, 270, height);
    }
    </code></pre>

    <p>It works, but a for loop would mean less typing for you, and code
    which is easier to parse, both by you and anyone reading your code.
    Notice that the first line has an x value of 30, which
    increases by 30 each step and ends at 270. This is a clear pattern,
    so we can use a for loop here very easily:</p>

    <pre><code>
    function setup() {
      createCanvas(300, 300);
    }

    function draw() {
      background(100);
      stroke(255);
      
      for (let lineX = 30; lineX <= 270; lineX += 30) {
        line(lineX, 0, lineX, height);
      }
    }
    </code></pre>

    <p>This produces the same thing in far less code. You can now expand
    it as much as you'd like, just by changing some variables. Here
    is a version with 99 lines:</p>

    <pre><code>
    function setup() {
      createCanvas(300, 300);
    }

    function draw() {
      background(100);
      stroke(255);

      for (let lineX = 3; lineX <= 297; lineX += 3) {
        line(lineX, 0, lineX, height);
      }
    }
    </code></pre>

    <h2>Nested for loops</h2>
    <p>You can put for loops inside of for loops. Here is code which
    draws 3 rows and 3 columns of circles:</p>

    <pre><code>
    function setup() {
      createCanvas(300, 300);
    }

    function draw() {
      background(100);

      for (let circleY = 75; circleY <= 225; circleY += 75) {
        for (let circleX = 75; circleX <= 225; circleX += 75) {
          circle(circleX, circleY, 50);
        }
      }
    }
    </code></pre>

    <p>In this example, the outer loop creates creates a circleY 
    variable and iterates three times. During each iteration of the outer 
    loop, the inner loop creates a circleX variable and iterates three 
    times.</p>

    <h2>Indexes</h2>
    <p>You can use index variables (usually named <code>i</code> or 
    <code>j</code>) when initialising a for loop instead of the variables
    which are used in the body of the loop. Here is the line example 
    again, using an index loop variable <code>i</code>:</p>

    <pre><code>
    function setup() {
      createCanvas(300, 300);
    }

    function draw() {
      background(100);
      stroke(255);
      
      for (let i = 1; i <= 9; i++) {
        let lineX = i * 30;
        line(lineX, 0, lineX, height);
      }
    }
    </code></pre>

    <p>This makes it easier to tell how many lines will be drawn by 
    the for loop, as well as making it easier to add more effects
    to the for loop:</p>

    <pre><code>
    function setup() {
      createCanvas(300, 300);
    }

    function draw() {
      background(100);
      stroke(255);
      
      for (let i = 1; i <= 9; i++) {
        strokeWeight(i * 2);

        let lineX = i * 30;
        line(lineX, 0, lineX, height);
      }
    }
    </code></pre>

  </main>
` );

$.getScript("/uploads/happycodingport/nav.js",  function()
{
  $("#nav").html(navhtml);
});
        
$.getScript("/uploads/happycodingport/css.js",  function()
{
  $("#css").html(hcpcss);
});