HTMLオブジェクト

• HTMLタグをドリトル内で直接扱うことができるオブジェクトです。
• 角括弧（<>）を使って直接記述することで、HTMLオブジェクトを作成できます。
• HTMLオブジェクトを使うことで、動的な画面更新が可能な双方向コンテンツを簡潔に記述できます。
• WebAPIオブジェクトと組み合わせることで、サーバとの通信を行う双方向コンテンツを作成できます。

• HTMLタグは数値や文字列と同じように、角括弧（<>）で囲んで作成します。
  • （例）順序なしリスト(ul)タグを作成します。

 メッセージボード＝<ul></ul>。

• （例）入力欄(input)タグを作成します。

 入力欄＝<input>。

• （例）ボタン(button)タグを作成します。

 送信ボタン＝<button>送信</button>。

• HTMLオブジェクトには、それぞれの要素に応じた様々なメソッドが用意されています。
• 生成されたHTMLタグはオブジェクトであり、プロパティやメソッドの定義はタートルから作った「かめた」と同様に行えます。

• HTMLタグの属性、プロパティ、CSSには2つの設定方法があります。
• 1つ目は、タグに直接記述する方法です。
  • （例）右寄せを指定したpタグを作成します。

 段落＝<p align="right">右寄せの文章</p>。

• （例）枠線を持つテーブルを作成します。

 表＝<table border="1"></table>。

• （例）idを指定したpタグを作成します。

 段落＝<p id="id1">IDを持つ段落</p>。

• （例）CSSのbackground-colorを指定したspanタグを生成します。

 テキスト＝<span style="background-color: red;">背景が赤色のテキスト</span>。

• 2つ目は、タグを生成した後にメソッド呼び出しで設定する方法です。
  • （例）idを設定します。

 段落＝<p>テキスト</p>。
 段落！"id1" 識別子。

• （例）属性の値を取得します。

 段落＝<p id="id1"></p>。
 <span></span>！（段落！識別子?）テキスト。

• 以下は、さまざまな属性を設定する例です。
  • （例）typeを指定したリストを作成します。

 リスト＝<ul type="circle"></ul>。

• （例）styleを指定して直接スタイルを設定します。

 掲示板＝<ul style="border:solid;"></ul>。

• （例）入力フィールドのタイプを指定します。

 数値入力＝<input type="number" value="1"/>。

• （例）日付入力フィールドを作成します。

 予約日＝<input type="date">。

• （例）チェックボックスを作成します。

 チェックボックス＝<input type="checkbox" value="checked">。

• （例）スライダーを作成します。

 スライダー＝<input type="range" list="数値" />。

• （例）プレースホルダーを指定します。

 検索欄＝<input placeholder="検索ワード"/>。

• （例）画像に代替テキスト(alt)を指定します。

 画像＝<img src="画像ファイルのURL" alt="画像の説明" class="image">。

• （例）クラス名を指定します。

 コンテナ＝<div class="container" id="container1"></div>。

• （例）CSSを指定します。
  • ここではCSSのbackground-colorにredを設定しています。

 テキスト＝<span>背景が赤色のテキスト</span>。
 テキスト!"red" 背景色。

• テキスト : タグの内容のテキストを設定します。
  • （例）リスト項目(li)タグにテキストを設定します。

 メッセージ＝<li></li>！（"こんにちは"）テキスト。

• 入れる : divやulのような、他のタグを包括するようなタグに、他のタグをchildNodeとして追加するときに使用します。
  • （例）ulタグにliタグを追加します。

 メッセージボード＝<ul></ul>。
 メッセージ＝<li></li>！（"こんにちは"）テキスト。
 メッセージボード！（メッセージ）入れる。

• （例）複数の要素を一度に追加します。

 表示＝<ul></ul>。
 要素１＝<li>hoge</li>。
 表示！（要素１）入れる。
 要素２＝<li>fuga</li>。
 表示！（要素２）入れる。
 要素３＝<li>piyo</li>。
 表示！（要素３）入れる。

• クリア : 中身をすべて削除するときに使います。innerHTMLごと削除するので、childNodeもinnerTextも消えます。
  • （例）ulタグの内容をクリアします。

 メッセージボード！クリア。

• 動作 : イベントハンドラーで、このプロパティにブロックを代入しておくと、以下のイベントを検出したときに実行します。
  • inputのtypeが[“text”, “search”, “email”, “url”, “number”, “tel”, “password”]の場合は、エンターキーが押されたら
  • inputのそれ以外は値が変更されたら（onchange）
  • それ以外のタグはクリックされたら
  • （例）ボタンがクリックされたときの処理を定義します。

 送信ボタン＝<button>送信</button>。
 送信ボタン：動作＝「
  <span></span>！"ボタンが押されました" テキスト。
 」。

