A seminar of JavaScript



Uchidas | News | Family | Yasuo | Michiko | Miho | Yuuta | Ai | Japan | Guestbook

Primer examples

<HTML>
<HEAD>
<TITLE>JavaScript example 1</TITLE>
</HEAD>

<BODY>
<SCRIPT LANGUAGE="JavaScript">
document.write("Hello JavaScript");
</SCRIPT>
</BODY>
</HTML>


<HTML>
<HEAD>
<TITLE>JavaScript example 2</TITLE>
</HEAD>

<BODY>
<SCRIPT LANGUAGE="JavaScript">
/* This is a
JavaScript's
comment, */
// This is a JavaScript's comment, too.
<!--
document.write("This is a JavaScript's string.<P>")
//-->
</SCRIPT>

This is a HTML's string.
</BODY>
</HTML>


<HTML>
<HEAD>
<TITLE>JavaScript example 3</TITLE>
</HEAD>

<BODY>
<SCRIPT LANGUAGE="JavaScript">
var a = 5;
var b = 3;

document.write("a+b=", a + b, "<BR>")
document.write("a-b=", a - b, "<BR>")
document.write("a*b=", a * b, "<BR>")
document.write("a+b=", a / b, "<BR>")
</SCRIPT>
</BODY>
</HTML>



<HTML>
<HEAD>
<TITLE>JavaScript example 4</TITLE>
</HEAD>

<BODY>
<SCRIPT LANGUAGE="JavaScript">
var year = 1996;

document.write(year, "is a ");
if((year % 4 == 0) && (year % 100 != 0) || (year % 400 == 0))
document.write("leap year.");
else
document.write("common year.");
</SCRIPT>
</BODY>
</HTML>



<HTML>
<HEAD>
<TITLE>JavaScript example 5</TITLE>
</HEAD>

<BODY>
<SCRIPT LANGUAGE="JavaScript">
var s = 0;
for(i = 1; i <= 10; i++)
s += i;

document.write("1+...+10=", s);
</SCRIPT>
</BODY>
</HTML>


<HTML>
<HEAD>
<TITLE>JavaScript example 6</TITLE>
</HEAD>

<BODY>
<SCRIPT LANGUAGE="JavaScript">
document.write("The multiple table<P>");
document.write("<TABLE BORDER=1><TR ALIGN=RIGHT>");

for(i = 1; i <= 9; i++){
for(j = 1; j <= 9; j++)
document.write("<TD>", i * j, "</TD>");
document.write("</TR><TR ALIGN=RIGHT>");
}
document.write("</TABLE>");
</SCRIPT>
</BODY>
</HTML>



<HTML>
<HEAD>
<TITLE>JavaScript example 7</TITLE>
<SCRIPT LANGUAGE="JavaScript">
function add(x, y){
return x + y;
}
</SCRIPT>
</HEAD>

<BODY>
<SCRIPT LANGUAGE="JavaScript">
document.write("5+3=", add(5, 3))
</SCRIPT>
</BODY>
</HTML>



<HTML>
<HEAD>
<TITLE>JavaScript example 8</TITLE>

<SCRIPT LANGUAGE="JavaScript">
function gcm(x, y){
while(y != 0){
r = x % y;
x = y;
y = r;
}
return x;
}
</SCRIPT>
</HEAD>

<BODY>
<SCRIPT LANGUAGE="JavaScript">
var a = 36;
var b = 24;

document.write("GCM(a, b) = ", gcm(a, b));
</SCRIPT>
</BODY>
</HTML>




<HTML>
<HEAD>
<TITLE>JavaScript example 9</TITLE>
</HEAD>

<BODY>

<SCRIPT LANGUAGE="JavaScript">
for(var p in navigator)
document.write(p + ": " + navigator[p] + "<BR>");
</SCRIPT>
</BODY>
</HTML>


<HTML>
<HEAD>
<TITLE>JavaScript example 10</TITLE>
</HEAD>

