差分

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

--- ch_html_js [2025/03/07 16:18]
klab
+++ ch_html_js [2025/03/13 21:08] (現在)
klab
@@ ライン 1: / ライン 1: @@
 ## HTMLオブジェクト
-**HTML**オブジェクトは、HTMLのタグを直接ドリトルプログラム内に記述し、Webページの要素としてそのまま扱うことができるオブジェクトである。これにより、動的な画面更新や双方向コンテンツの開発が容易になる。
+**HTML**オブジェクトは、HTMLのタグを直接ドリトルプログラム内に記述し、Webページの要素としてそのまま扱うことができるオブジェクトである。「数値」や「文字列」と同様に扱え、動的な画面更新や双方向コンテンツの開発が容易になる。
-HTMLオブジェクトは、角括弧（<>）で囲まれたタグを直接記述することで生成する。タグは開始タグ（<>）と終了タグ（</>）をセットで使用する。次のプログラムを実行すると、画面に段落要素（p）として「テキスト」という文字が表示される。
+HTMLオブジェクトは、角括弧（<>）で囲まれたタグを直接記述することで生成する。タグは開始タグ（<>）と終了タグ（</>）をセットで使用する。次のプログラムを実行すると、画面に「テキスト」という文字が表示される。
 <code>
- 段落＝<p>テキスト</p>。
+ 段落＝<span>テキスト</span>。
 </code>
-HTMLオブジェクトの基本的な操作には、内容の変更、プロパティの設定、イベント処理の定義、階層構造の構築などがある。これらを組み合わせることで、多様なWebアプリケーションを開発できる。
+/*生成されたオブジェクトは「root:dom:タグ名」の子オブジェクトとなり、プログラム中のタグの部分は実行時には「root:dom:タグ名!"文字列"create」のように変換されて実行される。*/
-HTMLオブジェクトの内容を変更するには「テキスト」メソッドを使う。次のプログラムを実行すると、段落に「こんにちは」という内容が設定される。
+HTMLオブジェクトはメソッドやプロパティを持ち、タートルと同様に操作できる。既存のHTMLオブジェクトから新しいオブジェクトを作ることもできる。
 <code>
- 段落＝<p></p>。
+ テスト＝<span>テキスト</span>。
- 段落！"こんにちは" テキスト。
+ テスト！"red" backgroundColor。
+ テスト２＝テスト！作る。
 </code>
-HTML要素のプロパティに直接アクセスすることもできる。たとえば、入力欄の値を取得するには「value」プロパティ、HTML内容を設定するには「innerHTML」プロパティ、スタイルを設定するには「style」プロパティを使う。
+HTMLオブジェクトに属性、プロパティ、CSSを設定する方法は2種類ある。
+. タグに直接記述する方法
 <code>
- 入力欄＝<input>。
+ 要素＝<span id="hoge" style="color: blue;"></span>。
- 入力値＝入力欄：value。
- コンテナ＝<div></div>。
- コンテナ：innerHTML＝"<span>内容</span>"。
- 要素＝<div></div>。
- 要素：style：display＝"none"。
 </code>
-HTMLオブジェクトの中に別のHTMLオブジェクトを入れるには「いれる」「append」「appendTo」などのメソッドを使う。「いれる」と「append」は追加先のオブジェクトに対して呼び出し、「appendTo」は追加されるオブジェクトに対して呼び出す。
+. メソッド呼び出しで設定する方法
+<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>。
- リスト！（項目）いれる。
+ 項目２＝<li>みかん</li>。
- // または
+ リスト！（項目１）入れる。
- 項目！（リスト）appendTo。
+ リスト！（項目２）入れる。
 </code>
-HTML要素を削除するには「remove」メソッドを使う。これにより、動的にコンテンツを制御できる。
+タグの中身をすべて削除するには「クリア」メソッドを使う。これはinnerHTMLごと削除するため、子ノードもテキストも消える。
 <code>
