プログラミング言語「ドリトル」

大阪電気通信大学　兼宗研究室

トレース:

ref_html_js

差分

この文書の現在のバージョンと選択したバージョンの差分を表示します。

この比較画面にリンクする

--- ref_html_js [2025/03/15 09:56]
klab [idセレクタによる要素の取得]
+++ ref_html_js [2025/03/20 16:06] (現在)
klab
@@ ライン 297: / ライン 297: @@
 ## idセレクタによる要素の取得
   * `#id` 形式を使ってHTML要素を取得できます。
-  * 現在、`#id`形式で指定できるidに`-`や
+  * 現在、`#id`形式で指定できるidには`-`などの記号を含めることができません。
     * （例）idを指定して要素を取得します。
@@ ライン 634: / ライン 634: @@
 ## 実践的な例：メッセージボード
   * 以下は、ボタンをクリックするとメッセージを追加表示するシンプルなメッセージボードの例です。
+  * 「メッセージボード」として定義したulタグに対して、あとからliタグを生成して追加します。
+  * 「送信ボタン」がクリックされたら、入力欄に記入された文字列を取得しています。
 <code>
@@ ライン 647: / ライン 649: @@
 </code>
+## 実践的な例：電卓
+  * 以下は、入力された数値をもとに計算を行う電卓アプリの例です。
+  * 「足す」ボタンがクリックされたら、入力１・入力２から値を取得して、計算結果を「結果」に表示しています。
+<code>
+<h1>電卓</h1>。
+<span>入力１：</span>。
+入力１＝<input>。
+<br>。
+<span>入力２：</span>。
+入力２＝<input>。
+<br>。
+結果＝<span></span>。
+足す＝<button>＋</button>。
+足す：動作＝「
+　　結果！（（入力１！値？）＋（入力２！値？））テキスト。
+」。
+</code>
+  * 以下は、「引く」ボタンを追加する例です。
+  * 同じように、「かける」「割る」ボタンを簡単に追加することができます。
+<code>
+引く＝<button>ー</button>。
+引く：動作＝「
+　　結果！（（入力１！値？）-（入力２！値？））テキスト。
+」。
+</code>
+## 実践的な例：くじ引き
+  * 以下は、乱数を使ったくじ引きの例です。
+  * １以上、５以下の値を生成し、１が出たときだけ「あたり」、それ以外が出たら「はずれ」を表示します。
+<code>
+<h1>くじ引き</h1>。
+ボタン＝<button>くじを引く</button>。
+結果表示＝<p></p>。
+くじ箱＝配列！"あたり" "はずれ" "はずれ" "はずれ" "はずれ" 作る。
+ボタン：動作＝「
+    結果＝くじ箱！(乱数(5)) 読む。
+    結果表示！(結果) テキスト。
+」。
+</code>

ref_html_js.1742000200.txt.gz · 最終更新: 2025/03/15 09:56 by klab