DOM和属性革命プラグインの使用方法サンプル

DOM和属性革命プラグイン取り込んだ後の記述例です

エディタ

プログラム

！「https://n3s.nadesi.com/plain/defineProperty.nako3」を取り込む
//効能：すべてのDOMはDOM和属性、DOM和スタイルの辞書キーを得る
//注意：取り込んだ時に革命が起きます（●DOM和属性革命が実行されます）
//注意：革命は貯蔵庫のクリアで消えません。リロードしてください。
//-----------------------
//●DOM和属性革命
//-----------------------
//DOM部品に革命が起き、辞書キーでプロパティを操作できます
「あいうえお」のボタン作成
それ＠「テキスト」は「かきくけこ」//dom＄keyやdom.keyではなくdom＠keyでアクセスできる
それ＠「幅」は「80%」
それ＠「文字サイズ」は3em
それ＠「ヒント」は『「あいうえお」のボタン作成
それ＠「テキスト」は「かきくけこ」//dom＄keyやdom.keyではなくdom＠keyでアクセスできる
それ＠「幅」は「80%」
それ＠「文字サイズ」は3em』

//-----------------------
// ●DOM和属性追加（jpKeyをoriginalKeyに|originalKeyへ）
// ●DOM和スタイル追加（jpKeyをoriginalKeyに|originalKeyへ）
// domの日本語のキーとオリジナルのキーを対応させ、＠日本語キーと紐づけします
//-----------------------
改行作成
「リンク先」を「href」へDOM和属性追加
「アレ」を「letter-spacing」へDOM和スタイル追加　//ハイフンの使用OK（内部でキャメルケースletterSpacingに変換されます）
「a」のDOM部品作成
それ＠「テキスト」は「DOM和属性革命プラグインへのリンク」
それ＠「リンク先」は「https://n3s.nadesi.com/id.php?3147」
それ＠「アレ」は1em
それ＠「ヒント」は『「リンク先」を「href」へDOM和属性追加
「アレ」を「letter-spacing」へDOM和スタイル追加　//ハイフンの使用OK（内部でキャメルケースletterSpacingに変換されます）
「a」のDOM部品作成
それ＠「テキスト」は「DOM和属性革命プラグインへのリンク」
それ＠「リンク先」は「https://n3s.nadesi.com/id.php?3147」
それ＠「アレ」は1em』

改行作成
「」の画像作成
それ＠「ソース」は「https://n3s.nadesi.com/image/nako_info.png」
それ＠「ヒント」は『「」の画像作成
それ＠「ソース」は「https://n3s.nadesi.com/image/nako_info.png」』

//-----------------------
//●値セットした時(funcでobjのkeyを|keyに|keyへ)：
//●値ゲットした時(funcでobjのkeyを|keyに|keyへ|keyから)：
//　辞書のキーにセッターゲッターを付与します。
//　！注意！：用法を誤ると無限ループが発生します
//-----------------------
変数　hogeは空辞書
hogeの「aaa」に値セットした時には (v)：
　　対象["bbb"]=v //注意：hoge["aaa"] に値をセットすると無限ループになります
hogeの「aaa」を値ゲットした時には：
　　対象["bbb"]*10000を戻す//注意：hoge["aaa"] の値をとりだす（ゲットする）と無限ループになります

hoge["aaa"] = 10 　//値セット時の関数が呼ばれ、bbbに入る
hoge["aaa"]を表示  //値ゲット時の関数が呼ばれる　→100000
hoge["bbb"]を表示  //→10
//-----------------------

//通常、チェックボックスへテキスト設定が効きません。
//セッターゲッターを付与することで対応できます
改行作成
「」のチェックボックス作成
//それに「チェック」をテキスト設定　//ムリ
それの「テキスト」に値セットした時には (v)：
　　対象["labels"][0]にvをテキスト設定
それの「テキスト」を値ゲットした時には：
　　対象["labels"][0]からテキスト取得
それ＠「テキスト」は「テキスト変更されたチェックボックス」//セッターが呼ばれる
それ＠「ヒント」は『「」のチェックボックス作成
それの「テキスト」に値セットした時には (v)：
　　対象["labels"][0]にvをテキスト設定
それの「テキスト」を値ゲットした時には：
　　対象["labels"][0]からテキスト取得
それ＠「テキスト」は「テキスト変更されたチェックボックス」//セッターが呼ばれる』

//おまけ　追加したキー
改行作成
[]のセレクトボックス作成
それ＠「アイテム」は[1,2,3,4,5]
それ＠「値」は4 //selectedIndex
それ＠「行」は5 //size
それ＠「ヒント」は『[]のセレクトボックス作成
それ＠「アイテム」は[1,2,3,4,5]
それ＠「値」は4 //selectedIndex
それ＠「行」は5 //size』
/*　オーディオ、ビデオタグ共通
　　"再生位置":"currentTime"
　　"シーク中","seeking"
　　"長さ","duration"
　　"完了","ended"
　　"ミュート","muted"
　　"ループ","loop"
　　"準備完了","readyState"
　　"自動再生","autoplay"
*/

実行結果

保存

プログラムを保存

表示ページ

直前に実行または一時保存した内容を復元

実行環境

なでしこバージョン

素材

画像・音声・データ

ログインすると素材をアップロードできます。

🍯 プログラム貯蔵庫

プログラム

プログラムを保存

なでしこバージョン

画像・音声・データ