トップ 差分 一覧 ソース 検索 ヘルプ PDF RSS ログイン

JavaScript

いままで適当ながらに他人のをパクって使っていたので、ここいらでまとめておこうと思う今日この頃。

JavaScript Central

本家netscapeのJavaScriptに関する仕様書

netscape devedge
http://devedge.netscape.com/central/javascript/

書き方

 HTMLに記述

まずは

<SCRIPT Language="言語バージョン">
   //スクリプト
</SCRIPT>

言語バージョンはInternetExplorerでは設定しても意味をなさないとか。
ブラウザにスクリプトを実行させるかどうかの設定です。

言語バージョンNN2.0NN3.0NN4.0NN4.06NN6.0-7.xIE3.0IE4.0IE5.0-6.x
JavaScript
JavaScript1.1××
JavaScript1.2×××
JavaScript1.3×××××
JavaScript1.4××××××
JavaScript1.5××××××
JScript×××××

※IE2.0は未対応
※JScriptはIE専用
※△:一部未対応

JScriptバージョンについてはこちら

MSDN
http://www.microsoft.com/japan/msdn/library/ja/script56/html/js56jsoriversioninformation.asp?frame=true

 外部ファイル

ファイルの拡張子は.jsとする必要がある。

<SCRIPT SRC="FileName.js"></SCRIPT>

サーバー上に置いたときに動作しない場合は、サーバー側でMIMEタイプを設定する必要がある。

MIMEタイプ拡張子
application/x-javascriptjs

 行区切り

1行はセミコロンで区切る。

document.write(i);

 数値

数値進数
6553510進数
0xffff16進数
0778進数

 文字列

ダブルクォーテーションかシングルクォーテーションで囲む。

"サンプル"
'テスト'
"テスト"
'サンプル'

 変数名

変数名は最初がアンダーバーか英文字で始まる必要があり、大文字と小文字は区別される。

_buf += 1;
myVal = "金額";

変数の宣言はVarを使用する。
関数内でVar宣言した変数はローカル変数になり、それ以外はグローバルになる。

Var n = 0;
Var myStr = "サンプル";
uDate = new Date();

 型変換

数値 > 文字列

myStr = "" + 65535;

文字列 > 数値

myVal = eval(文字列);
myVal = parseFloat(文字列);

 特殊文字

特殊文字意味
\bバックスペース
\fフォームフィード
\n改行
\rリターン
\tタブ
\\円記号

 二項演算子

 代入演算子

 比較演算子

 文字列演算子

 リテラル

定数値のことで、trueやfalseや"文字列"や123.4などのこと。
trueは0以外、falseは0で代用することもできる。

テストスクリプト

まずは習うより慣れろということで、適当なスクリプトを作成し実行してみる。

参考サイト

OpenSpace
http://www.openspc2.org/

MSDNサイトより

ダイナミック HTML
http://www.microsoft.com/japan/msdn/library/default.asp?url=/japan/msdn/library/ja/jpisdk/dhtml/dhtml.asp
JScript
http://www.microsoft.com/japan/msdn/library/default.asp?url=/japan/msdn/library/ja/script56/html/js56jsgrpnonecmafeatures.asp

 テスト1

forの無限ループをif breakで抜けるスクリプト。

<html>
<head>
<title>JavaScriptSample</title>
</head>
<body>
<SCRIPT Language="JavaScript">
<!--
var _n = 0;
for (;;){					//無限ループ
	_n += 1;
	document.write(_n, '<br>');		//書出し
	if (_n == 10) break;		//ループを抜ける
}
// -->
</SCRIPT>
</body>
</html>

 テスト2

こんどはwhileを使用する。continueでループの先頭に戻る処理と、奇数カウントを表示するように変更してみた。

<html>
<head>
<title>JavaScriptSample</title>
</head>
<body>
<SCRIPT Language="JavaScript">
<!--
var _n = 0;
while (1){						//無限ループ
	_n += 1;
	if (_n % 2 == 0) continue;				//ループ先頭へ
	if (_n > 20) break;				//ループを抜ける
	document.write('<div align="center">', _n, '</div>');	//書出し
}
// -->
</SCRIPT>
</body>
</html>

 テスト3

for..inを使用するとプロパティ分ループするようだ。この場合変数を宣言すると動作しないのは何ででしょ?

<html>
<head>
<title>JavaScriptSample</title>
</head>
<body>
<SCRIPT Language="JavaScript">
<!--
for(i in window)
{
	document.write(i, " = ", window[i], "<br>");
}
// -->
</SCRIPT>
</body>
</html>

 テスト4

functionを定義してみる。

<html>
<head>
<title>JavaScriptSample</title>
</head>
<body>
<SCRIPT Language="JavaScript">
<!--
function smp(buf)
{
	return buf * 10;
}

for(i = 1; i <= 10; i++)
{
	document.write(smp(i), "<br>");
}
// -->
</SCRIPT>
</body>
</html>

 setIntervalとclearInterval

