差分

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

--- ref_html_js [2025/03/07 15:53]
klab 作成
+++ ref_html_js [2025/03/14 11:37] (現在)
klab
@@ ライン 6: / ライン 6: @@
 ## HTMLオブジェクトの基本
-  * HTMLタグは角括弧（<>）で囲んで作成します。
+  * HTMLタグは数値や文字列と同じように、角括弧（<>）で囲んで作成します。
     * （例）順序なしリスト(ul)タグを作成します。
@@ ライン 24: / ライン 24: @@
   * HTMLオブジェクトには、それぞれの要素に応じた様々なメソッドが用意されています。
+  * 生成されたHTMLタグはオブジェクトであり、プロパティやメソッドの定義はタートルから作った「かめた」と同様に行えます。
 ## タグの属性設定
-  * HTMLタグには、属性を直接指定することができます。
+  * HTMLタグの属性、プロパティ、CSSには2つの設定方法があります。
+  * 1つ目は、タグに直接記述する方法です。
     * （例）右寄せを指定したpタグを作成します。
@@ ライン 42: / ライン 44: @@
  段落＝<p id="id1">IDを持つ段落</p>。
 </code>
+  * 2つ目は、タグを生成した後にメソッド呼び出しで設定する方法です。
+    * （例）idを設定します。
+<code>
+ 段落＝<p>テキスト</p>。
+ 段落！"id1" 識別子。
+</code>
+    * （例）属性の値を取得します。
+<code>
+ 段落＝<p id="id1"></p>。
+ <span></span>！（段落！識別子?）テキスト。
+</code>
+  * 以下は、さまざまな属性を設定する例です。
     * （例）typeを指定したリストを作成します。
@@ ライン 65: / ライン 83: @@
 <code>
- チェックボックス＝<input type="checkbox" value="aaa">。
+ チェックボックス＝<input type="checkbox" value="checked">。
 </code>
     * （例）スライダーを作成します。
@@ ライン 80: / ライン 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>
-    * （例）複数のクラス名を指定します。
-<code>
- ピクセル＝<div class="pixel line-1"></div>。
 </code>
@@ ライン 101: / ライン 114: @@
 </code>
-  * **いれる** : 子要素としてHTMLタグを追加します。
+  * **入れる** : divやulのような、他のタグを包括するようなタグに、他のタグをchildNodeとして追加するときに使用します。
     * （例）ulタグにliタグを追加します。
@@ ライン 107: / ライン 120: @@
  メッセージボード＝<ul></ul>。
  メッセージ＝<li></li>！（"こんにちは"）テキスト。
- メッセージボード！（メッセージ）いれる。
+ メッセージボード！（メッセージ）入れる。
+</code>
+    * （例）複数の要素を一度に追加します。
+<code>
+ 表示＝<ul></ul>。
+ 要素１＝<li>hoge</li>。
+ 表示！（要素１）入れる。
+ 要素２＝<li>fuga</li>。
+ 表示！（要素２）入れる。
+ 要素３＝<li>piyo</li>。
+ 表示！（要素３）入れる。
 </code>
-  * **クリア** : 内容をクリアします。
+  * **クリア** : 中身をすべて削除するときに使います。innerHTMLごと削除するので、childNodeもinnerTextも消えます。
     * （例）ulタグの内容をクリアします。
@@ ライン 117: / ライン 141: @@
 </code>
