差分

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

--- ref_html_js [2025/03/14 13:29]
klab
+++ ref_html_js [2025/03/20 16:06] (現在)
klab
@@ ライン 44: / ライン 44: @@
  段落＝<p id="id1">IDを持つ段落</p>。
 </code>
+    * （例）CSSのbackground-colorを指定したspanタグを生成します。
+<code>
+ テキスト＝<span style="background-color: red;">背景が赤色のテキスト</span>。
+</code>
   * 2つ目は、タグを生成した後にメソッド呼び出しで設定する方法です。
@@ ライン 105: / ライン 111: @@
  コンテナ＝<div class="container" id="container1"></div>。
 </code>
+    * （例）CSSを指定します。
+        * ここではCSSのbackground-colorにredを設定しています。
+<code>
+ テキスト＝<span>背景が赤色のテキスト</span>。
+ テキスト!"red" 背景色。
+</code>
 ## 共通のメソッドと属性
@@ ライン 242: / ライン 256: @@
  ピクセル:element:style:backgroundColor＝"red"。
 </code>
+*/
-  * **remove** : 要素を削除します。
+  * **削除する** : 要素を削除します。
     * （例）要素を削除します。
 <code>
  要素＝<div>削除される要素</div>。
- 要素！remove。
+ 要素！削除する。
 </code>
+/*
   * **src** : img要素やiframe要素のURLを設定します。
     * （例）img要素に画像URLを設定します。
@@ ライン 279: / ライン 297: @@
 ## idセレクタによる要素の取得
   * `#id` 形式を使ってHTML要素を取得できます。
+  * 現在、`#id`形式で指定できるidには`-`などの記号を含めることができません。
     * （例）idを指定して要素を取得します。
@@ ライン 284: / ライン 303: @@
  <span id="output" style="background-color: lightGreen"></span>。
  出力欄＝#output。
- 出力欄:テキスト＝"ドリトルを使ってテキストを設定"。
+ 出力欄！"ドリトルを使ってテキストを設定" テキスト。
 </code>
@@ ライン 332: / ライン 351: @@
 </code>
 */
+/*
 ## アラートを表示する
   * `alert` メソッドを使用して、アラートダイアログを表示できます。
@@ ライン 343: / ライン 362: @@
  」。
 </code>
+*/
 ## WebAPIとの連携
@@ ライン 610: / ライン 631: @@
 </code>
 */
-## HTMLオブジェクトの利点
-  * HTMLタグをプログラム内に直接記述可能なため、動的な画面更新を簡潔に記述できます。
-  * WebAPIによるサーバ側とクライアント側で処理を分離することで、各処理の責任範囲が明確になり、可読性が高くなります。
-  * HTMLとプログラムが混在しないため、従来のCGI方式と比較して処理の流れが理解しやすくなります。
 ## 実践的な例：メッセージボード
   * 以下は、ボタンをクリックするとメッセージを追加表示するシンプルなメッセージボードの例です。
+  * 「メッセージボード」として定義したulタグに対して、あとからliタグを生成して追加します。
+  * 「送信ボタン」がクリックされたら、入力欄に記入された文字列を取得しています。
 <code>
@@ ライン 633: / ライン 649: @@
 </code>
-## 実践的な例：ショッピングサイト
+## 実践的な例：電卓
-  * 以下は、商品を表示するシンプルなショッピングサイトの例です。
+  * 以下は、入力された数値をもとに計算を行う電卓アプリの例です。
+  * 「足す」ボタンがクリックされたら、入力１・入力２から値を取得して、計算結果を「結果」に表示しています。
 <code>
- <style> .card-image{width:100px;} </style>。
+<h1>電卓</h1>。
- <h1>ショッピングサイト</h1>。
+<span>入力１：</span>。
- <hr>。
+入力１＝<input>。
- コンテナ = <div></div>。
+<br>。
- 商品表示=「|商品名 価格 画像URL|
+<span>入力２：</span>。
-  商品画像=<img class="card-image">。
+入力２＝<input>。
-  商品画像！(画像URL) ソース。
+<br>。
-  商品名表示=<h2></h2>！(商品名) テキスト。
+結果＝<span></span>。
-  価格表示=<p></p>！("￥" + 価格) テキスト。
+足す＝<button>＋</button>。
-  コンテナ!(商品画像)(商品名表示)(価格表示)(<hr>)入れる。
+足す：動作＝「
- 」。
+　　結果！（（入力１！値？）＋（入力２！値？））テキスト。
+」。
- wa = webapi!作る。
- wa:url = "shopping.php"。
- 商品リスト = wa!読む。
- 商品リスト！「|商品|
-  商品表示！(商品!1 読む)(商品！2 読む)(商品！3 読む)実行。
- 」それぞれ実行。
 </code>
