|
Example 1: Setting title for a page (usual way):
Example 2: Let’s use DHTML now:
(Both example files have the *.htm extension and result in entitling your page in browser).
What did we actually do? In Example 1 we used an HTML tag <TITLE> to access the Title property of the Document object which represents the whole HTML page you view in the browser. In Example 2 we basically did the same thing, but we used JavaScript to access this property directly instead of the accustomed <TITLE> tag. And because there are more than a hundred of objects, tons of different properties, methods and events it’s really easy to do amazing things visitors of your page will surely enjoy! Consider the following code which retrieves client desktop settings: Example 3: Getting desktop settings:
Here we create a function which is called whenever the button is pressed (OnClick event is fired). This function getdesktop() initializes three variables x, y, and c which get three properties of Window.screen object respectively. Window.screen object itself contains information about the client's screen and rendering abilities and we retrieve width, height and color depth from it. Then we convert all our variables to strings and print them out using Alert method. Of course this example could be entertaining but is not very useful. But with the same technique you can redirect visitor of your page depending on his/her current desktop resolution! Example 4: Smart navigation:
Method Navigate is used to go to another URL in the same window. So this little script gets client’s desktop settings and then loads optimized version of the page. It’s also very easy to write to the status bar of the browser. All you have to do is to access the Status property of Window object: Example 5: Writing to status bar:
The function loadinfo() is called when onload event is fired (That means the page is 100% loaded). Then we pass the string “Page is loaded!” and it appears in the status bar of the browser. Now when you already know how to write to the status bar, let’s create a very simple program which shows current time. To get the time you can use methods getHours, getMinutes and getSeconds of the Date object. Here’s the final code: Example 6: Status-bar watch:
The most important thing about this little script is the usage of setTimeout method of the Window object. This method evaluates an expression after a specified number of milliseconds has elapsed. In our case it calls function time() each 1000 ms which is equal to 1 second. With JavaScript you can also manipulate the main view window of client browser. You can easily resize it, move it or scroll it. For these purposes you can resizeTo, moveTo and scrollTo, and resizeBy, moveBy and scrollBy. ResizeTo method sets the size of the window dimensions to the specified x and y pixel sizes, on the other hand resizeBy changes the size of the window by the specified offset relatively to current values. The same story is with the other two methods, but moveTo (and moveBy) actually moves the window, and scrollTo scrolls it. Look at this sample to get more information on using resize and move (scrollTo and scrollBy are left up to the reader): Example 7: Playing with browser window:
Hey, this is interesting! In the beginning of our script we shrink the browser window and place it in the upper-left corner of the desktop. Then we retrieve screen properties, define maximum x- and y-values for our window and move it in four while-cycles until the maximum value is reached. Quite an impressive way to decorate your homepage (I advise you to click View button right now)! With JavaScript you can easily determine which browser is used to view your page. All you have to do is to request window.navigator.userAgent property. It returns a string which represents the user-agent header. From this string it’s easy to get version and type of the client browser. Let’s find out whether Internet Explorer is used: Example 8: Determining the browser type:
The variable ua receives the user-agent header. Then we use indexOf method, which returns a positive number if “MSIE” was found in this string. Alert method informs user which browser he’s using. But if you’d like to know the specific version of the browser then it’s a bit more sophisticated task. Here is how to do it:
Netscape Navigator and MS Internet Explorer return different userAgent strings. That's why we have to know which browser is used and then examine it. So, for NN: In this odd-looking expression “parseInt (ua.substring (8, ua.indexOf (“.”)))” we retrieve part of the userAgent string between position 8 and the first dot. Why? The answer is really simple. It seems natural to suppose that any string starts with “Mozilla/” (8 digits) and then the version number is placed. We retrieve everything up to the dot (e.g. 4.6 turns into 4). Finally we convert this 4 (which is originally a string type) to integer with parseInt method. For Internet Explorer we basically did the same thing, but the version number has another position. To determine it we first get the position of "MSIE" string with ua.indexOf("MSIE") method, and then retrieve everything between offsets 5 and 8. That's exactly the place where the version number for IE is located. Well, now it’s the right time for the most interesting way to use JavaScript and DHTML object model. The best thing about it is that it’s easy, clear and powerful. Simply saying, you can change all the tags you like on the fly. You only need to set special id for the tag you want to change and then use very simple script with outerHTML method as shown below: Example 9: Changing tags on the fly:
As you can see I’ve added id = font1 to the <FONT> tag. The function replace() is called when mouse pointer moves over the text and it replaces the whole tag (with id == font1) with argument string. To make it you can use All collection of the Document object and outerHTML method. So basically general syntax will always be like: document.all.[tag id].outerHTML = “everything you’d like”. I guess you’ll surely do a couple of nice things with this technology! Finally I’ll show you how to make a new browser window. It’s so easy that you may find it not interesting at all, but it can be very useful, so watch this: window.open (“yourURL.htm”). That’s it if you like default settings for your new window. Take a look at the last example which also demonstrates that you can make JavaScript calls not only within <SCRIPT> block: Example 10: Opening links in new window:
JavaScript code is inserted right into HTML, but it works. As you click any of the text lines a new window is opened. It can’t go to the needed URL, naturally, but the main idea should be obvious.
|
