JavaScript – Making Web Pages Very Interesting !
1 The very interesting Clock you just saw was certainly an attention getter. It’s a very clever use of some JavaScript programming.
JavaScript is commonly found in WebPages. It is a sub set of a much larger programming language called Java. Java looks a little like the C programming language, and you’ll see Java if you examine the source code of a web page.
I certainly didn’t write the Clock software. It came to me in an E-mail one day, a lucky day indeed. It was written by a very good computer programmer, possibly a teenager! So what can the rest of us do…….. those of us who are not programmers?
2 There is a lot of free JavaScript code available to include in your web page. You’ll find some at http://www.javascript.com/ ; and http://javascript.internet.com/ is another one. Try each of these sites and see the range of available items that are already available and ready to go on your web page.
These are just two popular sites. You can search the Internet and find a whole lot more.
Basically, the JavaScript is copied and pasted into the source code of your web page. I use notepad to do this.
3 When you find an interesting JavaScript example on the Internet you will usually find both the code and instructions on what to do with it. You’ll be copying and pasting the code into a web page.
DO THIS - You start by bringing up Notepad. Enter the usual “html”, “head”, and “body” tags into the document.
<html>
<head>
</head>
<body>
</body>
</html>
When you have this in Notepad – save the work:
This next part is tricky – pay attention – you’re kind of tricking Notepad into saving as an html file rather than a txt file:
File, Save As – enter Calculator.html – click Save.
Notepad will correctly save as a .html file rather than a txt file – even though it says it’s going to save as a txt file.
4 Next – TO DO :
Professor Sedelmeyer has provided some JavaScript for you to try – It’s all the tiny text that comes next. Use the mouse to block it, then copy and paste this into the BODY part of your Notepad document, then save it.
<FORM
NAME="Calc">
<TABLE BORDER=4>
<TR>
<TD>
<INPUT TYPE="text" NAME="Input"
Size="16">
<br>
</TD>
</TR>
<TR>
<TD>
<INPUT TYPE="button" NAME="one"
VALUE=" 1 " OnClick="Calc.Input.value += '1'">
<INPUT TYPE="button" NAME="two"
VALUE=" 2 " OnCLick="Calc.Input.value += '2'">
<INPUT TYPE="button" NAME="three" VALUE="
3 " OnClick="Calc.Input.value
+= '3'">
<INPUT TYPE="button" NAME="plus"
VALUE=" + " OnClick="Calc.Input.value += ' + '">
<br>
<INPUT TYPE="button" NAME="four"
VALUE=" 4 " OnClick="Calc.Input.value += '4'">
<INPUT TYPE="button" NAME="five"
VALUE=" 5 " OnCLick="Calc.Input.value += '5'">
<INPUT TYPE="button" NAME="six"
VALUE=" 6 " OnClick="Calc.Input.value += '6'">
<INPUT TYPE="button" NAME="minus" VALUE="
- " OnClick="Calc.Input.value
+= ' - '">
<br>
<INPUT TYPE="button" NAME="seven" VALUE="
7 " OnClick="Calc.Input.value
+= '7'">
<INPUT TYPE="button" NAME="eight" VALUE="
8 " OnCLick="Calc.Input.value
+= '8'">
<INPUT TYPE="button" NAME="nine"
VALUE=" 9 " OnClick="Calc.Input.value += '9'">
<INPUT TYPE="button" NAME="times" VALUE="
x " OnClick="Calc.Input.value
+= ' * '">
<br>
<INPUT TYPE="button" NAME="clear" VALUE="
c " OnClick="Calc.Input.value
= ''">
<INPUT TYPE="button" NAME="zero"
VALUE=" 0 " OnClick="Calc.Input.value += '0'">
<INPUT TYPE="button" NAME="DoIt"
VALUE=" = " OnClick="Calc.Input.value = eval(Calc.Input.value)">
<INPUT TYPE="button" NAME="div"
VALUE=" / " OnClick="Calc.Input.value += ' / '">
<br>
</TD>
</TR>
</TABLE>
</FORM>
<p align="center"><font face="arial"
size="-2">This free script provided by</font><br>
<font face="arial, helvetica"
size="-2"><a href="http://javascriptkit.com">JavaScript
Kit</a></font></p>
Now open your file by double clicking. Internet Explorer should come up and you should see a working Calculator.
And it should work !
5 Here is another example of JavaScript called ClockDash:
|
|
|
|
|
|
|
|
|
|
Free JavaScripts provided
by The
JavaScript Source
Another example is this decimal
to binary converter – whole numbers only:
Free JavaScripts provided
by The
JavaScript Source
There are so many of these, and it sure is a temptation to put some more on this page. Extra points if you put one on your webpage!!
Try the floating astronaut!
6 What are you supposed to get from this?
An appreciation of what web page design can be, and a slight idea of how special effects are created.
There’s no specific JavaScript assignment this week, that will come next week when you search for a JavaScript example on the Internet and incorporate it into a new web page.
7 For more information, visit the site of Java Joe! Aka my friend Professor Joe Biegen – Java teacher !
There’s a
nice JavaScript lesson there to go through!
11_14_2004
acd