SoFunction
Updated on 2025-04-06

JavaScript Basic Tutorial (Lesson 4) Page 2/2


This is an array I defined:
    var monkeys = new Array("mattmarg","wendy","kristin","tim","aaron", "luke");
    var kittyphile = new Array("wendy","ruby","roscoe","tim");
    var discophile = new Array("mattmarg", "john travolta", "wendy");
    var happy = new Array("tim", "wendy","stimpy", "aaron");
    var cranky = new Array("ren", "mattmarg","luke");
With the definition of these arrays, the arrayIntersect function is given, and we can easily find those net monkeys who love disco: dancing net monkeys.
Noting that although John Travolta likes disco, he is not in the monkeys' request list, he is not just dancing. To call the function value, he can do this:
    <a href="#" onClick="arrayIntersect('dancing monkeys',monkeys,discophile);">dancing monkeys</a>
This is a function with 3 parameters: a name representing the intersection, the first array, and the second array. It is also easy to find that cat-loving net monkeys are named cat-loving net monkeys.
Take a look at the source code:
    <a href="#" onClick="arrayIntersect('monkeys who love cats',monkeys,kittyphile);">cat-loving monkeys</a>
Let's take a look at the arrayIntersect function itself:
    function arrayIntersect(intersect_name, array_1, array_2)
    {
        var the_list = "";
        for (loop_1=0; loop_1<array_1.length; loop_1++)
        {
            for (loop_2=0; loop_2<array_2.length; loop_2++)
            {
                if (array_1[loop_1] == array_2[loop_2])
                {
                    the_list = the_list + array_1[loop_1] + " ";
                }
            }
        }
        alert("the " + intersect_name + " are: "+ the_list);
    }
See if you have understood the loop in this example. The key is the first line of the function:
    function arrayIntersect(intersect_name, array_1, array_2)
Here is a function called arrayIntersect, which has 3 parameters. Just like the example above, each parameter is like a variable, assigned a value when the function is called. Therefore, when the function is called:
    arrayIntersect('dancing monkeys',monkeys,discophile);
The following assignments:
    intersect_name = 'dancing monkeys'
    array_1 = monkeys
    array_2 = discophile
The only thing to note is that you have to call the function with the correct number of parameters. If you call arrayIntersect like this:
    arrayIntersect(monkeys,discophile);
There will be an error. Try to see what errors will happen.
In any standard Javascript program, functions are basic components. Therefore, it is extremely important to understand how it works. Lesson 4 ends here.
There are two main parts for JavaScript: the language itself and its objects. In the syntax introduced in Lesson 2, we have studied variables, statements, and if
Statements, these are part of all programming languages. Now let’s learn the rest of the Java script syntax.
For JavaScript syntax, we only have three remaining problems to learn: loops, arrays and functions.
Let's start with the loop.
Sometimes you want to do the same thing repeatedly. You want to ask someone for a password, and you keep asking until you get the correct password. If you just want to give them a try twice
You can try it out like this:
    var the_password = "pass the wrench";
    var answer = prompt("What's the woyd?","");
    if (answer != the_password) {
        answer = prompt("What's the woyd?","");
        if (password != the_password) {
            ("You lose!<p>");
        } else {
            ("That's right!<p>");
        }
    } else {
        ("That's right!<p>");
    }
Unfortunately, if you can't help asking until you get the correct answer, the above approach doesn't work. If you want to ask four times instead of twice, then this is already
It's a very annoying thing. You will use four levels of if statements, which is by no means a good thing.
The best way to do similar things repeatedly is to use a loop. In this case, you can use a loop to continuously request passwords until this person
Until you say it. Here is an example of while loop working, the password is: pass the wrench.
    var password="pass the wrench";
    var answer;
    while (answer != password) 
    {
        answer = prompt("What's the woyd?","");
    }
In this typical Javascript, we start with a bivariate declaration:
    var password="pass the wrench";
    var answer;
Here we define the password as a string and we declare a variable called answer. You will understand why we have to declare an answer right away. The following lines are very important:
    while (answer != password) 
    {
        answer = prompt("What's the woyd?","");
    }
