この文書の現在のバージョンと選択したバージョンの差分を表示します。
両方とも前のリビジョン 前のリビジョン 次のリビジョン | 前のリビジョン | ||
ref_html_js [2025/03/12 23:31] klab |
ref_html_js [2025/03/14 11:37] (現在) klab |
||
---|---|---|---|
ライン 49: | ライン 49: | ||
<code> | <code> | ||
- | 段落=<p></p>。 | + | 段落=<p>テキスト</p>。 |
- | 段落!"id1" id。 | + | 段落!"id1" 識別子。 |
</code> | </code> | ||
* (例)属性の値を取得します。 | * (例)属性の値を取得します。 | ||
ライン 56: | ライン 56: | ||
<code> | <code> | ||
段落=<p id="id1"></p>。 | 段落=<p id="id1"></p>。 | ||
- | <span></span>!(段落!id?)テキスト。 | + | <span></span>!(段落!識別子?)テキスト。 |
</code> | </code> | ||
ライン 98: | ライン 98: | ||
<code> | <code> | ||
- | 画像=<img src="画像ファイルのURL" alt="きつねのアイコン" class="pet-icon">。 | + | 画像=<img src="画像ファイルのURL" alt="画像の説明" class="image">。 |
</code> | </code> | ||
* (例)クラス名を指定します。 | * (例)クラス名を指定します。 | ||
<code> | <code> | ||
- | 投票数=<div class="vote-count" id="fox-votes"></div>。 | + | コンテナ=<div class="container" id="container1"></div>。 |
</code> | </code> | ||
ライン 170: | ライン 170: | ||
」。 | 」。 | ||
</code> | </code> | ||
+ | * 動作は「動作設定」メソッドを使用することでも定義することができます。 | ||
- | * **innerHTML** : HTMLタグの内部コンテンツを設定・取得します。テキストだけでなくHTMLタグを含む内容も設定できます。 | + | <code> |
+ | 送信ボタン=<button>送信</button>。 | ||
+ | 送信ボタン!「 | ||
+ | <span></span>!"ボタンが押されました" テキスト。 | ||
+ | 」 動作設定。 | ||
+ | </code> | ||
+ | |||
+ | |||
+ | |||
+ | /* * **innerHTML** : HTMLタグの内部コンテンツを設定・取得します。テキストだけでなくHTMLタグを含む内容も設定できます。 | ||
* (例)innerHTML属性に文字列を設定します。 | * (例)innerHTML属性に文字列を設定します。 | ||
ライン 265: | ライン 275: | ||
」。 | 」。 | ||
</code> | </code> | ||
+ | */ | ||
## idセレクタによる要素の取得 | ## idセレクタによる要素の取得 | ||
ライン 282: | ライン 293: | ||
<code> | <code> | ||
入力欄=<input>。 | 入力欄=<input>。 | ||
- | ラベル!(入力欄!値?)作る。 | + | <span></span>!(入力欄!値?)テキスト。 |
</code> | </code> | ||
ライン 293: | ライン 304: | ||
</code> | </code> | ||
+ | /* | ||
* **value** : フォーム要素の値を取得・設定するための属性です。 | * **value** : フォーム要素の値を取得・設定するための属性です。 | ||
* (例)入力欄の値を取得します。 | * (例)入力欄の値を取得します。 | ||
ライン 319: | ライン 331: | ||
結果:テキスト=スライダー:value。 | 結果:テキスト=スライダー:value。 | ||
</code> | </code> | ||
+ | */ | ||
## アラートを表示する | ## アラートを表示する | ||
ライン 453: | ライン 466: | ||
<code> | <code> | ||
ボタン=<button>クリック</button>。 | ボタン=<button>クリック</button>。 | ||
- | ボタン:動作=「ラベル!"ボタンがクリックされました" 作る」。 | + | ボタン:動作=「<span></span>!"ボタンがクリックされました" テキスト」。 |
</code> | </code> | ||
ライン 460: | ライン 473: | ||
<code> | <code> | ||
- | <style> | ||
- | iframe { width: 100%; height: 95%; } | ||
- | </style>。 | ||
フレーム=<iframe></iframe>。 | フレーム=<iframe></iframe>。 | ||
- | フレーム:src="https://php.dolittle.cc/"。 | + | フレーム!"https://example.com/" ソース。 |
- | 削除ボタン=<button>消す</button>。 | + | |
- | 削除ボタン:動作=「 | + | |
- | フレーム!remove。 | + | |
- | 」。 | + | |
</code> | </code> | ||
ライン 484: | ライン 490: | ||
<code> | <code> | ||
- | テキスト=<span></span>!("強調")テキスト。 | + | テキスト=<span></span>!("こんにちは")テキスト。 |
</code> | </code> | ||
ライン 498: | ライン 504: | ||
<code> | <code> | ||
- | タイトル=<h1>大阪電気通信大学</h1>。 | + | タイトル=<h1>タイトル</h1>。 |
- | 見出し=<h2>学部</h2>。 | + | 見出し=<h2>見出し</h2>。 |
</code> | </code> | ||
ライン 506: | ライン 512: | ||
<code> | <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> | ||
* (例)代替テキストとクラスを指定した画像を表示します。 | * (例)代替テキストとクラスを指定した画像を表示します。 | ||
<code> | <code> | ||
- | 画像=<img src="画像ファイルのURL" alt="きつねのアイコン" class="pet-icon">。 | + | 画像=<img>。 |
+ | 画像!"example.com/image.jpg" ソース。 | ||
+ | 画像!"画像の説明" 代替テキスト。 | ||
+ | 画像!"image" クラス。 | ||
</code> | </code> | ||
ライン 519: | ライン 529: | ||
<code> | <code> | ||
表=<table border="1"> | 表=<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>。 | </table>。 | ||
</code> | </code> | ||
ライン 534: | ライン 544: | ||
<code> | <code> | ||
- | リンク=<a href="https://www.city.neyagawa.osaka.jp/index.html">寝屋川市</a>。 | + | リンク=<a>リンク</a>。 |
+ | リンク!"https://example.com" リンク先。 | ||
</code> | </code> | ||
ライン 541: | ライン 552: | ||
<code> | <code> | ||
- | <span>あいことば:</span>。 | + | <span>テキスト</span>。 |
- | あいことば=<input>。 | + | |
<br>。 | <br>。 | ||
- | <span>名前:</span>。 | + | <span>次の行</span>。 |
</code> | </code> | ||
ライン 551: | ライン 561: | ||
<code> | <code> | ||
- | <h1>ショッピングサイト</h1>。 | + | <h1>ドリトルリファレンス</h1>。 |
<hr/>。 | <hr/>。 | ||
</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)); | ||
+ | ``` | ||
## 実践的な例:チャットアプリケーション | ## 実践的な例:チャットアプリケーション |