//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コードをシンプルにしてくれる。
