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

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

ユーザ用ツール

サイト用ツール


ref_html_js

差分

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

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

両方とも前のリビジョン 前のリビジョン
次のリビジョン
前のリビジョン
ref_html_js [2025/03/12 23:10]
klab
ref_html_js [2025/03/14 11:37] (現在)
klab
ライン 49: ライン 49:
  
 <​code>​ <​code>​
- ​段落=<​p></​p>​。 + ​段落=<​p>​テキスト</​p>​。 
- ​段落!"​id1" ​id+ ​段落!"​id1" ​識別子
 </​code>​ </​code>​
     * (例)属性の値を取得します。     * (例)属性の値を取得します。
ライン 56: ライン 56:
 <​code>​ <​code>​
  ​段落=<​p id="​id1"></​p>​。  ​段落=<​p id="​id1"></​p>​。
- <​span></​span>​!(段落!id?​)テキスト。+ <​span></​span>​!(段落!識別子?​)テキスト。
 </​code>​ </​code>​
  
ライン 83: ライン 83:
  
 <​code>​ <​code>​
- ​チェックボックス=<​input type="​checkbox"​ value="​aaa">​。+ ​チェックボックス=<​input type="​checkbox"​ value="​checked">​。
 </​code>​ </​code>​
     * (例)スライダーを作成します。     * (例)スライダーを作成します。
ライン 98: ライン 98:
  
 <​code>​ <​code>​
- ​画像=<​img src="​画像ファイルのURL"​ alt="きつねアイコン" class="​pet-icon">​。+ ​画像=<​img src="​画像ファイルのURL"​ alt="画像説明" class="​image">​。
 </​code>​ </​code>​
     * (例)クラス名を指定します。     * (例)クラス名を指定します。
  
 <​code>​ <​code>​
- 投票数=<div class="​vote-count" id="fox-votes"></​div>​。+ コンテナ=<div class="​container" id="container1"></​div>​。
 </​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>​
 +    * 動作は「動作設定」メソッドを使用することでも定義することができます。
  
-  ​* **innerHTML** : HTMLタグの内部コンテンツを設定・取得します。テキストだけでなくHTMLタグを含む内容も設定できます。+<​code>​ 
 + ​送信ボタン=<​button>​送信</​button>​。 
 + ​送信ボタン!「 
 +  <​span></​span>​!"​ボタンが押されました"​ テキスト。 
 + 」 動作設定。 
 +</​code>​ 
 + 
 + 
 + 
 +/​*  ​* **innerHTML** : HTMLタグの内部コンテンツを設定・取得します。テキストだけでなくHTMLタグを含む内容も設定できます。
     * (例)innerHTML属性に文字列を設定します。     * (例)innerHTML属性に文字列を設定します。
  
ライン 265: ライン 275:
  ​」。  ​」。
 </​code>​ </​code>​
 +*/
  
 ## idセレクタによる要素の取得 ## idセレクタによる要素の取得
ライン 282: ライン 293:
 <​code>​ <​code>​
  ​入力欄=<​input>​。  ​入力欄=<​input>​。
- ラベル!(入力欄!値?)作る+ <​span></​span>​!(入力欄!値?)テキスト
 </​code>​ </​code>​
  
ライン 293: ライン 304:
 </​code>​ </​code>​
  
 +/*
   * **value** : フォーム要素の値を取得・設定するための属性です。   * **value** : フォーム要素の値を取得・設定するための属性です。
     * (例)入力欄の値を取得します。     * (例)入力欄の値を取得します。
ライン 319: ライン 331:
  ​結果:テキスト=スライダー:value。  ​結果:テキスト=スライダー:value。
 </​code>​ </​code>​
 +*/
  
 ## アラートを表示する ## アラートを表示する
ライン 453: ライン 466:
 <​code>​ <​code>​
  ​ボタン=<​button>​クリック</​button>​。  ​ボタン=<​button>​クリック</​button>​。
- ​ボタン:動作=「ラベル!"​ボタンがクリックされました" ​作る」。+ ​ボタン:動作=「<​span></​span>​!"​ボタンがクリックされました" ​テキスト」。
 </​code>​ </​code>​
  
