ITメモ
JavaScript
「Javascript」の基礎知識
「Javascript」とは「Node.js」とは「Ajax」とは「chart.js」とは「Javascript」の使い方「Javascript」の「エラーチェック」をする方法「Javascript」の「変数」「Javascript」の「配列(Array)」「Javascript」の「DOM(Document Object Model)」の「使い方」「Javascript」の「関数 / Function」「Javascript」の「条件分岐・繰り返し」「Javascript」の「イベントハンドラー(Event Handler)」「Javascript」の「文字」を操作する方法「Javascript」の「文字」を検索する方法「Javascript」の「スコープ」「Javascript」の「ファイル操作方法」「Javascript」の「画像操作方法」「Javascript」の「情報」を出力・チェックする方法「Javascript」での「ヒアドキュメント」の使い方「Javascript」の「Built-in Object(ビルトインオブジェクト)」「Javascript」の「ライブラリー / Library」
Reference
数字
「Javascript」で「計算」に誤差が出る時の解決方法
ファイル読み込み
「XMLHttpRequest」オブジェクト - サーバーのファイルを読み込む方法
イベント
ページ読み込み時に「Javascript」を実行する方法画像読み込みが完了してから、次の処理を実行する方法「addEventListener()」の使い方 - イベントが発生したのを検知して実行する方法
要素情報
HTMLタグの「class」属性値を取得、変更する方法「querySelector()」の使い方 - HTML要素の情報を参照・設定する方法「querySelectorAll()」の使い方 - 要素内の指定した子要素を参照・設定する方法「classList」プロパティ - HTMLタグ属性値「class」の情報を参照・確認・追加・削除する方法「getElementById()」の使い方 - HTML要素の情報を「ID名」で参照・設定する方法「getElemetnsByClassName()」の使い方 - HTML要素の情報を「クラス名」で参照・設定する方法「Node.Childnodes」の使い方 - 要素内の子要素を参照・設定する方法「ParentNode.children」の使い方 - 要素内の子要素を参照・設定する方法要素の配置位置を確認する方法
Style関連
スタイル属性(色・線・大きさなど)を参照・変更する方法「getPropertyValue」メソッド - 指定されたCSSプロパティの値などを取得する「getComputedStyle」メソッド - CSSを適用したスタイルを参照する
ページ関連
Webページのタイトルを変更する方法「モニター」情報を取得する方法「ブラウザ」情報を取得する方法「ページ」情報を取得する方法「イベント」情報を取得する方法「マウス」情報を取得する方法
サイズ関連
要素の縦・横サイズを参照・変更する方法「モニター」「ブラウザ」のサイズ情報を取得する方法
端末情報
スマートフォンからのアクセスを識別する方法
Library「jQuery」
【jQuery】とは【jQuery】の書式【jQuery】「Javascript」にリンクさせる方法【jQuery】「Javascript」に記述する方法【jQuery】のオブジェクト【jQuery】「CSS」を参照・設定する方法【jQuery】「HTML」要素の情報を参照・設定する方法【jQuery】「HTML」タグを追加する方法【jQuery】ユーティリティ関数【jQuery】イベントアクションを設定する方法【jQuery】イベントオブジェクト「.on」の使い方【jQuery】読み込み完了してから実行する「.ready」の使い方【jQuery】「Ajax」を使う方法【jQuery】「エフェクト」「アニメーション」を使う方法





【Javascript】変数 / Variable

【Javascript】
変数 / Variable










変数とは

変数とは


変数は、一時的に、文字列や値を保持することができる役割を持つ。
値を代入することで、随時変更が可能。

var xx;変数の宣言
var xx, yy, zz;変数の一括宣言
xx=5;変数の代入
var xx=5;変数の宣言と代入

Back



変数の宣言


宣言に使うキーワードの種類

キーワード宣言
const宣言時に初期値を設定した後は、値の変更ができない。
let宣言した後に、自由に変数の値を変更できる。
var従来の変数宣言。宣言した後に、自由に変数の値を変更できる。


const、let、varどのキーワードも共通の宣言方法
変数宣言を「,(カンマ)」で区切ることにより、同時に複数の変数を定義することが可能。
const ConstText = "「const」キーワードの使い方", const ConstNum = 1;
const ConstNum1 = 1, const ConstNum2 = 2;

上記は下記の宣言と内容は同じ。
const ConstText = "「const」キーワードの使い方";
const ConstNum = 1;
const ConstNum1 = 1;
const ConstNum2 = 2;


「const」キーワード

「var」の問題点を改善するために導入された「宣言(キーワード)」の1つ。
「const」キーワードで変数を宣言した場合、変数の値を再設定することができない。
変数の値を設定するには、「const」キーワードで宣言をしたときに、値(初期値)を設定する。
変数に対して値を再設定する必要がない場合は、「const」キーワードでの変数宣言が推奨されている。

「let」キーワードと「const」キーワードの変数2重定義エラー

「var」キーワードは、「同じ名前の変数を再定義できてしまう」という問題があるらしい。
そこが改善され、「let」キーワードと「const」キーワードでは、
同じ名前の変数を再定義しようとすると、構文エラー(SyntaxError)が発生する。
「let」キーワードと「const」キーワードの改善点は、
「変数を二重に定義できない」という点。
SyntaxError: redeclaration of キーワード名 変数名

「const」キーワードの書式

const 変数名 = 初期値;
const ConstNum = 1;
const ConstText = "「const」キーワードの使い方";


「const」キーワードで宣言した変数に値を再設定しようとすると発生するエラー

TypeError: invalid assignment to const '変数名'




「let」キーワード

