|
|
Understanding the BOM model
Posted On April 3, 2008 by Priyadarshan Roy filed under
This is a series of articles, where we are taking a look at some of the advanced features of JavaScript. There is resurgence in usage and the popularity of JavaScript--largely due to AJAX, and the hype around Web 2.0.
In the fag end of the dot com bust, JavaScript, and anything to do with Java, was ridiculed by a few analysts, claiming that this nifty little language has lost its charm. It was limited to a tool meant for designers, and artists, and not for 'developers'. The advent of AJAX has forced them to eat their words, as knowledge of JavaScript is now essential for you to create AJAX based applications.
This is essentially an advanced JavaScript tutorial, but anyone with programming experience or with a basic knowledge of JavaScript can easily work through these series. But let me touch upon some basics as we get by.
Things you ought to know about JavaScript
1. JavaScript is essentially free. If you have any of the latest browsers, it is already installed in your operating system.
2. It is an ECMA Script, and is loosely typed, case sensitive, light-weight and embeddable language.
3. It is fundamentally used to hack the Document Object Model (DOM)) and the Browser Object Model (BOM), two standard object oriented models that define the way XML, and HTML work.
4. It is supported across all platforms, and browsers.
5. JavaScript has nothing to do with Java. They are as different as chalk, and Cheese. JavaScript has benefited and also, lost out because of the ‘Java’ word in its name.
Some stuff that we are skipping
We will not get into the basics of JavaScript programming. Hence, you need to figure out all about the variables, loops, conditions, objects, classes and other peculiarities of JavaScript, all by yourself. if you know Visual Basic, or VBScript, you already know most of it. JavaScript has many features that are similar to C, C++, Python, and Ruby.
Anyways, here is a simple program!
<html>
<head>
<script type = "text/javascript">
function func1()
{ var iprompt = prompt ( "What's your name?", "");
if (iprompt != null)
{
if(confirm ("Are you sure your name is ," + iprompt))
{
alert ("How are you," + iprompt);
document.write ("You just wrote your first JavaScript");
}
}
else
{ alert ("Idiot, enter a name");
}
}
</script>
</head>
<body>
<script type = "text/javascript">
func1();
</script>
</body>
</html>
ex1.html
I will run through the code. The code is available on www.brand7.co.in/jsdiq/ex1.html. You can download the file and the source.
1. Once you load the page, you will be prompted to enter the name. This is because JavaScript invokes the function func1. The first line of function func1, invokes the prompt function and assigns whatever you have provided as an answer in the prompt window to the variable iprompt.
2. Then it asks for confirmation using confirmation function. If you agree, it will alert you and then, write that you wrote your first JavaScript program.
3. The functions alert, confirm, and prompt are essentially called system dialogues.
It is important to remember the following basic JavaScript facts.
1. JavaScript uses double braces to separate blocks of code.
2. It has the option to end statements with or without the semi-colon (;).
3. All JavaScript code will be embedded within a <script/> tag either inside or outside (through file referencing) inside an HTML.
4. JavaScript uses the .js extension when saved outside an HTML file.
Browser Object Model
We told you before that one of the best uses of JavaScript is to hack into the BOM or Browser Object Model. Browser Object Model is a hierarchical arrangement of all the objects within the browser that can be accessed by a programming language like JavaScript, Java or Python.
Every element of a web page can be referenced, and hence altered, manipulated, deleted, and created using the BOM. The BOM is, hence a very important aspect of client side programming. See figure 1 to understand the different elements of BOM.
A thorough understanding of the BOM is essential for you to master JavaScript. However such a detailed discussion of BOM is beyond the scope of this article and also the magazine. But we will try to provide you with enough information so that you can play around, and hope to learn better.
As in figure 1 the model starts from the Window object and from the window object, rest of the objects are children of the Window object.
The Window object represents the Browser Window and it can be used to spawn other objects.
The biggest, and most common use of the Windows object is for opening new windows.
For example consider this little script.
window.open ("http://www.developeriq.com", "DIQ", " height=150, width = 200, top =10, left =10, resizable =yes")
This will open a small pop up window, which can be resized.
A word of caution, for new age web designers-- most browsers are blocking pop-up ads, and it is very rare that a smart consumer will turn off the pop-up blocker. Frankly, pop-up windows are very irritating especially if it keeps on popping up when you close them down. You can check ex2.html found at http://www.brand7.co.in/jsdiq/ex2.html for a small program that uses the above little piece of code.
A quick tip
Some web masters use _blank to tell the browser that if there is a pop-up blocker, then, what it needs to do. We will discuss this in detail later.
A little bit of history
History of web pages you have visited is captured by the history object. You can use the go function and then traverse through the annals of your browser window's history.
history.go(-1) // goes to the page in history which you visited
history.go(1) // goes forward
Similarly you can use history.forward() and history.backward() to simulate the browser forward and backward buttons.
There are no direct JavaScript commands to find out the URLs. You can think of writing a hack to do the same with a bit ingenuity. However you can find the number of web pages in history with the command history.length.
Document Object
Document Object defines the contents of the browser window. It is essentially a series of collections of objects, methods, collections and properties that is used to render the web page.
We can access some of the properties of a web site or a web page using the document object.
<script type ="text/javascript">
document.write (document.lastModified); // gives the date and time in string when the page was last modified
document.write (document.URL);// gives the exact URL of the page
document.write (document.referrer);// If someone visited the page by clicking another link, that URL is provided
</script>
Try this out
Essentially a web page is a collection of text, images, links, forms, applets, and anchors. Each of these collections can be represented, and indexed by both name and number. Hence you can access the first image referred in a document by the simple syntax document.images[0] or by document.images["name_of_the_image"]. Similarly, document.forms and document.anchors help you access forms and anchors.
The document object also has other properties and methods, notably the document.write method which helps you write down some information stored within the braces.
The location object
The location object is a property of both window and document objects. The location object essentially identifies the URL on the window loaded by the browser.
Let us take an example of the web link http://www.developeriq.com.
If there exists a script on the home page it will provide following output.
document.location.host --> www.developeriq.com
document.location.href --> http://www.developeriq.com
location.pathname --> http://www.developeriq.com
location.port --> The port number viz 80, 8000, 8080
and so on...
Navigator object
Navigator object is a bit of a misnomer. It is got nothing absolutely to do with Netscape Navigator. It is also an object that suffers from lack of standards. Navigator object fundamentally tells you more about the browser. Check table below for a better understanding of the Navigator object properties and methods.
This was a quick, brief but hopefully to the point discussion on JavaScripts Browser Object Model (BOM). The BOM model lays the foundation of how JavaScript can be used to create better web applications. We will write a serious script to figure out how much you can learn about a user on your web site using JavaScript in the next article.
In the fag end of the dot com bust, JavaScript, and anything to do with Java, was ridiculed by a few analysts, claiming that this nifty little language has lost its charm. It was limited to a tool meant for designers, and artists, and not for 'developers'. The advent of AJAX has forced them to eat their words, as knowledge of JavaScript is now essential for you to create AJAX based applications.
This is essentially an advanced JavaScript tutorial, but anyone with programming experience or with a basic knowledge of JavaScript can easily work through these series. But let me touch upon some basics as we get by.
Things you ought to know about JavaScript
1. JavaScript is essentially free. If you have any of the latest browsers, it is already installed in your operating system.
2. It is an ECMA Script, and is loosely typed, case sensitive, light-weight and embeddable language.
3. It is fundamentally used to hack the Document Object Model (DOM)) and the Browser Object Model (BOM), two standard object oriented models that define the way XML, and HTML work.
4. It is supported across all platforms, and browsers.
5. JavaScript has nothing to do with Java. They are as different as chalk, and Cheese. JavaScript has benefited and also, lost out because of the ‘Java’ word in its name.
Some stuff that we are skipping
We will not get into the basics of JavaScript programming. Hence, you need to figure out all about the variables, loops, conditions, objects, classes and other peculiarities of JavaScript, all by yourself. if you know Visual Basic, or VBScript, you already know most of it. JavaScript has many features that are similar to C, C++, Python, and Ruby.
Anyways, here is a simple program!
<html>
<head>
<script type = "text/javascript">
function func1()
{ var iprompt = prompt ( "What's your name?", "");
if (iprompt != null)
{
if(confirm ("Are you sure your name is ," + iprompt))
{
alert ("How are you," + iprompt);
document.write ("You just wrote your first JavaScript");
}
}
else
{ alert ("Idiot, enter a name");
}
}
</script>
</head>
<body>
<script type = "text/javascript">
func1();
</script>
</body>
</html>
ex1.html
I will run through the code. The code is available on www.brand7.co.in/jsdiq/ex1.html. You can download the file and the source.
1. Once you load the page, you will be prompted to enter the name. This is because JavaScript invokes the function func1. The first line of function func1, invokes the prompt function and assigns whatever you have provided as an answer in the prompt window to the variable iprompt.
2. Then it asks for confirmation using confirmation function. If you agree, it will alert you and then, write that you wrote your first JavaScript program.
3. The functions alert, confirm, and prompt are essentially called system dialogues.
It is important to remember the following basic JavaScript facts.
1. JavaScript uses double braces to separate blocks of code.
2. It has the option to end statements with or without the semi-colon (;).
3. All JavaScript code will be embedded within a <script/> tag either inside or outside (through file referencing) inside an HTML.
4. JavaScript uses the .js extension when saved outside an HTML file.
Browser Object Model
We told you before that one of the best uses of JavaScript is to hack into the BOM or Browser Object Model. Browser Object Model is a hierarchical arrangement of all the objects within the browser that can be accessed by a programming language like JavaScript, Java or Python.
Every element of a web page can be referenced, and hence altered, manipulated, deleted, and created using the BOM. The BOM is, hence a very important aspect of client side programming. See figure 1 to understand the different elements of BOM.
A thorough understanding of the BOM is essential for you to master JavaScript. However such a detailed discussion of BOM is beyond the scope of this article and also the magazine. But we will try to provide you with enough information so that you can play around, and hope to learn better.
As in figure 1 the model starts from the Window object and from the window object, rest of the objects are children of the Window object.
The Window object represents the Browser Window and it can be used to spawn other objects.
The biggest, and most common use of the Windows object is for opening new windows.
For example consider this little script.
window.open ("http://www.developeriq.com", "DIQ", " height=150, width = 200, top =10, left =10, resizable =yes")
This will open a small pop up window, which can be resized.
A word of caution, for new age web designers-- most browsers are blocking pop-up ads, and it is very rare that a smart consumer will turn off the pop-up blocker. Frankly, pop-up windows are very irritating especially if it keeps on popping up when you close them down. You can check ex2.html found at http://www.brand7.co.in/jsdiq/ex2.html for a small program that uses the above little piece of code.
A quick tip
Some web masters use _blank to tell the browser that if there is a pop-up blocker, then, what it needs to do. We will discuss this in detail later.
A little bit of history
History of web pages you have visited is captured by the history object. You can use the go function and then traverse through the annals of your browser window's history.
history.go(-1) // goes to the page in history which you visited
history.go(1) // goes forward
Similarly you can use history.forward() and history.backward() to simulate the browser forward and backward buttons.
There are no direct JavaScript commands to find out the URLs. You can think of writing a hack to do the same with a bit ingenuity. However you can find the number of web pages in history with the command history.length.
Document Object
Document Object defines the contents of the browser window. It is essentially a series of collections of objects, methods, collections and properties that is used to render the web page.
We can access some of the properties of a web site or a web page using the document object.
<script type ="text/javascript">
document.write (document.lastModified); // gives the date and time in string when the page was last modified
document.write (document.URL);// gives the exact URL of the page
document.write (document.referrer);// If someone visited the page by clicking another link, that URL is provided
</script>
Try this out
Essentially a web page is a collection of text, images, links, forms, applets, and anchors. Each of these collections can be represented, and indexed by both name and number. Hence you can access the first image referred in a document by the simple syntax document.images[0] or by document.images["name_of_the_image"]. Similarly, document.forms and document.anchors help you access forms and anchors.
The document object also has other properties and methods, notably the document.write method which helps you write down some information stored within the braces.
The location object
The location object is a property of both window and document objects. The location object essentially identifies the URL on the window loaded by the browser.
Let us take an example of the web link http://www.developeriq.com.
If there exists a script on the home page it will provide following output.
document.location.host --> www.developeriq.com
document.location.href --> http://www.developeriq.com
location.pathname --> http://www.developeriq.com
location.port --> The port number viz 80, 8000, 8080
and so on...
Navigator object
Navigator object is a bit of a misnomer. It is got nothing absolutely to do with Netscape Navigator. It is also an object that suffers from lack of standards. Navigator object fundamentally tells you more about the browser. Check table below for a better understanding of the Navigator object properties and methods.
This was a quick, brief but hopefully to the point discussion on JavaScripts Browser Object Model (BOM). The BOM model lays the foundation of how JavaScript can be used to create better web applications. We will write a serious script to figure out how much you can learn about a user on your web site using JavaScript in the next article.