HTMLオブジェクト
HTMLタグをドリトル内で直接扱うことができるオブジェクトです。
角括弧(<>)を使って直接記述することで、HTMLオブジェクトを作成できます。
HTMLオブジェクトを使うことで、動的な画面更新が可能な双方向コンテンツを簡潔に記述できます。
WebAPIオブジェクトと組み合わせることで、サーバとの通信を行う双方向コンテンツを作成できます。
HTMLオブジェクトの基本
メッセージボード=<ul></ul>。
入力欄=<input>。
送信ボタン=<button>送信</button>。
タグの属性設定
段落=<p align="right">右寄せの文章</p>。
表=<table border="1"></table>。
段落=<p id="id1">IDを持つ段落</p>。
テキスト=<span style="background-color: red;">背景が赤色のテキスト</span>。
段落=<p>テキスト</p>。
段落!"id1" 識別子。
段落=<p id="id1"></p>。
<span></span>!(段落!識別子?)テキスト。
リスト=<ul type="circle"></ul>。
掲示板=<ul style="border:solid;"></ul>。
数値入力=<input type="number" value="1"/>。
予約日=<input type="date">。
チェックボックス=<input type="checkbox" value="checked">。
スライダー=<input type="range" list="数値" />。
検索欄=<input placeholder="検索ワード"/>。
画像=<img src="画像ファイルのURL" alt="画像の説明" class="image">。
コンテナ=<div class="container" id="container1"></div>。
テキスト=<span>背景が赤色のテキスト</span>。
テキスト!"red" 背景色。
共通のメソッドと属性
メッセージ=<li></li>!("こんにちは")テキスト。
メッセージボード=<ul></ul>。
メッセージ=<li></li>!("こんにちは")テキスト。
メッセージボード!(メッセージ)入れる。
表示=<ul></ul>。
要素1=<li>hoge</li>。
表示!(要素1)入れる。
要素2=<li>fuga</li>。
表示!(要素2)入れる。
要素3=<li>piyo</li>。
表示!(要素3)入れる。
メッセージボード!クリア。
送信ボタン=<button>送信</button>。
送信ボタン:動作=「
<span></span>!"ボタンが押されました" テキスト。
」。
入力欄=<input type="text">。
入力欄:動作=「
<span></span>!(入力欄!値?)テキスト。
」。
スライダー=<input type="range">。
結果=<p></p>。
スライダー:動作=「
結果!(スライダー!値?) テキスト。
」。
送信ボタン=<button>送信</button>。
送信ボタン!「
<span></span>!"ボタンが押されました" テキスト。
」 動作設定。
要素=<div>削除される要素</div>。
要素!削除する。
idセレクタによる要素の取得
<span id="output" style="background-color: lightGreen"></span>。
出力欄=#output。
出力欄!"ドリトルを使ってテキストを設定" テキスト。
フォーム要素のメソッドと属性
入力欄=<input>。
<span></span>!(入力欄!値?)テキスト。
入力欄=<input>。
入力欄!("こんにちは")値。
WebAPIとの連携
メッセージボード=<ul></ul>。
入力欄=<input>。
送信ボタン=<button>送信</button>。
受信_wa = webapi!作る。
受信_wa.url ="read.php"。
メッセージ表示=「|メッセージ配列|
メッセージボード!クリア。
メッセージ配列!「|内容|
メッセージ=<li></li>!(内容)テキスト。
メッセージボード!(メッセージ)入れる。
」それぞれ実行。
」。
メッセージ表示!(受信_wa!読む)実行。
送信_wa = webapi!作る。
送信_wa.url ="write.php"。
名前 ="ユーザー"。
送信ボタン:動作=「
送信_wa.内容=名前+":"+(入力欄!値?)。
送信_wa!読む。
メッセージ表示!(受信_wa!読む)実行。
」。
- 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></ul>。
項目1=<li></li>!("項目1")テキスト。
項目2=<li></li>!("項目2")テキスト。
リスト!(項目1)入れる(項目2)入れる。
リスト=<ol></ol>。
項目1=<li></li>!("項目1")テキスト。
項目2=<li></li>!("項目2")テキスト。
リスト!(項目1)入れる(項目2)入れる。
入力欄=<input>。
検索入力欄=<input placeholder="検索ワード" id="search-input" />。
数量=<input type="number" value="1"/>。
予約日=<input type="date">。
スライダー=<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>。
ボタン=<button>クリック</button>。
ボタン:動作=「<span></span>!"ボタンがクリックされました" テキスト」。
フレーム=<iframe></iframe>。
フレーム!"https://example.com/" ソース。
コンテナ=<div></div>。
テキスト=<p></p>!("こんにちは")テキスト。
コンテナ!(テキスト)入れる。
テキスト=<span></span>!("こんにちは")テキスト。
段落=<p></p>!("これは段落です")テキスト。
タイトル=<h1>タイトル</h1>。
見出し=<h2>見出し</h2>。
画像=<img>。
画像!"https://example.com/image.jpg" ソース。
画像=<img>。
画像!"example.com/image.jpg" ソース。
画像!"画像の説明" 代替テキスト。
画像!"image" クラス。
表=<table border="1">
<tr>
<th>工学部</th>
<th>情報工学部</th>
</tr>
<tr>
<td>電気電子工学科</td>
<td>情報工学科</td>
</tr>
</table>。
リンク=<a>リンク</a>。
リンク!"https://example.com" リンク先。
<span>テキスト</span>。
<br>。
<span>次の行</span>。
<h1>ドリトルリファレンス</h1>。
<hr/>。
<label>ユーザ名:</label>。
ユーザ名=<input type="text"/>。
スタイル設定
<style>
body{margin: 2%;}
#title{font-size: 30px;}
.submit{background-color: green;}
</style>。
実践的な例:メッセージボード
メッセージボード=<ul></ul>。
入力欄=<input>。
送信ボタン=<button>追加</button>。
送信ボタン:動作=「
メッセージ=<li></li>!(入力欄!値?)テキスト。
メッセージボード!(メッセージ)入れる。
入力欄!("")値。
」。