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

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

ユーザ用ツール

サイト用ツール


ref_html_js

差分

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

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

次のリビジョン
前のリビジョン
ref_html_js [2025/03/07 15:53]
klab 作成
ref_html_js [2025/03/13 21:46] (現在)
klab
ライン 6: ライン 6:
  
 ## HTMLオブジェクトの基本 ## HTMLオブジェクトの基本
-  * HTMLタグは角括弧(<>​)で囲んで作成します。+  * HTMLタグは数値や文字列と同じように、角括弧(<>​)で囲んで作成します。
     * (例)順序なしリスト(ul)タグを作成します。     * (例)順序なしリスト(ul)タグを作成します。
  
ライン 24: ライン 24:
  
   * HTMLオブジェクトには、それぞれの要素に応じた様々なメソッドが用意されています。   * HTMLオブジェクトには、それぞれの要素に応じた様々なメソッドが用意されています。
 +  * 生成されたHTMLタグはオブジェクトであり、プロパティやメソッドの定義はタートルから作った「かめた」と同様に行えます。
  
 ## タグの属性設定 ## タグの属性設定
-  * HTMLタグには、属性を直接指定することがきます。+  * HTMLタグの属性、プロパティ、CSSは2つの設定方法があります。 
 +  * 1つ目は、タグに直接記述する方法です。
     * (例)右寄せを指定したpタグを作成します。     * (例)右寄せを指定したpタグを作成します。
  
ライン 42: ライン 44:
  ​段落=<​p id="​id1">​IDを持つ段落</​p>​。  ​段落=<​p id="​id1">​IDを持つ段落</​p>​。
 </​code>​ </​code>​
 +
 +  * 2つ目は、タグを生成した後にメソッド呼び出しで設定する方法です。
 +    * (例)idを設定します。
 +
 +<​code>​
 + ​段落=<​p></​p>​。
 + ​段落!"​id1"​ id。
 +</​code>​
 +    * (例)属性の値を取得します。
 +
 +<​code>​
 + ​段落=<​p id="​id1"></​p>​。
 + <​span></​span>​!(段落!id?​)テキスト。
 +</​code>​
 +
 +  * 以下は、さまざまな属性を設定する例です。
     * (例)typeを指定したリストを作成します。     * (例)typeを指定したリストを作成します。
  
ライン 65: ライン 83:
  
 <​code>​ <​code>​
- ​チェックボックス=<​input type="​checkbox"​ value="​aaa">​。+ ​チェックボックス=<​input type="​checkbox"​ value="​checked">​。
 </​code>​ </​code>​
     * (例)スライダーを作成します。     * (例)スライダーを作成します。
ライン 86: ライン 104:
 <​code>​ <​code>​
  ​投票数=<​div class="​vote-count"​ id="​fox-votes"></​div>​。  ​投票数=<​div class="​vote-count"​ id="​fox-votes"></​div>​。
-</​code>​ 
-    * (例)複数のクラス名を指定します。 
- 
-<​code>​ 
- ​ピクセル=<​div class="​pixel line-1"></​div>​。 
 </​code>​ </​code>​
  
ライン 101: ライン 114:
 </​code>​ </​code>​
  
-  * **れる** : 子要素としてHTMLタグを追加します。+  * **れる** : divやulのような、他のタグを包括するようなタグに、他のタグをchildNodeとして追加するときに使用します。
     * (例)ulタグにliタグを追加します。     * (例)ulタグにliタグを追加します。
  
ライン 107: ライン 120:
  ​メッセージボード=<​ul></​ul>​。  ​メッセージボード=<​ul></​ul>​。
  ​メッセージ=<​li></​li>​!("​こんにちは"​)テキスト。  ​メッセージ=<​li></​li>​!("​こんにちは"​)テキスト。
- ​メッセージボード!(メッセージ)れる。+ ​メッセージボード!(メッセージ)れる。
 </​code>​ </​code>​
 +    * (例)複数の要素を一度に追加します。
  
-  ​* **クリア** : 内容クリアします。+<​code>​ 
 + ​表示=<​ul></​ul>​。 
 + ​要素1=<​li>​hoge</​li>​。 
 + ​表示!(要素1)入れる。 
 + ​要素2=<​li>​fuga</​li>​。 
 + ​表示!(要素2)入れる。 
 + ​要素3=<​li>​piyo</​li>​。 
 + ​表示!(要素3)入れる。 
 +</​code>​ 
 + 
 +  ​* **クリア** : 中身すべて削除するときに使います。innerHTMLごと削除するので、childNodeもinnerTextも消えます。
     * (例)ulタグの内容をクリアします。     * (例)ulタグの内容をクリアします。
  
