JavaScript メモ(忘備録)

スポンサーリンク

文字列

生成

// 文字列はシングルクォート又はダブルクォートで囲む
let a = 'hello';
let b = "world";

// テンプレート文字列(複数行の場合に便利)
// バッククォート「`」で囲む
let str = `hellow
world`;

文字列に変数を埋め込む テンプレート文字列

テンプレート文字列を使うと、文字列中に変数を埋め込んで展開することができる
${変数} の形式で、先頭に$記号をつけて変数を{} で囲む。


var num = 1024;

var str = `あなたは ${num} 人目の訪問者です。`;

console.log(str); 

実行結果

あなたは 1024 人目の訪問者です。
文字数

let d = "abcde";
let num = d.length;

連結

// 文字列連結  +
let c = "hello" + " world";  // "hello world"

分割

let str = "a,b,c,d,e";
let arr = str.split(","); // "," で分割

置換

// a を x に置換する(最初の1つのみ)
s = s.replace("a", "x");

// すべての a を x に置換する
s = s.replace(/a/g, "x");

// すべての改行を削除
str = str.replace(/\r?\n/g, "");

削除

replace()を使って、第2引数に「""」と指定すると削除になる


// a を削除
s = s.replace(/a/g, "");

// 改行を削除
str = str.replace(/\r?\n/g, "");

検索
比較
取り出し(切り出し)

文字列を切り出す方法は複数ある。
文字数で切り出す場合は substr()、 文字位置で切り出す場合は substring()、slice()。


let str = "0123456789";

// char(文字位置)
console.log(str.charAt(3));  // 3

// substr(開始位置, 文字数)
console.log(str.substr(0, 3));  // 012
console.log(str.substr(1, 5));  // 12345

// substring(開始位置, 終了位置)   終了位置-1 までを取得する
console.log(str.substring(0, 3)); // 012
console.log(str.substring(1, 5)); // 1234

// slice(開始位置, 終了位置)   終了位置-1 までを取得する
console.log(str.slice(0, 3)); // 012
console.log(str.slice(1, 5)); // 1234

型変換

// 文字列を数値に変換
let a = "0123";
let b = parseInt(a);   // 整数
let c = parseFloat(a); // 浮動小数点数

// 数値を文字列に変換
let num = 123;
let s = String(num);
console.log(s);         // 123
console.log(typeof s);  // string

配列

作成・初期化

// 空の配列を作成
let arr = [];

// 宣言+初期化
let arr = [1, 2, 3];

要素数

let arr = [1, 2, 3];
console.log(arr.length);  // 3

追加・削除

let arr = ["a", "b", "c"];

// 末尾に追加
arr.push("d");
console.log(arr); // [ 'a', 'b', 'c', 'd' ]

// 先頭に追加
arr.unshift("z");
console.log(arr); // [ 'z', 'a', 'b', 'c', 'd' ]

// 末尾を削除
arr.pop();
console.log(arr); // [ 'z', 'a', 'b', 'c' ]

// 先頭を削除
arr.shift();
console.log(arr); // [ 'a', 'b', 'c' ]

結合

let arr1 = ["a", "b", "c"];
let arr2 = ["x", "y", "z"];

let arr3 = arr1.concat(arr2);

console.log(arr3); // [ 'a', 'b', 'c', 'x', 'y', 'z' ]

ループ

// for文を使ったループ
let arr = [1, 2, 3];

for (let i = 0; i < arr.length; i++){
	console.log(arr[i]);
}

// forEachを使ったループ
let arr = [1, 2, 3];

arr.forEach(function(v, i){
	console.log(i, v);
})

実行結果
0 1
1 2
2 3
ソート

// アルファベット順
arr.sort();

// 数値 昇順
arr.sort(function(a, b){return a - b});

// 数値 降順
arr.sort(function(a, b){return b - a});

関数

function命令 基本

function test(){
	// 処理
	return;
}
引数がある場合

function test2(str1, str2) {
	return str1 + str2;
}

関数リテラル

let test3 = function(str1, str2){
	return str1 + str2;
}

console.log(test3("a", "b")); // ab

DOM

get〇〇系

// idで取得
let elem = document.getElementById("id-test");
console.log(elem.textContent);

// クラス名で取得
let elems = document.getElementsByClassName("cls-test");

for (let i = 0; i < elems.length; i++) {
	console.log(elems[i].textContent);
	// item(i)でも取得できる
	console.log(elems.item(i).textContent);
} 

