Example: A Login Page - Java Script

When creating Web applications,the first page a user sees is the login page. Most login pages have at least two fields: username and password.The purpose,of course,is to keep unauthorized users out.But what about those users who don’t meet the minimum browser and system requirements for the application?They really should not be allowed to log in.The solution that many developers choose is to make a login page that does browser detection before the user is even able to enter a username, password, or any other information.For this purpose,the browser and operating system detection script works beautifully.

The first step is to decide the minimum requirements for the Web application. For example,suppose that the Web application is limited to working on Internet Explorer 5.5 and higher on Windows, Mozilla 1.0 or higher on Unix, and Safari 1.0 or higher on Macintosh(these requirements aren’t exactly realistic,but make for a good example).Keep in mind a certain unspoken requirement:The browser must support JavaScript; this must also be checked.

Because you are only be scripting for two browsers,by default you should have an error message telling users that they are using the wrong browser.This displays if there is no JavaScript support,as well as ifthe wrong browser or wrong operating system is being used. Here’s a sample:

This Web application requires one of the following:<ul><li>Internet Explorer 5.5 or higher for Windows </li><li>Mozilla 1.0 or higher for Unix</li><li>Safari 1.0 or higher for Macintosh </li></ul></div></div></form></body></html>

The highlighted section of code contains the actual error message.Note that the entire error message is contained within a <div/> named divError. Also note that divError has an absolute position.This is important because the login form lies directly over the error message.However,the login form is invisible at load time and is only shown if appropriate. Before getting to that, add the code for the login form right after the error message:

This Web application requires one of the following:

Now that the pieces are in place,you can use the detection script to check for the appropriate browsers and operating systems.

The code should show the login form and hide the error message if the user has fulfilled the requirements:

This code snippet uses the style extensions of the DOM to set the CSS visibility property of each <div/>.Accessing the CSS style of elements using script is covered fully in Chapter 10,“Advanced DOM Techniques.”This code should be executed when the document is loaded,so it should be assigned to the window.onload event handler.(Don’t worry too much about this now; events and event handlers are discussed in the next chapter.)

As a final step, you can include a special notice just in case the user doesn’t have JavaScript or has disabledit.To do this,you use the <noscript/> tag. Any text within the <noscript/> tag is ignored if thebrowser supports JavaScript. If the browser doesn’t support it (or has it disabled), then the text is displayed normally.

This should be place in divError just after the <ul/> element:

This Web application requires one of the following:

This Web application also requires JavaScript (if you are using one of the above browsers, make sure that JavaScript is enabled).

Now,all cases are covered. If the user is accessing the page with an incorrect browser, the error message is displayed because the script will not hide it to show the login form.

Example: A Login Page

If the browser being used does not support JavaScript,the code isn’t run and the additional message is displayed

Example: A Login Page

If the correct browser and platform are being used, the script is executed when the page is loaded,

hiding the error message(so the user never sees it) and displaying the login form

Example: A Login Page

This is an important part of Web application usability.Many sites provide a generic login form that any browser can use even though the internal functionality requires a specific browser. This login pageensures that users of the Web application have the minimum requirements necessary to access all its features without making a trip back to the server.


All rights reserved © 2018 Wisdom IT Services India Pvt. Ltd DMCA.com Protection Status

Java Script Topics