• （例）入力欄でエンターキーが押されたときの処理を定義します。

 入力欄＝<input type="text">。
 入力欄：動作＝「
  <span></span>！（入力欄！値？）テキスト。
 」。

• （例）スライダーの値が変更されたときの処理を定義します。

 スライダー＝<input type="range">。
 結果＝<p></p>。
 スライダー：動作＝「
  結果！(スライダー！値？) テキスト。
 」。

• 動作は「動作設定」メソッドを使用することでも定義することができます。

 送信ボタン＝<button>送信</button>。
 送信ボタン！「
  <span></span>！"ボタンが押されました" テキスト。
 」 動作設定。

• 削除する : 要素を削除します。
  • （例）要素を削除します。

 要素＝<div>削除される要素</div>。
 要素！削除する。

• #id 形式を使ってHTML要素を取得できます。
• 現在、#id形式で指定できるidには-などの記号を含めることができません。
  • （例）idを指定して要素を取得します。

 <span id="output" style="background-color: lightGreen"></span>。
 出力欄＝#output。
 出力欄！"ドリトルを使ってテキストを設定" テキスト。

• 値？ : フォーム要素の値を取得します（input, textareaなど）。
  • （例）入力欄の値を取得します。

 入力欄＝<input>。
 <span></span>！（入力欄！値？）テキスト。

• 値 : フォーム要素の値を設定します。
  • （例）入力欄に値を設定します。

 入力欄＝<input>。
 入力欄！（"こんにちは"）値。

• HTMLオブジェクトはWebAPIオブジェクトと組み合わせることで、サーバとの通信を行う双方向コンテンツを作成できます。
• 以下は、簡単なチャットプログラムの例です。

 メッセージボード＝<ul></ul>。
 入力欄＝<input>。
 送信ボタン＝<button>送信</button>。
 
 受信_wa ＝ webapi!作る。
 受信_wa.url ＝"read.php"。
 
 メッセージ表示＝「｜メッセージ配列｜
  メッセージボード！クリア。
  メッセージ配列！「｜内容｜
   メッセージ＝<li></li>！（内容）テキスト。
   メッセージボード！（メッセージ）入れる。
  」それぞれ実行。
 」。
 
 メッセージ表示！（受信_wa！読む）実行。
 
 送信_wa ＝ webapi!作る。
 送信_wa.url ＝"write.php"。
 名前 ＝"ユーザー"。
 
 送信ボタン：動作＝「
  送信_wa.内容＝名前＋"："＋（入力欄！値？）。
  送信_wa！読む。
  メッセージ表示！（受信_wa！読む）実行。
 」。

• このプログラムでは、サーバ側で動作するPHPプログラム（read.phpとwrite.php）とクライアント側で動作するドリトルプログラムを組み合わせています。
• サーバ側のPHPプログラムは以下のようになります。

snippet.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タグが使用できます。以下はよく使われるタグの例です。

• ul, li : 順序なしリストとリスト項目を表示します。
  • （例）順序なしリストを作成します。

 リスト＝<ul></ul>。
 項目1＝<li></li>！（"項目1"）テキスト。
 項目2＝<li></li>！（"項目2"）テキスト。
 リスト！（項目1）入れる（項目2）入れる。

• ol, li : 順序ありリストとリスト項目を表示します。
  • （例）順序ありリストを作成します。

 リスト＝<ol></ol>。
 項目1＝<li></li>！（"項目1"）テキスト。
 項目2＝<li></li>！（"項目2"）テキスト。
 リスト！（項目1）入れる（項目2）入れる。

• input : 入力欄を表示します。
  • （例）入力欄を作成します。

 入力欄＝<input>。

• （例）プレースホルダーを指定した入力欄を作成します。

 検索入力欄＝<input placeholder="検索ワード" id="search-input" />。

• （例）数値入力欄を作成します。

 数量＝<input type="number" value="1"/>。

• （例）日付入力欄を作成します。

 予約日＝<input type="date">。

• datalist, option : 入力欄の選択肢リストを作成します。
  • （例）スライダーと選択肢リストを作成します。

 スライダー＝<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>。

• textarea : 複数行の入力欄を表示します。
  • （例）テキストエリアを作成します。

 内容＝<textarea></textarea>。

• button : ボタンを表示します。
  • （例）ボタンを作成します。

 ボタン＝<button>クリック</button>。
 ボタン：動作＝「<span></span>！"ボタンがクリックされました" テキスト」。

