Javascript上での”、’の使い分け

こんにちは、
最近、HTMLの勉強をやり直しています。（といっても詳しいわけではありません。）
Javascriptで"と’の二つを使います。
例）ボタン画像の切り替え
<a href="javascript:void(0);"
onmouseover="document.btn.src='btn2.gif';"
onmouseout="document.btn.src='btn1.gif';">
<img src="btn1.gif" name="btn" border="0" width="120" height="40"></a>
この際に、”、’の使いわけがありますが、このことをうまく理解できません。

ほか、Javascriptとは離れますが、
Styleseetで、
HTMLタグでは、色の指定する場合、"#ffffff"というように”を使いますが、Styleseetでは使っていません。
これも自分の中でうまく納得できていません。

何か、こうだよっていううまい説明がありましたら教えてください。よろしくお願いします。

No.1 ベストアンサー 回答者： Earmy-S 回答日時： 2005/05/06 00:10

まずは、”、’に関して。

　これは本来どちらでも構いません。これは、HTML の構文で属性値（src="btn1.gif" みたいにですね）を括るときでもそうなんです。元々 HTML では省いて（src=btn1.gif みたいに）もＯＫでしたが、後に W3C は省略せずに記述する事を推奨し、現在新バージョンの XHTML では必須となってます。
　この２種類を使い分ける事の意味は、その
onmouseover="document.btn.src='btn2.gif';"
のように入れ子にするためです。この場合は HTML はダブルクォーテーション、JavaScript はシングルクォーテーションですね。例として、JavaScript で HTML を出力する場合の記述は

msg = 'Hallow World';
document.write('<span class="color:#aaccff;">'+msg+'</span>');

…とすると（<Script>とかは省略しました）、
<span class="color:#aaccff;">Hallow World</span>
という HTML が出力されます。（実際は変数 msg には現在時刻とかブラウザ情報とか格納するカタチで使うんですが）
　JavaScript の場合、変数に文字列を格納するには " か ' で括る必要があるんです（括る必要の無いのは本来数字だけ。数字の場合、括る事で文字列扱いとなる）。
→「配列」で複数の文字列を扱う際には必須ですんでここはマスターしましょう。

　なお、この " と ' の使い方は逆でも別に構いません。ただその場合、HTML で他の部分もすべて " → ' としなくてはいけません。


…長いから一旦書き込みます。CSS の色指定については改めて。

この回答へのお礼

返信ありがとうございます。丁寧な説明なので非常に参考になりました。

お礼日時：2005/05/06 23:18

No.5 回答者： quads 回答日時： 2005/05/07 09:49

補足をば。

>>#3
> スタイルシートで
> background-color:#ffffff;
> の場合は、
> :～;の間に値があるとパターン認識するわけですね。

スタイルシートの場合は、【プロパティ】【コロン】【プロパティ値】で認識します。
あくまで、セミコロンはプロパティを複数指定する場合に区切りとして記述するものです。
ただし、以降にプロパティが無い場合もセミコロンを記述していて問題はありません。

>>#4
> <style type="text/css">

