差分

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

--- ch_html_js [2025/03/07 15:14]
klab 作成
+++ ch_html_js [2025/03/14 10:58] (現在)
klab
@@ ライン 1: / ライン 1: @@
 ## HTMLオブジェクト
-**HTMLタグ**オブジェクトは、Webページの構成要素であるHTMLタグをドリトル内で直接扱うことができるオブジェクトである。HTMLオブジェクトを使うことで、動的な画面更新が可能な双方向コンテンツを簡潔に記述できる。HTML+JavaScriptやPHPベースのCGIプログラムでは処理の混在によりプログラムの理解が難しいことがあるが、HTMLオブジェクトを使うことで可読性の高いプログラムを作成できる。
+**HTML**オブジェクトは、HTMLのタグを直接ドリトルプログラム内に記述し、Webページの要素としてそのまま扱うことができるオブジェクトである。「数値」や「文字列」と同様に扱え、動的な画面更新や双方向コンテンツの開発が容易になる。
-HTMLオブジェクトは、角括弧（<>）を使って直接記述する。次のプログラムでは、`<ul></ul>`というHTMLの順序なしリスト（unordered list）を作成している。
+HTMLオブジェクトは、角括弧（<>）で囲まれたタグを直接記述することで生成する。タグは開始タグ（<>）と終了タグ（</>）をセットで使用する。次のプログラムを実行すると、画面に「テキスト」という文字が表示される。
 <code>
- メッセージボード＝<ul></ul>。
+ 段落＝<span>テキスト</span>。
 </code>
-また、入力欄やボタンなどのフォーム要素も同様に記述できる。
+/*生成されたオブジェクトは「root:dom:タグ名」の子オブジェクトとなり、プログラム中のタグの部分は実行時には「root:dom:タグ名!"文字列"create」のように変換されて実行される。*/
+HTMLオブジェクトはメソッドやプロパティを持ち、タートルと同様に操作できる。既存のHTMLオブジェクトから新しいオブジェクトを作ることもできる。
 <code>
- 入力欄＝<input>。
+ テスト＝<span>テキスト</span>。
- 送信ボタン＝<button>送信</button>。
+ テスト！"red" 背景色。
+ テスト２＝テスト！作る。
 </code>
-HTMLオブジェクトには、それぞれの要素に応じた様々なメソッドが用意されている。例えば、リスト要素には**クリア**や**いれる**、フォーム要素には**値？**などのメソッドがある。
+HTMLオブジェクトに属性、プロパティ、CSSを設定する方法は2種類ある。
+. タグに直接記述する方法
 <code>
- メッセージボード！クリア。 // リストの内容をクリアする
+ 要素＝<span id="hoge" style="color: blue;"></span>。
- メッセージ＝<li></li>！（"こんにちは"）テキスト。 // liタグに文字列を設定
- メッセージボード！（メッセージ）いれる。 // ulタグにliタグを追加
- 入力された内容＝入力欄！値？。 // 入力欄の値を取得
 </code>
-HTMLオブジェクトを使うと、**webapi**オブジェクトと組み合わせることで、サーバとの通信を行う双方向コンテンツを簡潔に記述できる。以下は、簡単なチャットプログラムの例である。
+. メソッド呼び出しで設定する方法
+   この例ではspanタグを作り、id属性にhogeを、CSSのcolorプロパティにblueを設定している。
 <code>
- メッセージボード＝<ul></ul>。
+ 要素＝<span>テキスト</span>。
- 入力欄＝<input>。
+ 要素！"hoge" 識別子。
- 送信ボタン＝<button>送信</button>。
+ 要素！"blue" 文字色。
+</code>
- 受信_wa ＝ webapi!作る。
- 受信_wa.url ＝"read.php"。
+設定した属性やプロパティを参照するには、名前の後ろに「?」を付ける。
- メッセージ表示＝「｜メッセージ配列｜
+<code>
-  メッセージボード！クリア。
+ 要素＝<span id="hoge">テキスト</span>。
-  メッセージ配列！「｜内容｜
+ 値＝要素！識別子?。
-   メッセージ＝<li></li>！（内容）テキスト。
+</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>。
  」。
