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

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

ユーザ用ツール

サイト用ツール


ch_html_js

差分

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

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

両方とも前のリビジョン 前のリビジョン
次のリビジョン
前のリビジョン
ch_html_js [2025/03/07 16:18]
klab
ch_html_js [2025/03/14 10:58] (現在)
klab
ライン 1: ライン 1:
 ## HTMLオブジェクト ## HTMLオブジェクト
  
-**HTML**オブジェクトは、HTMLのタグを直接ドリトルプログラム内に記述し、Webページの要素としてそのまま扱うことができるオブジェクトである。これより、動的な画面更新や双方向コンテンツの開発が容易になる。+**HTML**オブジェクトは、HTMLのタグを直接ドリトルプログラム内に記述し、Webページの要素としてそのまま扱うことができるオブジェクトである。「数値」や「文字列」と同様扱え、動的な画面更新や双方向コンテンツの開発が容易になる。
  
-HTMLオブジェクトは、角括弧(<>​)で囲まれたタグを直接記述することで生成する。タグは開始タグ(<>​)と終了タグ(</>​)をセットで使用する。次のプログラムを実行すると、画面に段落要素(p)として「テキスト」という文字が表示される。+HTMLオブジェクトは、角括弧(<>​)で囲まれたタグを直接記述することで生成する。タグは開始タグ(<>​)と終了タグ(</>​)をセットで使用する。次のプログラムを実行すると、画面に「テキスト」という文字が表示される。
  
 <​code>​ <​code>​
- ​段落=<​p>​テキスト</​p>。+ ​段落=<​span>​テキスト</​span>。
 </​code>​ </​code>​
  
-HTMLオブジェクトの基本的操作には、内容の変更、プロパティ設定、イベント処理定義、階層構造構築などがある。こらを組み合わせることで、多様なWebアプリケーションを開発できる。+/​*生成されたオブジェクトは「root:​dom:​タグ名」子オブジェクトと、プログラム中タグ部分は実行時には「root:​dom:​タグ名!"​文字列"​create」ように変換されて実行される。*/
  
-HTMLオブジェクトの内容を変更するに「テキスト」メソッドを使うプログラム実行すと、段落に「んにちは」いう内容が設定される。+HTMLオブジェクトはメソッドやプロパティ持ち、タートルと同様に操作できる既存HTMLオブジェクトから新しいオブジェクトることもできる。
  
 <​code>​ <​code>​
- 段落=<p></p>。 + テスト=<span>テキスト</span>。 
- 段落!"こんにちは" テスト。+ テスト!"red" ​背景色。 
 + テスト2=テスト!作る
 </​code>​ </​code>​
  
-HTML要素のプロパティ直接アクセスすることもできる。たとえば入力欄の値を取得するには「value」プロパティ、HTML内容を設定する「innerHTML」プロパティ、スイルを設定するには「style」プロパティを使う。+HTMLオブジェクト属性、プロパティ、CSSを設定する方法2種類ある。 
 + 
 +1. グに直接記述する方法
  
 <​code>​ <​code>​
- 入力欄=<input>​。 + 要素=<span id="​hoge"​ style="​color:​ blue;"></​span>​。
- ​入力値=入力欄:value。 +
-  +
- ​コンテナ=<​div></​div>​。 +
- ​コンテナ:innerHTML="<span>内容</​span>​"。 +
-  +
- ​要素=<​div></​div>​。 +
- ​要素:style:display="​none"​+
 </​code>​ </​code>​
  
-HTMLオブジェクトのに別のHTMLオブジェクトを入れるには「いれる「append」「appendTo」などのメソッドを使う。「いれと「append」は追加先のオブジェクトに対して呼び出し、「appendTo」は追加されるオブジェクトに対して呼び出す+2. メソッド呼び出しで設定する方法 
 + 
 +   ​この例ではspanタグを作り、id属性にhogeを、CSSのcolorプロパティにblueを設定している。 
 + 
 +<​code>​ 
 + ​要素=<​span>​テキス</​span>​。 
 + ​要素!"​hoge"​ 識別子。 
 + ​要素!"​blue"​ 文字色。 
 +</​code>​ 
 + 
 +設定した属性やプロパティを参照するには、名前後ろ「?​」を付ける。 
 + 
 +<​code>​ 
 + ​要素=<​span id="​hoge">​テキスト</​span>​。 
 + ​値=要素!識子?。 
 +</​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>​ <​code>​
  ​リスト=<​ul></​ul>​。  ​リスト=<​ul></​ul>​。
