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

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

ユーザ用ツール

サイト用ツール


ref_html_js

差分

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

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

両方とも前のリビジョン 前のリビジョン
次のリビジョン
前のリビジョン
ref_html_js [2025/03/12 23:10]
klab
ref_html_js [2025/03/13 21:46] (現在)
klab
ライン 83: ライン 83:
  
 <​code>​ <​code>​
- ​チェックボックス=<​input type="​checkbox"​ value="​aaa">​。+ ​チェックボックス=<​input type="​checkbox"​ value="​checked">​。
 </​code>​ </​code>​
     * (例)スライダーを作成します。     * (例)スライダーを作成します。
ライン 150: ライン 150:
  ​送信ボタン=<​button>​送信</​button>​。  ​送信ボタン=<​button>​送信</​button>​。
  ​送信ボタン:動作=「  ​送信ボタン:動作=「
-  ​ラベル!"​ボタンが押されました" ​作る+  ​<​span></​span>​!"​ボタンが押されました" ​テキスト
  ​」。  ​」。
 </​code>​ </​code>​
ライン 158: ライン 158:
  ​入力欄=<​input type="​text">​。  ​入力欄=<​input type="​text">​。
  ​入力欄:動作=「  ​入力欄:動作=「
-  ​ラベル!(入力欄:value作る+  ​<​span></​span>​!(入力欄!値?テキスト
  ​」。  ​」。
 </​code>​ </​code>​
ライン 167: ライン 167:
  ​結果=<​p></​p>​。  ​結果=<​p></​p>​。
  ​スライダー:動作=「  ​スライダー:動作=「
-  結果:テキスト=スライダー:value+  結果!(スライダー!値?) テキスト
  ​」。  ​」。
 </​code>​ </​code>​
 +    * 動作は「動作設定」メソッドを使用することでも定義することができます。
 +
 +<​code>​
 + ​送信ボタン=<​button>​送信</​button>​。
 + ​送信ボタン!「
 +  <​span></​span>​!"​ボタンが押されました"​ テキスト。
 + 」 動作設定。
 +</​code>​
 +
 +
  
   * **innerHTML** : HTMLタグの内部コンテンツを設定・取得します。テキストだけでなくHTMLタグを含む内容も設定できます。   * **innerHTML** : HTMLタグの内部コンテンツを設定・取得します。テキストだけでなくHTMLタグを含む内容も設定できます。
ライン 282: ライン 292:
 <​code>​ <​code>​
  ​入力欄=<​input>​。  ​入力欄=<​input>​。
- ラベル!(入力欄!値?)作る+ <​span></​span>​!(入力欄!値?)テキスト
 </​code>​ </​code>​
  
ライン 626: ライン 636:
  <​h1>​ショッピングサイト</​h1>​。  <​h1>​ショッピングサイト</​h1>​。
  <​hr>​。  <​hr>​。
- container ​= <​div></​div>​。+ コンテナ ​= <​div></​div>​。
  ​商品表示=「|商品名 価格 画像URL|  ​商品表示=「|商品名 価格 画像URL|
   商品画像=<​img class="​card-image">​。   商品画像=<​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>​ </​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