第08回Web講座

第8回Web講座資料 JavaScript

概要 • HTML/CSSに関する復習 • JavaScriptの基本知識 • JavaScriptコンソール

演習次ページより、HTML,CSS,JSを記述します。所要時間３０分～いくつかの要素の内容を省略しているので省略されている箇所以外をHTMLファイルに記述してください。省略されている内容は以降のスライドで紹介する。

emetのヒント h1#title → ID 付き div.main → Class付き

header内の内容 emetのヒント nav.menu → Class=“menu” ul>(li>a)*5

.main内の内容内容はひとまず何でもよい emmet のヒント table>thead>th*3 tbody>(tr>td*3)*3

演習続いてCSSを書いていくが、結構長くなったので適宜↓の説明部分から。手打ち参考時間３０分～ただし、各プロパティがどのようなスタイルであるかを確認しながら作業してほしい。次のページ以降に内容を載せる。

演習最後に、本題となるJavaScriptを作成する。 jsフォルダ内にscript.jsを作成し、指定通りに記述する。

script.js

script.js続き

実行結果フッターのボタン要素[1,2,3]を押すと、色が切り替わるはず。ならない場合、次のページでデバックする。

デバッククロームを開いた後F12ボタンを押して「Developer Tools」を呼び出し、上のツールバーから「Console」を選択

デバック：例２行目、 [ script.js ] の33行目にエラーが出ています。該当箇所を正しく打ち直しましょう。正).getElementsByTag”N”ame ※densanCM.mp4は動画ファイルがないので、無視して結構です。

JavaScriptの基本解説

変数の宣言「変数」とは、プログラム内で処理に使う何らかの値（数値、文字列など）を保持するものである。 JavaScriptの変数の宣言は、以下の通り記述して行う。 var 変数名; var 変数１, 変数２; var
変数名 = 値;

