だるかぶ
ご訪問ありがとうございます。ゆっくりしていってね。（本ページは広告を含みます。）
JavaScript の文法・サンプル集です。
#️⃣ JavaScript の文法
とりあえず、調べた分だけ書いておきます。この記事を自分用のクイックリファレンスとして使いたい。
比較演算子
if 文とかで使う奴。
https://gist.github.com/darucub/cfedf50c1d4c9b7877ab3c861ad8ad65
エスケープ
ダブルクォーテーションの中で、ダブルクォーテーションを使う時なんかはバックスラッシュでエスケープする。
https://gist.github.com/darucub/d2413ee2420a30e071ac811bb69a8efd
特殊文字
使った事が無い奴もあるので後で確認する。 ← おい
https://gist.github.com/darucub/30e55f6dfd9bdd6f9876cce370e98d3b
#️⃣ 文字列を連結するサンプル
文字列は [ + ] で連結できる。
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 の合計値（この場合は３）が画面に出力されます。
#️⃣ ページを印刷するサンプル
ページを印刷（プリント）するサンプルコード。
<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();” を追加します。
動作サンプル
https://codepen.io/darucub/pen/wBGWgML
#️⃣ イベントハンドラのサンプル
イベントハンドラは、ある動作をきっかけにしてスクリプトを実行する時に使います。
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 ライブラリ
現場からは以上です。それでは、またッ！！！
だるかぶ