差分

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

--- ref_html_js [2025/03/07 15:53]
klab 作成
+++ ref_html_js [2025/03/13 21:46] (現在)
klab
@@ ライン 6: / ライン 6: @@
 ## HTMLオブジェクトの基本
-  * HTMLタグは角括弧（<>）で囲んで作成します。
+  * HTMLタグは数値や文字列と同じように、角括弧（<>）で囲んで作成します。
     * （例）順序なしリスト(ul)タグを作成します。
@@ ライン 24: / ライン 24: @@
   * HTMLオブジェクトには、それぞれの要素に応じた様々なメソッドが用意されています。
+  * 生成されたHTMLタグはオブジェクトであり、プロパティやメソッドの定義はタートルから作った「かめた」と同様に行えます。
 ## タグの属性設定
-  * HTMLタグには、属性を直接指定することができます。
+  * HTMLタグの属性、プロパティ、CSSには2つの設定方法があります。
+  * 1つ目は、タグに直接記述する方法です。
     * （例）右寄せを指定したpタグを作成します。
@@ ライン 42: / ライン 44: @@
  段落＝<p id="id1">IDを持つ段落</p>。
 </code>
+  * 2つ目は、タグを生成した後にメソッド呼び出しで設定する方法です。
+    * （例）idを設定します。
+<code>
+ 段落＝<p></p>。
+ 段落！"id1" id。
+</code>
+    * （例）属性の値を取得します。
+<code>
+ 段落＝<p id="id1"></p>。
+ <span></span>！（段落！id?）テキスト。
+</code>
+  * 以下は、さまざまな属性を設定する例です。
     * （例）typeを指定したリストを作成します。
@@ ライン 65: / ライン 83: @@
 <code>
- チェックボックス＝<input type="checkbox" value="aaa">。
+ チェックボックス＝<input type="checkbox" value="checked">。
 </code>
     * （例）スライダーを作成します。
@@ ライン 86: / ライン 104: @@
 <code>
  投票数＝<div class="vote-count" id="fox-votes"></div>。
-</code>
-    * （例）複数のクラス名を指定します。
-<code>
- ピクセル＝<div class="pixel line-1"></div>。
 </code>
@@ ライン 101: / ライン 114: @@
 </code>
-  * **いれる** : 子要素としてHTMLタグを追加します。
+  * **入れる** : divやulのような、他のタグを包括するようなタグに、他のタグをchildNodeとして追加するときに使用します。
     * （例）ulタグにliタグを追加します。
@@ ライン 107: / ライン 120: @@
  メッセージボード＝<ul></ul>。
  メッセージ＝<li></li>！（"こんにちは"）テキスト。
- メッセージボード！（メッセージ）いれる。
+ メッセージボード！（メッセージ）入れる。
 </code>
+    * （例）複数の要素を一度に追加します。
-  * **クリア** : 内容をクリアします。
+<code>
+ 表示＝<ul></ul>。
+ 要素１＝<li>hoge</li>。
+ 表示！（要素１）入れる。
+ 要素２＝<li>fuga</li>。
+ 表示！（要素２）入れる。
+ 要素３＝<li>piyo</li>。
+ 表示！（要素３）入れる。
+</code>
+  * **クリア** : 中身をすべて削除するときに使います。innerHTMLごと削除するので、childNodeもinnerTextも消えます。
     * （例）ulタグの内容をクリアします。
@@ ライン 116: / ライン 140: @@
  メッセージボード！クリア。
 </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タグを含む内容も設定できます。
@@ ライン 228: / ライン 292: @@
 <code>
  入力欄＝<input>。
- ラベル！（入力欄！値？）作る。
+ <span></span>！（入力欄！値？）テキスト。
 </code>
@@ ライン 264: / ライン 328: @@
  結果＝<p></p>。
  結果：テキスト＝スライダー：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>
@@ ライン 360: / ライン 357: @@
   メッセージ配列！「｜内容｜
    メッセージ＝<li></li>！（内容）テキスト。
-   メッセージボード！（メッセージ）いれる。
+   メッセージボード！（メッセージ）入れる。
   」それぞれ実行。
  」。
@@ ライン 395: / ライン 392: @@
 ## よく使われるHTMLタグ
+  * ドリトルでは多くのHTMLタグが使用できます。以下はよく使われるタグの例です。
   * **ul, li** : 順序なしリストとリスト項目を表示します。
     * （例）順序なしリストを作成します。
@@ ライン 402: / ライン 401: @@
  項目1＝<li></li>！（"項目1"）テキスト。
  項目2＝<li></li>！（"項目2"）テキスト。
- リスト！（項目1）いれる（項目2）いれる。
+ リスト！（項目1）入れる（項目2）入れる。
 </code>
@@ ライン 412: / ライン 411: @@
  項目1＝<li></li>！（"項目1"）テキスト。
  項目2＝<li></li>！（"項目2"）テキスト。
- リスト！（項目1）いれる（項目2）いれる。
+ リスト！（項目1）入れる（項目2）入れる。
 </code>
@@ ライン 488: / ライン 487: @@
  コンテナ＝<div></div>。
  テキスト＝<p></p>！（"こんにちは"）テキスト。
- コンテナ！（テキスト）いれる。
+ コンテナ！（テキスト）入れる。
 </code>
@@ ライン 523: / ライン 522: @@
 <code>
  画像＝<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>
@@ ライン 634: / ライン 624: @@
  送信ボタン：動作＝「
   メッセージ＝<li></li>！（入力欄！値？）テキスト。
-  メッセージボード！（メッセージ）いれる。
+  メッセージボード！（メッセージ）入れる。
   入力欄！（""）値。
  」。
@@ ライン 646: / ライン 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));
+```
 ## 実践的な例：チャットアプリケーション

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

ユーザ用ツール

サイト用ツール

差分

ページ用ツール