JavaScript勉強会

JavaScriptの学習日記

5.2 プルダウンメニューで指定ページへ　《URLの操作、ブール属性の設定》　【JavaScript超入門】

JavaScript 読書メモ

JavaScriptの学習メモ。

今日は『確かな力が身につくJavaScript「超」入門』の第５章を読んでみます。

 

jsstudy.hatenablog.com

 

 

5.2 プルダウンメニューで指定ページへ

(p.200)

別のページに移動するためにURLを書き換えること。

HTMLの操作で、フォーム関連のタグでよく使われるブール属性の設定や、id属性のないHTML要素を取得する手段を紹介します。

 

日本語ページ、英語ページ、中国語ページを用意して、プルダウンメニューで選んだページに移動できるようにします。

 

サンプルコード

  1. index.html　（日本語ページ）
  2. index-en.html　（英語ページ）
  3. index-zh.html　（中国語ページ）
  4. script.js　（外部JavaScriptファイル）

の４つのファイルを作ります。

内容は、それぞれ以下のようにします。

 

(1)「index.html」というファイルを作り、以下の内容を記述します。

<!doctype html>
<html lang="ja">
<head>
   <meta charset="UTF-8">
   <title>5-02_location</title>
</head>
<body>
    <h1>プルダウンメニューで指定ページへ</h1>
    <h2>最初に選択されている項目を切り替える</h2>
    <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>
    <script src="script.js"></script>
</body>
</html>

 

(2)「index-en.html」というファイルを作り、以下の内容を記述します。

<!doctype html>
<html lang="en">
<head>
   <meta charset="UTF-8">
   <title>5-02_location</title>
</head>
<body>
    <h1>English Page</h1>
    <h2>最初に選択されている項目を切り替える</h2>
    <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>English Page</h2>
    <script src="script.js"></script>
</body>
</html>

 

(3)「index-zh.html」というファイルを作り、以下の内容を記述します。 

<!doctype html>
<html lang="zh">
<head>
   <meta charset="UTF-8">
   <title>5-02_location</title>
</head>
<body>
    <h1>Chinese Page</h1>
    <h2>最初に選択されている項目を切り替える</h2>
    <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>
    <script src="script.js"></script>
</body>
</html>

 

(4)「script.js」というファイルを作り、以下の内容を記述します。  

var lang = document.querySelector('html').lang;

var opt;
if (lang === 'ja') {
    opt = document.querySelector('option[value="index.html"]');
} else if (lang === 'en') {
    opt = document.querySelector('option[value="index-en.html"]');
} else if (lang === 'zh') {
    opt = document.querySelector('option[value="index-zh.html"]');
}
opt.selected = true;

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

 

実行結果

「index.html」をChromeで開き、プルダウンメニューで「日本語」「English」「中文」を切り替えてみます。

 

「index.html」を開いたところ。

f:id:jsstudy:20170513150424p:plain

 

プルダウンメニューで言語を選択します。

f:id:jsstudy:20170513150437p:plain

 

「English」を選ぶと、英語ページに移動できました。

f:id:jsstudy:20170513150446p:plain

 

「中文」を選ぶと、中国語ページに移動できました。

f:id:jsstudy:20170513150457p:plain

 

プルダウンメニューを選んで、ページを移動することができました。 

それでは、「script.js」の内容を順に見ていきましょう！

 

querySelectorメソッド

(p.207)

今回の実習では、documentオブジェクトのquerySelectorメソッドを初めて使用しました。

このメソッドは、()内に書かれた「セレクタ」にマッチする要素を取得します。

セレクタとは、CSSのセレクタです。

つまり、JavaScriptで要素を取得するのに、CSSのセレクタが使えるのです。

これは簡単で便利そうですね。

 

書式：CSSセレクタで要素を取得する

document.querySelector('CSSセレクタ')

 

querySelectorメソッドには、CSS3のすべてのセレクタが使えます。

「よく知らないなあ」という方は、ネットで「CSS3 セレクタ」などとして検索してみてください。

 

querySelectorメソッドの使用例

サンプルコードの「script.js」を見てみましょう。

 

var lang = document.querySelector('html').lang;

このquerySelectorメソッドの()内のパラメータは'html'ですが、これはHTMLの<html>～</html>を取得します。

CSSでいうタイプセレクタですね。

そのタグ名を持つ要素が取得できます。

変数langを定義して、そこに<html>要素のlang属性の値を代入します。

 

日本語ページ（index.html）を開いているときには、

<html lang="ja">

という部分の「ja」が、変数langに入ります。

 

opt = document.querySelector('option[value="index.html"]');

これは、<option>タグのうち、value属性が"index.html"であるものにマッチします。

