差分

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

--- ref_html_js [2025/03/13 15:34]
klab
+++ ref_html_js [2025/03/14 11:37] (現在)
klab
@@ ライン 49: / ライン 49: @@
 <code>
- 段落＝<p></p>。
+ 段落＝<p>テキスト</p>。
- 段落！"id1" id。
+ 段落！"id1" 識別子。
 </code>
     * （例）属性の値を取得します。
@@ ライン 56: / ライン 56: @@
 <code>
  段落＝<p id="id1"></p>。
- <span></span>！（段落！id?）テキスト。
+ <span></span>！（段落！識別子?）テキスト。
 </code>
@@ ライン 98: / ライン 98: @@
 <code>
- 画像＝<img src="画像ファイルのURL" alt="きつねのアイコン" class="pet-icon">。
+ 画像＝<img src="画像ファイルのURL" alt="画像の説明" class="image">。
 </code>
     * （例）クラス名を指定します。
 <code>
- 投票数＝<div class="vote-count" id="fox-votes"></div>。
+ コンテナ＝<div class="container" id="container1"></div>。
 </code>
@@ ライン 181: / ライン 181: @@
-  * **innerHTML** : HTMLタグの内部コンテンツを設定・取得します。テキストだけでなくHTMLタグを含む内容も設定できます。
+/*  * **innerHTML** : HTMLタグの内部コンテンツを設定・取得します。テキストだけでなくHTMLタグを含む内容も設定できます。
     * （例）innerHTML属性に文字列を設定します。
@@ ライン 275: / ライン 275: @@
  」。
 </code>
+*/
 ## idセレクタによる要素の取得
@@ ライン 303: / ライン 304: @@
 </code>
+/*
   * **value** : フォーム要素の値を取得・設定するための属性です。
     * （例）入力欄の値を取得します。
@@ ライン 319: / ライン 321: @@
 <code>
- 日付入力＝<input type="date">。
+ 予約日＝<input type="date">。
- 予約日 = 日付入力:value。
+ api:date = 予約日:value。
 </code>
     * （例）スライダーの値を取得します。
@@ ライン 327: / ライン 329: @@
  スライダー＝<input type="range">。
  結果＝<p></p>。
- 結果!(スライダー！値?) テキスト。
+ 結果：テキスト＝スライダー：value。
 </code>
+*/
 ## アラートを表示する
@@ ライン 351: / ライン 354: @@
  受信_wa ＝ webapi!作る。
- 受信_wa:url ＝"read.php"。
+ 受信_wa.url ＝"read.php"。
  メッセージ表示＝「｜メッセージ配列｜
@@ ライン 364: / ライン 367: @@
  送信_wa ＝ webapi!作る。
- 送信_wa:url ＝"write.php"。
+ 送信_wa.url ＝"write.php"。
  名前 ＝"ユーザー"。
  送信ボタン：動作＝「
-  送信_wa:内容＝:名前＋"："＋(:入力欄！値？)。
+  送信_wa.内容＝名前＋"："＋（入力欄！値？）。
   送信_wa！読む。
   メッセージ表示！（受信_wa！読む）実行。
@@ ライン 380: / ライン 383: @@
 //掲示板にメッセージを書き込むwrite.php
 <?php
- $message = $_GET['内容'] . "\n";
+ $message = $_GET['message'] . "\n";
  file_put_contents("chat.txt", $message, FILE_APPEND);
 ?>
@@ ライン 463: / ライン 466: @@
 <code>
  ボタン＝<button>クリック</button>。
- ボタン：動作＝「ラベル！"ボタンがクリックされました" 作る」。
+ ボタン：動作＝「<span></span>！"ボタンがクリックされました" テキスト」。
 </code>
@@ ライン 470: / ライン 473: @@
 <code>
- <style>
- iframe { width: 100%; height: 95%; }
- </style>。
  フレーム＝<iframe></iframe>。
