Javascriptに関する私的なメモです。書いた本人にしかわからない所が多いです。
JavaScriptの勉強メモ
Javascriptの歴史
Netscapeが開発した。HTML5で標準webプログラムとして承認された。
開発環境の準備と動作チェック
・サーバーは、クライアントからのリクエストに応じた処理を行うサーバーソフトがある。
・サーバーソフトで有名なのがApache(無償)。オープンソースで世界中で開発されている。
・ローカルＰＣにローカルサーバー環境を作るにはCドライブ直下にApacheを入れるだけ。
・Webブラウザからアクセスするには、Apacheを起動後に http://localhost。
・http://localhostでアクセスしたときに参照される最上位ディレクトリ（DocumentRoot）はc:/Apache24/htdocs
・c:/Apache24/htdocsフォルダ内にhtmlファイルを保存することで、ブラウザからhttp://localhost/●●.htmlのアドレスで閲覧できる。
基本ルール
・JSの記述場所は、
1.htmlの<script></script>内に記述する
2.別ファイルで記述し、htmlでは<script src=”ファイル名”></script>で呼び出す。
・JSは大文字と小文字は区別される。（Numとnumは別変数と扱われる）
・プログラムの文末はセミコロン（;）で区切る。
変数
・【宣言】var 変数名 = 値;
(varを付けないとグローバル変数となり関数の外からも参照されるので基本はvarを付ける)
・データ型 JSの変数にはデータ型があるが、変数宣言時にはデータ型を指定せず、代入する値でもってデータ型の宣言の代わりとなる。（下は例）
var str = “Hello”; //文字列型の宣言の代わりとなる
var num =123; //数値型の宣言の変わりとなる
var flag = true; //真偽方の宣言の代わりとなる
・シングルクオーテーションとダブルクオーテーションには区別なし。どちらでもＯＫ（phpは処理が違うので注意）
配列
・【宣言】var 変数名 = [値1, 値2, 値3, 値4,,,,,,値n];
・配列の値1～値nには0～n-1のインデックス番号が振られる。
配列その２（連想配列）
・普通の配列は「インデックス番号：値」の組み合わせであるのに対して、連想配列は「キー：値」の組み合わせで、キーを連想しやすい文字とすることで分かりやすい組み合わせの配列のこと。
・【宣言方法１】var 変数名 = {キー1:値1, キー2:値2, キー3:値3, ,,, キーn:値n};
・【宣言方法２】var 変数名 = {}
変数名.キー = ‘値１’
変数名.キー = ‘値２’
・【参照方法】オブジェクト型配列名[キー] または オブジェクト型配列名.キー
オブジェクトとは
・オブジェクトとはプログラムで扱えるものの総称。文字列・日付・ブラウザ情報などを一定のルールでまとめたもの。プログラムが簡潔に書けるためのまとまり。
・オブジェクトはその状態を表す「プロパティ」と動作を指定する「メソッド」がある。
・オブジェクトはあらかじめ用意されている。
・オブジェクトを使うには元のオブジェクトをコピーして新たに生成するインスタンス化という過程を経る。そしてできたインスタンスを取り扱う。
・【宣言】var インスタンス名 = new オブジェクト名(引数); ※引数は無い場合もある。
・【使用】var インスタンス名.プロパティ名; ※インスタンスのプロパティの値を得る例
・【使用】var インスタンス名.メソッド名(引数); ※インスタンスのメソッドを実行して値を得る例
・【参考】オブジェクトの主な種類
String：文字列を管理するオブジェクト ※変数データ型に対応しているため、変数を宣言すればインスタンス化せずプロパティを参照したりできる
Number：数値を管理するオブジェクト ※変数データ型に対応しているため、変数を宣言すればインスタンス化せずプロパティを参照したりできる
Boolean：真偽値を管理するオブジェクト ※変数データ型に対応しているため、変数を宣言すればインスタンス化せずプロパティを参照したりできる
Array：配列を管理するオブジェクト ※変数データ型に対応しているため、変数を宣言すればインスタンス化せずプロパティを参照したりできる
Object：連想配列を管理するオブジェクト ※変数データ型に対応しているため、変数を宣言すればインスタンス化せずプロパティを参照したりできる
Math：演算を管理するオブジェクト
Date：日付を管理するオブジェクト
JSON：ＪＳＯＮ形式データを扱うオブジェクト
ブラウザオブジェクト
ブラウザで取り扱えるオブジェクト。インスタンス化されているので、newでインスタンス化する必要がない。
・window ブラウザオブジェクトの親オブジェクト
メソッド：alert(str) 文字列strのダイアログボックスを表示
・navigator ブラウザ情報を管理するオブジェクト
プロパティ：platform OS情報を参照
プロパティ：userAgent ユーザーｴｰｼﾞｪﾝﾄを参照
・location URL情報を管理するオブジェクト
・history 閲覧履歴を管理するオブジェクト
よく使う処理など
□演算子
+ 足し算
– 引き算
* 掛け算
/ 割り算
% 割った余り
□比較演算子
・比較演算子の値はtrue/false
a == b abの値が等しい
a === b abの型も値も等しい ←推奨
a != b abの値が等しくない
a !== b abの型が等しくないまたは値が等しくない ←推奨
a < b aがbよりも小さい
a <= b aがb以下
a > b aがbよりも大きい
a >= b aがb以上
if文
if(条件式){真のときの処理}
if(条件式){真のときの処理}else{偽のときの処理}
・else ifで別の判定を行うことも可能。
・真のときの処理に、if文を入れ子にすることでさらに条件判定が可能。
for文
for(初期化式; 条件式; 増減式){処理}
・条件式がtrueの間、処理を繰り返す。
・for文は繰り返す回数があらかじめ分かっているときに使用する
while文
while(条件式){処理}
・条件式がtrueの間、処理を繰り返す
・while文は繰り返す回数が分かっていないときに使用する。
do while文
do{処理}while(条件式);
・まず処理を行い、whileが真のとき繰り返す。※１度は処理を行う。
繰り返し処理の離脱
break : 繰り返し処理を抜ける
continue : その回の処理をスキップする ※偶数のときだけスキップするなどに使う
なお、breakとcontinueは親ループには影響しない。
関数の定義
よく使う処理を関数としてまとめることで、１行の命令でそれらの処理を呼び出すことができる。
【関数定義方法】function 関数名(引数){処理 return 戻り値;}
【呼び出し方法】function(引数);
グローバル変数と、ローカル変数
・グローバル変数 i = 0
<script>から</script>の全範囲で有効な変数
ローカル変数 var i = 0 （※varをつけるとローカル変数となる 推奨）
関数の中だけで有効な変数
□ＪＳのコメントの記述方法（<script>の中で記述する）
//コメント ※１行の場合
/* コメント */ ※複数行の場合
ＨＴＭＬを操作する
DOMとは
・DOMとはHTMLとプログラミング言語(ＪＳ)の間の橋渡しをする仕組み
・DOMの仕様１：文書をオブジェクトとして扱う ※JSの各種オブジェクトと同じような位置づけとなるという意味
・DOMの仕様２：文書へのアクセスや操作方法の定義 ※DOMは文書へアクセスしたり操作したりする方法を定義している
・HTML文書は文書自体や、各タグがオブジェクトとしてみなされ、JSによってオブジェクト操作ができる。
・文書を構成する「要素」や「属性」などのオブジェクトのことをノードと呼ぶ。
・ノードとは、DOMからアクセスできるオブジェクトの単位であるといえる。
・ノードは要素だけでなく、親ノードや子ノードなどがあるため、単純に要素を指定するよりも汎用的にオブジェクト指定と操作ができる。
（例）兄弟ノードにたいして●●の処理を行う など。
IDを指定して要素を取得する
【方法】var 任意の要素オブジェクト名 = document.getElementById(要素のid);
タグ名を指定して要素を取得する
【方法】var 任意の要素オブジェクトの集合名 = document.getElementsByTagName(タグ名)
・注意！！Elementsと複数形であることに注意すること
・ふつう、html内には同じタグが複数存在するため、取得した値は「要素オブジェクトの配列」となっている。
クラス名を指定して要素を取得する。
【方法】var 任意のオブジェクトの集合名 = document.getElementsByClassName(クラス名);
・注意！！Elementsが複数形
複数のクラス名を指定して要素を取得する（and条件）
【方法】var 任意のオブジェクトの集合名 = document.getElementsByClassName(クラス名１ クラス名２);
HTMLを読み込んでからJSを実行するには
window.onload = function(){処理}
と記述しhtmlを読み込み後に実行する処理を関数の中の「処理」に入れる。
要素の属性(hrefとか)を取得する
【方法】var 変数名 = 要素オブジェクト名.getAttribute(属性名);
要素の属性(hrefとか)をセットする
【方法】var 変数名 = 要素オブジェクト名.setAttribute(属性名);
テキストを書き換える
・要素を取得した後に.textContentプロパティを変更するとテキストを書き換えることができる。
HTML自体を書き換える
・要素を取得した後に.innerHTMLプロパティを変更することで、要素の内部のHTML自体を書き換えることができる。
要素を追加する
・HTMLに要素を追加するには、１．要素を生成する ２．要素をDOMオブジェクトに追加する という２工程のメソッドを経る。
１．要素を生成する：var elem = document.createElement(タグ名)
２．要素を追加する：document.親ノード.appendChild(elem)
要素を削除する
・HTMLから要素を削除するには、１．要素を取得する ２．取得した要素をDOMの親オブジェクトから取り除く という２工程のメソッドを経る。
１．要素を取得する：elem = document.getElementById(Id名)
２．要素を削除する：document.親ノード.removeChild(elem)
イベントをトリガーに処理を行う。
よくあるイベント
load 読み込みが終わった
click クリックされた
mouseover マウスカーソルが乗った
mouseout マウスカーソルが外れた
change 値が変わった
・イベントには、１つの処理を行うイベントハンドラーと、複数の処理を行うイベントリスナーがある。
イベントハンドラー
・イベントハンドラーは単一のイベントに対して複数の処理を設定することができない。（同じイベントに複数のイベントハンドラーを設定した場合は、最後に設定したイベントハンドラーで上書きされるっぽい。）
【要素のタグ内で定義する方法】<タグ名 onイベント名=”jsの処理”>
【要素オブジェクトのプロパティで定義する方法】要素オブジェクト.onイベント名=function(イベント){処理}
イベントリスナー
・イベントリスナーは、要素オブジェクトのaddEventListenerメソッドで定義する。単一のイベントに対して複数の処理を定義できる。
【書式】要素オブジェクト.addEventListener(イベント名, function(イベント){処理内容});
※addEventListenerはメソッドである。メソッドの引数として関数を記述している。
【例】window.addEventLister(“DOMContentLoaded”, function(){処理};)
※説明：DOMContentLoadedがトリガーのイベント名である。DOMContentLoadedはHTMLの読み込みが完了したというイベントである。onloadの場合は、cssや画像ファイルなどの読み込み全て完了するのを待つが、DOMContentLoadedは画像などの読み込みを待たずに、HTMLのDOM解析が終わった時点で発生するためDOMオブジェクトに対する処理だけを実行する場合はonLoadよりも早く処理が開始される。
イベントのキャンセル（.preventDefault();）
・aタグのリンクなど、規定のイベントをキャンセルすることができる。
【書式】イベントオブジェクト.preventDefault();
・下の例のように、クリックというイベント自体は無くせないので、クリックイベントの後の規定処理をキャンセルするという処理になる。
【例】window.addEventListener(‘DOMContentLoaded’, function () {
var alink = document.getElementById(‘alink’);
alink.addEventListener(‘click’, function(event) {
event.preventDefault();
window.alert(‘キャンセル’);
});
});
イベントで動的に画面を変更する（thisを使ってオブジェクトを変更する）
【例；画像差し替え】image.addEventListener(‘mouseover’, function(){
this.src =”image2.jpg”
});
ウェブページのUIを動的に制御する。
・プルダウンから選択したら、下位のプルダウンが表示されるなど、UIを動的に変更できる。
・addEventListerなどこれまでのコマンドの複合。新たなコマンドはなし。
WEB APIを利用する。
・APIとは外部のプログラムを呼び出す仕組みのこと。企業などが自社のデータやサービスをWEB APIとして公開している。
□WEB APIで使われるデータ形式
・XML 利用者が独自のタグを指定できるマークアップゲンゴの形式
・RSS ウェブサイトの更新情報などを簡潔にまとめたXML形式
・JSON JavaScriptのオブジェクト表記構文でデータを記述する形式 ←JavaScriptで利用するにはこれ推奨
・CSV カンマ区切り形式
JSON(JavaScript Object Notation)
JavaScriptにおけるオブジェクトの表記法を構文としたテキスト形式のでーた記述。JavaScriptとの親和性が高い形式。
JSON形式のデータは、文字列型、数値型、真偽型、Nullの値の組み合わせを持つ配列または理想配列。
【JSONの例】
配列：[‘item1’, ‘item2’, ‘item3’]
連想配列：{‘key1′:’value1’, ‘key2′:’value2’, ‘key3′:’value3’}
配列と連想配列：[{‘id’:’001′, ‘name’:’item1′,}, {‘id’:’002′, ‘name’:’item2′}]
JSONP
・JSONデータを関数の「引数」として関数の名前と一緒に返す仕組みのことをJSONPという。JSONPの書式は整理すると下記の通りシンプル。
【書式】関数名(JSONデータ);
WEBブラウザに情報を残す
データの保存
・ブラウザにテキストデータを保存できるWebstrageという仕組みがある。
・Webstrageはオリジン（httpなどのスキーム、ドメイン、ポート番号）単位でデータを保存する。
・Webstrageは10MB。ウィンドウを閉じるまで有効なsessionStrageと、永続的に有効なlocalStrageがある。対してクッキーは4kbで保存時に指定した期限まで。
【書式:データ保存時】
var storage = localStorage;
storage.setItem(キー, 値);
storage.キー = 値;
storage[キー] = 値;
【書式：データ参照時】
var storage = localStorage;
var 変数名 = storage.getItem(キー, 値);
var 変数名 = storage.キー = 値;
var 変数名 = storage[キー] = 値;
【書式：データ削除時】
var storage = localStrage;
strage.removeItem(キー);
日付の取り扱い方
・日付を取り扱うためには、まずインスタンス(オブジェクト)の作成が必要。
【書式:日付インスタンス作成】
var 変数名 = new Date(); 今日の日付でインスタンス作成
var 変数名 = new Date(yyyy, m, d); yyyy年m+1月d日でのインスタンス作成
※月は0～11で取り扱う。
日付取得のメソッド
getFullYear() 西暦を取得
getMonth() 月を取得0-11
getDate() 日にちを取得1-31
getDay() 曜日を取得（0日曜 ～ 6土曜）
日付指定のメソッド
setFullYear() 西暦を指定 yyyy
setMonth() 月をセット 0-11
setDate() 日にちをセット 1-31
JavaScriptの勉強ページ
・W3W3Schools
http://wwwww3schools.com/
コメント
記事No.424