Make your webpages interactive using JavaScript

JavaScript is such a broad topic that I can't possibly cover everything in one page. In fact, entire books have been written about JavaScript, hundreds of pages long. So, I will aim to give a general overview of JavaScript and the basic concepts of the language. This will provide a foundation from which you can begin to study the subject in more depth. For those of you who would like to learn more, I'll provide links to other resources including websites and helpful reference books.

In the future, I also plan to create other pages covering specific aspects of JavaScript.

Here are some examples of things that JavaScript can be used for:

• Creating a menu that can respond to a user's mouse movements.


• Creating a calculator, calendar or game.


• Opening, closing, or moving the position of the browser window.


• Verifying the authenticity of the data that a user enters in a form, before sending the data to the webserver.


• And many more!

JavaScript is embedded in HTML webpages, so it is useful to have a basic knowledge of HTML and CSS (Cascading Stylesheets) before you begin to learn JavaScript.

If you already have a website, make sure that the HTML and CSS work as you expect before you start adding any JavaScript, otherwise it could get confusing!

You can use almost any text editor to create JavaScript files, such as Notepad or the open source Notepad++. Don't use Microsoft Word though!

You can put JavaScript into your webpage by surrounding the JavaScript code with the tags <script> and </script>, either in the Head or Body section of the HTML file. Most of the time, JavaScript is added to the Head section.

Alternatively, you can put your JavaScript code in an external .js file and then link to it in your HTML document, eg <script type="text/javascript" src="script.js"></script> External scripts are useful if you want to add the same piece of JavaScript to multiple pages on your website. This saves space compared to using internal JavaScript, and it also means that if ever you want to change anything, you only need to make one change instead of having to amend the code on each and every page. This principle is similar to that of using external stylesheets for a website.

If you have used other programming languages in the past, you may already be aware of some of these terms.

Variable - a symbolic name associated with a value and whose associated value may be changed. A variable is used to hold a value, which could be a single character, a string (multiple characters), a number or a boolean value (a true or false value). Numeric variables work in a similar way to algebra, eg x = 5 + 4 would mean that the variable x has the value of 9. The value held within a variable can change while the program is being run.

Events - An event is any action which needs to be handled by a program. They are actions that can be detected and handled by JavaScript. Every element on a webpage has certain events which can trigger an event. Actions could include pressing a key or clicking the mouse on a particular page element such as a button.

Objects - JavaScript is an object oriented programming language. This means that you can define your own objects and variable types. An object is a special data structure, with a collection of properties and methods. JavaScript uses the dot syntax for defining objects, starting with the most general aspect to the most specific aspect, eg bicycle.wheels.front to refer to the front wheels of a bicycle.

Methods - A method is a subroutine associated with a object. It is an action that an object can perform, eg cat.purr() or dog.bark(). A method name is prefixed by the object name and suffixed by opening and closing brackets. In some cases, the brackets will contain parameters (arguments) to be passed into the subroutine.

Adding text to the page

You can use JavaScript to write text directly to a webpage. This can be useful if your webpage uses variables.

<script type="text/javascript">
var username = prompt("What is your name?", "");
document.write("Hello " + username);
</script>

In the above example, when the page loads a dialog box will appear, asking the user to input their name. The name is stored in a variable called username, and this is then written to the page along with the text Hello. Notice that the word Hello is in quotation marks, whereas the variable name is outside the double quotes.

Using conditional statements

JavaScript allows you to use conditional statements, also known as If/Else statements. If a condition is met, you can tell JavaScript to do one thing, or if it isn't met, you can tell it to do something completely different. Here's a simple example of a conditional statement, which can be used to tell a website visitor whether or not their web browser supports cookies:

if (navigator.CookieEnabled)
{
alert("This browser supports cookies");
}
else
{
alert("This browser does not support cookies");
}

Join Squidoo!
If you would like to create web pages like this one, why not join Squidoo? Click this link to get started!