JavaScript

AWCS Logo ImageAWCS

JavaScript
※Free JavaScript source samples.

>Sponsored Link


>Information

コンテンツ概要 このコンテンツは、初心者向けの簡易JavaScriptリファレンスと、
コピー&ペーストで使える60種類以上のフリーJavaScriptサンプルを扱っています。

>はじめに

JavaScriptとは
JavaScriptとはNetscape社が開発した、
ブラウザ上で動作するスクリプト言語です。
一般的にこの言語は、ウェブページに動きを与えることが出来ます。
例えば、HTMLやCSSとの組み合わせで、画面に雪を降らせたり、
マウスポインタに何か画像をまとわり付かせたり、、などです。
当サイトでは、これらを可能とする”概念”そのものの説明は省略し、
ソースをそのままコピペして、誰でも簡単に
使用出来ることを 心がけて掲載しています。

※現在のサンプル数は『 46 』です。
※マウスストーカーなどはDHTMLDHTMLに移動しました。
著作権

当サイトに掲載されているスクリプトソースの多くは、
どの基本書にも載っているような著作権が有る筈もないものであり、
当然私が主張するべき著作権というものは発生しません。

※JavaScript is a registered trademark of Sun Microsystems, Inc.

動作環境

JavaScriptは常にバージョンアップを繰り返し、
初期バージョンの基本的な命令以外は互換性がありません。
したがってブラウザごとに動作が異なります。
考慮はしておりますが、当サイトで多くは
IE5.5以上で確実に動作するスクリプトソースを掲載しています。

記述方法
2通りあり、1つは普通にHTML文章内に埋め込む方法。
もう1つは外部にJavaScriptを記述したファイル(.js)を用意し、
スクリプトを埋め込みたい部分に以下のように記述する方法です。
<SCRIPT src=".js" type="text/javascript"></SCRIPT>
※複数のページで同じスクリプトを使用する場合に便利です。

>背景色変化

フェイドアウト
背景が白から黒に変化します。
<SCRIPT type="text/javascript"><!--
 function Fadeout() {
 var n;
 var c;
 var colorStr = 'FEDCBA9876543210';
 for(n=0;n<16;n++) {
  c = colorStr.charAt(n);
  c = c + c + c + c + c + c;
  document.bgColor = c;
 }
}
 document.write('<BODY onLoad="Fadeout()">');
// --></SCRIPT>

※ソースはHEAD内に入れるようにして下さい。
フェイドイン
背景が黒から白に変化します。
<SCRIPT type="text/javascript">
<!--
 function Fadein() {
 var n;
 var c;
 var colorStr = '0123456789ABCDEF';
 for(n=0;n<16;n++) {
  c = colorStr.charAt(n);
  c = c + c + c + c + c + c;
  document.bgColor = c;
 }
}
 document.write('<BODY onLoad="Fadein()">');
// -->
</SCRIPT>

※ソースはHEAD内に入れるようにして下さい。
背景色をランダムに変更させる
アクセス度にランダムに背景色が変わります。
<SCRIPT type="text/javascript">
<!--
function randomColor() {
  var max = 6;
  wall = Math.floor(Math.random() * max) + 1;
  if (wall == 1) { document.bgColor = '色' }
  else
  if (wall == 2) { document.bgColor = '色' }
  else
  if (wall == 3) { document.bgColor = '色' }
  else
  if (wall == 4) { document.bgColor = '色' }
  else
  if (wall == 5) { document.bgColor = '色' }
  else
  if (wall == 6) { document.bgColor = '色' }
}
window.onload = randomColor;
// -->
</SCRIPT>

※ソースはHEAD内に入れるようにして下さい。
※お好きな色名を指定して下さい。
時間経過で背景色を変更
<SCRIPT type="text/javascript">
<!--
function changeColor(){
  setTimeout('document.bgColor="#ff0000"',3000);
}
window.onload = changeColor()
// -->
</SCRIPT>

