これまでまったくといっていいほどJavaScriptの勉強をしてこなかった。途中で挫折したといったほうがわかりやすいかな。だから、できれば避けて通りたかったのですが、html5ではJavaScriptは避けては通れないシロモノだということが判明したので、遅ればせながら勉強を始めることにしました。最初から大げさなことはできるわけではないので、簡単なものをパクって実装することから始めたいと思います。しかしやらなければならないことが山ほどありますね。もうすでにアゴが上がっている状態であります。
当然最初は全部パクリになります。参考サイトの解説に添って気を引かれたスクリプト部分を実際に書いて試してみることから始めることにします。また、同時にこのようなサイトを作成して、自分が学習していることの解説をするという、誠に無謀なことを同時に進めていきます。確かに時間はかかるけれども、これが私のような覚えの悪い者の学習には最短の道であると信じているわけであります。尚パクったサイトは「役に立つサイト」に掲載しておりますので、ここよりはむしろパクリ元のサイトを参考にしたほうがよろしいかと思います。
さていよいよ初めてのJavaScriptになりますが、htmlのどこに書いても動作するというので、まずは定石どおりに「Hello World」を表示させて見たいと思います。
文字を表示する document.write('Hello World');
SOURCE
<script>
document.write('Hello World');
</script>
そうか<script></script>で囲んでdocument.write('文字列');とやれば何でも書けるんだな。ただこれだけではあまり意味がないけどね。タグを書き込んでみようっと
SOURCE
<script>
document.write('<h3>h3タグを書き込んで見た</h3>
<p>h3タグとpタグを混在させて書くとどうなるのか</p>');
</script>
ページトップへ
コピーライトの西暦を自動更新
SOURCE
<script>
document.write('
<p>Copyright (c) 20010-' + (new Date().getFullYear())
+ ' morino-po. All Rights Reserved.</p>'
);
</script>
文字列と文字列の連結は+でいいんですね。新しくでてきたのは(new Date().getFullYear())ですね。これは眺めていれば大体察しがつきますが、やはり調べて見るべきでしょう。
new Date().getFullYear()
まだ調査していません
各ページのメニュー(nav)部分をまとめて JSで読み込む
この部分はすでにこのサイトに適用されています。同じようにfooter部分も共通なので同様の処理をしました。これによって共通部分が何十ページになろうとも1箇所のjsファイルを変更することによってその変更箇所が瞬時に反映されることになります。このJavaScriptが私にとっては最初の実用的なものとなります。
メンテナンスが大変
1ページや数ページのサイトでしたら、私のこの超原始的な方法でいいのですが、どうも根が駄文書き散らしの性格のようで、ひとつのサイトが数十ページにどうしてもなってしまいます。そうしますと各ページの共通部分に変更が生じた時が大変なのであります。一つひとつのページを開いて変更部分を書き換えていきます。共通部分で特に多く書き換えが生じるのはメニュー部分です。ページが増減した場合にリンクを増やしたり減らしたりという作業をやり続けるわけであります。もちろドリームウエバー等のツールを使用している場合は簡単なのでありますが。
その点デザイン部分に変更が生じた場合は簡単です。デザイン部分はすでにデータのあるhtml部分とデザイン制御のあるcss部分を分離していますから、css部分を書き換えれば何十ページあろうが何百ページあろうが瞬時に変更可能であります。
読み込まれる側の.jsファイルを用意します。
navi.jsファイルの内容
SOURCE
document.write('<h3>Navigation</h3>');
document.write('<ul>');
document.write('<li><a href="./index.html">HOME</a></li>');
document.write('<li><a href="./ht5-1.html">HTML5</a></li>');
document.write('<li><a href="./css3-1.html">CSS3</a></li>');
document.write('<li><a href="./js-1.html">JavaScript</a></li>');
document.write('</ul>');
読み込む側(HTML)の記述例
SOURCE
<nav>
<script src="./navi.js"></script>
</nav>
以下のようにどのページにも反映されるはずです。すでに10ページ分ほど試したので大丈夫です。
ここまでは試してみたので、大丈夫なのですが、読み込む時の記述が問題なのです。この部分はまだ充分に理解していないのでどうしようかと迷っているのであります。通常は以下のように書くようです。
SOURCE
<script language="JavaScript">
<!--
ここにJavaScriptを書き込む
// -->
</script>
この書き方が正しいようなのですが、今のところ動作していますので、なにか不具合が起きた場合には置き換えすることにします。
普通のJavaScriptを読み込ませようとして失敗
余談 効率だけを追求してはいけません
JavaScriptやCSSを使用して効率を追求する方法を紹介してきましたが、最初はあまり効率を追求してはいけません。愚直にいちいち手作業で何十回、何百箇所を訂正したり追加したり削除したりの作業を行うことを薦めます。一見すると非効率のようでありますが、最終的に自分の技倆を向上させることになります。
人は頭だけでは技術を習得できません。特に私のような凡庸なものにとっては特にそう思います。だから数限りない反復訓練が必要なのです。よって、一見して不合理で非効率な作業を繰り返すことによって最終的には自分の身体の芯に刻み込むことができるのだと信じています。
ページトップへ
ヨチヨチ歩きでJavaScriptの学習をしていたら、どんどんとjQueryに近づくことになってしまった。最初の思いつきはアコーディオンのような折りたたみ式のメニューを設置してみようというところから始まったのです。JavaScriptも理解していない身でちょっと無謀かなとも思ったのですがとにかく挑戦してみることにしました。
jQuery入門 (ver 1.3)を参考にする。まだ良く理解していないので、後に書き込む
まだ良く理解していないので、後に書き込む
01. jQueryとは
まだ良く理解していないので、後に書き込む
02. 豊富なプラグイン(ライブラリ)
まだ良く理解していないので、後に書き込む
03. jQueryのダウンロード
私の場合はjQueryをダウンロードするのではなく、Googleに置いてある、jQueryをそのまま利用する方法を採用することにしました。以下のコードをヘッダに書き込んであります。
なお、これらのコードはどこに書き込んでも動作するようであります。通常は<head>部分に書き込むそうですが、<body>の最後尾に書き込むということも有りだそうです。そうすればブラウザーがページ全体の画像やテキストを先に表示して後にJavaScriptが動作するということで、後者のほうが理に適っているような気がします。そちらのほうが都合が良いようでしたら後に変更することにしています。
SOURCE
<script type="text/javascript" src="http://www.google.com/jsapi"></script>
<script type="text/javascript">google.load("jquery", "1.4");</script>
ページトップへ
まだ良く理解していないので、後に書き込む
jQueryの初めの一歩の開始であります。これらのコードは<body>内のどこに書いても動作します。実際に運用するばあいは、JavaScriptの部分(<script type="text/javascript">)は<head>か、別ファイルを用意したほうが可読性が生まれるし、すっきりするだろうと思います。
【参照サイトへ】
2 01-01 $("#about").html("<b>軽量/高速</b>なライブラリです");の場合
SOURCE
<body>
<p id="about">jQueryとは?</p>
<form>
<input type="button" value="書き替え" onClick="changeText()">
</form>
<script type="text/javascript">
<!--
function changeText(){
$("#about").html("軽量/高速なライブラリです");
}
-->
</script>
</body>
2 01-02 $("#about").text("<b>軽量/高速</b>なライブラリです");の場合
SOURCE
<body>
<p id="about">jQueryとは?</p>
<form>
<input type="button" value="書き替え" onClick="changeText()">
</form>
<script type="text/javascript">
<!--
function changeText(){
$("#about").text("軽量/高速なライブラリです");
}
-->
</script>
</body>
02. 特定のクラスを持つエレメントへのアクセス
03. 特定のタグへのアクセス
04. 階層構造へのアクセス
ページトップへ
01. スタイルシートへのアクセス
02. プロパティを一括で書き替える
03. クラスの追加と削除を行なう
04. スタイルシートクラスを交互に切り替える
ページトップへ
01. ページ内容が読み込まれたら処理を行なう
02. クリック時の処理
03. マウスオーバー/アウト/ホバーの処理
ページトップへ
01. 非同期通信処理
02. 非同期通信でデータを読み込む
03. 通信時のエラー処理
ページトップへ
01. ドラッグの処理
02. リサイズの処理
03. テーブルソート処理
01. プラグインの作成
ページトップへ