<BODY>
<SCRIPT LANGUAGE="JavaScript">
document.write("appName: " + navigator.appName + "<BR>");
document.write("appVersion: " + navigator.appVersion + "<BR>");
document.write("appCodeName: " + navigator.appCodeName + "<BR>");
document.write("userAgent: " + navigator.userAgent + "<BR>");
</SCRIPT>
</BODY>
</HTML>



Basic examples

<HTML>
<HEAD>
<TITLE>JavaScript example 11</TITLE>
<SCRIPT LANGUAGE="JavaScript">
function MakeArray(n){
this.length = n;
}
</SCRIPT>
</HEAD>
<BODY>
<SCRIPT LANGUAGE="JavaScript">
var data = new MakeArray(3);
for(i = 0; i <= 3; i++)
data[i] = i;
for(i = 0; i <= 3; i++)
document.write("data[", i, "] = ", data[i], "<BR>");
</SCRIPT>
</BODY>
</HTML>
<HTML>
<HEAD>
<TITLE>JavaScript example 12</TITLE>
<SCRIPT LANGUAGE="JavaScript">
function Hex(){
for(i = 0x0; i <= 0xf; i++)
this[i] = i;
}
</SCRIPT>
</HEAD>
<BODY>
<SCRIPT LANGUAGE="JavaScript">
var hex = new Hex();
for(i = 0x0; i <= 0xf; i++)
document.write(hex[i], "<BR>");
</SCRIPT>
</BODY>
</HTML>
<HTML>
<HEAD>
<TITLE>JavaScript example 13</TITLE>
<SCRIPT LANGUAGE="JavaScript">
function HexChr(){
this[0] = "0";
this[1] = "1";
this[2] = "2";
this[3] = "3";
this[4] = "4";
this[5] = "5";
this[6] = "6";
this[7] = "7";
this[8] = "8";
this[9] = "9";
this[10] = "A";
this[11] = "B";
this[12] = "C";
this[13] = "D";
this[14] = "E";
this[15] = "F";
}

function DEC2HEX(dec){
var Hex = new HexChr();
hexStr = Hex[Math.floor(dec / 16)] + Hex[dec % 16];
return hexStr;
}
</SCRIPT>
</HEAD>

