JavaScriptの覚書 | ワクガンス

クラスの継承 | スーパークラス, 基本クラス, サブクラス, extends

Demo

ソースコード

script.js

$(()=>{
	
	let cat =new Cat();
	
	cat.bark('茶ひげ猫');
	cat.meows('スカンピー猫');
	cat.runAway('黒い');
	cat.chase();
	
});

Cat.js

class Cat extends Animal{
	
	constructor(){
		$('#res').append('茶ひげ猫と');
		super();
		
		this.item = 'スリッパ';
	}
	
	meows(){
		super.bark('大きな茶ひげ'); // スーパークラスのメソッドを呼び出す
	}
	
	// メソッドのオーバーライド
	runAway(color_text){
		
		super.runAway(color_text);
		
		 let text = `${color_text}子猫も一緒に逃げ出した。<br>`;
		$('#res').append(text);

	}
}

Animal.js

class Animal{
	
	constructor(){
		$('#res').append('黒猫<br>');
		
		this.master = '飼い主';
		this.item = 'チェンソー';
	}
	
	bark(name){
		let text = `${name}が吠える<br>`;
		$('#res').append(text);
	}
	
	runAway(color_text){
		let text = `${color_text}親猫は逃げ出した。<br>`;
		$('#res').append(text);
	}
	
	chase(){
		let text = `${this.master}は${this.item}を持って茶ひげ猫を追いまわした。<br>`;
		$('#res').append(text);
	}

	
}

2022-11-15

if文 ワンライナー let x = animals[animal_value] ?? 0;

連想配列に値が入っていなければ0をセットする。

	let animals = {};
	let value = animals['red_cat'] ?? 0;
	

2022-11-17

submit時、form内に存在する全入力要素のバリデーションを検知する

Demo

ソースコード

<form id="form1"  action="">

	<div>
		動物名
		<input type="text" name="animal_name" required  title="動物名を入力してください。"/>
	</div>
	
	<div>
		動物コード
		<input type="text" name="animal_age" pattern="^[0-9A-Za-z]+$" title="動物コードを半角英数字で入力してください。" value="abc123XYZ">
	</div>
	
	<div>
		動物日付
		<input type="text" name="animal_date" pattern="[0-9]{4}(-|/)[0-9]{1,2}(-|/)[0-9]{1,2}" title="日付(Y-m-d)を入力してください。(例 2012-12-12)" value="2016-10-17">
	</div>
	<div id="err_msg" class="text-danger"></div>
	<input type="submit" onclick="return onSubmit1()"  />
</form>

function onSubmit1(){
	
	let err_msg = onsubmitValidation('form1');
	if(err_msg){
		$('#err_msg').html(err_msg);
		return false;
	}
	
	return true;

}

/**
 * onsubmitイベントのバリデーション
 * @param string form_xid フォームID
 * @return string エラーメッセージ
 */
function onsubmitValidation(form_xid){
	let inputs = $('#' + form_xid + ' input');
	let err_msg = '';
	
	inputs.each((i,elm) => {
		let valid_res = elm.checkValidity();
		
		if(valid_res == false){
			let title = $(elm).attr('title');
			err_msg += `<div>${title}</div>`;
		}
		
	});

	if(err_msg != '') return err_msg;
	
	return false;
}

2023-1-9

submit時、form内に存在する全入力要素のバリデーションを検知する

HTML

<form id="form1"  action=""> ～略

JavaScript

	let res = $('#form1')[0].checkValidity();

2023-1-10

xxx

2022-11-15