- 要素＝<div>削除される要素</div>。
+ コンテナ＝<div><p>テキスト</p></div>。
- 要素！remove。
+ コンテナ！クリア。
 </code>
-イベント処理には「動作」メソッドを定義する。ボタンがクリックされたときや、スライダーが操作されたときなど、ユーザーの操作に応じた処理を定義できる。
+イベント処理には「動作」プロパティを定義する。要素の種類によって異なるイベントが発生する。
+- inputタグ（type="text"など）：エンターキーが押されたとき
+- 特定のinputタグ（checkboxなど）：値が変更されたとき（onchange）
+- それ以外のタグ：クリックされたとき
+イベント処理の定義には「動作設定」メソッドを使用することもできる。
 <code>
  ボタン＝<button>送信</button>。
  ボタン：動作＝「
-  ラベル！"ボタンがクリックされました" 作る。
+  <span>ボタンがクリックされました</span>。
  」。
- スライダー＝<input type="range">。
+ テキスト入力＝<input type="text">。
- スライダー：動作＝「
+ テキスト入力!「
-  ラベル！（スライダー：value）テキスト。
+  <span></span>！（テキスト入力!値?）テキスト。
- 」。
+ 」 動作設定。
 </code>
-HTMLオブジェクトは条件分岐と組み合わせて使うことで、状態に応じて異なる表示や機能を提供することができる。例えば、特定の条件が満たされた場合にのみボタンを有効にしたり、期間が過ぎたら操作できないようにしたりといった制御が可能である。
+HTMLオブジェクトは条件分岐と組み合わせて使うことで、状態に応じて異なる表示を行うことができる。
 <code>
@@ ライン 70: / ライン 97: @@
   <span>実行できません</span>。
  」実行。
-</code>
-HTMLオブジェクトにスタイルを適用するには、スタイルタグを使用する方法と、要素のスタイルプロパティを直接操作する方法がある。
-<code>
- スタイル＝<style>
-  .box { width: 100px; height: 100px; background-color: blue; }
- </style>。
- ボックス＝<div class="box"></div>。
- // または直接スタイルを設定
- 要素＝<div></div>。
- 要素：style＝"width: 100px; height: 100px; background-color: blue;"。
 </code>
@@ ライン 91: / ライン 104: @@
  <div id="output"></div>。
  出力＝#output。
- 出力：テキスト＝"ID指定で取得した要素に内容を設定"。
+ 出力!"ID指定で取得した要素に内容を設定" テキスト。
 </code>
-画面の表示/非表示を切り替えるには、「style:display」プロパティを使用する。これにより、単一ページでも複数の画面を切り替える疑似的なページ遷移を実現できる。ログイン画面、予約フォーム、商品詳細画面など、複数の画面を持つアプリケーションの開発に役立つ。
+フォーム要素には様々な種類があり、テキスト入力、選択肢、チェックボックスなどを使ってユーザーからの入力を受け付けることができる。
 <code>