つまり、HTMLの「<option value="index.html">日本語</option>」を取得します。

このoption[value="index.html"]というセレクタは、CSSでは属性セレクタと呼ばれています。

セレクタが[○○="△△"]のとき、「○○属性の値が△△」の要素にマッチします。

日本語ページ（index.html）を開いているときには、変数optには「<option value="index.html">日本語</option>」が代入されます。

 

（CSSの属性セレクタの例）

// CSSではこう書いて<option value="index.html">を指定する
option[value="index.html"] {
    // CSSの内容
}

 

CSSセレクターとは？

developer.mozilla.org

 

概要

与えられた CSS セレクタにマッチする文書中の最初の要素（※深さ優先の先行順走査によるもの）を返します。

 

構文

element = document.querySelector( selectors );
  • element は element オブジェクトを表します。
  • selectors はマッチさせたい 1 つ以上のセレクタを表します。

 

例

次の例は、クラスに "myClass" を持つ要素の内、最初のものを返します。

var el = document.querySelector(".myClass");

 

jsstudy.hatenablog.com

 

 

DOMとは？

「DOM」という仕組みを使って、JavaScriptからブラウザーのHTMLを操作（作成・取得・更新・削除）ができるようになっています。

 

jsstudy.hatenablog.com

 

  • DOMは、「Document Object Model」の略
  • DOMは、HTML文書をツリー構造にしたもの
  • DOMは、JavaScriptからアクセスできるAPI（HTMLを操作する仕組み）

 

querySelector()メソッドで、CSSセレクターを指定すると、DOMの中を検索して、一番最初に該当した要素だけを返してくれるんですね。

（該当した要素の全てを取得する場合には、querySelectorAll()メソッドを使います。）

 

HTMLタグのブール属性の変更

(p.210)

opt.selected = true;

変数optに代入されている要素にselected属性を追加しています。

HTML打具にブール属性（selected属性、checked属性など）を追加するには、その属性にtrueを代入します。

逆にブール属性を削除するときは、trueの代わりにfalseを代入します。

 

（例）HTMLタグのブール属性の変更

<option value="index.html">日本語</option>

が

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

に変わります。

 

ブール属性とは？

(p.207)

HTMLタグの属性のうち、selectedやcheckedなど、「その属性があれば有効、なければ無効」になるものを「ブール属性（またはブーリアン属性）」と呼びます。

属性の取りうる値が「有効」か「無効」の2種類しかないのでそう呼ばれています。

たとえばチェックボックスの場合、checked属性があれば、初めからチェックがついた状態で表示されるようになります。

 

<input type="checkbox" checked>
<input type="checkbox">

1行目の「checked」のように、その属性があれば有効で、なければ無効という属性を「ブール属性」というんですね。

 

（その他、HTMLタグの属性）

developer.mozilla.org

 

プルダウンメニューでonchangeイベントが発生するタイミング

(p.210)

プルダウンメニューでonchangeイベントが発生するのは、いまと違う<option>が選択されたときだけです。

プルダウンメニューを操作しただけで、必ずonchangeイベントが発生するわけではありません。

 

イベントが発生するタイミングをまとめた一覧表とかあるのでしょうか？

イベントハンドラ | JavaScript プログラミング解説

↑DOMイベントの「イベントハンドラ 発生状況」というまとめがありました。

 

別ページのジャンプ

別のページにジャンプするには、locationオブジェクトのhrefプロパティーを変更すればOKなんですね。

location.href = document.getElementById('form').select.value;

 

(p.203)

locationオブジェクトのhrefプロパティは、表示しているページのURLを表します。

ブラウザはURLが変更されると、即座に新しいページを表示しようとします。

そのため、hrefプロパティを変更すると、すぐに次のページに移動するのです。

locationオブジェクトは、windowオブジェクトなどと同じく、ブラウザに初めから組み込まれているオブジェクトのひとつです。

URLを調べたり、閲覧履歴を管理したりする機能があります。

 

書式：URLを書き換える（新しいURLを指定する）

location.href = 新しいURL

 

まとめ

プルダウンメニューで別ページをジャンプするには、

  • 「onchange」というDOMイベントの発火を利用する
  • locationオブジェクトのhrefプロパティーで、別ページのURLを指定する

という仕組みでした。

 

さらに、ページやプルダウンメニューの選択肢を管理するために、

  • querySelectorメソッドの利用
  • ブール属性の変更

を併用すればOKでした。

 

 

確かな力が身につくJavaScript「超」入門 (確かな力が身につく「超」入門シリーズ)

確かな力が身につくJavaScript「超」入門 (確かな力が身につく「超」入門シリーズ)