JavaScript &jQuery

JavaScript & jQuery 講座

1

JavaScript & jQuery 講座 目次

JAVASCRIPT 講座 目次 ............................................................................................. 1

第 1 章 はじめに ....................................................................................................... 4

第 1 節 はじめに .................................................................................................................................. 4

第 1 項 本テキストの使い方 .................................................................................................................... 4

第 2 節 JavaScript とは ....................................................................................................................... 4

第 1 項 JavaScript とは ............................................................................................................................ 4

第 2 項 JavaScript の歴史 ........................................................................................................................ 5

第 3 項 どんな時に使う？ ........................................................................................................................ 6

第 4 項 JavaScript は簡単 ........................................................................................................................ 9

第 2 章 JAVASCRIPT でできること ........................................................................ 10

第 1 節 JavaScript を使ってみる ....................................................................................................... 10

第 1 項 JavaScript を使ったサイト ........................................................................................................ 10

第 2 項 Dreamweaver の設定 ................................................................................................................. 12

第 2 節 JavaScript に触れてみよう ................................................................................................... 15

第 1 項 プログラムを作る .................................................................................................................... 15

第 2 項 ダイアログボックス（アラート）を出す ................................................................................ 15

第 3 項 値の取得・セット .................................................................................................................... 17

第 4 項 まとめ .......................................................................................................................................... 19

第 3 章 JAVASCRIPT の基本文法 ........................................................................... 20

第 1 節 JavaScript のルール .............................................................................................................. 20

第 1 項 JavaScript の組み込み方 1 ........................................................................................................ 20

第 2 項 JavaScript の組み込み方 2 ........................................................................................................ 21

第 3 項 記述のルール ............................................................................................................................. 23

第 4 項 コメント .................................................................................................................................... 25

第 2 節 変数 ....................................................................................................................................... 26

第 1 項 変数の定義 ................................................................................................................................. 26

第 2 項 命名規則 .................................................................................................................................... 28

第 3 項 値の代入（文字・数字） ........................................................................................................... 29

第 4 項 文字や数字以外の値 .................................................................................................................. 30

第 5 項 配列 ............................................................................................................................................ 31

第 6 項 高度な配列 ................................................................................................................................. 32

第 7 項 演習（問題） ............................................................................................................................. 34

第 8 項 演習（解答例） .......................................................................................................................... 35

第 3 節 演算子 ................................................................................................................................... 36

第 1 項 計算する（算術演算子） ........................................................................................................... 36

第 2 項 代入する（代入演算子） ........................................................................................................... 38

第 3 項 演習（問題） ............................................................................................................................. 39

第 4 項 演習（解答例） .......................................................................................................................... 40

第 4 節 条件分岐 ................................................................................................................................ 41

第 1 項 if 文 ............................................................................................................................................. 41

第 2 項 比較する（比較演算子） ........................................................................................................... 44

第 3 項 条件を加える（論理演算子） .................................................................................................... 46

第 4 項 if 文の中に if 文を書く ................................................................................................................ 47

第 5 項 switch 文 .................................................................................................................................... 49

第 5 節 繰り返し ................................................................................................................................ 50

第 1 項 for 文 .......................................................................................................................................... 50

第 2 項 while 文 ...................................................................................................................................... 52

JavaScript & jQuery 講座

2

第 3 項 演習（問題） ............................................................................................................................ 53

第 4 項 演習（解答例） ......................................................................................................................... 54

第 6 節 ユーザ定義関数 ..................................................................................................................... 55

第 1 項 関数とは？ ................................................................................................................................ 55

第 2 項 関数の作り方・呼び出し方 ....................................................................................................... 56

第 3 項 返り値の設定 ............................................................................................................................ 57

第 4 項 ローカル変数とグローバル変数 ............................................................................................... 58

第 5 項 演習 1 ........................................................................................................................................ 59

第 6 項 演習 2 ........................................................................................................................................ 60

第 7 項 演習 3 ........................................................................................................................................ 61

