ホームページ >ウェブフロントエンド >jsチュートリアル >jsの選択と転送ナビゲーションメニューのサンプルコード_javascriptスキル
jsの選択と転送ナビゲーションメニューのサンプルコード_javascriptスキル
- WBOYオリジナル
- 2016-05-16 16:39:191207ブラウズ
HTML インターフェースを実装する
<!DOCTYPE html> <html> <head> <title>Select and Go Navigation</title> <script src="script01.js"></script> <link rel="stylesheet" href="script01.css" rel="external nofollow" > </head> <body> <form action="gotoLocation.cgi" class="centered"> <select id="newLocation"> <option selected>Select a topic</option> <option value="script06.html">Cross-checking fields</option> <option value="script07.html">Working with radio buttons</option> <option value="script08.html">Setting one field with another</option> <option value="script09.html">Validating Zip codes</option> <option value="script10.html">Validating email addresses</option> </select> <noscript> <input type="submit" value="Go There!"> </noscript> </form> </body> </html>
メニュー ナビゲーションを実装する
window.onload = initForm;
window.onunload = function() {};
function initForm() {
document.getElementById("newLocation").selectedIndex = 0;
document.getElementById("newLocation").onchange = jumpPage;
}
function jumpPage() {
var newLoc = document.getElementById ("newLocation");
var newPage = newLoc.options [newLoc.selectedIndex].value;
if (newPage != "") {
window.location = newPage;
}
}
以下はソースコード解析です
1.
window.onload = initForm;
window.onunload = function() {};
ウィンドウがロードされると、initForm() 関数が呼び出されます。次の行は、一部のブラウザの奇妙な動作に対処するための回避策であるため、説明が必要です。
ウィンドウがアンロードされるとき (つまり、ウィンドウが閉じられるか、ブラウザが別の URL に移動するとき)、匿名関数、つまり名前のない関数を呼び出します。この例では、関数には名前がないだけでなく、何も行いません。この関数が提供されるのは、onunload を何らかの値に設定する必要があるためです。そうしないと、ブラウザの [戻る] ボタンをクリックしたときに、ページが一部のブラウザ (Firefox や Safari など) にキャッシュされるため、onload イベントがトリガーされません。 onunload に何も実行させるとページがキャッシュされなくなるため、ユーザーがバックオフすると onload イベントが発生します。
匿名とは、関数と () の間に名前がないことを意味します。これは、onunload をトリガーしながら何も行わせない最も簡単な方法です。他の関数と同様に、中括弧には関数の内容が含まれます。この関数は何も行わないため、ここの中括弧は空です。
2.
document.getElementById("newLocation").selectedIndex = 0;
document.getElementById("newLocation").onchange = JumpPage;
initForm() 関数の最初の行は、HTML ページ上のメニュー (その ID は newLocation) を取得し、その selectedIndex プロパティを 0 に設定します。これにより、トピックの選択が表示されます。
2 行目は、メニュー選択が変更されたときに、jumpPage() 関数を呼び出すようにスクリプトに指示します。
3.
var newLoc = document.getElementById("newLocation");
JumpPage() 関数では、newLoc 変数が訪問者がメニューで選択した値を探します。
4.
var newPage = newLoc.options[newLoc.selectedIndex].value;
角括弧内のコードから始めて、外側に向かって進めていきます。 newLoc.selectedIndex は 0 ～ 5 の数値です (
が 6 つあるため)
メニューオプション。 JavaScript の番号付けは多くの場合 0 から始まることに注意してください)。この番号を取得したら、対応するメニュー項目を取得します
の値、これはジャンプ先の Web ページの名前です。次に、結果を変数 newPage に代入します。
5.
if (newPage != "") {
window.location = newPage;
この条件ステートメントは、最初に newPage が空でないかどうかをチェックします。言い換えれば、newPage に値がある場合、ウィンドウを
に移動させます。
選択したメニュー項目で指定された URL。