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

Google Analyticsでユーザーの「年齢・性別・興味」を知るには?

この記事は約 1 分で読めます。昨年10月に追加されたGoogle Analyticsの「ユーザー属性・インタレストカテゴリ」。 サイトに訪問したユーザーの「年齢・性別・興味」が分かるようになりました …

no image

初心者のアクセス解析勉強メモ【用語と簡単にサイトをチェックしてみた】

この記事は約 1 分で読めます。 最近、興味があるのは・・・アクセス解析関係。 Webサイトを作った後、運営していくのにはやっぱり重要!アクセス解析をして、そのサイトの現在の状態を見て、それから目標を …

no image

WordPress the_excerpt()を使った抜粋にチャレンジ

今回は、「抜粋」をテンプレートタグthe_excerpt()を使って実現する方法にチャレンジしてみました。

no image

WordPressのバージョンを消す方法。

この記事は約 2 分で読めます。 WordPressのバージョンによってはセキュリティー的に脆弱性があるようで、いろいろネット検索をしていると表示を消した方が良いと出て来たので消してみたいと思います。 …

no image

コピペで簡単にできるレスポンシブ対応GoogleMapの設置方法

この記事は約 1 分で読めます。 ショップなどのサイトだと、地図は必須ツール。GoogleMapを利用する機会が多いです。 今回、スマホ対応サイトでGoogleMapを設置する機会がありました。 細か …