jQueryの使用例

jQuery

jQueryはJavaScriptのライブラリです．非常に軽量で，CSSに似た方法で記述できるので，プログラミング初心者にもわかりやすいです．

JavaScript

JavaScriptの起源は，ウェブページの処理能力を高めるためにNetscape社が開発したScript言語です．その後，いくつかの段階を経て，ヨーロッパの標準機関ECMAがJavascript 1.1をベースに，ECMAScriptとして標準化しました．

JavaScriptは非常に多くのことができるので，現在のウェブには欠かせない基本的な技術となっています．JavaScriptを適切に使えば，ユーザがウェブページをインターラクティブに利用できるようになり，ウェブのユーザビリティが向上します．しかし不適切な使い方をすると，とても使いにくいウェブページになってしまいます．

JavaScriptは，単なるScript言語ではなく，マウスがクリックされたとかボタンを押したとかのイベントを拾ったり，ウェブページの DOM(Document Object Model)を操作してダイナミックにページを書き換えたりすることもできます．最近はやりのGoogle Mapも，ユーザ側のインターラクションを実現する技術として，JavaScriptを使っています．

JavaScriptとJavaは直接関係ありませんが文法はよく似ているので，Javaを習ったことがある人なら理解しやすいと思います．

コンテンツの構造をHTMLでマークアップし，コンテンツの表現をCSSで指定していれば，JavasScriptで動的にあるいはスマートにHTMLとCSSを変更することができます（つまり，ユーザの操作によって或いは自動的に，コンテンツを書き換えたり表示スタイルを変更したりできます．）．豊かなインターラクションを提供するためのライブラリ（よく使う機能をまとめたプログラムの集まり）のひとつがjQueryです．

目次の自動作成

「目次の自動生成を行う jQuery.exTOC.js」を利用しました．皆さんも下記手順で目次を作成できます．

下記ファイルを，HTMLファイルの下に作成したjsフォルダーにダウンロード．
- 目次作成のJavaScript：extoc_1_0.js
- 目次のCSS：ex_TOC.css

HTMLファイルのhead部に下記コードを書き込む．

<script src="http://ajax.googleapis.com/ajax/libs/jquery/2.1.4/jquery.min.js"></script>
<script src="js/extoc_1_0.js"></script>
<link rel="stylesheet" type="text/css" href="js/ex_TOC.css" />
<script>
  $(function(){
    $('h2.thisTOC').exTOC({
      contents: 'main',
      headFrom : 2,
      headTo : 4,
      insertMethod : 'after',
      numberinghead: true,
      smooth: false
    });

    $('h2[class!="thisTOC"]').before('<p class="TOCBackLink"><a href="#TOC">[目次]に戻る<\/a><\/p>');
  });
</script>

1行目でWebに置いてあるjQueryのライブラリを読み込んでいます．2行目と3行目で，手順1でダウンロードした目次作成用のJavaScriptとCSSを読み込んでいます．4行目からは，目次作成の細かい指定です．最後のほうで，目次に戻るリンクも自動挿入しています．目次作成の指定などに関する詳細は，「目次の自動生成を行う jQuery.exTOC.js」参照．

HTMLファイルのbody部の目次を入れたい箇所に下記コードを書き込む．

<nav class="TOC">
   <h2 id="TOC" class="thisTOC">目次</h2>
	<!-- ここ下記mainブロック内にある見出しを利用した目次が挿入される -->
</nav>

目次に含めたいコンテンツ全部を，main要素の中に入れる．

このページ自体がこの仕組みで目次を付けているので，上記の説明を参照しながらこのページのソースも見てみると良いと思います．

タブパネル表示

jQueryのUIタブを用いて，複数のコンテンツ（ページ）をタブパネルで表示することもできます．違うページに移動する必要がないので便利だと思います．下記使用例のHTMLソースを真似すれば簡単．

タブパネルの使用例：「jQuery版：タブパネルと目次作成」

jQuery Mobileを用いたスマホページの作成

jQuery Mobileを用いるとスマホページを簡単に作成できます．詳しく知りたい人は授業で質問してください．