差分

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

--- ref_html_js [2025/03/12 23:31]
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>
@@ ライン 170: / ライン 170: @@
  」。
 </code>
+    * 動作は「動作設定」メソッドを使用することでも定義することができます。
-  * **innerHTML** : HTMLタグの内部コンテンツを設定・取得します。テキストだけでなくHTMLタグを含む内容も設定できます。
+<code>
+ 送信ボタン＝<button>送信</button>。
+ 送信ボタン！「
+  <span></span>！"ボタンが押されました" テキスト。
+ 」 動作設定。
+</code>
+/*  * **innerHTML** : HTMLタグの内部コンテンツを設定・取得します。テキストだけでなくHTMLタグを含む内容も設定できます。
     * （例）innerHTML属性に文字列を設定します。
@@ ライン 265: / ライン 275: @@
  」。
 </code>
+*/
 ## idセレクタによる要素の取得
@@ ライン 282: / ライン 293: @@
 <code>
  入力欄＝<input>。
- ラベル！（入力欄！値？）作る。
+ <span></span>！（入力欄！値？）テキスト。
 </code>
@@ ライン 293: / ライン 304: @@
 </code>
+/*
   * **value** : フォーム要素の値を取得・設定するための属性です。
     * （例）入力欄の値を取得します。
@@ ライン 319: / ライン 331: @@
  結果：テキスト＝スライダー：value。
 </code>
+*/
 ## アラートを表示する
@@ ライン 453: / ライン 466: @@
 <code>
  ボタン＝<button>クリック</button>。
- ボタン：動作＝「ラベル！"ボタンがクリックされました" 作る」。
+ ボタン：動作＝「<span></span>！"ボタンがクリックされました" テキスト」。
 </code>
@@ ライン 460: / ライン 473: @@
 <code>
- <style>
- iframe { width: 100%; height: 95%; }
- </style>。
  フレーム＝<iframe></iframe>。
- フレーム:src＝"https://php.dolittle.cc/"。
+ フレーム！"https://example.com/" ソース。
- 削除ボタン＝<button>消す</button>。
- 削除ボタン:動作＝「
-  フレーム！remove。
- 」。
 </code>
@@ ライン 484: / ライン 490: @@
 <code>
- テキスト＝<span></span>！（"強調"）テキスト。
+ テキスト＝<span></span>！（"こんにちは"）テキスト。
 </code>
@@ ライン 498: / ライン 504: @@
 <code>
- タイトル＝<h1>大阪電気通信大学</h1>。
+ タイトル＝<h1>タイトル</h1>。
- 見出し＝<h2>学部</h2>。
+ 見出し＝<h2>見出し</h2>。
 </code>
@@ ライン 506: / ライン 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>
@@ ライン 519: / ライン 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>
@@ ライン 534: / ライン 544: @@
 <code>
- リンク＝<a href="https://www.city.neyagawa.osaka.jp/index.html">寝屋川市</a>。
+ リンク＝<a>リンク</a>。
+ リンク！"https://example.com" リンク先。
 </code>
@@ ライン 541: / ライン 552: @@
 <code>
- <span>あいことば：</span>。
+ <span>テキスト</span>。
- あいことば＝<input>。
  <br>。
- <span>名前：</span>。
+ <span>次の行</span>。
 </code>
@@ ライン 551: / ライン 561: @@
 <code>
- <h1>ショッピングサイト</h1>。
+ <h1>ドリトルリファレンス</h1>。
  <hr/>。
 </code>
@@ ライン 626: / ライン 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));
+```
 ## 実践的な例：チャットアプリケーション

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

ユーザ用ツール

サイト用ツール

差分

ページ用ツール