ライン 116: ライン 140:
  ​メッセージボード!クリア。  ​メッセージボード!クリア。
 </​code>​ </​code>​
 +
 +  * **動作** : イベントハンドラーで、このプロパティにブロックを代入しておくと、以下のイベントを検出したときに実行します。
 +    * inputのtypeが["​text",​ "​search",​ "​email",​ "​url",​ "​number",​ "​tel",​ "​password"​]の場合は、エンターキーが押されたら
 +    * inputのそれ以外は値が変更されたら(onchange)
 +    * それ以外のタグはクリックされたら
 +    * (例)ボタンがクリックされたときの処理を定義します。
 +
 +<​code>​
 + ​送信ボタン=<​button>​送信</​button>​。
 + ​送信ボタン:動作=「
 +  <​span></​span>​!"​ボタンが押されました"​ テキスト。
 + ​」。
 +</​code>​
 +    * (例)入力欄でエンターキーが押されたときの処理を定義します。
 +
 +<​code>​
 + ​入力欄=<​input type="​text">​。
 + ​入力欄:動作=「
 +  <​span></​span>​!(入力欄!値?)テキスト。
 + ​」。
 +</​code>​
 +    * (例)スライダーの値が変更されたときの処理を定義します。
 +
 +<​code>​
 + ​スライダー=<​input type="​range">​。
 + ​結果=<​p></​p>​。
 + ​スライダー:動作=「
 +  結果!(スライダー!値?) テキスト。
 + ​」。
 +</​code>​
 +    * 動作は「動作設定」メソッドを使用することでも定義することができます。
 +
 +<​code>​
 + ​送信ボタン=<​button>​送信</​button>​。
 + ​送信ボタン!「
 +  <​span></​span>​!"​ボタンが押されました"​ テキスト。
 + 」 動作設定。
 +</​code>​
 +
 +
  
   * **innerHTML** : HTMLタグの内部コンテンツを設定・取得します。テキストだけでなくHTMLタグを含む内容も設定できます。   * **innerHTML** : HTMLタグの内部コンテンツを設定・取得します。テキストだけでなくHTMLタグを含む内容も設定できます。
ライン 228: ライン 292:
 <​code>​ <​code>​
  ​入力欄=<​input>​。  ​入力欄=<​input>​。
- ラベル!(入力欄!値?)作る+ <​span></​span>​!(入力欄!値?)テキスト
 </​code>​ </​code>​
  
ライン 264: ライン 328:
  ​結果=<​p></​p>​。  ​結果=<​p></​p>​。
  ​結果:テキスト=スライダー:value。  ​結果:テキスト=スライダー:value。
-</​code>​ 
- 
-## イベント処理 
-  * HTMLオブジェクトはイベント処理も行えます。例えば、ボタンタグには**動作**メソッドを定義することでクリック時の処理を記述できます。 
-    * (例)ボタンがクリックされたときの処理を定義します。 
- 
-<​code>​ 
- ​送信ボタン=<​button>​送信</​button>​。 
- ​送信ボタン:動作=「 
-  ラベル!"​ボタンが押されました"​ 作る。 
- ​」。 
-</​code>​ 
-    * (例)divタグがクリックされたときの処理を定義します。 
- 
-<​code>​ 
- ​ピクセル=<​div class="​pixel"></​div>​。 
- ​ピクセル:動作=「 
-  ピクセル:​element:​style:​backgroundColor="​red"​。 
- ​」。 
-</​code>​ 
-    * (例)スライダーの値が変更されたときの処理を定義します。 
- 
-<​code>​ 
- ​スライダー=<​input type="​range">​。 
- ​結果=<​p></​p>​。 
- ​スライダー:動作=「 
-  結果:テキスト=スライダー:value。 
- ​」。 
-</​code>​ 
- 
-## 条件分岐による表示切り替え 
-  * 条件分岐を使って、表示するHTMLタグを動的に切り替えることができます。 
-    * (例)貸出状況に応じてボタンの表示を切り替えます。 
- 
-<​code>​ 
- ​貸出状況表示:作る=「|id title author status| 
-  sp=<​span></​span>​。 
-  sp:テキスト=title+"​-"​+author+"​:"​。 
-  「status == "​available"​」! なら 「 
-   ​Button=<​button>​借りる</​button>​。 
-   ​Button:​動作=「 
-    // ボタンを押したときの処理 
-   ​」。 
-  」そうでなければ「 
-   <​span>​貸出済み</​span>​。 
-  」実行。 
-  <​br>​。 
-  自分。 
- ​」。 
-</​code>​ 
-    * (例)予約状況に応じてボタンの表示を切り替えます。 
- 
-<​code>​ 
- ​空き状況表示:作る=「|date time room status| 
-  sp=<​span></​span>​。 
-  sp:テキスト=room+"​-"​+time+"​:"​。 
-  「status == "​空き"​」! なら 「 
-   ​Button=<​button>​予約</​button>​。 
-   ​Button:​動作=「 
-    // 予約処理 
-   ​」。 
-  」そうでなければ「 
-   <​span>​予約済み</​span>​。 
-  」実行。 
-  <​br>​。 
-  自分。 
- ​」。 
 </​code>​ </​code>​
  
