◇はじめに◇
この解説は，ここで用いているCSS（スタイルシート）とJavaScriptで疑問が生ずるかもしれない箇所のQ&Aです．CSSやJavaScriptを基本から解説したものではありません． |
例１
<head>
□□□□□□□□□□□□□□□□□□□□
<Script Language="JavaScript">
□□□□□□□□□□□□□□□□□□□□
□□□□□□□□□□□□□□□□□□□□
</Script>
</head>
<body>
□□□□□□□□□□□□□□□□□□□□
□□□□□□□□□□□□□□□□□□□□
<Script Language="JavaScript">
□□□□□□□□□□□□□□□□□□□□
□□□□□□□□□□□□□□□□□□□□
</Script>
□□□□□□□□□□□□□□□□□□□□
</body>
例２
<head>
□□□□□□□□□□□□□□□□□□□□
<Script Language="JavaScript" src="abcd.js"></Script>
<Script Language="JavaScript">
□□□□□□□□□□□□□□□□□□□□
□□□□□□□□□□□□□□□□□□□□
</Script>
</head>
<body>
□□□□□□□□□□□□□□□□□□□□
□□□□□□□□□□□□□□□□□□□□
<Script Language="JavaScript">□□</Script>
□□□□□□□□□□□□□□□□□□□□
</body>
|
◇JavaScriptはどこに書くか◇
［基本］
HTMLファイルの<head></head>の間，<body></body>の間のどちらにでも書くことができます．
１つのHTMLファイルが右の例１のようになっているとき，
<Script Language="JavaScript"></Script>の間がJavaScriptの命令です．
テキストエディタで編集するときに，JavaScriptの命令が<body>部分にあると，画面で見える要素と混同しやすいので，私は関数定義を<head>に置き，実行文（関数呼び出しの文）を<body>においています．
［応用］
いくつかのHTMLファイルで共通に使う関数などは，個々のHTMLファイルに記述せずに，拡張子が
js のファイルとして別に作成し，HTMLファイル側では外部ファイルとして利用することができます．
このとき，外部ファイルは，右の例で言えば
□□□□□□□□□□□□□□□□□□□□
□□□□□□□□□□□□□□□□□□□□
だけの単純なテキストを abcd.js などの名で保存したものです．<JavaScript.....>.
</JavaScript>の文字は不要です．
呼び出す側のHTMLファイルには，
<Script Language="JavaScript" src="abcd.js"></Script>
のように記述します．
［特徴］
JavaScriptでは，同じ名前の関数や変数(*)が重複して登場すると，後に登場したものによって上書されます．（エラーメッセージはありません．）
そこで，jsファイルが大きくなって入力ミスにより同名の関数ができてしまった場合は，後に登場する関数が有効となっています．また，右の例２のようにjsファイルの読み込み後にそのHTMLファイルで関数定義を行う場合，同名の関数を定義すればjsファイル側の当該関数を無効にできます． |
◇スタイルシートはどこに書くか◇
１回きりで使うような場合は，右の例３のように<>で囲まれたタグの中で,
style=""の形で書くことができます．この場合，属性の後ろにはコロン（：）を付け，値の後ろにはセミコロン（；）を付けます．引用符が終わるまで何個でも並べられます．
何度も使う場合には，HTMLファイルの先頭部分に
<style></style>で囲んで定義します．こうすると，同じ見え方のものが繰り返し使え，かつ，短く記述できます．このとき，ドット（．）で始まる名前にしておくとクラス名で呼べます．
例
<style>
.az09
{position: relative;
font-size: 16px;
font-weight: medium;
font-family: "Comic Sans MS";
top: 0px;
left: 0px;
}
</style>
引用側：<span class="az09">x + y</span>
jsファイルや関数定義がこれらのクラスを引用しているときは，jsファイルやjavascript関数の定義よりも前に<style></style>を置かないとエラーになります．
複数のHTMLファイルで共通に使うスタイルシートは，CSSファイルとして外部に置くことができ，
<link rel="stylesheet" type="text/css" href="xyz.css">
の形で取り込むことができます．
スタイルシ−トとJavaScriptの関数定義は，右の例４のように、スタイルシートの共通，特別，JavaScriptの共通，特別の順に並べるのが無難です． |
例３
<div style="position:relative; top:8px; left:16px;">..</div>
<span style="position:absolute; color#ff0000;">..</span>
<p style="font-size:16px;">..</p>
<a href="..." style="text-decoration:none;">..</a>
<input type="text" style="ime-mode:disabled;">
例４
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=Shift_JIS">
<meta http-equiv="Content-Style-Type" content="text/css">
<title></title>
<link rel="stylesheet" type="text/css" href="xyz.css">
<style>
</style>
<Script Language="JavaScript" src="abcd.js"></Script>
<Script Language="JavaScript">
</Script>
</head>
<body>
</body>
</html> |
◇文字 a や x を代入するとエラ-になる◇
この数式表示関数は，その文字を表示するものです．
英字で始まる記号は，ブラウザによって変数と解釈されます．だから，ある関数に
a や x を直接代入すると，値が定義されていない変数が代入されたと解釈され，エラーとなります．
これに対して， a という文字や x という文字を代入するには，引用符で囲んで 'a' や 'x' を代入します．
例外的に，数字が直接代入された場合に，文字列に変換して表示する処理ができるところもありますが，全部ではありません．
◇str1 += とは何か◇
ある変数 x1 の現在の値に 他の値 a1 を加えるには
x1 = x1 + a1; としますが，この式は
x1 += a1; と省略することができます．
str1 = ''; （シングルクオートが２個）によってstr1という変数は文字列を表わす変数となり，
str1 += 'abc';によって'abc'が追加されて，'abc'となります．
さらに，
str1 += 'defg';とするとstr1には'defg'が追加されて，
'abcdefg';となります． |
例
ベクトル を表示する：
×<Script Language="JavaScript">Vec(a);</Script>
はエラーになります．
○<Script Language="JavaScript">Vec('a');</Script>
他の例
<Script Language="JavaScript"></Script>の中で
× Root(12); ○Root('12');
× Frac(x + 1, x); ○Frac('x + 1', 'x');
|
◇二重引用符(")と単一引用符(')の使い分け◇
JavaScriptで文字列を表わすには二重引用符または単一引用符で囲みますが，前後は組として同じものでなければなりません．
すでに引用符を含んでいるものを文字列中に使うには，異なる方の引用符で囲まなければなりません．
文字列中に含まれる，left:8px; top:4px;などの値を，関数によって変更したいとき，文字列結合を用いて，右の例のように行うことができます．
この場合，文字列が三重になっているというよりは，外側の引用符で一度打ち切って完全に外に出ていると解釈できます．前半に登場した二重引用符は，そこでは対がなくて閉じていませんが，後半の文字列に結合されて完結します． |
単独に使うときは：
document.write("<br>");
document.write('<br>');
文字列の中に文字列を含むときは：
document.write('<span class="mother1">...</span>');
document.write("<span class='mother1'>...</span>");
元の文字列：
document.write('<span style="position:absolute; left:0px;">');
変数 haba によって left を変更するには：
document.write('<span style="position:absolute; left:' + haba + 'px;">'); |
◇関数呼び出し側で調整するときposition:relative;とするのはなぜか◇
レファレンスマニュアルなどで，うまく説明してあるものが見つけられませんでしたので，説明方法は正確ではないかもしれませんが，結果はこのようになります．
右のように position:relative; のmotherシートの中で，position:absolute;
のchildシートで作業していて，関数で指定した文字列書き込みが灰色で示した点を示しているとき，関数呼び出し側で
'<span style="position:relative;">'と文字列を追加すると，motherに戻るのでなく，灰色の点を基準として新たにposition:relative;として振る舞うようです．
同様のことを'<span style="position:absolute;">'で行った場合も，childシートの基準座標に戻るのでなく，灰色の点を基準として(top:0px;
left:0px;)新たにposition:absolute;で振る舞うようです．
関数呼び出し側で文字の移動などを行う場合，ある文字だけを調整し，後続文字がない場合，以上のどちらで行っても同じ結果になりますが，後続文字があるときにposition:absolute;で書き込むと，その文字がなかったかのように後続文字が重なってきますので，position:relative;で調整する方が安全です．
なお，position:relative; position:absolute; のいずれも書かなかったときは，命令が無視されるようです．
右の例は繁分数の分子の + 記号の位置について，上から順に，調整していないもの，position:relative; で調整したもの，position:absolute;で調整したもの，positionの記載のないものの見え方を示したものです． |
|
◇font-colorはスタイルシートのクラスで一緒に定義した方が有利でないのか◇
font-color は 本文，数式の全体を通してHTMLタグで指定する方が操作しやすく，スタイルシートのクラスで設定してしまうと，部分的に文字を強調したいときに煩雑となります． |
|
◇∫Σなどに全角日本語文字を使うと英語ページに使いにくいのではないか◇
符号文字については，ブラウザごとに対応の有無を確認しなければなりませんが，Internet
Explorer 6.xについて，次の符号文字，番号符号が使えますので，これらに置き換えることができます．font-sizeは大きくします． |
∑ または ∑ で ∑ ∑ になります．
√ または √ で √ √ になります．
→ または → で → → になります．
∫ または ∫ で ∫ ∫ になります．
— または — で — — になります．
参照：http://www.scollabo.com/banban/index.html
（＾＾）ｖ HTML (HBJ出版局 , 1997) |
◇関数の引数が多く，意味と順序が覚えられない◇
作者も覚えていません．右のように関数のヘッダ部分をテキストエディタでコピー&ペーストして，日本語の意味に応じて具体的な値に書き換えるだけです。 |
分数 cFrac_101(bunshi, bunbo, bottom1, haba, bunshi_haba, bunbo_haba, ffamily)
無理関数 cRoot_101(shiki, mojisuu, ruijokon, ruijo, ffamily)
ベクトル cVec_102(shiki, haba, ffamily)
極限記号 cLim_101(shiki, atai, ffamily)
Σ記号 cSum_101(hajime, owari, shiki, ffamily)
|