Ok, so by now you have a pretty solid grasp of HTML and CSS, using them to define how a web site looks. However, there is another aspect we didn’t touch on so far: specifying how a web site should behave.
- Detecting when a user clicks something, or hovers his mouse over something.
- Changing how things look with CSS, after the page has already loaded (for example, when the user clicks something!)
- Moving HTML elements around on the page, showing and hiding them.
- Show those little message boxes with an ‘ok’ and ‘cancel’ on them. Such a box is called an alert.
- Make the browser load new content online and show it in the page after it is already fully loaded (this is called ‘AJAX’).
Or you can write it in a separate .js file and link to that.
First, write the following one line in a text editor, and save it as script.js in the same folder as your html file:
alert('Hello world! This is some code in a separate .js file!');
(no <script> tags in the external file, that’s right!). Now link to that file putting the following line between the <head></head> tags:
Now, if you save all that, and did things well, opening your page in the browser should have it show something like this dialog:
Use jQuery to add cool new functionality to your page