<BODY>
<SCRIPT LANGUAGE="JavaScript">
var dec = 160;
document.write(dec, " = #", DEC2HEX(dec), "<BR>");
</SCRIPT>
</BODY>
</HTML>
<HTML>
<HEAD>
<TITLE>JavaScript example 14</TITLE>
</HEAD>
<BODY>
<SCRIPT LANGUAGE="JavaScript">
document.write("12345".length, "<P>");
str = "ABCDE";
document.write("<P>", str.substring(1, 3));
</SCRIPT>
</BODY>
</HTML>
function HexChr(){
var hexStr = "0123456789ABCDEF";
for(i = 0; i<= hexStr.length; i++){
this[i] = hexStr.charAt(i);
}
}
<HTML>
<HEAD>
<TITLE>JavaScript example 16</TITLE>
</HEAD>
<BODY>
<SCRIPT LANGUAGE="JavaScript">
var now = new Date();
var hour = now.getHours();
var min = now.getMinutes();
if ((hour >= 5) && (hour <= 9))
msg = "Good morning!" ;
else
if ((hour >= 10) && (hour <= 17))
msg = "Hello!";
else
msg = "Good evening.";
document.write(msg + "<P>" + "It is "+ hour + ":" + min + ".");
</SCRIPT>
</BODY>
</HTML>
<HTML>
<HEAD>
<TITLE>JavaScript example 17</TITLE>
</HEAD>
<BODY>
<SCRIPT LANGUAGE="JavaScript">
var year = 1997;
var month = 2;
var thisMonth = new Date(year, month - 1, 1);
var nextMonth = new Date(year, month, 1);
days = (nextMonth.getTime() - thisMonth.getTime()) / (1000 * 60 * 60 * 24);
document.write(year + "/" + month + " month is " + days + "days." );
</SCRIPT>
</BODY>
</HTML>
<HTML>
<HEAD>
<TITLE>JavaScript example 18</TITLE>
</HEAD>
<BODY>
<FORM NAME="haiku">
a haiku poem
<INPUT TYPE="text" SIZE="15" NAME="phrase1">
<INPUT TYPE="text" SIZE="20" NAME="phrase2">
<INPUT TYPE="text" SIZE="25" NAME="phrase3">
</FORM>
<SCRIPT LANGUAGE="JavaScript">
document.haiku.phrase1.value = "The old pond,";
document.haiku.phrase2.value = "Frog jump into,";
document.haiku.phrase3.value = "The sound of water.";
</SCRIPT>
</BODY>
</HTML>
<HTML>
<HEAD>
<TITLE>JavaScript example 19</TITLE>
</HEAD>
<BODY>
<FORM>
a haiku poem
<INPUT TYPE="text" SIZE="15">
<INPUT TYPE="text" SIZE="20">
<INPUT TYPE="text" SIZE="25">
</FORM>
<SCRIPT LANGUAGE="JavaScript">
document.forms[0].elements[0].value = "The old pond,";
document.forms[0].elements[1].value = "Frog jump into,";
document.forms[0].elements[2].value = "The sound of water.";
</SCRIPT>
</BODY>
</HTML>
<HTML>
<HEAD>
<TITLE>JavaScript example 20</TITLE>
<SCRIPT LANGUAGE="JavaScript">
function dsptime(){
var time = new Date();
document.clock.now.value = time.toLocaleString();
setTimeout('dsptime()', 500)
}
</SCRIPT>
</HEAD>
<BODY>
<FORM NAME="clock">
Current time
<INPUT TYPE="text" SIZE="20" NAME="now">
</FORM>
<SCRIPT LANGUAGE="JavaScript">
dsptime();
</SCRIPT>
</BODY>
</HTML>
<HTML>
<HEAD>
<TITLE>JavaScript example 21</TITLE>
<SCRIPT LANGUAGE="JavaScript">
var str = "Welcome to My Home Page!";
var speed = 300;
var i = 0;
function msgDisp(){
if(i++ < str.length){
document.type.writer.value = str.substring(0, i);
}
else{
document.type.writer.value = "";
i = 0;
}
setTimeout('msgDisp()', speed);
}
</SCRIPT>
</HEAD>
<BODY>
<FORM NAME="type">
TYpewriter
<INPUT TYPE="text" SIZE="30" NAME="writer">
</FORM>
<SCRIPT LANGUAGE="JavaScript">
msgDisp();
</SCRIPT>
</BODY>
</HTML>
<HTML>
<HEAD>
<TITLE>JavaScript example 22</TITLE>
<SCRIPT LANGUAGE="JavaScript">
function space(n){
var spc = "";
for(i = 1; i <= n; i++)
spc = spc + " ";
return spc;
}
var msg = "Welcome to My Home Page!";
var str = space(130) + msg + space(msg.length);
var repeat = 5 * str.length - msg.length;
var speed = 50;
function msgDisp(){
str = str.substring(1, str.length) + str.substring(0, 1);
window.status = str;
if(repeat-- <= 0){
clearTimeout(timeoutID);
window.status = "";
}
else{
timeoutID = setTimeout('msgDisp()', speed);
}
}
</SCRIPT>
</HEAD>
<BODY>
</BODY>
<SCRIPT LANGUAGE="JavaScript">
msgDisp();
</SCRIPT>
</HTML>

Practical examples
 

<HTML>
<HEAD>
<TITLE>JavaScript example 23</TITLE>
<SCRIPT language="JavaScript">
        function thanks(){
                alert("Welcome !");     
        }
</SCRIPT>
</HEAD>

<BODY>

<FORM action="mailto:yasuo@uchidas.com" method="POST">
<INPUT type="submit" value="Visitted-button" onClick="thanks()">
</FORM>
</BODY>
</HTML>
    


