前回の復習
本日の訓練内容
Lesson-12 JavaScript/jQueryで処理しましょう
L12.1 はじめに
L12.1.1 概要
L12.1.2 アプリケーションと各機能の関係
- アプリケーション
- 個別ライブラリ
- 個別ライブラリには、jQueryを使用するものとJavaScriptを直接使用てるものがある。jQueryを使用するものはjQueryを同時に実装することが必要となる。
- jQuery
- ブラウザの違いを意識せずに処理を記述できる。
L12.1.3 JavaScript/jQueryの動作確認
Google検証ツール→コンソールタブ
L12.1.4 参考情報
- CDN (Content Delivery Network)について
- CDNを使用すると指定されたURLを記述するだけでライブラリを使用することができる。
- 自サイトをサーバー負荷を軽減させることができる。
- 「（使用する機能名） CDN」（例：「jQuery CDN」）で検索する。
L12.2 JavaScript基本仕様
L12.2.1 文とコメント
(1) 文
- 文の最後には;をつける。
- 1行の中に複数の文を記述することができる。
- JavaScriptにはstrict modeという実行モードがあり、厳格な記述を行っていない文の実行を禁止することができる。「use strict;」をファイルまたは関数の先頭に書くことで実行される。
(2) コメント
- 1行コメント
//を記述すると行末まではコメントとして扱われる。 - 複数行コメント
/*と*/で囲まれた範囲はコメントとして扱われる。
L12.2.2 変数と宣言
- 半角アルファベット、_ 、$、数字を組み合わせた名前が使用できる。
- 数字から始めることはできない。
- 大文字と小文字は区別される。
- あらかじめ定義されている予約語を使用することはできない。
- 全角文字も使用可能だが推奨されない。
(1) const
値の再代入ができない変数の宣言、変数の値（初期値の定義）を行う。カンマ（,）で区切ることにより複数の変数を宣言できる。
(2) let
値の再代入ができる変数を宣言する。変数の値（初期値）を定義することもできる。変数の値（初期値）が指定されていない場合はundefined（未定義）で初期化される。カンマ（,）で区切ることにより複数の変数を宣言できる。
(3) ver
letとほぼ同様の変数宣言だが、verには同じ名前の変数を再定義できてしまうという問題がある。
L12.2.3 データ型（プリミティブ型）
数値、文字列、真偽値などのような基本的な値をプリミティブ型（基本型）と呼ぶ。
L12.2.7 関数
(1) 関数宣言と呼び出し
メモ
- 日時を取得する場合基準値はグリニッジ標準時となることに注意。
日本標準時を取得する場合はtoLocalStringの取得が必要。
-本日のアジェンダ-
1限目
学科 JavaScript基礎②
動的処理について
2限目
学科 JavaScript基礎②
動的処理の組み込み方法
3限目
学科 JavaScript基礎②
課題制作
4限目
学科 JavaScript基礎②
課題制作
5限目
学科 JavaScript基礎②
課題制作
本日のテーマ
Webページに動的処理を組み込みましょう。
動的処理とは
Webページには、静的ページと動的ページがあります。静的ページは、いつ、どこでアクセスしても同じ内容しか表示されないページです。一方、動的ページは、アクセスする時の環境や操作内容によって表示される内容が変化するページです。動的ページを作成するためには、サーバー側で処理する方式と端末側で処理する方式があります。
端末側で処理する方式の動的ページの例は、以下の通りです。（一部の例は、HTMLとCSSだけで実現できるものもあります）
- 複数の画像をスライダー方式で切り替える
- 画像をクリックしてポップアップ（拡大）させる
- Webブラウザのようにページ内にタブを設置する
- ページにアニメーションをつける
- 図表などのソート（並び替え）を行う
- 投稿フォームの項目を入力内容によって変更する
- リアルタイムのチャートグラフを作成する
- カレンダーを設置する
- 電卓機能を設置する など
参考サイト
本日の課題
WordPressサイトに、本日学んだ内容を投稿ページにまとめてください。
第5回成績考査について
9月30日(金)の5限目までに、Webページを提出してください。
※WEBページはFFFTPでHTMLサーバーにアップしてください。
※サイト内容は自由です。是非、就職活動に活かせる作品を作成してみてください。