-  * **innerHTML** : HTMLタグの内部コンテンツを設定・取得します。テキストだけでなくHTMLタグを含む内容も設定できます。
+  * **動作** : イベントハンドラーで、このプロパティにブロックを代入しておくと、以下のイベントを検出したときに実行します。
+    * inputのtypeが["text", "search", "email", "url", "number", "tel", "password"]の場合は、エンターキーが押されたら
+    * inputのそれ以外は値が変更されたら（onchange）
+    * それ以外のタグはクリックされたら
+    * （例）ボタンがクリックされたときの処理を定義します。
+<code>
+ 送信ボタン＝<button>送信</button>。
+ 送信ボタン：動作＝「
+  <span></span>！"ボタンが押されました" テキスト。
+ 」。
+</code>
+    * （例）入力欄でエンターキーが押されたときの処理を定義します。
+<code>
+ 入力欄＝<input type="text">。
+ 入力欄：動作＝「
+  <span></span>！（入力欄！値？）テキスト。
+ 」。
+</code>
+    * （例）スライダーの値が変更されたときの処理を定義します。
+<code>
+ スライダー＝<input type="range">。
+ 結果＝<p></p>。
+ スライダー：動作＝「
+  結果！(スライダー！値？) テキスト。
+ 」。
+</code>
+    * 動作は「動作設定」メソッドを使用することでも定義することができます。
+<code>
+ 送信ボタン＝<button>送信</button>。
+ 送信ボタン！「
+  <span></span>！"ボタンが押されました" テキスト。
+ 」 動作設定。
+</code>
+/*  * **innerHTML** : HTMLタグの内部コンテンツを設定・取得します。テキストだけでなくHTMLタグを含む内容も設定できます。
     * （例）innerHTML属性に文字列を設定します。
@@ ライン 211: / ライン 275: @@
  」。
 </code>
+*/
 ## idセレクタによる要素の取得
@@ ライン 228: / ライン 293: @@
 <code>
  入力欄＝<input>。
- ラベル！（入力欄！値？）作る。
+ <span></span>！（入力欄！値？）テキスト。
 </code>
@@ ライン 239: / ライン 304: @@
 </code>
+/*
   * **value** : フォーム要素の値を取得・設定するための属性です。
     * （例）入力欄の値を取得します。
@@ ライン 265: / ライン 331: @@
  結果：テキスト＝スライダー：value。
 </code>
+*/
-## イベント処理
-  * HTMLオブジェクトはイベント処理も行えます。例えば、ボタンタグには**動作**メソッドを定義することでクリック時の処理を記述できます。
-    * （例）ボタンがクリックされたときの処理を定義します。
-<code>
- 送信ボタン＝<button>送信</button>。
- 送信ボタン：動作＝「
-  ラベル！"ボタンが押されました" 作る。
- 」。
-</code>
-    * （例）divタグがクリックされたときの処理を定義します。
-<code>
- ピクセル＝<div class="pixel"></div>。
- ピクセル：動作＝「
-  ピクセル:element:style:backgroundColor="red"。
- 」。
-</code>
-    * （例）スライダーの値が変更されたときの処理を定義します。
-<code>
- スライダー＝<input type="range">。
- 結果＝<p></p>。
- スライダー：動作＝「
-  結果：テキスト＝スライダー：value。
- 」。
-</code>
-## 条件分岐による表示切り替え
-  * 条件分岐を使って、表示するHTMLタグを動的に切り替えることができます。
-    * （例）貸出状況に応じてボタンの表示を切り替えます。
-<code>
- 貸出状況表示：作る＝「｜id title author status｜
-  sp=<span></span>。
-  sp：テキスト＝title+"-"+author+"："。
-  「status == "available"」！ なら 「
-   Button=<button>借りる</button>。
-   Button:動作=「
-    // ボタンを押したときの処理
-   」。
-  」そうでなければ「
-   <span>貸出済み</span>。
-  」実行。
-  <br>。
-  自分。
- 」。
-</code>
-    * （例）予約状況に応じてボタンの表示を切り替えます。
-<code>
- 空き状況表示：作る＝「｜date time room status｜
-  sp=<span></span>。
-  sp：テキスト＝room+"-"+time+"："。
-  「status == "空き"」！ なら 「
-   Button=<button>予約</button>。
-   Button:動作=「
-    // 予約処理
-   」。
-  」そうでなければ「
-   <span>予約済み</span>。
-  」実行。
-  <br>。
-  自分。
- 」。
-</code>
 ## アラートを表示する
@@ ライン 360: / ライン 360: @@
   メッセージ配列！「｜内容｜
    メッセージ＝<li></li>！（内容）テキスト。
-   メッセージボード！（メッセージ）いれる。
+   メッセージボード！（メッセージ）入れる。
   」それぞれ実行。
  」。
@@ ライン 395: / ライン 395: @@
 ## よく使われるHTMLタグ