ライン 460: ライン 473:
  
 <​code>​ <​code>​
- <​style>​ 
- ​iframe { width: 100%; height: 95%; } 
- </​style>​。 
  ​フレーム=<​iframe></​iframe>​。  ​フレーム=<​iframe></​iframe>​。
- ​フレーム:src="​https://​php.dolittle.cc/"。 + ​フレーム"​https://​example.com/" ​
- ​削除ボタン=<​button>​消す</​button>​。 +
- ​削除ボタン:​動作=「 +
-  フレム!remove。 +
- 」+
 </​code>​ </​code>​
  
ライン 484: ライン 490:
  
 <​code>​ <​code>​
- ​テキスト=<​span></​span>​!("​強調"​)テキスト。+ ​テキスト=<​span></​span>​!("​こんにちは"​)テキスト。
 </​code>​ </​code>​
  
ライン 498: ライン 504:
  
 <​code>​ <​code>​
- ​タイトル=<​h1>​大阪電気通信大学</​h1>​。 + ​タイトル=<​h1>​タイトル</​h1>​。 
- ​見出し=<​h2>​学部</​h2>​。+ ​見出し=<​h2>​見出し</​h2>​。
 </​code>​ </​code>​
  
ライン 506: ライン 512:
  
 <​code>​ <​code>​
- ​画像=<​img ​src="​https://​1.bp.blogspot.com/-n3Ub8R4fZiM/​VpjBrFU1A0I/​AAAAAAAA26Y/​rwZbSFLaSLc/​s180-c/​bg_school.jpg">+ ​画像=<​img>。 
 + ​画像!"​https://​example.com/image.jpg" ​ソース
 </​code>​ </​code>​
     * (例)代替テキストとクラスを指定した画像を表示します。     * (例)代替テキストとクラスを指定した画像を表示します。
  
 <​code>​ <​code>​
- ​画像=<​img ​src="画像ファイルのURL" ​alt="きつねアイコン" ​class="pet-icon">+ ​画像=<​img>。 
 + 画像"example.com/​image.jpg" ​ソース。 
 + ​画像!"​画像説明" ​代替テキスト。 
 + ​画像!"image" ​クラス
 </​code>​ </​code>​
  
ライン 519: ライン 529:
 <​code>​ <​code>​
  ​表=<​table border="​1">​  ​表=<​table border="​1">​
- <​tr>​ +  ​<​tr>​ 
- <​th>​工学部</​th>​ +   ​<​th>​工学部</​th>​ 
- <​th>​情報工学部</​th>​ +   ​<​th>​情報工学部</​th>​ 
- </​tr>​ +  </​tr>​ 
- <​tr>​ +  <​tr>​ 
- <​td>​電気電子工学科</​td>​ +   ​<​td>​電気電子工学科</​td>​ 
- <​td>​情報工学科</​td>​ +   ​<​td>​情報工学科</​td>​ 
- </​tr>​+  </tr>
  </​table>​。  </​table>​。
 </​code>​ </​code>​
ライン 534: ライン 544:
  
 <​code>​ <​code>​
- ​リンク=<​a ​href="​https://​www.city.neyagawa.osaka.jp/​index.html">​寝屋川市</​a>​+ ​リンク=<​a>​リンク</​a>​。 
 + ​リンク!"​https://​example.com" ​リンク先
 </​code>​ </​code>​
  
ライン 541: ライン 552:
  
 <​code>​ <​code>​
- <​span>​あいことば:</span>。 + <​span>​テキスト</​span>​。
- ​あいことば=<​input>。+
  <​br>​。  <​br>​。
- <​span>​名前:</​span>​。+ <​span>​次の行</​span>​。
 </​code>​ </​code>​
  
ライン 551: ライン 561:
  
 <​code>​ <​code>​
- <​h1>​ショッピングサイト</​h1>​。+ <​h1>​ドリルリファレンス</​h1>​。
  <​hr/>​。  <​hr/>​。
 </​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