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

IE6で透過pngを表示してみました♪

この記事は約 1 分で読めます。IE6対策をいつまですれば良いのかなぁというところですが、まだもう少しIE6を意識してサイトを作ってます。 今回は、IE6ではキレイに表示されない透過pngをキレイに表 …

no image

苦手なJavaScriptをイチから勉強してみる【イベント編】

この記事は約 1 分で読めます。 苦手なJavaScriptをイチから勉強してみる【基本準備編】の続きとしてメモします。 イチから「JavaScript」を学び直しをする為に記録を残しています。少しず …

no image

X SERVERにa-blog cmsをインストールしてみた。

この記事は約 1 分で読めます。 先日「「AMPPS」にa-blog cmsのローカル環境を作ってみる」でローカル環境にa-blog cmsをインストールしてみました。 今回、a-blog cmsの勉 …

カラーミーショップ無料テンプレート「Bit」のフリーページ表示順を変えてみた

この記事は約 1 分で読めます。 比較的安価でネットショップ初心者でも始められる「カラーミーショップ」。 スマホからのアクセスにも対応できる、シンプルなレスポンシブデザインの無料テンプレート「Bit」 …

no image

WordPressサイトでRSSフィードボタンを設置してみた♪

この記事は約 1 分で読めます。 何気にWebサイトで、オレンジ色のRSSフィードボタンを見掛けます。 Webサイトの新着情報配信をする為のものなんですが、私のサイトでは今までボタンを設置してませんで …