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

iPad・iPhoneでレイアウトが崩れた時に試してみたこと

この記事は約 1 分で読めます。 今まではWebサイト制作は、PCでの表示だけを意識して作っていたのですが、最近iPadやiPhone・Androidでのアクセスが増えて、お仕事の依頼もPCだけでなく …

no image

右クリックで独自メニューを出して画像のコピーガード

この記事は約 1 分で読めます。 画像のコピーガードを3通り試しています。 今回は「右クリックで独自メニューを出す」方法を試してみました。 「右クリック禁止で画像のコピーガード」、 「透明画像を置いて …

no image

WordPressでオリジナルテーマ作りにチャレンジ 2【切り分け編】

この記事は約 1 分で読めます。 WordPressのオリジナルテーマ作りをしています。 今回は、前回の【準備編】の続編です。 ※(x)html+cssの知識がある事が前提で書いています。 前回までで …

no image

WordPress記事中の文章をコピーしたら管理者にお知らせしてくれるプラグイン「Check Copy Contents(CCC)」を試してみた

この記事は約 2 分で読めます。 私の過去記事で人気なのが、「画像のコピーガード」。画像を盗用されることに対して対策を打ちたい方がたくさんいらっしゃるのでしょう。 もしこれが記事中の文章においても、コ …

no image

「ページ内リンクはするするスクロール」にチャレンジ!!

今日は・・・、「ページ内リンク」でちょっとイイカンジにスクロールするjQueryにチャレンジです。
ページ内リンクをそのまましても(javaScriptなし)出来ますが、そのままだといきなり戻り先に到着してしまってびっくりするので、「yuga.js」でするするという動きをつけてみました。