①「$("識別").style.width = 値」と②「$("#識別").width(値)」の違い。
①の「$」は以下の定義。①は一般的なJavaScript、②はjQueryってことで。
┌──────────────────────────────────────┐
│function $(id) {return document.getElementById(id);}                        │
└──────────────────────────────────────┘

値を取得したい場合は、②の場合「$("#識別").width()」と引数を空にすればよい
…ってのは、初歩の初歩だが、他に以下の違いがある。

CSS等で初期値を設定している場合、
①はJavaScript的に値を代入していなければ、値は「」となるが、
②はJavaScript的に値を代入していなくても、値を返してくれる。

①の解決方法としてはwindow.onloadで値を代入してしまえばよい。
(というのが妥当かはちょっと不安)

で、本題。
幅とかは数値ではなく比率でも指定してできるが、
①はそのままだけど、②は親階層に比率を掛けて数値にしてくれる。
例えば50%を指定した場合、一つ上の階層(外側)の幅が「200px」だった場合
①は「50%」のまま、②は「100」になる。
┌──────────────────────────────────────┐
│$("識別").style.width = "50%"                                               │
│$("識別").style.width → 「50%」                                            │
├──────────────────────────────────────┤
│$("#識別").width("50%")                                                     │
│$("識別").style.width → 「100」                                            │
└──────────────────────────────────────┘
ただね、この掛け算、小数点以下はなくなるのだけど
ブラウザにより、切り捨て、四捨五入とか若干異なるみたい。

┌──────────────────────────────────────┐
│function $(id) {return document.getElementById(id);}                        │
└──────────────────────────────────────┘
みたいな定義をしてしまえば、「prototype.js」っぽく記述ができる。
これを「レベル０」とする。
これに「#」と「[0]」をつければ「jQuery」っぽく記述ができる。
これを「レベル１」とする。
┌──────────────┬────────────────┐
│          レベル０          │            レベル１            │
├──────────────┼────────────────┤
│$("識別").value             │$("#識別")[0].value             │
├──────────────┼────────────────┤
│$("識別").value = 値        │$("#識別")[0].value = 値        │
├──────────────┼────────────────┤
│$("識別").style.height = 値 │$("#識別")[0].style.height =  値│
├──────────────┼────────────────┤
│$("識別").style.width = 値  │$("#識別")[0].style.width = 値  │
└──────────────┴────────────────┘
さらに「jQuery」特有な形にすれば「レベル２」である。
┌────────────────┬───────────┐
│            レベル１            │       レベル２       │
├────────────────┼───────────┤
│$("#識別")[0].value             │$("#識別").val()      │
├────────────────┼───────────┤
│$("#識別")[0].value = 値        │$("#識別").val(値)    │
├────────────────┼───────────┤
│$("#識別")[0].style.height =  値│$("#識別").height(値) │
├────────────────┼───────────┤
│$("#識別")[0].style.width = 値  │$("#識別").width(値)  │
└────────────────┴───────────┘
「レベル２」を覚えれば、最大限「jQuery」っぽくなるが
わかんなくなったら「レベル１」でも潰しが効きそうだ。

┌──────────────────────────────────────┐
│<link rel="stylesheet" href="xxxx.css" type="text/css"/>                    │
└──────────────────────────────────────┘
みたいな感じで、CSSファイルを外部ファイルとした場合、
その外部ファイルの先頭で以下みたいに文字コードを宣言してあげる。
┌──────────────────────────────────────┐
│@charset "UTF-8";                                                           │
└──────────────────────────────────────┘

ちなみに「@charset "utf8";」だと、うまくいく場合もあれば、
いかない場合もあるので注意。

┌──────┐
│内   padding│margin  外
└──────┘

ボタンを押せる・押せない、チェックボックスをチェックできる・できない、など
要素の有効無効は「disabled="disabled"」(これは無効化)で指定するが
JavaScriptやjQueryで動的に変更する場合について。

まず、JavaScriptでの有効無効の設定は以下の通り。
┌──────────────────────────────────────┐
│document.getElementById("a").disabled = true;                               │
│document.getElementById("b").disabled = true;                               │
├──────────────────────────────────────┤
│document.getElementById("a").disabled = false;                              │
│document.getElementById("b").disabled = false;                              │
└──────────────────────────────────────┘

これをjQuery流にアレンジすると以下。
┌──────────────────────────────────────┐
│$("#a")[0].disabled = true;                                                 │
│$("#b")[0].disabled = true;                                                 │
├──────────────────────────────────────┤
│$("#a")[0].disabled = false;                                                │
│$("#b")[0].disabled = false;                                                │
└──────────────────────────────────────┘

