JavaScript の文法・サンプル集です。
JavaScript の文法 ———————————————————————-
とりあえず、調べた分だけ書いておきます。この記事を自分用のクイックリファレンスとして使いたい。
比較演算子
if 文とかで使う奴。
| 比較演算子 | 意味 |
| ———- | ——————– |
| ==
| 式が等しい |
| ===
| 式が等しく型も等しい |
| !=
| 式が等しくない |
| >
| 左が大きい |
| >=
| 左が等しいか大きい |
| “ | 右が大きい |
| =
| 右が等しいか大きい |
エスケープ
ダブルクォーテーションの中で、ダブルクォーテーションを使う時なんかはバックスラッシュでエスケープする。
記号 | 意味 |
---|---|
\" |
ダブルクォーテーション |
\' |
シングルクォーテーション |
\\ |
円記号 |
特殊文字
使った事が無い奴もあるので後で確認する。 ← おい
記号 | 意味 |
---|---|
\b |
バックスペース |
\f |
フォームフィード |
\n |
改行 |
\r |
キャリッジリターン |
\t |
水平タブ |
文字列を連結するサンプル
文字列は [ + ] で連結できる。
document.write ( '<p>文字列の’ + ‘連結</p>‘ );
slice でゼロパディング ( ゼロ埋め ) を簡単にするサンプル ———————————————————————-
今まで、JavaScript でゼロパディング ( ゼロ埋め ) をする時は、次のように if で判定していました。
if (hour 10) {
hour = "0" + hour;
}
でも、slice を使うと、ゼロパディング ( ゼロ埋め ) が次のように簡単に出来るようです。
hour = ( "0" + hour ).slice(-2);
処理内容は、先頭にゼロを加えて、おしりから二文字を取得して代入しています。
確認ダイアログを表示するサンプル
確認ダイアログを表示する事で、ユーザの選択による処理分岐ができます。
サンプルコード
<script language="JavaScript">
<!--
function myConf(){
myReturn = confirm("よろしいですか?");
if ( myReturn == true ) {
alert("OK を押した");
} else {
alert("Cancel を押した");
}
}
//-->
</script>
<form>
<input type="button" value="確認ダイアログを表示" onclick="myConf()">
</form>
サンプルコード ( 上と同じ処理の違った書き方 )
<script language="JavaScript">
<!--
function myTest() {
if (confirm("よろしいですか?")){
alert("OK を押した");
} else {
alert("Cancel を押した");
}
}
//-->
</script>
<a href="javascript:myTest()">確認ダイアログを表示</a>
引数を返すサンプル ———————————————————————-
JavaScript で引数を返す方法です。
function TestFunc (x,y) { return x + y; } document.write(TestFunc(1,2));
上記の様にやると、X と Y の合計値(この場合は3)が画面に出力されます。
ページを印刷するサンプル ———————————————————————-
ページを印刷(プリント)するサンプルコード。
<a href="javascript:print();">印刷する</a>
プリント用の CSS とか書くのかな?
私的には、ページに印刷ボタンは付けたくない。Cmd + P を押せと…。
アラートを表示するサンプル ———————————————————————-
JavaScript 初心者の私はアラートを使って変数の中身を確認したりします。あまりスマートな方法ではありませんが、簡単なのでメモしておきます。
サンプルコード
alert(‘アラートの内容\n二行目はこんな感じ’);
クリックすると全選択になるテキストフィールドのサンプル ———————————————————————-
ブログのトラックバック URL をコピーする時、クリックするだけでテキストフィールドの内容が全選択状態になると便利なはず!と言う事で書いてみました。
<input type="text" value="http://hoge.jp/tb.cgi" onclick="this.select();">
こんな感じで、onClick=”this.select();”
を追加します。
サンプルファイル
イベントハンドラのサンプル ———————————————————————-
イベントハンドラは、ある動作をきっかけにしてスクリプトを実行する時に使います。
onDblClick
ダブルクリックでイベント発動する。
onDblClick=”alert(‘コメント’)”
onLoad
ページの読み込みが完了した時に発動するイベント。
// ページ全体の読み込みが完了したら関数を実行する。
window.onload = initialize();
onUnload
ページを移動する時に発動するイベント。
– 参考 : ETC/属性リファレンス
ページタイトルと URL を取得するサンプル ———————————————————————-
現在のページタイトルを取得する
document.write ( ‘<p>‘ + document.title + ‘</p>‘);
現在の URL を取得する
document.write ( ‘<p>‘ + location.href + ‘</p>‘);
文字列をエンコードする関数 ———————————————————————-
JavaScript で文字列をエンコードするには、以下の関数を使うんだそうな。
文字列をエンコードする関数
– escape(); – encodeURI(); – encodeURIComponent();
参考ページ
– javascript: escape(), encodeURI(), encodeURIComponent() 比較 (groundwalker.com)
便利な JavaScript ライブラリ ———————————————————————-
– ajaxzip3 – 郵便番号検索 API, JSONP 対応。これで郵便番号のメンテナンス作業から解放されます。- Google Project Hosting
以上です。(^o^)