| Writing JavaScript Programming on Your Own |
To learn how to write JavaScript programming directly into HTML and use it
In the Session 11, we learned how to “read the JavaScript file into HTML and use it.” In this Session, we will learn how to write JavaScript programming directly to the relevant position in HTML and use it.
In the beginning, some of the notes to take when writing JavaScript programming are listed. Refer to this list when you encounter a problem such as “Program would not run, what should I do?”.
Some tips for the problem of program not running. → [Examples of frequent errors and notes] (in Japanese)
We now show you some examples to explain the programming. Try to solve the exercise problems while going through the following explanation.
Letting the Browser Display Characters
First, let’s create “Hello! World.”
“Hello! World” refers to the simplest form of program. This program has only the function to display “Hello! World” on the screen or window when it is executed, and is often used as an example to explain the basics of how to use the programming language.
Create a file with the following contents and save it on the desktop with a name of hello.html.
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<meta http-equiv="Content-Script-Type" content="text/javascript">
</head>
<body>
<script type="text/javascript">
document.write("Hello! World.");
</script>
</body>
</html>
When the file is created, open it by double-clicking.
If you have the characters displayed on the Web browser just as above, you did it right.
[Exercise 1] Instead of “Hello! World”, display “Hi, everybody!”.
→Exercise 1: [Check the result by the browser.] [See HTML tag.]
JavaScript with Variables
Next, modify the contents of <body> - <body> in hello.html, as follows.
blue color only to indicate emphasis and are irrelevant to the input work.)
<script type="text/javascript">
a = 7;
b = a + 5;
document.write(b);
</script>
→ [Check the result by the browser.] [See HTML tag.]
If you check the result of the modification by the browser, you will see the answer “12” being displayed.
Characters such as a and b used in this program are called “variables.” The “;” at the end is the symbol to show the end of a sentence.
a = 7;
The sentence shown above denotes that “the value of variable a is set to 7.”
b = a + 5;
The sentence shown above denotes that “the value of b is set at the result of adding 5 to the current value of a”.
The symbol “=“ is called a symbol (or operator) expressing substitution.
[Note] A sentence like the following is illegal. Consider the reason.
a + 5 = b;
→ The symbol (operator) “=” is a symbol (or an operator) expressing substitution. If the left-hand side is “a + 5”, you cannot determine what value you should substitute to b.
Have you guessed right?
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<meta http-equiv="Content-Script-Type" content="text/javascript">
</head>
<body>
<script type="text/javascript">
k = 7;
k = k + 1;
k = k + k;
document.write(k);
</script>
</body>
</html>
→ [Check the result by the browser.]
JavaScript with Variables That Are a Little Bit Complicated
Now let’s create a new file with a name of forloop.html.
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<meta http-equiv="Content-Script-Type" content="text/javascript">
</head>
<body>
<script type="text/javascript">
for(k = 1; k < 26; k = k + 1){
document.write(k);
}
</script>
</body>
</html>
This may look a little bit complicated, but we will explain the meaning later. First try to create forloop.html as instructed above, and give it a double-click.
Have you got a line of continuous numerals as above?
Since it looks difficult to read, shall we place a break at the end of each numeral for display?
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<meta http-equiv="Content-Script-Type" content="text/javascript">
</head>
<body>
<script type="text/javascript">
for(k = 1; k < 26; k = k + 1){
document.write(k);
document.write("<br>");
}
</script>
</body>
</html>
You only need to add one line shown in blue. This should display as below.
Let’s see briefly why we have this result. What we have here is the repetition structure as
for(item executed at first; condition to continue; item executed every time){ executed item 1; executed item 2; .... }
If you write this way, you will get
executed item 1;
executed item 2;
....
item executed every time
repeatedly so long as “condition to continue” holds.
The “item executed at first” is executed only oncebefore this repetition starts.
Since this program above can be written as
for(k = 1; k < 26; k = k + 1){ document.write(k); document.write("<br>"); }
k = 1 will be executed only once, and while k is less than 26,
document.write(k);
document.write("<br>");
will be executed while k is incremented by 1 each time. (This will be the way you should write without using the repetition structure.)
Note that the portion of
k = k + 1 can also be written as k++.
[Exercise 3] Create a program to display all even numbers from 2 to 40.
→ [Check the result by the browser.] [See HTML tag.]
With only the knowledge so far, you still cannot solve the basic assignment (Create a program displaying all integers from 1 to 1000 that are not divisible by 3).
Move on to next 2.2 Write the JavaScript programming on your own (2).