> font.blue {color:#0000ff;}

> </style>

これは
<style type="text/css">
<!--
font.blue {color:#0000ff}
-->
</style>
でもいい訳です。

ヘッダに記述する場合はコメントタグとして括った方が安全です。
また、例として挙げられたとは思いますが、クラス名に効果の概要を記述するのは推奨できません。
言うなれば、【span.font {color:#0000ff}】のような使い方になるかと。
これでも曖昧ですが。利用する部位に関する名称です。.descriptionとかですね。…これも曖昧？

あと、フォント"MSゴシック"は"MS ゴシック"ですね。
揚げ足取ってばかりで恐縮です…。

url()については、WWWブラウザの解釈が曖昧で多種多様です。
詳しくは検証していないので的確なことは私も言えないのですが…。

http://css.g.hatena.ne.jp/keyword/background-image
http://www.tagindex.com/cgi-lib/q1bbs/patio.cgi? …
http://blog.zaq.ne.jp/oddcolumn/category/8/
※ODDは現在http://odd.to/こちらとなっております。

＞ <style="background-image:url()">
＞ みたいな指定する場合を考えると、
とありますがstyle属性の使用自体推奨されないので、基本的にはダブルクォーテーションで括った方が安全です。
【background-image:url("")】

最後に。
JavaScript中の変数の値などとして直接タグを書くような場合は引用符が足りなくなってしまうこともあります。
var ad = "<div style='background-image:url(@@@)'>～</div>";
ってこんな使い方しませんよね普通…。

結論。
基本的にダブルクォーテーションで括って、入れ子にする場合には出力も考慮してシングルクォーテーションを組み合わせるようにしてください。

って言っても自分で判断出来ますよね…。
補足でした。(´∀｀)

No.4 回答者： Earmy-S 回答日時： 2005/05/06 01:00

なんか跨いだ回答になっちゃいましたが(^^;)ゞ

　CSS で括りが必要無いのは、CSS は書式自体が HTML とも JavaScript とも違うためです。ただ、現在 HTML （HTML 4.01）では一つの HTML ファイル中にそれらをまとめて記述できるんで、混乱しやすいかも知れません。
（ちなみに、CSS と JavaScript は別々のファイルとして作ることも出来ます。XHTML では現在良く使われる形ですが、この場合は HTML ファイルは外部ファイルとしてそれらを参照します）

　たとえば、文字を青で記述する場合、従来なら

<font color="#0000ff">蒼青</font>

ですね。これが、ヘッダに CSS を記述する形なら

　　　＜head …省略です＞
<style type="text/css">

font.blue {color:#0000ff;}

</style>
　　　＜省略…以下、body部＞

<font class="blue">蒼青</font>

…ってなかんじになるかと思います（外部ファイル（リンキングスタイルシート）の場合は<style>タグの中身を独立して書くだけですんで割愛）。
　で、今度はスタイルシートをタグに埋め込む場合ですと、

<font style="color:#0000ff;">蒼青</font>

となるわけです。
　これらの記述は、（ちゃんと動作すればι）すべて同じ結果が表示されます。
（細かい事を云えば、スタイルシート使うんならタグも font じゃなくて span で良いんだけど…）

　したがって、構文の要素のほとんどがあらかじめ決められている CSS では、ほとんどダブルクォーテーションで括る必要は無いんです（色も数値や決められたキーワードで指定することになるので）。

　ただし、定義にそれ以外の文字が必要な場合は、括る事もあります。例えば、
@charset "Shift_JIS";（←外部ファイル以外は記述の必要無し）
とか、また font-family に "MSゴシック" や "Osaka" などのフォント名を指定する場合は必要なんです。

＃本当は CSS に URL を記述する際も必要なのかもしれないけど、通常は
background-image:url(xxx/yyy.zzz);
みたいに括弧で括っちゃうから書かなくても平気らしい…書式として正しいかは別として

この回答へのお礼

本当に丁寧な説明ありがとうございます。
非常に参考になりました。
こんなに説明してもらえると思っていなかったので・・・
ありがとうございます。

お礼日時：2005/05/06 23:25

No.3 回答者： BLUEPIXY 回答日時： 2005/05/06 00:14

>”、’の使いわけがありますが

書きたいものは
document.btn.src="btn1.gif";
だが
"document.btn.src="btn1.gif"";
としてしまうと
"document.btn.src="
btn1.gif
"";
と解釈されてしまってエラーになるから
"～"
の中で何かの属性値とかで文字列を表したい場合には
'～'で囲む
＞HTMLタグでは、色の指定する場合、"#ffffff"というように”を使いますが
HTMLタグでは、属性値を書くときは
BGCOLOR="#ffffff"
というように"～"で囲む必要があります。
（ブラウザによって”で囲まなくても大丈夫なものもありますが、規格的に囲まなくてはいけません）
これは、規格的なもので、そういうパターンなっているものを認識するということなのでそういうものと思ってください。
この場合、
「=」で値があることを認識して値が"から"の間にあると認識しているということですね。
スタイルシートで
background-color:#ffffff;
の場合は、
:～;の間に値があるとパターン認識するわけですね。

この回答へのお礼

返信ありがとうございます。
よく理解することができました。

お礼日時：2005/05/06 23:21

No.2 回答者： neriy 回答日時： 2005/05/06 00:12

HTMLでホームページを書いた経験上、Javascriptやスタイルシートなども少々かじりました。

それでJavascriptに限らず、今まで知っている中では、「""」の内側に「''」が来ることはありますが、逆はありません。

たとえて言えば・・・
「''」は内袋
「""」は外袋
外袋「""」の中に外袋「""」を重ねることはあるけど、内袋「''」の中に外袋「""」が入ってることはありえないという感じで理解しています。

この回答へのお礼

返信ありがとうございます。非常に参考になりました。

お礼日時：2005/05/06 23:20