This is a while loop. The general format of the while loop is:
    while (some test is true)
    {
        do the stuff inside the curly braces
    }
The above lines indicate: "When answer is not equal to Password, execute the prompt command." This loop will continue to execute the statements in braces until the conditions are not true. If the word entered by the user is consistent with the password (i.e. Pass the wrench), the conditions are not true.
Since an error occurs on some browsers when performing a test like (answer!=password) on an undeclared variable, we must declare answer. Since answer will be assigned through a prompt scheme in the while loop, in our first loop, the answer will have no numeric value. Define it in advance and set its starting value to "".
Since loops are often used without definition, loops are often used to execute a set of statements for a specific number of times. In the next tutorial, use another loop to demonstrate how to do this.
We have seen a lot of requested X`S (What is X`S? I can't explain it clearly, the original text is - jsfan note). Now review it:
Step 1: Number of requests X`S
    var width = prompt("How many x's would you like? (1-10 is good)","5");
Next, declare some variables:
    var a_line="";
    var loop = 0;
Now, the key points:
    while (loop < width)
    {
        a_line = a_line + "x";
        loop=loop+1;
    }
That is to say: "When the variable loop is less than the requested X`S line width, add another X to the row and then add 1 to the loop value." The loop will continue to add one X to the row and the loop value
Add 1 until the loop is not less than the requested line width. Please see the following source code analysis:
first
a_line = " (because the initial value is "")
loop=0 (because the initial value is 0)
width=2 (value assigned by the user)
0 smaller than 2, so
a_line = a_line + "x", so a_line = "x"
loop=loop+1, so loop=1
Return to the loop:
The second time
    loop=1 
    width=2 
    a_line = "x" 
1 to 2, so
    a_line = a_line + "x", so now a_line = "xx" 
    loop=loop+1, so now loop = 2 
Return to the loop:
The third time
    loop=2 
    width=2 
    a_line = "xx" 
2 is not less than 2, so exit the loop and continue to execute downward:
Then:
    alert(a_line);
Start a warning dialog box.
This kind of loop application is so common that programmers have developed some simple ways to write conditional loops like this:
    while (loop < width)
    {
a_line += "x";  //equivalent to a_line = a_line + "x";
loop++;              //Equivalent to loop=loop+1;
    }
The first line, "x", means "add x by itself". If there is already a_number=5, it can be written as a_number+=3, that is, a_number=a_number+3. Programmers are so lazy.
Downward, loop++ means "add 1 by yourself". So loop++ is: loop=loop=1. It can also be written as loop+=1. This lazy behavior is very effective.
Just like more than one way to add 1 to a number, there are more than one way to write a loop. While loops are not the only loop mode, another popular loop is the for loop.
In the above example, the while loop can be written in the following form:
    var a_line="";
    var loop = 0;
    while (loop < width)
    {
        a_line += "x";
        loop++;
    }
It can also be written as For loop:
    var a_line="";
    for (loop=0; loop < width; loop++)
    {
        a_line += "x";
    }
The format of the for loop is:
    for (initial value; test; increment) 
    {
        do this stuff;
    }
In this way, the above for loop set loop=0 and continue to add 1 until loop<width, which is the same as the while loop in the previous example, only a few lines are missing. They all mean "add width x on a_line".
One thing we should understand before we use loops: loops can be nested. Here is an example of nested loops.
This is the program:
    var height = prompt("How high do you want the grid? (1-10 is good)","10");
    var width= prompt("How wide do you want the grid? (1-10 is good)","10");
    var a_line;
    var new_window = ("/webmonkey/98/04/files1a/","looper","width=400,height=400");
    new_window.("<h1>A Grid</h1>");
    for (height_loop=0; height_loop< height; height_loop++) 
    {
        a_line = "";
        for(height_loop=0; height_loop<height; height_loop++) 
        {
            a_line+="x";
        }
        new_window.(a_line + "<br>");
    }
After requesting height and width, open a new window and write a header for it to enter the for loop. The first for loop set a_line="". Try doing this example without using this line to see what happens. After initializing a_line, the program enters the next for loop. When the width reaches the desired value, create the X`S line and display it in a new window. These will happen height times.
Previous page12Read the full text