解説
HTMLにてプルダウンメニューを作成していきます。<form>にはid属性の「form」、<select>にはname属性「select」をつけます。また各<option>の属性には、それぞれの移動先ファイル名を入れています。プルダウンメニューの場合は、<select>のname属性と選択された<option>のvalue属性がセットになっており、サーバーに送信されます。
「 document.getElementById(‘form’).select.onchange = function(){～ 」→ onchangeイベントは、フォームに入力された内容が変わったときに発生します。今回のプルダウンメニューであれば選択項目が変わったときとなります。またプルダウンメニューのonchageイベントは<select>に発生しますので、selectを取得しています。
「 location.href = document.getElementById(‘form’).select.value;」 → ここでは<select>のvalueを取得しています。<select>にはvalueをつけていませんが、プルダウンメニューの場合は、選択されている<option>のvalue属性を調べるために、その親要素である<select>のプロパティを読み取ります。
locationオブジェクトのhrefプロパティは、表示しているページのURLを表します。locationオブジェクトはURLを調べたり、閲覧履歴を管理したりする機能があります。
ここまでの実装結果
プルダウンメニューを操作すると、すぐにページが移動します。しかし、一度英語ページや中国語ページに行って、日本語ページに戻ろうとすると戻れません。また、英語ページなのに「日本語」や中国語ページなのに「日本語」となっており、見た目もよくありません。この問題を解決していきます。
まず、今どの言語のページが表示されているかを判別できるように、それぞれのHTMLファイルの<html>タグにlang属性を追加します。
続いて次のようなプログラムを追加します。
解説
「 var lang = document.querySelector(‘html’).lang;」→ 変数langを定義して、そこにquerySelectorで取得した<html>～</html>のなかのlang属性の値を代入します。
次に変数optを定義して、続くif文でその変数optにデータを代入しています。
例えば、英語ページが開いているとき、変数langには「en」が保存されています。ということはif文がtrueになります。
ですので、変数optには「 <option value=”英語のページ.html”>English</option>」が代入されます。そして、ifの最後に「 opt.selected = true;」として変数optに代入されている要素にselected属性を追加しています。HTMLタグにブール属性(selected属性、checked属性など)を追加するには、その属性にtrueを代入します。逆にブール属性を削除するときは、falseを代入します。
ブール属性とは「その属性があれば有効、なければ無効」となるものです。例えばチェックボックスの場合、checked属性があれば、初めからチェックがついた状態で表示されます。
これで英語ページでは「English」が、中国語ページでは「中文」と表示されるようになりました。また日本語ページにも移動できるようになりました。
この本から引用、参考にして学び、完成させることができました。しかし、ここではプログラミング初心者の私が詳しく解説することは、おこがましく、難しく出来ません（ToT）
その点、この本では丁寧な解説が載っていますので、解説とともにコードを書き、完成させればより深く学ぶことができます(^.^)、実際、初心者の私でもわかりやすかったです。身に付け消えないスキルが3,000円弱ならコスパよく、買っておいてよかったと満足してます。
わからないことはプロフェッショナルから学ぶのが一番
キャリアアップに必要なスキルを取得しよう。
オンラインで受講ができるスクールですので、全国どこからでも。