そして、jQuery流を貫き通すと以下。
┌──────────────────────────────────────┐
│$("#a,#b").attr("disabled", "disabled");                                    │
├──────────────────────────────────────┤
│$("#a,#b").removeAttr("disabled");                                          │
└──────────────────────────────────────┘

JavaScriptでの数値チェックは「isNaN()」を使う。
┌──────────────────────────────────────┐
│if (isNaN(値)) {                                                            │
│  alert("数値じゃありません");                                              │
│} else {                                                                    │
│  alert("数値です");                                                        │
│}                                                                           │
└──────────────────────────────────────┘
ベタな話だが、数値じゃない場合が「真」だから注意。

「あれ？数値を入力したつもりが、数値チェックでエラーとなるな。
もしかして入力した時は文字列扱いだから、
Number()かなんかなにかで数値型に変換してからisNaN()にかけなきゃダメかな？」
とか思ったら本末転倒になってしまう。

テンプレートのヘッダ部(header.tpl)とフッタ部(footer.tpl)を共通にして
それぞれのテンプレートからアサインする方法は以下の通り。
┌──────────────────────────────────────┐
│{include file='header.tpl'}                                                 │
│：                                                                          │
│{include file='footer.tpl'}                                                 │
└──────────────────────────────────────┘
PHPの「require」と同じでソースがベタに展開される。
当該テンプレートに「ヘッダ変数・フッタ変数」が記述されていなくても
「include」された先に定義があれば、記述したのと同じような感じになる。

なので、以下のような流れになるだろう。
┌──────────────────────────────────────┐
│$smarty = new Smarty;                                                       │
│$smarty->assign('ヘッダ変数', 値);                                          │
│$smarty->assign('フッタ変数', 値);                                          │
│$smarty->display('テンプレート.tpl');                                       │
├──────────────────────────────────────┤
│{include file='header.tpl'}                                                 │
│：                                                                          │
│{include file='footer.tpl'}                                                 │
└──────────────────────────────────────┘

一方、fetchメソッドを使えば、部分ごとに出力結果を確定させてしまうことができ、
この結果をまとめると上記と同様な感じになる。
┌──────────────────────────────────────┐
│$smarty = new Smarty;                                                       │
│$smarty->assign('ヘッダ変数', 値);                                          │
│$header = $smarty->fetch('header.tpl');                                     │
├──────────────────────────────────────┤
│$smarty = new Smarty;                                                       │
│$smarty->assign('フッタ変数', 値);                                          │
│$footer = $smarty->fetch('footer.tpl');                                     │
├──────────────────────────────────────┤
│$smarty = new Smarty;                                                       │
│$smarty->assign('header', $header);                                         │
│$smarty->assign('footer', $footer);                                         │
│$smarty->display('テンプレート.tpl');                                       │
├──────────────────────────────────────┤
│{$header}                                                                   │
│：                                                                          │
│{$footer}                                                                   │
└──────────────────────────────────────┘

前者と後者の違いは、後者はfetchしてしまうと確定してしまうので、
assignしても効果がない(つまり後で(←処理中の話)変更がきかない)。
しかし、後者の大きな利点は変数のスコープが絞り込まれるので
変数名の自由度が高くなるところ。
ローカル変数とグローバル変数の違いのようなもんだ。

┌──────────────────────────────────────┐
│$smarty->assign('変数', '織田信長');                                        │
├──────────────────────────────────────┤
│あなたの名前は「{$変数}」です。                                             │
└──────────────────────────────────────┘
assignメソッドで、出力先とそこに出力する値を指定するのが
オーソドックスなやり方だ(と思う)。

配列を一気にそれをやる方法もある。
┌──────────────────────────────────────┐
│$配列['変数'] = '織田信長';                                                 │
│$smarty->assign($配列);                                                     │
├──────────────────────────────────────┤
│あなたの名前は「{$変数}」です。                                             │
└──────────────────────────────────────┘
これでも同じ。
引数が減るのでちょっと違和感があるが、これでもOK。

こうしてみると、assignメソッドにおいて「$変数」ではなく「'変数'」なのが
わかるような気がする(配列の添字の「'変数'」と対応してるね)。

Smarty導入方法はざっとこんな感じ。

