|
|
Click an item for more info... |
|
|
|
PCHT Leeds - Websites, Databases, Spreadsheets & Training Customised solutions and software training for individuals and small businesses. |
|
using javascript |
|
 |
|
Javascript is a scripting language that is used in web pages in response to events that occur when the web page is opened in a Web Browser such as Internet Explorer. Example of events include loading or re-loading the page, clicking a check box, typing information into a text box. When these events occur, javascript functions can perform error checking, load additional programs such as email applications, calendars or clocks, and load other web pages according to the user's response. In this example we will explain how javascript can check that a user has filled a form in correctly, and then open an email application safely and without risk of the email address being harvested for spam. We will assume that the webpage is about wine sales. There is a form on the webpage that requests the user's preference of Red, Rosé, or White wine. If the user selects a choice of wine, then when the user clicks a button, the email application that is on the user's computer opens up with a target email address pre-written, with a subject and body text. However if the user does not make a choice of wine, an error message is displayed instead. The target email address will be sales1955@wineworld765.com, a fictitious email address. Email harvesters look for the @ sign on web pages and attempt to add the email to a spam database, whereupon the email account gets bombarded with spam. This problem can be circumvented using javascript. Without taking any such precautions, the way that an email application is loaded is by using a link on the web site that includes the mailto: tag. By adding the following code somewhere within the <body> tags...
...the website will include a link that looks like this: email us .On clicking the email us link (a click event) the email application will open. Of course we need to protect the target email address from email harvestors, and we also want to include a form to gather some information from the user beforehand. For the time being lets concentrate on protecting the email address. Let's convert the text link to a button. Then when the user clicks the button (a button-click event) javascript can be invoked to open the email Application. If we add the following code somewhere within the <body> tags of the html we will add a button to the webpage, that is linked to a javascript function (which we have yet to write).
This produces a web page that includes a special type of button, called a submit button which will be used to launch the email application. Try it... When the button is clicked the result is to invoke the onclick event, which is one of the methods of the submit button. The onclick event opens a javascript function called openEmail, which is linked to this particular form. We now need to write the function itself, which is javascript. The purpose of the javascript function is to open the user's email Application, and open a new email, with the address and subject pre-populated. Provided the javascript function is enclosed in <script> tags it can be put anywhere on the webpage, but traditionally javascript functions are put in the <head> tags... The line that causes the email application to open begins with 'document.location='. We have almost certainly prevented email harvesters from finding the email address. However we can make it even more difficult by locating the OpenEmail function in a different file, and link that file to the webpage. To do this we simply need to add a reference to an external js file, which we will name Email.js, and then cut the code that lies in between the script tags and paste it to notepad, before saving the file as Email.js in the same folder as the webpage. The way we then refer to that file in the web page is by using the src property, like this : - Javascript can use arrays and loops just like any other traditional programming language, and we will now add this functionality to complete this introduction to javascript. We will add a simple form, which will include three option buttons, representing the three choices of wine that are available.
The checkForm function will check that one of the three buttons has been clicked, and will only open the email application if so. Since the onclick event can have only one function associated with it, it becomes necessary to call the openEmail function within the checkForm function. Again this is common programming practice. Here is the checkform javascript function: - Clicking the Email button still opens the email application but only after the checkForm javascript function ensures that one of the three choices of wine is selected. If not, a message appears. If so, the checkForm function calls the OpenEmail functionand the email application opens. It just remains for us to do something with the selection, of Red White or Rose. We can add the choice to the body of the email by amending the OpenEmail function: -
There is one final problem to overcome. When the page is re-loaded, the form retains its information, so if 'Red' was selected, and the page re-loaded, then 'Red' is still selected. Lets assume that this is not what is intended - that the user must always select something before opening the email. This is typical of the kind of issue that arises when you are testing the page after you have written the code. It introduces us to an event that you will often use when working with javascript, the window.onload event. Each time the page is loaded, or refreshed, the event calls the clearbuttons function, which ensures no wine is pre-selected, meaning the user must select a wine each time.
This concludes this introduction to javascript, which has demonstrated how to invoke javascript functions that check form contents, and call additional javascript functions for opening an email application, whilst keeping the target email address safe from spam harvestors. | |
| home | |
|
Home - about us- our services - news & events - contact us © Copyright PC Home Tuition Ltd. All Rights Reserved. Design by: Template Kingdom.com |
|
