HTML Lesson 3

Course introduction on the third day

In the previous course, we learned:

Add JavaScript to your HTML page.
How to store and use user input with dialog boxes and variables.
How to use JavaScript to write HTML

How to Use the if-then statement to select JavaScript.
How to use a link event to create a webpage that responds to user actions.
How to make basic image exchanges.

We have learned a lot so far, but we have not explained how it works. For example
The example Doc ument. monkey_image.src I demonstrated in the first lesson
=
"Happy_monkey.gif" replaces the image named "happy_monkey.gif"
The image named monkey_image. But what is the temporary upload Doc ument?
. SRC
Where did it come from? Similarly, you can see document. writeln ("monkey ").
But why is it document. writeln instead
Writeln?

The above answer can be found in the file target module (JavaScript document
Object
Model, abbreviated as DOM. Dom is a javascript webpage.
Is the core of all JavaScript programming.
In this article, we will mainly discuss Dom.
We will teach you the rest of the computer programming basics. After the next two lessons, you will
All the main ideas and syntaxes of JavaScript. What else needs to be learned is:
Details, skills, and how to avoid confusion.

Now let's embark on the DOM path. First, we will learn how to open and
Operate on the new browser window.

Window operations
Before learning how to open a window in Javascript, you should know how
Open it in HTML. Among most popular browsers,
You can use an href
Statement to open a new window, for example, click this connection to open another window.

HTML is as follows:

Clicking on <
Href = "yer_new_window.html"
Target = "yer_new_window"> This
Link </a> will open another window.

It is important to know that the window opened by the target link is named
"Yer_new_window"
Accompanied window. Once you have
"Yer_new_window" is the target's herf. Disable it first. Regardless of you
All links set in the URL will open the original window. Want to know what it means
Think? Click here to open another html
Page

The purpose of this lesson is to call the target name. In this example, the window name is yer_new_window.

Now that we have simply reviewed the href goal
Open the window in JavaScript.

Page 3: window operations in Javascript

Window-opening applications in HTML are extremely common, but there are also some defects.
Determines what the window looks like. You cannot control the size and
Style. Fortunately, JavaScript gives you such control.

Let's take a look at the reason:

Window. Open ("url", "name", "Features ");

This statement opens a window with the first parameter URL you used for calling. Here
It is a URL, which can be actually written
"Http:
// Www.hotwired.com/webmonkey/ "or something similar.

The second parameter is the window name. This is like the name we see on the page, as shown in figure
If you open a window with the same name, the URL
To the window that has been opened.

The third parameter, features, is a window with different features. This is
Optional parameters. We will first exercise on the first two parameters.

Here are some examples of opening a window using JavaScript.

Page 4: Example of window operations in Javascript
Click the following three links to see what will happen. Note that
Do not close any of them before opening them.

This is the window named javascript_1.

Window named javascript_2.

Here is another HTML page that will go to javascript_1.

The first line of the statement:

<A href = "#"

Onclick = "too many open('javascript_window_1.html ', 'javascript _ 1');"> here's

A window named javascript_1 </a>.

When you click this link, the name is javascript_1.
Window to open, out of which
The cript_window_1.html webpage is displayed. The features parameter is optional.
We will ignore it first.

Note that onclick is used to open the window. You don't have
Put window. open () in onclick to call the window, which is easy to do. I
You will see the windows. open () example in the <SCRIPT> label.

The second example is almost the same as the first one. It just opens
Windows and calls to different HTML pages.

<A href = "#"

Onclick = "too many open('javascript_window_2.html ', 'javascript _ 2');"> here's

A window named javascript_2 </a>.

The third link puts a new HTML page in the first window. This is because you
The window to be opened and the first link are both named javascript_1.

<A href = "#"

Onclick = "too many open('javascript_window_3.html ', 'javascript _ 1');"> here's

Another HTML page going into javascript_1 </a>.

The magic is about to begin. Let's add the third parameter features to see if it will happen.
What.

OK. Let's join windows features and try again!

Windows features

The third parameter in window. open () is a set of window representations you want.
Features. If you are not completely sure about your parameters, use the default value of your browser.
.

However, if you specify some feature parameters, the window will use the parameter settings
. Feature parameters appear in a comma-separated sequence.

For example, if you write:

Window. Open ("some_url", "window_name", "location, menubar ");

You will get a defined URL, window name and menu bar (file, edit, etc)
. Note that do not add any spaces to the string, which will make some browsing
Error.

Let's take a look at another example:

Window. Open ("some_url", "window_name", "location, Height = 100, width = 100 ");

This will open a window with a height of 100 pixels each. Remember not to use strings again
Add spaces.

Here is a set of feature parameters that can be referenced in strings:

Menubar (menu bar)
This is a function line referenced in most software applications. Generally
File, edit, and other entries.
Status)

