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

大阪電気通信大学 兼宗研究室

ユーザ用ツール

サイト用ツール


ch_html_js

差分

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

この比較画面にリンクする

次のリビジョン
前のリビジョン
ch_html_js [2025/03/07 15:14]
klab 作成
ch_html_js [2025/03/13 21:08] (現在)
klab
ライン 1: ライン 1:
 ## HTMLオブジェクト ## HTMLオブジェクト
  
-**HTMLタグ**オブジェクトは、Webページ構成要素であるHTMLタグをドリトル内で直接扱うことができるオブジェクトである。HTMLオブジェクトを使うこ、動的な画面更新が可能な双方向コンテンツを簡潔に記述できる。HTML+JavaScriptやPHPベースCGIプログラムでは処理の混在よりプログラムの理解が難しいことがあるが、HTMLオブジェクトを使うことで可読性の高いプログラムを作成できる。+**HTML**オブジェクトは、HTMLのタグを直接ドリトルプログラムに記述し、Webページの要素としてそのまま扱うことができるオブジェクトである。「数値」や「文字列」同様に扱え、動的な画面更新双方向コンテンツの開発が容易る。
  
-HTMLオブジェクトは、角括弧(<>​)を使って直接記述する。次のプロラムで、`<ul></ul>`というHTML順序なしリスト(unordered list)を作成している。+HTMLオブジェクトは、角括弧(<>​)で囲まれたタグを直接記述することで生成する。グは開始タグ(<>)と終了タグ(</>)をセットで使用する。次プログラムを実行すると、画面に「テキスト」とう文字が表示される。
  
 <​code>​ <​code>​
- メッセージボード=<ul></ul>。+ 段落=<span>テキスト</span>。
 </​code>​ </​code>​
  
-、入力欄やボフォム要素も同様に記述できる。+/​*生成されオブジェクトは「root:​dom:​グ名」の子オブジェクトとり、プログラム中タグの部分は実行時には「root:​dom:​タグ名!"​文字列"​create」のように変換されて実行される。*/​ 
 + 
 +HTMLオブジェクトはメソッドやプロパティを持ち、タトルと同様に操作できる。既存のHTMLオブジェクトから新しいオブジェクトを作ることもできる。
  
 <​code>​ <​code>​
- 入力欄=<input>。 + テスト=<span>テキスト</span>。 
- ​送信ボタン=<​button>​送信</button>。+ ​テスト!"​red"​ backgroundColor。 
 + ​テスト2=テスト!作る
 </​code>​ </​code>​
  
-HTMLオブジェクトにそれぞれの要素に応じた様々なメソッドが用意されている。例えばリスト要素には**クリア**や**いれ**、フォーム要素に**値?**などのメソッドがある。+HTMLオブジェクトに属性プロパティCSSを設定す方法2種類ある。 
 + 
 +1. タグに直接記述する方法
  
 <​code>​ <​code>​
- メッセージボード!クリア。 // リストの内容をクリアする + 要素=<span id="​hoge"​ style="​color:​ blue;"></span>。
- ​メッセージ=<li></li>!("​こんにちは"​)テキスト。 // liタグに文字列を設定 +
- ​メッセージボード!(メッセージ)いれる。 // ulタグにliタグを追加 +
- ​入力された内容=入力欄!値?。 // 入力欄の値を取得+
 </​code>​ </​code>​
  
-HTMLオブジェクトを使うと、**webapi**オブジェクトと組み合わせることで、サーバとの通信を行う双方向コンテンツを簡潔に記述できる。以下は、簡単なチャトプログラムの例+2. メソド呼び出し設定す方法
  
 <​code>​ <​code>​
- メッセージボード=<ul></ul>。 + 要素=<span></span>。 
- 入力欄=<input>。 + 要素!"​hoge"​ id。 
- 送信ボタン=<button>送信</button>。 + ​要素!"​blue"​ color。 
-  +</code> 
- ​受信_wa ​= webapi!作る。 + 
- 受信_wa.url ="​read.php"​。 +設定した属性やプロパティを参照するには、名前の後ろに「?​」を付ける。 
-  + 
- メッセー表示=メッセージ配列| +<​code>​ 
-  メッセージボー!クリア + ​要素=<span id="​hoge"​></span>。 
-  メッセージ配列!内容 + 要素!id?​。 
-   ​メッセージ=<​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>​。 
 + ​項目1=<​li>​りんご</li>。 
 + ​項目2=<​li>​みかん</​li>​。 
 + ​リスト!(項目1入れる。 
 + リスト!(項目2)入れる。 
 +</​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>​ </​code>​
  
-このプログラムで、サーバ側で動作するPHPプログラム(read.phpwrite.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 +HTMLID属性を使って要素を取得するには「#​」を使用する。これにより、ページ内の特定の要素に簡単にアクセスできる。
-<?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>​ <​code>​
- 送信ボタン:動作 + フレーム<​iframe></​iframe>​。 
-  // ボタンがクリックされたときの処理 + フレーム!"​https:​//example.com/"​ ソース
- 」+
 </​code>​ </​code>​
  
-HTMLオブジェクトを使った双方向コンテンツの開発クライアント側とサーバ側処理明確に分けることで、プログラ構造が理解しすくる。クラント側では主にユーザインターフェースと画面更新処理を記述しサーバ側ではデータの保存取得などの処理記述する。これにより、プログラ保守性や拡張性が向上する。+ハイパーリンクを作成するには「a」タグを使う。これにより、他のページへの移動を実現できる。 
 + 
 +<​code>​ 
 + ​リンク=<​a href="​https://​example.com/">​リンクテキスト</​a>​。 
 +</​code>​ 
 + 
 +HTMLオブジェクトを使うことで、Web開発基本的な考え方や技術学ぶこときる。HTMLとCSSの基本を理解しドリトルのプログラミング機能と組み合わせることで、ボタンクリックフォームの送信どのント処理、データの表示入力フォームの作成など、多様なWebアプリケーション機能実装できる。また、サーバとの通信(WebAPI)を組み合わせるとで、り実践的なアプリケーションを構築することができる。 
 + 
 +HTMLオブジェクトはWebプログラミングの入門として最適であり、プログラミング基本構造(変数、条件分岐、繰り返し)とHTML/​CSSの基本を同時に学べる環境を提供している。
ch_html_js.1741328089.txt.gz · 最終更新: 2025/03/07 15:14 by klab