この文書の現在のバージョンと選択したバージョンの差分を表示します。
両方とも前のリビジョン 前のリビジョン 次のリビジョン | 前のリビジョン | ||
ref_html_js [2025/03/12 23:31] klab |
ref_html_js [2025/03/13 21:46] (現在) klab |
||
---|---|---|---|
ライン 170: | ライン 170: | ||
」。 | 」。 | ||
</code> | </code> | ||
+ | * 動作は「動作設定」メソッドを使用することでも定義することができます。 | ||
+ | |||
+ | <code> | ||
+ | 送信ボタン=<button>送信</button>。 | ||
+ | 送信ボタン!「 | ||
+ | <span></span>!"ボタンが押されました" テキスト。 | ||
+ | 」 動作設定。 | ||
+ | </code> | ||
+ | |||
+ | |||
* **innerHTML** : HTMLタグの内部コンテンツを設定・取得します。テキストだけでなくHTMLタグを含む内容も設定できます。 | * **innerHTML** : HTMLタグの内部コンテンツを設定・取得します。テキストだけでなくHTMLタグを含む内容も設定できます。 | ||
ライン 282: | ライン 292: | ||
<code> | <code> | ||
入力欄=<input>。 | 入力欄=<input>。 | ||
- | ラベル!(入力欄!値?)作る。 | + | <span></span>!(入力欄!値?)テキスト。 |
</code> | </code> | ||
ライン 626: | ライン 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)); | ||
+ | ``` | ||
## 実践的な例:チャットアプリケーション | ## 実践的な例:チャットアプリケーション |