- フレーム:src＝"https://php.dolittle.cc/"。
+ フレーム！"https://example.com/" ソース。
- 削除ボタン＝<button>消す</button>。
- 削除ボタン:動作＝「
-  フレーム！remove。
- 」。
 </code>
@@ ライン 494: / ライン 490: @@
 <code>
- テキスト＝<span></span>！（"強調"）テキスト。
+ テキスト＝<span></span>！（"こんにちは"）テキスト。
 </code>
@@ ライン 508: / ライン 504: @@
 <code>
- タイトル＝<h1>大阪電気通信大学</h1>。
+ タイトル＝<h1>タイトル</h1>。
- 見出し＝<h2>学部</h2>。
+ 見出し＝<h2>見出し</h2>。
 </code>
@@ ライン 516: / ライン 512: @@
 <code>
- 画像＝<img src="https://1.bp.blogspot.com/-n3Ub8R4fZiM/VpjBrFU1A0I/AAAAAAAA26Y/rwZbSFLaSLc/s180-c/bg_school.jpg">。
+ 画像＝<img>。
+ 画像！"https://example.com/image.jpg" ソース。
 </code>
     * （例）代替テキストとクラスを指定した画像を表示します。
 <code>
- 画像＝<img src="画像ファイルのURL" alt="きつねのアイコン" class="pet-icon">。
+ 画像＝<img>。
+ 画像！"example.com/image.jpg" ソース。
+ 画像！"画像の説明" 代替テキスト。
+ 画像！"image" クラス。
 </code>
@@ ライン 529: / ライン 529: @@
 <code>
  表＝<table border="1">
- <tr>
+  <tr>
- <th>工学部</th>
+   <th>工学部</th>
- <th>情報工学部</th>
+   <th>情報工学部</th>
- </tr>
+  </tr>
- <tr>
+  <tr>
- <td>電気電子工学科</td>
+   <td>電気電子工学科</td>
- <td>情報工学科</td>
+   <td>情報工学科</td>
- </tr>
+  </tr>
  </table>。
 </code>
@@ ライン 544: / ライン 544: @@
 <code>
- リンク＝<a href="https://www.city.neyagawa.osaka.jp/index.html">寝屋川市</a>。
+ リンク＝<a>リンク</a>。
+ リンク！"https://example.com" リンク先。
 </code>
@@ ライン 551: / ライン 552: @@
 <code>
- <span>あいことば：</span>。
+ <span>テキスト</span>。
- あいことば＝<input>。
  <br>。
- <span>名前：</span>。
+ <span>次の行</span>。
 </code>
@@ ライン 561: / ライン 561: @@
 <code>
- <h1>ショッピングサイト</h1>。
+ <h1>ドリトルリファレンス</h1>。
  <hr/>。
 </code>
@@ ライン 636: / ライン 636: @@
  <h1>ショッピングサイト</h1>。
  <hr>。
- container = <div></div>。
+ コンテナ = <div></div>。
  商品表示=「|商品名 価格 画像URL|
   商品画像=<img class="card-image">。
-  商品画像:src=画像URL。
+  商品画像！(画像URL) ソース。
-  商品名表示=<h2></h2>。
+  商品名表示=<h2></h2>！(商品名) テキスト。
-  商品名表示:innerHTML=商品名。
+  価格表示=<p></p>！("￥" + 価格) テキスト。
-  価格表示=<p></p>。
+  コンテナ!(商品画像)(商品名表示)(価格表示)(<hr>)入れる。
-  価格表示:innerHTML="￥" + 価格。
-  container!(商品画像)(商品名表示)(価格表示)(<hr>)append。
  」。
- 商品表示！"コーヒー" 130 "https://example.com/coffee.jpg" 実行。
+ 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));
+```
 ## 実践的な例：チャットアプリケーション

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

ユーザ用ツール

サイト用ツール

差分

ページ用ツール