This is the information bar located in the lower part of your window. When your mouse moves to a chain
When connected, the URL of the link appears on this status bar. You can
The content displayed on the status bar is moved to a rolling marquee.
. I do not play
Here is an example for you. If you want to know how to do this, try to solve it yourself!
Scrollbars)
Scroll bars are allowed when necessary.

Resizable (reset)
When retuned parameters are listed, the window can be retuned. Note its spelling. I
It is often wrong.
Width)

The window width expressed in pixels.
Height)
The window height expressed in pixels.
Toolbar)
Home
Button, among others.
Browser toolbar, including the back button, forward button, stop button, and Home button.
Location)

You can enter the Region of the URL browser.
Directories (indicator Area)
For example, in the Netscape browser, "what's new ,"
"What's cool," and so on.
Here are some examples of different types of windows.

Once you understand these examples, you can implement them in some of your windows.
Details of the learning window

Javascript file target Module

Now that you know how to open the window as you wish
Learn how to operate in the window. Before that, you need to learn
Javascript file target module (DOM). First, let's learn something
Standard-oriented programming ".

Overview target-oriented programming

Target-oriented programming-especially for the Javascript version-
Is easier to handle
. The main purpose is to organize information based on the target organization. One of the advantages of JavaScript
It includes a built-in target library. For example, a window is an object. None
When I mention a default JavaScript library object, I will use a large
Write (window ). The specific case (specific window) will be in lower case.

All objects have attributes used to describe them. Some of the properties of the window object are
(That is, the word on the status bar), the URL of the window file, and the window file
Itself. (Including single words, graphs, and hypertext links in Windows .)

In JavaScript, the default window object is window.
How to obtain the properties of the default window.

VaR the_status = Window. status;

This is to say: Find the window
To call the status attribute to the variable.
The_status. The status feature of the window contains the words that appear on the status bar.
Sentence. You can also set it in advance, like this:

Window. Status = "I'm monkeying around! ";

This is an example of using status bars.

Operations on status bars
Place your mouse over the two links below and open your eyes to see
What happened on the status bar?

Who do we love?
Why do we love them?

Here is the source code of the first line:

<A href = "#" onmouseover = "window. Status = 'monkeys! '; "> Who
Do we
Love? </A>

"When you move the mouse over this link, the status bar changes ."

Target Method
In addition to attributes, the object also has a "method ". The "method" is known to the object.
How the process operates. For example, the window knows how to open another window:
Window. Open ("url," "name," "Features "). It tells Javascript
Use the window open method to open a new window.

Therefore, in the above example, an object's "method" is also called its
Feature method: Object Name, period, and then method. The main difference is that
The formula is followed by a pair of Circular Arc with parameters. Even when the method is not adjusted
When parameters are used, the Circular Arc must also exist. Do you still remember this?

VaR italic_hippy = hippy_monkey.italics ();

Yes! A string is actually an object, and italics () is a character object.
Parameters.

You have read some examples of window methods but have not understood them yet. Dialog Box call
Alert and prompt are actually window objects. If you call:

Window. Alert ("Viva la primate! ");

You will see the dialog box and read "Viva la primate !" We can try it directly.
This flickering window.

It looks silly. For better results, see call other windows.

Window Communication

Although it doesn't make much sense to blur or focus a window, sometimes you do
You need to move another window to the foreground. To use JavaScript to implement a window
You need to make the most reference to the window.

Get and use a window reference

First, I open a window and assign a reference to it:

VaR new_window =
Window. Open ("hello.html", "html_name", "width = 200, Height = 200 ");

This statement opens a small window and assigns it to the variable new_window.
Window reference. A variable can contain numbers, strings, or objects.
In this example, the object is a window. Now the new_window variable is
It can be used as in the current window. You can
New_window call method.

