Webデザイン学科
授業資料

2022前期

2022後期

About

JavaScript演習
1年生後期の復習とformの操作

概要解説

1 年生「JavaScriot 基礎」の復習と form の値の操作を兼ねた制作をしていきます。

内容

  • JavaScript クイズ ①
  • 変数
    • const
  • form
    • form 要素 の書き方と種類
    • JavaScript での値の操作

JavaScript クイズ

15 分以内に回答して、送信してください。

const について

const は定数です。
定数は、let キーワードを使って定義する変数と同様にブロックスコープを持ちます。
定数の値は、再代入による変更ができず、再宣言もできません。

// myFav を定数として定義して、その値を 7 にします
const myFav = 7;

// これはエラーが発生します - Uncaught TypeError: Assignment to constant variable.
myFav = 20;

// myFav は 7 です
console.log('my favorite number is: ' + myFav);

// 定数を再宣言しようとするとエラーが発生します
// Uncaught SyntaxError: Identifier 'myFav' has already been declared
const myFav = 20;

// myFav という名前は上記の定数のために予約されているので、これも失敗します
var myFav = 20;

// これもエラーが発生します
let myFav = 20;

//定数は初期化が必要（宣言だけはできない）
// エラーが発生します
// Uncaught SyntaxError: Missing initializer in const declaration
const FOO;

const 宣言は、定数に保持されている値は不変ではなく、その変数の識別子が再代入できないということです。
どういうことかというと、定数の中身がオブジェクトの場合、オブジェクトの内容（プロパティなど）は変更可能ということです。

const myObject = { key: 'value' };

// オブジェクトの上書きはエラーを投げます。
// Uncaught TypeError: Assignment to constant variable.
myObject = { OTHER_KEY: 'value' };

// しかしながら、オブジェクトのキーは保護されていないので、
// 次の文は問題なく実行されます。
myObject.key = 'otherValue'; // Object.freeze() を使用すればオブジェクトを不変にできます。

// 配列も同じです。
const myArray = [];
// 配列に要素をプッシュすることができます。
myArray.push('A'); // ["A"]
// しかしながら、新しい配列を変数に代入するとエラーを投げます。
// Uncaught TypeError: Assignment to constant variable.
myArray = ['B'];

これらの特徴を踏まえて、ネット上のドキュメントなども const を利用して解説している場合が多くなりました。
今後、授業の解説などでは const を利用できる部分は利用していきます。
自分でプログラミングしていくときは、let でも構いません。

授業資料

〈form〉要素

<!DOCTYPE html>
<html lang="ja">
	<head>
		<meta charset="UTF-8" />
		<title>form1</title>
	</head>
	<body>
		<form id="trident">
			<input type="text" name="school" value="トライデント" id="school" />
		</form>
		<button>送信</button>
		<p id="result"></p>
		<script>
			let submitBtn = document.querySelector('button');
			submitBtn.addEventListener('click', function () {
				let val = document.forms[0].school.value;
				let result = document.querySelector('#result');
				result.textContent = val;
			});
		</script>
	</body>
</html>

jQuery で書くと

$('button').on('click', function () {
	$('#result').html($('#school').val());
});

〈form〉要素を取得する

<form>
	<label for="name">名前</label>
	<input type="text" id="name" name="name" />
	<label for="age">年齢</label>
	<input type="text" id="age" name="age" />
	<button class="importBtn">取得</button>
</form>
const formValue = document.forms;
const importBtn = document.querySelector('.importBtn');
importBtn.addEventListener('click', function (e) {
	//button要素のイベントを削除
	e.preventDefault();
	console.log(formValue[0][0].value);
});

名前付きフォームへのアクセス

form に name 属性を設定するとdocument.forms.name 名で取得できます．

<form name="login">
	<input name="email" type="email" />
	<input name="password" type="password" />
	<button type="submit">Log in</button>
</form>

<script>
	const loginForm = document.forms.login; // Or document.forms['login']
	console.log(loginForm);
	loginForm.elements.email.placeholder = 'test@example.com'; //placeholderを設定
	loginForm.elements.password.placeholder = 'password';
</script>

forms や、forms.name などで取得できるが、値が HTMLCollection だったりするので、
いままで通り querySelector() の value で取得する方が良いでしょう。

計算するフォームを作る

<form>
	<input type="number" name="number1" class="val_1" />
	<input type="number" name="number2" class="val_2" />
</form>
<button>計算する</button>
<script>
	let ansBtn = document.querySelector('button');
	ansBtn.addEventListener('click', function () {
		//let Num1 = document.forms[0].number1.value;
		const Num1 = document.querySelector('.val_1').value; //これでも値が取得できる
		const Num2 = document.forms[0].number2.value;
		console.log(parseInt(Num1) + parseInt(Num2));
	});
</script>

jQuery で書くと

$('button').on('click', function () {
	console.log(parseInt($('.val_1').val()) + parseInt($('.val_2').val()));
});

計算機を作ってみよう

<form id="calculator">
	<input type="number" id="firstNum" value="0" />
	<input type="number" id="secondNum" value="0" />
	<label for="resultNum"
		>答え
		<input type="number" id="resultNum" />
	</label>
