The HTML - Javascript interface
As with any programming language, or natural language for that matter, the best and perhaps the only way to learn it, is to dive in and practice. Work through examples, or create you own simple examples to understand what the program statements mean. Before undertaking these examples,It is assumed you have at least a working knowledge of HTML and preferably Cascading Style sheets (CSS). I.e. you can produce a web page using nothing more complicated than a text editor (notepad or gedit for example). The reason being, this is probably where you will write and debug your Javascripts programs. Cascading style sheets, and the style command in particular, are what makes HTML accessible to Javascript.
Hello world - A first Javascript program
Its traditional that your first program is a Hello world program, to demonstrate that you can get the machine to talk to you. So in keeping with tradition, first build a simple HTML page to hold your Javascript and which will act as a template for further examples. This part of the process should be familiar to you.
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"> <html> <head> <title>javascript test page</title> <link href="./allStyles.css" rel="stylesheet" type="text/css" /> <script type="text/javascript"> /* this is where your javascript starts */ </script> </head> <body> <h2>Subject</h2> <h3>Introduction</h3> <!-- This is where your HTML code starts --> <h4>Program output<h4> <div id="output"> </div> </body> </html>
Perhaps the first thing to note are the <script> tags. As written here, the assumption is that the code which follows is Javascript, the default language of the web.
Javascript and JScript
Microsoft have their own version of Javascript (called JScript) and their own language version called VBScript. Neither are compatible with other browsers. E.g. Microsoft's JScript event model.
VBScript follows the conventions of Microsofts Visual Basic. If you have a strong affinity for Visual basic and want to extend that into web design then you must use the language property of the script tag to specify the language being used. E.g.
<SCRIPT Language="VBScript"> tag
Note: Using VBscript as your scripting language will tie you in to the Microsoft Explorer web browser, as currently this is the only browser that supports VBScript.
Now add the following Javascript code between the <SCRIPT> tags. You don't need to make the words function and alert bold. The bold style has been used to indicate these are reserved Javascript words.
function test()
{
// Welcome greeting for new users
alert("Hello World");
}
The curly braces { } signify the start { and end } of a code block. In this example they mark the start and end of the function called test. The function name is unimportant, but it ought at least to indicate what the function does.
To run the function example, create a button as shown, following the h2 header tag. You may add any additional text of your own, by way of explanation. When programming Javascript, or any other language for that matter, use plenty of comments to explain what is going on.
If you have renamed the function, make sure the button calls the right function
Javascript is case sensitive, this cannot be emphasised enough! So var my_Variable is not the same as my_variable. Check your spelling as well.
| Attachment | Size |
|---|---|
| HTMLInterface.htm | 721 bytes |
