ITコラム

People select

JavaScript

2017.12.18

JavaScript【 サンプル 】2 ~ 便利な記述方法

JavaScript の記述方法のサンプルを挙げてみます。
今回は、JavaScript の 便利な記述方法についてのサンプルを紹介します。

目次

 
1.元のページへ戻る
2.特定のページへ移る
3.ラジオボタンで処理を分岐
4.入力欄のフォーカスと全選択

1.元のページへ戻る

 
ブラウザの「 戻る 」機能と同じ動きをさせたい場合は、「 history.back() 」という命令を使用します。
 
 
リンクやボタンをクリックして 他のページを開いた後、元のページへ戻るリンクは、次のように記述します。

<a href="javascript:history.back()">戻る</a>

 
 
通常のリンクと同様に、img 要素を使用して 戻るリンクを作成することもできます。

<a href="javascript:history.back()"><img src="画像ファイル.jpg" /></a>

 
 
リンクではなく、戻るボタンを作成する場合も同様です。

<input type="button" value="戻る" onClick="javascript:history.back()">

 
  
リンク元のページから 新しいウィンドウを開いた場合等は、戻るページがないので この機能が使えません。
このような場合を想定して、「 閉じる 」機能も用意しておくと親切です。

戻るページがあるかどうかを判断して、「 戻る 」機能と「 閉じる 」機能を切り替えることができます。

<script type="text/javascript">
<!--

if (history.length > 1) {

    document.write("<a href='javascript:history.back()'>戻る</a>");

} else {

    document.write("<a href='javascript:self.close()'>閉じる</a>");

}

//-->
</script>

 
「 history.length 」で、履歴の数を取得することができます。
history.length が 2 以上の場合は、戻るページがあるということになります。

▲目次へ戻る

 

2.特定のページへ移る

 
トップページへのリンク等、特定のページへ遷移させたい場合は、「 document.location 」を使用して 表示するページを指定します。
 
 
リンクやボタンをクリックして 他のページを開いた後、元のページへ戻るリンクは、次のように記述します。

<input type="button" value="トップへ" onClick="document.location='index.html';">

 
上記では、input タグ内の onClick イベントに命令を直接記述していますが、ユーザー定義関数を呼び出して処理を行う場合は、次のように記述します。

<script type="text/javascript">
<!--

function goTop() {
    document.location = "index.html";
}

//-->
</script>

<input type="button" value="トップへ" onClick="goTop()">

このようにユーザー定義関数を作成しておくと、1 つの命令文を複数の場所で使用できたり、複雑な処理も記述しやすくなります。
また、仕様変更等のメンテナンス作業も効率良く行うことができます。

▲目次へ戻る

 

3.ラジオボタンで処理を分岐

 
ラジオボタンの選択内容によって処理を分岐させます。
どちらかを選択後、送信ボタンをクリックしてみて下さい。

OK 
NG  
 

 
上のサンプルのソースコードは次の通りです。

<script type="text/javascript">
<!--
function disp() {

    //ラジオボタン「 OK 」の状態を取得
    var ok = document.getElementById("rbOk");

    //okの内容がchecked(ラジオボタン「 OK 」が選択された状態)かどうかで条件分岐
    if (ok.checked) {

        alert("「 OK 」が選択されました!");

    } else {

        alert("「 NG 」が選択されました!");

    }
}
//-->
</script>

<div style="background-color : #CCC; padding : 20px;">
    <div style="display:inline-flex; align-items: center;">
        <input type="radio" id="rbOk" name="rb"> OK 
        <input type="radio" id="rbNg" name="rb" checked> NG  
        <input type="button" value="送信" onClick="disp()"> 
    </div>
</div>

 
document.getElementById メソッドで ラジオボタンの id 名を指定して、そのラジオボタンの状態を取得しています。

選択されているラジオボタンの状態は「 document.getElementById(“id名”).checked 」が「 true 」となるので、そのまま条件として使用できます。

▲目次へ戻る

 

4.入力欄のフォーカスと全選択

 
次のサンプルは、入力欄にフォーカスが当たった場合に テキストが全選択されるように動きます。
STARTボタンをクリック後、タブ( Tab キー )をクリックして、フォーカスを移動させてみて下さい。

  
 


 
上のサンプルのソースコードは次の通りです。

<script type="text/javascript">
<!--
function fStart() {
    document.getElementById("fId(0)").focus();
    document.getElementById("fId(0)").select();
}

function fNext(num) {
    // 最後の入力欄でタブキーがクリックされた場合
    if (num == 2) {
        if(event.keyCode == 13 || event.keyCode == 9 ){
            //キー入力を無効にする
            event.returnValue = false;
            //最初の入力項目にフォーカス当てる
            document.getElementById("fId(0)").focus();
            document.getElementById("fId(0)").select();
        }
    } else {
        if(window.event.keyCode == 13){
            window.event.keyCode = 9;
        }
        var str = "fId(" + (num) + ")";
        document.getElementById(str).focus();
        document.getElementById(str).select();
    }
}
//-->
</script>

<div style="background-color : #CCC;">
    <input type="button" value="START" onClick="fStart()">  
    <input type="text" id="fId(0)" value="ID" onkeydown="fNext(0)">
    <input type="text" id="fId(1)" value="PASSWORD" onkeydown="fNext(1)">
    <input type="text" id="fId(2)" value="ペットの名前" onkeydown="fNext(2)">
</div>

 
「 document.getElementById(“id名”).focus(); 」でフォーカスが当たり、「 document.getElementById(“id名”).select(); 」で 入力欄の場合は入力されたテキストが全選択されます。
大量の入力作業があるページ等で実装しておくと、親切です。

▲目次へ戻る

SHARE

最新記事

IMG_004

卒業生インタビュー

2019.08.20

【卒業生の声:渡邉さん】宮城の大学とプログラマカレッジへ通学を両立!限られた時間を有効活用し、希望するWEB系の会社へ内定。

受講スクール プログラマカレッジ 受講期間 3ヶ月間 料金 無料 就職先 某WEB系会社 プログラマカレッジ卒業生の渡邉さんにお話しをお伺いしました! 目次 新卒採用の切符を捨て、アイデアを形にできる仕事を目指す 質問が […]

続きを見る

DSC_3661

卒業生インタビュー

2019.08.16

【卒業生の声:前田さん】大学中退の未経験エンジニアが4社から内定獲得!初めての就活を成功させた秘訣とは?

受講スクール プログラマカレッジ 受講期間 3ヶ月間 料金 無料 就職先 株式会社リヴァンプ プログラマカレッジ卒業生のマエダさん(23歳)にお話しをお伺いしました! 目次 勉強に興味が持てなくて大学中退 就職できるか不 […]

続きを見る

DSC_0077

卒業生インタビュー

2019.08.08

【卒業生の声:オチアイさん】高校教師からプログラマーへ転身!最初の2ヶ月は理解に苦しむ日々。楽しめるまでに至った秘訣とは?

受講スクール プログラマカレッジ 受講期間 3ヶ月間 料金 無料 就職先 プライムソリューションズ株式会社 プログラマカレッジ卒業生のオチアイさんにお話しをお伺いしました! 目次 大学院卒業後は高校教師に そこから思い切 […]

続きを見る

無料相談する

INTERNOUS,inc. All rights reserved.