コードの記述方法
HTMLページ内に記述
<SCRIPT>
</SCRIPT>
type="text/javascript"
language="~" でバージョン指定も可能
コードの実行タイミング
.onload
.ready
DOMが構築されている途中
<script></script>の中に書くと、読み込まれた時点で実行される。
DOMが構築されてから
document.ready
DOMツリーは構築されているが、まだ外部からのロードは始まっていない。
window.onload
既に画像のレンダリングも終わった状態
window.onload = function(){...}
関数の定義
- function文による定義
- Functionコンストラクタによる定義
- 関数リテラルによる定義
function文による定義
function 関数名([引数1 [, 引数2 [, ……]]) {
[関数内で実行される任意の命令……]
}
デフォルト引数の設定
= で事前設定しておくと、デフォルト扱いになる。
function testfunc(a, b = null)
もし
function testfunc(a = null, b)
で、引数 testfunc(1) にしたら、a = 1, b = undefined になる。
引数は参照渡しか値渡しか？
テキストボックスの値を取得する
id属性で指定する場合
document.forms.(参照するフォームのid).(参照するコントロールのid)
name属性で指定する場合
document.forms.(参照するフォームのname).(参照するコントロールのname)
クッキーの操作
書き込み
=（イコール）で、変数と値をセットにして書き込み
document.cookie="変数=値"
設定値を加える
寿命を2時間(7200秒）に設定する
document.cookie="key=value; max-age=7200"
読み出し
document.cookie
を読み込めば、そのまま取得できるが、
key1=value1;key2=value2;key3=value3
正規表現
- チェック、置換、該当部分の抜き出しが可能
- チェック、該当部分の取り出し match
- 置換 replace
タイマーの利用と停止
- setInterval関数
- 返り値がtimerIDで、clearInterval(timerID)で停止させる。
ポップアップウィンドウ
getで指定するパラメータを、エンコード／デコードする
配列のソート
array.sort(comparefunction)
comparefunctionは、比較関数を定義する
comparefunction(a,b)が返す値が負の時は a→bの順に、正の時は b→a の順に並べる。0なら等しいとする。
Array.sort - Javascript | MDN
ページの遷移 / リダイレクト
任意のページに移動
location.href = (URL)
履歴の前後に移動
戻る
history.back();
進む
history.forward();
Dateオブジェクトの計算
Date.setMonth(Date.getMonth - 1)
即時関数
(function(){...
)()}
即時関数というらしい。即、実行される。
即時関数のポイント
- 関数が、グローバルに設定されない。 → リソースの節約
- 関数内で設定された変数は、当然ローカル
JSPの変数をJavascriptに渡す。
Javascriptの変数をJavaに渡す
コメント
1行コメント
// コメント
複数行コメント
/*
コメント
*/
タッチデバイスへの対応
obj = JSON.parse(data)
ウィンドウサイズの取得
window.parent.screen.width; // 高さ
window.parent.screen.height; // 幅
window.onresize = getScreenSize(); // ウィンドウのリサイズ時に発火
//画面サイズを取得する
function getScreenSize() {
var s = "横幅 = " + window.parent.screen.width + " / 高さ = " + window.parent.screen.height;
document.getElementById("ScrSize").innerHTML = s;
}
最終更新：2020年04月12日 12:16