<HTML>
<HEAD>
<TITLE>JavaScript example 24</TITLE>
<SCRIPT language="JavaScript">
        var index;
        
        function res(button){
                index = button.value
        }
        
        function thanks(){
                if(index == "1")
                        msg = "Thanks !";
                if(index == "2")
                        msg = "Please visit again!";
                if(index == "3")
                        msg = "I'll stick it.";
                alert("Thanks for your comments.\n\n" + msg);   
        }
</SCRIPT>
</HEAD>

<BODY>

<FORM action="mailto:yasuo@uchidas.com" method="POST" onSubmit="thanks()">
Questionary
<P>
Sex:<INPUT type="radio" name="sex" value="1">male <INPUT type="radio" name="sex" value="2">female
<P>
Age:<SELECT name="age">
<OPTION>teens
<OPTION>twenties
<OPTION>thirties
<OPTION>fourties
<OPTION>fifties
<OPTION>sixty and over</SELECT>
<P>
Please let me know what you think of my Webspace. <INPUT type="radio" name="estimate" value="1" onClick="res(this)">Very
Good <INPUT type="radio" name="estimate" value="2" onClick="res(this)">Just
OK <INPUT type="radio" name="estimate" value="3" onClick="res(this)">Trash
<P>
Comments:<BR>
<TEXTAREA name="comment" rows="5" cols="50"></TEXTAREA>
<P>
<INPUT type="submit" value="Send It"><INPUT type="reset" value="Forget It">
</FORM>
</BODY>
</HTML>
    


<HTML>
<HEAD>
<TITLE>JavaScript example 25</TITLE>
<SCRIPT language="JavaScript">
        function HexChr(){
                var hexStr = "0123456789ABCDEF";
                for(i = 0; i<= 15; i++){
                        this[i] = hexStr.substring(i, i+1);
                }
        }

        function DEC2HEX(dec){
                var hexStr = "";
                var Hex = new HexChr();
        
                hexStr = hexStr + Hex[dec % 16];
                hexStr = Hex[Math.floor(dec / 16)] + hexStr;

                return hexStr;
        }

        var red = 0xff;
        var green = 0xff;
        var blue = 0xff;
        
        function redEdit(r){
                if((red + r >= 0) && (red + r <= 255)){
                        red = red + r;
                        document.bgColor = DEC2HEX(red) + DEC2HEX(green) +DEC2HEX(blue);
                }
                document.Edit.red.value = DEC2HEX(red);
        }

        function greenEdit(g){
                if((green + g >= 0) && (green + g <= 255)){
                        green = green + g;
                        document.bgColor = DEC2HEX(red) + DEC2HEX(green) +DEC2HEX(blue);
                }
                document.Edit.green.value = DEC2HEX(green);
        }

        function blueEdit(b){
                if((blue + b >= 0) && (blue + b <= 255)){
                        blue = blue + b;
                        document.bgColor = DEC2HEX(red) + DEC2HEX(green) +DEC2HEX(blue);
                }
                document.Edit.blue.value = DEC2HEX(blue);
        }
</SCRIPT>
</HEAD>

<BODY bgcolor="#ffffff">

<P>
Color Editor
<FORM NAME="Edit">
R <INPUT type="button" value="--" onClick="redEdit(-0xf)"> <INPUT type="button" value=" - " onClick="redEdit(-0x1)">
#<INPUT name="red" value="FF" size="2"> <INPUT type="button" value=" + " onClick="redEdit(0x1)">
<INPUT type="button" value="++" onClick="redEdit(0xf)">
<P>
G <INPUT type="button" value="--" onClick="greenEdit(-0xf)"> <INPUT type="button" value=" - " onClick="greenEdit(-0x1)">
#<INPUT name="green" value="FF" size="2"> <INPUT type="button" value=" + " onClick="greenEdit(0x1)">
<INPUT type="button" value="++" onClick="greenEdit(0xf)">
<P>
B <INPUT type="button" value="--" onClick="blueEdit(-0xf)"> <INPUT type="button" value=" - " onClick="blueEdit(-0x1)">
#<INPUT name="blue" value="FF" size="2"> <INPUT type="button" value=" + " onClick="blueEdit(0x1)">
<INPUT type="button" value="++" onClick="blueEdit(0xf)">
</FORM>
</BODY>
</HTML>
    


