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.

関連記事

no image

WordPressでオリジナルテーマ作りにチャレンジ3【header・footer編】

この記事は約 2 分で読めます。WordPressのオリジナルテーマ作りにチャレンジしています。 手順を数回に分けてメモしています。今回はその3回目です。 前回は、コーディングしたものを貼り付けた「i …

no image

Facebookで友達が始めたアプリのリクエストをブロックする方法

この記事は約 1 分で読めます。 Facebookで友達が何かのアプリを始めた時、関係のない自分にまでリクエストがくる事があります。 よく言われる「スパムアプリ」なんだけれど、最近特に多いのが「マイカ …

no image

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

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

no image

WordPress 新着記事のタイトルを表示する方法。

この記事は約 1 分で読めます。 WordPressのテンプレートタグ、いろいろあって奥が深いです。 今回は、トップページやサイドバーに「新着記事のタイトル」を数件表示したりする時に使いたいなぁと思っ …

no image

軽量で簡単に設置出来るjQueryスライダー「FlexSlider」。

この記事は約 1 分で読めます。 今までいくつかのjQueryスライダーライブラリを利用しました。今回も軽量で簡単に設置が出来る「FlexSlider」を見つけたので、早速メモです。 スマートフォンで …