</form>
<ul>
	<li class="plusBtn">＋</li>
	<li class="minusBtn">−</li>
	<li class="timesBtn">×</li>
	<li class="dividedBtn">÷</li>
</ul>
//足し算
const plusBtn = document.querySelector('.plusBtn');
const minusBtn = document.querySelector('.minusBtn');
const timesBtn = document.querySelector('.timesBtn');
const dividedBtn = document.querySelector('.dividedBtn');
const result = document.querySelector('#resultNum');

plusBtn.addEventListener('click', function () {
	const firstNum = document.querySelector('#firstNum').value;
	const secondNum = document.querySelector('#secondNum').value;
	console.log(Number(firstNum) + Number(secondNum));
	result.value = Number(firstNum) + Number(secondNum);
});

//引き算
//かけ算
//割り算

Form のイベント

form に関するイベントは、複数あります。
https://listener.noplan.cc/form/

<form>
	<input type="text" value="トライデント" name="school" />
	<input type="reset" name="reset" />
	<button type="submit">送信する</button>
</form>
<script>
	const form = document.forms;
	const submitBtn = document.querySelector('button');
	const schoolarea = document.querySelector('input[name="school"]');
	//blur, change, select, input
	schoolarea.addEventListener('blur', function () {
		console.log('イベントが発動しました。');
	});
	//submit, resetはformにイベントを設定
	form.addEventListener('submit', function () {
		alert('送信されました。');
	});
</script>

jQuery で書くと

$('[name="school"]').on('focus', function () {
	console.log('イベントが発動しました。');
});
$('form').on('reset', function () {
	alert('リセットされました。');
});

const で書く場合

const でも let でも構いませんが、const の使い方になれましょう。

const calcBtn = document.querySelector('.calcBtn');
calcBtn.addEventListener('click', function (e) {
	//button要素のイベントを削除
	e.preventDefault();
	const firstNum = document.querySelector('#first').value;
	const secondNum = document.querySelector('#second').value;
	//formの値は文字列です。

	//Number()で文字列を数値化する。
	console.log(Number(firstNum) + Number(secondNum));

	//constにオブジェクトの値を取得しているのでエラーになる。
	//Uncaught SyntaxError: Identifier 'resultNum' has already been declared
	const resultNum = document.querySelector('#result').value;
	resultNum = Number(firstNum) + Number(secondNum);

	//constに要素を取得して、そのオブジェクトの値を入れているので、通る。
	const resultNum = document.querySelector('#result');
	resultNum.value = Number(firstNum) + Number(secondNum);
});

radio ボタンの取得

<form id="radioBtn">
	<ul>
		<li><input type="radio" name="radio" id="radio1" value="Aです。" /><label for="radio1">A</label></li>
		<li><input type="radio" name="radio" id="radio2" value="Bです。" /><label for="radio2">B</label></li>
		<li><input type="radio" name="radio" id="radio3" value="Cです。" /><label for="radio3">C</label></li>
	</ul>
</form>
<button class="radioClick">値を取得</button>

ラジオボタンやチェックボックスの値は、form 要素から name 属性.value で取得します。

const radioClick = document.querySelector('.radioClick');
radioClick.addEventListener('click', function () {
	const val = document.querySelector('#radioBtn').radio.value;
	console.log(val);
});

取得した値を.style で反映する

<style>
	img {
		width: 300px;
		display: block;
		margin: 0 auto;
	}
	form {
		text-align: center;
	}
</style>
<img src="speed_fast_rabbit.png" alt="うさぎ" id="rabbitImg" />
<form>
	<input type="range" min="-100" max="100" name="rabbit" value="0" />
</form>
<script>
	const rangeForm = document.querySelector('[name="rabbit"]');
	const rabbit = document.querySelector('#rabbitImg');
	rangeForm.addEventListener('input', function () {
		rabbit.style.transform = 'translateX(' + rangeForm.value + 'px)';
		//rangeForm.valueで値を取得
	});
</script>

うさぎイラスト

縦（Y 軸）の動きを加えてみる

<form>
	<label>左右<input type="range" min="-100" max="100" name="rabbit_1" class="leftright" /></label>
	<label>上下<input type="range" min="-100" max="100" name="rabbit_2" class="topbottom" /></label>
</form>
<script>
	const sideRange = document.querySelector('.leftright');
	const vertiRange = document.querySelector('.topbottom');
	const rabbit = document.querySelector('#rabbitImg');
	const formvalue = document.forms;
	//それぞれのinput要素にイベントを設定
	for (let i = 0; i < formvalue.length; i++) {
		formvalue[i].addEventListener('input', function () {
			rabbit.style.transform = 'translate(' + sideRange.value + 'px,' + vertiRange.value + 'px)';
		});
	}
</script>

jQuery で書く（jQuery でも const が使えます）と

//jQueryだとループさせなくても、それぞれにイベントが設定できる。
$('form input').on('input', function () {
	const leftright = $('.leftright').val();
	const topbottom = $('.topbottom').val();
	$('#rabbitImg').css({
		transform: 'translate(' + leftright + 'px,' + topbottom + 'px)'
	});
});

2022-04-12
Hideo kawaguchi