差分

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

--- ref_html_js [2025/03/14 13:29] – klab
+++ ref_html_js [2025/03/20 16:06] (現在) – klab
@@ 行 1: / 行 1: @@
+# HTMLオブジェクト
+  * HTMLタグをドリトル内で直接扱うことができるオブジェクトです。
+  * 角括弧（<>）を使って直接記述することで、HTMLオブジェクトを作成できます。
+  * HTMLオブジェクトを使うことで、動的な画面更新が可能な双方向コンテンツを簡潔に記述できます。
+  * WebAPIオブジェクトと組み合わせることで、サーバとの通信を行う双方向コンテンツを作成できます。
+## HTMLオブジェクトの基本
+  * HTMLタグは数値や文字列と同じように、角括弧（<>）で囲んで作成します。
+    * （例）順序なしリスト(ul)タグを作成します。
+<code>
+ メッセージボード＝<ul></ul>。
+</code>
+    * （例）入力欄(input)タグを作成します。
+<code>
+ 入力欄＝<input>。
+</code>
+    * （例）ボタン(button)タグを作成します。
+<code>
+ 送信ボタン＝<button>送信</button>。
+</code>
+  * HTMLオブジェクトには、それぞれの要素に応じた様々なメソッドが用意されています。
+  * 生成されたHTMLタグはオブジェクトであり、プロパティやメソッドの定義はタートルから作った「かめた」と同様に行えます。
+## タグの属性設定
+  * HTMLタグの属性、プロパティ、CSSには2つの設定方法があります。
+  * 1つ目は、タグに直接記述する方法です。
+    * （例）右寄せを指定したpタグを作成します。
+<code>
+ 段落＝<p align="right">右寄せの文章</p>。
+</code>
+    * （例）枠線を持つテーブルを作成します。
+<code>
+ 表＝<table border="1"></table>。
+</code>
+    * （例）idを指定したpタグを作成します。
+<code>
+ 段落＝<p id="id1">IDを持つ段落</p>。
+</code>
+    * （例）CSSのbackground-colorを指定したspanタグを生成します。
+<code>
+ テキスト＝<span style="background-color: red;">背景が赤色のテキスト</span>。
+</code>
+  * 2つ目は、タグを生成した後にメソッド呼び出しで設定する方法です。
+    * （例）idを設定します。
+<code>
+ 段落＝<p>テキスト</p>。
+ 段落！"id1" 識別子。
+</code>
+    * （例）属性の値を取得します。
+<code>
+ 段落＝<p id="id1"></p>。
+ <span></span>！（段落！識別子?）テキスト。
+</code>
+  * 以下は、さまざまな属性を設定する例です。
+    * （例）typeを指定したリストを作成します。
+<code>
+ リスト＝<ul type="circle"></ul>。
+</code>
+    * （例）styleを指定して直接スタイルを設定します。
+<code>
+ 掲示板＝<ul style="border:solid;"></ul>。
+</code>
+    * （例）入力フィールドのタイプを指定します。
+<code>
+ 数値入力＝<input type="number" value="1"/>。
+</code>
+    * （例）日付入力フィールドを作成します。
+<code>
+ 予約日＝<input type="date">。
+</code>
+    * （例）チェックボックスを作成します。
+<code>
+ チェックボックス＝<input type="checkbox" value="checked">。
+</code>
+    * （例）スライダーを作成します。
+<code>
+ スライダー＝<input type="range" list="数値" />。
+</code>
+    * （例）プレースホルダーを指定します。
+<code>
+ 検索欄＝<input placeholder="検索ワード"/>。
+</code>
+    * （例）画像に代替テキスト(alt)を指定します。
+<code>
+ 画像＝<img src="画像ファイルのURL" alt="画像の説明" class="image">。
+</code>
+    * （例）クラス名を指定します。
+<code>
+ コンテナ＝<div class="container" id="container1"></div>。
+</code>
+    * （例）CSSを指定します。
+        * ここではCSSのbackground-colorにredを設定しています。
+<code>
+ テキスト＝<span>背景が赤色のテキスト</span>。
+ テキスト!"red" 背景色。
+</code>
+## 共通のメソッドと属性
+  * **テキスト** : タグの内容のテキストを設定します。
+    * （例）リスト項目(li)タグにテキストを設定します。
+<code>
+ メッセージ＝<li></li>！（"こんにちは"）テキスト。
+</code>
+  * **入れる** : divやulのような、他のタグを包括するようなタグに、他のタグをchildNodeとして追加するときに使用します。
+    * （例）ulタグにliタグを追加します。
+<code>
+ メッセージボード＝<ul></ul>。
+ メッセージ＝<li></li>！（"こんにちは"）テキスト。
+ メッセージボード！（メッセージ）入れる。
+</code>
+    * （例）複数の要素を一度に追加します。
+<code>
+ 表示＝<ul></ul>。
+ 要素１＝<li>hoge</li>。
+ 表示！（要素１）入れる。
+ 要素２＝<li>fuga</li>。
+ 表示！（要素２）入れる。
+ 要素３＝<li>piyo</li>。
+ 表示！（要素３）入れる。
+</code>
+  * **クリア** : 中身をすべて削除するときに使います。innerHTMLごと削除するので、childNodeもinnerTextも消えます。
+    * （例）ulタグの内容をクリアします。
+<code>
+ メッセージボード！クリア。
+</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タグを含む内容も設定できます。
+    * （例）innerHTML属性に文字列を設定します。
+<code>
+ 商品名表示＝<h2></h2>。
+ 商品名表示:innerHTML＝"コーヒー"。
+</code>
+    * （例）innerHTML属性を空にして内容をクリアします。
+<code>
+ メッセージ表示＝<div></div>。
+ メッセージ表示:innerHTML＝""。
+</code>
+  * **appendTo** : 自分自身を引数で指定したHTMLタグの子要素として追加します。
+    * （例）liタグをulタグに追加します。
+<code>
+ 掲示板＝<ul></ul>。
+ ポスト＝<li></li>。
+ ポスト：テキスト＝"新しい投稿"。
+ ポスト！（掲示板）appendTo。
+</code>
+  * **append** : 引数で指定したHTMLタグを子要素として追加します。複数の要素を一度に追加することもできます。
+    * （例）divタグに複数の要素を追加します。
+<code>
+ コンテナ＝<div></div>。
+ 画像＝<img>。
+ タイトル＝<h2>タイトル</h2>。
+ 説明＝<p>説明文</p>。
+ 区切り＝<hr>。
+ コンテナ！（画像）（タイトル）（説明）（区切り）append。
+</code>
+  * **style** : CSSスタイルを設定します。
+    * （例）テキストの色を設定します。
+<code>
+ メッセージ＝<span></span>。
+ メッセージ:style＝"color:orange;"。
+</code>
+    * （例）要素の表示・非表示を切り替えます。
+<code>
+ ページ1＝<div>ページ1の内容</div>。
+ ページ2＝<div style="display: none;">ページ2の内容</div>。
+ ボタン：動作＝「
+  ページ1:style:display = "none"。
+  ページ2:style:display = "block"。
+ 」。
+</code>
+  * **element** : HTMLタグの実際の要素にアクセスするためのプロパティです。特にスタイルの詳細な設定に使用します。
+    * （例）背景色を設定します。
+<code>
+ ピクセル＝<div class="pixel"></div>。
+ ピクセル:element:style:backgroundColor＝"red"。
+</code>
+*/
+  * **削除する** : 要素を削除します。
+    * （例）要素を削除します。
+<code>
+ 要素＝<div>削除される要素</div>。
+ 要素！削除する。
+</code>
+/*
+  * **src** : img要素やiframe要素のURLを設定します。
+    * （例）img要素に画像URLを設定します。
+<code>
+ 画像＝<img>。
+ 画像:src＝"https://example.com/image.jpg"。
+</code>
+    * （例）iframe要素にURLを設定します。
+<code>
+ フレーム＝<iframe></iframe>。
+ フレーム:src＝"https://php.dolittle.cc/"。
+</code>
+  * **checked** : チェックボックスの状態を取得します。
+    * （例）チェックボックスの状態を取得します。
+<code>
+ チェックボックス＝<input type="checkbox">。
+ 結果＝<p></p>。
+ チェックボックス：動作＝「
+  結果：テキスト＝(チェックボックス：checked != undefined)。
+ 」。
+</code>
+*/
+## idセレクタによる要素の取得
+  * `#id` 形式を使ってHTML要素を取得できます。
+  * 現在、`#id`形式で指定できるidには`-`などの記号を含めることができません。
+    * （例）idを指定して要素を取得します。
+<code>
+ <span id="output" style="background-color: lightGreen"></span>。
+ 出力欄＝#output。
+ 出力欄！"ドリトルを使ってテキストを設定" テキスト。
+</code>
+## フォーム要素のメソッドと属性
+  * **値？** : フォーム要素の値を取得します（input, textareaなど）。
+    * （例）入力欄の値を取得します。
+<code>
+ 入力欄＝<input>。
+ <span></span>！（入力欄！値？）テキスト。
+</code>
+  * **値** : フォーム要素の値を設定します。
+    * （例）入力欄に値を設定します。
+<code>
+ 入力欄＝<input>。
+ 入力欄！（"こんにちは"）値。
+</code>
+/*
+  * **value** : フォーム要素の値を取得・設定するための属性です。
+    * （例）入力欄の値を取得します。
+<code>
+ 入力欄＝<input>。
+ メッセージ＝入力欄:value。
+</code>
+    * （例）入力欄の値を設定します。
+<code>
+ 入力欄＝<input>。
+ 入力欄:value＝"こんにちは"。
+</code>
+    * （例）日付入力欄の値を取得します。
+<code>
+ 予約日＝<input type="date">。
+ api:date = 予約日:value。
+</code>
+    * （例）スライダーの値を取得します。
+<code>
+ スライダー＝<input type="range">。
+ 結果＝<p></p>。
+ 結果：テキスト＝スライダー：value。
+</code>
+*/
+/*
+## アラートを表示する
+  * `alert` メソッドを使用して、アラートダイアログを表示できます。
+    * （例）ボタンをクリックしてアラートを表示します。
+<code>
+ ボタン＝<button>クリック</button>。
+ ボタン:動作＝「
+  !("あいうえお") alert。
+ 」。
+</code>
+*/
+## WebAPIとの連携
+  * HTMLオブジェクトはWebAPIオブジェクトと組み合わせることで、サーバとの通信を行う双方向コンテンツを作成できます。
+  * 以下は、簡単なチャットプログラムの例です。
+<code>
+ メッセージボード＝<ul></ul>。
+ 入力欄＝<input>。
+ 送信ボタン＝<button>送信</button>。
+ 受信_wa ＝ webapi!作る。
+ 受信_wa.url ＝"read.php"。
+ メッセージ表示＝「｜メッセージ配列｜
+  メッセージボード！クリア。
+  メッセージ配列！「｜内容｜
+   メッセージ＝<li></li>！（内容）テキスト。
+   メッセージボード！（メッセージ）入れる。
+  」それぞれ実行。
+ 」。
+ メッセージ表示！（受信_wa！読む）実行。
+ 送信_wa ＝ webapi!作る。
+ 送信_wa.url ＝"write.php"。
+ 名前 ＝"ユーザー"。
+ 送信ボタン：動作＝「
+  送信_wa.内容＝名前＋"："＋（入力欄！値？）。
+  送信_wa！読む。
+  メッセージ表示！（受信_wa！読む）実行。
+ 」。
+</code>
+  * このプログラムでは、サーバ側で動作するPHPプログラム（read.phpとwrite.php）とクライアント側で動作するドリトルプログラムを組み合わせています。
+  * サーバ側のPHPプログラムは以下のようになります。
+```php
+//掲示板にメッセージを書き込むwrite.php
+<?php
+ $message = $_GET['message'] . "\n";
+ file_put_contents("chat.txt", $message, FILE_APPEND);
+?>
+//掲示板の書き込み一覧を取得するread.php
+<?php
+ $message = file("chat.txt");
+ echo json_encode($message);
+?>
+```
+## よく使われるHTMLタグ
+  * ドリトルでは多くのHTMLタグが使用できます。以下はよく使われるタグの例です。
+  * **ul, li** : 順序なしリストとリスト項目を表示します。
+    * （例）順序なしリストを作成します。
+<code>
+ リスト＝<ul></ul>。
+ 項目1＝<li></li>！（"項目1"）テキスト。
+ 項目2＝<li></li>！（"項目2"）テキスト。
+ リスト！（項目1）入れる（項目2）入れる。
+</code>
+  * **ol, li** : 順序ありリストとリスト項目を表示します。
+    * （例）順序ありリストを作成します。
+<code>
+ リスト＝<ol></ol>。
+ 項目1＝<li></li>！（"項目1"）テキスト。
+ 項目2＝<li></li>！（"項目2"）テキスト。
+ リスト！（項目1）入れる（項目2）入れる。
+</code>
+  * **input** : 入力欄を表示します。
+    * （例）入力欄を作成します。
+<code>
+ 入力欄＝<input>。
+</code>
+    * （例）プレースホルダーを指定した入力欄を作成します。
+<code>
+ 検索入力欄＝<input placeholder="検索ワード" id="search-input" />。
+</code>
+    * （例）数値入力欄を作成します。
+<code>
+ 数量＝<input type="number" value="1"/>。
+</code>
+    * （例）日付入力欄を作成します。
+<code>
+ 予約日＝<input type="date">。
+</code>
+  * **datalist, option** : 入力欄の選択肢リストを作成します。
+    * （例）スライダーと選択肢リストを作成します。
+<code>
+ スライダー＝<input type="range" list="数値" />。
+ <datalist id="数値">
+  <option value="0"></option>
+  <option value="10"></option>
+  <option value="20"></option>
+  <option value="30"></option>
+  <option value="40"></option>
+  <option value="50"></option>
+ </datalist>。
+</code>
+  * **textarea** : 複数行の入力欄を表示します。
+    * （例）テキストエリアを作成します。
+<code>
+ 内容＝<textarea></textarea>。
+</code>
+  * **button** : ボタンを表示します。
+    * （例）ボタンを作成します。
+<code>
+ ボタン＝<button>クリック</button>。
+ ボタン：動作＝「<span></span>！"ボタンがクリックされました" テキスト」。
+</code>
+  * **iframe** : 外部ページをフレーム内に表示します。
+    * （例）iframeタグでWebページを表示します。
+<code>
+ フレーム＝<iframe></iframe>。
+ フレーム！"https://example.com/" ソース。
+</code>
+  * **div** : 汎用的なブロック要素を作成します。
+    * （例）divタグを作成します。
+<code>
+ コンテナ＝<div></div>。
+ テキスト＝<p></p>！（"こんにちは"）テキスト。
+ コンテナ！（テキスト）入れる。
+</code>
+  * **span** : 汎用的なインライン要素を作成します。
+    * （例）spanタグを作成します。
+<code>
+ テキスト＝<span></span>！（"こんにちは"）テキスト。
+</code>
+  * **p** : 段落を表示します。
+    * （例）段落を作成します。
+<code>
+ 段落＝<p></p>！（"これは段落です"）テキスト。
+</code>
+  * **h1, h2, h3, ...** : 見出しを表示します。
+    * （例）見出しを作成します。
+<code>
+ タイトル＝<h1>タイトル</h1>。
+ 見出し＝<h2>見出し</h2>。
+</code>
+  * **img** : 画像を表示します。
+    * （例）画像を表示します。
+<code>
+ 画像＝<img>。
+ 画像！"https://example.com/image.jpg" ソース。
+</code>
+    * （例）代替テキストとクラスを指定した画像を表示します。
+<code>
+ 画像＝<img>。
+ 画像！"example.com/image.jpg" ソース。
+ 画像！"画像の説明" 代替テキスト。
+ 画像！"image" クラス。
+</code>
+  * **table, tr, th, td** : 表を作成します。
+    * （例）2行2列の表を作成します。
+<code>
+ 表＝<table border="1">
+  <tr>
+   <th>工学部</th>
+   <th>情報工学部</th>
+  </tr>
+  <tr>
+   <td>電気電子工学科</td>
+   <td>情報工学科</td>
+  </tr>
+ </table>。
+</code>
+  * **a** : リンクを作成します。
+    * （例）リンクを作成します。
+<code>
+ リンク＝<a>リンク</a>。
+ リンク！"https://example.com" リンク先。
+</code>
+  * **br** : 改行を作成します。
+    * （例）改行を挿入します。
+<code>
+ <span>テキスト</span>。
+ <br>。
+ <span>次の行</span>。
+</code>
+  * **hr** : 水平線を作成します。
+    * （例）水平線を挿入します。
+<code>
+ <h1>ドリトルリファレンス</h1>。
+ <hr/>。
+</code>
+  * **label** : フォーム要素のラベルを作成します。
+    * （例）ラベルを作成します。
+<code>
+ <label>ユーザ名:</label>。
+ ユーザ名＝<input type="text"/>。
+</code>
+## スタイル設定
+  * style要素を使うことで、HTMLタグのスタイルをまとめて設定できます。
+    * （例）タグ名、id, classを指定してスタイルを設定します。
+<code>
+ <style>
+ body{margin: 2%;}
+ #title{font-size: 30px;}
+ .submit{background-color: green;}
+ </style>。
+</code>
+/*
+    * （例）ドット絵用のスタイルを設定します。
+<code>
+ <style>
+ .pixel{width:6px;height:6px;}
+ .line{display:flex;}
+ .canvas{border:solid;}
+ </style>。
+</code>
+    * （例）ポップアップウィンドウ用のスタイルを設定します。
+<code>
+ <style>
+ .popup-container {
+  position: absolute;
+  top: 50%;
+  left: 50%;
+  border: 1px solid;
+  transform: translate(-50%, -50%);
+ }
+ </style>。
+</code>
+*/
+## 実践的な例：メッセージボード
+  * 以下は、ボタンをクリックするとメッセージを追加表示するシンプルなメッセージボードの例です。
+  * 「メッセージボード」として定義したulタグに対して、あとからliタグを生成して追加します。
+  * 「送信ボタン」がクリックされたら、入力欄に記入された文字列を取得しています。
+<code>
+ メッセージボード＝<ul></ul>。
+ 入力欄＝<input>。
+ 送信ボタン＝<button>追加</button>。
+ 送信ボタン：動作＝「
+  メッセージ＝<li></li>！（入力欄！値？）テキスト。
+  メッセージボード！（メッセージ）入れる。
+  入力欄！（""）値。
+ 」。
+</code>
+## 実践的な例：電卓
+  * 以下は、入力された数値をもとに計算を行う電卓アプリの例です。
+  * 「足す」ボタンがクリックされたら、入力１・入力２から値を取得して、計算結果を「結果」に表示しています。
+<code>
+<h1>電卓</h1>。
+<span>入力１：</span>。
+入力１＝<input>。
+<br>。
+<span>入力２：</span>。
+入力２＝<input>。
+<br>。
+結果＝<span></span>。
+足す＝<button>＋</button>。
+足す：動作＝「
+　　結果！（（入力１！値？）＋（入力２！値？））テキスト。
+」。
+</code>
+  * 以下は、「引く」ボタンを追加する例です。
+  * 同じように、「かける」「割る」ボタンを簡単に追加することができます。
+<code>
+引く＝<button>ー</button>。
+引く：動作＝「
+　　結果！（（入力１！値？）-（入力２！値？））テキスト。
+」。
+</code>
+## 実践的な例：くじ引き
+  * 以下は、乱数を使ったくじ引きの例です。
+  * １以上、５以下の値を生成し、１が出たときだけ「あたり」、それ以外が出たら「はずれ」を表示します。
+<code>
+<h1>くじ引き</h1>。
+ボタン＝<button>くじを引く</button>。
+結果表示＝<p></p>。
+くじ箱＝配列！"あたり" "はずれ" "はずれ" "はずれ" "はずれ" 作る。
+ボタン：動作＝「
+    結果＝くじ箱！(乱数(5)) 読む。
+    結果表示！(結果) テキスト。
+」。
+</code>