Smarty一式を公式サイトからダウンロードし、所定(任意)の位置に置き、
Smartyを使用するPHPプログラムから「Smarty.class.php」をアサインする。
┌──────────────────────────────────────┐
│require_once '…/Smarty/Smarty.class.php';                                  │
└──────────────────────────────────────┘
後は、「new Smarty」でオブジェクトをつくり、assignメソッドで値を設定し
displayメソッドでテンプレートを呼び出すと表示される。
┌──────────────────────────────────────┐
│$smarty = new Smarty;                                                       │
│$smarty->assign('変数', 値);                                                │
│$smarty->display('テンプレート.tpl');                                       │
└──────────────────────────────────────┘

テンプレートは、通常のHTMLと同じで、「{$変数}」のように指定すると
assignメソッドで設定された値が表示される
┌──────────────────────────────────────┐
│$smarty->assign('変数', '織田信長');                                        │
├──────────────────────────────────────┤
│あなたの名前は「{$変数}」です。                                             │
└──────────────────────────────────────┘
変数について、assignでは$がいらず、テンプレートにはいる違い注意。
また、「{}」の中にSmartyの処理(例えばif文)を書くことにより様々な制御ができる。
なので、テンプレート上にJavaScriptで「function() {処理;}」みたいに
中括弧を一列に並べて書くとSmartyと誤認されエラーとなるので注意。

最後にテンプレートの置き場所だが、以下のような感じでdisplayの前に指定する。
┌──────────────────────────────────────┐
│$smarty->template_dir = '…/templates/';                                    │
│$smarty->compile_dir  = '…/templates_c/';                                  │
│$smarty->config_dir   = '…/configs/';                                      │
│$smarty->cache_dir    = '…/cache/';                                        │
└──────────────────────────────────────┘
「templates」にはテンプレートを置く。
「templates_c」にはSmartyが一時バイナリデータを出力する。
空っぽの場所さえ提供すればいい。
「configs」「cache」も似たようなもんなのだろうか、よくわからない。
ま、上記４つのフォルダを生成して、「templates」にテンプレートを置けばいい
ということだけわかっていればまずはOK。

相場(売値と買値)を疑似ってみる。

需給関係の計算とかいろいろやった風にみせて、実は乱数でしたってやつ。
「いろいろやった風」ってのは画面表示にギミックに譲るとして
こちらは乱数の計算に集中するが、
まずは単純に以下のような感じで「1～100」の整数がランダムで取得できる。
┌──────────────────────────────────────┐
│mt_rand(1, 100)                                                             │
└──────────────────────────────────────┘

でも、これだと「いくらで売ってくれる？」って聞いた時、
答えがコロコロ変わる感じだ。
相場っぽくない。

何度も何度も「いくらで売ってくれる？」って尋ねて
うっかり安い価格を相手が言ってきたら即買いみたいな感じになってしまう。

大きな時間軸でみれば実際の株価もそんな感じなのかもしれないが
実際はそんなにコロコロ価格は変わらない。
＃失われたうん十年だから問題な訳で、失われた数分だったら
  安値で株を売らずに我慢して持っておくことだって可能だ

ま、それは置いといて、ランダムだけどしばらくの間は同じってのを実現したい。
単純に考えれば一定期間おきに乱数を再計算して更新すればできる。
でもそれだとその値を保持しておく領域が必要だ。

で、乱数ではなくハッシュ。
一日単位でランダムな値を割り当てたい場合はこれ。
┌──────────────────────────────────────┐
│intval(fmod(hexdec(md5(date('Ymd').入力値)), 範囲))                         │
└──────────────────────────────────────┘

例えば、IDの0～9に対して、1～100の範囲で適当な値を与えるとしたら
以下のような感じになる。(画面表示した例)
┌──────────────────────────────────────┐
│for ($id = 0; $id < 10; $id++) {                                            │
│  $result = intval(fmod(hexdec(md5(date('Ymd').$id)), 100)) + 1;            │
│  echo 'id'.$id.'='. $result.'／';                                          │
│}                                                                           │
└──────────────────────────────────────┘
これだと同日中ならIDごとに同じ値となる。

乱数も昔のやつ(？)だと乱数の種を設定しないと、規則性のある乱数、
つまりハッシュっぽくなっていたのだが、
今の乱数は乱数の種の部分もやってくれるので即使える、まさに乱数だ。
その昔N88-BASICをやってた時これがわからずはまってしまった。
ちなみに乱数の種は秒とかころころ変わるものを設定することになるのだけど…、
あれ？なんか似たようなことをしているな…。

最後に注意、これだけだと乱高下必死なので相場としてはもう少し工夫が必要。