- ​項目=<​li>​りんご</​li>​。 + ​項目=<​li>​りんご</​li>​。 
- ​リスト!(項目)れる。 + ​項目2=<​li>​みかん</​li>​。 
- // または + ​リスト!(項目れる。 
- ​項目!(リスト)appendTo+ ​リスト!(項目2入れる
 </​code>​ </​code>​
  
-HTML要素を削除するには「remove」メソッドを使う。これにより動的にコンンツを制御できる。+タグの中身すべて削除するには「クリア」メソッドを使う。これはinnerHTMLごと削除するため子ノードもキストも消える。
  
 <​code>​ <​code>​
- 要素=<​div>​削除される要素</​div>​。 + コンテナ=<​div>​<​p>​テキスト</​p>​</​div>​。 
- 要素remove+ コンテナクリア
 </​code>​ </​code>​
  
-イベント処理には「動作」メソッドを定義する。タンがクリックされたときや、スライダー操作されたときなど、ユーザー操作に応じた処理定義できる。+イベント処理には「動作」プロパティを定義する。要素の種類によって異なるイベントが発生する。 
 + 
 +- inputグ(type="​text"​など):エターキーされたとき 
 +- 特定のinputタグ(checkboxなど):値変更されたとき(onchange) 
 +- それ以外タグ:クリックされとき 
 + 
 +イベント処理定義には「動作設定」メソッドを使用することもできる。
  
 <​code>​ <​code>​
  ​ボタン=<​button>​送信</​button>​。  ​ボタン=<​button>​送信</​button>​。
  ​ボタン:動作=「  ​ボタン:動作=「
-  ​ラベル!"​ボタンがクリックされました" 作る+  ​<​span>​ボタンがクリックされました</​span>​
  ​」。  ​」。
    
- スライダー=<​input type="range">​。 + テキト入力=<​input type="text">​。 
- スライダー:動作=「 + テキト入力!「 
-  ​ラベル!(スライダー:value)テキスト。 +  ​<​span></​span>​!(テキト入力!値?​)テキスト。 
- ​」。+ ​」 ​動作設定
 </​code>​ </​code>​
  
-HTMLオブジェクトは条件分岐と組み合わせて使うことで、状態に応じて異なる表示や機能提供することができる。例えば、特定の条件が満たされた場合にのみボタンを有効にしたり、期間が過ぎたら操作できないようにしたりといった制御が可能である。+HTMLオブジェクトは条件分岐と組み合わせて使うことで、状態に応じて異なる表示を行うことができる。
  
 <​code>​ <​code>​
ライン 70: ライン 99:
   <​span>​実行できません</​span>​。   <​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>​ </​code>​
  
ライン 91: ライン 106:
  <​div id="​output"></​div>​。  <​div id="​output"></​div>​。
  ​出力=#​output。  ​出力=#​output。
- ​出力:テキスト="​ID指定で取得した要素に内容を設定"​。+ ​出力!"​ID指定で取得した要素に内容を設定" ​テキスト
 </​code>​ </​code>​
  
-画面の表示/​非表示を切り替えるには、「style:​display」プロパを使用する。これにより、単一ペジでも複数画面切り替え疑似的なページ遷移を実現できる。ログイン画面、予約フォーム、商品詳細画面など、複数の画面を持つアプリケーションの開発に役立つ+フォーム要素には様々な種類があり、テキスト入力、選択肢、チェックボックスなどを使ってユザーから入力受け付けことができる。
  
 <​code>​ <​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">​。  ​チェックボックス=<​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>​ </​code>​
  
ライン 169: ライン 123:
  
 <​code>​ <​code>​
- <​style>​ 
-  iframe { width: 100%; height: 500px; } 
- </​style>​。 
-  
  ​フレーム=<​iframe></​iframe>​。  ​フレーム=<​iframe></​iframe>​。
- ​フレーム:src="​https://​example.com/"​。+ ​フレーム"​https://​example.com/" ​ソース
 </​code>​ </​code>​
  
ライン 183: ライン 133:
 </​code>​ </​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基本同時に学べ環境提供している。
ch_html_js.1741331924.txt.gz · 最終更新: 2025/03/07 16:18 by klab