[ JavaScript ] 文法・サンプル集ほか

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^)

コメントを残す

メールアドレスが公開されることはありません。 が付いている欄は必須項目です