//tips
仮想空間・メタバースの使い方としては、プラットホームにしたいので独立したアプリというよりは、MRグラスのブラウザとして、１単語の音声入力または、発声ではなくgpsと検索ランキングなどを元に初期状態を3次元に表現しておけることを標準とした仕様にするのが良さそう。javascriptはブラウザの拡張機能を提供する際に役に立つか。
//js深堀り
Jsでできることを深掘りしていく。
オプションボタンの選択状態が変更された場合の処理を見ていく。
これはhtmlでオプションボタンによって表示内容を切り替えたい場合に使用する。切り替え方はhtmlのタグにclass=activeかpassiveを事前につけておき、ippanまたはhojinがチェックされた時にCSSの.active{display:block;},.passive{display:none;}をうまく活用して該当クラスのもののみを表示するというもの。htmlにはどちらのクラスの表記もされている。
$(“input[name=‘target’]”).on(“change”,function(){
$(“#ippan,#hojin”).toggleClass(“active passive”)
})
これはオプションボタンであるinput[name=‘target’]箇所が変更されたら関数を実行し、toggleClassメソッドの切り替え機能でactiveのものはpassiveに、passiveのものはactiveに切り替えることができる。
先のwebへの反映はVueのv-repeatを使用してjsonのdataから抜き出して、リスト表示を行っていたが、js、jquery自体にもリスト追加能力はある。
<ul id=“fruits”>
<li>りんご</li>
<li>みかん</li>
</ul>
$(function(){
$(“#fruits”).append(“<li>パイナップル</li>”)//子リスト末尾に追加
$(“#fruits”).prepend(“<li>パパイヤ</li>”)//子リスト先頭に追加
})
とすることで
パパイヤ
りんご
みかん
パイナップル
としてhtmlのliに追加することができるようになる。
<p>こんにちは</p>
$(function(){
$(“p”)
.after(“<p>おやすみ</p>”)//後ろに兄弟要素の追加
.before(“<p>おはよう</p>”)//前に兄弟要素の追加
});
おはよう
こんにちは
おやすみ
<li>の子要素の削除には
$(function(){
$(“#fruits”).empty();
})
を使用すると全ての子要素が削除される。
<ul id=“fruits”>
</ul>
要素の中身を書き換えることもでき要素.relaceWith(“HTML要素”)を使用する。これにより、jsonの中身から最後尾のidの中身を取得して、現在反映されているhtml部分を書き換えることが可能になりそう。
<button id =“btn”>クリック</button>
<div><p>みかん<p></div>
$(function(){
$(“#btn”).on(“click”,
function(){
$(“p”).replaceWith(“<img src=‘images/orange.png’></img>”)
});
});
これで<p>みかん<p>の記載部分を<img src=‘images/orange.png’></img>に書き換えることができるのでテキスト「みかん」から画像に変更することができる。
$(function(){自体にページが読み込まれたら発動するという条件があるので、ボタンクリックではなくページが読み込まれたらの場合はon部分をなくす。
Ajaxも少し復習。ajaxが非同期通信と呼ばれるのは、通常サーバーにリクエストをするとリスポンスを待つ間はloadingをしている状態となり、待ち時間は画面を触ることができない、この状態を同期通信といい、非同期通信はリスポンスを待っている間も、画面を見ることも触ることもできる状態のことをいう。
待機画面に入らないでリスポンスを受け取ることができるという考え方にするとわかりやすい。これをajaxが実現できるのは、自身のデータの反映部分を外部のデータ保持者からアクセスして反映してもらうことができるためで、これは信頼できる相手でないと少し困ったことになることもわかる。
例えば、自身で引数jsonをとる関数Aを公開し、外部jsonデータでその関数を実行することで情報のやり取りができる。
基本的な使用法を見ていく。
<!DOCTYPE html>
<html lang=“ja”>
<head>
<meta charset=“utf-8”>
<title>JavaScript</title>
<script src =“http://ajax.googleapis.com/ajax/libs/
jquery/1.9.1/jquery.min.js”></script>
<script>
$(function(){
$(“#infoArea”).load(“info.html”};
});
</script>
</head>
<body>
<div id=“infoArea”></div>
</body>
</html>
この引用元のinfo.htmlを下記のように記載すると
<html>
…
<body>
<p>おやすみします</p>
</body>
…
</html>
これがmain.htmlのページに反映される。
ちなみ時々見かける$.getJSONはtype: "GET”,に指定した$.ajaxの省略版。下記のよう記載ができる。
$(function(){
$.getJson(“item.json”,
function(data){
for(var I=0;i<data.length;i++){
$(“#dataTable”).append(“<tr></tr>”)
.find(“tr:last”)
.append(“<td>”+data[I].code+“</td>”)
…;
}
}
);
});
