learn-javascript @ ウィキ http://w.atwiki.jp/learn-javascript/ learn-javascript @ ウィキ ja 2025-07-20T22:17:59+09:00 1753017479 画面表示 https://w.atwiki.jp/learn-javascript/pages/12.html ** 目次 #contents ** 2つのドロップダウンを連動させて一方の項目名を変更する 2つのドロップダウンを並べて配置し、片方のドロップダウンで項目を選んだら、それに連動させてもう一方のドロップダウンの項目名を入れ替える方法。以下、作成例。 #highlight(){{ <!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title></title> </head> <body> <select id="seiyu"> <option value="" selected>声優を選択してください</option> <option value="miwami">石見舞菜香</option> <option value="mnakajima">中島愛</option> <option value="rnoguchi">野口瑠璃子</option> <option value="kyasuno">安野希世乃</option> <option value="kyuki">優木かな</option> </select> <select id="chara"> <option value="" selected>－</option> </select> <script> document.getElementById('seiyu').onchange = function () { chara = document.getElementById('chara'); chara.options.length = 0; let s = []; switch (seiyu.value) { case '': s = ['－']; break; case 'miwami': s = ['ライスシャワー', '黒川あかね', 'マーシル']; break; case 'mnakajima': s = ['ランカ・リー', '宇佐美綾乃']; break; case 'rnoguchi': s = ['サクラチヨノオー', 'ポルテ']; break; case 'kyasuno': s = ['カナメ・バッカニア', 'コマさぶろう']; break; case 'kyuki': s = ['スーパークリーク']; break; default: return; break; } for (let i = 0; i < s.length; i++) { let opt = document.createElement('option'); opt.value = s[i]; opt.text = s[i]; chara.appendChild(opt); } } </script> </body> </html> }} 初期状態では右側のドロップダウンには何も表示されないが、左側のドロップダウンから項目を選ぶと、それに応じて右側のドロップダウンの項目が変わることがわかる。 |&ref(./JavaScript_ChangeDropDown1.png);|&ref(./JavaScript_ChangeDropDown2.png);|&ref(./JavaScript_ChangeDropDown3.png);| 2025-07-20T22:17:59+09:00 1753017479 メニュー https://w.atwiki.jp/learn-javascript/pages/2.html ** メニュー -[[トップページ]] -[[文字と文字列]] -[[応用]] - [[画面表示]] &link_editmenu(text=ここを編集) 2025-07-20T22:17:26+09:00 1753017446 文字と文字列 https://w.atwiki.jp/learn-javascript/pages/11.html ** 目次 #contents ** 文字列の長さを得る lengthプロパティを使う。 console.log('123'.length); console.log('ABC123あいう'.length); 出力 3 9 ** 文字列を数値に変換する Number関数か、NumberオブジェクトのpraseInt、praseFloatメソッドを使う。Number関数は、整数にも小数にも使える。praseIntメソッドは整数に、parseFloatメソッドは少数への変換に使う。 #highlight(){{ let s1 = '3'; let s2 = '1.2345'; console.log(Number(s1)); console.log(Number(s2)); console.log(Number.parseInt(s1)); console.log(Number.parseInt(s2)); console.log(Number.parseFloat(s1)); console.log(Number.parseFloat(s2)); }} 出力 #highlight(){{ 3 1.2345 3 1 3 1.2345 }} ** 文字列の前後の空白を取り除く trimメソッドを使う。 #highlight(){{ let s = " ABC "; console.log(">" + s.trim() + "<"); }} 出力 #highlight(){{ >ABC< }} #hr #comment 2022-11-25T23:58:57+09:00 1669388337 応用 https://w.atwiki.jp/learn-javascript/pages/10.html ** サーバーに置いてあるテキストファイルを自動で読み込んで表示する ブラウザーを操作している各コンピューターではなく、ウェブサーバーソフトウェアが稼働しているサーバーに置いたテキストファイルを、ブラウザーでHTMLファイルを開いたときに自動で画面に表示する方法。 以下をprint.htmlとして、ウェブサーバーソフトウェアのドキュメントフォルダーのルート（C:\Apache24\htdocsなど）に保存する。 #highlight(){{ <!DOCTYPE html> <html> <head> <meta charset="UTF-8" /> <title>JavaScript</title> </head> <body> <div id="result"></div> <script type = "text/javascript"> let result = document.getElementById('result'); let xhr = new XMLHttpRequest(); xhr.open('GET', 'text.txt', true); xhr.onreadystatechange = function() { if (xhr.readyState === 4) { if (xhr.status === 200) { result.textContent = ''; let lines = xhr.responseText.split('\n'); let line = ''; for(i = 0; i < lines.length; i++) { line += lines[i] + '<br />'; } result.insertAdjacentHTML('afterbegin', line); } else { result.textContent = '通信エラーが発生'; } } else { result.textContent = '通信中...'; } } xhr.send(null); </script> <noscript>JavaScriptが利用できません</noscript> </body> </html> }} print.htmlと同じフォルダーに、以下をtext.txtとして保存する。 #highlight(){{ ABCDEabcde 1234567890 あいうえお 阿a井i宇u江e尾o }} ブラウザーで開く。例えばアドレスバーに「http://localhost/print.html」と入力する。以下のように表示されるはず。 &image(print.png) このprint.htmlはウェブサーバーソフトウェアを介して開く必要がある。エクスプローラーでprint.htmlをダブルクリックして開いても表示はされない。 2022-10-10T11:44:43+09:00 1665369883 右メニュー https://w.atwiki.jp/learn-javascript/pages/3.html ** 更新履歴 #recent(30) &link_editmenu2(text=ここを編集) 2022-09-30T00:07:59+09:00 1664464079 トップページ https://w.atwiki.jp/learn-javascript/pages/1.html ** JavaScriptウィキへようこそ 2022-09-30T00:07:17+09:00 1664464037 プラグイン/ニュース https://w.atwiki.jp/learn-javascript/pages/4.html * ニュース @wikiのwikiモードでは #news(興味のある単語) と入力することで、あるキーワードに関連するニュース一覧を表示することができます 詳しくはこちらをご覧ください。 ＝＞http://www1.atwiki.jp/guide/pages/266.html#id_542badf7 ----- たとえば、#news(ゲーム)と入力すると以下のように表示されます。 #news(ゲーム) 2022-09-29T22:53:15+09:00 1664459595 プラグイン/編集履歴 https://w.atwiki.jp/learn-javascript/pages/5.html * 更新履歴 @wikiのwikiモードでは #recent(数字) と入力することで、wikiのページ更新履歴を表示することができます。 詳しくはこちらをご覧ください。 ＝＞http://www1.atwiki.jp/guide/pages/269.html#id_bf9eaeba ----- たとえば、#recent(20)と入力すると以下のように表示されます。 #recent(20) 2022-09-29T22:53:15+09:00 1664459595 プラグイン/アーカイブ https://w.atwiki.jp/learn-javascript/pages/6.html * アーカイブ @wikiのwikiモードでは #archive_log() と入力することで、特定のウェブページを保存しておくことができます。 詳しくはこちらをご覧ください。 ＝＞http://www1.atwiki.jp/guide/pages/921.html#id_2d967d6e ----- たとえば、#archive_log()と入力すると以下のように表示されます。 保存したいURLとサイト名を入力して"アーカイブログ"をクリックしてみよう #archive_log() 2022-09-29T22:53:15+09:00 1664459595 プラグイン/動画(Youtube) https://w.atwiki.jp/learn-javascript/pages/7.html * 動画(youtube) @wikiのwikiモードでは #video(動画のURL) と入力することで、動画を貼り付けることが出来ます。 詳しくはこちらをご覧ください。 ＝＞http://www1.atwiki.jp/guide/pages/801.html#id_30dcdc73 また動画のURLはYoutubeのURLをご利用ください。 ＝＞http://www.youtube.com/ ----- たとえば、#video(http://youtube.com/watch?v=kTV1CcS53JQ)と入力すると以下のように表示されます。 #video(http://youtube.com/watch?v=kTV1CcS53JQ) 2022-09-29T22:53:15+09:00 1664459595