JavaScriptの入門メモ

プログラミングを練習するにあたってのメモ。

HTMLとCSSについては独学・実務でそれなりにできるが、jsはコピペに頼っていたので入門書をとりあえず一周した。

ひとまず素のjsをやってからフレームワークを覚えるつもり。

勉強には『最初からそう教えてくれればいいのに！JavaScriptのプログラミングのツボとコツがゼッタイにわかる本』を使用した。

JavaScriptのプログラミングのツボとコツがゼッタイにわかる本

かなり良い。

プログラミング入門書でいちばんわかりやすい。

同シリーズのPythonのものも読みやすかった。

JSの文法上の特徴

• 1.ひとつの命令文は必ず;で終わる
• 2.大文字小文字は区別される
• 3.文字列は'(シングルクオート)で囲う

基本

JSの命令文は「何」（オブジェクト）を「どうする」（プロパティorメソッド）と記述する。

プロパティとは

imgタグのsrc属性や、alt属性など、オブジェクトの状態のこと。

オブジェクト.プロパティ名と記述。

設定値を代入できる。

オブジェクト.プロパティ = 値

メソッドとは

オブジェクトの動作。

オブジェクト.メソッド名と記述

引数を設定できる（できないメソッドもある）。

オブジェクト.メソッド(引数)

イベントとは

ユーザーの操作で発生する出来事のこと。

クリック、マウスオーバー、フォーム入力、読み込み完了

onclickなどのon〜属性はよくない

→使わないことで、htmlファイルへの直書きをなくすことができる（7章で説明）。

JSの関数

定義方法

function 関数名(引数1,引数2,……){ //仮引数

処理の内容

return 戻り値;

}

実行方法

関数名(引数1,引数2……); //実引数

戻り値がある関数では

戻り値の格納先 = 関数名(引数1,引数2……);

関数名のつけかた

• 1字目は英字、アンダースコア、$のいずれか
• 数字は2文字目から使える
• Jsの予約語と被らないこと

JSでHTMLとCSSを操作する

HTMLを操作する

命令文の形式

「何を」（対象となるhtml要素）

「どうする」（プロパティやメソッド）

CSSを操作

命令文の形式

「何を」（対象となるcssが適用されているhtml要素）

「どうする」（style属性またはclass属性を操作するためのプロパティ）

そのために

目的となる要素を取得する必要がある。

id

getElementById('ID名')

タグ名

getElementsByTagName('タグ名')

親要素の中の、そのタグ名のすべての要素を取得する。

そのなかから1つを抽出するには

getElementsByTagName('タグ名').item(インデックス番号)

インデックス番号は0からはじまる←HTML文書の先頭から順番に付番

class名

getElementsByClassName('class名');

classを書き換えるとき

要素.className = '書き換える内容'

jsのif文

文法

if (条件式) {

処理;

} else if {

処理;

} else {

処理;

} //ここに;は不要

比較演算子の注意

== ではなく ===

を使う

!= ではなく !==

を使う

なぜなら、== !=はデータ型が等しいかは見ないため

変数

宣言

var 変数名;

var hoge;

のように宣言する

変数名のつけかた

先頭の文字は：英字のみ。数字、アンダースコア、$はNG。

functionやvarなどの予約語はNG。

変数に値を格納する

変数名 = 格納する値;

文字列のときは

変数名 = '文字列'; //シングルクオート

至って普通である。

変数の宣言と代入は同時に可能

ex) var hoge = 10;

ローカル変数とグローバル変数

ローカル変数：関数の中で宣言：関数の中でのみ値が保持される

グローバル変数：関数の外で宣言：プログラム全体で保持される

JSのfor文

書式

for (初期化式; 条件式; 増減式){

繰り返す処理

}

詳しく

初期化式を宣言

var カウンタ変数名 = 初期値;

ex) var i = 0;

条件式

カウンタ変数と比較演算子を使って、どこまでループするか書く

ex) i < 5;

増減式

1回のループのたびにカウンタ変数をどうするかを書く

ex) i++

これらを組み合わせると

for (var i = 0; i < 5; i++)

となる。

意味は

「0に初期化した変数iを、5より小さい間、1回のループごとに値を1ずつ増やす」

となる。

※ちなみに、カウンタ変数はループの中でも使うことができる。

while文とdo while文

while文

while (条件式) {

処理

}

do while文

do {

処理

} while (条件式);

→do whileでは、1回目は条件式がfalseでも実行される。

for in文

for (仮変数 in 配列など){

処理

}

配列などの要素の個数分だけ繰り返す処理。

switch文

if文以外に、switch文でも条件分岐ができる

switch (式){

case 値1:

処理

break;

case 値2:

処理

break;

default:

上記のcaseに該当しないときの処理

}

要素の生成と追加

要素の生成

document.createElement(要素)

ex) document.createElement('img')

要素に属性を指定するには

要素.プロパティ = 指定する内容

要素の追加

親要素.appendChild(子要素)

→親要素が、もともとHTMLファイルに存在するもの

※親要素から見た、最末尾の箇所に子要素として追加される。

要素の削除

親要素.removeChild(子要素)

要素を判定する

要素.nodename

→要素のタグ名や属性名を文字列として取得できる。

onclickなどのイベントハンドラをjsのコード内で行うようにする

方法

アクションが行われるhtmlの要素

におけるイベントのプロパティ（クリックやマウスオーバーなど）に

実行する関数を代入する

具体的には

要素.イベントのプロパティ名 = 関数名;

イベントのプロパティの例

• onclick
• onmouseover
• onmouseout
• onchange
• onload

Eventオブジェクト

とは

クリックなど、イベントの動作が起こったときに、その場所や、html要素、どのような種類のイベントが発生したか、などの情報をまとめて持つもの。

onclickなどのイベントハンドラの第一引数として自動的に渡される＝無条件に、指定された引数にその情報が代入されるということ。

内容（主なプロパティ）

• target:イベントが発生した要素
• type:イベントの種類
• clientX:ブラウザのX座標
• clientY:ブラウザのY座標

要素等を相対的に取得する

getElementByIdなどでノードを取得するときは、直接的に取得している。

いっぽう、指定したノードを基準に相対的に取得することもできる。

たとえば

• parentNode:親ノード（ひとつ上の階層）
• childNodes:子ノードの集合＝すべて
• firstChild:最初の子ノード
• lastChild:最後の子ノード
• previousSibling:兄ノード(同一階層の前)
• nextSibling:弟ノード（同一回想の次）

注意

素のjsでは、スペースやタブ、改行、コメントもノードとして扱われる。

→さまざまなフレームワークを使うことで無視できる。

イベントリスナー

同じ要素のイベントに対して、複数のイベントハンドラを設定するもの。

設定方法

要素.addEventListener(イベント名, イベントハンドラ名, false);

イベント名

• click
• mouseover
• mouseout
• change
• load

イベントハンドラ名

→関数名を指定する（クオートで囲わない）。

イベントリスナーによってイベントハンドラを削除

要素.removeEventListener(イベント名, イベントハンドラ名, false);

無名関数

わざわざ名前を定義しなくても良い、その場でしか使わない関数には名前をつけない。

可読性を考慮して使うと良い。

文法

function(){

処理

}

addEventListenerの中で使う

要素.addEventListener(イベント名, function(){処理}, false);

イベントのプロパティの中でも使える

要素.イベントのプロパティ = function{

処理

};

以上。

JavaScriptのプログラミングのツボとコツがゼッタイにわかる本