-  * サーバプログラム(shopping.php)
-```php
-<?php
-$list = [
- ["coffee", 130, "https://example.com/cofee.jpg"],
- ["tee", 100, "https://example.com/tee.jpg"]
-];
-echo(json_encode($list));
-```
-## 実践的な例：チャットアプリケーション
+  * 以下は、「引く」ボタンを追加する例です。
-  * 以下は、合言葉を使ったグループチャットの例です。
+  * 同じように、「かける」「割る」ボタンを簡単に追加することができます。
 <code>
- <span>あいことば：</span>。
+引く＝<button>ー</button>。
- あいことば＝<input>。
+引く：動作＝「
- <br>。
+　　結果！（（入力１！値？）-（入力２！値？））テキスト。
- <span>名前：</span>。
+」。
- 名前＝<input>。
- <br>。
- <span>書き込み内容： </span>。
- 書き込み内容＝<input>。
- <br>。
- 送信ボタン＝<button>送信</button>。
- 掲示板＝<ul style="border:solid;"></ul>。
- 送信_wa ＝ webapi!作る。
- 送信_wa:url = "chat_send.php"。
- 送信ボタン：動作＝「
-  送信_wa:message＝"["+(あいことば:value)+"]"。
-  送信_wa:message＝送信_wa:message+(名前:value)＋"："。
-  送信_wa:message＝送信_wa:message+(書き込み内容:value)。
-  送信_wa!読む。
- 」。
- 受信_wa ＝ webapi!作る。
- 受信_wa:url = "chat_read.php"。
- タイマー！作る　３　間隔　６００　時間「
-  受信_wa:あいことば＝あいことば:value。
-  掲示板:innerHTML＝""。
-  書き込み一覧＝受信_wa！読む。
-  書き込み一覧:data!「｜メッセージ｜
-   ポスト＝<li></li>。
-   ポスト:テキスト＝メッセージ。
-   ポスト！（掲示板）appendTo。
-  」それぞれ実行。
- 」実行。
 </code>
-## 実践的な例：投票サイト
+## 実践的な例：くじ引き
-  * 以下は、投票機能を持つシンプルな投票サイトの例です。
+  * 以下は、乱数を使ったくじ引きの例です。
+  * １以上、５以下の値を生成し、１が出たときだけ「あたり」、それ以外が出たら「はずれ」を表示します。
 <code>