• iframe : 外部ページをフレーム内に表示します。
  • （例）iframeタグでWebページを表示します。

 フレーム＝<iframe></iframe>。
 フレーム！"https://example.com/" ソース。

• div : 汎用的なブロック要素を作成します。
  • （例）divタグを作成します。

 コンテナ＝<div></div>。
 テキスト＝<p></p>！（"こんにちは"）テキスト。
 コンテナ！（テキスト）入れる。

• span : 汎用的なインライン要素を作成します。
  • （例）spanタグを作成します。

 テキスト＝<span></span>！（"こんにちは"）テキスト。

• p : 段落を表示します。
  • （例）段落を作成します。

 段落＝<p></p>！（"これは段落です"）テキスト。

• h1, h2, h3, … : 見出しを表示します。
  • （例）見出しを作成します。

 タイトル＝<h1>タイトル</h1>。
 見出し＝<h2>見出し</h2>。

• img : 画像を表示します。
  • （例）画像を表示します。

 画像＝<img>。
 画像！"https://example.com/image.jpg" ソース。

• （例）代替テキストとクラスを指定した画像を表示します。

 画像＝<img>。
 画像！"example.com/image.jpg" ソース。
 画像！"画像の説明" 代替テキスト。
 画像！"image" クラス。

• table, tr, th, td : 表を作成します。
  • （例）2行2列の表を作成します。

 表＝<table border="1">
  <tr>
   <th>工学部</th>
   <th>情報工学部</th>
  </tr>
  <tr>
   <td>電気電子工学科</td>
   <td>情報工学科</td>
  </tr>
 </table>。

• a : リンクを作成します。
  • （例）リンクを作成します。

 リンク＝<a>リンク</a>。
 リンク！"https://example.com" リンク先。

• br : 改行を作成します。
  • （例）改行を挿入します。

 <span>テキスト</span>。
 <br>。
 <span>次の行</span>。

• hr : 水平線を作成します。
  • （例）水平線を挿入します。

 <h1>ドリトルリファレンス</h1>。
 <hr/>。

• label : フォーム要素のラベルを作成します。
  • （例）ラベルを作成します。

 <label>ユーザ名:</label>。
 ユーザ名＝<input type="text"/>。

• style要素を使うことで、HTMLタグのスタイルをまとめて設定できます。
  • （例）タグ名、id, classを指定してスタイルを設定します。

 <style>
 body{margin: 2%;}
 #title{font-size: 30px;}
 .submit{background-color: green;}
 </style>。

• 以下は、ボタンをクリックするとメッセージを追加表示するシンプルなメッセージボードの例です。
• 「メッセージボード」として定義したulタグに対して、あとからliタグを生成して追加します。
• 「送信ボタン」がクリックされたら、入力欄に記入された文字列を取得しています。

 メッセージボード＝<ul></ul>。
 入力欄＝<input>。
 送信ボタン＝<button>追加</button>。
 
 送信ボタン：動作＝「
  メッセージ＝<li></li>！（入力欄！値？）テキスト。
  メッセージボード！（メッセージ）入れる。
  入力欄！（""）値。
 」。

• 以下は、入力された数値をもとに計算を行う電卓アプリの例です。
• 「足す」ボタンがクリックされたら、入力１・入力２から値を取得して、計算結果を「結果」に表示しています。

<h1>電卓</h1>。
<span>入力１：</span>。
入力１＝<input>。
<br>。
<span>入力２：</span>。
入力２＝<input>。
<br>。
結果＝<span></span>。
足す＝<button>＋</button>。
足す：動作＝「
　　結果！（（入力１！値？）＋（入力２！値？））テキスト。
」。

• 以下は、「引く」ボタンを追加する例です。
• 同じように、「かける」「割る」ボタンを簡単に追加することができます。

引く＝<button>ー</button>。
引く：動作＝「
　　結果！（（入力１！値？）-（入力２！値？））テキスト。
」。

• 以下は、乱数を使ったくじ引きの例です。
• １以上、５以下の値を生成し、１が出たときだけ「あたり」、それ以外が出たら「はずれ」を表示します。

<h1>くじ引き</h1>。
ボタン＝<button>くじを引く</button>。
結果表示＝<p></p>。

くじ箱＝配列！"あたり" "はずれ" "はずれ" "はずれ" "はずれ" 作る。

ボタン：動作＝「
    結果＝くじ箱！(乱数(5)) 読む。
    結果表示！(結果) テキスト。
」。