この文書の現在のバージョンと選択したバージョンの差分を表示します。
次のリビジョン | 前のリビジョン | ||
ref_html_js [2025/03/07 15:53] klab 作成 |
ref_html_js [2025/03/14 11:37] (現在) 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" 識別子。 | ||
+ | </code> | ||
+ | * (例)属性の値を取得します。 | ||
+ | |||
+ | <code> | ||
+ | 段落=<p id="id1"></p>。 | ||
+ | <span></span>!(段落!識別子?)テキスト。 | ||
+ | </code> | ||
+ | |||
+ | * 以下は、さまざまな属性を設定する例です。 | ||
* (例)typeを指定したリストを作成します。 | * (例)typeを指定したリストを作成します。 | ||
ライン 65: | ライン 83: | ||
<code> | <code> | ||
- | チェックボックス=<input type="checkbox" value="aaa">。 | + | チェックボックス=<input type="checkbox" value="checked">。 |
</code> | </code> | ||
* (例)スライダーを作成します。 | * (例)スライダーを作成します。 | ||
ライン 80: | ライン 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> | + | |
- | ピクセル=<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> | ||
+ | 表示=<ul></ul>。 | ||
+ | 要素1=<li>hoge</li>。 | ||
+ | 表示!(要素1)入れる。 | ||
+ | 要素2=<li>fuga</li>。 | ||
+ | 表示!(要素2)入れる。 | ||
+ | 要素3=<li>piyo</li>。 | ||
+ | 表示!(要素3)入れる。 | ||
</code> | </code> | ||
- | * **クリア** : 内容をクリアします。 | + | * **クリア** : 中身をすべて削除するときに使います。innerHTMLごと削除するので、childNodeもinnerTextも消えます。 |
* (例)ulタグの内容をクリアします。 | * (例)ulタグの内容をクリアします。 | ||
ライン 117: | ライン 141: | ||
</code> | </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属性に文字列を設定します。 | * (例)innerHTML属性に文字列を設定します。 | ||
ライン 211: | ライン 275: | ||
」。 | 」。 | ||
</code> | </code> | ||
+ | */ | ||
## idセレクタによる要素の取得 | ## idセレクタによる要素の取得 | ||
ライン 228: | ライン 293: | ||
<code> | <code> | ||
入力欄=<input>。 | 入力欄=<input>。 | ||
- | ラベル!(入力欄!値?)作る。 | + | <span></span>!(入力欄!値?)テキスト。 |
</code> | </code> | ||
ライン 239: | ライン 304: | ||
</code> | </code> | ||
+ | /* | ||
* **value** : フォーム要素の値を取得・設定するための属性です。 | * **value** : フォーム要素の値を取得・設定するための属性です。 | ||
* (例)入力欄の値を取得します。 | * (例)入力欄の値を取得します。 | ||
ライン 265: | ライン 331: | ||
結果:テキスト=スライダー:value。 | 結果:テキスト=スライダー:value。 | ||
</code> | </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>!(内容)テキスト。 | メッセージ=<li></li>!(内容)テキスト。 | ||
- | メッセージボード!(メッセージ)いれる。 | + | メッセージボード!(メッセージ)入れる。 |
」それぞれ実行。 | 」それぞれ実行。 | ||
」。 | 」。 | ||
ライン 395: | ライン 395: | ||
## よく使われるHTMLタグ | ## よく使われるHTMLタグ | ||
+ | * ドリトルでは多くのHTMLタグが使用できます。以下はよく使われるタグの例です。 | ||
+ | |||
* **ul, li** : 順序なしリストとリスト項目を表示します。 | * **ul, li** : 順序なしリストとリスト項目を表示します。 | ||
* (例)順序なしリストを作成します。 | * (例)順序なしリストを作成します。 | ||
ライン 402: | ライン 404: | ||
項目1=<li></li>!("項目1")テキスト。 | 項目1=<li></li>!("項目1")テキスト。 | ||
項目2=<li></li>!("項目2")テキスト。 | 項目2=<li></li>!("項目2")テキスト。 | ||
- | リスト!(項目1)いれる(項目2)いれる。 | + | リスト!(項目1)入れる(項目2)入れる。 |
</code> | </code> | ||
ライン 412: | ライン 414: | ||
項目1=<li></li>!("項目1")テキスト。 | 項目1=<li></li>!("項目1")テキスト。 | ||
項目2=<li></li>!("項目2")テキスト。 | 項目2=<li></li>!("項目2")テキスト。 | ||
- | リスト!(項目1)いれる(項目2)いれる。 | + | リスト!(項目1)入れる(項目2)入れる。 |
</code> | </code> | ||
ライン 464: | ライン 466: | ||
<code> | <code> | ||
ボタン=<button>クリック</button>。 | ボタン=<button>クリック</button>。 | ||
- | ボタン:動作=「ラベル!"ボタンがクリックされました" 作る」。 | + | ボタン:動作=「<span></span>!"ボタンがクリックされました" テキスト」。 |
</code> | </code> | ||
ライン 471: | ライン 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> | ||
ライン 488: | ライン 483: | ||
コンテナ=<div></div>。 | コンテナ=<div></div>。 | ||
テキスト=<p></p>!("こんにちは")テキスト。 | テキスト=<p></p>!("こんにちは")テキスト。 | ||
- | コンテナ!(テキスト)いれる。 | + | コンテナ!(テキスト)入れる。 |
</code> | </code> | ||
ライン 495: | ライン 490: | ||
<code> | <code> | ||
- | テキスト=<span></span>!("強調")テキスト。 | + | テキスト=<span></span>!("こんにちは")テキスト。 |
</code> | </code> | ||
ライン 509: | ライン 504: | ||
<code> | <code> | ||
- | タイトル=<h1>大阪電気通信大学</h1>。 | + | タイトル=<h1>タイトル</h1>。 |
- | 見出し=<h2>学部</h2>。 | + | 見出し=<h2>見出し</h2>。 |
</code> | </code> | ||
ライン 517: | ライン 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>。 |
- | </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> | </code> | ||
ライン 539: | ライン 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> | ||
ライン 554: | ライン 544: | ||
<code> | <code> | ||
- | リンク=<a href="https://www.city.neyagawa.osaka.jp/index.html">寝屋川市</a>。 | + | リンク=<a>リンク</a>。 |
+ | リンク!"https://example.com" リンク先。 | ||
</code> | </code> | ||
ライン 561: | ライン 552: | ||
<code> | <code> | ||
- | <span>あいことば:</span>。 | + | <span>テキスト</span>。 |
- | あいことば=<input>。 | + | |
<br>。 | <br>。 | ||
- | <span>名前:</span>。 | + | <span>次の行</span>。 |
</code> | </code> | ||
ライン 571: | ライン 561: | ||
<code> | <code> | ||
- | <h1>ショッピングサイト</h1>。 | + | <h1>ドリトルリファレンス</h1>。 |
<hr/>。 | <hr/>。 | ||
</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)); | ||
+ | ``` | ||
## 実践的な例:チャットアプリケーション | ## 実践的な例:チャットアプリケーション |