LogoMark.png

特定演習|情報デザインA/2020/0701

第10回 JavaScript・jQuery

特定演習|情報デザインA2020.07.01

第10回目の要件

受講生情報



以下、目次を見て演習の全体像を把握してから、順に説明を読み進めて下さい。



本日のメニュー


はじめに

今回から2回に渡って、JavaScript + jQuery について学習します。JavaScript はプログラミング言語なので本格的に使いこなせるようになるにはそれなりの時間が必要ですが、jQueryという定番のライブラリー使うことで、プログラミング初心者でも比較的簡単に「動的」なページを作ることができます。

1. JavaScriptとは

JavaScriptとは、SunMicrosystems社とNetscapeCommunications社が開発したスクリプト言語です(Sunが開発したJavaという言語とは別物です)。

HTMLが文書の構造、CSSが文書の表現を定義するものだとすれば、JavaScriptはWebページの「振る舞い」を定義するものです。主要なWebブラウザ上で動作することはもちろん、ブラウザ以外のソフトウェアにも簡易な制御プログラムの記述用言語として移植されています。標準仕様は、ヨーロッパの標準化団体ECMAが発行した ECMAScript です。

1.1. JavaScript はどこに書く?

JavaScript をどこに書くか・・については、以下の3つの方法があります。

で結論、3つめの「別ファイルにする」方法を採用するのが標準です
HTMLの head に以下のように書いて読み込みます。

 <script src="script.js"></script>

文書構造は HTML、デザインは CSS、そして「動き」は JavaScriptと、役割分担を明確にし、それぞれの独立性が高くなるように書きましょう。

1.2. 開発環境

JavaScriptファイル は、HTMLやCSSと同様にプレーンなテキストファイルです。したがって、HTML,・CSSと同様に、テキストエディタさえあれば、プログラムの開発が可能です。

1.3. JavaScriptコンソールについて

JavaScript のプログラム開発では、その動作環境であるブラウザに搭載された JavaScript コンソールというものを利用します。以下の手順で表示されます。

2. jQueryとは

jQueryとは、JavaScriptの様々な表現機能を使いやすくまとめた軽量ライブラリです。CSSのセレクタをそのままプログラミングに使える便利さから、現在では Javascriptライブラリのデファクトスタンダードとして、様々な場面で活用されています。もちろん、オープンソースです。

2.1. JavaScript + jQuery を利用するには

jQueryを利用した JavaScript をサイトに組み込むには、HTMLファイルの <head> に、以下の2行を追加します。

 <script src="https://code.jquery.com/jquery-3.5.1.min.js"></script>
 <script src="script.js"></script>
 

2.2. 基本構文


2.3. .js ファイルにどう書く?

以下、id="button" 部分のクリックで id="menu" の部分が「表示 / 非表示」と切り替わる例です。HTML側に、id="button" と id="menu" が定義された場所があることが前提です。

$( function() {

   $( '#button' ).click( function() {
       $( '#menu' ).slideToggle('slow');
   });

});


2.3. リファレンス(取り扱い説明)

ライブラリ関数というのは様々存在するので「覚えて使う」というより、必要に応じてリファレンスサイトなどを見ながら使います。以下参考サイトです。

3.セレクタとメソッド

3.1. jQuery のセレクタ

jQuery では、CSSセレクタと同様の記法で文書内の要素を選択して操作することができます。以下様々なセレクタの書き方を紹介します。


3.2. jQueryのメソッド

jQueryのメソッド(処理内容)は、以下の構文で記述します。

$( セレクタ ) . メソッド名( 引数 );

 
以下、よく使うメソッドについて、いくつか事例を紹介します。

プロパティーを ' ' で囲む必要があること、また、区切りが [ , ] であることが、 通常のCSSの記述とは異なるので注意が必要です。




4. 演習

テキスト、HTML、CSS を動的に変更する基本的な事例です。

4.1. サンプルのダウンロード

以下の、CODE の方から、Download ZIP で、まるごとダウンロードして解答して下さい。

4.2. サンプルの動作確認


4.3. 演習|サンプルの書き換え


4.4. 演習の成果をGitHub にアップロード

本日の体験も、前回と同様に、新しいフォルダを作るかたちで行なっていただきましたので、GitHub の方も同様に、新規のリポジトリを作成して、別のサイトとして成果を公開して下さい。

GitHubPagesNew.png
GitHubPages01.png
GitHubPages02.png
GitHubPages03.png


GitHubPagesSettings.png
GitHubPages05.png






ここから先は、時間に余裕があれば、お試しください
学習を終了する場合は「5. 大学院サイトで成果報告」に進んで、特設サイト上から、本日の成果にアクセスできるよう、リンクの追加を行って下さい。





参考|メニューのトグル

クリックで開閉するメニューのサンプルです。

参考|スムーズスクロール

animateを使って、ページ内の縦スクロールをスムーズにする事例です。

5. 大学院サイトで成果報告

第10回目は、以上で終了とします。お疲れ様でした。
第11回は、jQueryプラグインを使って、サイトに様々な機能を追加します。





PAGES

GUIDE

DATA

Last-modified: 2020-07-01 (水) 09:26:29