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 'mnakaj
2025-07-20T22:17:59+09:00
1753017479
-
文字と文字列
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
2022-10-10T11:44:43+09:00
1665369883
-
プラグイン/コメント
https://w.atwiki.jp/learn-javascript/pages/9.html
* コメントプラグイン
@wikiのwikiモードでは
#comment()
と入力することでコメントフォームを簡単に作成することができます。
詳しくはこちらをご覧ください。
＝＞http://www1.atwiki.jp/guide/pages/921.html#id_476878da
-----
たとえば、#comment() と入力すると以下のように表示されます。
#comment
2022-09-29T22:53:15+09:00
1664459595
-
プラグイン
https://w.atwiki.jp/learn-javascript/pages/8.html
@wikiにはいくつかの便利なプラグインがあります。
-----
#ls
-----
これ以外のプラグインについては@wikiガイドをご覧ください
=>http://atwiki.jp/guide/
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
-
プラグイン/アーカイブ
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
-
プラグイン/編集履歴
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/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/3.html
** 更新履歴
#recent(30)
&link_editmenu2(text=ここを編集)
2022-09-30T00:07:59+09:00
1664464079