I ask you for a little patience, because this is cool.
The third thing is the Loop, but first I'll talk about the fourth, which is called a function, or, in some languages, a method. I'm going to call it a function.
You must have realized that a computer program is like a machine that you build with words and symbols to get a certain result.
Well, a function is a little machine inside the machine.
Fourth thing
Let's make a new html just like yesterday, call it anything, and create a new javascript file. Just don't forget that it has to be something dot js ( .js ), it has to be in the same folder and it has to have the name of this new JS file in the html, here:
<!doctype html>
<html>
<head>
<meta charset="utf-8">
<script src=" here is the name of the .js file, enclosed in quotes "></script>
<title>The title of the tab</title>
<head>
<body>
<h1> The larger text </h1>
<p>
The paragraph, or smaller text.
</p>
<body>
</html>
Right, and what are we going to put in the JS file?
That:
window.onload = function() {
window.console.log("I am a function");
}
Open the html through explorer and press F12. See?
Window.onload is a function that the browser calls when the page is opened. A machine within a machine. Now, inside this little machine, let's call others.
window.onload = function() {
wash("hair");
brush("hair");
brush("teeth");
}
Save and open the html again and press F12.
It gave an error message, because we did not define these functions, these machines, as we defined window.onload. Let's define them.
Keep the window.onload function as it is and write below:
wash = function(input) {
window.console.log("I am washing my " + input);
}
Input is what you put into the machine, the function parameter. So much so that we will define the brush function like this:
brush = function(input) {
window.console.log("I am brushing my " +input);
}
And, as we are passing different parameters, the result will be different. Open the file again and press F12.
See?
Following the Shampoo Rules
Now let's work inside the wash(“hair”) function, following the instructions for the shampoo. Let's erase what's inside it and leave it like this:
wash = function(input) {
wet(input);
apply("Shampoo");
rinse(input);
repeat();
}
Note that what we pass as input to the wash function, it will pass as input to the functions that are inside it.
Now, let's create these new machines. Underneath everything you wrote, complete it like this:
wet = function(input) {
window.console.log("I'm wetting my " + input);
}
apply = function(input) {
window.console.log("I am applying the " +input);
}
rinse = function(input) {
window.console.log("I'm rinsing my " + input);
}
Okay, what about the repeat function? Let's declare it like this:
repeat = function() {
wash("hair");
}
When we leave the parentheses in function() empty, it means that this function needs no input.
Now run the page again and press F12.
It saw? The computer got in some kind of a bug, because we told him to wash his hair forever. He entered in a Loop.
Third thing
But the shampoo people realized that it's not fair to make us wash our hair forever, so after the "repeat", they added: "if necessary".
We can also do something like this to get our program out of its infinite loop.
And for that we will use the language we learned in our last class, the conditional (“if”):
wash = function(input) {
wet(input);
apply("Shampoo");
rinse(input);
if ( necessay() ) {
repeat();
}
}
The necessary() function will be a little machine that answers yes or no.
Before creating it, let's declare a global variable. It is a variable that is initialized outside the function. If we declare a variable inside the function, it will only work inside the function and in the functions that are inside that function, and not in the functions that are “above” or in the program as a whole.
So go on top of everything, even before the window.onload() function and write:
var cleanness = 0;
It's the variable that tells us how much percent of the hair is clean.
Let's add the following line to the wash(input) function:
wash = function(input) {
wet(input);
apply("Shampoo");
rinse(input);
cleanness = cleanness + 20;
if (necessary()) {
repeat();
}
}
Weird phrase? We are not saying that cleaning, at the moment, is equal to cleaning plus 20, which would be really weird, we are giving it a new value: from now on, “cleaning” will be equal to the current value of “cleaning ” plus 20. If it was 0, now it's 20, if it was 20, now it's 40, and so on.
Now let's create the necessary() function below:
necessary = function() {
return ( cleanness < 100 );
}
It will return a yes or no. It will return the answer to the question: Is cleanliness less than 100? “<” means smaller.
So, at each turn of the loop, it increases the cleaning by 20 and checks if the value is still less than 100.
Now run the page. See? He knows that with each wash, cleanliness increases by 20 percent. So he only washed 5 times. It's already something.
A better way to loop
But that's not the most practical way to loop. We can delete the necessay() function and let the wash() function look like this:
wash = function(input) {
while (clearing < 100) {
wet(input);
apply("Shampoo");
rinse(input);
cleanness = cleanness + 50;
}
}
“While”. It is an expression that simply tells us that, as long as cleaning is less than 100, we must keep repeating everything between the { }.
In fact, we can even remove the cleaning variable from its global level (delete the part where we declared it above), and use it inside the wash function:
wash = function(input) {
var cleanness = 0;
while (cleanness < 100) {
wet(input);
apply("Shampoo");
rinse(input);
cleanness = cleanness + 50;
}
}
Ready. Run the page. I changed the number from 20 to 50. Now he washes his hair only twice. It is enough. That is, if is even necessary.
Until next time, when we'll talk a little more about loops.
