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

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

トレース:

ref_html_js

差分

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

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

--- ref_html_js [2025/03/12 23:10]
klab
+++ ref_html_js [2025/03/13 21:46] (現在)
klab
@@ ライン 83: / ライン 83: @@
 <code>
- チェックボックス＝<input type="checkbox" value="aaa">。
+ チェックボックス＝<input type="checkbox" value="checked">。
 </code>
     * （例）スライダーを作成します。
@@ ライン 150: / ライン 150: @@
  送信ボタン＝<button>送信</button>。
  送信ボタン：動作＝「
-  ラベル！"ボタンが押されました" 作る。
+  <span></span>！"ボタンが押されました" テキスト。
  」。
 </code>
@@ ライン 158: / ライン 158: @@
  入力欄＝<input type="text">。
  入力欄：動作＝「
-  ラベル！（入力欄:value）作る。
+  <span></span>！（入力欄！値？）テキスト。
  」。
 </code>
@@ ライン 167: / ライン 167: @@
  結果＝<p></p>。
  スライダー：動作＝「
-  結果：テキスト＝スライダー：value。
+  結果！(スライダー！値？) テキスト。
  」。
 </code>
+    * 動作は「動作設定」メソッドを使用することでも定義することができます。
+<code>
+ 送信ボタン＝<button>送信</button>。
+ 送信ボタン！「
+  <span></span>！"ボタンが押されました" テキスト。
+ 」 動作設定。
+</code>
   * **innerHTML** : HTMLタグの内部コンテンツを設定・取得します。テキストだけでなくHTMLタグを含む内容も設定できます。
@@ ライン 282: / ライン 292: @@
 <code>
  入力欄＝<input>。
- ラベル！（入力欄！値？）作る。
+ <span></span>！（入力欄！値？）テキスト。
 </code>
@@ ライン 626: / ライン 636: @@
  <h1>ショッピングサイト</h1>。
  <hr>。
- container = <div></div>。
+ コンテナ = <div></div>。
  商品表示=「|商品名 価格 画像URL|
   商品画像=<img class="card-image">。
-  商品画像:src=画像URL。
+  商品画像！(画像URL) ソース。
-  商品名表示=<h2></h2>。
+  商品名表示=<h2></h2>！(商品名) テキスト。
-  商品名表示:innerHTML=商品名。
+  価格表示=<p></p>！("￥" + 価格) テキスト。
-  価格表示=<p></p>。
+  コンテナ!(商品画像)(商品名表示)(価格表示)(<hr>)入れる。
-  価格表示:innerHTML="￥" + 価格。
-  container!(商品画像)(商品名表示)(価格表示)(<hr>)append。
  」。
- 商品表示！"コーヒー" 130 "https://example.com/coffee.jpg" 実行。
+ wa = webapi!作る。
+ wa:url = "shopping.php"。
+ 商品リスト = wa!読む。
+ 商品リスト！「|商品|
+  商品表示！(商品!1 読む)(商品！2 読む)(商品！3 読む)実行。
+ 」それぞれ実行。
 </code>
+  * サーバプログラム(shopping.php)
+```php
+<?php
+$list = [
+ ["coffee", 130, "https://example.com/cofee.jpg"],
+ ["tee", 100, "https://example.com/tee.jpg"]
+];
+echo(json_encode($list));
+```
 ## 実践的な例：チャットアプリケーション

ref_html_js.1741788609.txt.gz · 最終更新: 2025/03/12 23:10 by klab