One of the great things about JavaScript is that it runs client-side (in the browser), and has access to all of the HTML and CSS used to create the page.
This means that you can use JavaScript to 'change' things on the page in response to user actions, without having to go to the server, or reload the page.
To change the page with data from the server... you can check out the JavaScript AJAX Tutorial.
For now, we're going to look at pure JavaScript interaction with the HTML page
The first thing we need to know how to do, is how to target (get a reference to) an element on the page.
You can do this in a number of ways:
<script>
document.getElementById("mydiv") will fetch a reference to the element that has an id of "mydiv", and store it in a variable called mydiv.
var mydiv=document.getElementById("mydiv");
</script>
<html>
<head>
<title></title>
</head>
<body>
<div id="mydiv"></div>
</body>
</html>
<script>
document.body.getElementByTagName("div") will fetch a reference to all the div elements on the page, regardless of their id or class, and stores them in an array (because there will be more than 1) called alldivs. You'd access each div element with "alldivs[0]", "alldivs[1]","alldivs[2]" etc.
var alldivs=document.body.getElementsByTagName("div");
</script>
<html>
<head>
<title></title>
</head>
<body>
<div id="mydiv"></div>
<div class="mydiv"></div>
<div></div>
</body>
</html>
<script>
With forms, you have 2 ways to get a reference to the form itself or one of it's inputs.
var inputname=document.myform.username;
//or
var inputname=document.getElementById("username");
</script>
<html>
<head>
<title></title>
</head>
<body>
<form name="myform">
<input type="text" name="username" id="username">
</form>
</body>
</html>
document.myform.username targets the form by using the forms' name, and the name of the input element within it that you're after.
If you'd given the form input an id as well, then you can also use the normal 'document.getElementById("username") to fetch a reference to the username input element.
So now we can access any element on the page. What can we do with that?
The simple answer is... anything! We won't go into detail about all of the things you can do, but we will mention a few of the more common and obvious changes.
Changing an elements display (hiding, or unhiding an element):
<script>
var mydiv=document.getElementById("mydiv");
mydiv.style.display="none";
//or
mydiv.style.display="block";
</script>
<html>
<head>
<title></title>
</head>
<body>
<div id="mydiv"></div>
</body>
</html>
Changing an elements class name (so it's appearance changes):
Some browsers use class, some use className!
<script>
var mydiv=document.getElementById("mydiv");
mydiv.className="mydiv";
//and/or
mydiv.class="mydiv";
</script>
<html>
<head>
<title></title>
</head>
<body>
<div id="mydiv"></div>
</body>
</html>
Changing an elements appearance directly (not using classes):
<script>
var mydiv=document.getElementById("mydiv");
mydiv.style.backgroundColor="#ff0000";
</script>
<html>
<head>
<title></title>
</head>
<body>
<div id="mydiv"></div>
</body>
</html>
Move an element to anywhere we want on the page:
<script>
var mydiv=document.getElementById("mydiv");
mydiv.style.position="absolute";
mydiv.style.top="50px;";
mydiv.style.left="300px";
</script>
<html>
<head>
<title></title>
</head>
<body>
<div id="mydiv"></div>
</body>
</html>
Add, or removing, HTML/Text from within an element:
<script>
var mydiv1=document.getElementById("mydiv1");
var mydiv2=document.getElementById("mydiv2");
var mydiv1text=mydiv1.innerHTML;
mydiv1.innerHTML='';
mydiv2.innerHTML=mydiv1text;
</script>
<html>
<head>
<title></title>
</head>
<body>
<div id="mydiv1">Div 1</div>
<div id="mydiv2"></div>
</body>
</html>