JavaScript初めの一歩

Media Literacy 2010, Crowner.Co.LTD

JavaScript初めの一歩

これまでまったくといっていいほどJavaScriptの勉強をしてこなかった。途中で挫折したといったほうがわかりやすいかな。だから、できれば避けて通りたかったのですが、html5ではJavaScriptは避けては通れないシロモノだということが判明したので、遅ればせながら勉強を始めることにしました。最初から大げさなことはできるわけではないので、簡単なものをパクって実装することから始めたいと思います。しかしやらなければならないことが山ほどありますね。もうすでにアゴが上がっている状態であります。

当然最初は全部パクリになります。参考サイトの解説に添って気を引かれたスクリプト部分を実際に書いて試してみることから始めることにします。また、同時にこのようなサイトを作成して、自分が学習していることの解説をするという、誠に無謀なことを同時に進めていきます。確かに時間はかかるけれども、これが私のような覚えの悪い者の学習には最短の道であると信じているわけであります。尚パクったサイトは「役に立つサイト」に掲載しておりますので、ここよりはむしろパクリ元のサイトを参考にしたほうがよろしいかと思います。

JavaScript演習

さていよいよ初めてのJavaScriptになりますが、htmlのどこに書いても動作するというので、まずは定石どおりに「Hello World」を表示させて見たいと思います。

文字を表示する document.write('Hello World');

SOURCE

<script>
       document.write('Hello World');
</script>
          

DEMO

結果↓

そうか<script></script>で囲んでdocument.write('文字列');とやれば何でも書けるんだな。ただこれだけではあまり意味がないけどね。タグを書き込んでみようっと

SOURCE

<script>
       document.write('<h3>h3タグを書き込んで見た</h3>
       <p>h3タグとpタグを混在させて書くとどうなるのか</p>');
</script>

DEMO

結果↓

ページトップへ

コピーライトの西暦を自動更新

SOURCE

<script>
       document.write('
<p>Copyright (c) 20010-' + (new Date().getFullYear())
+ ' morino-po. All Rights Reserved.</p>'
); </script>

DEMO

文字列と文字列の連結は+でいいんですね。新しくでてきたのは(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ページ分ほど試したので大丈夫です。

DEMO

Navigation

ここまでは試してみたので、大丈夫なのですが、読み込む時の記述が問題なのです。この部分はまだ充分に理解していないのでどうしようかと迷っているのであります。通常は以下のように書くようです。

SOURCE

<script language="JavaScript">
<!--
ここにJavaScriptを書き込む
// -->
</script>
            

この書き方が正しいようなのですが、今のところ動作していますので、なにか不具合が起きた場合には置き換えすることにします。

普通のJavaScriptを読み込ませようとして失敗

余談 効率だけを追求してはいけません

JavaScriptやCSSを使用して効率を追求する方法を紹介してきましたが、最初はあまり効率を追求してはいけません。愚直にいちいち手作業で何十回、何百箇所を訂正したり追加したり削除したりの作業を行うことを薦めます。一見すると非効率のようでありますが、最終的に自分の技倆を向上させることになります。

人は頭だけでは技術を習得できません。特に私のような凡庸なものにとっては特にそう思います。だから数限りない反復訓練が必要なのです。よって、一見して不合理で非効率な作業を繰り返すことによって最終的には自分の身体の芯に刻み込むことができるのだと信じています。

ページトップへ

jQuery入門

ヨチヨチ歩きでJavaScriptの学習をしていたら、どんどんとjQueryに近づくことになってしまった。最初の思いつきはアコーディオンのような折りたたみ式のメニューを設置してみようというところから始まったのです。JavaScriptも理解していない身でちょっと無謀かなとも思ったのですがとにかく挑戦してみることにしました。

jQuery入門 (ver 1.3)を参考にする。まだ良く理解していないので、後に書き込む

第1章 jQueryとは

まだ良く理解していないので、後に書き込む

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>
            

ページトップへ

第2章 ドキュメント操作

まだ良く理解していないので、後に書き込む

01. ドキュメントへのアクセス

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>

            

DEMO

jQueryとは?

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>

            

DEMO

jQueryとは?

02. 特定のクラスを持つエレメントへのアクセス

SOURCE


            

DEMO

03. 特定のタグへのアクセス

SOURCE


            

DEMO

04. 階層構造へのアクセス

SOURCE


            

DEMO

ページトップへ

第3章 スタイルシート操作

01. スタイルシートへのアクセス

SOURCE


            

DEMO

02. プロパティを一括で書き替える

SOURCE


            

DEMO

03. クラスの追加と削除を行なう

SOURCE


            

DEMO

04. スタイルシートクラスを交互に切り替える

SOURCE


            

DEMO

ページトップへ

第4章 イベント処理

01. ページ内容が読み込まれたら処理を行なう

SOURCE


            

DEMO

02. クリック時の処理

SOURCE


            

DEMO

03. マウスオーバー/アウト/ホバーの処理

SOURCE


            

DEMO

ページトップへ

第5章 非同期通信処理

01. 非同期通信処理

SOURCE


            

DEMO

02. 非同期通信でデータを読み込む

SOURCE


            

DEMO

03. 通信時のエラー処理

SOURCE


            

DEMO

ページトップへ

第6章 jQuery UI

01. ドラッグの処理

SOURCE


            

DEMO

02. リサイズの処理

SOURCE


            

DEMO

03. テーブルソート処理

SOURCE


            

DEMO

第7章 jQueryプラグインの作成

01. プラグインの作成

ページトップへ