
スキルアップ
2021.04.15
社会人におすすめなプログラミングスクールの条件とは?目的別25校と選び方
突然ですが、社会人に最適なプログラミングスクールの条件とは何かをご存じですか?本記事では「未経験からIT業界に就職したい」「今の職場でスキルアップしてから転職したい」という20代~30代に向けて、元エンジニアがおすすめの […]
JavaScript
2017.12.18
JavaScript の記述方法のサンプルを挙げてみます。
今回は、JavaScript の 便利な記述方法についてのサンプルを紹介します。
1.元のページへ戻る
2.特定のページへ移る
3.ラジオボタンで処理を分岐
4.入力欄のフォーカスと全選択
ブラウザの「 戻る 」機能と同じ動きをさせたい場合は、「 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 以上の場合は、戻るページがあるということになります。
トップページへのリンク等、特定のページへ遷移させたい場合は、「 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 つの命令文を複数の場所で使用できたり、複雑な処理も記述しやすくなります。
また、仕様変更等のメンテナンス作業も効率良く行うことができます。
ラジオボタンの選択内容によって処理を分岐させます。
どちらかを選択後、送信ボタンをクリックしてみて下さい。
上のサンプルのソースコードは次の通りです。
<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 」となるので、そのまま条件として使用できます。
次のサンプルは、入力欄にフォーカスが当たった場合に テキストが全選択されるように動きます。
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(); 」で 入力欄の場合は入力されたテキストが全選択されます。
大量の入力作業があるページ等で実装しておくと、親切です。
スキルアップ
2021.04.15
突然ですが、社会人に最適なプログラミングスクールの条件とは何かをご存じですか?本記事では「未経験からIT業界に就職したい」「今の職場でスキルアップしてから転職したい」という20代~30代に向けて、元エンジニアがおすすめの […]
スキルアップ
2021.04.15
Webディレクターとは、Webサイト制作や、企画、運用の現場においてリーダーの役割を担う職種です。多くの業務をこなすため大変な仕事ではありますが、その分やりがいや魅力もある仕事です。本記事では、Webディレクターの具体的 […]
スキルアップ
2021.04.14
IT業界やエンジニアという職種に対してなんとなくイメージは持っているものの、具体的にどんな仕事をしているのか詳しく知らないという方もいらっしゃるでしょう。本記事では、IT業界とはどんな業界なのかをわかりやすく解説。各業種 […]
スキルアップ
2021.04.02
IT業界未経験からITエンジニアへ転職しようとするとき、強い味方になってくれるのが資格です。IT系の資格試験には数多くの種類があり、取得することでスキルの証明が可能。本記事では、未経験者が就職を有利にするためのおすすめ資 […]
スキルアップ
2021.04.01
「プログラミングができると就活が余裕らしいけど、大学生のうちにプログラミングを学ぶメリットって何?」と考えている方に向けて、本記事では元エンジニアである筆者がこれまでの経験則をもとに、在学中にプログラミングを学習するメリ […]
スキルアップ
2021.04.01
【2021年最新】いざJava SE 11のBronze資格にチャレンジしようと思っても「申込方法が複雑すぎて難しい…」と困っている方も多いのでは?本記事では、2020年に新しくなったOracle認定Javaプログラマ試 […]
INTERNOUS,inc. All rights reserved.