+  * ドリトルでは多くのHTMLタグが使用できます。以下はよく使われるタグの例です。
   * **ul, li** : 順序なしリストとリスト項目を表示します。
     * （例）順序なしリストを作成します。
@@ ライン 402: / ライン 404: @@
  項目1＝<li></li>！（"項目1"）テキスト。
  項目2＝<li></li>！（"項目2"）テキスト。
- リスト！（項目1）いれる（項目2）いれる。
+ リスト！（項目1）入れる（項目2）入れる。
 </code>
@@ ライン 412: / ライン 414: @@
  項目1＝<li></li>！（"項目1"）テキスト。
  項目2＝<li></li>！（"項目2"）テキスト。
- リスト！（項目1）いれる（項目2）いれる。
+ リスト！（項目1）入れる（項目2）入れる。
 </code>
@@ ライン 464: / ライン 466: @@
 <code>
  ボタン＝<button>クリック</button>。
- ボタン：動作＝「ラベル！"ボタンがクリックされました" 作る」。
+ ボタン：動作＝「<span></span>！"ボタンがクリックされました" テキスト」。
 </code>
@@ ライン 471: / ライン 473: @@
 <code>
- <style>
- iframe { width: 100%; height: 95%; }
- </style>。
  フレーム＝<iframe></iframe>。
- フレーム:src＝"https://php.dolittle.cc/"。
+ フレーム！"https://example.com/" ソース。
- 削除ボタン＝<button>消す</button>。
- 削除ボタン:動作＝「
-  フレーム！remove。
- 」。
 </code>
@@ ライン 488: / ライン 483: @@
  コンテナ＝<div></div>。
  テキスト＝<p></p>！（"こんにちは"）テキスト。
- コンテナ！（テキスト）いれる。
+ コンテナ！（テキスト）入れる。
 </code>
@@ ライン 495: / ライン 490: @@
 <code>
- テキスト＝<span></span>！（"強調"）テキスト。
+ テキスト＝<span></span>！（"こんにちは"）テキスト。
 </code>
@@ ライン 509: / ライン 504: @@
 <code>
- タイトル＝<h1>大阪電気通信大学</h1>。
+ タイトル＝<h1>タイトル</h1>。
- 見出し＝<h2>学部</h2>。
+ 見出し＝<h2>見出し</h2>。
 </code>
@@ ライン 517: / ライン 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>。
-</code>
+ 画像！"example.com/image.jpg" ソース。
+ 画像！"画像の説明" 代替テキスト。
-  * **figure** : 画像や図表などを囲むコンテナとして使用します。
+ 画像！"image" クラス。
-    * （例）画像をfigureタグで囲みます。
-<code>
- 図＝<figure>
-  <img src="https://www.osakac.ac.jp/about/overview/symbol3/img/symbol3-mark01.jpg">
- </figure>。
 </code>
@@ ライン 539: / ライン 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>
@@ ライン 554: / ライン 544: @@
 <code>
- リンク＝<a href="https://www.city.neyagawa.osaka.jp/index.html">寝屋川市</a>。
+ リンク＝<a>リンク</a>。
+ リンク！"https://example.com" リンク先。
 </code>
@@ ライン 561: / ライン 552: @@
 <code>
- <span>あいことば：</span>。
+ <span>テキスト</span>。
- あいことば＝<input>。
  <br>。
- <span>名前：</span>。
+ <span>次の行</span>。
 </code>
@@ ライン 571: / ライン 561: @@
 <code>
- <h1>ショッピングサイト</h1>。
+ <h1>ドリトルリファレンス</h1>。
  <hr/>。
 </code>
@@ ライン 634: / ライン 624: @@
  送信ボタン：動作＝「
   メッセージ＝<li></li>！（入力欄！値？）テキスト。
-  メッセージボード！（メッセージ）いれる。
+  メッセージボード！（メッセージ）入れる。
   入力欄！（""）値。
  」。
@@ ライン 646: / ライン 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));
+```
 ## 実践的な例：チャットアプリケーション

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

ユーザ用ツール

サイト用ツール

差分

ページ用ツール