Blockchain code Metaverse VR

Unity×VR×Blockchain(219)

スポンサーリンク

//tips

//js理解継続

jsのプロパティデータをhtmlのテーブルに挿入する方法を確認する。

Htmlに3列のテーブルを作成するため

<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が必要なくなっている。

 

人気の記事

1

皆さん、ついに、エアラインでも、サブスクリプションが始まったのはご存じですか? まだ実験段階ですが、ANAが、定額全国住み放題サービスを提供する「ADDress」と組んで、国内線を4回まで定額利用可能 ...

2

無料でネットショップを開けるアプリとして多くの人に驚きを与えたBASE株式会社が、2019年10月25日東証マザーズに上場しました。2020年2月時点で90万店を超えるショップを抱えるまでに成長してい ...

3

2011年にサービスを開始してから圧倒的な成長率を誇るインテリア通販サイト 【FLYMEe/フライミー】を皆さんご存じでしょうか。 「自分のイメージするインテリア、本当に欲しいインテリアがどこにあるの ...

4

ついに、noteの月間アクティブユーザー数が4400万人(2020年3月時点)に到達しました。 そもそも、「note」とは、クリエイターが、文章やマンガ、写真、音声を投稿することができ、ユーザーはその ...

5

ボードゲームカフェが1日2回転で儲かるという記事をみつけたので興味を持ち、調べてみました。 まずは、需要がどれくらいあるのか、市場のようすからみていきましょう。 世界最大のボードゲーム市場はドイツで、 ...

-Blockchain, code, Metaverse, VR
-, ,

Copyright© BUSINESS HUNTER , 2023 All Rights Reserved Powered by AFFINGER5.