※上記ソースでは、3秒(3000)後に背景色が、赤(#ff0000)に変わります。
背景を激しくフラッシュ(白背景へ)
<SCRIPT type="text/javascript">
<!--
f = 30
for(a=0; a<f; a++) {
  for(i=0; i<2; i++) document.bgColor="ffffff";
  for(i=0; i<2; i++) document.bgColor="000000";
  for(i=0; i<2; i++) document.bgColor="ff0000";
  for(i=0; i<2; i++) document.bgColor="00ff00";
  for(i=0; i<2; i++) document.bgColor="ff00ff";
  for(i=0; i<2; i++) document.bgColor="0000ff";
  for(i=0; i<2; i++) document.bgColor="00ffff";
  for(i=0; i<2; i++) document.bgColor="ffffff";
}
// -->
</SCRIPT>

※ソースはBODY内に入れるようにして下さい。
※<BODY bgcolor="#ffffff">を付け加えてください。
背景を激しくフラッシュ(黒背景へ)
<SCRIPT type="text/javascript">
<!--
f = 30
for(a=0; a<f; a++) {
  for(i=0; i<2; i++) document.bgColor="ffffff";
  for(i=0; i<2; i++) document.bgColor="000000";
  for(i=0; i<2; i++) document.bgColor="ff0000";
  for(i=0; i<2; i++) document.bgColor="00ff00";
  for(i=0; i<2; i++) document.bgColor="ff00ff";
  for(i=0; i<2; i++) document.bgColor="0000ff";
  for(i=0; i<2; i++) document.bgColor="00ffff";
  for(i=0; i<2; i++) document.bgColor="000000";
}
// -->
</SCRIPT>

※ソースはBODY内に入れるようにして下さい。
※<BODY bgcolor="#000000">を付け加えてください。

>ステータスバーに文字

ステータスバーに文字を表示する
<SCRIPT type="text/javascript">
<!--
defaultStatus="★ここの文字が表示されます";
//-->
</SCRIPT>

ステータスバーの文字を流す
<SCRIPT type="text/javascript">
<!--
 var msg; msg="★☆ここの文字が流れます★☆";
 msg=msg+msg;
 function disp(){setTimeout("disp()",300);
  msg=msg.substring(2,msg.length)+msg.substring(0,2);
  window.status=msg;
}
 document.write('<BODY onLoad="disp()">');
//-->
</SCRIPT>

ステータスバーにリンク先の内容を表示する
<A href="URL" onMouseOver="status='リンク先の説明';return true;">
リンク先へ行く</A>
※URL、説明コメント等は変えて下さい。
ステータスバーに今の日付と時間を表示する
<SCRIPT type="text/javascript">
<!--
function Watch() {
var now = new Date();
var year = now.getYear();
var month = now.getMonth()+1;
var date = now.getDate();
var hour = now.getHours();
var min = now.getMinutes();
var sec = now.getSeconds();
var day = now.getDay();

if ( day == 0 ) { day = "日" }
if ( day == 1 ) { day = "月" }
if ( day == 2 ) { day = "火" }
if ( day == 3 ) { day = "水" }
if ( day == 4 ) { day = "木" }
if ( day == 5 ) { day = "金" }
if ( day == 6 ) { day = "土" }

if ( month < 10 ) { month = "0" + month }
if ( date < 10 ) { date = "0" + date }
if ( hour < 10 ) { hour = "0" + hour }
if ( min < 10 ) { min = "0" + min }
if ( sec < 10 ) { sec = "0" + sec }

window.status = year + "年" + month + "月" + date 
+ "日(" + day + ") "+ hour + "時" + min + "分" + sec + "秒";
setTimeout ("Watch()",500);
}
Watch()
//-->
</SCRIPT>

ステータスバーの文字が変化(1)
ばらばらに散らばった文字が一ヶ所に集まります。
<SCRIPT type="text/javascript">
<!--
msg = "★ココの文字が変化します";
timeID = 10;
stcnt = 16;
wmsg = new Array(33);
  wmsg[0]=msg;
  blnk = "                                             ";
  for (i=1; i<32; i++)
  {
  b = blnk.substring(0,i);
  wmsg[i]="";
  for (j=0; j<msg.length; j++) wmsg[i]=wmsg[i]+msg.charAt(j)+b;
}

function wiper()
{
  if (stcnt > -1) str = wmsg[stcnt]; else str = wmsg[0];
  if (stcnt-- < -40) stcnt=31;
  status = str;
  clearTimeout(timeID);
  timeID = setTimeout("wiper()",100);
}

wiper()
//-->
</SCRIPT>

ステータスバーの文字が変化(2)
タイプライター式に文字がでてきます。
<SCRIPT type="text/javascript">
<!--
  var MessageText = "★ここの文字が流れます"
  var DisplayLength = 200
  var pos = 1 - DisplayLength;
function ScrollInStatusBar(){
  var scroll = "";
  pos++;
  if (pos == MessageText.length) pos = 1 - DisplayLength;
  if (pos<0) {
   for (var i=1; i<=Math.abs(pos); i++)
   scroll = scroll + "";
   scroll = scroll + MessageText.substring(0, DisplayLength - i + 1);
  }
  else
    scroll = scroll + MessageText.substring(pos, pos + DisplayLength);
  window.status = scroll;
  setTimeout("ScrollInStatusBar()",0);
  }
ScrollInStatusBar();
//-->
</SCRIPT>

>タイトルバーに文字

タイトルバーに時計を表示
<SCRIPT type="text/javascript">
<!--
function nowTime(){
 today = new Date()
 var t = (today.getHours() >= 10) ?
 today.getHours() : "0" + today.getHours()
 var m = (today.getMinutes() >= 10) ?
 today.getMinutes() : "0" + today.getMinutes()
 var s = (today.getSeconds() >= 10) ?
 today.getSeconds() : "0" + today.getSeconds()
 document.title = msg = t + ":" + m + ":" + s
 timerID = setTimeout("nowTime()" , 1000);
}
window.onload = nowTime();
//-->
</SCRIPT>

タイトルバーに文字列を流す
<SCRIPT type="text/javascript">
<!--
msg="ここの文字がタイトルバーに流れます "
msg+=msg

IE4=(navigator.appName==
 "Microsoft Internet Explorer"&&
 navigator.appVersion.charAt(0)>=4)

function titlemsg(){
 msg=msg.substring(2,msg.length)+msg.substring(0,2)
 document.title=msg
}

if(IE4)setInterval("titlemsg()",300)
//-->
</SCRIPT>

>時計

時計
好きな場所に今の時間を表示させます。
<SCRIPT type="text/javascript">
<!--
 wk_date = new Date();
 h = wk_date.getHours();
 m = wk_date.getMinutes();
 document.write(h + "時" + m + "分");
//-->
</SCRIPT>

リアルタイム時計
上記とは違い時間が進みます。
<SCRIPT type="text/javascript">
<!--
function Watch() {
  now = new Date();
  year = now.getYear();
  month = now.getMonth()+1;
  day = now.getDate();
  hour = now.getHours();
  minute = now.getMinutes();
  second = now.getSeconds();
  if (year < 1000) { year += 1900 }
  if (hour < 10) { hour = '0' + hour }
  if (minute < 10) { minute = '0' + minute }
  if (second < 10) { second = '0' + second }
  document.form.watch.value = year+'年' + month + '月' + day + '日 '
  + hour + ':' + minute + ':' + second;
  setTimeout("Watch()",1000);
}

 document.write('<FORM name=form><INPUT name=watch size=27></FORM>');
Watch();
//-->
</SCRIPT>

>クッキー

訪問回数の表示
<SCRIPT type="text/javascript">
<!--
acTimes=getCookie("AC");
if (acTimes=="") {
acTimes=1;
}
document.write(acTimes+"回目のご訪問");
acTimes++;
setCookie("AC",acTimes);

function getCookie(key){
tmp=document.cookie+";";
tmp1=tmp.indexOf(key, 0);
if(tmp1!=-1){
tmp=tmp.substring(tmp1,tmp.length);
start=tmp.indexOf("=",0)+1;
end=tmp.indexOf(";",start);
return(unescape(tmp.substring(start,end)));
}
return("");
}
function setCookie(key,val) {
tmp=key+"="+escape(val)+";";
tmp+="expires=Fri,31-Dec-2030 23:59:59; ";
document.cookie=tmp;
}
//-->
</SCRIPT>

訪問者の名前を記録
名前の入力を促すプロンプトが表示されます。
<SCRIPT type="text/javascript">
<!--
var username1 = GetCookie('username1');
if (username1 == null) {
  username1 = prompt('名前を入力して下さい。',"通行人");
  if (username1 == null) {
    alert('あなたの名前は【通行人】 で、登録されました。');
    username1 = '通行人';
  } else {
    SetCookie('username1',username1);
  }
}
function getCookieVal (offset) {
  var endstr = document.cookie.indexOf (";", offset);
  if (endstr == -1) endstr = document.cookie.length;
  return unescape(document.cookie.substring(offset, endstr));
}
function GetCookie (name) {
  var arg = name + "=";
  var alen = arg.length;
  var clen = document.cookie.length;
  var i = 0;
  while (i < clen) {
    var j = i + alen;
    if (document.cookie.substring(i, j) == arg) return getCookieVal (j);
    i = document.cookie.indexOf(" ", i) + 1;
    if (i == 0)
    break;
  }
  return null;
}
function SetCookie (name, value) {
  var argv = SetCookie.arguments;
  var argc = SetCookie.arguments.length;
  document.cookie = name + "=" + escape (value); 
}

document.write('あなたの名前は '+ username1 +'');
document.write(' さんで記録されました。<br><br>');
//-->
</SCRIPT>

※ソースはBODY内に入れるようにして下さい。

>ユーザー情報

訪問者のブラウザの情報を表示
<SCRIPT type="text/javascript">
<!--
document.write( "ブラウザ     " , navigator.appName    ,"<BR>");
document.write( "エージェント   " , navigator.userAgent  ,"<BR>");
document.write( "バージョン    " , navigator.appVersion ,"<BR>");
document.write( "コードネーム   " , navigator.appCodeName,"<BR>");
document.write( "使用言語     " , navigator.browserLanguage,"<BR>");
document.write( "使用言語     " , navigator.language,"<BR>");
document.write( "プラットフォーム  " , navigator.platform   ,"<BR>");
//-->
</SCRIPT>

訪問者のモニターの解像度を表示
<SCRIPT type="text/javascript">
<!--
 scr_wid = screen.width;
 scr_hei = screen.height;
document.write("あなたのモニターの解像度は、" +scr_wid+ "*" +scr_hei+ "");
//-->
</SCRIPT>

訪問者がJavaScriptを使えるかどうかを判別する
<SCRIPT type="text/javascript">
<!--
document.write("JavaScriptが使える状態です。");
// -->
</SCRIPT>
<NOSCRIPT>
JavaScriptが使えない状態です。
</NOSCRIPT>

訪問者のリンク元の表示
訪問者がどこから来たか表示させます。
<SCRIPT type="text/javascript">
<!--
if (document.referrer.length !=0 ){
 document.write(document.referrer+"からのご訪問");
}else{
 document.write("お気に入りからのご訪問");
}
//-->
</SCRIPT>

>ページ情報

最終更新日を表示
<SCRIPT type="text/javascript">
<!--
document.writeln( "最終更新日 : "+document.lastModified );
//-->
</SCRIPT>

ページのタイトルとURLを表示
<SCRIPT type="text/javascript">
<!--
document.write("タイトル: ",document.title,"<BR>");
document.write("URL: ",document.URL);
//-->
</SCRIPT>

ページ中のリンクの数を表示
<SCRIPT type="text/javascript">
<!--
document.write("リンク数は: ",+ document.links.length,"個です。<BR>");
//-->
</SCRIPT>

JavaScriptエラーを非表示
<SCRIPT type="text/javascript">
<!--
window.onerror=null;
//-->
</SCRIPT>

>メッセージ

入室時にメッセージ
ダイアログによるメッセージを表示します。
<SCRIPT type="text/javascript">
<!--
alert("ご訪問ありがとう!")
//-->
</SCRIPT>

※メッセージ内容は変更して下さい。
入室時に質問
ダイアログによる質問メッセージを表示します。
<SCRIPT type="text/javascript">
<!--
var nYn=confirm("質問");
 if(nYn) {alert("OKメッセージ");
}
 else{alert("NGメッセージ");
}
//-->
</SCRIPT>

※メッセージ内容は変更して下さい。
入室時に名前をたずねる
名前の入力を促すプロンプトが表示されます。
<SCRIPT type="text/javascript">
<!--
str=prompt('名前を入れてください','');
if(str!=null||str!='')document.write('こんにちは'+str.bold()+'さん')
//-->
</SCRIPT>

※挨拶文メッセージ内容は変更して下さい。
右クリック禁止
右クリックでダイアログによる禁止メッセージを出します。
<SCRIPT type="text/javascript">
<!--
function right(e) {
if (( navigator.appName == 'Netscape' )
&& ((e.which == 3 )||( e.which == 2 ))) {
alert("右クリックは禁止です!");
return false ;
}
else if (( navigator.appName == 'Microsoft Internet Explorer' )
&&(( event.button == 2 )||( event.button == 3 ))) {
alert("右クリックは禁止です!");
return false ;
}
return true ;
}
document.onmousedown = right ;
if ( document.layers ) {
window.captureEvents( Event.MOUSEDOWN ) ;
}
window.onmousedown=right ;
//-->
</SCRIPT>

※メッセージ内容は変更して下さい。
時間によってメッセージを変える
<SCRIPT type="text/javascript">
<!--
var m1 = "お元気ですか"
var m2 = "いってらっしゃい"
var m3 = "おはようございます"
var m4 = "こんにちは"
var m5 = "おつかれさまです"
var m6 = "こんばんは"
var m7 = "おやすみなさい"

function timeMsg(){
day = new Date();
hour = day.getHours();
if (hour <= 3) { document.write(m1) }
else
if (hour <= 5) { document.write(m2) }
else
if (hour <= 10) { document.write(m3) }
else
if (hour <= 14) { document.write(m4) }
else
if (hour <= 17) { document.write(m5) }
else
if (hour <= 21) { document.write(m6) }
else
if (hour <= 23) { document.write(m7) }
}
//-->
</SCRIPT>

※上のソースはHEAD内に入れ、
 BODY内、文字を表示させたい位置に
 <SCRIPT type="text/javascript">timeMsg()</SCRIPT>を記述して下さい。
 また文字内容はお好きなのに変更して下さい。

>リンク系

前のページに戻るボタン

<INPUT type="button" value="戻る" onclick="history.back()">

次のページに進むボタン

<INPUT type="button" value="進む" onclick="history.forward()">

ページを閉じるボタン

<INPUT type="button" value="閉じる" onClick="self.close()">

お気に入り登録ボタン

<INPUT type="button" value="お気に入りに登録"
onclick="javascript:window.external.addFavorite('URL','サイト名')">

※リンク文字内容、URL、サイト名は変更して下さい。
ページ印刷ボタン

<INPUT type="button" value="印刷"
onclick="javascript:window.print();">

ページ更新ボタン
ページを最新の状態に更新するボタンリンクです。

<INPUT type="button" value="最新の状態に更新"
onclick="javascript:location.reload(true)">

※メッセージ内容は変更して下さい。
前のページに戻れなくする

<A href="javascript:location.replace('URL');">メッセージ</A>

※「移転のお知らせ」ページでよく使われてます。
 また、上記タグ中のURLとメッセージの部分は変更して下さい。
スタートページに登録
ブラウザのスタートページに登録させるボタンです。

<INPUT type="button" value="スタートページに登録"
onclick="this.style.behavior='url(#default#homepage)';
this.setHomePage('URL');">

※URLはお好きなのに変更して下さい。
ページのソースを表示する
<SCRIPT type="text/javascript">
<!-- 
function viewSource(){
location = "view-source:" + window.location; 
} 
//--> 
</SCRIPT>

<A href="javascript: viewSource()">このページのソースを表示する</A>
※白線より上は<HEAD>内に、下は<BODY>に記述して下さい。

>ウィンドウ変化

画面ウィンドウが地震
ブラウザが小刻みに震えます。
<SCRIPT type="text/javascript">
<!--
bName = navigator.appName;
bVer = parseInt(navigator.appVersion);
if (bName == "Netscape" && bVer == 3) ver = "n3";
else if (bName == "Netscape" && bVer == 2) ver = "n2";
else if (bName == "Netscape" && bVer >= 4) ver = "n4";
else if (bName == "Microsoft Internet Explorer" && bVer == 2) ver = "e3";
else if (bName == "Microsoft Internet Explorer" && bVer > 2) ver = "e4";
if (navigator.appVersion.indexOf("Mac") != -1) ver+="m";
function earthquake() {
if (ver == "n4" || ver == "n4m" || ver == "e4" || ver == "e4m") {
for (i = 30; i > 0; i--) {
for (z = 10; z > 0; z--) {
self.moveBy(0,i);
self.moveBy(i,0);
self.moveBy(0,-i);
self.moveBy(-i,0);
} }
}
}
setTimeout('earthquake()',3);
//-->
</SCRIPT>

※一瞬ブラクラかと思われます・・・使用は注意してください。
ウィンドウリサイズ
ブラウザのウィンドウが中央から伸び上がってくるように大きくリサイズされてきます。
<SCRIPT type="text/javascript">
<!--
function winmove() {
  w = screen.width  * power;
  h = screen.height * power;
  x = Math.floor( ( screen.width  - w ) / 2 );
  y = Math.floor( ( screen.height - h ) / 2 );
  moveTo( x, y );
  resizeTo( w, h );
  if ( bigger ) { 
    power += 0.1;
    if ( power >= 1.0 ) { bigger = false; count++; }
  }
  else {
    power -= 0.1;
    if ( power <= 0.1 ) bigger = true;
  }

  if( count < loop ) {setTimeout( "biyon()", 5 );}

}

winmove();
//-->
</SCRIPT>
回転ウィンドウ
ブラウザのウィンドウがクルクル回転します。
<SCRIPT type="text/javascript">
<!--
resizeTo(400,400);
x=(screen.width+400)/6;
y=(screen.height+400)/6;
r=y;
d=0.0;

function winmove() {
moveTo(x+Math.cos(d)*r,y-Math.sin(d)*r);
d+=Math.PI/100.0;
if(d>=Math.PI*2){d=0.0}
}
setInterval('winmove()',80);
//-->
</SCRIPT>
縦横に動くウィンドウ
ブラウザのウィンドウが縦横に動きます。
<SCRIPT type="text/javascript">
<!--
var mv_x = 10;
var mv_y = 5;
for (nn = 2; nn > 0; nn--) {
  for (x = mv_x; x > 0; x--) {
  for (y = mv_y; y > 0; y--) {
  parent.moveBy(0,-x);
  }
}
  for (x = mv_x; x > 0; x--) {
  for (y = mv_y; y > 0; y--) {
  parent.moveBy(0,x);
  }
}
  for (x = mv_x; x > 0; x--) {
  for (y = mv_y; y > 0; y--) {
  parent.moveBy(x,0);
  }
}
  for (x = mv_x; x > 0; x--) {
  for (y = mv_y; y > 0; y--) {
  parent.moveBy(-x,0);
  }
} 
}
//-->
</SCRIPT>

>寄せ集め

ページスクロール
ページを目的の位置まで自動的にスクロールさせます。
<SCRIPT type="text/javascript">
<!--
var count = 0;
var max = 200;
function pageScroll() {
 if (navigator.appVersion > "3") {
  if (count < max) {
  scroll(0,count++);
  timer = setTimeout("pageScroll()",6);
  status = max-count;
  }
}
}
window.onload = pageScroll()
//-->
</SCRIPT>
※スクロールの幅は(var max = )の値を変更して下さい。
目標日までのカウントダウン
<SCRIPT type="text/javascript">
<!-
var now = new Date();
var Xday = new Date(2004, 0, 1);
count = (Xday.getTime() - now.getTime()) / (24 * 60 * 60 * 1000);
count = Math.ceil(count);
if(count > 0) document.write("2004年まであと", count, "日です");
if(count == 0) document.write("今日から2004年です");
if(count < 0) document.write("2004年になってから")
if(count < 0) document.write("", -count, "日経過しました");
//-->
</SCRIPT>

※コメントは自由に変更して下さい。
※数字の変更例として、2005年3月20日までのカウントダウンなら
var Xday = new Date(2005, 3, 20);
となります。

Copyright © 2004 AWCS. All Rights Reserved.  │ Sitemap │  E-mail