Window Object
Creating a window
To create a window use the following syntax:
[Window_object_name=]open("url","Window name"[,"attribute"])
The URL parameter specifies what content appears in the new window. If you specify a value, the browser attempts to locate and display the specified document.
Specifying Window Attributes
The windowAttributs parameter is important as you display windows because it lets you customize the look of the window you are opening. The windowAttributes parameter is optional; not including it gives you a window identical to the current one with respect to attributes.
The width and height attributes specify the dimensions of the window in pixels. The remaining attributes are set by using Boolean values: True values are either 1, yes, or the attribute alone ; false values are either 0,no, or more simply, leaving it out altogether. For example, if you want to display the new window with only a toolbar and menu bar, you use the following line:
newWindow=window.open("", "myWindow", "toolbar=1,menubar=1")
The following syntaxes are also valid:
newWindow=window.open("", "myWindow", "toolbar=yes,menubar=yes")
newWindow=window.open("", "myWindow", "toolbar,menubar")
As you can see , you can simply leave out those attributes that are not specified. They are assumed to have false values.
Example:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Window Object</title>
</head>
<body>
<h1>Example for window object</h1>
<h2></h2>
<hr>
<form name="form1">
<center>
<input type="button" name=btn1 value="Open Hotmail" onClick="window.open('https://www.hotmail.com')";>
<input type="button" name=btn2 value="Help" onclick="win=window.open('','','toolbar=0,menubar=0,status=0')
win.document.write('<h1>Help for the page</h1>');
win.document.write('<ol>');
win.document.write('<li>click on the open hotmail')
win.document.write('<li>If hotmail web page is loaded');
win.document.write('<li>If Hotmail is not loaded then , you may not have connected to Internet')
win.document.write('</oi>')
">
<hr>
</center>
</form>
</body>
</html>
Output
Closing Windows
To close a window , you can use the window object's close() method. If you are closing the current window, your method call is simply window.close(). Unlike other window object methods, such as alert() or setTimer(), the close() method must always accompany an object reference. If you use close() by itself , you could close the current document rather than the window , depending on the context of the method call. The reason is that the document object has a close() method, too.
Displaying Message Boxes
Dialog are one of the useful component in windows to display certain information. Alert is used to display a message. The syntax is as follows
alert("Message")
User Input
A third message box that you can use for obtaining user input is invoked with the prompt() method of the window object. Use the prompt dialog box when you want to obtain a value from a user. This dialog box features a message, an edit box for user input , and OK and Cancel buttons. The prompt() method has the following syntax:
returnValue=[window.]prompt(message,defaultReply)
As you can see, in addition to specifying the message of the dialog box, you need to specify a defaultReply parameter. This value becomes the default text inserted in the edit box of the message box. You must specify this parameter , even if you have no default value. If the user clicks OK, the prompt() method returns the string value entered by the user. If nothing is entered in the edit box, an empty string ("") is returned. However, if the user clicks cancel, a null value is returned.
Eval
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Expression Eval</title>
<script>
function com(form){
form.result.value=eval(form.expression.value)
}
</script>
</head>
<body>
<form>
<input type="text" name="expression">=
<input type="text" name="result">
<p>
<input type="button" name="a" value="compute" onclick="com(this.form)">
<input type="button" onclick="this.form.expression.value='';this.form.result.value=''">
</form>
</body>
</html>
Output
No comments:
Post a Comment