♠ JavaScriptとは・・・
Webページに動的な処理をさせるスクリプト言語。
ブラウザは、Javascriptソースを直接解釈し、スクリプトを実行。
例：更新日の自動表示 >> e-Words様
▼
◆ Javascriptによるリンク
>> テキストリンク、画像リンク、フォームボタン（3Dボタン）リンク
例えば、FORMタグを使うと・・・
・・・3Dボタンになります。
3Dボタンリンクは、ブラウザの「戻る」「進む」「更新」等と同様の効果があります。
▼
「JavaScript文法による履歴の移動」を管理人なりに調べてみました。
調査結果は次のとおりです。
HTML文書内<head>の中にJavaScript宣言は不要です。
■基本文型
javascript:history.back() 一つ前に戻る
javascript:history.go(-2) マイナスの数値分だけ戻る
javascript:history.forward() 一つ先に進む
▲ forward()は、go(1)もOK
javascript:history.go(2) プラスの数値分だけ進む
javascript:close() ページを閉じる
javascript:location.reload() 更新 reload()は、go(0)もOK
javascript:location.href='TOPページのファイル名' トップに戻る
▼
◆例１．テキストリンク
>> 一つ前に戻る 一つ先に進む 更新（再読込）
◇テキストリンクのソース表示
<A HREF="javascript:history.back()">一つ前に戻る</A>
<A HREF="javascript:history.forward()">一つ先に進む</A>
<A HREF="javascript:location.reload()">更新（再読込）</A>
◆例２．画像リンク
>> 
注：「モドル」、「ホーム」、「ススム」の画像は<シンプレスト様（サイト閉鎖）のPNG素材(画像)〜拝借
◇画像リンクのソース表示
□モドル
<A HREF="javascript:history.back()">
<IMG SRC="bu_ba3.png" WIDTH="40" HEIGHT="20"
ALT="モドル"></A>
□ホーム
<A HREF="javascript:location.href=' TOPページのファイル名
・・・当サイトはindex.html ' ">
<IMG SRC="bu_ho3.png" WIDTH="40" HEIGHT="20"
ALT="ホーム"></A>
□ススム
<A HREF="javascript:history.foward()">
<IMG SRC="bu_su3.png" WIDTH="40" HEIGHT="20"
ALT="ススム"></A>
◆例３．フォームボタンリンク
通常、FORMタグは、メールやアンケート等を入力するフィールドと、そのデータの送信方法を指定するinput typeを
<FORM>〜</FORM>タグ内に記述します。
送信用のinput type="submit"を"button"に置き換え、JavaScript文法を記述すると、フォームボタンリンクになります。
>> ホームページを小粋に様 ボタンを作るタグ
FORMタグに"ACTION属性"は、必須属性 >> ACTION属性
◇フォームボタンリンクのソース表示
□←BACK
<form action="destination_url" method="get">
<input type="button" value="←BACK" onClick="javascript:history.back()"></form>
□HOME
<form action="destination_url" method="get">
<input type="button" value="HOME" onClick="javascript:location.href=' TOPページのファイル名・・・当サイトはindex.html ' ">
</form>
□NEXT→
<form action="destination_url" method="get">
<input type="button" value="NEXT→" onClick="javascript:history.foward()"></form>
◇作例のソース表示中"destination_url"について
destinationとは[目的地]の意
当サイトの場合 destination_url は http://www14.plala.or.jp/hrm/
▲
データ送信フォームとフォームボタンリンクの相違点
▼
◆データ送信フォームの例：e-Word様「IT用語検索
◆一般的なデータ送信タイプのソース例
<form action="異動先URL" method="get">
<input type="text" name="フィールド名">
<input type="submit" value="検索"></form>
ソース例の
<input type="text" name="フィールド名"> は入力フィールド、
<input type="submit" value="検索"> は検索ボタンになります。
◆FORMタグ＋JavaScript文法によるフォームボタンの例
◇フォームボタンのソース表示
<form action="destination_url" method="get">
<input type="button" value="更新" onClick="javascript:location.reload()">
</form>
HTML文書内にJavascriptを使用した「履歴を戻る・進む・更新」等の文法があると"AnotherHTML-lint検証"は、次のようなメッセージを表示しますが、減点対象ではありません。
<A>のHREF属性のURIに指定されているスキム'javascript'の利用は薦められていません。
▼
◆FORMタグなし、JavaScript文法なしの３Dボタン
▼ ボタンの幅を指定
◇ボタンのソース表示 ***▲作例から"ホーム"の場合***
<button type="button" onclick="location.href='index.html'" onkeypress="1" style="width:120px;">ホーム</button>
★point
button要素にtype属性を記述・・・ type="button"
onclick属性を記述し、"location.href= "を「ダブルクォーテーション」で囲みます。
この中に ' '（シングルクォーテーション）で囲んだリンク先を記述します。
例 ・・・ 'index.html'
onclick属性を記述した場合、"AnotherHTML-lint検証"では、onkeypress属性とaccesskey属性を記述するよう促されます。
・・・ onkeypress=" " accesskey=" "
必要に応じて「ボタン」の幅を調節。（高さ指定も可 heght: ;）
作例はボタンの幅指定のみ・・・ style="width:120px;"
（▲作例はインラインスタイルで記述の場合）
|
