第八回ネットワーク講座

*{
margin: 0;
padding: 0;
box-sizing: border-box;
}
.content {
margin: 0 auto;
padding: 0;
width: 1000px;
}
h1{
background-image: linear-gradient(#8dff34, white);
color: #259959;
font-size: 32px;
}
header .menu ul{
margin: 10px 0;
padding: 5px 0;
border-top: 1px solid #259959;
border-bottom: 1px solid #259959;
}
header .menu ul>li{
padding: 0 2px;
width: 200px;
height: 20px;
float: left;
list-style-type: none;
text-align: center;
font-weight: bold;
}
header .menu ul>li a{
text-decoration: none;
}
header .menu ul>li+li{
border-left: 1px solid #259959;
}
.clearfix:after{
content: "";
display: block;
clear: both;
}
.main{
margin-right: 20px;
width: 590px;
margin: 0 auto;
float: left;
}
.main h2, .sub h2{
margin-bottom: 10px;
padding-left: 5px;
border-left: 10px solid #259959;
border-bottom: 1px solid #259959;
color: #259959;
font-size: 18px;
line-height: 1.333;
}
.main p {
padding: 0 10px;
font-size: 14px;
line-height: 1.429;
}
.main table{
margin: auto;
width: 500px;
}
.main table, td, th{
border: 1px #000000 solid;
border-collapse: collapse;
table-layout: auto;
}
.main table th:first-child{
width: 130px;
}
.main table td:last-child{
width: 80px;
text-align: center;
}
.sub{
float: right;
width: 390px;
}
.sub video{
width: 390px;
height: auto;
}
footer{
margin: 0 auto;
padding: 0;
width: 1000px;
position: fixed;
bottom: 0;
background-color: #999;
font-size: 12px;
text-align: center;
clear: both;
}

Transcript

1. 第八回ネットワーク チーム講座資料 JavaScript
2. 概要 • HTML/CSSに関する復習 • JavaScriptの基本知識 • JavaScriptコンソール
3. 演習 次ページのHTML文書は、いくつかの要素の内容を省略して表示し ている。 省略されている箇所以外をHTMLファイルに記述してください。 省略されている内容は以降のスライドで紹介する。
5. header内の内容
6. .main内の内容 内容はひとまず何でもよい 例は第二回で使用した内容
7. 演習 続いてCSSを書いていくが、結構長くなったので適宜↓の説明部分 からコピーしてよい。 ただし、各プロパティがどのようなスタイルであるかを確認しな がら作業してほしい。 次のページ以降に内容を載せる。
10. 演習 最後に、本題となるJavascriptを作成する。 jsフォルダ内にscript.jsを作成し、指定通りに記述する。
11. script.js
12. script.js続き
13. 解説 変数の宣言 値の代入 オブジェクト メソッド（関数） 関数 documentはHTML文書全体を表すオブジェクトである。
14. 関数の宣言 「関数」とは、予め指定された一定の処理 を行い、結果を返す命令群。 引数とは、関数が処理を行うために参照する値であり、必要ない場 合省略できる。逆に、カンマで区切って複数指定することも出来る。 function 関数名(引数) { 処理; return 返り値; ｝ var 関数名 = function(引数) { 処理; return 返り値; ｝;
15. 変数の宣言 「変数」とは、プログラム内で処理に使う何ら かの値（数値、文字列など）を保持するものである。 変数の宣言は、以下の通り記述して行う。 var 変数名; var 変数１, 変数２; var 変数名 = 値;
16. データ型 数値や文字列など、プログラム内で扱うデータの種類のこと。 データ型は、以下のもの等が存在する。 データ型名 対応する値 数値型 数値（実数、8進数、16 進数、浮動小数点数） 文字列型 文字列（「”」、「’」で 囲んだ値） 論理型 true/false データ型名 対応する値 配列型 複数の値を入れた変数 オブジェクト型 キーと値を対応付けた連 想配列 null 何もないことを表す値 undefined 未定義の値
17. 配列（Array） 格納した順番に応じて、値に「添え字」と呼ばれる数値を対応させ て保持する変数。一つの変数に対して複数の値を格納できる。 値を呼び出す場合は「変数名[添え字]」のように記述する。N個の値 を格納した場合、添え字は「0」から始まり「N-１」までである。 以下のように宣言する。 この場合は値を呼び出す際「変数[0]」と指定すると値1、「変数[3]」 と指定すると値4である。 var 変数 = [値1, 値2, 値3, 値4];
18. 連想配列（オブジェクト/Object） 配列における添え字の代わりに「キー（key）」と呼ばれるものと対 応付けて値を保持する変数。添え字は数値のみであるが、キーは文 字列も指定することが出来る。 以下のように宣言する。値1を呼び出す場合、「変数.キー1」と記述 する。 var 変数 = ｛ キー1 : 値1, キー2 : 値2 };
19. 変数の型 JavaScriptの変数には、「型」は存在しない。 よって、宣言した変数には数値でも文字列でも配列でも、なんでも 入れることが出来る。 しかし、データそのものには「型」が存在するため、その変数の中 に入っている値のデータ型について、注意が必要である。 （後述する四則演算や条件式を書く際に重要となる）
20. 条件式 それぞれ以下の場合に論理値のtrueを返す。 1. 「a == b」 ･･･ aとbの値が等しい場合 2. 「a != b」 ･･･ aとbの値が異なる場合 3. 「a === b」 ･･･ aとbの値とデータ型が共に等しい場合 4. 「a !== b」 ･･･ aとbの値とデータ型が共に異なる場合 基本的に条件式は「a === b」「a !== b」を使う。
21. 関数の呼び出し 呼び出す際は、以下の通り記述する。 ※先ほどの”drawVideo()”のように、引数や返り値（結果）が無い関 数もある。 引数が無い場合、引数は何も入力せず、括弧内はカラでよい。 関数名(引数);
22. メソッド 呼び出し方が違い、オブジェクトに対して作用する関数である。 呼び出す際は、以下のように記述する。 オブジェクト.メソッド名（引数）;
23. getElementsBy-メソッド document（HTMLファイル上）から、引数に指定した検索条件を満 たす要素を（主に配列として）取得するメソッド。 • .getElementsByClassName(クラス名); • .getElementsByName(name属性値); • .getElementsByTagName(要素名) ; • .getElementById(ID名); ･･･このメソッドのみ、配列ではなく一意の オブジェクトとして要素を取得する。
24. getElementsBy-メソッド getElementsByClassNameメソッドで要素を取得したvideos変数は配 列となっているが、getElementByIdメソッドで要素を取得したcanvas 変数は単なるオブジェクトである。
25. .addEventListenerメソッド ターゲットに対して特定のイベント（操作）があったとき、指定し た関数を実行するというメソッド。 以下のように記述する。 ターゲット.メソッド名（“イベントタイプ”, 関数名）;
26. 正規表現 検索などを行う際に使用する特殊な文字列。 以下のように記述する。 var re = /.+/;
27. .testメソッド 以下のように記述し、引数内に正規表現で指定した文字列が含まれ ているか検索するメソッド。含まれていた場合、trueを返す。 /正規表現/.test(文字列）;
28. その他 • 実は行末のセミコロン（；）は省略しても動くが、必ず挿入しよ う。自動セミコロン挿入処理が極めて難解で、ミスを誘発するた めである。 • コメントアウトの方法は、以下の通り。 //一行コメント /* 複数行コメント */
29. JavaScriptコンソール JavaScriptについて学ぶにあたって、Google Chromeに付属する 「JavaScriptコンソール」を使用する。 表示中の Web ページで任意の JavaScript コー ドを実行することができるツールである。 こんなの→
30. 準備 クロームでvideo.htmlを開いた後F12ボタンを押して「Developer Tools」を呼び出し、上のツールバーから「Console」を選択
31. 試してみよう（変数） 以下のように入力して、返り値が同じであることを確かめる。
32. 試してみよう（配列） 配列arrayの添え字は０～２までなので、 それ以外の数値を指定すると未定義 （undefined）となる。
33. 試してみよう（連想配列）
34. 試してみよう（四則演算） あるデータ同士で足し算を行う場合、 • 数値同士の場合、普通に和を求める • 一方が文字列である場合、文字列の結合を 行う というルールがある。
35. 試してみよう（四則演算） 足し算以外の四則演算を文字列に 対して行った場合、 • 文字列化した数値である場合、 数値として計算を行う • 通常の文字列である場合、 「NaN(Not a Number)」と表示
36. 試してみよう（条件式） aとarray[0]は数値型の１、 array[1]は文字列型の”1”であるため、 値のみを比べる「==」では共にtrueである。 しかし、データ型も比較する「===」では、 array[1]はfalseを返す。 ※「!=」と「!==」にした場合、結果は全て反対になる。
37. 試してみよう（関数の宣言）
38. 正規表現において、特殊な意味を持つ記号がある。 正規表現の特殊記号 記号 意味 . 任意の一文字 + 直前の文字を1回以上繰り返す * 直前の文字を0回以上繰り返す ? 直前の文字が0～1回 ( ) 括弧内の文字をまとめて扱う 記号 意味 [ ] 括弧内のいずれかの文字を含 む [^ ] 括弧内のいずれの文字も含ま ない - 直前の文字から直後の文字ま での連続する文字（[ ] 内で使 用する）
39. 正規表現の特殊記号 記号 意味 {a} 直前の文字をa回繰り返す （aは整数値） {a,b} 直前の文字をa回以上b回未満 繰り返す（a,bは整数値） | 直前の条件か直後の条件を満 たす ¥ エスケープ文字(直後の特殊文 字を普通の文字として扱う) 記号 意味 ^ 直後の文字列が行頭にある $ 直前の文字列が行末にある ¥s 空白文字（スペース）を表す ¥d 数字１文字 ¥S 空白文字以外の任意の文字 ¥D 数字以外の任意の文字
40. 試してみよう（正規表現） JavaScriptコンソール上に →の通り打ち込んで、 同じように表示されること を確認する。
41. おしまい 次回はJavaScriptその２です