JavaScriptをgoogle chromeで学習する際の表示に問題が発生
- google chromeではJavaScriptの表示が正しくされず、文字が切れてしまう問題が発生しています。
- 問題の原因は、特定の文字列の表示に制限があるためです。
- 全てのブラウザで正しく表示させるためには、文字列をエスケープする必要があります。
- ベストアンサー
JavaScriptをgoogle chromeで
JavaScriptの学習を始めたのですが、最初で躓いてしまいました。 私はgoogle chromeを規定のブラウザとして使用しています。 test.htmlでの記述： <html> <head> <title>JavaScript test</title> <meta http-equiv="Content-Script-Type" content="text/javascript"> </head> <body> <script type="text/javascript" src="test.js"> </script> </body> </html> test.jsでの記述： var num=[11,22,33,44,55]; var name=['test','test1','test2','test3','test4']; for(var i=0;i<5;i++){ document.write(name[i]+"の点数は"+num[i]+"です<br />"); } 期待していた表示は、 testの点数は11です test1の点数は22です test2の点数は33です test3の点数は44です test4の点数は55です という感じなのですが・・・google chromeでは tの点数は11です eの点数は22です sの点数は33です tの点数は44です ,の点数は55です と表示されてしまいます。 IEでは問題ありませんでした。 全てのブラウザで問題なく表示させるためには、 どのようにすればいいのでしょうか？ ご教示願います。
- scanfprintf
- お礼率82% (42/51)
- JavaScript
- 回答数4
- ありがとう数5
- みんなの回答 （4）
- 専門家の回答
質問者が選んだベストアンサー
この問題は DOM とグローバル変数の仕組みを知らないと難しいですね…。 変数nameはグローバル変数として宣言されています。 グローバル変数 name は window.name と同じです。 https://developer.mozilla.org/ja/Core_JavaScript_1.5_Guide/Variables#section_5 ところが、window.name はウインドウの名前を指定するプロパティとして DOM で規定されています。 https://developer.mozilla.org/ja/DOM/window.name window.name は String型 のプロパティとして規定されているので、初期化される値は全て String型 に変換されます。 var name = ['test','test1','test2','test3','test4']; // "test,test1,test2,test3,test4" に変換して格納される ES3 規定にはありませんが、Stringオブジェクトは配列のように扱えるように拡張されているJavaScriptエンジンがあり、Google Chrome もその一つです。 https://developer.mozilla.org/ja/Core_JavaScript_1.5_Reference/Global_Objects/String # この仕様は ES5 規定で取り込まれました。http://sideshowbarker.github.com/es5-spec/#x15.5.5.2 var string = 'Hello'; alert(string[0]); // "Hello" の1文字目である "H" が出力される (対象が空文字でなければ string[0] は string.charAt(0) と等価) 従って、質問文にあるコードでは "test,test1,test2,test3,test4" の1番目の文字から順番に出力してしまうのです。 この現象を避けるために関数内で変数を定義してください。 (function () { // コード全体を匿名関数(無名関数)で括る var num = [11, 22, 33, 44, 55]; var name = ['test', 'test1', 'test2', 'test3', 'test4']; // ローカル変数を宣言する for (var i = 0; i < 5; i++){ document.write(name[i] + 'の点数は' + num[i] + 'です\u003Cbr\u003E'); } })(); ローカル変数はグローバル変数とは別に定義されるので、window.name との名前の衝突を気にする必要がなくなります。 [JavaScript] 猿でもわかるクロージャ超入門 ３ 無名関数 - DQNEO起業日記 http://dqn.sakusakutto.jp/2009/01/javascript_2.html
その他の回答 (3)
- think49
- ベストアンサー率59% (285/482)
#3 です。 > 対象が空文字でなければ string[0] は string.charAt(0) と等価 存在しないindex値の参照を失念していました。「ほぼ等価」に訂正します。 存在しないindex値を指定した場合、String#charAt は空文字を返し、String[[GetOwnProperty]] は undefined を返します。 # "Object Internal Methods" の [[GetOwnProperty]] (ES5 8.12.1) を利用しているので、プロパティアクセス演算子や配列と同じイメージでいいと思います。 http://sideshowbarker.github.com/es5-spec/#x8.12.1 (8.12.1 [[GetOwnProperty]]) http://sideshowbarker.github.com/es5-spec/#x15.5.5.2 (15.5.5.2 [[GetOwnProperty]]) http://sideshowbarker.github.com/es5-spec/#x15.5.4.4 (15.5.4.4 String.prototype.charAt) http://www2u.biglobe.ne.jp/~oz-07ams/prog/ecma262r3/15-5_String_Objects.html#section-15.5.4.4 (15.5.4.4 String.prototype.charAt)
- yyr446
- ベストアンサー率65% (870/1330)
nameってのが予約語だからか？ <script type="text/javascript"> var num=[11,22,33,44,55]; var namae=["test","test1","test2","test3","test4"]; alert(namae.length); for(var i=0;i<5;i++){ document.write(namae[i]+"の点数は"+num[i]+"です<br />"); } </script> だとChromeでも問題ないぞ！
お礼
ありがとうございました。 確かにnamaeにすると、Chromeでも問題ありませんでした。 けれど、JavaScriptの予約語を調べたんですが、nameというのが、 見つかりませんでした。 もっと調べてみます。
- nda23
- ベストアンサー率54% (777/1415)
やっぱり正当な方法が良いでしょうね。 var num=new Array(11,22,33,44,55); var name=new Array('test','test1','test2','test3','test4');
お礼
ご回答ありがとうございました。 上記はやってみたんですが・・駄目でした。
関連するQ&A
- 1 ～ Nまでの整数の総和(1+2+3...+N)を求めるJavaScriptの記述は？
JavaScriptを学んでいます。初歩的な質問で大変申し訳ないのですが、どうしても自分で解決できずに困っています。 「1 ～ Nまでの整数の総和(1+2+3...+N)を求める関数を持つスクリプトを作成する」というのが目標なのですが、下記のようなスクリプトはinternet Explorerでは動作しません。MozillaFirefoxおよびOperaでは意図したとおり動作できることを確認しています。どこに誤りがあるのでしょうか？どなたかアドバイスをお願いいたします。 <html> <head> <meta http-equiv="Content-Script-Type" content="text/javascript"> <title>kadai</title> <script type="text/javascript"> <!-- function keisan(num1,num2){ return num1*num2/2; } //--> </script> </head> <body> <script type="text/javascript"> <!-- var num1 = prompt("1～入力データまでの総和を計算します。",""); var num2 = num1++; alert("1 ～ 入力データまでの総和は、" + keisan(num1,num2) + "です。"); //--> </script> </body> </html>
- ベストアンサー
- JavaScript
- javascriptで困っています。教えてください
以下のようにjavascriptの内容を書いた外部のテキストファイルを読み込んで、実行しようとしているのですが、うまくいきません。普通にjavascriptを読み込むのは分かっているのですが、このような方法ができないのでしょうか？よろしくお願いします。 <!doctype html> <head> <meta http-equiv="Content-Type" content="text/html; charset=UTF-8" /> <title>無題ドキュメント</title> </head> <body> <div id="jsbox"></div> <script type="text/javascript"> var jsbox = document.getElementById("jsbox"); //非同期通信///////////////////////////////////////////// var xmlHttp; loadText(); function loadText(){ if (window.XMLHttpRequest){ xmlHttp = new XMLHttpRequest(); }else{ if (window.ActiveXObject){ xmlHttp = new ActiveXObject("Microsoft.XMLHTTP"); }else{ xmlHttp = null; } } xmlHttp.onreadystatechange = checkStatus; xmlHttp.open("GET", "http://xxxxxxxxxxxx/js_test.txt", true); xmlHttp.send(null); } function checkStatus(){ if (xmlHttp.readyState == 4 && xmlHttp.status == 200){ var str = xmlHttp.responseText;alert(str); jsbox.innerHTML = str; test_js(); } } ///////////////////////////////////////////////////////////////// </script> </body> </html> テキストファイルをhttp://xxxxxxxxxxxx/js_test.txtに置き、テキストファイルの内容が <script type="text/javascript"> function test_js(){ alert("test"); } </script>
- 締切済み
- JavaScript
- ＪＳの記述を別ファイルに移す
下記のＨＴＭＬ内の <script type="text/javascript">～</script> をtest.jsとして別ファイルに移す場合にどのように、記述するればよいのでしょうか。単純にコピペしたのですがうまくいきません。 初歩的だとは思いますが、ご指導をお願いします。 --------------------------------- <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"> <html lang="ja"> <head> <meta http-equiv="Content-Style-Type" content="text/css"> <meta http-equiv="Content-Script-Type" content="text/javascript"> <link href="css/style.css" rel="stylesheet" type="text/css" /> <script type="text/javascript" src="js/Draggable.js"></script> </head> <body> <div id="test1" class="test"></div> <div id="test2" class="test"></div> <script type="text/javascript"> var test1 = new Draggable("test1"); var test2 = new Draggable("test2"); </script> </body> </html>
- ベストアンサー
- JavaScript
- JavaScriptを使う時は、
・・・・・・・・・・・・・・ <HTML> <HEAD> <TITLE> </TITLE> </HEAD> <BODY> <script> alert("test"); </script> </BODY> </HTML> ・・・・・・・・・・・・・・ これでメッセージボックスが表示されるのですが、 なぜ <script type ="text/javascript"> <!-- //--> </script> で括らなくていいのでしょうか？ JavaScriptを使う時は、 <script> </script> だけでもいいのでしょうか？ http://www.pori2.net/js/kihon/4.htmlこのサイトを参考にしました。
- ベストアンサー
- JavaScript
- 外部ファイルの記述の問題なのかエラーが出ます
IE6を使っています。 次のように[a.js]を呼び出したのですが、 オブジェクトがありませんとエラーが出ます。 そのエラーの次に[test.html]にあるalertの内容は表示されます。 どこが間違っているのでしょうか？ [a.js] var a = document.body.clientWidth; [test.html] <html> <head> <title>test</title> <script type="text/javascript" src="a.js"></script> </head> <body> <script type="text/javascript"><!-- alert(document.body.clientWidth); --></script> </body> </html>
- ベストアンサー
- JavaScript
- ＰＨＰとＪａｖａｓｃｒｉｐｔの連携について
ＰＨＰ・Ｊａｖａｓｃｒｉｐｔの初心者です。 ＰＨＰで設定された、配列のデータをＪａｖａｓｃｒｉｐｔで作成した関数の渡したいのですが どうすればいいのでしょうか？ 以下にサンプルを作成したのですが ＰＨＰで設定した、配列 $name が Ｊａｖａｓｃｒｉｐｔに渡せません。 何が悪いのですか？ 教えてください。 よろしくお願いします。 -sample.php- <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtml" xml:lang="ja" lang="ja"> <head> <meta http-equiv="Content-Type" content="text/html;charset=utf-8" /> <!-- CSS: implied media="all" --> <link type="text/css" rel="stylesheet" href="css/websyslogin.css" /> <!-- JavaScript loading --> <script src="js/websysdebug.js"></script> <script type="text/javascript"> function sysdebug( ss ){ alert( "Login -> "+ss ); } </script> <!-- タイトル --> <title>Vware Web System(PHP) </title> </head> <body> <?php $name = array(); $name[0] = "ABC"; $name[1] = "BCA"; ?> <input type="button" value="TEST" name="debug" id="debug" onclick="sysdebug(' <?php print $name[0]; ?> ');" /> <script type="text/javascript"> for( i=0;i< 2;i++ ) { ss = ' <?php print $name['+i+']; ?> '; alert( ss ); } </script> </body> </html>
- ベストアンサー
- PHP
- Javascriptの外部サーバーからの読み込み(greybox)
いつも参考にさせていただいてます。 greyboxを使ってページを表示したいのですが、 使っているサーバーはjsファイルなどがアップロードできない、CMSサービスのサイトなので、 別のレンタルサーバーにアップロードしたjsファイルを読み込んで動かしたところうまくいきません。 模範例では、 ----------------------------------- <!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"> <html> <head> <meta http-equiv="content-type" content="text/html;charset=utf-8"> <title>Sample</title> <link rel="stylesheet" href="greybox/gb_styles.css" type="text/css" media="all"> <script type="text/javascript"><!-- var GB_ROOT_DIR = "./greybox/"; // --></script> <script type="text/javascript" src="greybox/AJS.js"></script> <script type="text/javascript" src="greybox/AJS_fx.js"></script> <script type="text/javascript" src="greybox/gb_scripts.js"></script> </head> <body> <h1>GreyBox サンプル</h1> <a href="http://job.mycom.co.jp/" title="job" rel="gb_page[480,360]"> 毎日就職ナビのページ表示 </a> </body> </html> ----------------------------------- なのですが、パスを絶対パスに変えて ----------------------------------- <link rel="stylesheet" href="http://mydomain/greybox/gb_styles.css" type="text/css" media="all"> <script type="text/javascript"><!-- var GB_ROOT_DIR = "http://mydomain/greybox/"; // --></script> <script type="text/javascript" src="http://mydomain/greybox/AJS.js"></script> <script type="text/javascript" src="http://mydomain/greybox/AJS_fx.js"></script> <script type="text/javascript" src="greybox/http://mydomain/gb_scripts.js"></script> ----------------------------------- と変更しました。 成功例(jsファイル同一サーバー上)：http://greybox.main.jp/test_ng/index2.html 失敗例(jsファイル別サーバー上)：http://greybox.main.jp/test_ok/index1.html 対応方法をお教え下さい。よろしくお願い致します。
- ベストアンサー
- JavaScript
- グローバル変数とローカル変数について
今JavaScriptを勉強している初心者です。 実は、ある本に書かれているソースコードでグローバル変数とローカル変数の違いがよく分からなくなりましてここに質問させて頂く次第です。 まずは、ソースコードを書きます。 <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd"> <html> <head> <meta http-equiv="Content-Script-Type" content="text/javascript"> <meta http-equiv="Content-type" content="text/html; charset=UTF-8"> <title>変数のスコープ</title> <script type="text/javascript"> function testFunc(){ var num; num=5; } </script> </head> <body bgcolor="#FFFFFF"> <p style="font-size:200%"> <script type="text/javascript"> var num=3; testFunc(); document.write(num, "<br>") </script> </p> </body> </html> このままだとブラウザに表示されるのはグローバル変数「３」になるというのも今一分からないのですが。 この次に<head>部分の var num; をコメントにします。 すると、何故かローカル変数「５」がグローバル変数になり、<body>部分のtestFunc（）メソッドの結果ブラウザに表示される値が「５」になるというものです。 var num; をコメントとする事はnumは変数宣言されていないことになります。 なのに num = 5; が成り立つのもよく分かりません。 そこでアドバイスを頂きたくここに書き込む事にしました。 是非とも宜しくお願い致します。
- ベストアンサー
- JavaScript
- javascriptで合計を出力したいです
まず最初にソース載せます⇓ <html> <head> <meta http-equiv="Content-Script-Type" content="text/javascript"> <meta http-equiv="Content-type" content="text/html; charset=shift-jis"> <title>総合演習</title> </head> <body bgcolor="#FFFFFF"> <script type="text/javascript"> var ninzu2; var ninzu; ninzuu2=Number(ninzu); ninzu=prompt('人数を入力してください', '3');//人数を入力 var points2; var points; points2=Number(points) var points=new Array(); for(var i=0; i<ninzu; i++){ var anaswer; points[i] = anaswer; anaswer = prompt("点数を入力してください",""); var anaswer2; anaswer2=Number(anaswer); } var sum2; var sum=0; sum2=Number(sum); for(i=0; i<points.length; i++){ sum=+points[i]; } document.write(sum); </script> </body> </html> エラーはいっさいありません。ただ計算式が間違ってるだけです ３回入力し、１回目10, 2回目20、 ３回目30と入力すると出力結果は２０が返ってきました。 要件は入力した数字分の合計を求めるという物です。 けど２０が返ってくるってことは平均を出力しているってことですよね？ 考えてもわからなくってアドバイスお願いします。
- ベストアンサー
- JavaScript
- javascriptでselectboxのvalueを取得し、特定のv
javascriptでselectboxのvalueを取得し、特定のvalue値により、「<input type="text" name～>」をブラウザに表示させたいのですが、やり方がわかりません。 javascriptについて素人です。 jQUERYを使用して、phpのようにif文を追加したらいけるのかなと思って下記のようにやってみたのですが、更新しないと変わりませんでした。。 どなたかお力を貸して下さい！どうか宜しくお願い致します！ ========================================== <head> <meta http-equiv="Content-Type" content="text/html; charset=euc-jp" /> <meta name="robots" content="noindex,nofollow" /> <meta http-equiv="Content-Script-Type" content="text/javascript" /> <script type="text/javascript" src="/admin/js/jquery-1.2.3.js" ></script> <script type="text/javascript"> $(function() { hogehoge = $("#abcdefg").val(); if(hogehoge !== '3'){ $('#hijklmn').hide(); } }); </script> </head> <body> <form method="post" action="/admin/～"> <select id="abcdefg"> <option value="1">aaaaaaaa</option> <option value="2">bbbbbbbb</option> <option value="3">cccccccc</option> </select> <div id="hijklmn"> 上のセレクトボックスが3の場合のみ、下記のフォームを表示させたい <input type="text" value="ああああああああ" /> </div> </form> </body> </html>
- ベストアンサー
- JavaScript
お礼
ありがとうございます。 こんなすばらしい回答をすぐにいただけるとは感動しております。 実はJavaScriptは昨日から学習を始めたばかりで、 今まではC/C++/perl/phpと学習して来たんですが、 まだJavaScriptにおいてのローカルとグローバルな変数については 学習していなくて・・・ これで全てつじつまがあいました！ 気持ちよく次のステップへ進めそうです。 疑問としては、IEではString型を配列として扱えない点です。 Cなどでは文字列＝配列ということが念頭に置かれていたので・・ 逆にこのように文字列を配列として扱いたい場合にIEではどうするのか？ このあたりは自分で調べてみます。 ありがとうございました。 また質問させてください。