SoFunction
Updated on 2025-04-13

JavaScript Basic Tutorial (Lesson 3) Page 2/2


Now that you already know how to open a window as you wish, now start learning how to operate something in the window. Before this, you need to learn JavaScript's Document Object Model (DOM). First, let's learn a little "object-based programming".

Overview of object-based programming

Object-based programming - especially JavaScript version - is relatively easy to understand. Its main purpose is to organize information based on objects. One of the advantages of JavaScript is that it comes with a built-in object library. For example, a window is an object. Whenever I mention a default JavaScript library object, I will use uppercase (Window). A specific case (specific window) will be in lower case.

Objects have properties that describe them. Some of the properties of the window object are its name, (i.e. the words on the status bar), the URL of the window file, and the window file itself. (This includes single words, graphics and hypertext links in windows.)

The default window object in JavaScript is window. Here you can understand how you will get the properties of the default window.

    var the_status = ;

This means: find the status attribute called window and call it into the variable the_status. The status feature of the window contains the words and sentences that appear on the status bar. You can also set it in advance, like this:

     = "I'm monkeying around!";

This is an example of using status bars.

    <a href="#" onMouseOver="='Monkeys!';">Who do we love?</a>

This means: "When the mouse moves to this link, change the status bar."

Object method:
In addition to attributes, objects also have "methods". A "method" is a process known to the object to work. For example, a window knows how to open other windows:

("URL,""name,""features"). It tells Javascript to open a new window using the window open method.

Therefore, just like in the above example, an object's "method" is also called its way of obtaining a feature: object name, period, and then method. The main difference is that the method is always followed by a pair of parentheses containing method parameters. Even when the method does not call parameters, parentheses must be present. Remember this?

    var italic_hippy = hippy_monkey.italics();

Right! A string is actually an object, and italics() is a parameter of a character object.

You have looked at some examples of windowing methods but haven't understood it yet. Calling alert and prompt in dialog boxes is actually the way to window objects. If you call:

    ("Viva la primate!");

You will see the dialog box and read "Viva la primate!" We can directly try this flashing window.

It looks a bit stupid. For better results, please refer to calling other windows.
While it doesn't make much sense to blur or focus one window, sometimes you do need to move another window to the foreground. In order to use javascript to communicate between windows, you need a reference to that window.

Get and use a window reference

First, I open a window and give it a reference:

    var new_window = ("","html_name","width=200,height=200");

This statement opens a small window and assigns it to the variable new_window as a reference to the window. Variables can contain numbers and strings, or references to objects, in this case, an object is a window. Now the variable new_window can be used like the current window. You can call methods on new_window just like calling methods on windows.

The following statement is an example of calling a method to new_window:

    new_window.blur();

The effect it achieves is the same as in the previous article ().

Now let's take a look at the two links to move the new window to the front desk or to the back desk:

    <a href="#" onMouseOver="new_window.focus();">Bring it forward</a>

    <a href="#" onMouseOver="new_window.blur();">Put it backward</a>
Now we have learned that JavaScript includes default objects, such as windows, objects have properties used to describe objects, methods used to describe methods to take actions.

The property page of an object can be an object. For example: a window has a property called document, which is used to refer to the actual HTML file in the window. The document property itself is an object. When talking about image swap, we have seen such an example. You can use the following statement to replace the image:

    <a href="#" onMouseOver=".the_image.src='button_d.gif';">change</a>

The above statement means: find the document property of window, find the src property of the_image and set it to image button_d.gif. This is written because the window is an object, the files in the window are objects, and the images pages in the file are objects.

It seems complicated, but its structure is clear. JavaScript's Document Object Model describes the hierarchical relationship between objects.

In this tutorial, we only see a part of the hierarchy relationship. Most tips for making your web pages exciting and dynamic involve file objects. The file object content is very rich, and in fact, a tutorial should be specially designed to address this problem. In this course, we
We will focus on other properties of the window.

Other window properties are mainly related to splitting windows.

In JavaScript, the processing method of splitting windows is the same as other windows. You just need to use javascript to modify the appearance of another window in one exit, and you can change the appearance of each split window. But you have to remember, within a window
The individual partition windows of the partition window are actually treated as several additional windows, because the partition window can further contain smaller partition windows. That is to say, you have a window at the highest level that contains the first-level segmentation window. This segmentation window is actually a new small window, and the small window can contain smaller segmentation windows. But it usually doesn't need to be so complicated.

Below is an example of a split window made in javascript.

First, the window frames of the split window:

    <frameset rows="25%,*">
        <frame src="frames_example_controls.html" name="control_frame">
        <frame src="" name="target_frame">
    </frameset>

This is the same as ordinary split window frames. You must remember to name each divided window in the window frame. The first split window name is control_frame, which contains the HTML page that adds javascript. The second split window contains nothing.

Next, let’s take a look at the contents in the control_frame window. The following is just one of the key lines:

    <a href="#" onClick="top.target_frame.('Monkey do!<br>');">Monkey see</a>

When executing this statement, JavaScript starts from the highest level of the window level, which contains the window frame of the split window. From it, it finds a split window called target_frame. Since the split window is also a window, it has the file (document) attribute of the window. JavaScript finds its document property and calls the writeeln() method. The execution result is to write "Monkey do!" in the file. writeeln() is a method of file (document) object, so we have to write(), not just writeeln().

In the previous example, we used the built-in variable top, which always refers to the browser window at the highest level of the split window. If you plan to start executing commands from the highest level of the split window, you can use the top variable.

Another built-in variable is parent, which refers to the parent window that contains the current split window. If there is a split window in a window, and one of the split windows contains a split window, the second layer's split window can use the parent variable to refer to the parent partition window containing it.
Previous page12Read the full text