画面入力とJavaScriptのDOM操作
テキスト：JavaScriptのDOM操作では、ユーザー操作と言えば「ボタン押下」だけでした。
ここでは入力項目を追加して、より複雑なDOM操作を実施します。
→もっと動的にできる。
HTMLの目的
７割
テキスト : HTML#60e42254c3b4c30000a4a248
3割
「入力フォームをつくる」こと　←ここの話もするよ
やってみよう
※ テキスト : WebブラウザにおけるJavaScriptにおいてstudy/jsフォルダを作成している想定。（別のフォルダを作成しても構わないです）
code:input-message.html
<!DOCTYPE html>
<html lang="ja">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>入力したメッセージを出力する</title>
<script>
function alertMsg(){
const message = document.getElementById('message').value;
alert(message);
}
</script>
</head>
<body>
<form action="">
<h3>以下にメッセージを入力してください</h3>
<input type="text" id="message" name="message" placeholder="プレースホルダー">
<input type="button" value="送信" onclick="alertMsg()">
</form>
</body>
</html>
inputタグについて
参考 : https://developer.mozilla.org/ja/docs/Web/HTML/Element/input
主要な属性
type 必須。書かれていない場合は「text」扱い。
name DOM操作では使わないが大事な属性。基本は書くものという認識でいい。
value 入力した値を格納する属性。明確的に指定された場合は初期値となる。
その他（例）
placeholder 入力欄が空の時に表示される内容 (typeが「text/email/password/tel」のとき)
余談
id・class属性はinputタグに限らず、全てのタグに付与できるグローバル属性です。
type属性の種類
code:input-type1.html
<!DOCTYPE html>
<html lang="ja">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>inputのtype属性</title>
</head>
<body>
<h3>入力を試してみてください。</h3>
<form action="input-message.html" method="get">
<label>テキストボックス</label>
<input type="text" name="text" value="初期値"><br>
<label>パスワード入力</label>
<input type="password" name="password"><br>
<br>
<label>チェックボタン</label><br>
チェック項目1 <input type="checkbox" name="checkbox1">
チェック項目2 <input type="checkbox" name="checkbox2"><br>
<br>
<label>ラジオボタン</label><br>
はい <input type="radio" name="radio">
いいえ <input type="radio" name="radio"><br>
<br>
<label>メール入力</label>
<input type="email" name="email"><br>
<label>日付の入力</label>
<input type="date" name="date"><br>
<label>数値の入力</label>
<input type="number" name="number"><br>
<label>隠し要素</label>
<input type="hidden" name="hidden"><br>
<label>reset</label>
<input type="reset" name="reset"><br>
<label>submit</label>
<input type="submit"><br>
<!-- <input type="submit" name="submit" value="確定"><br> -->
</form>
</body>
</html>
text
password
入力値を隠す
checkbox
複数選択可能
radio
同じ name の値を持つ複数の選択肢から一つの値を選択することができる。
なぜ「radio」なのか (昔のカーラジオが由来？) https://atmarkit.itmedia.co.jp/icd/root/74/5787274.html
email
date
number
hidden
隠し要素
reset
formタグに囲まれた入力フォームを初期値に変更する
submit
フォームを送信するボタン
formタグ
action属性
遷移先
method
通信方式
参考
https://gyazo.com/784609ad51240b34f15714455e96dfba
※ formタグについては、説明が足りないのでまた別のテキストで言及します。
???部分を埋めて書いてください。
code:catlog.html
<!DOCTYPE html>
<html lang="ja">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>catalog</title>
<script>
function add() {
// 商品名の取得
const goodText = ???;
// 値段の取得
const price = ???;
// ラジオボタンのノード全体を取得
const necessity = document.getElementsByName('necessity');
let checkedText;
for (let i = 0; i < necessity.length; i++) {
if(necessityi.checked) {
checkedText = necessityi.value;
break;
}
}
// 追加分の要素、tableの一行を作成
const trElement = document.createElement('tr');
const tdElement1 = document.createElement('td');
tdElement1.innerText = goodText;
const tdElement2 = document.createElement('td');
tdElement2.innerText = price;
const tdElement3 = document.createElement('td');
tdElement3.innerText = checkedText;
trElement.???;
trElement.???;
trElement.???;
// 追加する位置の親のノードを探索
const catalog = ???;
// 画面に追加
???;
}
</script>
</head>
<body>
<h3>入力欄</h3>
<from>
商品名 : <input type=??? name="good" id="good"><br>
値段 : <input type=??? name="price" id="price"><br>
<input type=??? name="necessity" value="○"> 必要
<input type=??? name="necessity" value="△"> 保留
<input type=??? name="necessity" value="×"> 不必要 <br>
<input type=??? value="追加" onclick="add()">
</from>
<br>
<br>
<table border="1" id="catalog">
<tr>
<th>商品名</th>
<th>値段</th>
<th>必要性</th>
</tr>
</table>
</body>
</html>
余談
https://lab.syncer.jp/Web/JavaScript/Snippet/30/
https://gyazo.com/69d8105e32f4b13d63bbd9554219b09e
注意）
formタグ・inputタグは一般的には、DOMで操作することを想定していません。
「DOM操作でもやろうと思えば処理できる」くらいに思ってもらえると助かります。
演習
テストの採点
以下のHTMLにおいてボタン内の関数にJavaScriptで処理を追加してください。
ただしHTMLの文書を変更してはいけません。（idやclassを直接書いてはいけない、という意味）
code:test.html
<!DOCTYPE html>
<html lang="ja">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<link rel="stylesheet" href="test.css">
<title>test</title>
<script>
function scoring() {
// ここを編集
}
</script>
</head>
<body>
<h2>テスト</h2>
<form id="test">
<h3>数学</h3>
<div id="q1">1) 5 + 7 = <input type="number" name="q1"></div>
<div id="q2">2) 34 - 15 = <input type="number" name="q2"></div>
<div id="q3">3) 11 × 21 = <input type="number" name="q3"></div>
<div id="q4">4) 48 ÷ 3 = <input type="number" name="q4"></div>
<div id="q5">5) 32 + 8 × 3 = <input type="number" name="q5"></div>
<h3>国語</h3>
<div id="q6">「山月記」を書いたのは誰ですか？</div>
<input type="radio" name="q6" value="江戸川乱歩"> 江戸川乱歩
<input type="radio" name="q6" value="夏目漱石"> 夏目漱石
<input type="radio" name="q6" value="中島敦"> 中島敦
<input type="radio" name="q6" value="太宰治"> 太宰治
<input type="radio" name="q6" value="芥川龍之介"> 芥川龍之介
<br><br>
<div id="q7">「羅生門」を書いたのは誰ですか？</div>
<input type="radio" name="q7" value="江戸川乱歩"> 江戸川乱歩
<input type="radio" name="q7" value="夏目漱石"> 夏目漱石
<input type="radio" name="q7" value="中島敦"> 中島敦
<input type="radio" name="q7" value="太宰治"> 太宰治
<input type="radio" name="q7" value="芥川龍之介"> 芥川龍之介
<br><br>
<div id="q8">「怪人二十面」を書いたのは誰ですか？</div>
<input type="radio" name="q8" value="江戸川乱歩"> 江戸川乱歩
<input type="radio" name="q8" value="夏目漱石"> 夏目漱石
<input type="radio" name="q8" value="中島敦"> 中島敦
<input type="radio" name="q8" value="太宰治"> 太宰治
<input type="radio" name="q8" value="芥川龍之介"> 芥川龍之介
<br><br>
<div id="q9">「走れメロス」を書いたのは誰ですか？</div>
<input type="radio" name="q9" value="江戸川乱歩"> 江戸川乱歩
<input type="radio" name="q9" value="夏目漱石"> 夏目漱石
<input type="radio" name="q9" value="中島敦"> 中島敦
<input type="radio" name="q9" value="太宰治"> 太宰治
<input type="radio" name="q9" value="芥川龍之介"> 芥川龍之介
<br><br>
<div id="q10">「こころ」を書いたのは誰ですか？</div>
<input type="radio" name="q10" value="江戸川乱歩"> 江戸川乱歩
<input type="radio" name="q10" value="夏目漱石"> 夏目漱石
<input type="radio" name="q10" value="中島敦"> 中島敦
<input type="radio" name="q10" value="太宰治"> 太宰治
<input type="radio" name="q10" value="芥川龍之介"> 芥川龍之介
<br><br>
<input type="button" value="採点" onclick="scoring()">
</form>
<br><br>
<table border="1" id="result">
<tr>
<th>数学</th>
<th>国語</th>
</tr>
</table>
</body>
</html>
段階的設問
「数学」部分の採点を行なって、アラートで百分率の点数を表示してください。
数学の回答 1)12, 2)19, 3)231, 4)16, 5)56
「国語」部分の採点を行なって、アラートで百分率の点数を表示してください。
国語の回答 1)中島敦, 2)芥川龍之介, 3)江戸川乱歩, 4)太宰治, 5)夏目漱石
採点後、間違っている設問は赤枠で囲ってください。
※赤枠で囲う箇所は「最終形」のgifを参照ください。
以下 CSSを編集する必要があります。
code:test.css
.border-red {
/* ここを編集 */
}
採点結果のアラート表示をやめて下部のテーブルに出力してください。
最終形
https://gyazo.com/a5f3ef5f0c21e0da9003960b1c201644
#テキスト