//tips
//js理解継続
jsのプロパティデータをhtmlのテーブルに挿入する方法を確認する。
Htmlに３列のテーブルを作成するため
<section>
<table>
<tr>
<td id=“title”></td>
<td id=“price”></td>
<td id=“stock”></td>
</section>
をhtmlに追加。
その上で
<script>
‘use strict’;
let jsbook = {title:’js入門’,price:2500,stock:3};
document.getElementById(‘title’).textContent=jsbook.title;
document.getElementById(‘price’).textContent=jsbook.price +’円’;
document.getElementById(‘stock’).textContent=jsbook.stock;
</script>
配列とオブジェクトの使い分けは、TODOリストのような縦に並べる場合は配列、対象物の性質を横に並べる場合はオブジェクトを使用する方が向いているよう。
エクセル表のような表を作る際には配列とオブジェクトを組み合わせて使用する。forの中にforを入れる構造は他の言語でもよくみる。
次にイベントを利用し、プログラムの動作タイミングを操作できるようにする。
一番簡単なボタンクリックの方法から確認していく。
<section>
<form action =“#” id=“form”>
<input type =“submit” value=“検索”>
</form>
</section>
この状態で表示された検索ボタンを押すと…/index.htmlから…index.html?#にuriが変わったのが確認できた。ここからクリックをトリガーにイベントを発生させる。
<script>
‘use strict’
document.getElementById(‘form’).onsubmit=function()
{
console.log(‘クリックされた’);
};
</script>
こうするとクリックでsubmitが確認されたらコンソールに文字を表示できる。
Formは送信ボタンである<input type =“submit” value=“検索”>がクリックされると指定したページにフォームの入力内容を送信する。送信先はaction属性で決めることができる。
今回はどこにも送信しないので#(当ページ最上部への遷移)を入力しているが一般的にはURLを指定する。
Onsubmitイベントは送信ボタンがクリックされた直後で、入力内容がサーバーに送信される直前に発生する。
そのタイミングで処理を行いたい場合にjsにてdocument.getElementById(‘form’)を使用してformを取得し、.onsubmitの内容にfunctionを代入する。
取得した要素.onsubmit=function()
{
処理内容
};
このようにイベントに代入するfunctionには名前をつけず、returnも存在しないという特徴がある。
ボタンをクリックした段階でテキストフィールドへの入力内容を取得するには、
<section>
<form action =“#” id=“form”>
<input type = “text” name=“word”>
<input type = “submit” value=“検索”>
</form>
<p id=“output”></p>
</section>
Form部品にはたくさんの機能があり、特に機能の種類を決めるtypeと送信する際に必要となるnameは覚えておく必要がある。
テキストフィールドに入力した文字を記録するのにはname属性で定義した変数の中となり、このnameがないと読み取りができなくなる。
Jsの方にも入力された文字を反映させるスクリプトを追加する。
<script>
‘use strict’
document.getElementById(‘form’).onsubmit=function()
{
const search = document.getElementById(‘form’).word.value;
document.getElementById(‘output’).textContent = `[${search}]の検索中…`;
};
</script>
Formは送信ボタンがクリックされたら、入力されたデータをactionのURLに送信するが、その送信しようとする内容がURLの後ろに追加される?word=…となる。
URLが変わると#部分が再読み込み処理となってしまい、うまく文字が反映できないので、actionのページ遷移動作をキャンセルしてあげる必要がある。event.preventDefault;で基本動作をキャンセルする。
<script>
‘use strict’;
document.getElementById(‘form’).onsubmit = function(event)
{
event.preventDefault;
const search = document.getElementById(‘form’).word.value;
document.getElementById(‘output’).textContent = `[${search}]の検索中…`;
}
入力内容の読み取りは
取得した<form>要素.読み取りたいformのname.value
で読み取る。
イベントが発生する際にはイベントオブジェクトがパラメータとして渡されるが、基本動作のキャンセルではそのイベントオブジェクトを操作する必要が生じる。
なのでfunctionの引数にeventを入れてイベントオブジェクトがeventの中に格納されるようにし、preventDefaultで動作のキャンセルを行なっている。
次はDateオブジェクトの加工表示を行なってみる。
<section>
<p>最終アクセス日時:<span id=“time”></span></p>
</section>
<script>
‘use strict’;
const now = new Date();
const year =now.getFullYear();
const month =now.getMonth();
const date =now.getDate();
const hour =now.getHours();
const min =now.getMinutes();
const output = `${year}/${month+1}/${date} ${hour}:${min}’;
document.getElementById(‘time’).textContent = output;
</script>
Dateオブジェクトは、オブジェクトであるためメソッドとプロパティをあらかじめ保有しており、Dateオブジェクトの使用し、日時の取得計算を行いたい場合にはnewをつけて初期化を行う必要がある。
今回は初期化したオブジェクトをnowに代入している。
今回は出力先を<p>タグの中の<span id=“time”></span>として出力している。
オブジェクトにおいてDateのように初期化するものとwindowのように初期化しないものの違いとしては、複数のオブジェクトを作れるか、単独唯一のものなのかで判断する。
Dateオブジェクトはwindowのように単独のものではなく複製可能であることからnewが必要になっている。
Mathオブジェクトは、プロパティが読み取り専用という特性があり、書き換えることができないためnewが必要なくなっている。
