１．JavaScriptを外部ファイルから読む
単純作業を繰り返すと人間、飽きてしまうし、ミスも増えます。時間もかかる。 そういう作業は機械にやってもらうのが一番です。
たとえば、複数ページにまたがるWebページを作成するときって、 共通のヘッダやフッタを入れたりしますね。 そういう部分の修正は単純作業です。 修正し忘れがおこったり、面倒くさいといって そもそも修正しなかったり・・・・
ページごとのデザインが変わってしまって Webページの質も落ちてしまうというものです。
今日は、JavaScriptを外部ファイルから読み込んで、 共通のヘッダーを入れ込む方法を紹介し、解説しましょう。
sample.html
<html>
<head>
<script src="jquery-1.4.1.min.js" type="text/javascript"></script>
<script src="my.js" type="text/javascript"></script>
</head>
<body>
<div>
コンテンツ
</div>
</body>
</html>
my.js
$(function(){
$('body>*:first-child').before('<h1>jQuery勉強ブログ</h1>');
});
まずは、こんな風に書いてみましょう。
ファイル構成はこんな感じ。
+ sample.html
+ my.js
+ jquery-1.4.1.min.js
HTMLファイルが１つとJavaScriptのファイルが２つです。
できたらsample.htmlをブラウザで見てみましょう。
どうなりましたか？
jQuery勉強ブログ
こんな風な表示になりましたでしょうか？
htmlファイルの中には、jQuery勉強ブログっていう タイトルが書いてないのにブラウザではみえていますね。 どうでしょうか。
こんな風にすれば、複数のWebページに 共通のヘッダー部分を表示させたい場合など便利だと 思いませんか？
変更が必要になったときに書き換えなければいけないのは、 my.jsのファイル一つだけ。
管理がとっても楽になります。
では、解説していきましょう。
<script src="my.js" type="text/javascript"></script>
ここの部分の書き方は大丈夫ですか？ jQueryを読み込むのと同じ方法で、自分が作った JavaScriptファイルを読み込んでいます。
$(function(){
});
この部分は前回説明しましたね。 「HTMLが操作できるようになったらfunction(){}の中身のJavaScriptを実行しろ」 っていう意味でした。
この文、括弧がやたら出てきて少し分かりにくいですね。さらっと解説しましょう。
この文は、「$()」と「function(){}」の２つの部分に分解できるのです。
function(){}
この部分は、実はjQueryじゃありません。素のJavaScriptです。 「関数」といって、命令文を一個にまとめて置くための書き方です。
前回、素のJavaScriptの解説で
var print_box = function(){＜内容＞}
といった書き方を説明しましたね。それと同じです。
$()
・・・この部分、jQueryを勉強しているとよく見かけませんか？ 要素を選択するときに「$('#box')」などとしましたね。それと同じ・・・・同じなんです。
$()が実は、jQueryの本体なんです。
jQueryは賢いですから、 括弧の中に関数が入っていたら 「HTMLが操作できるようになったらfunction(){}の中身のJavaScriptを実行しろ」 ってブラウザに命令するんだなって解釈します。
括弧の中にCSSで要素を選択する書き方（セレクターといいます。）が 記述してあったら要素を操作する準備をします。
そういうことです＞＜
「$()」、この中にはまだまだいろんなものが入れられますので、 のちのちまとめて解説することになると思います・・・。
とりあえず今は、
１．「$()」がjQueryの本体で、
２．セレクターを入れれば要素を操作する準備をするんだな。
３．関数を入れれば準備ができた時点で関数を実行するんだな。
・・・程度に覚えていただければと思います。
$('body>*:first-child').before('<h1>jQuery勉強ブログ</h1>');
さて、次は、続いてこの部分を解説しましょう。
$('body>*:first-child')
この部分の書き方は、
bodyタグの直下にあるすべての要素のうち一番最初の要素を選択して 操作する準備をする
ということを書いてあります。
このサンプルからいうと
<div>コンテンツ</div>
の部分になります。
$('div')
だと複数個Div要素がでてきたときにでてきたDiv要素すべてを 選択してしまいますね。
かといって、
<div id="first">
なんてするのは面倒くさい。 なにしろ複数ページのメンテナンスを簡単にするのが 今回の目的ですからね。
body>*
この部分は、CSSに詳しいかたなら使っているでしょうか。
<body>
<div>
<h1>サンプル</h1>
</div>
</body>
こんな風に要素が入れ子構造になっていたとしますね。
body *
こんな風に書いたらdiv要素もh1要素も選択されます。 bodyタグに直接囲まれている要素だけ選択したい場合の書き方が「body>*」です。
さて、bodyの中の一番上の要素を選択できました。
そして、今回は、その一番上のさらに上に ヘッダーを書き加えたいのでした。
$('body>*:first-child').before('<h1>jQuery勉強ブログ</h1>');
それがこの部分です。 一番上の要素のさらにその手前に括弧内の文字を加えなさい っていう意味です。
ですから、このJavaScriptが実行されたとき、 （HTMLが読み込まれた後、画像が読み込まれる前でしたね）
<body>
<div>
コンテンツ
</div>
</body>
が、
<body>
<h1>jQuery勉強ブログ</h1>
<div>
コンテンツ
</div>
</body>
こんな風に書き換わるのです。
では、逆にページの1番下を外部から操作してみましょう。
my.js内をこんな風に書き換えてみましょう。
$(function(){
$('body>*:first-child').before('<h1>jQuery勉強ブログ</h1>');
$('body>*:last-child').after('<address>m-yamamoto</address>');
});
これで、ヘッダとフッタが自動的に書き込まれたはずです。 どうでしたでしょうか。
ページの一番下に書き加えたいときは、
$('body>*:last-child').after();
こんな風に書きます。
最初のサンプルのfirstがlastになり、 beforeがafterになっただけですね。
では、次回からは、いよいよ要素を動かして いく方法について説明していきたいと思います。
コメントする