JavaScript tutorials-from Getting started to mastering (7)

Source: Internet
Author: User
Tags date format object contains implement valid window
javascript| Tutorial javascript windows and input and output

JavaScript is an object-based scripting language, and its input and output is done through objects. Where the input can be done through a Window object, and the output can be achieved by means of a Document object.

One, window and input and output
Take a look at the following example:
<HTML>
<Head>
<script languaga= "JavaScript" >
Var test=window.prompt ("Please enter data:");
document.write (test+ "javascript input and output example");
</script>
</Head>
</HTML>
where Window.prompt () is a Window object's method, its basic function is, when loading the Web page, displays a "OK" and "Cancel" dialog box on the screen, lets you output the data. Document.writle is a method of document object, its basic function is to implement the output display of Web page. See Figure 1 below.

Figure 1

1. Window objects
This object includes many useful properties, methods, and event drivers that programmers can use to control various aspects of the browser window display, such as dialog boxes, frames, and so on. The following points should be noted in use:
This object corresponds to the <Body> and <FrameSet> two identifiers in the HTML document;
Both onload and onunload are window object attributes;
You can refer to a Window object directly in a JavaScript script. Such as:
Window.alert ("Window object Input Method")
You can use the following format directly:
Alert ("Window object Input Method")
 
2, the Window object event-driven
Window objects are loaded into the Web document event onload and uninstall OnUnload event. Start and stop updating documents for document loading and stopping loading.

3, the Window object method
Window objects are used primarily to provide information or to enter data and create a new window.
Create a new window open ()
You can create a new window by using the window.open (parameter table) method. The parameter table provides the main features of the window and the naming of the document and the window.
dialog box with OK button
The alert () method creates a dialog box with an OK button.
dialog box with OK and Cancel buttons
The Confirm () method provides programmers with a dialog box with two buttons.
dialog box with input information
The prompt () method allows the user to enter information in the dialog box and use the default value, which is the basic format as follows prompt ("Prompt", default value).
 
4, properties in the Window object
The properties in a Window object are primarily used to refer to various windows and frames that exist in the browser, with the following main attributes:
(1) Frames the number of frames in the document
Frames (frame) as a window to implement a separate operation, plays a very useful role in the use of the following points:
The Frames property is referenced in the order of the HTML identity <Frames>, which contains the total number of frames in a window.
The frame itself is already a class of windows that inherits all of the properties and methods of the Window object.
(2) parent indicates the current window or frame.
(3) Defaultstatus: The default state, whose value is displayed in the status bar of the window.
(4) Status: Contains the current information in the frame in the document window.
(5) Top: Includes a window that implements all of the subordinate Windows.
(6) Windows. Refers to the current window
(7) Self: Refers to the current window.
 
5. Output stream and Document object
In the JavaScript Document object, an output stream is provided to show the closing, elimination, and opening of HTML pages.
(1) Create new document open () method
Use Document.open () to create a new window or open the document within the specified command window. Because the Window object is the parent object that is loaded, we do not need to join the Window object when invoking its properties or methods. Example with window. Open () is the same as open ().
Open a basic format for a window:
window. Open ("URL", "Window name", "Window Properties")
The Window property parameter is separated by a comma by a string list item that indicates the properties for the newly created window. See table 7-1 for the following.

Table 7-1

Parameters

Set Value

Meaning

Toolbar

Yes/no

Establish or not establish a standard tool bar

Location

Yes/no

Establish or do not establish a location input field

Directions

Yes/no

Establish or not create a standard directory button

Status

Yes/no

Establish or not establish a status bar

MenuBar

Yes/no

Create or not create a menu bar

ScrollBar

Yes/no

Create or do not create a scroll bar

Revisable

Yes/no

Can I change the window size

Width

Yes/no

To determine the width of a window

Height

yes/

Determines the height of the window.

 
When you use the open () method, you need to be aware of the following points.
Typically, a document is open in the browser window. Therefore, there is no need to create a new document for the output.
After you finish writing to the Web document, use or call the Close () method to turn off the output stream.
When you open a new stream by using open (), you can specify a valid document type for the document, including text/html, Text/gif, Text/xim, Text/plugin, and so on.
(2) write (), writeln () output display.
This method is mainly used to display output information on a Web page. In practical use, attention should be paid to the following points:
The only difference between writeln () and write () is the addition of a newline in the end.
In order to display its output information normally, you must indicate the <pre> </Pre> tag to tell the editor.
The output document type, which can be determined by valid legitimate text types in the browser.
(3) Closing the document flow close ()
In implementing multiple Document objects, you must use Close () to shut down an object before you can open another document object.
(4) Clear the contents of the document clean ()
Use this method to clear the contents of a document that is already open.

