差分

このページの2つのバージョン間の差分を表示します。

--- ch_html_js [2025/03/07 15:14] – 作成 klab
+++ ch_html_js [2025/03/14 14:33] (現在) – klab
@@ 行 1: / 行 1: @@
+## HTMLオブジェクト
+**HTML**オブジェクトは、HTMLのタグを直接ドリトルプログラム内に記述し、Webページの要素としてそのまま扱うことができるオブジェクトである。「数値」や「文字列」と同様に扱え、動的な画面更新や双方向コンテンツの開発が容易になる。
+HTMLオブジェクトは、角括弧（<>）で囲まれたタグを直接記述することで生成する。タグは開始タグ（<>）と終了タグ（</>）をセットで使用する。次のプログラムを実行すると、画面に「テキスト」という文字が表示される。
+<code>
+ 段落＝<span>テキスト</span>。
+</code>
+/*生成されたオブジェクトは「root:dom:タグ名」の子オブジェクトとなり、プログラム中のタグの部分は実行時には「root:dom:タグ名!"文字列"create」のように変換されて実行される。*/
+HTMLオブジェクトはメソッドやプロパティを持ち、タートルと同様に操作できる。既存のHTMLオブジェクトから新しいオブジェクトを作ることもできる。
+<code>
+ テスト＝<span>テキスト</span>。
+ テスト！"red" 背景色。
+ テスト２＝テスト！作る。
+</code>
+HTMLオブジェクトに属性、プロパティ、CSSを設定する方法は2種類ある。
+. タグに直接記述する方法
+<code>
+ 要素＝<span id="hoge" style="color: blue;"></span>。
+</code>
+. メソッド呼び出しで設定する方法
+   この例ではspanタグを作り、id属性にhogeを、style属性のcolorプロパティにblueを設定している。
+<code>
+ 要素＝<span>テキスト</span>。
+ 要素！"hoge" 識別子。
+ 要素！"blue" 文字色。
+</code>
+設定した属性やプロパティを参照するには、名前の後ろに「?」を付ける。
+<code>
+ 要素＝<span id="hoge">テキスト</span>。
+ 値＝要素！識別子?。
+</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>。
+ ボタン：動作＝「
+  <span>ボタンがクリックされました</span>。
+ 」。
+ テキスト入力＝<input type="text">。
+ テキスト入力!「
+  <span></span>！（テキスト入力!値?）テキスト。
+ 」 動作設定。
+</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>。
+ フレーム！"https://example.com/" ソース。
+</code>
+ハイパーリンクを作成するには「a」タグを使う。これにより、他のページへの移動を実現できる。
+<code>
+ リンク＝<a href="https://example.com/">リンクテキスト</a>。
+</code>
+HTMLオブジェクトを使うことで、Web開発の基本的な考え方や技術を学ぶことができる。HTMLとCSSの基本を理解し、ドリトルのプログラミング機能と組み合わせることで、ボタンのクリックやフォームの送信などのイベント処理、データの表示や入力フォームの作成など、多様なWebアプリケーションの機能を実装できる。また、サーバとの通信（WebAPI）を組み合わせることで、より実践的なアプリケーションを構築することができる。
+HTMLオブジェクトはWebプログラミングの入門として最適であり、プログラミングの基本構造（変数、条件分岐、繰り返し）とHTML/CSSの基本を同時に学べる環境を提供している。