- <style>
+<h1>くじ引き</h1>。
-  .pet-icon{width:100px;}
+ボタン＝<button>くじを引く</button>。
-  .vote-count{font-weight:bold;}
+結果表示＝<p></p>。
- </style>。
- <h1>あなたはどっち派？</h1>。
- <img src="きつね画像のURL" alt="きつねのアイコン" class="pet-icon">。
- <h2>きつね派</h2>。
- きつねButton=<button>投票する</button>。
- きつね票数＝<div class="vote-count" id="fox-votes"></div>。
- <img src="たぬき画像のURL" alt="たぬきのアイコン" class="pet-icon">。
- <h2>たぬき派</h2>。
- たぬきButton=<button>投票する</button>。
- たぬき票数＝<div class="vote-count" id="raccoondog-votes"></div>。
- api = webapi!作る。
- api:url = "vote.phpのURL"。
- 結果表示＝「」。
- 結果表示：作る＝「｜fox raccoondog｜
-  :きつね票数：テキスト＝fox+"票"。
-  :たぬき票数：テキスト＝raccoondog+"票"。
- 」。
- きつねButton:動作=「
-  :api:vote="fox"。
-  r = :api!読む。
-  r:results！「|結果|
-   結果表示！(結果!1 読む) (結果!2 読む)作る。
-  」それぞれ実行。
- 」。
- たぬきButton:動作=「
-  :api:vote="raccoondog"。
-  r = :api!読む。
-  r:results！「|結果|
-   結果表示！(結果!1 読む) (結果!2 読む)作る。
-  」それぞれ実行。
- 」。
- // 初期状態の表示
- r = api!読む。
- r:results！「|結果|
-  結果表示！(結果!1 読む) (結果!2 読む)作る。
- 」それぞれ実行。
-</code>
-## 実践的な例：ドット絵エディタ
+くじ箱＝配列！"あたり" "はずれ" "はずれ" "はずれ" "はずれ" 作る。
-  * 以下は、シンプルなドット絵エディタの例です。
-<code>
+ボタン：動作＝「
- <style>
+    結果＝くじ箱！(乱数(5)) 読む。
- .pixel{width:6px;height:6px;}
+    結果表示！(結果) テキスト。
- .line{display:flex;}
+」。
- .canvas{border:solid;}
- </style>。
- // WebAPIの設定
- write_wa = webapi!作る。
- write_wa:url = "pixelArt_set.phpのURL"。
- // 色変更とサーバー更新処理
- write = 「|x y color|
-  write_wa:x=x。
-  write_wa:y=y。
-  write_wa:c=color。
-  write_wa!読む。
- 」。
- // キャンバスの作成
- canvas = <div class=canvas></div>。
- canvas_ary = 配列！作る。
- 「|y|
-  line = <div class=line></div>。
-  line_ary = 配列！作る。
-  「|x;pixel|
-   pixel = <div class=pixel></div>。
-   pixel：動作＝「
-    pixel:element:style:backgroundColor="red"。
-    write!(x)(y)("red")実行。
-   」。
-   pixel!(line)appendTo。
-   line_ary!(pixel)書く。
-  」！１００　繰り返す。
-  line!(canvas)appendTo.
-  canvas_ary!(line_ary)書く。
- 」！１００　繰り返す。
- // サーバーからの状態取得処理
- read_wa = webapi!作る。
- read_wa:url = "pixelArt_get.phpのURL"。
- タイマー！作る　３　間隔　６００　時間「
-  canvas_sv = read_wa!読む。
-  canvas_sv！「｜line y｜
-   line！「｜color x; pixel｜
-    pixel = canvas_ary!(y)読む (x)読む。
-    pixel:element:style:backgroundColor=color。
-   」それぞれ実行。
-  」それぞれ実行。
- 」実行。
-</code>
-## 実践的な例：予約サイト
-  * 以下は、日付を指定して予約できるシンプルな予約サイトの例です。
-<code>
- <h1>予約サイト</h1>。
- result = <div></div>。
- reserve = webapi!作る。
- reserve:url = "reserve.phpのURL"。
- api = webapi!作る。
- api:url = "check_availability.phpのURL"。
- 予約日＝<input type="date">。
- 空き検索＝<button>検索</button>。
- 空き検索:動作=「
-  api:date = 予約日:value。
-  r = api!読む。
-  r:results！「|結果|
-   空き状況表示!(結果!1 読む) (結果!2 読む) (結果!3 読む) (結果!4 読む) 作る。
-  」それぞれ実行。
- 」。
- <br>。
- 空き状況表示＝「」。
- 空き状況表示：作る＝「｜date time room status｜
-  sp=<span></span>。
-  sp：テキスト＝room+"-"+time+"："。
-  「status == "空き"」！ なら 「
-   Button=<button>予約</button>。
-   Button:動作=「
-    reserve:date = date。
-    reserve:time = time。
-    reserve:room = room。
-    r = reserve!読む。
-    「r == "予約が完了しました"」！ なら 「
-     result:テキスト＝date+" "+time+" "+room+"の予約が完了しました"。
-    」実行。
-   」。
-  」そうでなければ「
-   <span>予約済み</span>。
-  」実行。
-  <br>。
-  自分。
- 」。
-</code>
-## 実践的な例：ページ切り替え
-  * 以下は、ボタンをクリックして画面を切り替えるシンプルなページ切り替えの例です。
-<code>
- page1 = <div>
- <h1>page1</h1>
- <p>こんにちは。これはページ１です。</p>
- <button id="toPage2">ページ2へ</button>
- </div>。
- page2 = <div style="display: none;">
- <h1>page2</h1>
- <p>こんばんは。これはページ２です。</p>
- <button id="toPage1">ページ1へ</button>
- </div>。
- #toPage2:動作 = 「
-  page1:style:display = "none"。
-  page2:style:display = "block"。
- 」。
- #toPage1:動作 = 「
-  page2:style:display = "none"。
-  page1:style:display = "block"。
- 」。
-</code>
-## 実践的な例：ポップアップウィンドウ
-  * 以下は、ボタンをクリックしてポップアップウィンドウを表示する例です。
-<code>
- <style>
- .popup-container {
-  position: absolute;
-  top: 50%;
-  left: 50%;
-  border: 1px solid;
-  transform: translate(-50%, -50%);
- }
- </style>。
- popupButton = <button>popup</button>。
- popupButton:動作 = 「|container|
-  container = <div class="popup-container"></div>。
-  title = <h3>ポップアップウィンドウ</h3>。
-  closeButton = <button>閉じる</button>。
-  closeButton:動作 = 「
-   container! remove。
-  」。
-  container!(title) (closeButton) append。
- 」。
 </code>

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

ユーザ用ツール

サイト用ツール

差分

ページ用ツール