// タグ名で取得
let elems = document.getElementsByTagName("li");

for (let i = 0; i < elems.length; i++) {
	console.log(elems[i].textContent);
	// item(i)でも取得できる
	console.log(elems.item(i).textContent);
} 

// name属性値で取得
let elems = document.getElementsByName("name-test");

for (let i = 0; i < elems.length; i++) {
	console.log(elems[i].value);
	// item(i)でも取得できる
	console.log(elems.item(i).value);
} 

query〇〇系 (CSSセレクターで要素を取得)

// 1つまたは最初の1つ
let elem = document.querySelector("#id-test li");
console.log(elem.textContent);


// 複数
let elems = document.querySelectorAll("#id-test li");

console.log(elems);
for (let i = 0; i < elems.length; i++) {
	console.log(elems[i].textContent);
	// item(i)でも取得できる
	console.log(elems.item(i).textContent);
} 

属性


//属性を取得 getAttribute

let elems = document.getElementsByTagName("a");

for (let i = 0; i < elems.length; i++) {
	 console.log(elems[i].getAttribute("href"));
	 // items(i) でもOK
	 console.log(elems.item(i).getAttribute("href"));  
}


// 属性を設定 setAttribute

let elems = document.getElementsByTagName("a");

for (let i = 0; i < elems.length; i++) {
	 elems[i].setAttribute("href", "https://test.com");
	// items(i) でもOK
	 elems.item(i).setAttribute("href", "https://test.com");  
} 

カスタムデータ属性

<div data-time="1000"></div>

// カスタムデータ属性値を取得("data-"を除いた部分)
let custom = elem.dataset.time

// getAttributeでもOK
let custom = elem.getAttribute("data-time")

テキストを取得・設定

<!-- HTML -->
<div id="id-test">
	<p>test</p>
</div>


let elem = document.getElementById("id-test");

console.log(elem.textContent);
// 実行結果
test

console.log(elem.innerHTML);
// 実行結果
<p>test</p>

console.log(elem.outerHTML);
// 実行結果
<div id="id-test">
	<p>test</p>
</div>

イベント

HTML文書のロードをまって処理を実行する

// window loadイベント
window.addEventListener("load", function(){

	// 処理内容 

}, false);

// スタイルシート、画像、サブフレームの読み込みが完了するのを待たずに発生
// window DOMContentLoaded イベント
window.addEventListener("DOMContentLoaded", function(){

	// 処理内容 

});

イベントハンドラ


// 注意点:関数名の後に()を付けない
// イベントハンドラを設定
elem.addEventListener("click", 関数名, false);

// イベントハンドラを直接記述
elem.addEventListener("click", function(){
	console.log("clicked");
}, false);

タイマー

  • setInterval(): 連続
  • clearInterval()
  • setTimeout(): 1回きり
  • clearTimtout()

setInterval()の中に処理を記述


let timer;

timer = setInterval(function(){
	console.log("hello");
}, 1000);

setInterval()から関数を呼び出す


let timer;

timer = setInterval(f_test, 1000);

function f_test(s){
	console.log("hello ");
}

関数に引数を渡す


let timer;

timer = setInterval(f_test, 1000, "world");

function f_test(s){
	console.log("hello " + s);
}

clearInterval()でタイマーをストップ


let timer;
let counter = 0; // カウンタ

timer = setInterval(f_test, 1000);

function f_test(){
	counter++;
	console.log(counter);
	if (counter >= 5) {
		// タイマーストップ
 		clearInterval(timer);
	}
}

サンプルコード: ボタンクリックで秒数表示


let timer;
let counter = 0;

// window DOMContentLoaded イベント
window.addEventListener("DOMContentLoaded", function(){

	let btn_start = document.getElementById("btn-start");
	let btn_stop = document.getElementById("btn-stop");

	// startボタン
	btn_start.addEventListener("click", function(){
		clearInterval(timer); // 2重起動防止
		counter = 0;
		// タイマースタート
		timer = setInterval(f_show_count, 1000);
	}, false);

	// stopボタン
	btn_stop.addEventListener("click", function(){
		// タイマーストップ
		clearInterval(timer);
	}, false);

});

function f_show_count(){
	counter++;
	console.log(counter);
}

その他

Node.jsでJavaScriptを実行する(コマンドライン)


// 実行
node test.js

// バージョン確認
node -v
例: v12.17.0