「var」の問題点を改善するために導入された「宣言(キーワード)」の1つ。
「let」キーワードは、変数を宣言・値の代入(初期設定)を行った後に、
値の変更(再設定)をすることができる変数宣言。
「let」キーワードでの変数宣言は、初期値を設定しないでも宣言可能。
初期値を設定しなかった場合の変数初期値のデフォルトは、「undefined」。
「let」キーワードで変数宣言した変数は、何度でも値の再設定が可能。

「let」キーワードと「const」キーワードの変数2重定義エラー

「var」キーワードは、「同じ名前の変数を再定義できてしまう」という問題があるらしい。
そこが改善され、「let」キーワードと「const」キーワードでは、
同じ名前の変数を再定義しようとすると、構文エラー(SyntaxError)が発生する。
「let」キーワードと「const」キーワードの改善点は、
「変数を二重に定義できない」という点。
SyntaxError: redeclaration of キーワード名 変数名


「let」キーワードの書式


//宣言と初期値の同時設定する書式
let 変数名 = 初期値;

let LetNum = 1;
let LetText = "「let」キーワードの使い方";
let LetNum1 = 10, let LetText2 = "連続しての宣言";


//宣言後に値を設定する方法
let 変数名;
変数名 = 初期値;

let LetNull;
LetNull = "テキストを代入";
LetNull = 100;



「var」キーワード

一番古くからある変数宣言で、
使い方は、「let」キーワードとほぼ同じ。
現時点では、「var」キーワードは使えるが、
「let」キーワードの使用を推奨されている。

「var」キーワードは、変数を宣言・値の代入(初期設定)を行った後に、
値の変更(再設定)をすることができる変数宣言。
「var」キーワードでの変数宣言は、初期値を設定しないでも宣言可能。
初期値を設定しなかった場合の変数初期値のデフォルトは、「undefined」。
「var」キーワードで変数宣言した変数は、何度でも値の再設定が可能。

「let」キーワードと「const」キーワードの変数2重定義エラー

「var」キーワードは、「同じ名前の変数を再定義できてしまう」という問題があるらしい。
そこが改善され、「let」キーワードと「const」キーワードでは、
同じ名前の変数を再定義しようとすると、構文エラー(SyntaxError)が発生する。
「let」キーワードと「const」キーワードの改善点は、
「変数を二重に定義できない」という点。
SyntaxError: redeclaration of キーワード名 変数名
「var」キーワードに、変数の再定義をすると、
最後の定義に上書きされる。


「var」キーワードの書式


//宣言と初期値の同時設定する書式
var 変数名 = 初期値;

var VarNum = 1;
var VarText = "「var」キーワードの使い方";
var VarNum1 = 10, var VarText2 = "連続しての宣言";


//宣言後に値を設定する方法
var 変数名;
変数名 = 初期値;

var VarNull;
VarNull = "テキストを代入";
VarNull = 100;


Back



変数名に使える文字


変数名の名前(識別子)に使用できる文字は、
・「半角のアルファベット」「_(アンダースコア)」「$(ダラー)」「数字」を組み合わせた名前にする
・変数名は数字から開始できない
・予約語と被る名前は利用できない
という条件がある。

Back



変数の中身を確認する方法


「Javascript」で、変数の中身を確認する作業は、
プログラミングをしていると必ず行う作業。
ブラウザか、コンソールに表示する方法が「Javascript」で行える。

変数の中身を確認するには、プログラムでブラウザに値を表示するか、
コンソールに変数の値を出力するなどして確認できる。
下記のプログラムコードを記述することで、ブラウザ・コンソールに表示される。

ブラウザでコンソールを表示する方法は、「F12」を押すことで、ブラウザの下に、
エラーなどを確認できる「デバッグ」ツールが表示され、いくつかのツールの中に「コンソール」もあり、
内容が確認できるようになっている。



変数の中身を確認する方法

alert("変数の中身="+変数名);
alert("出力したいテキスト");
alert(変数名);
alert(配列名[0]);
alert(element.style.width);

console.log("ログとして出力したいテキスト");
console.info("情報として出力したいテキスト");
console.warn("警告として出力したいテキスト");
console.error("エラーとして出力したいテキスト");
console.dir(出力したいオブジェクト);
console.dirxml(出力したいDOM);
console.assert(/*条件*/,"/*出力したいメッセージ*/");



実行回数を出力
console.count();

呼び出し元の関数を出力
console.trace();

time〜timeendの間にあるプログラムの実行時間を計測し出力する。(識別名は同一のものを指定)
console.time(/*識別名*/);
console.timeEnd(/*識別名*/);

profile~profileEndまでの処理にかかった時間を詳細に出力する(識別名は同一のものを指定)
console.profile(/*識別名*/);
console.profileEnd(/*識別名*/);

group~groupEndまでの各種メソッドがグループ化されて出力する。(識別名は同一のものを指定)
console.group(/*識別名*/);
console.log("各種ログ情報");
console.groupEnd(/*識別名*/);



Back



変数名の動的な指定方法


変数名を動的に指定するには、「eval()」関数を使用する。

eval()関数は、JavaScriptコードの文字列を評価して実行する。
組み合わせた文字列が、「Javascript」コードとして正しければ、コードを実行してくれる。
eval()は、引数が妥当な文字列かどうかを決定し、
次に、JavaScriptコードを探す文字列の解析をします。
JavaScriptコードが見つかれば、それを実行する。



サンプルコード


for(i=1; i<=5; i++){
eval("var sample_"+ i +";");
}


上記のfor構文のサンプルコードは、下記のコードと同じことになる。
var sample_1;
var sample_2;
var sample_3;
var sample_4;
var sample_5;



Back