JavaScript,ジャバスクリプト,ホームページ作成,サイト制作 - サンプル
作成：2005-11-25、更新：2008-04-04JavaScript,ジャバスクリプト,ホームページ作成,サイト制作 - サンプル。
■JavaScript
・JavaScript / Javaスクリプト
もともとNetscape社が開発した言語で、Sunが開発したJavaとは全く別の言語。
Sunが開発に関わったらしいので、Javaという文字が入っている。
現在JavaScriptの権利は、Sunにあるらしい。
■ブラウザ判別
・ブラウザのバージョンや種類によってJavaScriptの対応状況が異なる場合があるので、
その場合は、スクリプトを使い分ける。
<script language="javascript">
<!--
function Move_Start(){
if(navigator.appName == "Microsoft Internet Explorer" && navigator.appVersion.charAt(0) >= 4){
document.write("IE4以上");
}else if(navigator.appName == "Firefox" && navigator.appVersion.charAt(0) >= 1){
document.write("Firefox1.0以上");
}else{
document.write("それ以外");
}
}
//-->
</script>
■書き方
・<script>をHTMLタグ中の適当な場所に書く。
・基本的にどこに書いてもOK。
<script language="javascript" type="text/javascript">
<!--
document.write("Hello JavaScript!!");
//-->
</script>
・例1
<html>
<head>
<script language="javascript" type="text/javascript">
<!--
function KEIKOKU(){
alert("Hello JavaScript!!");
}
//-->
</script>
</head>
<body onLoad="KEIKOKU();">
</body>
</html>
・例2
<html>
<body>
サンプル
<script language="javascript" type="text/javascript">
<!--
document.write("Hello JavaScript!!");
//-->
</script>
</body>
</html>
・JavaScript外部ファイルを読み込む
・同じスクリプトを複数のページで共通で使う場合は、
JavaScriptファイルを別に用意し、<script>タグでそのファイルを読み込む。
・HTML側
<html>
<head>
<script language="javascript" type="text/javascript" src="sample.js"></script>
</head>
<body>
</body>
</html>
・JavaScriptファイル(sample.jsの中身)
function hyouji(){
var opwin=window.open("","","status=yes,scrollbars=yes,WIDTH=600,HEIGHT=400");
opwin.document.open();
opwin.document.write(document.htmlform.sample.value);
opwin.document.close();
}
■イベント
・イベント一覧
onClick クリックした瞬間にイベント発生
ondblclick ダブルクリックした瞬間にイベント発生
onmousedown マウスボタンを押した瞬間にイベント発生
onmouseup マウスボタンを上げた瞬間にイベント発生
onMouseOver マウスカーソルがオブジェクトに重なった瞬間にイベント発生
onMouseOut マウスカーソルがオブジェクトから離れた瞬間にイベント発生
onmousemove マウスカーソルを動かした瞬間にイベント発生
onkeypress キーボードのキーを押した瞬間にイベント発生
onkeydown キーボードのキーを押した瞬間にイベント発生
onkeyup キーボードのキーを上げた瞬間にイベント発生
onLoad オブジェクトをロードした瞬間にイベント発生
onUnload オブジェクトをアンロードした瞬間にイベント発生
onFocus フォームなどにカーソルのフォーカスを合わせた瞬間にイベント発生
onBlur フォームなどからカーソルのフォーカスが離れた瞬間にイベント発生
onChange フォームの内容を更新した瞬間にイベント発生
onSelect フォームなどのテキストエリアの文字列を範囲指定した瞬間にイベント発生
onSubmit フォームのSubmitをクリックした時にイベント発生
onReset フォームのResetをクリックした時にイベント発生
onContextmenu Windowsで右クリックした場合など、コンテキストメニュー呼び出し時にイベント発生
setTimeout 一定間隔ごとにイベントを発生
clearTimeout setTimeoutを解除
・書き方
・例1
<a href="javascript:onClick=alert('警告ダイアログ');">警告ダイアログ</a>
・例2
<h2 onClick="alert('警告ダイアログ');">警告ダイアログ</h2>
・例3
<html>
<script language="javascript" type="text/javascript">
<!--
function keikoku(){
alert("警告ダイアログ");
}
//-->
</script>
<body>
<a href="javascript:onClick=keikoku();">警告ダイアログ</a>
</body>
</html>
・例4
<html>
<script language="javascript" type="text/javascript">
<!--
function keikoku(){
alert("警告ダイアログ");
}
//-->
</script>
<body>
<h2 onClick="keikoku();">警告ダイアログ</h2>
</body>
</html>
■制御文
・if
if(x == 0){
alert("一致");
}else{
alert("不一致");
}
・for
for(i=0;i<1000;i++){
i++;
}
・while
while(j < 100){
j = j + 1;
}
・do while
do{
j = j + 5;
}while(j < 100)
・switch
text_value = document.form.text.value;
switch(text_value){
case 0:
alert("あいうえお");
break;
case 1:
alert("かきくけこ");
break;
case "テスト":
alert("さしすせそ");
break;
case "サンプル":
alert("さしすせそ");
break;
default:
alert("その他");
}
・break
ループ処理を途中で終了させる
while(i < 10){
if(i == 7){
break;
}
i = i + 1;
}
・continue
continue以下の処理を飛ばし、ループ処理の先頭に戻る
while(i < 10){
if(i == 7){
continue;
}
i = i + 1;
}
■演算子
・算術
+ 加算（文字列を繋げる時にも使用する）
- 減算
* 乗算
/ 除算
% 剰余
++ インクリメント（1加算）
-- ディクリメント（1減算）
・比較
A < B AはBより小さい
A > B AはBより大きい
A <= B AはB以下
A >= B AはB以上
A == B AとBは等しい
A != B AとBは等しくない
A && B A且つB
A || B AまたはB
・代入
A = B AにBを代入
A += B AにA+Bを代入
A -= B AにA-Bを代入
A *= B AにA*Bを代入
A /= B AにA/Bを代入
A %= B AにA%Bを代入
■単位
px ピクセル･･･ドット数
pt ポイント･･･（1 pt = 1/72 in）
cm センチメートル
mm ミリメートル
in インチ･･･（1 in = 2.54 cm）
pc パイカ･･･（1 pc = 12 pt）
em 使用しているフォントの縦の長さ。「M」の縦の長さに相当。
ex 使用しているフォントの縦の長さの1/2。「x」の縦の長さに相当。
■関数
function sample(){
test();
}
function test(){
}
■タイマー
timerStr = setTimeout("関数名", イベント発生ミリ秒)
clearTimeout(タイマーID);
function strScroll(){
timerStr = setTimeout("strScroll()", 200);
if(i == 100){
clearTimeout(timerStr);
}
i++;
}
■ページに出力
str = "サンプル";
document.write("文字列 : ", str);
document.write("文字列 : " + str);
■文字列
・文字列の連結
i = 1 + 2;
iは、「3」になる
i = "1" + "2";
iは、「12」になる。
i = "あ" + "か";
iは、「あか」になる。
・文字列の分割
str.substring(開始文字位置, 終了文字位置)
どちらも先頭からのバイト数
str = "テスト";
str.substring(0, 2);
・文字列の長さ・バイト数
str = "テスト";
i = str.length;
・文字一致、検索
indexOf("検索対象文字列", 検索開始位置)
一致した場合は、一致した位置（先頭からのバイト数 0以上）
一致しない場合は、-1。
lastIndexOf("検索対象文字列", 検索開始位置)
一致した場合は、一致した位置（後方からのバイト数 0以上）
一致しない場合は、-1。
str = "Mozilla/5.0 (Windows; U; Windows NT 5.2; ja-JP; rv:1.7.7) Gecko/20050414 Firefox/1.0.3"
i = str.indexOf("FireFox", 0);
・置換
replace("置換前の文字", "置換後の文字")
str = "ABC TEST SAMPLE";
str = str.replace("TEST", "テスト");
■配列
strArray = new Array("A", "B", "C", "D", "E");
strA = strArray[0];
■日付・時刻
・現在の日時
nd = new Date();
dy = nd.getYear();
dm = nd.getMonth() + 1;
dd = nd.getDate();
hh = nd.getHours();
hm = nd.getMinutes();
hs = nd.getSeconds();
・ページ、ファイルの最終更新日
lm = document.lastModified;
■右クリック禁止
・onContextmenu="return false"で右クリックした時に、
コンテキストメニューが表示されないようになります。
・ページのソースを見せないようにする場合などに使用。
・ブラウザのメニューバー（URL）を表示させないようにしたり、
他にも対策が必要です。
（メニューバーなしのウィンドウを開いて、そこに画像を表示したなど）
ただし、完全に保護できる分けではありません。
<HTML>
<HEAD></HEAD>
<BODY onContextmenu="return false">
<IMG SRC="jscript/others/0039.jpg" onMousedown="javaScript:alert('保存禁止です');">
</BODY>
</HTML>
■ダイアログ
・警告ダイアログ、アラート
<A HREF="JavaScript:void(0);" onClick="alert('警告ダイアログ');">リンク</A>
・確認ダイアログ
<A HREF="JavaScript:void(0);" onClick="dispWin();">リンク</A>
<SCRIPT LANGUAGE="JavaScript" TYPE="text/javascript">
<!--
function dispWin(){
choice = confirm("確認ダイアログ");
if(choice == true){
alert("OK選択");
}else{
alert("キャンセルを選択");
}
}
//-->
</SCRIPT>
・入力ダイアログ / prompt("メッセージ", "入力欄の文字")
<A HREF="JavaScript:void(0);" onClick="dispWin();">リンク</A>
<SCRIPT LANGUAGE="JavaScript" TYPE="text/javascript">
<!--
function win(){
choice = prompt("文字を入力して下さい。", "");
if(choice == "cylas"){
alert("正解");
}else{
alert("不正解");
}
}
//-->
</SCRIPT>
・印刷ダイアログ
<FORM NAME="form">
<INPUT TYPE="button" VALUE="印刷" onClick="print();">
</FORM>
■ページの背景色変更
<FORM NAME="form">
<INPUT TYPE="button" VALUE=" 赤 " onClick="document.bgColor='#FF0000'">
<INPUT TYPE="button" VALUE=" 緑 " onClick="document.bgColor='#00FF00'">
<INPUT TYPE="button" VALUE=" 青 " onClick="document.bgColor='#0000FF'">
<INPUT TYPE="button" VALUE=" 白 " onClick="document.bgColor='#FFFFFF'">
</FORM>
■ページジャンプ、location
document.location = "http://testpage.jp/";
・例
<FORM NAME="form">
<SELECT NAME="box" onChange="document.location=options[this.selectedIndex].value">
<OPTION VALUE="void(0);" selected>サイトを選択
<OPTION VALUE="./html/index.html">HTMLのページ
<OPTION VALUE="http://testpage.jp/">http://testpage.jp/
</SELECT>
</FORM>
==================== ブラウザ（Browser）関連 ====================
■ブラウザ情報
・エージェント / Mozilla/4.0 (compatible; MSIE 6.0; Windows NT 5.1;)など
agent = navigator.userAgent;
・アプリケーション名 / Microsoft Internet Explorerなど
name = navigator.appName;
・バージョン / 4.0 (compatible; MSIE 6.0; Windows NT 5.1; SV1;)
ver = navigator.appVersion;
・言語 / jaなど、IEの場合undefined
lang = navigator.language;
・コードネーム / Mozillaなど
code = navigator.appCodeName;
■参照元URL、リファラ、Referer
referrer = " + escape(document.referrer);
■戻る
・ブラウザの履歴にある前のページに戻る
<A HREF="javaScript:history.back();">戻る</A>
■進む
・ブラウザの履歴にある先のページに進む
<A HREF="javaScript:history.forward();">進む</A>
■お気に入りに追加、ブックマークに追加、Favorite
・フォームボタンの例
<FORM>
<INPUT TYPE="button" VALUE="お気に入りに追加" onClick="window.external.addFavorite('http://testpage.jp/','OshimaExe');">
</FORM>
・リンクの例
<A HREF="javaScript:window.external.addFavorite('http://testpage.jp/','OshimaExe');">お気に入りに追加</A>
■ステータスバーに表示
status = "サンプル";
==================== ウィンドウ（Window）関連 ====================
■ウィンドウを開く、新規作成、新規ウィンドウをオープン
<A HREF="JavaScript:void(0);" onClick="dispWin();">リンク</A>
<SCRIPT LANGUAGE="JavaScript" TYPE="text/javascript">
<!--
msg = "ウィンドウオープン。<BR>HTMLファイルは不要。"
function dispWin(){
helpwin = window.open("", "", "status=yes, WIDTH=300, HEIGHT=100");
helpwin.document.open();
helpwin.document.write("<HTML><BODY>");
helpwin.document.write(msg);
helpwin.document.write("</BODY></HTML>");
opwin.document.close();
}
//-->
</SCRIPT>
■ウィンドウを閉じる
<A HREF="javaScript:close();">閉じる</A>
■ウィンドウをスクロール
scroll(X座標, Y座標);
scroll(100, 100);
document.sample.scroll(100, 100);
■ウィンドウ・マウスの座標位置
・マウスの現在座標表示例
<SCRIPT LANGUAGE="JavaScript" TYPE="text/javascript">
<!--
function xyCheck(myEvent){
status = "座標：" + window.event.clientY;
}
document.onmousedown = xyCheck;
//-->
</SCRIPT>
・IE系の場合
X座標 window.event.clientX
Y座標 window.event.clientY
スクロールした状態でのX座標 document.body.scrollLeft
スクロールした状態でのY座標 document.body.scrollTop
・Netscape6系の場合
X座標 myEvent.clientX
Y座標 myEvent.clientY
スクロールした状態でのX座標 window.pageXOffset
スクロールした状態でのY座標 window.pageYOffset
・Netscape4系の場合
X座標 myEvent.x
Y座標 myEvent.y
■キーボードの押されたキー番号の取得（キーコード）
・マウスの現在座標表示例
<SCRIPT LANGUAGE="JavaScript" TYPE="text/javascript">
<!--
function keyCheck(myEvent){
status = "keyCode：" + event.keyCode;
}
document.onkeydown = keyCheck;
//-->
</SCRIPT>
・IE系の場合
event.keyCode
・Netscape系の場合
myEvent.which
■ディスプレイ情報
・ディスプレイ横幅
screenWidth = screen.width;
・ディスプレイ縦幅
screenHeight = screen.height;
・ディスプレイ色数
colorDepth = screen.colorDepth;
==================== フォーム（Form）関連 ====================
■フォームのテキストボックスにカーソルを移動
<HTML>
<SCRIPT LANGUAGE="JavaScript" TYPE="text/javascript">
<!--
function Box_Select(){
document.imgwh.imgurl.select();
}
//-->
</SCRIPT>
</HEAD>
<BODY onLoad="Box_Select();">
<FORM NAME="imgwh">
<INPUT TYPE="text" NAME="imgurl">
</FORM>
■フォームの値を受け取る
document.midform.bgmmid.value
・例
<SCRIPT LANGUAGE="JavaScript" TYPE="text/javascript">
<!--
function hyouji(){
if(document.midform.bgmmid.value == "no") exit;
var opwin = window.open("", "", "WIDTH=300, HEIGHT=30");
opwin.document.open();
opwin.document.write("<EMBED SRC=" + document.midform.bgmmid.value + " LOOP=true AUTOSTART=true>");
opwin.document.close();
}
//-->
</SCRIPT>
<FORM NAME="midform">
<SELECT NAME="bgmmid" onChange="hyouji();">
<OPTION VALUE="no" selected>音楽選択
<OPTION VALUE="beyer090.mid">beyer090.mid
<OPTION VALUE="beyer091.mid">beyer091.mid
<OPTION VALUE="beyer092.mid">beyer092.mid
<OPTION VALUE="beyer093.mid">beyer094.mid
<OPTION VALUE="beyer094.mid">beyer094.mid
</SELECT>
</FORM>
■ボタン、テキストボックスなどの無効化
・ボタンを押せなくする
・テキストボックスに入力できないようにする
・テキストボックスなど入力欄を無効化して送信すると、値が送信されない。
<SCRIPT LANGUAGE="JavaScript" TYPE="text/javascript">
<!--
function disabledFalse(){
document.form1.text1.disabled = false;
document.form1.button1.disabled = false;
document.form1.submit1.disabled = false;
}
function disabledTrue(){
document.form1.text1.disabled = true;
document.form1.button1.disabled = true;
document.form1.submit1.disabled = true;
}
function formSubmit(){
document.form1.submit();
document.form1.button1.disabled = true;
document.form1.submit1.disabled = true;
}
//-->
</SCRIPT>
<FORM NAME="form1" METHOD="POST" ACTION="./test.php" onSubmit="formSubmit();">
<INPUT TYPE="text" NAME="text1" VALUE="テキスト" disabled>
<INPUT TYPE="button" NAME="button1" VALUE="ボタン" onClick="formSubmit();" disabled>
<BR>
<INPUT TYPE="button" VALUE="無効" onClick="disabledTrue();">
<INPUT TYPE="button" VALUE="有効" onClick="disabledFalse();">
<BR>
<INPUT TYPE="radio" NAME="radio1" VALUE="0" onClick="disabledTrue();" CHECKED>了承しない
<INPUT TYPE="radio" NAME="radio1" VALUE="1" onClick="disabledFalse();">了承する
<BR>
<INPUT TYPE="submit" NAME="submit1" VALUE="送信" disabled>
</FORM>
■画像の縦横サイズを取得
・テキストボックスに画像のファイル名またはパスを入力して、
「表示」ボタンを選択すると画像が表示される。
・ステータスバーに画像の縦横サイズを表示。
・画像上にマウスをあわせると画像上のマウスの現在位置を取得
<HTML>
<SCRIPT LANGUAGE="JavaScript" TYPE="text/javascript">
<!--
function Disp_Page(){
document.images[0].src = document.imgwh.imgurl.value;
}
function Img_Width_Height(){
status = "WIDTH = " + document.images[0].width + " , " + "HEIGHT = " + document.images[0].height;
}
function Img_X_Y_Disp(){
status = "X座標 = " + (event.x) + " , " + "Y座標 = " + (event.y-10);
}
function Img_X_Y_Reset(){
Img_Width_Height();
}
//-->
</SCRIPT>
<BODY>
<FORM NAME="imgwh">
<INPUT TYPE="text" NAME="imgurl">
<INPUT TYPE="button" NAME="disp" VALUE="表示" onClick="Disp_Page();">
</FORM>
<IMG SRC="" STYLE="position:relative; top:10; left:0;"
onLoad="Img_Width_Height();"
onClick="Img_X_Y_Disp();"
onMouseOut="Img_X_Y_Reset()">
</BODY>
</HTML>
==================== クッキー（Cookie）関連 ====================
■クッキー基本設定
・サンプルの操作手順
1. テキストボックスに文字を入力
2. [Cookie設定/変更]を選択
3. [リセット]を選択して、文字を消去
4. [Cookie読み込み]を選択
5. 最初にテキストボックスに入力した内容が復活
6. [Cookie削除]を選択
7. [Cookie読み込み]を選択しても、何も表示されない
・例1（基本設定）
<HTML>
<BODY>
<SCRIPT LANGUAGE="JavaScript" TYPE="text/javascript">
<!--
function setCookie(){
document.cookie = escape(document.sample1.name1.value);
}
function getCookie(){
document.sample1.name1.value = unescape(document.cookie);
}
function deleteCookie(){
document.cookie = "";
document.sample1.name1.value = "";
}
//-->
</SCRIPT>
<FORM NAME="sample1">
<INPUT TYPE="text" NAME="name1"><BR>
<INPUT TYPE="button" VALUE="Cookie設定/変更" onClick="setCookie();"><BR>
<INPUT TYPE="button" VALUE="Cookie読み込み" onClick="getCookie();"><BR>
<INPUT TYPE="button" VALUE="Cookie削除" onClick="deleteCookie();"><BR>
<INPUT TYPE="reset"><BR>
</FORM>
</BODY>
</HTML>
・例2（時間設定：クッキーが消える時間を指定）
<HTML>
<BODY>
<SCRIPT LANGUAGE="JavaScript" TYPE="text/javascript">
<!--
function setCookie(){
nd1 = new Date();
//現在の時間から7日後の時間をセット
nd1.setTime(nd1.getTime() + (24 * 60 * 60 * 1000 * 7));
//GMT形式に変換
expires = nd1.toGMTString();
str1 = document.sample2.name1.value;
//テキストボックスの内容を「a1」という名前をつけてCookieに保存
//「a1=テキストボックスの内容;expires=有効期限」という形式でCookieをセット
//「a1=」は「str1=」など好きな名称でいいが、「expires=」という書き方は決まり
if(str1 != null && str1 != ""){
document.cookie = "a1=" + escape(str1)
+ ";expires=" + expires;
}
}
function getCookie(){
//Cookie内の「=」で区切られたデータを「=」を境に分割し、配列splitdataする
//splitdata[0]が「a1」、splitdata[1]が「テキストボックスに入力した内容」
splitdata = document.cookie.split("=");
if(splitdata[1] != null && splitdata[1] != ""){
//splitdata[1]の内容をテキストボックスにセット
//escapeした内容を元に戻すためにunescape
document.sample2.name1.value = unescape(splitdata[1]);
}
if(splitdata[1] == null || splitdata[1] == ""){
document.sample2.name1.value = "";
}
}
function deleteCookie(){
nd2 = new Date();
//現在より過去の時間をセット
nd2.setTime(nd2.getTime() - 1);
//cookieの項目「a1」の有効期限を過去の時間に設定することにより「a1」のCookie情報が消える
document.cookie = "a1=;expires=" + nd2.toGMTString();
document.sample2.name1.value = "";
}
//-->
</SCRIPT>
<FORM NAME="sample2">
<INPUT TYPE="text" NAME="name1"><BR>
<INPUT TYPE="button" VALUE="Cookie設定/変更" onClick="setCookie();"><BR>
<INPUT TYPE="button" VALUE="Cookie読み込み" onClick="getCookie();"><BR>
<INPUT TYPE="button" VALUE="Cookie削除" onClick="deleteCookie();"><BR>
<INPUT TYPE="reset"><BR>
</FORM>
</BODY>
</HTML>
・例3（複数項目設定：複数の情報をクッキーに保存）
<HTML>
<BODY>
<SCRIPT LANGUAGE="JavaScript" TYPE="text/javascript">
<!--
function setCookie(){
nd1 = new Date();
//現在の時間から7日後の時間をセット
nd1.setTime(nd1.getTime() + (24 * 60 * 60 * 1000 * 7));
//GMT形式に変換
expires = nd1.toGMTString();
str1 = document.sample3.name1.value;
str2 = document.sample3.name2.value;
//テキストボックス1の内容を「a1」、テキストボックス2の内容を「a2」という名前をつけてCookieに保存
//まず「a1=テキストボックス1の内容;expires=有効期限」という形式でCookieをセット
//「a1=」は「str1=」など好きな名称でいいが、「expires=」という書き方は決まり
//続けて「a2=テキストボックス2の内容;expires=有効期限」という形式でCookieをセット
if(str1 != null && str1 != ""){
document.cookie = "a1=" + escape(str1)
+ ";expires=" + expires
}
if(str2 != null && str2 != ""){
document.cookie = "a2=" + escape(str2)
+ ";expires=" + expires;
}
}
function getCookie(){
//Cookie内の「; 」で区切られたデータを「; 」ごとに分割し、配列splitdataにする
//splitdata[0]は「a1=テキストボックス1に入力した内容」
//splitdata[1]は「a2=テキストボックス2に入力した内容」
splitdata = document.cookie.split("; ");
if(splitdata[0] != null && splitdata[0] != ""){
//splitdata[0]の「=」で区切られたデータを「=」を境に分割し、配列s0にする
//s0[0]が「a1」、s0[1]が「テキストボックス1に入力した内容」
s0 = splitdata[0].split("=");
//s0[1]の内容をテキストボックスにセット
//escapeした内容を元に戻すためにunescape
//s1[1]も同様
document.sample3.name1.value = unescape(s0[1]);
}
if(splitdata[1] != null && splitdata[1] != ""){
s1 = splitdata[1].split("=");
document.sample3.name2.value = unescape(s1[1]);
}
//何もセットされていないときは、空欄を表示
if(splitdata[0] == null || splitdata[0] == ""){
document.sample3.name1.value = "";
}
if(splitdata[1] == null || splitdata[1] == ""){
document.sample3.name2.value = "";
}
}
function deleteCookie(){
nd2 = new Date();
//現在より過去の時間をセット
nd2.setTime(nd2.getTime() - 1);
//cookieの項目「a1」の有効期限を過去の時間に設定することにより「a1」のCookie情報が消える
//「a2」も同様
document.cookie = "a1=;expires=" + nd2.toGMTString();
document.cookie = "a2=;expires=" + nd2.toGMTString();
document.sample3.name1.value = "";
document.sample3.name2.value = "";
}
//-->
</SCRIPT>
<FORM NAME="sample3">
<INPUT TYPE="text" NAME="name1"><BR>
<INPUT TYPE="text" NAME="name2"><BR>
<INPUT TYPE="button" VALUE="Cookie設定/変更" onClick="setCookie();"><BR>
<INPUT TYPE="button" VALUE="Cookie読み込み" onClick="getCookie();"><BR>
<INPUT TYPE="button" VALUE="Cookie削除" onClick="deleteCookie();"><BR>
<INPUT TYPE="reset"><BR>
</FORM>
</BODY>
</HTML>
==================== フレーム（frame）関連 ====================
■別フレームのページ変更
・左フレームのメニュー選択で、右フレームのページが変化。
・top.フレーム名.document.location で変更する。
・フレーム土台
<HTML>
<FRAMESET COLS="20%,*" FRAMEBORDER=1>
<FRAME SRC="menu.htm" name="leftWin">
<FRAME SRC="top.htm" name="rightWin">
</FRAMESET>
</HTML>
・左フレーム
<HTML>
<HEAD>
<FORM NAME="form">
<SELECT NAME="box" onChange="top.rightWin.document.location=options[this.selectedIndex].value">
<OPTION VALUE="top.html" selected>メニューを選択
<OPTION VALUE="new.html">What's New
<OPTION VALUE="profile.html">自己紹介
</SELECT>
</FORM>
</BODY>
</HTML>
■IFRAMEのページ変更
<HTML>
<BODY>
<IFRAME SRC="1.htm" ID="MADO">1.htm</IFRAME>
<BR>
<FORM NAME="form">
<SELECT NAME="box" onChange="MADO.location=options[this.selectedIndex].value">
<OPTION VALUE="1.html" selected>1ページ
<OPTION VALUE="2.html">2ページ
</SELECT>
</FORM>
</BODY>
</HTML>
■別フレームのフォーム内容変化
・左フレームのリンク選択で、右フレームのテキストエリアの文字が変化。
・フレーム土台
<HTML>
<FRAMESET COLS="20%,*" FRAMEBORDER=1>
<FRAME SRC="menu.htm" name="leftWin">
<FRAME SRC="top.htm" name="rightWin">
</FRAMESET>
</HTML>
・左フレーム
<HTML>
<SCRIPT LANGUAGE="JavaScript" TYPE="text/javascript">
<!--
flag = 0;
function test(n){
if(n == 0) msg = "トップページ";
if(n == 1) msg = "新着情報";
if(n == 2) msg = "プロフィール";
if(flag == 0) top.rightWin.form.tarea.value = msg;
}
function kara(){
if(flag == 0) top.rightWin.form.tarea.value = "";
}
function idou(i){
flag = i;
}
//-->
</SCRIPT>
<BODY>
<A HREF="top.htm" TARGET="right" onMouseover="test(0);" onMouseout="kara();" onClick="idou(0);">トップページ</A>
<BR>
<A HREF="new.htm" TARGET="right" onMouseover="test(1);" onMouseout="kara();" onClick="idou(1);">What's New!</A>
<BR>
<A HREF="profile.htm" TARGET="right" onMouseover="test(2);" onMouseout="kara();" onClick="idou(1);">プロフィール</A>
</BODY>
</HTML>
・右フレーム
<HTML>
<BODY>
<FORM NAME="form">
<TEXTAREA COLS=50 ROWS=5 NAME=tarea></TEXTAREA>
</FORM>
</BODY>
</HTML>
==================== 画像関連 ====================
■画像の変更、画像の光る効果
・例1
<HTML>
<BODY>
<A HREF="../index.html" onMouseOver="img0();" onMouseOut="img1();">
<IMG SRC="go00.gif" BORDER=0></A>
<SCRIPT LANGUAGE="JavaScript" TYPE="text/javascript">
<!--
nimg0 = new Image();
nimg0.src = "go00.gif";
nimg1 = new Image();
nimg1.src = "go01.gif";
function img0(){
document.images[0].src = "go01.gif";
}
function img1(){
document.images[0].src = "go00.gif";
}
//-->
</SCRIPT>
</BODY>
</HTML>
・例2
<HTML>
<SCRIPT LANGUAGE="JavaScript" TYPE="text/javascript">
<!--
function fover(imgsrc){
imgsrc.src="jscript/image/go01.gif";
}
function fout(imgsrc){
imgsrc.src="jscript/image/go00.gif";
}
//-->
</SCRIPT>
<BODY>
<IMG SRC="jscript/image/go00.gif" onMouseOver="fover(this);" onMouseOut="fout(this);">
</BODY>
</HTML>
==================== 文字関連 ====================
■文字のスクロール
<HTML>
<BODY onLoad="textf();">
<FORM NAME="form">
<INPUT TYPE="text" NAME="box" SIZE=30>
</FORM>
<SCRIPT LANGUAGE="JavaScript" TYPE="text/javascript">
<!--
msg = " メッセージをスクロール。 ";
function textf(){
msg = msg.substring(2, msg.length) + msg.substring(0, 2);
document.form.box.value = msg;
setTimeout("textf()", 400);
}
//-->
</SCRIPT>
</BODY>
</HTML>
■文字のスクロール(時間別)
<HTML>
<BODY onLoad="textf();">
<FORM NAME="form">
<INPUT TYPE="text" NAME="box" SIZE=30>
</FORM>
<SCRIPT LANGUAGE="JavaScript" TYPE="text/javascript">
<!--
nd = new Date();
ndh = nd.getHours();
switch(ndh){
case 0:
msg = " 午前0時です。 ";
break;
case 1:
msg = " 午前1時です。 ";
break;
case 2:
msg = " 午前2時です。 ";
break;
//中略
case 22:
msg = " 午後10時です。 ";
break;
case 23:
msg = " 午後11時です。 ";
break;
}
function textf(){
msg = msg.substring(2, msg.length) + msg.substring(0, 2);
document.form.box.value = msg;
setTimeout("textf()", 400);
}
//-->
</SCRIPT>
</BODY>
</HTML>
■リンク別の文字表示
<HTML>
<BODY>
<FORM NAME="form">
<INPUT TYPE="text" NAME="box" SIZE=30>
<A HREF="index.htm" onMouseOver="textf(0);">リンク0</A>
<A HREF="event.htm" onMouseOver="textf(1);">リンク1</A>
<A HREF="script.htm" onMouseOver="textf(2);">リンク2</A>
</FORM>
<SCRIPT LANGUAGE="JavaScript" TYPE="text/javascript">
<!--
function textf(x){
if(x == 0) msg = "リンク0です。";
if(x == 1) msg = "リンク1です。";
if(x == 2) msg = "リンク2です。";
document.form.box.value = msg;
}
//-->
</SCRIPT>
</BODY>
</HTML>
==================== 時刻・時計関連 ====================
■時刻の表示(テキスト時計)
<HTML>
<BODY onLoad="clock();">
<FORM NAME="form">
<INPUT TYPE="text" NAME="box" SIZE=15>
</FORM>
<SCRIPT LANGUAGE="JavaScript" TYPE="text/javascript">
<!--
function clock(){
nd = new Date();
h = nd.getHours();
m = nd.getMinutes();
s = nd.getSeconds();
document.form.box.value = h + ":" + m + ":" + s;
setTimeout("clock()", 1000);
}
//-->
</SCRIPT>
</BODY>
</HTML>
■時刻の表示(画像時計)
<HTML>
<SCRIPT LANGUAGE="JavaScript" TYPE="text/javascript">
<!--
a = new Image();
a.src = "a.gif";
p = new Image();
p.src = "p.gif";
numa = new Array(9);
for(i=0;i<=9;i++){
numa[i] = new Image();
numa[i].src = i + ".gif";
}
function clock(){
nd = new Date();
h = "0" + nd.getHours();
m = "0" + nd.getMinutes();
s = "0" + nd.getSeconds();
h = h.substring(h.length-2, h.length + 1);
m = m.substring(m.length-2, m.length + 1);
s = s.substring(s.length-2, s.length + 1);
h0 = h.substring(0, 1);
h1 = h.substring(1, 2);
m0 = m.substring(0, 1);
m1 = m.substring(1, 2);
s0 = s.substring(0, 1);
s1 = s.substring(1, 2);
if(h0 + h1 < 12){
document.images[0].src = "a.gif";
}else{
document.images[0].src = "p.gif";
}
document.images[2].src = h0 + ".gif";
document.images[3].src = h1 + ".gif";
document.images[5].src = m0 + ".gif";
document.images[6].src = m1 + ".gif";
document.images[8].src = s0 + ".gif";
document.images[9].src = s1 + ".gif";
setTimeout('clock()', 1000);
}
//-->
</SCRIPT>
</HEAD>
<BODY onLoad="clock();">
<IMG SRC="a.gif"><IMG SRC="m.gif"><IMG SRC="0.gif"><IMG SRC="0.gif"><IMG SRC="c.gif"><IMG SRC="0.gif"><IMG SRC="0.gif"><IMG SRC="c.gif"><IMG SRC="0.gif"><IMG SRC="0.gif">
</BODY>
</HTML>