この文書の現在のバージョンと選択したバージョンの差分を表示します。
次のリビジョン | 前のリビジョン | ||
ref_html_js [2025/03/07 15:53] klab 作成 |
ref_html_js [2025/03/13 21:46] (現在) klab |
||
---|---|---|---|
ライン 6: | ライン 6: | ||
## HTMLオブジェクトの基本 | ## HTMLオブジェクトの基本 | ||
- | * HTMLタグは角括弧(<>)で囲んで作成します。 | + | * HTMLタグは数値や文字列と同じように、角括弧(<>)で囲んで作成します。 |
* (例)順序なしリスト(ul)タグを作成します。 | * (例)順序なしリスト(ul)タグを作成します。 | ||
ライン 24: | ライン 24: | ||
* HTMLオブジェクトには、それぞれの要素に応じた様々なメソッドが用意されています。 | * HTMLオブジェクトには、それぞれの要素に応じた様々なメソッドが用意されています。 | ||
+ | * 生成されたHTMLタグはオブジェクトであり、プロパティやメソッドの定義はタートルから作った「かめた」と同様に行えます。 | ||
## タグの属性設定 | ## タグの属性設定 | ||
- | * HTMLタグには、属性を直接指定することができます。 | + | * HTMLタグの属性、プロパティ、CSSには2つの設定方法があります。 |
+ | * 1つ目は、タグに直接記述する方法です。 | ||
* (例)右寄せを指定したpタグを作成します。 | * (例)右寄せを指定したpタグを作成します。 | ||
ライン 42: | ライン 44: | ||
段落=<p id="id1">IDを持つ段落</p>。 | 段落=<p id="id1">IDを持つ段落</p>。 | ||
</code> | </code> | ||
+ | |||
+ | * 2つ目は、タグを生成した後にメソッド呼び出しで設定する方法です。 | ||
+ | * (例)idを設定します。 | ||
+ | |||
+ | <code> | ||
+ | 段落=<p></p>。 | ||
+ | 段落!"id1" id。 | ||
+ | </code> | ||
+ | * (例)属性の値を取得します。 | ||
+ | |||
+ | <code> | ||
+ | 段落=<p id="id1"></p>。 | ||
+ | <span></span>!(段落!id?)テキスト。 | ||
+ | </code> | ||
+ | |||
+ | * 以下は、さまざまな属性を設定する例です。 | ||
* (例)typeを指定したリストを作成します。 | * (例)typeを指定したリストを作成します。 | ||
ライン 65: | ライン 83: | ||
<code> | <code> | ||
- | チェックボックス=<input type="checkbox" value="aaa">。 | + | チェックボックス=<input type="checkbox" value="checked">。 |
</code> | </code> | ||
* (例)スライダーを作成します。 | * (例)スライダーを作成します。 | ||
ライン 86: | ライン 104: | ||
<code> | <code> | ||
投票数=<div class="vote-count" id="fox-votes"></div>。 | 投票数=<div class="vote-count" id="fox-votes"></div>。 | ||
- | </code> | ||
- | * (例)複数のクラス名を指定します。 | ||
- | |||
- | <code> | ||
- | ピクセル=<div class="pixel line-1"></div>。 | ||
</code> | </code> | ||
ライン 101: | ライン 114: | ||
</code> | </code> | ||
- | * **いれる** : 子要素としてHTMLタグを追加します。 | + | * **入れる** : divやulのような、他のタグを包括するようなタグに、他のタグをchildNodeとして追加するときに使用します。 |
* (例)ulタグにliタグを追加します。 | * (例)ulタグにliタグを追加します。 | ||
ライン 107: | ライン 120: | ||
メッセージボード=<ul></ul>。 | メッセージボード=<ul></ul>。 | ||
メッセージ=<li></li>!("こんにちは")テキスト。 | メッセージ=<li></li>!("こんにちは")テキスト。 | ||
- | メッセージボード!(メッセージ)いれる。 | + | メッセージボード!(メッセージ)入れる。 |
</code> | </code> | ||
+ | * (例)複数の要素を一度に追加します。 | ||
- | * **クリア** : 内容をクリアします。 | + | <code> |
+ | 表示=<ul></ul>。 | ||
+ | 要素1=<li>hoge</li>。 | ||
+ | 表示!(要素1)入れる。 | ||
+ | 要素2=<li>fuga</li>。 | ||
+ | 表示!(要素2)入れる。 | ||
+ | 要素3=<li>piyo</li>。 | ||
+ | 表示!(要素3)入れる。 | ||
+ | </code> | ||
+ | |||
+ | * **クリア** : 中身をすべて削除するときに使います。innerHTMLごと削除するので、childNodeもinnerTextも消えます。 | ||
* (例)ulタグの内容をクリアします。 | * (例)ulタグの内容をクリアします。 | ||
ライン 116: | ライン 140: | ||
メッセージボード!クリア。 | メッセージボード!クリア。 | ||
</code> | </code> | ||
+ | |||
+ | * **動作** : イベントハンドラーで、このプロパティにブロックを代入しておくと、以下のイベントを検出したときに実行します。 | ||
+ | * 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** : HTMLタグの内部コンテンツを設定・取得します。テキストだけでなくHTMLタグを含む内容も設定できます。 | ||
ライン 228: | ライン 292: | ||
<code> | <code> | ||
入力欄=<input>。 | 入力欄=<input>。 | ||
- | ラベル!(入力欄!値?)作る。 | + | <span></span>!(入力欄!値?)テキスト。 |
</code> | </code> | ||
ライン 264: | ライン 328: | ||
結果=<p></p>。 | 結果=<p></p>。 | ||
結果:テキスト=スライダー:value。 | 結果:テキスト=スライダー: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> | </code> | ||
ライン 360: | ライン 357: | ||
メッセージ配列!「|内容| | メッセージ配列!「|内容| | ||
メッセージ=<li></li>!(内容)テキスト。 | メッセージ=<li></li>!(内容)テキスト。 | ||
- | メッセージボード!(メッセージ)いれる。 | + | メッセージボード!(メッセージ)入れる。 |
」それぞれ実行。 | 」それぞれ実行。 | ||
」。 | 」。 | ||
ライン 395: | ライン 392: | ||
## よく使われるHTMLタグ | ## よく使われるHTMLタグ | ||
+ | * ドリトルでは多くのHTMLタグが使用できます。以下はよく使われるタグの例です。 | ||
+ | |||
* **ul, li** : 順序なしリストとリスト項目を表示します。 | * **ul, li** : 順序なしリストとリスト項目を表示します。 | ||
* (例)順序なしリストを作成します。 | * (例)順序なしリストを作成します。 | ||
ライン 402: | ライン 401: | ||
項目1=<li></li>!("項目1")テキスト。 | 項目1=<li></li>!("項目1")テキスト。 | ||
項目2=<li></li>!("項目2")テキスト。 | 項目2=<li></li>!("項目2")テキスト。 | ||
- | リスト!(項目1)いれる(項目2)いれる。 | + | リスト!(項目1)入れる(項目2)入れる。 |
</code> | </code> | ||
ライン 412: | ライン 411: | ||
項目1=<li></li>!("項目1")テキスト。 | 項目1=<li></li>!("項目1")テキスト。 | ||
項目2=<li></li>!("項目2")テキスト。 | 項目2=<li></li>!("項目2")テキスト。 | ||
- | リスト!(項目1)いれる(項目2)いれる。 | + | リスト!(項目1)入れる(項目2)入れる。 |
</code> | </code> | ||
ライン 488: | ライン 487: | ||
コンテナ=<div></div>。 | コンテナ=<div></div>。 | ||
テキスト=<p></p>!("こんにちは")テキスト。 | テキスト=<p></p>!("こんにちは")テキスト。 | ||
- | コンテナ!(テキスト)いれる。 | + | コンテナ!(テキスト)入れる。 |
</code> | </code> | ||
ライン 523: | ライン 522: | ||
<code> | <code> | ||
画像=<img src="画像ファイルのURL" alt="きつねのアイコン" class="pet-icon">。 | 画像=<img src="画像ファイルのURL" alt="きつねのアイコン" class="pet-icon">。 | ||
- | </code> | ||
- | |||
- | * **figure** : 画像や図表などを囲むコンテナとして使用します。 | ||
- | * (例)画像をfigureタグで囲みます。 | ||
- | |||
- | <code> | ||
- | 図=<figure> | ||
- | <img src="https://www.osakac.ac.jp/about/overview/symbol3/img/symbol3-mark01.jpg"> | ||
- | </figure>。 | ||
</code> | </code> | ||
ライン 634: | ライン 624: | ||
送信ボタン:動作=「 | 送信ボタン:動作=「 | ||
メッセージ=<li></li>!(入力欄!値?)テキスト。 | メッセージ=<li></li>!(入力欄!値?)テキスト。 | ||
- | メッセージボード!(メッセージ)いれる。 | + | メッセージボード!(メッセージ)入れる。 |
入力欄!("")値。 | 入力欄!("")値。 | ||
」。 | 」。 | ||
ライン 646: | ライン 636: | ||
<h1>ショッピングサイト</h1>。 | <h1>ショッピングサイト</h1>。 | ||
<hr>。 | <hr>。 | ||
- | container = <div></div>。 | + | コンテナ = <div></div>。 |
商品表示=「|商品名 価格 画像URL| | 商品表示=「|商品名 価格 画像URL| | ||
商品画像=<img class="card-image">。 | 商品画像=<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> | </code> | ||
+ | * サーバプログラム(shopping.php) | ||
+ | |||
+ | ```php | ||
+ | <?php | ||
+ | $list = [ | ||
+ | ["coffee", 130, "https://example.com/cofee.jpg"], | ||
+ | ["tee", 100, "https://example.com/tee.jpg"] | ||
+ | ]; | ||
+ | echo(json_encode($list)); | ||
+ | ``` | ||
## 実践的な例:チャットアプリケーション | ## 実践的な例:チャットアプリケーション |