ライン 360: ライン 357:
   メッセージ配列!「|内容|   メッセージ配列!「|内容|
    ​メッセージ=<​li></​li>​!(内容)テキスト。    ​メッセージ=<​li></​li>​!(内容)テキスト。
-   ​メッセージボード!(メッセージ)れる。+   ​メッセージボード!(メッセージ)れる。
   」それぞれ実行。   」それぞれ実行。
  ​」。  ​」。
ライン 395: ライン 392:
  
 ## よく使われるHTMLタグ ## よく使われるHTMLタグ
 +  * ドリトルでは多くのHTMLタグが使用できます。以下はよく使われるタグの例です。
 +
   * **ul, li** : 順序なしリストとリスト項目を表示します。   * **ul, li** : 順序なしリストとリスト項目を表示します。
     * (例)順序なしリストを作成します。     * (例)順序なしリストを作成します。
ライン 402: ライン 401:
  ​項目1=<​li></​li>​!("​項目1"​)テキスト。  ​項目1=<​li></​li>​!("​項目1"​)テキスト。
  ​項目2=<​li></​li>​!("​項目2"​)テキスト。  ​項目2=<​li></​li>​!("​項目2"​)テキスト。
- ​リスト!(項目1)れる(項目2)れる。+ ​リスト!(項目1)れる(項目2)れる。
 </​code>​ </​code>​
  
ライン 412: ライン 411:
  ​項目1=<​li></​li>​!("​項目1"​)テキスト。  ​項目1=<​li></​li>​!("​項目1"​)テキスト。
  ​項目2=<​li></​li>​!("​項目2"​)テキスト。  ​項目2=<​li></​li>​!("​項目2"​)テキスト。
- ​リスト!(項目1)れる(項目2)れる。+ ​リスト!(項目1)れる(項目2)れる。
 </​code>​ </​code>​
  
ライン 488: ライン 487:
  ​コンテナ=<​div></​div>​。  ​コンテナ=<​div></​div>​。
  ​テキスト=<​p></​p>​!("​こんにちは"​)テキスト。  ​テキスト=<​p></​p>​!("​こんにちは"​)テキスト。
- ​コンテナ!(テキスト)れる。+ ​コンテナ!(テキスト)れる。
 </​code>​ </​code>​
  
ライン 523: ライン 522:
 <​code>​ <​code>​
  ​画像=<​img src="​画像ファイルのURL"​ alt="​きつねのアイコン"​ class="​pet-icon">​。  ​画像=<​img src="​画像ファイルのURL"​ alt="​きつねのアイコン"​ class="​pet-icon">​。
-</​code>​ 
- 
-  * **figure** : 画像や図表などを囲むコンテナとして使用します。 
-    * (例)画像をfigureタグで囲みます。 
- 
-<​code>​ 
- ​図=<​figure>​ 
-  <img src="​https://​www.osakac.ac.jp/​about/​overview/​symbol3/​img/​symbol3-mark01.jpg">​ 
- </​figure>​。 
 </​code>​ </​code>​
  
ライン 634: ライン 624:
  ​送信ボタン:動作=「  ​送信ボタン:動作=「
   メッセージ=<​li></​li>​!(入力欄!値?)テキスト。   メッセージ=<​li></​li>​!(入力欄!値?)テキスト。
-  メッセージボード!(メッセージ)れる。+  メッセージボード!(メッセージ)れる。
   入力欄!(""​)値。   入力欄!(""​)値。
  ​」。  ​」。
ライン 646: ライン 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.1741330426.txt.gz · 最終更新: 2025/03/07 15:53 by klab