関数の呼び出し時にタイマーをセットし、同じ関数を定期的に呼び出すことができる。タイマーを解除するにはclearIntervalを使用する。

intervalID = object.setInterval(expression, msec [, language])
object.clearInterval(intervalID)

objestはwindowになるが省略可能。

<html>
<head><title>setInterval&clearInterval</title></head>
<body onload='timeID=window.setInterval("action()", 1000)'>
<form name="form">
	<input type="text" name="sample" style="text-align: right">
</form>

<script language="JavaScript">
var count=0;
function action(){
	document.form.sample.value=count;
	count++;
	if(count>10) window.clearInterval(timeID);
}
</script>
</body>
</html>

 setTimeoutとclearTimeout

setIntervalが同じ定期的に呼び出すことにたいして、setTimeoutは違う関数を呼び出したりできる。下のサンプルは同じ関数を再帰的に呼び出している。

timeoutID = object.setTimeout(expression, msec [, language])
object.clearTimeout(timeoutID)

objectはwindowになるが省略可能。

<html>
<head><title>setInterval&clearInterval</title></head>
<body onload="action()">
<form name="form">
	<input type="text" name="sample" style="text-align: right">
</form>

<script language="JavaScript">
var count=0;
function action(){
	document.form.sample.value=count;
	count++;
	timeID = window.setTimeout("action()", 1000);
	if(count>10) window.clearTimeout(timeID);
}
</script>
</body>
</html>

return false

例えば極端な例として↓のようなhtmlがあったとする。

<div style="background:#333;width:10em;height:200em"></div>
<p><a href="#">TOP</a></p>

これをブラウザで表示してみると、黒い縦長のブロックがず〜っと下に続いていて、下にスクロールした先のTOPをクリックすると画面は一番上に戻る(上にスクロール)されるはず。
このときjavascriptでreturn falseを使うと、画面をスクロールさせないようにできる。

<div style="background:#333;width:10em;height:200em"></div>
<p><a href="#" onclick="javascritp:return false;">TOP</a></p>

そこで

<div style="background:#333;width:10em;height:200em"></div>
<p><a href="#" onclick="javascritp:foo();return false;">TOP</a></p>

とすれば、javascriptのfoo()を実行し、かつ画面は上にスクロールしない状態にできる。
foo()が内部でreturn falseを返す場合は

<div style="background:#333;width:10em;height:200em"></div>
<p><a href="#" onclick="javascritp:return foo();">TOP</a></p>

と書いてもよい。

createElementとonclick

createElementで作ったタグにsetAttributeでonclickをつけたところ、firefoxでは動作するがieでは動作しないことに気づいた。

var container = document.getElementById("foobar");
var a = document.createElement("a");
a.setAttribute("href", "javascript:void(0)");
a.setAttribute("onclick", alert("click!!"));
a.appendChild(document.createTextNode("click me");
container.addChild(a);

どうやらieではonclickなどのイベントをsetAttributeできないようなので、

a.setAttribute("onclick", alert("click!!")); // mozilla


a.onclick = function() { alert("click!!"); }; // ie

のようにしなければいけないらしい。

とりあえず2つとも記述しておけば動くようだが、別件でjQueryを使っていたので、なにか使えるものがないか調べた。

$(a).bind("click", function() { alert("click!!"); });

とするとjQuery経由で共通に記述できるみたい。

prototype.jsの場合は

Event.observer(a, "click", function() { alert("click!!"); });

ブラウザの進む・戻る

javascriptを使ってブラウザの「前の画面に戻る」を実行する場合。

<a href="javascript:void(0);" onclick="history.back(); return false;" onkeypress="history.back(); return false;" title="もどる">前の画面に戻る</a>

ちなみに進むときは

history.forward();

ブラウザの戻るの問題点と無効化

javascriptを利用してinputタグのvalueを変更し、submitした先のページから、ブラウザの戻るを使用するとinputタグのvalueは変更後のキャッシュになっていて、具合が悪い場合がある。

例として

EC-CUBEの商品一覧の2ページ目の商品から、任意の商品をカゴに入れ、カート画面に遷移。カート画面からブラウザの戻るで商品一覧の2ページ目に戻り、3ページ目にいこうとリンクをクリックすると、商品が再度カゴに入ってしまう。

理由は、最初のカゴに入れる操作でinputタグのproduct_idがセットされ、EC-CUBEではproduct_idがあるときにカゴに入れる処理が走るようになっているため。

ブラウザの戻るをしてもwindow.onloadは有効なので

window.onload = function(){
    //document.form1['product_id'].value = "";
    document.form1.product_id.value = "";
}

として初期化することでとりあえず対処できる。

無効化については参考サイトより

www.Javable.Jp
http://www.javable.jp/notes/webscripts/backbutton.html
<SCRIPT>history.forward();</SCRIPT>

をページに書くべし。