## HTMLオブジェクト

**HTML**オブジェクトは、HTMLのタグを直接ドリトルプログラム内に記述し、Webページの要素としてそのまま扱うことができるオブジェクトである。「数値」や「文字列」と同様に扱え、動的な画面更新や双方向コンテンツの開発が容易になる。

HTMLオブジェクトは、角括弧（<>）で囲まれたタグを直接記述することで生成する。タグは開始タグ（<>）と終了タグ（</>）をセットで使用する。次のプログラムを実行すると、画面に「テキスト」という文字が表示される。

<code>
 段落＝<span>テキスト</span>。
</code>

生成されたオブジェクトは「root:dom:タグ名」の子オブジェクトとなり、プログラム中のタグの部分は実行時には「root:dom:タグ名!"文字列"create」のように変換されて実行される。

HTMLオブジェクトはメソッドやプロパティを持ち、タートルと同様に操作できる。既存のHTMLオブジェクトから新しいオブジェクトを作ることもできる。

<code>
 テスト＝<span>テキスト</span>。
 テスト！"red" backgroundColor。
 テスト２＝テスト！作る。
</code>

HTMLオブジェクトに属性、プロパティ、CSSを設定する方法は2種類ある。

1. タグに直接記述する方法

<code>
 要素＝<span id="hoge" style="color: blue;"></span>。
</code>

2. メソッド呼び出しで設定する方法

<code>
 要素＝<span></span>。
 要素！"hoge" id。
 要素！"blue" color。
</code>

設定した属性やプロパティを参照するには、名前の後ろに「?」を付ける。

<code>
 要素＝<span id="hoge"></span>。
 値＝要素！id?。
</code>

ドリトルでは多数のHTMLタグを使用できる。一部は次の通りである：
input, textarea, p, h1, div, span, button, a, ul, ol, li, table, tr, td, img, form, iframe, canvas など。

HTMLオブジェクトの内容を変更するには「テキスト」メソッドを使う。次のプログラムを実行すると、段落に「こんにちは」という内容が設定される。

<code>
 段落＝<p></p>。
 段落！"こんにちは" テキスト。
</code>

HTMLオブジェクトの中に別のHTMLオブジェクトを入れるには「入れる」メソッドを使う。これにより、複雑な階層構造を持つHTMLを構築できる。

<code>
 リスト＝<ul></ul>。
 項目１＝<li>りんご</li>。
 項目２＝<li>みかん</li>。
 リスト！（項目１）入れる。
 リスト！（項目２）入れる。
</code>

タグの中身をすべて削除するには「クリア」メソッドを使う。これはinnerHTMLごと削除するため、子ノードもテキストも消える。

<code>
 コンテナ＝<div><p>テキスト</p></div>。
 コンテナ！クリア。
</code>

イベント処理には「動作」プロパティを定義する。要素の種類によって異なるイベントが発生する。

- inputタグ（type="text"など）：エンターキーが押されたとき
- 特定のinputタグ（checkboxなど）：値が変更されたとき（onchange）
- それ以外のタグ：クリックされたとき

<code>
 ボタン＝<button>送信</button>。
 ボタン：動作＝「
  ラベル！"ボタンがクリックされました" 作る。
 」。
 
 テキスト入力＝<input type="text">。
 テキスト入力：動作＝「
  ラベル！（テキスト入力：value）テキスト。
 」。
</code>

HTMLオブジェクトは条件分岐と組み合わせて使うことで、状態に応じて異なる表示を行うことができる。

<code>
 「条件」！ なら 「
  ボタン＝<button>実行</button>。
 」そうでなければ「
  <span>実行できません</span>。
 」実行。
</code>

HTMLのID属性を使って要素を取得するには「#」を使用する。これにより、ページ内の特定の要素に簡単にアクセスできる。

<code>
 <div id="output"></div>。
 出力＝#output。
 出力：テキスト＝"ID指定で取得した要素に内容を設定"。
</code>

フォーム要素には様々な種類があり、テキスト入力、選択肢、チェックボックスなどを使ってユーザーからの入力を受け付けることができる。

<code>
 テキスト入力＝<input type="text">。
 選択肢＝<select>
  <option value="1">選択肢1</option>
  <option value="2">選択肢2</option>
 </select>。
 チェックボックス＝<input type="checkbox">。
</code>

外部コンテンツを表示するには「iframe」を使うことができる。これにより、他のWebページをドリトルの画面内に埋め込むことができる。

<code>
 フレーム＝<iframe></iframe>。
 フレーム：src＝"https://example.com/"。
</code>

ハイパーリンクを作成するには「a」タグを使う。これにより、他のページへの移動を実現できる。

<code>
 リンク＝<a href="https://example.com/">リンクテキスト</a>。
</code>

HTMLオブジェクトを使うことで、Web開発の基本的な考え方や技術を学ぶことができる。HTMLとCSSの基本を理解し、ドリトルのプログラミング機能と組み合わせることで、ボタンのクリックやフォームの送信などのイベント処理、データの表示や入力フォームの作成など、多様なWebアプリケーションの機能を実装できる。また、サーバとの通信（WebAPI）を組み合わせることで、より実践的なアプリケーションを構築することができる。

HTMLオブジェクトはWebプログラミングの入門として最適であり、プログラミングの基本構造（変数、条件分岐、繰り返し）とHTML/CSSの基本を同時に学べる環境を提供している。