<div id='demo'>
</div>
The button above is marked up like this:
<input type='button' value='click me'
id='clickbutton' onclick="clickme();" />
That "onclick" tag attribute triggers a small javascript program:
function clickme(){
var x=document.getElementById('demo');
alert('Current contents of *demo*:\n'+x.firstChild.nodeValue);
alert('Now, we\'re going to change *demo* to something else');
x.innerHTML='Love those bears!'; //Using a method
}
.demo{
position: fixed; // Keeps it from scrolling
width: 210px;
padding: 5px;
background-color: #ccccaa;
margin-top: -30px;
margin-left: -250px;
}
This box is actually inside the content div,but
positioned *relative* to where it would normally show up with the margin
styles. And then of course, there has to be space in the layout so that as
the page scrolls it's not blocking anything important.
Javascript is a scripting language (programming language) used for dynamically changing the contents of a web page.
Javascript programs depend on an interpreter built into the web browser. That means that most robots won't "see" things you do with javascript.
One typical way that javascript programs are invoked is through triggers attached to (in recent browsers) pretty much any tag. Triggers, also called events, include...
<input type='button' value='onmouseover test' id='mouseoutbutton' onmouseover="showMouseOver();" />
onmouseout test
<span style='color:red' id='mouseouttext' onmouseout="showMouseOut();" />onmouseout test</span>
onclick
Mouse is clicked on some element
onsubmit
The 'submit' button is pressed (applies to the <form> tag).
onchange
One item from a drop down menu is selected (applies to the <SELECT> tag)
onLoad
A page loads (applies to the <BODY> tag)
onfocus
an element (like an input box) is selected
onblur
focus leaves an element (like an input box).
keydown
Key is pushed down in an element that has focus.
See: Javascript event listing at webmonkey.com
Your javascript 'scripts' are usually written as functions that you put in an external file which you link to like this from your web page:
<script type="text/javascript" src="myfuncs.js"></script>
</head>
function loopExample(whatelement){
// set a default value for unspecified function arguments:
if (! whatelement){
var whatelement = document.getElementById('demo');
}
var mybikes = new Array();
mybikes[0] = "Schwinn coaster brake";
mybikes[1] = "Specialized stump jumper mountain bike";
mybikes[2] = "Bianchi ten speed from 1982";
var htmlList = "<p>Bicycle collection</p>\n<ul>\n";
for (var x in mybikes){
htmlList += "<li>" + mybikes[x] + "</li>\n";
}
htmlList += "\n</ul>";
whatelement.innerHTML += htmlList;
}
This paragraph is written with this attribute in its p tag: onclick='loopExample(this);'.
Click anywhere in the paragraph to see what happens.
Javascript doesn't enforce variable declarations using the var keyword.
But without it, variables are assumed to have global scope. So var x
in mybikes insures that as x changes in the loop, that
it doesn't affect any other program unit that is using x for some
global purpose.
Javascript unresponsive? Turn on the Error Console to see javascript error messages. In Firefox:
Turn on the error console, and then try this button which calls a function that hasn't been written.
Under the Level 1 DOM, each 'object' in a web page is called a node. This markup:
<p id="sample" align="right">A very short paragraph</p>
consists of four nodes:
Since that text node is contained in the paragraph tag set we can talk about it as a child node of the p element. From another point of view, the p element is the parent node of 'A very short paragraph'.
Attribute nodes are not considered children of the element.
Javascript provides a whole host of collections and other data structures for getting at all the nodes in a document in many ways. Thus, for example
document.getElementsByTagName('p')[3].firstchild
refers to the first textnode of the 4th paragraph. But it's cumbersome to cycle through the DOM tree in this way. By far the most frequent DOM method we'll use to go after a particular part of the page is:
document.getElementById('somehook')
where we've already put the HTML attribute id='somehook' into the element
markup that we know we're going to want to manipulate with javascript.
Here then are some examples showing how to manipulate element attributes, styles, and content (children nodes)
document.getElementById('demo').align='right';
document.getElementById('demobutton').value='..to something else';
document.getElementById('demo').style.fontSize='2em';
document.getElementById('demo').style.color='#3a6';
function showThumb(){
var newContents = "<p>";
var anElement = document.getElementById('demo');
newContents += "<a href=\"http://www.goshen.edu/sst/peru-fall09/\">";
newContents += "<img src=\"0g/somethumb.jpg\" />";
newContents += "<br />Peru SST";
newContents += "</p>";
anElement.style.fontSize = "";
anElement.innerHTML = newContents;
}
Concoct a web page with three text-input boxes (google 'html input tag')
Set up the first one with type="text" . Put some helpful text like "start here" as the value for the box. When someone clicks into the box, erase the value (set it to ""). When focus leaves the box, pop up an "alert" dialog showing what was typed. Or, if nothing was typed, show a message that nothing was typed in.
The last two boxes should be set up as type="password" boxes. Put some text on the page asking someone to type a password, and then type it a second time in the next box. Set things up such that when focus leaves the second box, your script checks to make sure the values of both boxes are the same.
If they're not, display a message to the right of the first password box saying that a second try is needed.
If they *are* the same, replace any previous error messages with a message saying the passwords match.
Javascript tutorial at w3schools