second, simple input, output examples
In JavaScript, you can easily implement input and output information and interact with users.

1, the input of JavaScript information
By using the Window object method provided in JavaScript prompt (), you can complete the input of the information. This method provides the easiest way to enter information, and its basic format is as follows:
Window.prompt ("Hint letter", predetermined input information);
This method first pops a dialog box in the browser window, allowing the user to enter the information themselves. Once the input is complete, the value of the information entered by the user is returned. Cases:
Test=prompt ("Please enter data:", "This is a JavaScript")
actually prompt () is a method of the Window object. Because the object used by default is the Window object, Windows objects can be omitted and not written.
 
2, Output display
Each language must provide an output display of the information data. JavaScript, too, provides several methods for displaying the output of information. More commonly used are window.alert (), document.write and Document.writln () methods.
1), document.write () method and Document.writeln () method
Document is an object in JavaScript that encapsulates a number of useful methods in it, where write () and Writeln () are methods for outputting text information directly to the browser window.
document.write ();
Document.writeln ();
Description
The Write () and Writeln () methods are used to output text strings to the browser window.
The only difference is that the Writeln () method automatically adds a return character after the text.
 
2), Window.alert () output
In JavaScript for the convenience of information output, JavaScript provides a separate dialog box information output ─alert () method.
The alert () method is a method of the Window object, so you do not need to write the window object name when you use it, but you can use it directly. Its main purpose is to generate warning messages or prompt the user when the output is used, and to continue executing other scripting programs once the user presses the "OK" button. Cases:
<HTML>
<HEAD>
<TITLE></TITLE>
</HEAD>
<BODY>
<script Language = "JavaScript" >
Alert ("This is a JavaScript test program");
</Script>
</BODY>
</HTML>

 
3), the use of input, output methods to achieve interaction
In JavaScript, you can use the prompt () method and the Write () method to interact with Web page users. For example, here is an example of an implementation interaction.
Test7_1.htm
<HTML>
<HEAD>
<TITLE></TITLE>
</HEAD>
<BODY>
<script language= "JavaScript" >
<!--Hide from other Browsers
document.write ("<H1> Examples of interactions");
My=prompt ("Please enter data:");
document.write (my+ "</H1>");
Document.close ();
Stop hiding from other browsers-->
</Script>
</BODY>
</HTML>

From the above program you can see:
Interaction can be achieved through the write () and prompt () methods.
You can use HTML to identify language code in the JavaScript scripting language. To achieve mixed programming. Where <H1> and <Br> are HTML identifiers.

Iii. Examples
The following procedure shows you how long you are staying on the homepage.
Test7_2.htm
<form name= "MyForm" >
&LT;TD valign= "Top" width= "135" > You are here to stay:
<input name= "Clock" size= "8" value= "Online Time" ></td>
</form>
<script language= "JavaScript" >
var id, IM = 0, is = 1;
start = new Date ();
function Go ()
{
now = new Date ();
Time = (Now.gettime ()-start.gettime ())/1000;
Time = Math.floor (time);
is = time% 60;
IM = Math.floor (TIME/60);
if (is < 10)
Document.myform.clock.value = "" + IM + "Minute 0" + is + "seconds";
Else
Document.myform.clock.value = "" + IM + "min" + is + "seconds";
id = settimeout ("Go ()", 1000);
}
Go ();
</script>
</body>

The results in the browser are shown in Figure 2.

Figure 1



Related Article

Contact Us

The content source of this page is from Internet, which doesn't represent Alibaba Cloud's opinion; products and services mentioned on that page don't have any relationship with Alibaba Cloud. If the content of the page makes you feel confusing, please write us an email, we will handle the problem within 5 days after receiving your email.

If you find any instances of plagiarism from the community, please send an email to: info-contact@alibabacloud.com and provide relevant evidence. A staff member will contact you within 5 working days.

A Free Trial That Lets You Build Big!

Start building with 50+ products and up to 12 months usage for Elastic Compute Service

  • Sales Support

    1 on 1 presale consultation

  • After-Sales Support

    24/7 Technical Support 6 Free Tickets per Quarter Faster Response

  • Alibaba Cloud offers highly flexible support services tailored to meet your exact needs.