<HTML>
<HEAD>
<TITLE>JavaScript example 26</TITLE>
<SCRIPT language="JavaScript">
        function jump(url){
                location = url.options[url.selectedIndex].value;
        }
</SCRIPT>
</HEAD>

<BODY>

<FORM>
Shortcut <SELECT onChange="jump(this)">
<OPTION value="http://www.uchidas.com/">HomePage1
<OPTION value="http://www.uchidas.com/news/news.html">HomePage2
<OPTION value="http://www.uchidas.com/miho/miho.html">HomePage3
<OPTION value="http://www.uchidas.com/yuuta/yuuta.html">HomePage4
<OPTION value="http://www.uchidas.com/ai/ai.html">HomePage5</SELECT>
</FORM>
</BODY>
</HTML>
    


<HTML>
<HEAD>
<TITLE>JavaScript example 27</TITLE>
<SCRIPT language="JavaScript">
        var newWin = window.open("","", "WIDTH=140,HEIGHT=180,SCROLLBARS=0,RESIZABLE=0");
        
        newWin.document.clear();
        newWin.document.write('<HTML><HEAD><TITLE>Homepage Selector</TITLE></HEAD>');
        newWin.document.write("<BODY><CENTER>");
        newWin.document.write("<FORM NAME=form>")
        newWin.document.write("Homepage<BR>Selector")
        newWin.document.write("<P>")
        newWin.document.write("<TABLE BORDER>")
        newWin.document.write("<TR>")
        newWin.document.write('<TD><A HREF="http://www.uchidas.com/" TARGET=main>HomePage1</A></TD>')
        newWin.document.write("</TR>")
                newWin.document.write("<TR>")
        newWin.document.write('<TD><A HREF="http://www.uchidas.com/news/news.html" TARGET=main>HomePage2</A></TD>')
        newWin.document.write("</TR>")
        newWin.document.write("<TR>")
        newWin.document.write('<TD><A HREF="http://www.uchidas.com/miho/miho.html" TARGET=main>HomePage3</A></TD>')
        newWin.document.write("</TR>")
        newWin.document.write("<TR>")
        newWin.document.write('<TD><A HREF="http://www.uchidas.com/yuuta/yuuta.html" TARGET=main>HomePage4</A></TD>')
        newWin.document.write("</TR>")
        newWin.document.write("<TR>")
        newWin.document.write('<TD><A HREF="http://www.uchidas.com/ai/ai.html" TARGET=main>HomePage5</A></TD>')
        newWin.document.write("</TR>")

        newWin.document.write("</TABLE>")
        newWin.document.write('<P></FORM></CENTER></BODY></HTML>')
        newWin.document.close();
</SCRIPT>
</HEAD>

<BODY>

</BODY>
</HTML>
    