- ページ1＝<div>
+ テキスト入力＝<input type="text">。
-  <h1>ページ1</h1>
+ 選択肢＝<select>
-  <button id="toPage2">ページ2へ</button>
+  <option value="1">選択肢1</option>
- </div>。
+  <option value="2">選択肢2</option>
+ </select>。
- ページ2＝<div style="display: none;">
-  <h1>ページ2</h1>
-  <button id="toPage1">ページ1へ</button>
- </div>。
- #toPage2：動作＝「
-  ページ1：style：display＝"none"。
-  ページ2：style：display＝"block"。
- 」。
- #toPage1：動作＝「
-  ページ2：style：display＝"none"。
-  ページ1：style：display＝"block"。
- 」。
-</code>
-モーダルやポップアップウィンドウは、絶対位置指定とCSSの「transform」を使って実装できる。これはアラート表示や確認ダイアログなどのインターフェースに利用できる。
-<code>
- <style>
-  .popup-container {
-   position: absolute;
-   top: 50%;
-   left: 50%;
-   border: 1px solid;
-   transform: translate(-50%, -50%);
-  }
- </style>。
- ボタン＝<button>ポップアップ</button>。
- ボタン：動作＝「
-  ポップアップ＝<div class="popup-container"></div>。
-  タイトル＝<h3>ポップアップウィンドウ</h3>。
-  閉じるボタン＝<button>閉じる</button>。
-  閉じるボタン：動作＝「
-   ポップアップ！remove。
-  」。
-  ポップアップ！（タイトル）（閉じるボタン）append。
- 」。
-</code>
-フォーム要素には様々な種類があり、テキスト入力、日付入力、チェックボックス、スライダーなどを使ってユーザーからの入力を受け付けることができる。これらを活用することで、予約システム、アンケートフォーム、設定画面などを作成できる。
-<code>
- テキスト入力＝<input>。
- 日付入力＝<input type="date">。
  チェックボックス＝<input type="checkbox">。
- チェックボックス：動作＝「
-  結果！（チェックボックス：checked）テキスト。
- 」。
- スライダー＝<input type="range" list="数値">。
- <datalist id="数値">
-  <option value="0"></option>
-  <option value="50"></option>
-  <option value="100"></option>
- </datalist>。
- スライダー：動作＝「
-  結果！（スライダー：value）テキスト。
- 」。
 </code>
@@ ライン 169: / ライン 121: @@
 <code>
- <style>
-  iframe { width: 100%; height: 500px; }
- </style>。
  フレーム＝<iframe></iframe>。
- フレーム：src＝"https://example.com/"。
+ フレーム！"https://example.com/" ソース。
 </code>
@@ ライン 183: / ライン 131: @@
 </code>
-Webアプリケーション開発では、単一のHTML要素ではなく、複数の要素を組み合わせたコンポーネントを作成することが多い。例えば、商品カードや投票ボタンなどのコンポーネントを関数として定義し、必要に応じて再利用することができる。
+HTMLオブジェクトを使うことで、Web開発の基本的な考え方や技術を学ぶことができる。HTMLとCSSの基本を理解し、ドリトルのプログラミング機能と組み合わせることで、ボタンのクリックやフォームの送信などのイベント処理、データの表示や入力フォームの作成など、多様なWebアプリケーションの機能を実装できる。また、サーバとの通信（WebAPI）を組み合わせることで、より実践的なアプリケーションを構築することができる。
-<code>
- 商品カード＝「｜名前 価格 画像URL｜
-  カード＝<div class="card"></div>。
-  画像＝<img class="card-image">。
-  画像：src＝画像URL。
-  タイトル＝<h3 class="card-title"></h3>。
-  タイトル：テキスト＝名前。
-  価格表示＝<p class="card-price"></p>。
-  価格表示：テキスト＝"￥" + 価格。
-  カード！（画像）（タイトル）（価格表示）append。
-  カード。
- 」。
- 商品一覧＝<div class="product-list"></div>。
- 商品一覧！（商品カード！"りんご" 100 "apple.jpg" 実行）append。
- 商品一覧！（商品カード！"みかん" 150 "orange.jpg" 実行）append。
-</code>
-HTMLオブジェクトは、Webプログラミングの考え方や技術を学ぶための優れた教材である。HTMLとCSSの基本を理解し、ドリトルのプログラミング機能と組み合わせることで、ショッピングサイト、予約システム、投票アプリケーション、チャットシステムなど、多様なWebアプリケーションを容易に開発できる。また、サーバとの通信（WebAPI）を組み合わせることで、より実践的なアプリケーションを構築することができる。
+HTMLオブジェクトはWebプログラミングの入門として最適であり、プログラミングの基本構造（変数、条件分岐、繰り返し）とHTML/CSSの基本を同時に学べる環境を提供している。

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

ユーザ用ツール

サイト用ツール

差分

ページ用ツール