Scripting

Scripts are simple programs that can be included in your web pages to create dynamic content. This can include: animated slide shows of images; galleries that let you click on an image to see a larger version; drop down menus, and pretty much anything that you might imagine...

Introduction

There are two types of scripting: client-side scripts and server-side scripts. With a client-side script, the code is downloaded as part of the web page itself and the browser runs the code on your machine to create the desired effect. In contrast, with a server-side script, the code is run by the server that delivers the web page to your browser as part of the process of creating the page. In that case, your browser never sees the code, only the result.

Each type of scripting has its advantages and disadvantages, and each is best suited for particular applications. For example, if you wanted to store information in a database on your server, and include records from the database in pages that you sent to your user, then you would have to use sever-side scripts to accomplish that. However, if you wanted to present your user with an interactive gallery of image thumbnails that they could browse, selecting one to view full size, then that would best be accomplished using client-side scripting.

Each type of scripting has its own specialized programming languages. For server-side scripting the languages available include ASP, PHP, Java, ColdFusion, and Perl. As you can see, there are a wide range of server-side scripting languages, and which language you will chose depends on your server platform; specifically ASP would most likely be used on a Microsoft server, whilst an Apache server would typically use PHP or Perl. In contrast, the only real option for client-side scripting is undoubtedly the language JavaScript (unless you want to use Flash, in which case you use ActionScript).

The examples of these pages concentrate on client-side scripting using the JavaScript language. However, because it is not expected that students doing these units be able to program, most of the emphasis will be placed on sourcing, installing and customizing existing scripts, rather than on writing scripts from scratch.

Learning JavaScript

JavaScript is part of the C family of programming languages. This means that it shares much of the same basic syntax as the languages C, C++, Java and C#. However, JavaScript has many features that are specific to programming for the web.

These pages won't teach you how to program in JavaScript from scratch. Programming in JavaScript is a big topic. However, they will show you some simple JavaScript techniques to get you started and point you at some good resources to build you knowledge. In particular, I also want you to see how much you can get done simply by learning to use the enormous range of JavaScript utilities that are already available for free on the web!

If you are completely new to programming you should take time out to look through the tutorial here.

Or there's another JavaScript tutorial for people who've never programmed before here.

Or, if you prefer watching videos to reading text, then there are also YouTube videos teaching basic JavaScript. They're not brilliant, but they'll get you started...

The W3School's JavaScript pages are also a very useful source of information.

And a tremendous collection of freely usable scripts can be found at the DynamicDrive site.

JavaScript

You have actually already met JavaScript, maybe without realizing it, when we looked at creating rollover images. Behind the scenes, when you use Dreamweaver's tool for inserting a rollover image, a set of JavaScript functions are placed in your page and those functions are used to swap the images around when the mouse rolls over the original or leaves it.

You can always see any JavaScript included in a page by clicking on View menu and then selecting Page Source (in Firefox) or Source (in Internet Explorer). This will open a new window showing you the underlying HTML, CSS and JavaScript that make up the description of the page.

Any JavaScript code included in the page, whether in the head or the body, will appear inside the script tag as shown here:

<script type="text/javascript">
JavaScript code will be placed here
</script>

Then, when the browser gets to that part of the page, instead of simply displaying the contents, it will run the JavaScript code and do what ever the code says. Note the use of the type attribute to specify what kind of script the browser should expect. This refers to the MIME-type of the script. Because all the scripts we will be working with are written in JavaScript, the type will always be as shown here.

The following trivial example uses JavaScript to apply a colour chosen randomly from a list of colours to the text. Try refreshing the page a few times to see the colour of the text change!

Use source view now to see the code used to create this effect. Don't worry if you don't understand all the details of the code, this is just an opportunity to locate a specific script within a page.

Linking to External Scripts

As well as including the code for the script directly in your web page, you can also write the code in a separate file and then link to the file. Note that these are the same two options as for including cascading style sheet definitions in your page.

If you have a script in a file and you want to be able to use some of the functions in that script in your page, then you would need to include the following element in your page:

<script src="include/myscript.js" type="text/javascript">
</script>

This element has the same type attribute as the earlier script example, but this time there is no actual JavaScript code included. Instead, the attribute src, short for source, specifies the file where the script can be found. When the browser gets to this element, it will open the specified file and load the JavaScript that it contains.

The file containing the JavaScript does not contain any HTML, not even the script tag. It only contains JavaScript commands.

Loading external scripts is usually done in the head of the HTML document. However, it does not have to be done there. So long as the script is loaded before you try and use any of the functions it defines, everything should work.

If you have code that you use on a number of different pages, then it makes sense to store it in a single file, and then load that file in the pages that need the scripts.

What If Scripting is Disabled?

Some web users chose to disable JavaScript in their browsers. This is usually done because they have security concerns about allowing the browser to execute code. These concerns are legitimate, so you cannot be sure that your users will be able to access your dynamic JavaScript content.

To allow for this possibility, HTML includes the noscript element. This specifies what to display in a page if JavaScript is disabled. This is typically used in a pair with the script element:

<script type="text/javascript">
JavaScript code will be placed here
</script>
<noscript>

A message to the user goes here
</noscript>

If you inspected the page code for the colour changing script above, then you will have seen an example of this element already. If you didn't check out the source code at the time, go and do it now.

If you know how to, disable scripting in your browser, and refresh the page. Then look at the colour changing element again to see how it displays. Turn JavaScript back on, you'll need it for the rest of these pages.

Examples

The following pages present some applications of using JavaScript to create dynamic content.

This first example shows in detail how to code a styled button starting from scratch:

The next example shows how to use a third-party script to create an image gallery:

Here is another example of using a third-party script, this time to create a slideshow:

An example combining JavaScript and CSS to provide a basic implementation of accessibility features.

A simple quiz manager with a set of multiple choice questions on one page and the answers displayed on a second page.

The remaining examples have much less detail and assume that you've already worked through the first two examples: