What is Scripting?
Scripting is the name given to a method of inserting little bits of "program" into a web page to make it more active. Web pages written in HTML alone (or using a tool such as Dreamweaver, Expression Web, or even Word) can be made to look attractive by using style sheets, etc., but they are still essentially static - i.e. they don't change. You can insert animated picture files, such as AVIs and GIFs, and created scrolling text using the <marquee> tag (beware - this is a non-standard HTML tag and is frowed-upon in web-design circles) but you can't make pages interact with the user.
The use of scripts allows you to add some processing or interactivity to your page. This can either be done on the web server before the page is sent to the viewer (called server-side scripting), or in the browser on the viewer's computer.
When you're looking at a web page, you're essentially connected to a network, and fetching files from the server that holds the pages. If you want to personalise or activate your page, the first possibility is to run your program on the server, as the page is actually created.
Many ISPs no longer offer web-space as part of their basic packages, and if they do, then you probably aren't allowed to run server-side scripts - for reasons of security and processing load. It therefore tends to be large companies, which host their own pages, that use this method. There are, though, many low costs hosts - and even one or two ones - that will allow you to host web-page and run scripts on the server.
Running scripts (and therefore processing the data) on the server can be more secure, and also quicker for the client, because all the data is kept on the server, and only the data that the client requires, or is authorised to see, gets sent across the (usually quite slow) communications link.
The way it works is that when you request a page that requires some processing (such as your Account Details page from a utility company web-site), the script is executed on the server. The server then generates what appears to be a plain HTML page, containing the results you wanted (e.g. your bill) and sends it to your browser. This also means that server-side scripting works well with older browsers, or lower-powered devices such as mobile phones, as they don't have to run any scripts themselves.
Examples of common server-side scripting lanaguages are Perl, PHP and Microsoft's ASP (Active Server Pages) or ASP.NET. You can try these for yourself on your PC by installing IIS (Internet Information Server, which comes with Windows from NT or 2000 onwards) or an open-source web server such as Apache.
My ISP and host (PlusNet) runs Linux servers that use Apache, so server-side scripts for Advanced ICT in a Nutshell are written in PHP.
For more information on PHP, ASP, etc., look at the server-side scripting page.
As some ISPs won't let you run server-side scripts, most of us have to make do with client-side scripting. Your browser is effectively the client, and it is your browser that interprets (or executes) the client-side scripts.
Which is Best?
There isn't always one solution that's always best - it depends on what your web-page does. Server-side scripting is better for web-pages that require you to log-in, or present different information for different users. Server-side scripting is also the best option if you want your page to read and/or write data from/to a file or a database. Client-side scripting is used for things where speed is important - such as animating "roll-overs" or validating user input - and you don't want to wait for your data to be sent to the server and then wait for the response to load. Client-side scripting can change a page without re-loading it, whereas running a server-side script requires the user to either refresh the page or move to a new page.
The examples on these pages mostly interact with the user in a real-time fashion, and therefore the scripting is done on the client side. There is more information on the server-side scripting page.
For some reason, people get a bit scared when you mention cookies. A cookie is just a small file (or part of a file, depending on which browser you're using) that can be used to store information on your computer, just like a variable. By default, they only have a lifetime of the browser session (i.e. they are deleted when you close your browser), but you can set an expiry date if you want them to persist between sessions.
About The Scripts on These Pages
There is a number of scripts in these pages. The basic principles behind how these scripts work is described below - to see the script in detail, go to the relevant page and View Source.
Picking random numbers to generate the balls is fairly straightforward in most programming languages - although, strictly-speaking, we should call them pseudo-random numbers because they are generated using an algorithm. The problem is that the balls aren't replaced, so we need to check that each number only comes out one. Each new number generated is compared with the previous numbers drawn to ensure that it is unique - in fact, the numbers are repeatedly drawn until they are unique, although in practice this isn't normally more than once or twice.
The balls are <div>s with rounded corners (the border-radius style that rounds the corners isn't supported by older browsers, so they may appear as rectangles on some computers). The .innerHTML property of a <div> contains its contents, and can therefore be used to set the number of the ball. Finally, the background colour of the <div> is changed so that the ball colours match those in the National Lottery (although the white one is grey so you can see it against the white background). The colours are stored in an array - the value of the ball is divided by 10 and rounded down to be used as the array index, e.g. 23 → 2.3 → 2 gives colour.
Click here to view the lottery page.
Body Mass Index
It was in the news one day that more than 50% of Americans are now obese according to the WHO guidelines. This is a very simple page that takes the two numbers you've entered, performs the calculation, and sticks the result in the third field.
Click here to view the body mass index page.
I was teaching probability one day, and was trying to explain that just because the probability of tossing a head or a tail is 0.5, it doesn't necessarily follow that if you toss ten coins, you'll get 5 of each. Tossing 10 real coins would involve a lot of noise and having to record the results, so I created this page.
When the button is clicked, it generates an array of 10 random numbers. The numbers are between 0 and 1, and so when rounded will give you either 0 or 1. The code then loops through the ten images, and if the corresponding random number is 1, it changes the picture to one of a head, otherwise it displays a tail. It keeps a count of how many heads there have been, and displays the number at the bottom of the screen. The number of tails is calculated by subtracting the number of heads from 10.
Click here to view the coin page.
Well, this is a trick, as you may have guessed. There are actually 11 cards that are displayed - the original six, and then another five, and the blank one which appear when you click the button, so all of the cards actually disappear.
The script just rotates the image sources a random number of times, so it looks like the cards are being shuffled. Then when you click the button, it changes the image sources for the new 5 cards and the blank one, and shuffles them again.
Click here to view the cards page.
Back to Maths again... During my PGCE, some of the people on my course were trying to produce an Excel spreadsheet to do this. They wanted to simulate the throwing of two dice, and then plot a graph of the results to produce what would hopefully be a normal distribution curve (provided the sample size is big enough).
The web page models exactly what you'd do yourself. It generates two random numbers from one to six, adds them together, and tallies the results. To produce the graph, it then changes the width property of the coloured bars, which are in fact just GIF files containing a single pixel (see the Images section in
HTML for more details/examples).
Click here to view the dice page.
Yet another mathematical problem! This one was described in Ian Stewart's Christmas Lecture on BBC2, but was originally described by American mathematician in a newspaper column. The gist of it is this: you're on a game show, and there are three doors, behind one of which is a prize. Des O'Connor (sorry, I mean the host) asks you to pick a door. He then opens another door to reveal that the prize is not behind that one. He then allows you to change your mind before opening the door to see whether you've won. What should you do?
Well, it appears that you're twice as likely to win if you change your mind. The probability of the prize being behind the first door you choose is 1/3 - fair enough. But that means that the probability of it being another door is 2/3. The host has opened the other door, but the odds don't change because he knows where it is. That means that there is a 2/3 probability that the prize is behind the other door!
That sounds fine in theory, but, ever the sceptic, I decided to create this simulation to test the theory. Again, it uses pseudo-random number generation to pick one of the three doors, and then lets the user pick one. A non-winning door is opened (i.e. the image is swapped to the cross), and you can then change your mind. There are no new techniques used here - it's just a diferent application.
Click here to view the game show page.
Words of Wisdom
This was a rather surreal attempt to use a random sentence generator to explain the difference between validation and verification (i.e. it can produce a valid sentence that isn't true), but it turned out to be a little too abstract for the students. Still, it amuses us!
It takes two arrays - one of noun clauses and one of verb clauses. It then picks, Carol Vorderman-style, using pseudorandom numbers, two noun clauses and joins them together with a verb clause to produce a sentence.
The page uses three frames (one with the title in it, the one where the sentence appears, and the one at the bottom with the button on it, and demonstrates that you can use scripts in one frame or page to write to another.
Click here to view the words of wisdom page.
I've just included this one to show off, really! I wrote the script when I was bored one afternoon in the summer holiday, and was rather shocked when I discovered that it actually worked. Again, it uses random number generation to jumble the squares, and then swaps the source of the images to make it appear as though they are moving around. The gap is a transparent GIF file.
Click here to view the puzzle page.
Well, when I'm not listening to Kraftwerk and doing integral calculus for the fun of it, I'm quite interested in cryptography. This page uses an image map for the keyboard, and the image-swapping technique to make the bulbs appear to light. It's really quite simple - the rotor wirings are represented by arrays of numbers which are the corresponding positions on the next rotor, and the reflector works in the same way. Now go and make a Lorenz machine for your homework!
Click here to view the Enigma page.