この文書の現在のバージョンと選択したバージョンの差分を表示します。
両方とも前のリビジョン 前のリビジョン 次のリビジョン | 前のリビジョン | ||
ch_html_js [2025/03/07 17:36] klab |
ch_html_js [2025/03/14 10:58] (現在) klab |
||
---|---|---|---|
ライン 9: | ライン 9: | ||
</code> | </code> | ||
- | 生成されたオブジェクトは「root:dom:タグ名」の子オブジェクトとなり、プログラム中のタグの部分は実行時には「root:dom:タグ名!"文字列"create」のように変換されて実行される。 | + | /*生成されたオブジェクトは「root:dom:タグ名」の子オブジェクトとなり、プログラム中のタグの部分は実行時には「root:dom:タグ名!"文字列"create」のように変換されて実行される。*/ |
HTMLオブジェクトはメソッドやプロパティを持ち、タートルと同様に操作できる。既存のHTMLオブジェクトから新しいオブジェクトを作ることもできる。 | HTMLオブジェクトはメソッドやプロパティを持ち、タートルと同様に操作できる。既存のHTMLオブジェクトから新しいオブジェクトを作ることもできる。 | ||
ライン 15: | ライン 15: | ||
<code> | <code> | ||
テスト=<span>テキスト</span>。 | テスト=<span>テキスト</span>。 | ||
- | テスト!"red" backgroundColor。 | + | テスト!"red" 背景色。 |
テスト2=テスト!作る。 | テスト2=テスト!作る。 | ||
</code> | </code> | ||
ライン 22: | ライン 22: | ||
1. タグに直接記述する方法 | 1. タグに直接記述する方法 | ||
+ | |||
<code> | <code> | ||
要素=<span id="hoge" style="color: blue;"></span>。 | 要素=<span id="hoge" style="color: blue;"></span>。 | ||
ライン 27: | ライン 28: | ||
2. メソッド呼び出しで設定する方法 | 2. メソッド呼び出しで設定する方法 | ||
+ | |||
+ | この例ではspanタグを作り、id属性にhogeを、CSSのcolorプロパティにblueを設定している。 | ||
+ | |||
<code> | <code> | ||
- | 要素=<span></span>。 | + | 要素=<span>テキスト</span>。 |
- | 要素!"hoge" id。 | + | 要素!"hoge" 識別子。 |
- | 要素!"blue" color。 | + | 要素!"blue" 文字色。 |
</code> | </code> | ||
ライン 36: | ライン 40: | ||
<code> | <code> | ||
- | 要素=<span id="hoge"></span>。 | + | 要素=<span id="hoge">テキスト</span>。 |
- | 値=要素!id?。 | + | 値=要素!識別子?。 |
</code> | </code> | ||
ライン 72: | ライン 76: | ||
- 特定のinputタグ(checkboxなど):値が変更されたとき(onchange) | - 特定のinputタグ(checkboxなど):値が変更されたとき(onchange) | ||
- それ以外のタグ:クリックされたとき | - それ以外のタグ:クリックされたとき | ||
+ | |||
+ | イベント処理の定義には「動作設定」メソッドを使用することもできる。 | ||
<code> | <code> | ||
ボタン=<button>送信</button>。 | ボタン=<button>送信</button>。 | ||
ボタン:動作=「 | ボタン:動作=「 | ||
- | ラベル!"ボタンがクリックされました" 作る。 | + | <span>ボタンがクリックされました</span>。 |
」。 | 」。 | ||
テキスト入力=<input type="text">。 | テキスト入力=<input type="text">。 | ||
- | テキスト入力:動作=「 | + | テキスト入力!「 |
- | ラベル!(テキスト入力:value)テキスト。 | + | <span></span>!(テキスト入力!値?)テキスト。 |
- | 」。 | + | 」 動作設定。 |
</code> | </code> | ||
ライン 100: | ライン 106: | ||
<div id="output"></div>。 | <div id="output"></div>。 | ||
出力=#output。 | 出力=#output。 | ||
- | 出力:テキスト="ID指定で取得した要素に内容を設定"。 | + | 出力!"ID指定で取得した要素に内容を設定" テキスト。 |
</code> | </code> | ||
ライン 118: | ライン 124: | ||
<code> | <code> | ||
フレーム=<iframe></iframe>。 | フレーム=<iframe></iframe>。 | ||
- | フレーム:src="https://example.com/"。 | + | フレーム!"https://example.com/" ソース。 |
</code> | </code> | ||