変数の宣言２「変数」の中でも限定した使い方のものがある。再代入不可の const 定数、再代入可能な let 変数。どちらもグローバル変数とはならず、ブロック ”｛｝”の中で完結するように書くことが前提とされる。
const 変数名 = 値; let 変数名 = 値; ※特に var はモダンブラウザ()を対象とした場合、使う理由がない(らしい

変数の型 JavaScriptの変数には、「型」は存在しない。よって、宣言した変数には数値でも文字列でも配列でも、なんでも入れることが出来る。しかし、データそのものには「型」が存在するため、その変数の中に入っている値のデータ型について、注意が必要である。（後述する四則演算や条件式を書く際に重要となる）

データ型数値や文字列など、プログラム内で扱うデータの種類のこと。データ型は、以下のもの等が存在し、変数に代入して使う。データ型名対応する値数値型数値（実数、8進数、16 進数、浮動小数点数）文字列型文字列（「”」、「’」で
囲んだ値）論理型 true/false データ型名対応する値配列型複数の値を入れた変数オブジェクト型キーと値を対応付けた連想配列 null 何もないことを表す値 undefined 未定義の値

配列（Array）格納した順番に応じて、値に「添え字」と呼ばれる数値を対応させて保持する変数。一つの変数に対して複数の値を格納できる。値を呼び出す場合は「変数名[添え字]」のように記述する。N個の値を格納した場合、添え字は「0」から始まり「N-１」までである。以下のように宣言する。この場合は値を呼び出す際「変数[0]」と指定すると値1、「変数[3]」と指定すると値4である。 var 変数
= [値1, 値2, 値3, 値4];

関数の宣言「関数」とは、予め指定された一定の処理を行い、結果を返す命令群。引数とは、関数が処理を行うために参照する値であり、必要ない場合省略できる。逆に、カンマで区切って複数指定することも出来る。 function 関数名(引数) { 処理; return
返り値; ｝ var 関数名 = function(引数) { 処理; return 返り値; ｝;

関数の呼び出し呼び出す際は、以下の通り記述する。 ※引数や返り値（結果）が無い関数もある。引数が無い場合、引数は何も入力せず、括弧内はカラでよい。関数名(引数);

メソッド呼び出し方が違い、オブジェクトに対して作用する関数である。呼び出す際は、以下のように記述する。オブジェクト.メソッド名（引数）;

getElementsBy-メソッド document（HTMLファイル上）から、引数に指定した検索条件を満たす要素を（主に配列として）取得するメソッド。 • .getElementsByClassName(クラス名); • .getElementsByName(name属性値); • .getElementsByTagName(要素名) ;
• .getElementById(ID名); ･･･このメソッドのみ、配列ではなく一意のオブジェクトとして要素を取得する。

querySelector-メソッド getElementByメソッドに近いが、要素/ ID /Classの三種に対応する。対象セレクタが流動的で有る場合、または隣接セレクタなどによるコンビネーションセレクタでの複雑な検索の場合に於いて、真価を発揮します。(by mozira) •
querySelector(要素名 / ID /Class) • querySelectorAll(要素名/ ID /Class)

試してみよう（メゾッド） getElementsByTagName(“td”)メソッドをコンソールで実行してみる。 td 変数に配列として代入したことがわかる。

試してみよう（配列）配列arrayの添え字は０～２までなので、それ以外の数値を指定すると未定義（undefined）となる。

.addEventListenerメソッドターゲットに対して特定のイベント（操作）があったとき、指定した関数を実行するというメソッド。以下のように記述する。ターゲット.メソッド名（“イベントタイプ”, 関数名）; ↑button 要素 . が(クリックされた場合), {changeColor
メゾットを実行する。}

DOM （Document Object Model) プログラムにおいてHTMLを扱うためのメソッド読み込んだHTML文書をDOMツリーと呼ばれる階層構造を持つデータに変換して取得・編集を行っており、DOMツリーを構成する要素をDOMノードと呼ぶ。 getElementsBy-メソッドで取得できるのはこのDOMノードの一種であるHTMLElementである

試してみよう（変数）以下のように入力して、返り値が同じであることを確かめる。

連想配列（オブジェクト/Object）配列における添え字の代わりに「キー（key）」と呼ばれるものと対応付けて値を保持する変数。添え字は数値のみであるが、キーは文字列も指定することが出来る。以下のように宣言する。値1を呼び出す場合、「変数.キー1」と記述する。 var 変数 = ｛
キー1 : 値1, キー2 : 値2 };

試してみよう（連想配列）

条件式以下の場合に論理値のtrueを返す。 • 「a <= b」･･･ aがb以下 • 「a
>= b」･･･ aがb以上 • 「A && B」･･･論理値A,Bが共にtrue • 「A || B」･･･論理値A,Bのどちらかがtrue • 「!A」･･･論理値Aがfalse（Aの値の反対を返す）

試してみよう（四則演算）あるデータ同士で足し算を行う場合、 • 数値同士の場合、普通に和を求める • 一方が文字列である場合、文字列の結合を行うというルールがある。

試してみよう（四則演算）足し算以外の四則演算を文字列に対して行った場合、 • 文字列化した数値である場合、数値として計算を行う • 通常の文字列である場合、「NaN(Not a
Number)」と表示

条件式それぞれ以下の場合に論理値の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」を使う。

試してみよう（条件式） aとarray[0]は数値型の１、 array[1]は文字列型の”1”であるため、値のみを比べる「==」では共にtrueである。しかし、データ型も比較する「===」では、 array[1]はfalseを返す。 ※「!=」と「!==」にした場合、結果は全て反対になる。

試してみよう（関数の宣言）

正規表現検索などを行う際に使用する特殊な文字列。以下のように記述する。 var re = /.+/;

.testメソッド以下のように記述し、引数内に正規表現で指定した文字列が含まれているか検索するメソッド。含まれていた場合、trueを返す。 /正規表現/.test(文字列）;

その他 • 実は行末のセミコロン（；）は省略しても動くが、必ず挿入しよう。自動セミコロン挿入処理が極めて難解で、ミスを誘発するためである。 • コメントアウトの方法は、以下の通り。 //一行コメント /* 複数行コメント
*/

正規表現において、特殊な意味を持つ記号がある。正規表現の特殊記号記号意味 . 任意の一文字 + 直前の文字を1回以上繰り返す * 直前の文字を0回以上繰り返す
? 直前の文字が0～1回 ( ) 括弧内の文字をまとめて扱う記号意味 [ ] 括弧内のいずれかの文字を含む [^ ] 括弧内のいずれの文字も含まない - 直前の文字から直後の文字までの連続する文字（[ ] 内で使用する）

正規表現の特殊記号記号意味 {a} 直前の文字をa回繰り返す（aは整数値） {a,b} 直前の文字をa回以上b回未満繰り返す（a,bは整数値） |
直前の条件か直後の条件を満たす ¥ エスケープ文字(直後の特殊文字を普通の文字として扱う) 記号意味 ^ 直後の文字列が行頭にある $ 直前の文字列が行末にある ¥s 空白文字（スペース）を表す ¥d 数字１文字 ¥S 空白文字以外の任意の文字 ¥D 数字以外の任意の文字

試してみよう（正規表現） JavaScriptコンソール上に →の通り打ち込んで、同じように表示されることを確認する。

おしまい次回はJavaScriptその２です

第08回Web講座

第08回Web講座

More Decks by 北海道科学大学 電子計算機研究部

Other Decks in Programming

Featured

Transcript

More Decks by 北海道科学大学　電子計算機研究部