Webの記録

苦手なJavaScriptをイチから勉強してみる【関数編】

投稿日:2013年1月7日 更新日:

この記事は約 5 分で読めます。

苦手なJavaScriptをイチから勉強してみる【イベント編】の続きとしてメモします。

イチから「JavaScript」を学び直しをする為に記録を残しています。少しずつメモを追加していきます。

私の個人的なメモなので、ちょっと違うよ!とか、こうしたら?というのがあると思います。その場合はこっそりコメント等頂けると有難いです!

少しずつメモしているので、連載的な感じで続きを書いていってます。過去のメモも、時々追記していきます。超・初心者向けです。

今回は、「関数化」させる事についてメモしています。



JavaScript勉強の流れ

  1. 基本準備編
  2. 記述の基礎編
  3. イベント編
  4. 関数編←今回はココ。
  5. JavaScriptを外部ファイルにする

関数化のメリット

同じJavaScriptを複数の場所で何度も実行させる場合、毎回全く同じ記述していたら効率が悪いです。なので関数(ひとまとまりの部品)にしておくことで、使い回しが可能になります。

関数化する方法

例えば・・・以下のような別のファイルをクリックしたら開くという記述をする場合。
関数化する前は以下の通りだったとします。(9行目と11行目が同じ動作をさせるので、同じ記述になってます。)






<title>新しいウィンドウを開く</title>


<p><a href="#">新しいウィンドウを開く。</a></p>
<p>テキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキスト<br />
テキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキスト<br />
テキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキスト<br />
テキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキスト<br />
テキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキスト</p>
<p><a href="#">新しいウィンドウを開く。</a></p>


同じ動作なので、同じ記述をするのは効率悪いです。これがもっと何回も使われるような動作だったら尚更・・・です。
そんなワケで、ここで関数を作って以下のように少し効率よく書き換えます。

※7~13行目部分と16、22行目部分が変化しています。






<title>新しいウィンドウを開く</title>

<!--
function windowOpen(){
	window.open("sample.html","openWindow","width=360,height=240,location=no,toolbar=no,menubar=no,status=no,scrollbars=no,resizable=no");
}
//-->



<p><a href="#">新しいウィンドウを開く。</a></p>
<p>テキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキスト<br />
テキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキスト<br />
テキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキスト<br />
テキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキスト<br />
テキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキスト</p>
<p><a href="#">新しいウィンドウを開く。</a></p>


関数化の方法
function 独自でつけた関数名(){
この中に今まで記述していたJavaScriptの記述
}
読み込み方法
独自でつけた関数名(); を使いたい場所で記述
もうひと工夫。

今回は、別ファイルをクリックしたら開くというものでした。同じ動作ですが、関数を使わなかった場合と関数を使った場合の2通りの記述をしました。

しかし、上記をそのまま使うとちょっと問題が・・・。

クリックをする場所をaタグを使っているんですが、hrefの後の部分を「#」にしていると、2つ目のクリックをした時にクリックした時の位置から画面が動いてしまうのです。

そんなワケで、ひと工夫・・・。移動しないように、動かないおまじないを「#」を書いていた行を以下のように書き換えます!

<p><a href="void(0);">新しいウィンドウを開く。</a></p>

これで、クリックしても画面が動く事がなく、何度でも同じ関数を使う事ができるようになりました!

この方法ではおなじhtmlの中で、同じ関数を使い回しが出来るようになりました。

次回は、他のhtmlファイルでも使い回しが出来るように外部化(別ファイルの部品にする)の方法をメモします。

-Webの記録
-,

執筆者:


comment

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

This blog is kept spam free by WP-SpamFree.

このサイトはスパムを低減するために Akismet を使っています。コメントデータの処理方法の詳細はこちらをご覧ください

関連記事

no image

「Wordbooker」を使ってWordPressからFacebookへ自動表示をさせてみた。

この記事は約 1 分で読めます。最近気になっているのは、「Facebook」です。 気になる事は即実行~♪ってコトで、興味半分で早速Facebookに登録です♪ 今回は、WordPressのプラグイン …

no image

WordPress お問い合せフォームプラグイン「Trust Form」を試してみた♪

この記事は約 1 分で読めます。 今回は、WordPressのお問い合せフォーム用プラグイン「Trust Form」を試してみました。 ・・・と言っても、まだローカル環境でのテスト操作なので全ての実験 …

no image

WordPressテーマエディタをプラグイン「Advanced Code Editor」で見やすく♪

この記事は約 1 分で読めます。 WordPressでオリジナルテーマを作成する時、WordPressのテーマ編集画面のエディタを使用しているのですが・・・ちょっと見辛いなぁと思っていました。 今回何 …

no image

WordPress プラグイン「Dynamic To Top」で上に戻るボタンを簡単に設置♪

この記事は約 1 分で読めます。 よくいろんなサイトを閲覧していて、ページの下へスクロールしていくと・・・「上に戻る」ボタンを見かけます。 そこで今回は、Wordpressのプラグイン「Dynamic …

no image

苦手なJavaScriptをイチから勉強してみる【基本準備編】

この記事は約 1 分で読めます。今更なんですが、実はJavaScriptはちょっと苦手です。。。 jQueryのライブラリーを使って、部分的にいじる事はあっても・・・何となく「JavaScript」っ …