On this page, I am introducing windows. That is, using Java Script to open new browser windows and editing their content. This page also introduces Java Script's events. An event is when the user does something. For instance: a button has the event onClick(), a text box has events like onChange() (text in box changes), oneBlur() (cursor leaves text box), etc. Let's begin.
Set up an HTML document like so:
<html>
<head>
<Script Language = "JavaScript">
<!--
// -->
</script>
</head>
<body>
<form name = "frmWindow">
<p>
Enter URL:
<input name = "txtLocation" type = "text" size = "40">
<input name = "cmdButton" type = "button" value = "Open" onClick = "newWindow();">
</p>
</form>
</body>
</html>
The HTML where we have <input name = "txtLocation" type = "text" size = "40"> creates a form text box 40 characters long. The next line creates a form button object. As indicated, the text box is named txtLocation and the button is named cmdButton. It makes it easier to code these in Java Script when the name of the object is more easily understood.. The value property sets the text written on the button. Above these lines a ways is <form name = "frmWindow">. As indicated, this is the name of the form. The form elements are part of this form. In programming terms, we call the form frmWindow a class. In fact, the entire HTML document is a class. A class is simply a group of objects. Objects are not necessarily visible to the user. Many objects are created in coding and do not display a visible object to a user. An object, in programming terms, is something with behaviors, properties and attributes. The text box object for instance has properties like value (the text in the box), and the property value has a property length (how many characters are in the text box). Windows are as well a class because they also contain groups of objects. We will get into forms and objects later in this tutorial. For now, let's work with some windows.
Notice first in the html you entered the command onClick = "newWindow();", located at the end of the tag for the button form field. We are going to create a function called newWindow() shortly. This command in the form field cmdButton is going to call the function we write when the button is clicked (because we specified "onClick = "). This is one of many Java Script events. Others include onFocus(), onBlur(), onChange(), etc. We are going to use these later in this tutorial. For now, let's just focus on what we have in front of us.
Between the comment tags in the header portion of the HTML file, enter the following lines:
function newWindow()
{
var URL = document.frmWindow.txtLocation.value;
window.open(URL);
}
Line 1: Declare function newWindow().
Line 3: Declare variable URL and store the value of text box txtLocation.
This simply stores the text in the text box txtLocation. In order to get to this text box, we need to go through all the objects that are above it. The line basically says, take the value of the text box txtLocation, which is part of the form frmWindow, which is part of the web document, and store it (the text) in the variable URL. We did not have to store this text in a variable in order to open a new window, but when we work with forms later, you will find that storing data from forms in variables makes the coding much easier and much cleaner.
Line 4: Does just what it says... open window with data in variable URL. If we enter for instance, http://www.amazon.com into the text box, a new window opens to that location, thus displaying Amazon's website.
Note that the variable URL stores data as a string. One little mistype and the web page you enter may not load. We could have tested all sorts of conditions and made this into a fine script. For the sake of simplifying this exercise, it does not matter. The purpose here is to teach you how to open new windows.
Test the page to make sure it works. **Note that you need to enter a full address into the text box for this example. For instance: http://www.amazon.com/ works, but www.amazon.com will not work. We could test and modify what the user has entered, but for the sake of this example, this demonstrates what you need to know.
Modify the line window.open(URL); to read as follows:
window.open(URL, 'WindowsName', 'width = 800, height = 600');
Similarly, this modified line opens a new window with the location held in variable URL. The other arguments are self-explanatory. Where we entered 'WindowsName' is the name that the window gets. This name is acts as a way to potentially address the new window object within coding. You might say it acts as an identifier. The next argument is a group; width and height. This is the width and height that the window is displayed in. This set of arguments can contain many other settings. We used width and height. The numbers we specified is the size of the window in pixels. Other features include toolbar, status (bottom bar of browser window), and scrollbars.
I hope you enjoyed this exercise on windows. Let's move on to Page 6.