Working with Browser Objects

JavaScript is “object-based”, meaning that it works with objects. You are probably already familiar with what objects are from some of your other programming classes, but as a reminder, an object typically represents some “real-world” entity. You can think of objects as Nouns (person, place, or a thing). Objects haveproperties that describe them, and they can also have methods that perform some action on that object. As an example, we could create a car object, and could have properties that describe that car such as color, engine type, number of doors, transmission type, etc. We could also create some methods on that car object for starting the car, servicing the car, washing the car, etc. These methods can all perform actions on that object. Well, using JavaScript and working with your browser is no different. Your browser contains many built-in objects that you can access using JavaScript. The browser has what is called a Document Object Model, commonly referred to as the DOM. The DOM is simply an object containment hierarchy that describes what objects are exposed by the browser that you can programmatically access through JavaScript. The reason that it is called a “containment hierarchy” is because the objects “contain” other objects. For example, the window contains a document object. I will go into more detail on the DOM in one of the upcoming weeks, but for now, just keep in mind that the DOM is not actually part of JavaScript, it is provided by the browser, and using JavaScript, we can access and use these browser objects.

As I mentioned above, the DOM is NOT part of the JavaScript language, however, you can access the DOM objects through JavaScript. At the topmost level is the window object. The window object represents your browser. There are many properties and methods that are provided by the window object. For a list of available properties and methods offered by the window object, take a look at the following page (scroll to the middle):

    http://www.w3schools.com/jsref/dom_obj_document.asp

The window object (the default object) has three methods in particular that come in very handy when writing JavaScript programs. Those methods are: alert(), prompt(), and confirm(). In JavaScript, whenever you call a method of any object, you MUST include the opening and closing parentheses () at the end of it. If the method accepts any parameters, then you would pass those by putting them between the parentheses. For example, the window object has a method called alert(). The alert() method takes a single parameter, which is a string of text, and it will display that string of text in a popup dialog box. Here is how you would call the alert() method of the window object:

    window.alert(‘Hello class!’);

See it in action:

    http://classexamples.w3elite.com/JavaScript/window.htm

Looking at the code, notice the string parameter that I passed to the alert() method is enclosed in single quotes. In JavaScript, you represent literal string by enclosing them in either single quotes OR double quotes. Also notice that the statement ends with a semi-colon. Statements in JavaScript should end with a semi-colon. It is referred to as a statement separator. Remember too, that JavaScript is case-sensitive, so if you were to use Alert() instead of alert(), then you would receive a JavaScript error.

As I mentioned above, the window object is the default object, so in actuality, you do not need to specify it. You can call its methods and properties directly. So instead of:

    window.alert(‘Hello class!’);

You could actually just call alert(), as follows:

    alert(‘Hello class!’);

If you look at the containment hierarchy above, you can see that the window object “contains” or “has a” document object. The document object is probably the main browser object that you will use when creating JavaScript programs. Through the document object, you have access to ALL of the HTML elements on your page. For a list of available properties and methods offered by the document object, take a look at the following page (scroll to the middle):

    http://www.w3schools.com/htmldom/dom_obj_document.asp

One of the methods of the document object is the write() method. This method is useful for using JavaScript to write content to the browser window as a page is loading. It is similar to the alert() method in that you pass it a string, but instead of displaying that string in a popup dialog, it will render that content on the page. Here is an example:

    window.document.write(‘JavaScript is COOL!!!’);

Now, I mentioned above that the window object is the default object, which means that we can leave it off if we want to and the browser will use it by default. So we could really just do the following:

    for(var x=1; x<=6; x++)

    {

        document.write(‘JavaScript is COOL!!!’);

    }

See it in action:

    http://classexamples.w3elite.com/JavaScript/document.write1.htm

One of the BEST things about the document.write() method is that it doesn’t just write the text out to the browser. You can include HTML tags within the string that you pass to document.write() and it will actually render that HTML while it writes the text out. For example, you could do the following:

    document.write(‘<h1 style=”color:yellow;background-color:blue;border:1px;”>JavaScript is COOL!!!</h1>’);