- メッセージ表示！（受信_wa！読む）実行。
+ テキスト入力＝<input type="text">。
+ テキスト入力!「
- 送信_wa ＝ webapi!作る。
+  <span></span>！（テキスト入力!値?）テキスト。
- 送信_wa.url ＝"write.php"。
+ 」 動作設定。
- 名前 ＝"ユーザー"。
- 送信ボタン：動作＝「
-  送信_wa.内容＝名前＋"："＋（入力欄！値？）。
-  送信_wa！読む。
-  メッセージ表示！（受信_wa！読む）実行。
- 」。
 </code>
-このプログラムでは、サーバ側で動作するPHPプログラム（read.phpとwrite.php）とクライアント側で動作するドリトルプログラムを組み合わせている。サーバ側のPHPプログラムは以下のようになる。
+HTMLオブジェクトは条件分岐と組み合わせて使うことで、状態に応じて異なる表示を行うことができる。
-```php
+<code>
-//掲示板にメッセージを書き込むwrite.php
+ 「条件」！ なら 「
-<?php
+  ボタン＝<button>実行</button>。
- $message = $_GET['message'] . "\n";
+ 」そうでなければ「
- file_put_contents("chat.txt", $message, FILE_APPEND);
+  <span>実行できません</span>。
-?>
+ 」実行。
+</code>
-//掲示板の書き込み一覧を取得するread.php
+HTMLのID属性を使って要素を取得するには「#」を使用する。これにより、ページ内の特定の要素に簡単にアクセスできる。
-<?php
- $message = file("chat.txt");
- echo json_encode($message);
-?>
-```
-この例では、WebAPIによるサーバ側とクライアント側で処理を分離している。クライアント側のドリトルプログラムではHTMLタグを直接記述し、サーバ側のPHPプログラムはWebAPIの形でモジュール化されている。このように処理を分離することで、各処理の責任範囲が明確になり、プログラムの可読性が高くなる。
+<code>
+ <div id="output"></div>。
+ 出力＝#output。
+ 出力!"ID指定で取得した要素に内容を設定" テキスト。
+</code>
-HTMLオブジェクトは、タグの種類に応じて様々なメソッドを持つ。一般的なものとしては以下がある。
+フォーム要素には様々な種類があり、テキスト入力、選択肢、チェックボックスなどを使ってユーザーからの入力を受け付けることができる。
-- **テキスト** - タグの内容のテキストを設定する
+<code>
-- **いれる** - 子要素としてHTMLタグを追加する
+ テキスト入力＝<input type="text">。
-- **クリア** - 内容をクリアする
+ 選択肢＝<select>
-- **値？** - フォーム要素の値を取得する（input, textareaなど）
+  <option value="1">選択肢1</option>
-- **値** - フォーム要素の値を設定する
+  <option value="2">選択肢2</option>
+ </select>。
+ チェックボックス＝<input type="checkbox">。
+</code>
-また、HTMLオブジェクトはイベント処理も行える。例えば、ボタンタグには**動作**メソッドを定義することでクリック時の処理を記述できる。
+外部コンテンツを表示するには「iframe」を使うことができる。これにより、他のWebページをドリトルの画面内に埋め込むことができる。
 <code>
- 送信ボタン：動作＝「
+ フレーム＝<iframe></iframe>。
-  // ボタンがクリックされたときの処理
+ フレーム！"https://example.com/" ソース。
- 」。
 </code>
-HTMLオブジェクトを使った双方向コンテンツの開発では、クライアント側とサーバ側の処理を明確に分けることで、プログラムの構造が理解しやすくなる。クライアント側では主にユーザインターフェースと画面更新処理を記述し、サーバ側ではデータの保存や取得などの処理を記述する。これにより、プログラムの保守性や拡張性が向上する。
+ハイパーリンクを作成するには「a」タグを使う。これにより、他のページへの移動を実現できる。
+<code>
+ リンク＝<a href="https://example.com/">リンクテキスト</a>。
+</code>
+HTMLオブジェクトを使うことで、Web開発の基本的な考え方や技術を学ぶことができる。HTMLとCSSの基本を理解し、ドリトルのプログラミング機能と組み合わせることで、ボタンのクリックやフォームの送信などのイベント処理、データの表示や入力フォームの作成など、多様なWebアプリケーションの機能を実装できる。また、サーバとの通信（WebAPI）を組み合わせることで、より実践的なアプリケーションを構築することができる。
+HTMLオブジェクトはWebプログラミングの入門として最適であり、プログラミングの基本構造（変数、条件分岐、繰り返し）とHTML/CSSの基本を同時に学べる環境を提供している。

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

ユーザ用ツール

サイト用ツール

差分

ページ用ツール