Introduction: Reusing Web Pages.
More by the author:
About: computoman.blogspot.com Bytesize articles instead of a trilogy in one post.
javascript will work on most any platform that has a browser. (i.e. Ipad, Android, Personal computer, and many touchpads. Always in search of new ways to use the code that gets pushed into my web browser. One thing is nice to do is to save the page. You can then later modify or change it to your needs. Hopefully you can see several examples you can take advantage of.
If you inspect a web page, javascripts generally are sell contained code that lie between a tagging.
See picture:
If you inspect a web page, javascripts generally are sell contained code that lie between a tagging.
See picture:
Step 1: Exacto Knife to an Existing Page.
One nice thing is that if you find a page with an educational tool that you need, under certain circumstances, you can save the page for later use. In some cases, if it is going into an educational environment, the advertisements have to go away. That is what was done with this web page. See pictures. You will also need to save the images and then edit the code to look for them locally.
for example we have a web page that has the script we want to use and the dots represent code that is not needed, we can just remote those unneeded lines lined.
before:
[code]
<html>
<body>
<h1>My First Web Page</h1>
...
...
...
...
....
....
<script type="text/javascript">
document.write("<p>" + Date() + "</p>");
</script>
...
...
...
...
</body>
</html>
[/code]
after;
[code]
<html>
<body>
<h1>My First Web Page</h1>
<script type="text/javascript">
document.write("<p>" + Date() + "</p>");
</script>
</body>
</html>
[/code]
for example we have a web page that has the script we want to use and the dots represent code that is not needed, we can just remote those unneeded lines lined.
before:
[code]
<html>
<body>
<h1>My First Web Page</h1>
...
...
...
...
....
....
<script type="text/javascript">
document.write("<p>" + Date() + "</p>");
</script>
...
...
...
...
</body>
</html>
[/code]
after;
[code]
<html>
<body>
<h1>My First Web Page</h1>
<script type="text/javascript">
document.write("<p>" + Date() + "</p>");
</script>
</body>
</html>
[/code]
Step 2: Javascript to Html.
You can get a lot of free scripts and put them to use. i.e.: http://www.free-javascripts.com.
Before:
[code]
<script type="text/javascript">
document.write("<p>" + Date() + "</p>");
</script>
[/code]
In this case you will just get the javascript code and it may or may not work as a file in a browser.. so you just surround the javascript with the html and body tags and then save it as an html file. You could certainly add other code of course.
After:
[code]
<html>
<body>
<h1>My First Web Page</h1>
<script type="text/javascript">
document.write("<p>" + Date() + "</p>");
</script>
</body>
</html>
[/code]
Looks exactly like the code with first worked with.
Before:
[code]
<script type="text/javascript">
document.write("<p>" + Date() + "</p>");
</script>
[/code]
In this case you will just get the javascript code and it may or may not work as a file in a browser.. so you just surround the javascript with the html and body tags and then save it as an html file. You could certainly add other code of course.
After:
[code]
<html>
<body>
<h1>My First Web Page</h1>
<script type="text/javascript">
document.write("<p>" + Date() + "</p>");
</script>
</body>
</html>
[/code]
Looks exactly like the code with first worked with.
Step 3: Functions.
Some scripts get a little more interesting to set up if functions or other code that has to be preloaded so to speakare involved. Then you may have to put that part of the script in the header.You in this case have to download the images in the same place as the html file for it to use.
[code]
<script type="text/javascript">
/***********************************************
* JavaScript Image Clock- by JavaScript Kit (www.javascriptkit.com)
* This notice must stay intact for usage
* Visit JavaScript Kit at http://www.javascriptkit.com/ for this script and 100s more
***********************************************/
var imageclock=new Object()
//Enter path to clock digit images here, in order of 0-9, then "am/pm", then colon image:
imageclock.digits=["c0.gif", "c1.gif", "c2.gif", "c3.gif", "c4.gif", "c5.gif", "c6.gif", "c7.gif", "c8.gif", "c9.gif", "cam.gif", "cpm.gif", "colon.gif"]
imageclock.instances=0
var preloadimages=[]
for (var i=0; i<imageclock.digits.length; i++){ //preload images
preloadimages[i]=new Image()
preloadimages[i].src=imageclock.digits[i]
}
imageclock.imageHTML=function(timestring){ //return timestring (ie: 1:56:38) into string of images instead
var sections=timestring.split(":")
if (sections[0]=="0") //If hour field is 0 (aka 12 AM)
sections[0]="12"
else if (sections[0]>=13)
sections[0]=sections[0]-12+""
for (var i=0; i<sections.length; i++){
if (sections[i].length==1)
sections[i]='<img src="'+imageclock.digits[0]+'" />'+'<img src="'+imageclock.digits[parseInt(sections[i])]+'" />'
else
sections[i]='<img src="'+imageclock.digits[parseInt(sections[i].charAt(0))]+'" />'+'<img src="'+imageclock.digits[parseInt(sections[i].charAt(1))]+'" />'
}
return sections[0]+'<img src="'+imageclock.digits[12]+'" />'+sections[1]+'<img src="'+imageclock.digits[12]+'" />'+sections[2]
}
imageclock.display=function(){
var clockinstance=this
this.spanid="clockspan"+(imageclock.instances++)
document.write('<span id="'+this.spanid+'"></span>')
this.update()
setInterval(function(){clockinstance.update()}, 1000)
}
imageclock.display.prototype.update=function(){
var dateobj=new Date()
var currenttime=dateobj.getHours()+":"+dateobj.getMinutes()+":"+dateobj.getSeconds() //create time string
var currenttimeHTML=imageclock.imageHTML(currenttime)+'<img src="'+((dateobj.getHours()>=12)? imageclock.digits[11] : imageclock.digits[10])+'" />'
document.getElementById(this.spanid).innerHTML=currenttimeHTML
}
</script>
[/code]
Will have to go into the header. but you still need a little javascript to take advantage of it.
Whole page:
[code]
<html>
<head>
<script type="text/javascript">
/***********************************************
* JavaScript Image Clock- by JavaScript Kit (www.javascriptkit.com)
* This notice must stay intact for usage
* Visit JavaScript Kit at http://www.javascriptkit.com/ for this script and 100s more
***********************************************/
var imageclock=new Object()
//Enter path to clock digit images here, in order of 0-9, then "am/pm", then colon image:
imageclock.digits=["c0.gif", "c1.gif", "c2.gif", "c3.gif", "c4.gif", "c5.gif", "c6.gif", "c7.gif", "c8.gif", "c9.gif", "cam.gif", "cpm.gif", "colon.gif"]
imageclock.instances=0
var preloadimages=[]
for (var i=0; i<imageclock.digits.length; i++){ //preload images
preloadimages[i]=new Image()
preloadimages[i].src=imageclock.digits[i]
}
imageclock.imageHTML=function(timestring){ //return timestring (ie: 1:56:38) into string of images instead
var sections=timestring.split(":")
if (sections[0]=="0") //If hour field is 0 (aka 12 AM)
sections[0]="12"
else if (sections[0]>=13)
sections[0]=sections[0]-12+""
for (var i=0; i<sections.length; i++){
if (sections[i].length==1)
sections[i]='<img src="'+imageclock.digits[0]+'" />'+'<img src="'+imageclock.digits[parseInt(sections[i])]+'" />'
else
sections[i]='<img src="'+imageclock.digits[parseInt(sections[i].charAt(0))]+'" />'+'<img src="'+imageclock.digits[parseInt(sections[i].charAt(1))]+'" />'
}
return sections[0]+'<img src="'+imageclock.digits[12]+'" />'+sections[1]+'<img src="'+imageclock.digits[12]+'" />'+sections[2]
}
imageclock.display=function(){
var clockinstance=this
this.spanid="clockspan"+(imageclock.instances++)
document.write('<span id="'+this.spanid+'"></span>')
this.update()
setInterval(function(){clockinstance.update()}, 1000)
}
imageclock.display.prototype.update=function(){
var dateobj=new Date()
var currenttime=dateobj.getHours()+":"+dateobj.getMinutes()+":"+dateobj.getSeconds() //create time string
var currenttimeHTML=imageclock.imageHTML(currenttime)+'<img src="'+((dateobj.getHours()>=12)? imageclock.digits[11] : imageclock.digits[10])+'" />'
document.getElementById(this.spanid).innerHTML=currenttimeHTML
}
</script>
<head>
<body>
<script type="text/javascript">
new imageclock.display()
</script>
</body>
</html>
[/code]
[code]
<script type="text/javascript">
/***********************************************
* JavaScript Image Clock- by JavaScript Kit (www.javascriptkit.com)
* This notice must stay intact for usage
* Visit JavaScript Kit at http://www.javascriptkit.com/ for this script and 100s more
***********************************************/
var imageclock=new Object()
//Enter path to clock digit images here, in order of 0-9, then "am/pm", then colon image:
imageclock.digits=["c0.gif", "c1.gif", "c2.gif", "c3.gif", "c4.gif", "c5.gif", "c6.gif", "c7.gif", "c8.gif", "c9.gif", "cam.gif", "cpm.gif", "colon.gif"]
imageclock.instances=0
var preloadimages=[]
for (var i=0; i<imageclock.digits.length; i++){ //preload images
preloadimages[i]=new Image()
preloadimages[i].src=imageclock.digits[i]
}
imageclock.imageHTML=function(timestring){ //return timestring (ie: 1:56:38) into string of images instead
var sections=timestring.split(":")
if (sections[0]=="0") //If hour field is 0 (aka 12 AM)
sections[0]="12"
else if (sections[0]>=13)
sections[0]=sections[0]-12+""
for (var i=0; i<sections.length; i++){
if (sections[i].length==1)
sections[i]='<img src="'+imageclock.digits[0]+'" />'+'<img src="'+imageclock.digits[parseInt(sections[i])]+'" />'
else
sections[i]='<img src="'+imageclock.digits[parseInt(sections[i].charAt(0))]+'" />'+'<img src="'+imageclock.digits[parseInt(sections[i].charAt(1))]+'" />'
}
return sections[0]+'<img src="'+imageclock.digits[12]+'" />'+sections[1]+'<img src="'+imageclock.digits[12]+'" />'+sections[2]
}
imageclock.display=function(){
var clockinstance=this
this.spanid="clockspan"+(imageclock.instances++)
document.write('<span id="'+this.spanid+'"></span>')
this.update()
setInterval(function(){clockinstance.update()}, 1000)
}
imageclock.display.prototype.update=function(){
var dateobj=new Date()
var currenttime=dateobj.getHours()+":"+dateobj.getMinutes()+":"+dateobj.getSeconds() //create time string
var currenttimeHTML=imageclock.imageHTML(currenttime)+'<img src="'+((dateobj.getHours()>=12)? imageclock.digits[11] : imageclock.digits[10])+'" />'
document.getElementById(this.spanid).innerHTML=currenttimeHTML
}
</script>
[/code]
Will have to go into the header. but you still need a little javascript to take advantage of it.
Whole page:
[code]
<html>
<head>
<script type="text/javascript">
/***********************************************
* JavaScript Image Clock- by JavaScript Kit (www.javascriptkit.com)
* This notice must stay intact for usage
* Visit JavaScript Kit at http://www.javascriptkit.com/ for this script and 100s more
***********************************************/
var imageclock=new Object()
//Enter path to clock digit images here, in order of 0-9, then "am/pm", then colon image:
imageclock.digits=["c0.gif", "c1.gif", "c2.gif", "c3.gif", "c4.gif", "c5.gif", "c6.gif", "c7.gif", "c8.gif", "c9.gif", "cam.gif", "cpm.gif", "colon.gif"]
imageclock.instances=0
var preloadimages=[]
for (var i=0; i<imageclock.digits.length; i++){ //preload images
preloadimages[i]=new Image()
preloadimages[i].src=imageclock.digits[i]
}
imageclock.imageHTML=function(timestring){ //return timestring (ie: 1:56:38) into string of images instead
var sections=timestring.split(":")
if (sections[0]=="0") //If hour field is 0 (aka 12 AM)
sections[0]="12"
else if (sections[0]>=13)
sections[0]=sections[0]-12+""
for (var i=0; i<sections.length; i++){
if (sections[i].length==1)
sections[i]='<img src="'+imageclock.digits[0]+'" />'+'<img src="'+imageclock.digits[parseInt(sections[i])]+'" />'
else
sections[i]='<img src="'+imageclock.digits[parseInt(sections[i].charAt(0))]+'" />'+'<img src="'+imageclock.digits[parseInt(sections[i].charAt(1))]+'" />'
}
return sections[0]+'<img src="'+imageclock.digits[12]+'" />'+sections[1]+'<img src="'+imageclock.digits[12]+'" />'+sections[2]
}
imageclock.display=function(){
var clockinstance=this
this.spanid="clockspan"+(imageclock.instances++)
document.write('<span id="'+this.spanid+'"></span>')
this.update()
setInterval(function(){clockinstance.update()}, 1000)
}
imageclock.display.prototype.update=function(){
var dateobj=new Date()
var currenttime=dateobj.getHours()+":"+dateobj.getMinutes()+":"+dateobj.getSeconds() //create time string
var currenttimeHTML=imageclock.imageHTML(currenttime)+'<img src="'+((dateobj.getHours()>=12)? imageclock.digits[11] : imageclock.digits[10])+'" />'
document.getElementById(this.spanid).innerHTML=currenttimeHTML
}
</script>
<head>
<body>
<script type="text/javascript">
new imageclock.display()
</script>
</body>
</html>
[/code]
Attachments
Step 4: Temperature Conversion.
The page where I found this one only had one of the conversions. I wanted both. No problem. A few lines later and it was done.
Original code:
[code]
My updated code:
[code]
<html>
<head>
</head>
<br>
<h2>Temperature conversion</h2>
(Enter a value and then press the = for the temperature you want to convert)
<hr>
<br>
<script type="text/javascript">
function temp (form) {
form.fahrenheit.value = form.celsius.value*1.8+32;
}
function temp1 (form) {
form.celsius1.value = (form.fahrenheit1.value-32)/1.8;
}
</script>
<form>
<div align="center"><center><p><input type="text" size="15" name="celsius"> <strong>Degrees
Celsius</strong> <input type="button" value=" = " onclick="temp(this.form)"> <input
type="text" size="15" name="fahrenheit"> <strong>Degrees Fahrenheit</strong> </p>
</center></div>
</form>
<br>
<center> --------------- or ------------------</center>
<br>
<form>
<div align="center"><center><p><input type="text" size="15" name="fahrenheit1"> <strong>Degrees Fahrenheit</strong> <input type="button" value=" = " onclick="temp1(this.form)"> <input
type="text" size="15" name="celsius1"> <strong>Degrees Celsius</strong> </p> </center></div>
</form>
</body>
</html>
[/code]
Original code:
[code]
<script type="text/javascript">
function temp (form) {
form.fahrenheit.value = form.celsius.value*1.8+32;
}
</script>
<form>
<div align="center"><center><p><input type="text" size="15" name="celsius"> <strong>Degrees
Celsius</strong> <input type="button" value=" = " onclick="temp(this.form)"> <input
type="text" size="15" name="fahrenheit"> <strong>Degrees Fahrenheit</strong> </p>
</center></div>
</form>
My updated code:
[code]
<html>
<head>
</head>
<br>
<h2>Temperature conversion</h2>
(Enter a value and then press the = for the temperature you want to convert)
<hr>
<br>
<script type="text/javascript">
function temp (form) {
form.fahrenheit.value = form.celsius.value*1.8+32;
}
function temp1 (form) {
form.celsius1.value = (form.fahrenheit1.value-32)/1.8;
}
</script>
<form>
<div align="center"><center><p><input type="text" size="15" name="celsius"> <strong>Degrees
Celsius</strong> <input type="button" value=" = " onclick="temp(this.form)"> <input
type="text" size="15" name="fahrenheit"> <strong>Degrees Fahrenheit</strong> </p>
</center></div>
</form>
<br>
<center> --------------- or ------------------</center>
<br>
<form>
<div align="center"><center><p><input type="text" size="15" name="fahrenheit1"> <strong>Degrees Fahrenheit</strong> <input type="button" value=" = " onclick="temp1(this.form)"> <input
type="text" size="15" name="celsius1"> <strong>Degrees Celsius</strong> </p> </center></div>
</form>
</body>
</html>
[/code]
Step 5: Hangman
Simple hangman game:
[code]
<center>
<table border=8 bgcolor=white width=60% cellspacing=0>
<tr><td>
<center>
<h2>Hangman!</h2><br>
<b><h3><font color=red>Topic:</font>
Presidents of The United States</h3></b>
<hr><br>
<SCRIPT LANGUAGE="JavaScript">
<!-- Original: Rick Glusick -->
<!-- Begin
function getCookie (name) {
var dcookie = document.cookie;
var cname = name + "=";
var clen = dcookie.length;
var cbegin = 0;
while (cbegin < clen) {
var vbegin = cbegin + cname.length;
if (dcookie.substring(cbegin, vbegin) == cname) {
var vend = dcookie.indexOf (";", vbegin);
if (vend == -1) vend = clen;
return unescape(dcookie.substring(vbegin, vend));
}
cbegin = dcookie.indexOf(" ", cbegin) + 1;
if (cbegin == 0) break;
}
return null;
}
function setCookie (name, value, expires) {
if (!expires) expires = new Date();
document.cookie = name + "=" + escape (value) + "; expires=" + expires.toGMTString() + "; path=/";
}
function delCookie (name) {
var expireNow = new Date();
document.cookie = name + "=" + "; expires=Thu, 01-Jan-70 00:00:01 GMT" + "; path=/";
}
var Alphabet = new initAlphaArray()
var NumOfWords = 42;
var SaveData = "";
var ImageNum = "";
var LettersSelected = "";
var RandomWord = "";
var DisplayWord = "";
var position = 0;
var word = new WordList();
var expdate = new Date();
var RandomNumber = (expdate.getSeconds())%NumOfWords;
function initAlphaArray() {
this.length = 26
this[0] = "A"
this[1] = "B"
this[2] = "C"
this[3] = "D"
this[4] = "E"
this[5] = "F"
this[6] = "G"
this[7] = "H"
this[8] = "I"
this[9] = "J"
this[10] = "K"
this[11] = "L"
this[12] = "M"
this[13] = "N"
this[14] = "O"
this[15] = "P"
this[16] = "Q"
this[17] = "R"
this[18] = "S"
this[19] = "T"
this[20] = "U"
this[21] = "V"
this[22] = "W"
this[23] = "X"
this[24] = "Y"
this[25] = "Z"
}
function WordList() {
this.length = NumOfWords;
this[0] = "GEORGE WASHINGTON";
this[1] = "JOHN ADAMS";
this[2] = "THOMAS JEFFERSON";
this[3] = "JAMES MADISON";
this[4] = "JAMES MONROE";
this[5] = "JOHN QUINCY ADAMS";
this[6] = "ANDREW JACKSON";
this[7] = "MARTIN VAN BUREN";
this[8] = "WILLIAM HENRY HARRISON";
this[9] = "JOHN TYLER";
this[10] = "JAMES POLK";
this[11] = "ZACHARY TAYLOR";
this[12] = "MILLARD FILLMORE";
this[13] = "FRANKLIN PIERCE";
this[14] = "JAMES BUCHANAN";
this[15] = "ABRAHAM LINCOLN";
this[16] = "ANDREW JOHNSON";
this[17] = "ULYSSES GRANT";
this[18] = "RUTHERFORD HAYES";
this[19] = "JAMES GARFIELD";
this[20] = "CHESTER ARTHUR";
this[21] = "GROVER CLEVELAND";
this[22] = "BENJAMIN HARRISON";
this[23] = "GROVER CLEVELAND";
this[24] = "WILLIAM MCKINLEY";
this[25] = "THEODORE ROOSEVELT";
this[26] = "WILLIAM HOWARD TAFT";
this[27] = "WOODROW WILSON";
this[28] = "WARREN HARDING";
this[29] = "CALVIN COOLIDGE";
this[30] = "HERBERT HOOVER";
this[31] = "FRANKLIN ROOSEVELT";
this[32] = "HARRY TRUMAN";
this[33] = "DWIGHT EISENHOWER";
this[34] = "JOHN KENNEDY";
this[35] = "LYNDON JOHNSON";
this[36] = "RICHARD NIXON";
this[37] = "GERALD FORD";
this[38] = "JIMMY CARTER";
this[39] = "RONALD REAGAN";
this[40] = "GEORGE BUSH";
this[41] = "BILL CLINTON";
}
function availableLetters(i) {
if (LettersSelected.charAt(i)==Alphabet[i])
document.write('<TD ALIGN=CENTER VALIGN=CENTER WIDTH=20 HEIGHT=12>' +
'<B><A HREF="javascript:LoadNextPage('+i+',\''+Alphabet[i]+
'\')">'+Alphabet[i]+'</A></B></TD>');
else
document.write('<TD ALIGN=CENTER VALIGN=CENTER WIDTH=20 HEIGHT=12> </TD>');
}
function LoadNextPage(selected,letter) {
var j=0;
var HoldLettersSelected = LettersSelected;
LettersSelected = "";
if (selected == 0) {
for (j=1; j<=25; j++) {
LettersSelected += HoldLettersSelected.charAt(j);
}
LettersSelected = "^" + LettersSelected;
}
else if (selected == 25) {
for (j=0; j<=24; j++) {
LettersSelected += HoldLettersSelected.charAt(j);
}
LettersSelected += "^";
}
else {
for (j=0; j<selected; j++)
{
LettersSelected += HoldLettersSelected.charAt(j);
}
LettersSelected += "^";
for (j=selected+1; j<=25; j++) {
LettersSelected += HoldLettersSelected.charAt(j);
}
}
SaveData = ImageNum + LettersSelected + RandomWord + "*";
setCookie("_HangMan", SaveData, expdate);
history.go(0);
}
// Sets a cookie that will expire in 10 days
expdate.setTime (expdate.getTime() + (1000*60*60*24*10));
if(getCookie("_HangMan") == null)
{
ImageNum = "A";
LettersSelected = "ABCDEFGHIJKLMNOPQRSTUVWXYZ";
RandomWord = word[RandomNumber];
SaveData = ImageNum + LettersSelected + RandomWord + "*";
setCookie("_HangMan", SaveData, expdate);
}
else {
SaveData = getCookie("_HangMan");
ImageNum = SaveData.charAt(0);
for (position=1; position<=26; position++) {
LettersSelected += SaveData.charAt(position);
}
for (position=27; position<SaveData.indexOf("*"); position++) {
RandomWord += SaveData.charAt(position);
}
}
DisplayWord = "";
for (i=0; i<RandomWord.length; i++) {
if (RandomWord.charAt(i) == ' ') {
DisplayWord += " ";
}
else {
MatchFound = false;
for (j=0; j<=25; j++) {
if ((LettersSelected.charAt(j) == "^") && (RandomWord.charAt(i) == Alphabet[j])) {
DisplayWord += RandomWord.charAt(i);
MatchFound = true;
}
}
if (!MatchFound) DisplayWord += "-";
}
}
if (ImageNum == "J") {
document.write('<font color=red size=4>You Lost!<br>Answer: "' + RandomWord + '"</font>');
}
else if (RandomWord == DisplayWord) {
document.write('<font color=red size=8>You Win!</font>');
}
else {
document.write('<table>');
document.write('<tr>');
for (i=0; i<13; i++) availableLetters(i);
document.write('</tr>');
document.write('<tr>');
for (i=13; i<26; i++) availableLetters(i);
document.write('</tr>');
document.write('</table>');
}
document.write('<br>');
document.write('<br>');
document.write('<font size=9><tt>');
document.write(DisplayWord);
document.write('</tt></font>');
document.write('<form>');
document.write('<input type="button" VALUE="New Game"'+
'onClick="delCookie(\'_HangMan\');history.go(0);">');
document.write('</form>');
document.write('</center>');
// End -->
</SCRIPT>
</td></tr>
</table>
</center>
[/code]
[code]
<center>
<table border=8 bgcolor=white width=60% cellspacing=0>
<tr><td>
<center>
<h2>Hangman!</h2><br>
<b><h3><font color=red>Topic:</font>
Presidents of The United States</h3></b>
<hr><br>
<SCRIPT LANGUAGE="JavaScript">
<!-- Original: Rick Glusick -->
<!-- Begin
function getCookie (name) {
var dcookie = document.cookie;
var cname = name + "=";
var clen = dcookie.length;
var cbegin = 0;
while (cbegin < clen) {
var vbegin = cbegin + cname.length;
if (dcookie.substring(cbegin, vbegin) == cname) {
var vend = dcookie.indexOf (";", vbegin);
if (vend == -1) vend = clen;
return unescape(dcookie.substring(vbegin, vend));
}
cbegin = dcookie.indexOf(" ", cbegin) + 1;
if (cbegin == 0) break;
}
return null;
}
function setCookie (name, value, expires) {
if (!expires) expires = new Date();
document.cookie = name + "=" + escape (value) + "; expires=" + expires.toGMTString() + "; path=/";
}
function delCookie (name) {
var expireNow = new Date();
document.cookie = name + "=" + "; expires=Thu, 01-Jan-70 00:00:01 GMT" + "; path=/";
}
var Alphabet = new initAlphaArray()
var NumOfWords = 42;
var SaveData = "";
var ImageNum = "";
var LettersSelected = "";
var RandomWord = "";
var DisplayWord = "";
var position = 0;
var word = new WordList();
var expdate = new Date();
var RandomNumber = (expdate.getSeconds())%NumOfWords;
function initAlphaArray() {
this.length = 26
this[0] = "A"
this[1] = "B"
this[2] = "C"
this[3] = "D"
this[4] = "E"
this[5] = "F"
this[6] = "G"
this[7] = "H"
this[8] = "I"
this[9] = "J"
this[10] = "K"
this[11] = "L"
this[12] = "M"
this[13] = "N"
this[14] = "O"
this[15] = "P"
this[16] = "Q"
this[17] = "R"
this[18] = "S"
this[19] = "T"
this[20] = "U"
this[21] = "V"
this[22] = "W"
this[23] = "X"
this[24] = "Y"
this[25] = "Z"
}
function WordList() {
this.length = NumOfWords;
this[0] = "GEORGE WASHINGTON";
this[1] = "JOHN ADAMS";
this[2] = "THOMAS JEFFERSON";
this[3] = "JAMES MADISON";
this[4] = "JAMES MONROE";
this[5] = "JOHN QUINCY ADAMS";
this[6] = "ANDREW JACKSON";
this[7] = "MARTIN VAN BUREN";
this[8] = "WILLIAM HENRY HARRISON";
this[9] = "JOHN TYLER";
this[10] = "JAMES POLK";
this[11] = "ZACHARY TAYLOR";
this[12] = "MILLARD FILLMORE";
this[13] = "FRANKLIN PIERCE";
this[14] = "JAMES BUCHANAN";
this[15] = "ABRAHAM LINCOLN";
this[16] = "ANDREW JOHNSON";
this[17] = "ULYSSES GRANT";
this[18] = "RUTHERFORD HAYES";
this[19] = "JAMES GARFIELD";
this[20] = "CHESTER ARTHUR";
this[21] = "GROVER CLEVELAND";
this[22] = "BENJAMIN HARRISON";
this[23] = "GROVER CLEVELAND";
this[24] = "WILLIAM MCKINLEY";
this[25] = "THEODORE ROOSEVELT";
this[26] = "WILLIAM HOWARD TAFT";
this[27] = "WOODROW WILSON";
this[28] = "WARREN HARDING";
this[29] = "CALVIN COOLIDGE";
this[30] = "HERBERT HOOVER";
this[31] = "FRANKLIN ROOSEVELT";
this[32] = "HARRY TRUMAN";
this[33] = "DWIGHT EISENHOWER";
this[34] = "JOHN KENNEDY";
this[35] = "LYNDON JOHNSON";
this[36] = "RICHARD NIXON";
this[37] = "GERALD FORD";
this[38] = "JIMMY CARTER";
this[39] = "RONALD REAGAN";
this[40] = "GEORGE BUSH";
this[41] = "BILL CLINTON";
}
function availableLetters(i) {
if (LettersSelected.charAt(i)==Alphabet[i])
document.write('<TD ALIGN=CENTER VALIGN=CENTER WIDTH=20 HEIGHT=12>' +
'<B><A HREF="javascript:LoadNextPage('+i+',\''+Alphabet[i]+
'\')">'+Alphabet[i]+'</A></B></TD>');
else
document.write('<TD ALIGN=CENTER VALIGN=CENTER WIDTH=20 HEIGHT=12> </TD>');
}
function LoadNextPage(selected,letter) {
var j=0;
var HoldLettersSelected = LettersSelected;
LettersSelected = "";
if (selected == 0) {
for (j=1; j<=25; j++) {
LettersSelected += HoldLettersSelected.charAt(j);
}
LettersSelected = "^" + LettersSelected;
}
else if (selected == 25) {
for (j=0; j<=24; j++) {
LettersSelected += HoldLettersSelected.charAt(j);
}
LettersSelected += "^";
}
else {
for (j=0; j<selected; j++)
{
LettersSelected += HoldLettersSelected.charAt(j);
}
LettersSelected += "^";
for (j=selected+1; j<=25; j++) {
LettersSelected += HoldLettersSelected.charAt(j);
}
}
SaveData = ImageNum + LettersSelected + RandomWord + "*";
setCookie("_HangMan", SaveData, expdate);
history.go(0);
}
// Sets a cookie that will expire in 10 days
expdate.setTime (expdate.getTime() + (1000*60*60*24*10));
if(getCookie("_HangMan") == null)
{
ImageNum = "A";
LettersSelected = "ABCDEFGHIJKLMNOPQRSTUVWXYZ";
RandomWord = word[RandomNumber];
SaveData = ImageNum + LettersSelected + RandomWord + "*";
setCookie("_HangMan", SaveData, expdate);
}
else {
SaveData = getCookie("_HangMan");
ImageNum = SaveData.charAt(0);
for (position=1; position<=26; position++) {
LettersSelected += SaveData.charAt(position);
}
for (position=27; position<SaveData.indexOf("*"); position++) {
RandomWord += SaveData.charAt(position);
}
}
DisplayWord = "";
for (i=0; i<RandomWord.length; i++) {
if (RandomWord.charAt(i) == ' ') {
DisplayWord += " ";
}
else {
MatchFound = false;
for (j=0; j<=25; j++) {
if ((LettersSelected.charAt(j) == "^") && (RandomWord.charAt(i) == Alphabet[j])) {
DisplayWord += RandomWord.charAt(i);
MatchFound = true;
}
}
if (!MatchFound) DisplayWord += "-";
}
}
if (ImageNum == "J") {
document.write('<font color=red size=4>You Lost!<br>Answer: "' + RandomWord + '"</font>');
}
else if (RandomWord == DisplayWord) {
document.write('<font color=red size=8>You Win!</font>');
}
else {
document.write('<table>');
document.write('<tr>');
for (i=0; i<13; i++) availableLetters(i);
document.write('</tr>');
document.write('<tr>');
for (i=13; i<26; i++) availableLetters(i);
document.write('</tr>');
document.write('</table>');
}
document.write('<br>');
document.write('<br>');
document.write('<font size=9><tt>');
document.write(DisplayWord);
document.write('</tt></font>');
document.write('<form>');
document.write('<input type="button" VALUE="New Game"'+
'onClick="delCookie(\'_HangMan\');history.go(0);">');
document.write('</form>');
document.write('</center>');
// End -->
</SCRIPT>
</td></tr>
</table>
</center>
[/code]
Attachments
Step 6: Blackjack.
Game of blackjack:
[code]
<html>
<head>
<SCRIPT LANGUAGE="JavaScript">
<!-- Original: Mike McGrath (mike_mcgrath@lineone.net) -->
<!-- Web Site: http://home.clara.net/mikem -->
<!-- Begin
var gameOver; var cardCount;
function Shuffle(max){
var num=Math.random()*max;
return Math.round(num)+1;
}
function getSuit(){
suit = Shuffle(4);
if(suit == 1) return "Spades";
if(suit == 2) return "Clubs";
if(suit == 3) return "Diamonds";
else return "Hearts";
}
function cardName(card){
if(card == 1) return "Ace";
if(card == 11) return "Jack";
if(card == 12) return "Queen";
if(card == 13) return "King";
return "" + card;
}
function cardValue(card,strWho){
if(card == 1) {
if(strWho =="You" && document.display.you.value >10){
document.display.say2.value=document.display.say2.value+" Low"; return 1;}
else return 11; }
if(card > 10) return 10;
return card;
}
function PickACard(strWho){
card = Shuffle(12);
suit = getSuit();
if(strWho =="You")
document.display.say2.value=(cardName(card) + " of " + suit);
else
document.display.say1.value=(cardName(card) + " of " + suit);
return cardValue(card,strWho);
}
function NewHand(form){
if(gameOver !=0)
{form.say1.value=("Hand in Play!"); form.say2.value=(""); return;}
else
{form.dealer.value = 0; form.you.value = 0; cardCount=0;
form.dealer.value = eval(form.dealer.value) + PickACard("Dealer");
form.you.value = eval(form.you.value) + PickACard("You");
gameOver= -1; cardCount+=1;}
}
function Dealer(form){
if (gameOver ==0)
{form.say1.value=("Deal the Cards!"); form.say2.value=(""); return;}
else
if(form.you.value<10)
{form.say1.value=("Not Below Ten!"); form.say2.value=("Take a Hit!"); return;}
else
if (cardCount <2)
{form.say1.value=("Minimum 2 Cards!"); form.say2.value=("Hit Again!"); return;}
else
while(form.dealer.value < 17)
{form.dealer.value = eval(form.dealer.value) + PickACard("Dealer");}
}
function User(form){
if (gameOver ==0)
{form.say1.value=("Deal the Cards!"); form.say2.value=(""); return;}
else
{cardCount+=1; form.say1.value=("You Get...");
form.you.value = eval(form.you.value) + PickACard("You");}
if(form.you.value > 21)
{form.say1.value=("You Busted!");
gameOver=0; form.numgames.value=eval(form.numgames.value)-1;}
}
function LookAtHands(form){
if (gameOver ==0 || form.you.value<10 || cardCount <2){return;}
else
if(form.dealer.value > 21)
{form.say1.value=("House Busts!"); form.say2.value=("You Win! $$$$$$");
gameOver=0; form.numgames.value=eval(form.numgames.value)+1;}
else
if(form.you.value > form.dealer.value)
{form.say1.value=("You Win!"); form.say2.value=("$$$$$$$$$$$$$$$");
gameOver=0; form.numgames.value=eval(form.numgames.value)+1;}
else
if(form.dealer.value == form.you.value)
{form.say1.value=("Game Tied!"); form.say2.value=("Try Again!");
gameOver=0; form.numgames.value=eval(form.numgames.value)-1;}
else
{form.say1.value=("House Wins!"); form.say2.value=("Tough Luck!");
gameOver=0; form.numgames.value=eval(form.numgames.value)-1;}
}
function setBj(){
gameOver=0; cardCount=0;
document.display.dealer.value="";
document.display.you.value="";
document.display.numgames.value="0";
document.display.say1.value=" Hit 'Deal'";
document.display.say2.value=" To Start!";
}
// End -->
</script>
</head>
<BODY OnLoad="setBj()">
<center>
<form name="display">
<table bgcolor="#c0c0c0" border="1" cellspacing="0" cellpadding="3">
<tr>
<td><center>Score:</center></td>
<td><center>Dealer</center></td>
<td><center><input type=text name="dealer" size="2"></center></td>
<td><center>Card(s): <input type=text name="say1" size="18" value=""></center></td>
</tr>
<tr>
<td><center><input type=text name="numgames" size="3" value="0"></center></td>
<td><center>Player</center></td>
<td><center><input type=text name="you" size="2"></center></td>
<td><center>Card(s): <input type=text name="say2" size="18" value=""></center></td>
</tr>
<tr>
<td><center><input type=button value="Deal" onClick="NewHand(this.form)"></center></td>
<td colspan=3><center>
<input type=button value="Stand" onClick="Dealer(this.form);LookAtHands(this.form);">
<input type=button value=" Hit " onClick="User(this.form)"></center></td></tr>
</table>
</form>
</center>
</body>
</html>
[/code]
[code]
<html>
<head>
<SCRIPT LANGUAGE="JavaScript">
<!-- Original: Mike McGrath (mike_mcgrath@lineone.net) -->
<!-- Web Site: http://home.clara.net/mikem -->
<!-- Begin
var gameOver; var cardCount;
function Shuffle(max){
var num=Math.random()*max;
return Math.round(num)+1;
}
function getSuit(){
suit = Shuffle(4);
if(suit == 1) return "Spades";
if(suit == 2) return "Clubs";
if(suit == 3) return "Diamonds";
else return "Hearts";
}
function cardName(card){
if(card == 1) return "Ace";
if(card == 11) return "Jack";
if(card == 12) return "Queen";
if(card == 13) return "King";
return "" + card;
}
function cardValue(card,strWho){
if(card == 1) {
if(strWho =="You" && document.display.you.value >10){
document.display.say2.value=document.display.say2.value+" Low"; return 1;}
else return 11; }
if(card > 10) return 10;
return card;
}
function PickACard(strWho){
card = Shuffle(12);
suit = getSuit();
if(strWho =="You")
document.display.say2.value=(cardName(card) + " of " + suit);
else
document.display.say1.value=(cardName(card) + " of " + suit);
return cardValue(card,strWho);
}
function NewHand(form){
if(gameOver !=0)
{form.say1.value=("Hand in Play!"); form.say2.value=(""); return;}
else
{form.dealer.value = 0; form.you.value = 0; cardCount=0;
form.dealer.value = eval(form.dealer.value) + PickACard("Dealer");
form.you.value = eval(form.you.value) + PickACard("You");
gameOver= -1; cardCount+=1;}
}
function Dealer(form){
if (gameOver ==0)
{form.say1.value=("Deal the Cards!"); form.say2.value=(""); return;}
else
if(form.you.value<10)
{form.say1.value=("Not Below Ten!"); form.say2.value=("Take a Hit!"); return;}
else
if (cardCount <2)
{form.say1.value=("Minimum 2 Cards!"); form.say2.value=("Hit Again!"); return;}
else
while(form.dealer.value < 17)
{form.dealer.value = eval(form.dealer.value) + PickACard("Dealer");}
}
function User(form){
if (gameOver ==0)
{form.say1.value=("Deal the Cards!"); form.say2.value=(""); return;}
else
{cardCount+=1; form.say1.value=("You Get...");
form.you.value = eval(form.you.value) + PickACard("You");}
if(form.you.value > 21)
{form.say1.value=("You Busted!");
gameOver=0; form.numgames.value=eval(form.numgames.value)-1;}
}
function LookAtHands(form){
if (gameOver ==0 || form.you.value<10 || cardCount <2){return;}
else
if(form.dealer.value > 21)
{form.say1.value=("House Busts!"); form.say2.value=("You Win! $$$$$$");
gameOver=0; form.numgames.value=eval(form.numgames.value)+1;}
else
if(form.you.value > form.dealer.value)
{form.say1.value=("You Win!"); form.say2.value=("$$$$$$$$$$$$$$$");
gameOver=0; form.numgames.value=eval(form.numgames.value)+1;}
else
if(form.dealer.value == form.you.value)
{form.say1.value=("Game Tied!"); form.say2.value=("Try Again!");
gameOver=0; form.numgames.value=eval(form.numgames.value)-1;}
else
{form.say1.value=("House Wins!"); form.say2.value=("Tough Luck!");
gameOver=0; form.numgames.value=eval(form.numgames.value)-1;}
}
function setBj(){
gameOver=0; cardCount=0;
document.display.dealer.value="";
document.display.you.value="";
document.display.numgames.value="0";
document.display.say1.value=" Hit 'Deal'";
document.display.say2.value=" To Start!";
}
// End -->
</script>
</head>
<BODY OnLoad="setBj()">
<center>
<form name="display">
<table bgcolor="#c0c0c0" border="1" cellspacing="0" cellpadding="3">
<tr>
<td><center>Score:</center></td>
<td><center>Dealer</center></td>
<td><center><input type=text name="dealer" size="2"></center></td>
<td><center>Card(s): <input type=text name="say1" size="18" value=""></center></td>
</tr>
<tr>
<td><center><input type=text name="numgames" size="3" value="0"></center></td>
<td><center>Player</center></td>
<td><center><input type=text name="you" size="2"></center></td>
<td><center>Card(s): <input type=text name="say2" size="18" value=""></center></td>
</tr>
<tr>
<td><center><input type=button value="Deal" onClick="NewHand(this.form)"></center></td>
<td colspan=3><center>
<input type=button value="Stand" onClick="Dealer(this.form);LookAtHands(this.form);">
<input type=button value=" Hit " onClick="User(this.form)"></center></td></tr>
</table>
</form>
</center>
</body>
</html>
[/code]
Attachments
Step 7: Menu.
Get enough little scripts and you may wait to set up a a web server or a least set up a local menupage for all the projects. Did not make time to do a fancy games page.
Step 8: Qrcode.
Qrcode is a big thing now. Here is a qrcode clock. Did not include the javascript portion, but if you look at the html source code (without the .txt extension), you can get to it.
Attachments
Step 9: Searching.
Add the code to the appropriate part of your web page.
[code]
<form action="http://www.google.com/search">
<label for="q">Search:</label>
<input type="text" name="q" id="q">
</form>
[/code]
And it creates this super simple form.
This might work a bit better:
[code]
<form method="get" target="_top" action="http://www.google.com/search">
<input type="text" name="q" size="45" maxlength="255" value="" />
<input type="submit" value="Google Search" />
</form>
[/code]
----------------------------------------------------------------------------------------------
Image search
<form method="get" target="_top" action="http://www.google.com/images">
<input type="text" name="q" size="15"
maxlength="255" value="" />
<input type="submit" value="Google Image Search" />
</form>
Map search
<form method="get" target="_top" action="http://images.google.com/maps">
<input type="text" name="q" size="15"
maxlength="255" value="" />
<input type="submit" value="Google Map Search" />
</form>
[code]
<form action="http://www.google.com/search">
<label for="q">Search:</label>
<input type="text" name="q" id="q">
</form>
[/code]
And it creates this super simple form.
This might work a bit better:
[code]
<form method="get" target="_top" action="http://www.google.com/search">
<input type="text" name="q" size="45" maxlength="255" value="" />
<input type="submit" value="Google Search" />
</form>
[/code]
----------------------------------------------------------------------------------------------
Image search
<form method="get" target="_top" action="http://www.google.com/images">
<input type="text" name="q" size="15"
maxlength="255" value="" />
<input type="submit" value="Google Image Search" />
</form>
Map search
<form method="get" target="_top" action="http://images.google.com/maps">
<input type="text" name="q" size="15"
maxlength="255" value="" />
<input type="submit" value="Google Map Search" />
</form>
Step 10: Add a Clock.
Add the code to the appropriate part of your web page.
[code]
<table border=2>
<tr>
<td>
<script>
var mydate=new Date()
var year=mydate.getYear()
if (year < 1000)
year+=1900
var day=mydate.getDay()
var month=mydate.getMonth()
var daym=mydate.getDate()
if (daym<10)
daym="0"+daym
var dayarray=new Array("Sunday","Monday","Tuesday","Wednesday","Thursday","Friday","Saturday")
var montharray=new Array("January","February","March","April","May","June","July","August","September","October","November","December")
document.write("<small><font color='000000' face='Arial'><b>"+dayarray[day]+", "+montharray[month]+" "+daym+", "+year+"</b></font></small>")
</script>
</td>
</tr>
<tr>
<td>
<span id=tick2>
</span>
<script>
<!--
function show2(){
if (!document.all&&!document.getElementById)
return
thelement=document.getElementById? document.getElementById("tick2"): document.all.tick2
var Digital=new Date()
var hours=Digital.getHours()
var minutes=Digital.getMinutes()
var seconds=Digital.getSeconds()
var dn="PM"
if (hours<12)
dn="AM"
if (hours>12)
hours=hours-12
if (hours==0)
hours=12
if (minutes<=9)
minutes="0"+minutes
if (seconds<=9)
seconds="0"+seconds
var ctime=hours+":"+minutes+":"+seconds+" "+dn
thelement.innerHTML="<b style='font-size:14;color:blue;'>"+ctime+"</b>"
setTimeout("show2()",1000)
}
window.onload=show2
//-->
</script>
</td>
</tr>
</table>
[/code]
[code]
<table border=2>
<tr>
<td>
<script>
var mydate=new Date()
var year=mydate.getYear()
if (year < 1000)
year+=1900
var day=mydate.getDay()
var month=mydate.getMonth()
var daym=mydate.getDate()
if (daym<10)
daym="0"+daym
var dayarray=new Array("Sunday","Monday","Tuesday","Wednesday","Thursday","Friday","Saturday")
var montharray=new Array("January","February","March","April","May","June","July","August","September","October","November","December")
document.write("<small><font color='000000' face='Arial'><b>"+dayarray[day]+", "+montharray[month]+" "+daym+", "+year+"</b></font></small>")
</script>
</td>
</tr>
<tr>
<td>
<span id=tick2>
</span>
<script>
<!--
function show2(){
if (!document.all&&!document.getElementById)
return
thelement=document.getElementById? document.getElementById("tick2"): document.all.tick2
var Digital=new Date()
var hours=Digital.getHours()
var minutes=Digital.getMinutes()
var seconds=Digital.getSeconds()
var dn="PM"
if (hours<12)
dn="AM"
if (hours>12)
hours=hours-12
if (hours==0)
hours=12
if (minutes<=9)
minutes="0"+minutes
if (seconds<=9)
seconds="0"+seconds
var ctime=hours+":"+minutes+":"+seconds+" "+dn
thelement.innerHTML="<b style='font-size:14;color:blue;'>"+ctime+"</b>"
setTimeout("show2()",1000)
}
window.onload=show2
//-->
</script>
</td>
</tr>
</table>
[/code]
Step 11: L33t Speak,
Ever wanted to know how the geek speak was done. Great for tweeting and or blogging.
[code]
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
// Create the Phrase translations arrays
var PhrasesEnglish =
new Array('crap', 'dude', 'hacker',
'hacks', 'you', 'cool', 'oh my god',
'fear', 'power', 'own',
'what the hell', 'elite', 'for the win',
'oh really', 'good game');
var PhrasesLeet =
new Array('carp', 'dood', 'haxor', 'hax', 'joo',
'kewl', 'omg', 'ph43', 'powwah', 'pwn',
'wth', 'leet', 'ftw', 'o rly', 'gg');
// Create the Letter translations arrays
var LettersEnglish =
new Array('n', 'b', 'k', 'd', 'e', 'f', 'g', 'h',
'p', 'm', 'r', 'l', 'o', 'q', 's', 't',
'u', 'x', 'w', 'y', 'z', 'c', 'a', 'j',
'i', 'v', ' ');
var LettersLeet =
new Array('/\\/', '|}', '|X', '[)', '3', '|=', 'gee', '|-|',
'|*', '(\\/)', '|2', '1', '()', '0', '$', '+',
'|_|', '><', '\\X/', '\'/', '2', '<', '/\\', '_|',
'|', '\\/', ' ');
// Translates text in input area to/from leet speak
function translateText() {
var inputString = document.getElementById('input').value;
if (document.getElementById('conversionType').value == "e") {
for (i = 0; i < PhrasesEnglish.length; ++i)
inputString = inputString.replace(
new RegExp(PhrasesEnglish[i], "gi"),
PhrasesLeet[i]
);
for (i = 0; i < LettersEnglish.length; ++i)
inputString = inputString.replace(
new RegExp(LettersEnglish[i], "gi"),
LettersLeet[i]
);
}
else {
for (i = 0; i < LettersLeet.length; ++i)
inputString = inputString.replace(
new RegExp(RegExp.escape(LettersLeet[i]), "g"),
LettersEnglish[i]
);
for (i = 0; i < PhrasesLeet.length; ++i)
inputString = inputString.replace(
new RegExp(RegExp.escape(PhrasesLeet[i]), "g"),
PhrasesEnglish[i]
);
}
document.getElementById('input').value = inputString;
}
// This function is used to escape any special regular expression
// characters in the search strings used to convert from leet to
// english. Taken from: http://simonwillison.net/2006/Jan/20/escape/
RegExp.escape = function(text) {
if (!arguments.callee.sRE) {
var specials = [
'/', '.', '*', '+', '?', '|', '$',
'(', ')', '[', ']', '{', '}', '\\'
];
arguments.callee.sRE = new RegExp(
'(\\' + specials.join('|\\') + ')', 'g'
);
}
return text.replace(arguments.callee.sRE, '\\$1');
}
style="font-weight: bold;
background-image: url('leetBG.png');
background-attachment: fixed;
background-position: 160px 165px;
background-repeat: no-repeat;">
onclick="translateText();" />
[/code]
Step 12: Make Your Own Instructables Page(s) Menu.
You can make a web page that points to your instructables. Great for putting on your own server or any server. that accepts html. Included is an examle file.
Bring up your instructable list and then you will copy the links and data to your newly create html file.
Bring up your instructable list and then you will copy the links and data to your newly create html file.