いくつものファイルに対応できるよう、土日で変更を加えた単語帳だが、かなり使えそうなので、せっかくだからソースを公開しておく。
拝借してきたコード以外は、かなり甘めのソースになっているので、辛口の方はお気に召さないかも知れないが、とにかく食べられることは間違いない。
ファイル構造は words.html と同じ場所の jsフォルダ に init.js 、body.js 、 words.js を入れるだけ。
サーバーがあればスマホで使えるけど、ローカルでも充分便利かもしれない。
なお以下のサイトのコードを利用させてもらった。盆暮れの付け届けでもしようかと考えたが、あらためて考えるとネット社会ではそういう風習はなかったことに気づき、とりあえず謝辞だけ述べさせていただくことにした。
JavaScript内から外部JavaScriptを読み込む方法
コピペで使える 超シンプル単語帳
————————- init.js
function appendScript(URL) {
var el = document.createElement(‘script’);
el.src = URL;
document.body.appendChild(el);
};
function wordsSelect(){
var choiceJS = document.getElementById(‘wordsJS’);
var words = choiceJS.value;
var wordsNames = words.split(“.”);
var wordsName = wordsNames[0]; //js/words_A_a
appendScript(words);
appendScript(“js/body.js”);
var wordsName = wordsName.slice(3);
var choice = document.getElementById( “choiceWords” ) ;
choice.textContent = wordsName;
};
————————- body.js
var words_max = (words.length)/2 – 1;
var q_counter = -1;
var qa_flag = false;
var qa_lang = false;
var eng = 0;
var jpn =1;
function switch_jn(){
if ( q_counter < 0 ) { q_counter = words_max; }
if ( q_counter > words_max) { q_counter = 0; }
if ( qa_lang ) {
document.getElementById(‘jn_q’).value = ‘英語:’;
document.getElementById(‘jn_a’).value = ‘日本語:’;
jpn = 1;
eng = 0;
} else {
document.getElementById(‘jn_q’).value = ‘日本語:’;
document.getElementById(‘jn_a’).value = ‘英語:’;
jpn = 0;
eng = 1;
}
qa_lang = !(qa_lang);
qa_view();
}
function prev_btn(){
if (!(qa_flag)) { q_counter–; }
if ( q_counter < 0 ) { q_counter = words_max; }
qa_flag = !(qa_flag);
counter_view();
qa_view();
}
function next_btn(){
if ( !(qa_flag) ) { q_counter++; }
if ( q_counter > words_max) { q_counter = 0; }
qa_flag = !(qa_flag);
counter_view();
qa_view();
}
function qa_view(){
if (jpn ==1){
document.getElementById(‘one_q’).value = words[2*q_counter ];
if ( qa_flag ) {
document.getElementById(‘one_a’).value = ”;
} else {
document.getElementById(‘one_a’).value = words[2*q_counter + 1];
}
}
if (eng ==1){
document.getElementById(‘one_q’).value = words[2*q_counter + 1];
if ( qa_flag ) {
document.getElementById(‘one_a’).value = ”;
} else {
document.getElementById(‘one_a’).value = words[2*q_counter];
}
}
}
function counter_view(){
document.getElementById(‘q_cnt’).value = q_counter + 1 + ‘/’ + (words_max + 1);
}
———————– html(全角になっているので半角に変換)
<!DOCTYPE html>
<html lang=”ja”>
<head>
<meta charset=”utf-8”>
<title>単語帳</title>
<script type=’text/javascript’ src=’js/init.js’></script>
</head>
<body>
<center>
<select id=”wordsJS”>
<option value=”js/@@@A.js”>sampleA</option>
<option value=”js/@@@B.js”>sampleB</option>
</select>
<input type=”button” value=”words” id = ”wordsSelectID” onClick=”wordsSelect()”/>
</center>
<a id=”choiceWords”>words</a>
<script>
window.onload = function () {
counter_view();
counter_view2();
};
</script>
<style>
#q_cnt, #jn_q, #jn_a {
border: none;
text-align: right;
}
#q_cnt, #jn_q, #jn_a, #one_q, #one_a {
font-size: 24px;
}
</style>
<input type=”text” readonly=”readonly” size=”3” value=”” id=”q_cnt”><br>
<input type=”text” readonly=”readonly” size=”6” value=”英語:” id=”jn_q” >
<input type=”text” readonly=”readonly” size=”20” value=”” id=”one_q”><br>
[<a href=”javascript:void(0);” onClick=”switch_jn();”> ↑↓ </a>]<br>
<input type=”text” readonly=”readonly” size=”6” value=”日本語:” id=”jn_a” >
<input type=”text” readonly=”readonly” size=”20” value=”” id=”one_a”><br>
<br>
[<a href=”javascript:void(0);” onClick=”prev_btn();”> ← </a>] [<a href=”javascript:void(0);” onClick=”next_btn();”> → </a>]<br>
</body>
</html>
———————-html にある @@@A.js
words = [
‘data1′,’data2′,’data3′,’data4’
]
—————————————–