Free Web Start Help and Advice

HTML Final Lessons. JavaScript.

Time to learn some basic scripting.

Here I show you how to create a button or a link that runs a browser script (specifically JavaScript).

<input type="button" onclick="alarming();" value="Click me to see the script in action." />
<a href="javascript:alarming();">Click me to see the script in action.</a>

Cool stuff, but it won't do anything until we write the script. Here we go....

<html>
<head>
<script language="JavaScript" type="text/javascript">
function alarming(){
alert('It works!');
}
</script>
</head>
<body>
<input type="button" onclick="alarming();" value="Click me to see the script in action." />
<br />
<a href="javascript:alarming();">Click me to see the script in action.</a>
</body>
</html>

Here is the working sample:

Click me to see the scrip in action.

Notice that the script must be placed inside the <head> tags. It will also be nested between <script> tags.

JavaScript can do almost anything controlled by the browser, which can be history navigation, mathematical calculations, and changing elements on the page.

<html>
<head>
<script language="JavaScript" type="text/javascript">
function navi(){
//go back one page
history.go(-1);
}
function math(numm){
var x = 3;
alert(x*numm);
}
function change(){
document.getElementById("post").value = "Hooray!";
}
</script>
</head>

<body>
<p><input type="button" onclick="navi();" value="click to go back one page" /></p>

<p><a href="javascript:math(2);">Click to see 2 times 3.</a></p>

<p><input type="button" onclick="change();" value="Click to update the form." /><br />
<input type="text" id="post" value="Boooo!" /></p>
</body>
</html>

Here is the code in action:

Click to see 2 times 3.

Note that you can add comments in JavaScript using //. The entire line will be a comment, and only that one line.

You cannot use reserved words for your function names. Here is a list of reserved words.

When calling a function, you can pass values inside the (). These values can be predefined, like in my example, or they can be variables.

Elements on your page can be identified by JavaScript. The easiest way is to give the element an ID, and then reference the ID.

Continue Learning