Blockchain code Metaverse VR

Unity×VR×Blockchain(221)

スポンサーリンク

//tips

//js理解

ページへプルダウンメニューを追加し、異なるメニューを選ぶと指定されたページへ遷移する流れを理解する。

メニューを3つとし、3つのHTMLファイルとjsファイルで実装していく。

HTML側ではプルダウンメニューを作成し、jsファイルを読み込むための<script>タグを追加する。

<section>
<form id=“form”>
<select name=“select”>
<option value=“index.html”>日本語</option>
<option value=“index-en.html”>English</option>
<option value=“index-zh.html”>中文</option>
</select>
</form>

<h2>日本語ページ</h2>
</section>
</footer>
<script src=“script.js”></script>
</body>

プルダウンメニューは<select>タグで記述し、その子要素に選択肢となる<option>タグを含める。フォームに必要なname属性は<select>に追加。

Nameと<option>のvalue属性がセットでサーバに送信される。

jsファイルは別途下記のように作成する。

‘use strict’

document.getElementById(‘form’).select.onchange=function()
{
location.href=document.getElementById(‘form’).select.value;
}

onchangeイベントはフォームに入力された内容が切り替わった時に発生するもので、選択肢やテキスト変更の際に適用できる。

Selectに発生するイベントなのでselect.onchangeとなっている。

また、select.valueとすることで、ここでは<option>のvalue属性が読み取ることができるようになっている。

locationオブジェクトのhrefプロパティは表示ページのURLを表すことができる。locationはwindowオブジェクトと同様にブラウザに初めから組み込まれているオブジェクトで、URLを調べたり、閲覧履歴を管理したりできる。

location.href = 新しいURL

<option value=“index.html”>にindex.htmlを入れておくだけでページを変更できるので大変便利。

現状ではページ変更後に日本語の部分に戻ってこれないので戻れるように加工する。

言語コードlang属性を利用していく。

<html lang=“ja”>
<html lang=“en”>
<html lang=“zh”>

jsにhtmlのlang属性を調べ、その言語に該当する<option>タグに選択済みであることを示すselected属性を追加させる。

今回はidがついていないので別の方法での取得を試みる。

‘use strict’

const lang = document.querySelector(‘html’).lang;

if(lang===‘ja’)
{
document.querySelector(‘option[value=“index.html”]’).selected=true;
}elseif(lang===‘en’)
{
document.querySelector(‘option[value=“index-en.html”]’).selected=true;
}elseif(lang===‘zh’)
{
document.querySelector(‘option[value=“index-zh.html”]’).selected=true;
}
document.getElementById(‘form’).select.onchange=function()
{
location.href=document.getElementById(‘form’).select.value;
}

プルダウンメニューの最初に選択されている項目がindex-en.htmlの時にはenglishにタブが変更されるようになった。

ここで用いられているdocument.querySelectorメソッドはSelector以下の()内に書かれたCSSセレクタにマッチするものを取得する。

今回はhtml、つまり、cssで言うと<html>~</html>を取得することができる。指定したタグ名の要素を取得できることになる。

document.querySelector(‘option[value=“index-zh.html”]’)の方はoptionタグのうちvalue属性がindex-zh.htmlであるもの、つまり、<option value=“index-zh.html”>中文</option>を取得する。

この書き方はCSS特有のもので指定タグの[属性=“値”]を読み取るものになる。

Htmlでfindを使用するためにcssの様式を導入したと考えればわかりやすいか。

document.querySelectorでもし複数の要素を見つけてしまった場合には最初の一つしか取得できないので注意が必要。

全てgetElementById()で対応してしまえばいいのではないかと考えたが、getElemetnsByClassName()などのクラスの取得も存在しており、jqueryとも表記が似ているためどちらかというとquerySelectorをヴベースに書いていく方が一般的なよう。

querySelector()とは?超便利なquerySelector()メソッドを使ってみる!Javascriptの勉強

また、selected=trueとなった場合<option>タグにselected追加される。

<option value=“index.html” selected>日本語</option>

このようにHTMLタグにブール属性を付与・削除することができる。

===の記載が少しまどろっっこしい場合にはswitchを使用する。

switch(lang)
{
case ‘ja’:
document.querySelector(‘option[value=“index.html”]’).selected=true;
break;

}

switch(調べる対象)
{
case 値がAの時:
Aの場合に実行するプログラム
break;

default:
上記以外の場合に実行するプログラム(必要があれば)

}

サーバ経由でのクッキー表示を実装していく、servedというサーバー(ローカルwebサーバー)が紹介されており、今回はそちらで試していく。

http://enjalot.github.io/served/

ちなみに、jQueryの基本的な使い方は

$(“操作対象とするHTMLの要素”).メソッド(“パラメータ[引数]”);

例:
$('h1').css('’color,'red');

$(window).scroll(function () {if ($(this).scrollTop() > 100) {

などのようにjsコードをシンプルにしてくれる。

人気の記事

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.