See this in action:

    http://classexamples.w3elite.com/JavaScript/document.write2.htm

We can even reference images and have the document.write() display those as well:

    document.write(‘<img src=”https://www.sweetstudy.com/content/images/laughing.gif”/>’);

See this in action:

    http://classexamples.w3elite.com/JavaScript/document.write4.htm

Now, you can really start to do some cool things, when you start to combine JavaScript’s other language constructs, such as the for loop, and the document.write(). That allows you to repeat statements. Let’s try that out by using a for loop to write our string “JavaScript is COOL!!!” out to the browser six times, but each one will use a different heading tag size (H1 – H6). Here is how we could do that:

    for(var x=1; x<=6; x++)

    {

        document.write(‘JavaScript is COOL!!!’);

    }

See this in action:

    http://classexamples.w3elite.com/JavaScript/document.write3.htm

You can include the document.write() calls anywhere in your page, so that means that you could have a block of HTML in the body of your page, and then include a script block that uses the document.write() method to write out more content, and so it. It allows you to do many different things, such as get input from the user, and then make decisions on what to display next based on that input. You can make the decisions by using JavaScript’s conditional statements, like the if statement. Before I do an example of this, I want to demonstrate two useful methods of the window object. The first one is the prompt() method. The prompt method does just what its name implies. It prompts the user for some information. The prompt method accepts two parameters. The first parameter is the prompt message that you want to be displayed in the dialog box, and the second parameter is the default text that will be displayed in the input textbox of the dialog. The second parameter is optional, which means that you do not have to pass anything for the second parameter, however, if you don’t pass anything for it, then it will display the text ‘undefined’ in the prompt’s textbox. If you do not want anything displayed as the default text in the textbox, then I would recommend that you pass an empty string ” (two single or two double quotes” as the parameter. When a prompt is displayed, the user enters some information in the textbox, and then clicks the OK button. The prompt method is different from the other ones that we have looked at, like the alert(), in that it actually returns something. It returns the string of text that the user entered in the textbox. To get this value, you need to set a variable equal to the method, as follows:

    var usersName = window.prompt(‘What is Your Name?’, ”);

After the user enters their name and clicks the OK button, whatever they typed into the textbox will be assigned to the variable usersName. You can then make use of that variable in your JavaScript.

Another useful method of the window object is the confirm() method. It is similar to the alert() method, in that it displays a string a text that you pass to it, but the dialog has two buttons <Ok> and <Cancel>. If the user clicks the <Ok> button, then the value true (Boolean) is returned, and if they click the <Cancel> button, the value false (Boolean) is returned. Here is how you could call this method and capture the return value:

    var isOk = window.confirm(‘Do You Want to Continue?’);

You could then use that Boolean (true/false) variable in the condition of an if statement, as follows:

    if (isOk)

    {

        // User clicked the ok button

        alert(‘You chose to continue’);

    }

    else

    {

        // User clicked the cancel button

        alert(‘You chose NOT to continue’);

    }

Since the confirm() method returns a Boolean (true/false) value, you could even take a shortcut, and use that function call as the condition of an if statement. Here is a shortcut version of the above code:

    if (window.confirm(‘Do You Want to Continue?’))

    {

        // User clicked the ok button

        alert(‘You chose to continue’);

    }

    else

    {

        // User clicked the cancel button

        alert(‘You chose NOT to continue’);

    }

Here is an example that combines the use of all of the window and document methods that I discussed above. Please take a look at the code to see if you can follow and understand it. Note that in JavaScript, two forward slashes // denote a JavaScript comment. I will use several comments within the examples that I create for this class, so be sure to view the source and read the source and my comments in there for more information on them.

    http://classexamples.w3elite.com/JavaScript/window2.htm

Run the page a few times, and each time, enter different text in the prompts, and select <OK> or <Cancel> from the confirmation prompts.

As you hopefully can see, our pages are beginning to become dynamic. Based on how the user responds to the questions, that will determine how the page gets rendered and what content will be on that page.