<HTML>
<HEAD>
<TITLE>JavaScript example 28</TITLE>
<SCRIPT language="JavaScript">
        function MakeArray(n){
                this.length = n;
        }

        function calendar(form){
                var tyear = eval(form.editbox1.value)
                var tmonth = eval(form.editbox2.value)
                var thisMonth = new Date(tyear, tmonth - 1, 1);
                var nextMonth = new Date(tyear, tmonth, 1);
                var wd = thisMonth.getDay();
                var maxd = (nextMonth.getTime() - thisMonth.getTime()) / (1000 * 60 * 60 * 24);
                var wday = new MakeArray(7);
                wday[1] = "Sun"; wday[2] = "Mon"; wday[3] = "Tue"; wday[4] = "Wed";
                wday[5] = "Thu"; wday[6] = "Fri"; wday[7] = "Sat";
                
                var newwin = window.open("","","WIDTH=300,HEIGHT=200");
                newwin.document.clear();
                newwin.document.write("<HTML><HEAD><TITLE>Calendar</TITLE></HEAD><BODY>");
                newwin.document.write("<CENTER>", "the year ",tyear, " : the month ",tmonth, "<P>");
                newwin.document.write("<TABLE BORDER=1><TR>");
                for(c = 1; c <= 7; c++)
                        newwin.document.write("<TH>", wday[c], "</TH>");
                newwin.document.write("</TR><TR ALIGN=RIGHT>");
                d = 0;
                for(i=0;i<42;i++){
                        if(d >= maxd) break;
                        if((i < wd) || (d > maxd)) {
                                newwin.document.write("<TD></TD>");
                        }
                        else{
                                d++;
                                newwin.document.write("<TD>", d, "</TD>");
                        } 
                        if((i % 7) == 6)
                                newwin.document.write("</TR><TR ALIGN=RIGHT>");
                }
                newwin.document.write("</TABLE></CENTER></BODY></HTML>");
                newwin.document.close();
        }
</SCRIPT>
</HEAD>

<BODY>

<FORM NAME="form">
the year<INPUT name="editbox1" size="5">: the month<INPUT name="editbox2" size="3">
<P>
<INPUT type="button" value="Calendar" onClick="calendar(this.form)">
</FORM>
<SCRIPT language="JavaScript">
        var today = new Date();
        document.form.editbox1.value = today.getYear() + 1900;
        document.form.editbox2.value = today.getMonth() + 1;
</SCRIPT>
</BODY>
</HTML>
    


<HTML>
<HEAD>
<TITLE>JavaScript example 29</TITLE>
<SCRIPT LANGUAGE="JavaScript">
        var date = new Date();
        var next= date.getSeconds();
        
        function mult(p, q) {
                var p1 = 0;
                var p0 = 0;
                var q1 = 0;
                var q0 = 0;
        
                p1 = Math.floor(p / 10000);
                p0 = p % 10000;
                q1 = Math.floor(q / 10000);
                q0 = q % 10000;
        
                return (((p0 * q1 + p1 * q0) % 10000) * 10000 + p0 * q0) % 100000000; 
        }

        function random(r) {
                next = (mult(next, 31415821) + 1) % 100000000;
                return Math.floor((Math.floor(next / 10000) * r ) / 10000);
        }

        for(i = 1; i <= 200; i++){
                document.write(random(10) + " ");
        }
</SCRIPT>
</HEAD>

<BODY>
</BODY>
</HTML>
    
<HTML>
<HEAD>
<TITLE>JavaScript example 30</TITLE>
<SCRIPT language="JavaScript">
        var date = new Date();
        var next= date.getSeconds();
        
        function mult(p, q) {
                var p1 = 0;
                var p0 = 0;
                var q1 = 0;
                var q0 = 0;
        
                p1 = Math.floor(p / 10000);
                p0 = p % 10000;
                q1 = Math.floor(q / 10000);
                q0 = q % 10000;
        
                return (((p0 * q1 + p1 * q0) % 10000) * 10000 + p0 * q0) % 100000000; 
        }

        function random(r) {
                next = (mult(next, 31415821) + 1) % 100000000;
                return Math.floor((Math.floor(next / 10000) * r ) / 10000);
        }
</SCRIPT>
</HEAD>

<BODY>

<SCRIPT language="JavaScript">
        var atari = 0;
        var rndnum = random(10);
        
        while(atari == 0){
                num = prompt("Hit a number!", "");

                if(rndnum == num){
                        msg = "Bingo!";
                        atari = 1;
                }
                else{
                        msg1 = "Missed!\n";
                        if(rndnum > num){
                                msg = msg1 + "greater";
                        }
                        else{
                                msg = msg1 + "less";
                        }
                }
                alert(msg);
        }
</SCRIPT>
</BODY>
</HTML>



(since Jan 18, 1997)


E-mail yasuo@uchidas.com


Copyright (c) 1997 Yasuo Uchida