第 8 項 演習 4 ........................................................................................................................................ 62

第 4 章 JAVASCRIPT を活用する ........................................................................... 65

第 1 節 ブラウザを操作する ............................................................................................................. 65

第 1 項 オブジェクトとは？ .................................................................................................................. 65

第 2 項 Window オブジェクト ............................................................................................................... 66

第 3 項 新しいウィンドウを開く .......................................................................................................... 68

第 4 項 フォームの値を取得する 1 ....................................................................................................... 69

第 5 項 フォームの値を取得する 2 ....................................................................................................... 71

第 6 項 フォームを操る ......................................................................................................................... 73

第 7 項 イベントをきっかけにする ....................................................................................................... 75

第 2 節 HTML を操作する ................................................................................................................. 76

第 1 項 DOM とは？ .............................................................................................................................. 76

第 2 項 HTML 上のデータを取得する ................................................................................................... 77

第 3 項 HTML 上に要素を追加・削除する ............................................................................................ 79

第 4 項 CSS を操作する ........................................................................................................................ 82

第 5 項 演習（問題） ............................................................................................................................ 83

第 6 項 演習（解答例） ......................................................................................................................... 84

第 5 章 JAVASCRIPT ライブラリの利用 ................................................................. 86

第 1 節 JavaScript ライブラリとは ................................................................................................... 86

第 1 項 JavaScript ライブラリとは ....................................................................................................... 86

第 2 節 jQuery lightbox plugin の導入 ............................................................................................... 86

第 1 項 jQuery lightbox plugin とは ....................................................................................................... 86

第 2 項 lightbox の設定 .......................................................................................................................... 88

第 3 節 Cooltips の導入 ..................................................................................................................... 90

第 1 項 Cooltips とは ............................................................................................................................. 90

第 2 項 Cooltips の設定 ......................................................................................................................... 91

第 4 節 Smooth Scroll の導入 ............................................................................................................ 94

第 1 項 Smooth Scroll とは.................................................................................................................... 94

第 2 項 Smooth Scroll の設定 ................................................................................................................ 95

第 5 節 jQuery Blinds の導入 ............................................................................................................. 97

第 1 項 jQuery Blinds とは..................................................................................................................... 97

第 2 項 jQuery Blinds の設定 ................................................................................................................. 98

第 6 節 bxSlider の導入 ................................................................................................................... 101

第 1 項 bxSlider とは ........................................................................................................................... 101

第 2 項 bxSlider の設定 ....................................................................................................................... 102

第 7 節 Smooth Navigational Menu の導入 ..................................................................................... 106

第 1 項 Smooth Navigational Menu とは ............................................................................................. 106

第 2 項 Smooth Navigational Menu の設定 ......................................................................................... 107

第 8 節 jQuery UI タブウィジットの導入 ........................................................................................ 110

第 1 項 jQuery UI とは .......................................................................................................................... 110

第 2 項 jQuery UI の設定 ...................................................................................................................... 111

JavaScript & jQuery 講座

3

第 6 章 実習 2 ........................................................................................................ 115

第 1 節 アンケートフォームの作成 ................................................................................................. 115

第 1 項 完成版を確認する .................................................................................................................... 115

第 2 項 アンケートフォームの HTML を把握する ............................................................................... 116

第 2 節 入力チェック 1 .................................................................................................................... 118

第 1 項 変数の設定 ............................................................................................................................... 118

第 2 項 テキストボックスのチェック .................................................................................................. 119

第 3 項 セレクトメニューのチェック .................................................................................................. 121

第 3 節 入力チェック 2 .................................................................................................................... 122

第 1 項 ラジオボタンの設定 ................................................................................................................ 122

第 2 項 変数の設定 ............................................................................................................................... 124

第 3 項 最終的なエラーチェック ......................................................................................................... 126

第 4 節 要素の連動 .......................................................................................................................... 128

第 1 項 イベントハンドラの設定 ......................................................................................................... 128

第 2 項 要素の連動 ............................................................................................................................... 129