LogoMark.png

特定演習|情報デザインA/2020/0701 の変更点


#author("2020-06-30T13:16:40+09:00","default:inoue.ko","inoue.ko")
#author("2020-07-01T09:26:29+09:00","default:inoue.ko","inoue.ko")
*第10回 JavaScript・jQuery
[[特定演習|情報デザインA]]|''2020.07.01''
~

***第10回目の要件
-以下に情報共有シートを設けました。''既読チェック''をお願いします。
&fontawesome(far fa-hand-point-right); [[遠隔授業 共有シート>https://docs.google.com/spreadsheets/d/1NYw9oS74oaHqklEPVeDcMLKArn1lB2slORgHjEdmQxA/edit?usp=sharing]]
-本日の説明を読んで JavaScript・jQuery に関する学習を行ってください。
-第4節に演習を用意しています。
-第5節で[[大学院サイト>https://vision.ip.kyusan-u.ac.jp/art-gs/]] での公開確認を求ています。
~


***受講生情報
//-[[芸術研究科 情報共有サイト>https://vision.ip.kyusan-u.ac.jp/art-gs/]]
//-[[上笹貫 鷹暁>https://vision.ip.kyusan-u.ac.jp/art-gs/?%E4%B8%8A%E7%AC%B9%E8%B2%AB+%E9%B7%B9%E6%9A%81]]
-[[季 卓芸>https://vision.ip.kyusan-u.ac.jp/art-gs/?%E5%AD%A3+%E5%8D%93%E8%8A%B8]]
-[[蔡 玥阳>https://vision.ip.kyusan-u.ac.jp/art-gs/?%E8%94%A1+%E7%8E%A5%E9%98%B3]]
-[[宋 高天>https://vision.ip.kyusan-u.ac.jp/art-gs/?%E5%AE%8B+%E9%AB%98%E5%A4%A9]]


~

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

#hr

~

***本日のメニュー
#contents2_1

~



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

-今回は、JavaScript + jQuery の基本的な事例で体験学習します。
-次回は、jQueryプラグインを使って、さらに高度な機能を簡単に実現する事例(実際にはダウンロードしたものを組み込むだけ)を学習します。

-第3節までは、読むだけです。意味不明な部分は読み飛ばして、とりあえず第4節の演習に進んでください。実際のコードを編集体験してから、もう一度読み返すことで、意味は理解しやすくなると思います。

-演習は基本的に第4節の1つですが、時間に余裕があれば、「参考」として紹介する2つのサンプルについても、同様に体験してみて下さい。
~
~

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

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

***1.1. JavaScript はどこに書く?
JavaScript をどこに書くか・・については、以下の3つの方法があります。
-HTMLのタグ内に直接書く
-HTML内(</body>直前あるいはhead内)に、scriptタグを用いて書く
-HTMLから独立した別のファイルに書いて参照する( 拡張子は .js )

で結論、''3つめの「別ファイルにする」方法を採用するのが標準です''。
HTMLの head に以下のように書いて読み込みます。
  <script src="script.js"></script>
文書構造は HTML、デザインは CSS、そして「動き」は JavaScriptと、役割分担を明確にし、それぞれの独立性が高くなるように書きましょう。
~

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

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

-Firefoxの場合
--メニュー>ツール>Web開発>開発ツールを表示>と進んで
コンソール > JS と ロギング に チェックをつけて下さい。
--ショートカット: [command]+[option]+[i](Windowsは [F12] )
--実際には、以下のようなイメージです。
#image(JavaScript/console.jpg)
この例では「script.js の17行目26文字目にある getElemensByClass というのは関数ではない(関数が存在しない)」というエラーメッセージが出ていています。

-Chromeの場合
--メニュー>表示>開発/管理>JavaScriptコンソール
--ショートカット: [command]+[option]+[i](Windowsは [F12] )
~
~

**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>
  
-一行目は、jQuery本体を、CDN( Contents Delivery Network ) をから引用して組み込んでいます。
-二行目の script.js は、あなた自身が作成するスクリプトで、あなたのフォルダの中から組み込む形です。
~

***2.2. 基本構文
-jQuery の構文は、正確に書くと以下のような形になっています。
 jQuery( セレクタ ).メソッド( パラメータ );

-''実際には jQuery のエイリアス $ を使って以下のように書きます。''
 $( セレクタ ).メソッド( パラメータ );
 例:$("#menu").slideToggle('slow');

~

***2.3. .js ファイルにどう書く?
以下、id="button" 部分のクリックで id="menu" の部分が「表示 / 非表示」と切り替わる例です。HTML側に、id="button" と id="menu" が定義された場所があることが前提です。
 $( function() {
 
    $( '#button' ).click( function() {
        $( '#menu' ).slideToggle('slow');
    });
 
 });

~

***2.3. リファレンス(取り扱い説明)
ライブラリ関数というのは様々存在するので「覚えて使う」というより、必要に応じてリファレンスサイトなどを見ながら使います。以下参考サイトです。
-公式リファレンス http://api.jquery.com/
-日本語リファレンス
--http://semooh.jp/jquery/
--http://js.studio-kingdom.com/jquery
~
~

**3.セレクタとメソッド

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

-要素セレクタ(HTML要素名)
 $( 'HTMLタグ名' )
HTMLタグである <h1>や<p>はそのままセレクタとなります。

-IDセレクタ
 $( '#ID名' )
定義されたIDに適用
前提:ID名はページ内に1つ(重複してはいけない)

-クラスセレクタ
 $( '.CLASS名' )
定義されたクラスに適用
前提:CLASS名はページ内に複数

-子孫セレクタ
 $( '親要素 子要素' )
特定の親を持つ子・孫・・・の要素をセレクト
 $( 'div  span' )

~

***3.2. jQueryのメソッド
jQueryのメソッド(処理内容)は、以下の構文で記述します。
 $( セレクタ ) . メソッド名( 引数 );
 
以下、よく使うメソッドについて、いくつか事例を紹介します。

-テキストの動的変更
例えば、<p id="message">・・</p>の内容(テキスト)を変更するには・・
 $( '#message' ).text( "Hello World!" );
~

-HTML要素の動的変更
例えば、<div id="contents">・・</div> の内容(HTML)を変更するには・・
 $( '#contents' ).html(' <h1>・・</h1> <p id="XXX">・・・</p> ');
~

-CSSの動的変更
例えば、<p id="message">・・</p> のCSSを変更するには・・
 $( '#message' ).css( {
   'color': 'red',
   'font-size': '18px' 
 });

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

-イベント設定
 $( セレクタ ).click( イベントハンドラ );
書き方の例
 $( '#btn' ).click( function() {
   ・・・ここに処理を書く・・・
 } );

~
~

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

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

-''DEMO'':https://koichi-inoue.github.io/JQ_Basic/
-''CODE'':https://github.com/koichi-inoue/JQ_Basic

-新規に''JavaScriptSample'' というフォルダを作成して、ダウンロードしたサンプルの中身( index.html, style.css, script.js )をまるごとコピーして下さい。

-はじめに、HTMLの head を確認して下さい。
--jQuery は、CDN で読み込んでいます。
--コードは、script.js ファイルに記述して読み込んでいます。
~

***4.2. サンプルの動作確認
-ブラウザで index.html を表示して、ヘッダーに置かれた複数のボタンの動作を確認して下さい。
-HTMLでは、ボタンそれぞれに ID を定義しています。
-JavaScript には、各ボタンがクリックされたときの動作を記載しています。

~

***4.3. 演習|サンプルの書き換え
-''基本の確認'':書き換える場所がわかるかを問う単純な問題です。
-''基本の確認'':書き換える場所を問う簡単な確認問題です。
--HEADER ボタンで置き換わる h1 の文字列を変更して下さい。
--ARTICLE ボタンで変わる article 部分のCSSを変更して下さい。
--FOOTER ボタンで変わる footer のHTMLを変更して下さい。

-''ボタンの追加'':ルールの複製・調整ができるかを問う問題です。
下段のボタンを4つに変更して、mainブロック内の section と aside について、左右の入れ替え、上下の入れ替え、いずれも変更できるように、ボタン項目の追加とスクリプトの追加をして下さい。

-''オリジナル機能の追加'':自由に機能を追加できるかを問う問題です。
「ボタンをクリックしたら、ヘッダーの背景色が赤になる」など、何でもかまいません。「◯◯をクリックしたら、△△△が変わる」機能を追加して下さい。

~

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

-GitHub にログインして下さい。
~

#image(GitHubPages/GitHubPagesNew.png,right,25%)
-画面右上のプラスアイコン「+」をクリックし、''New repository'' を選択。
#clear

#image(GitHubPages/GitHubPages01.png,right,50%)
-''Repository name''という入力欄にリポジトリ名を入力します。リポジトリ名は任意ですが、ここでは、みなさんの手元のフォルダ名と同じ、 ''JavaScriptSample'' という名称にした前提で、説明します。
#clear
~

-''Create repository'' をクリック
 > 以上でリポジトリができました。
~

#image(GitHubPages/GitHubPages02.png,right,30%)
-リポジトリ作成後は右のような画面が表示されます。表示された画面で ''Uploading an existing file'' の部分をクリックして下さい。
#clear
~

#image(GitHubPages/GitHubPages03.png,right,30%)
-ファイルをドラッグ&ドロップ できるスペースが表示されるので、手元にある ''JavaScriptSample フォルダの__中身__を''丸ごとアップします(フォルダそのものをアップしないでください。フォルダの中身のファイルを「ファイルの階層構造をそのままで」アップして下さい)。
~

-''Commit changes'' をクリックすることで、操作が完了します。

-リポジトリが以下のようになれば正解です。
#image(GitHubPages/SampleSite03.jpg)

~

#image(GitHubPages/GitHubPagesSettings.png,right,20%)
-公開設定を行います。リポジトリ画面の右端のタブ ''Settings'' をクリックします。
#clear
~

#image(GitHubPages/GitHubPages05.png,right,30%)
-ページの下の方に ''GitHub Pages'' という項目があります。見つけて下さい。

-''Source'' の項目が ''None'' となっているので、これを ''master branch'' に変更して下さい。
> 公開URL が表示されます。

~

-自身の公開URLにアクセスしてみて下さい。
 https://(ユーザー名).github.io/JavaScriptSample
設定変更から公開まで数分かかることがあります。

~
~
#hr

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

#hr
~
~


**参考|メニューのトグル
クリックで開閉するメニューのサンプルです。

-''DEMO'':https://koichi-inoue.github.io/Navi-ToggleBasic/
-''CODE'':https://github.com/koichi-inoue/Navi-ToggleBasic
~

-ダウンロードしたら、フォルダ名を ''JavaScriptSample_Toggle'' などに変更した上で、このサンプルをベースに、中身を編集する形で追加の演習体験をしてください。

-GitHub 上に、リポジトリ ''JavaScriptSample_Toggle'' を作成して、構成ファイルをアップして下さい。

- ''JavaScriptSample_Toggle''  をGitHubPages として公開して下さい。
~
~

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

-''DEMO'':https://koichi-inoue.github.io/JQ_SmoothScroll/
-''CODE'':https://github.com/koichi-inoue/JQ_SmoothScroll
~

-ダウンロードしたら、フォルダ名を ''JavaScriptSample_SmoothScroll'' などに変更した上で、このサンプルをベースに、''中身を改変する形で追加の演習体験をしてください''。

-GitHub 上に、リポジトリ ''JavaScriptSample_SmoothScroll'' を作成して、構成ファイルをアップして下さい。

- ''JavaScriptSample_SmoothScroll''  をGitHubPages として公開して下さい。
~
~


**5. 大学院サイトで成果報告
-本日の成果は、最低ひとつ JavaScriptSample を、以下の仕様で [[大学院サイト>https://vision.ip.kyusan-u.ac.jp/art-gs/]] /WebDesign のページから閲覧できるように、新しい GitHubPage のURLを追加掲載して下さい。

-なお、メニューのトグルや、スムーズスクロールのサンプル体験も行なった方は、それも追加して下さい。


-記載仕様
 ***GitHub Pages
 -https : //JaneSmith.github.io/SampleSite ← HTML+CSS の練習
 -https : //JaneSmith.github.io/ResponsiveDesign ← レスポンシブ の練習
 -https : //JaneSmith.github.io/JavaScriptSample ← 本日の基本練習
 -https : //JaneSmith.github.io/JavaScriptSample_Toggle ← 任意です。
  :
 ~
~

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