D2MatE Top
this page
Web関係Tips / ライブラリ
このページでは、便利なHTML/CSS/javascriptの書き方や、javascript/cssライブラリを掲載しています。
以下にライブラリの方針をまとめます。
- 基本的に、モジュールではなくライブラリを使います。
DOM制御にはJavascript Elementオブジェクトを使い、HTMLテキストでの直接出力は避けます
-
ライブラリファイル名には_l、モジュールファイル名には_mをつける。
Elementオブジェクトベースの場合は_e、テキストHTMLベースの場合は_tをつける。
例: tkCSS_le.js: Elementベースのライブラリ
- Debug用関数はtkDebug_le.jsにまとめ、tkDebug_le.jsのインポートだけで基本的なページを作れるようにする。
他ライブラリと衝突する名前の関数はオブジェクトに内包してtkDebug namespaceに入れる。
2024/12/4以降に作成するページは、原則tkDebug_le.jsのDebug機能を入れ、本ライブラリを使用して整理する。
Debug機能付きtemplate:
- 簡単なJSコードは/js/functionsに関数群ごとのファイルを作成して動作確認をする。
動作を確認したうえで、/jsのライブラリにまとめていく。
- HTMLタグを生成するclass tkHTMLApplicationをつくり、Application classとしてアプリ制御に使う。
タグを文字列で返す関数はタグ名 (html.h1()など) とし、
表示する関数には show_をつける。
-
CSSはJavascript関数でheaderに挿入し、/js/tkCSS_le.js
にまとめる。
- CSSファイルは<head>で取り込み、JSは<body>で取り込む。
<script>文は<body>の最後において、先にHTMLを読みこませて表示させることが良いとされているが、
コードが分散するため、表示するDOM elementの近くに対応する<script>文を書く。
CSS, Javascriptの取り込み例:
サンプルページ
実際に使っているライブラリとWebページを 本サイト等で使っているプログラム
にまとめてあります。
試作プログラムについては sandbox
にまとめています。