The following statement is an example of how to call new_window:

New_zookeeper blur ();

It serves the same purpose as window. Blur () in the previous article.

Now let's take a look at the two links that move the new window to the foreground or to the background:

<A href = "#" onmouseover = "new_00000000focus ();"> bring
It
Forward </a>

<A href = "#" onmouseover = "new_00000000blur ();"> put
It
Backward </a>
Javascript DOM

Now we know that JavaScript includes default objects, such as Windows,
An object has an attribute used to describe an object. A method is used to describe an object and take action.
.

The property page of an object can be an object. For example, a window has an attribute called
Document, which is used to reference the actual HTML file in the window. This document
Attribute itself is an object. When talking about image replacement
Swap)
We have seen such an example. You can use the following statement for image replacement:

<A href = "#"
Onmouseover = "commandid document.the_image.src='button_d.gif ';"> change </a>

The preceding statement means: Find the document attribute of the window and find
The_imagesrc.pdf and set it to ~button_d.gif. Write in this way
Because Windows is an object)
Is an object, while an image (images) page in a document is an object.

It seems complicated, but its structure is clear. Javascript file pair
Image module (Document Object
Model) describes the hierarchical relationship between objects.

In this tutorial, we only see part of the level relationship. Make Your webpage have
Most of the exciting techniques involve file objects. File object content is very rich
Rich, in fact, we should open a dedicated tutorial to solve this problem. In this course, we

We will focus on other properties of the window.

Other window features
Other window properties are mainly related to split windows. If you do not know how to use the score
Cut the window. Please read it firstArticle"Frames are a picnic ."
.

In JavaScript, the processing method for split windows is the same as that for window destruction.
You only need to use JavaScript to modify the appearance of another window in one exit,
You can change the appearance of different split windows. But remember, in a window
In fact, each split window is treated as another window, because
The cut window can contain smaller split windows. That is to say, you have the highest
Layer window, which contains the first level split window.
Is a new small window, which can contain smaller split windows. But I

It does not need to be so complicated.

The following is an example of a split window created using JavaScript.

First, it is the window frame of the split window:

<Frameset rows = "25%, *">
<Frame
Src = "frames_example_controls.html" name = "control_frame">
<Frame
Src = "blank.html" name = "target_frame">
</Frameset>

This is the same as a normal split window. Remember the items in the window
Name the split window. The first split window is named control_frame,
Its
Contains the HTML webpage added with JavaScript. The second split window
Src = "#", which does not contain anything.

Next, let's take a look at the content in the control_frame window. Only
Key line in:

<A href = "#"
Onclick = "top.target_frame.doc ument. writeln ('Monkey

Do! <Br> '); "> Monkey See </a>

When this statement is executed, JavaScript starts from the top level of the window level.
Contains the window boxes of the split window, from which the Division called target_frame is found.
Window, because the split window is also a window, it has a window file
(Document) attribute. Javascript finds its document attribute and calls
Use the writeln () method. The execution result is to write "monkey" in the file.

Do! ". Writeln () is the method of the file object, so we
Must write document. writeln (), not just
Writeln ().>

The window and Frame Tree Structure

In the previous example, we used the built-in variable top, which always indicates segmentation.
The browser window at the highest level. If you plan to split the window from the highest level
You can use the top variable.

Another built-in variable is parent,
Refers to the parent window that contains the current split window.
Port. If there is a split window in a window, and a split window in it
Contains a split window, the split window at Layer 2nd can be cited using the parent variable
Split the window with its parent. A little complicated,
The following code is compiled using JavaScript:
Example of a smaller split window.>

Do it yourself

In the assignments assigned to you, you need to use the assignments in Lesson 2nd to build your browsing
. The document object has an attribute called bgcolor.
Set the background color in the body tag to set the background color of the Document Object.
You can use a name, as shown in figure
"Red," or hexadecimal value such as "# ff0000 ".

Next, use the split window and necessary JavaScript to compile Homework 3.>

Day 3 Review
In today's course, we have the following content: window, split window, file object
Document Object Model and object-oriented programming.

You learned how to open your own window.
Window affects another window; communication between Split windows; Object Attributes
And methods; domain object module (Domain
Object Model ).

A browser window is an object that contains other objects. After learning about Dom
After the level relationship of the image, you can control the features in the HTML page.
.