What this lesson is about?
In this lesson we will learn about three things:
1.      the advantages of writing our JavaScript functions in a separate file - we will even use files/functions we did not write.
2.      creating loops, repeating instructions.
3.      adding elements to our page from JavaScript code.

New methods in this lesson:
createElement(a tagname) – this method of the document object is used to add new HTML elements to the document from the JavaScript code.

setAttribute(name of the attribute, value) – this is a method of every element object. Every HTML element is seen as object from the JavaScript code. We can set the value of an attribute. We used attributes before, they are the properties added to the tags, in the HTML code.

appendChild(an element created) – this is a method of every element object like the setAttribute method. It is used to add an element inside another one. The element referred in the parameter, is the one added to the one of whose method we use.

removechild(a reference to an element) – this method, like the appendChild can be used with every element object. The element referred as parameter will be removed from the inside of the element to which the method belongs.

Writing JavaScript codes in external files:
Using external files to store JavaScript code is useful, because the file can be referenced from different HTML files. An HTML file can use multiple JS files.
Separating script and HTML code, adds readability to our work.
The way to reference a JS file: <script src="file_name.js"> </script>

How to insert a quotation mark in JavaScript texts:
If we want to add quotation marks to texts we may face problems, because constant texts are put by default in quotations marks. We can vary simple and double marks but we may need to use \ symbols to mark the quotation marks we need to really appear in the text. This is called escape character. (Read more here: https://en.wikipedia.org/wiki/Escape_character)

Example on texts with quotations:

In the example above, clicking on the colored section a button appears. The HTML code for the button is constructed inside of a function.

To the quotation marks to be displayed, we added the \ symbol, the other quotation marks indicate the beginning or the end of the strings.

The result can be viewed in the browser and the code can be inspected to see the actual content. (Use right click.) Only the marked quotation marks appear.

The for loop:
If we need to repeat some instructions multiple times, we can use loops.
The for loop is mostly used, when the number of repeats is known, but it can be molded to every occasion.

The form of the for loop we will use:

for (i=1; i<=nr; i++) {
statements;
}

As we enter the loop, the index variable (not necessary to be i), get an initial value (not necessary to be 1). Afterwards, repeats the statements and checks after every repetition if the condition is true to continue, and changes the index value (with one, in the for above, but that can be changed too). If the condition gets false, the loop stops.

Example on usage of the for loop:

In the example above you find two for loops to see how they work. The CSS settings are not visible on this picture, so we concentrate on the JavaScript code.

The first loop repeats 10 times adding the value of the i variable to the content of the first section of the website. The values of the i variable are in order: 1 2 3 4 5 6 7 8 9 10.

The content of the segment is cleared, because there can be more clicks on a segment and it will fill up.

The second loop is similar to the first one, but shows us that we can complete the HTML code from JavaScript: we add ten buttons from the function and even define an alert box to be shown when clicked on these buttons.

You can see the content after evaluating the JavaScript code when inspecting the page.

The while loop:

This is another way to repeat instructions is the while loop.
Compared to the for loop, the while needs only 1 condition to decide until when to repeat the instructions, enclosed in the brackets.

The form of the while loop:

while (condition) {
         instructions;
}

If the condition is true we repeat and if we find it is false, we stop the loop.

Example on the while loop:

In the example above the first while loop has the exact same effect as our first for loop. We needed to add the initial value for the i variable and the instruction to increase it separately. The initial value is defined outside of the loop, the increasing is repeated.

The second loop, adds 10 random numbers to the second section. Each clicking on the green rectangle produces 10 new values between 1 and 101.

Example on adding/removing new sections from JS code:

In the example above, you can see how to properly add/remove new elements to/from a document. In one of the previous examples we have just “written” them (some buttons) inside of an existing element. Adding elements to the innerHTML as texts works, but it can disable event listeners working already, it is complicated to elegantly remove one of the elements or adding new one, not disturbing the ones already there.

We use the randcolor function from the 24. lesson.

The newdiv function is called when the first button is clicked on. Creates a new div element referred subsequently by the d variable. We add a value to the id property so that the div can be found later by the deldiv function. The id is unique because we use a number in it which is always increased as a new element is required.

With the appenChild method we add the div to the document, and then we add a random color as background color to see better which section is the newly added or deleted.

The deldiv function removes the last section from the document. We could remove any of them, but it is slightly complicated for a first example. The removeChild method is used to make the last div disappear.