• ベストアンサー

初歩サンプル(値の型?)でつまづいてます。。

HTMLとスタイルシートしかわからず、初のプログラミング言語としてJavascriptを選びました。 とりあえず入門書籍のサンプルを見ながら勉強しているのですが、 さっそくfor文というか、値の型?で混乱してます。。 【Javascript部分】 function doClick(){ var str = ""; //←(1) var n = document.form1.select1.options.length; for(var i = 0;i < n;i++) if (document.form1.select1.options[i].selected)    str += document.form1.select1.options[i].value + ","; //←(2) var str = "選択項目:" + str ; document.getElementById("showText").innerHTML = str; } 【HTML部分】 <p>※テスト用ページ</p> <div name="showText" id="showText">(※未設定)</div> <form name="form1"> <select name="select1" size="3" multiple> <option value="あいうえお">あいうえお</option> <option value="かきくけこ">かきくけこ</option> <option value="さしすせそ">さしすせそ</option> </select> <input type="button" value="送信" onClick="doClick();"> </form> options.lengthで配列の総数を数えて、真偽値を調べfor文で繰り返し、結果を反映させる部分はわかります。 わからない部分は、 (1)「var str = "";」の「""」は空の文字列を代入?ということでしょうか? 試しに消し見ると「undefined」が記述されるのですが…… 型を定義してないと起こる?問題のようで、型の宣言のようなものということでしょうか? (2)str += document.form1.select1.options[i].value + ","; for文中で、最初の一回目は「""+あいうえお+","」、二回目は「""+あいうえお+","+かきくけこ+","」……と繰り返されていくと思うのですが、(1)の意図がわからないので、「""」の空部分の意味が理解できません。 たぶんとるに足らない疑問のような気がするのですが…… ご教授いただけるとうれしいです。 ※蛇足なんですが、for文やif文に中括弧{}がついてなくても動きはしますが、つけないのがベターなのでしょうか? (入門書籍なのでスタンダートを書いてるとは思うのですが……)

質問者が選んだベストアンサー

  • ベストアンサー
noname#84373
noname#84373
回答No.3

さらに蛇足。 var a; a +=1; だとaが初期化されていないのでError! それこそundefnedなので、0なのかnullなのか?! 人間が勝手に0だと思っているだけ。文字列でも同じ 勝手に""だと思ってるだけ。 for if while などの後ろにつける {}ですが、自分の場合 forも含めて一行で用事を済ませられるなら{}は省略しています 可読性は悪化しますが、 a=b=c=d=e=1; if( a=b ) e=(b=2,c=3,d=4,5);//a==bではない。1行で複数動作 alert([a,b,c,d,e]); if( 式 )の式の部分が 0 or "" 以外なら実行されるので a=b は代入式ですが1を返すので実行されます (式1,式2,式n,…)は一番最後の数値を返すとか。 まぁ~こんなの使う人は多くありませんが 1行で済ませたい場合使います。 そう!私は短いコードが好きです。

waracabin
質問者

お礼

回答ありがとうございます。 >というか(3)は不要。 わたしも、なんで二回書くのかは疑問でした。 教科書がベストとは限らないようで困ります(苦笑) >document.form1.select1 は、教科書が古いかな? 2007年7月刊行の書籍ですが……あんまり過信しないようにします(^^; 「初期化」ということで、すんなり理解できました。 ちゃんとコンピュータがわかるように定義しないといけない、ということですね。 {}は、とりあえず最初のうちはつけ忘れをしないように、一行でもつけていこうと思っています。 HTMLなら打ち忘れでエラーが出ませんが……プログラミングはシビアですね、セミコロン一個を許さないようで(汗

その他の回答 (2)

noname#84373
noname#84373
回答No.2

本題とは関係ないけど function doClick(){ var str = ""; //←(1) var n = document.form1.select1.options.length; for(var i = 0;i < n;i++) if (document.form1.select1.options[i].selected)    str += document.form1.select1.options[i].value + ","; //←(2) var str = "選択項目:" + str ;←(3) document.getElementById("showText").innerHTML = str; } どうせ(3)で"選択項目:"を最初にするので(1)の段階でそれを代入。 (3)でもう一度var str = とするのも変。 というか(3)は不要。 document.form1.select1 は、教科書が古いかな? selectにidを振り、document.getElementById で使う

noname#77845
noname#77845
回答No.1

変数は、宣言した直後は中に何が入っているか不定です。 なので、確実に「空っぽ」の変数にするために「""」で初期化しています。 for文やif文に中括弧が付いていないのは、後に続く式が一つの時だけです。複数の式が付くときは{}をつけてブロックにしないといけません。 逆に言うと、一つしか式がなければどちらでも構いませんよ。 でも、人のコーディングしたソースを見ると判りますが、{}が付いていないif文やfor文はぱっと見判りづらいです…。(私だけ?)

waracabin
質問者

お礼

他の方の意見と照らし合わせて、「初期化」ということで妙にしっくりきました。 個人的には、やはり仰るように{}があったほうがわかりやすいと思います。 テキストに愚痴ても仕方ありませんが、こう書けよと書いておいて、いきなり端折るのはどうかなぁとか思ったりしました(苦笑)

関連するQ&A

  • Javascriptの動的リスト作成について

    Javascriptの動的リスト作成について お世話になっています。 Javascriptで選択リストを動的に変えたいと思っています。 また、Javascriptで作成したリストは、multipleとして複数選択できるようにしたいと考えています。 そこで、下記のようにスクリプトを書きました。リスト2(smallwheretag)が1つのみ選択を許すときは、うまくいったのですが、multipleにするためにnameを配列にしたところ、うまくリストが作成できなくなってしまいました。 なにかスクリプトに変更が必要なのでしょうか?ご教授お願いいたします。 <HTML部> <select name="bigwheretag[]" onchange="javascript:listChange(this.value);"> <option value="">検索項目</option> <option value="11%">自然</option> <option value="12%">街</option> <option value="13%">家庭</option> </select> <select name="smallwheretag[]" multiple> <option value="">大項目を選択して下さい</option> </select> <Javascript部> var where1_text = new Array("川", "海", "山", "滝", "その他"); var where1_value = new Array("1101", "1102", "1103", "1104", "1199"); flag1 = document.form.bigwheretag.value; if (flag1=="11%") { document.form.smallwheretag.length = where1_text.length; for(var i=0; i<where1_text.length; i++) { document.form.smallwheretag.options[i].text = where1_text[i]; document.form.smallwheretag.options[i].value = where1_value[i]; } }・・・・・・・・以下同様

  • javascript 要素取得

    htmlでチェックボックスを作り、その値をjavascriptで取得したいと思い、 下記のようなプログラムを書きました。 セレクトボックスから複数選択できるようにしたいのですが、 表示されるのは複数選んだ際に一番初めに選択したものだけです。  例) 「あああ」と「いいい」を選ぶと「あああ」のみ表示される。 しかし、これを「あああ.いいい」としたいのです。 できれば、 「あああ  いいい」 と改行できるといいです。 formの中にたくさんの項目があるため、 forのところがうまくいっていないのでしょうか? どなたかよろしくお願いします。 javascript側 function checkbox(){  var str="";  for(i=0;i<document.form1.elements.length;i++){   if(document.form1.elements[i].checked){     if(str != "") str = str + ".";     str = str + document.form1.document[i].value;   }  }  if(str == ""){   alert("入力してください");   return false;  }else{   document.form1.submit();  } } HTML側 <form action="<%=遷移先ページ%>" method="post" name="form1"> <select 複数> <input 複数> <input type="checkbox" name="document" value="・あああ"/>あああ <input type="checkbox" name="document" value="・いいい"/>いいい <input type="checkbox" name="document" value="・ううう"/>ううう <input type="submit" value="Submit" onclick="return checkbox();">

  • リストボックスに追加した全ての値を取得したいのですが・・・

    No.172288で質問したものですが まだJavaScriptを勉強しはじめたばかりでまた壁にぶつかってしまいました。 Bのリストボックスの値をAに追加して他のページにPOSTで送りたいのですが Aに追加された値をすべて送りたいのです。 それで、まずすべての値をとれるかどうかを確認するためにSubmitボタンを押して すべてを表示させるものを作ってみたのですが、どうしても 一番目(つまりiが0のAAAAA)しか表示できません。 エラーも出ないのでどこが間違っているのかがわからないのですが どこが間違っているのでしょうか。 何度もすみませんがよろしくおねがいします。 <html> <head> <title></title> </head> <script type="text/JavaScript"> <!-- function addItem() { A = document.X.A; B = document.X.B; for(var i=0;i<B.options.length;i++) if(B.options[i].selected) A[A.options.length] = new Option(B.options[i].text, B.options[i].value); } function func(){ for(var w=0;w<A.options.length;w++) document.write(A.options[w].text); } // --> </script> <body> <form name="X"> <select size="5" multiple name="A"> </select> <input type="button" value="Copy" onClick="addItem()"> <select size="5" multiple name="B"> <option>AAAAA</option> <option>BBBBB</option> <option>CCCCC</option> </select> </form> <form name="Y"> <input type="button" value="Submit" onClick="func()"> </form> </body> </html>

  • セレクトメニュー連動のテキストをクリアにしたい

    下記のサンプルがあります。 <html> <head> <title>form TEST</title> <script> <!-- menuItem = [["-選んで下さい-","いち","に","さん"], ["-選んで下さい-","ひい","ふう","み"], ["-選んで下さい-","もの","じ","とり"]]; function check(){ len = document.form.three.options.length; for (i=0; i<len; i++){ document.form.three.options[i] = null; } n = document.form.one.value; if(n == "1"){document.form.three.style.visibility = "visible"; for (i=0; i<menuItem[0].length; i++){ document.form.three.options[i] = new Option(menuItem[0][i],menuItem[0][i]); } }else if(n == "2"){document.form.three.style.visibility = "visible"; for (i=0; i<menuItem[1].length; i++){ document.form.three.options[i] = new Option(menuItem[1][i],menuItem[1][i]); } }else if(n == "3"){document.form.three.style.visibility = "visible"; for (i=0; i<menuItem[2].length; i++){ document.form.three.options[i] = new Option(menuItem[2][i],menuItem[2][i]); } } } msgtxt = new Array(); for (i=0; i<3; i++){msgtxt[i] = new Array(); } msgtxt[0][0] =" "; msgtxt[0][1] ="あいうえお"; msgtxt[0][2] ="かきくけこ"; msgtxt[0][3] ="さしすせそ"; msgtxt[1][0] =" "; msgtxt[1][1] ="たちつてと"; msgtxt[1][2] ="なにぬねの"; msgtxt[1][3] ="はひふへほ"; msgtxt[2][0] =" "; msgtxt[2][1] ="まみむめも"; msgtxt[2][2] ="やゆよ"; msgtxt[2][3] ="わゐうゑを"; function txtchg(){ x = document.form.two.selectedIndex; y = document.form.three.selectedIndex; document.form.four.value = msgtxt[x][y]; } // --> </script> </head> <body onLoad="check()"> <form name= "form"> Value1 <select name="one" onchange="check()"> <option value="1">1</option> <option value="2">2</option> <option value="3">3</option> </select> Value2 <select name="two" onchange="check()"> <option value="1">1</option> <option value="2">2</option> <option value="3">3</option> </select> Value3 <select name="three" style="visibility:hidden" onchange="txtchg()"> </select> Value4 <textarea name="four" rows="1" cols="10"></textarea> </form> </body> </html> これは、Value1の選択値によってValue3の選択肢を変えて、Value2とValue3の選択値の組み合わせの結果をValue4に記入するという動作のサンプルです。 でもこれですと、Value2とValue3の結果でValue4に記入された後に、Value1やValue2を変更した場合、Value3は初期値に戻るのですが、Value4はそのまま表示されたままになってしまいます。本当はValue3が初期値に戻ったのだから、その場合はValue4をクリアにしたいのですが。 どこをどう修正すればその動作が可能になるのか、ご教示お願い致します。

  • プルダウンを2個選び、その結果に基づき、値を返す。

    プルダウンを2個選び、その結果に基づき、値を返したいです。 以下はそのhtml文です。 <!DOCTYPE html> <html> <head> <title>プルダウンのメニューを表示を2つ設定</title> <script> function selectboxChange() { var value1 = document.forms.form1.Select1.value; var value2 = document.forms.form11.Select11.value; var target = document.getElementById("output11"); if ((value == "要素1")&&(value == "要素11")) { target.innerHTML = "合っています。"; } else { target.innerHTML = "間違っています。"; } } //--------------------- // </script> </head> <body> <div>プルダウンのメニュー1</div> <form name="form1" action=""> <select id="Select1" onchange="selectboxChange();"> <option>---</option> <option value="要素1">要素1</option> <option>要素2</option> <option>要素3</option> <option>要素4</option> <option>要素5</option> </select> </form> <div>プルダウンのメニュー2</div> <form name="form11" action=""> <select id="Select11" onchange="selectboxChange();"> <option>---</option> <option value="要素11">要素1</option> <option>要素2</option> <option>要素3</option> <option>要素4</option> <option>要素5</option> </select> </form> <div id="output11"></div> </body> </html> プルダウンを2個紐づけたいのですが、var value=document.formsの文言を紐づけようとしましたが、 紐づけができません。 ですので、打開案をご教授願えたら幸いです。

  • 2つのコンボボックスの連携

    以前このカテゴリで「一方のコンボボックスの選択によりもう一方のコンボボックスの項目を絞り込む」スクリプトを拝見させていただいたのですが、次のとおり作成すると「な行」を選択すると「え」と「な」が選択項目として現れてしまいます。 どこかおかしいところがあるのでしょうがさっぱりわかりません。どなたか教えてください。よろしくお願いします。 ------------------------------------------------ <html> <head> <title>OK WEB</title> <script type="text/javascript"> <!-- txt = {}; txt["1"] = new Array("あ","い","う","え","お"); txt["2"] = new Array("か","き","く","け","こ"); txt["3"] = new Array("さ","し","す","せ","そ"); txt["4"] = new Array("た","ち","つ","て","と"); txt["5"] = new Array("な"); function initMenu(){ var i; for (i=0; i<txt["1"].length; i++){ document.FORM1.MENUB.options[i] = new Option(txt["1"][i],txt["1"][i]); } } function setSubMenu(area){ var i; for (i=0; i<document.FORM1.MENUB.length; i++){ document.FORM1.MENUB.options[i] = null; } for (i=0; i<txt[area].length; i++){ document.FORM1.MENUB.options[i] = new Option(txt[area][i],txt[area][i]); } } // --> </script> </head> <body onload="initMenu()"> <form name="FORM1"> <select name="MENUA" onchange="setSubMenu(this.value)"> <OPTION VALUE="1">あ行 <OPTION VALUE="2">か行 <OPTION VALUE="3">さ行 <OPTION VALUE="4">た行 <OPTION VALUE="5">な行 </select> <br> <select name="MENUB" > <OPTION VALUE="あ">-- </select> </form> </body> </html>

  • 連動セレクトボックスを同一ページにもう一つ追加したい

    今回質問させていただきたいのは同一ページ内に連動するセレクトリストを二つ付けたいのですが上手く起動してくれません。 説明下手ですみません・・ 例えばですけど htmlには、 <html> <head> <title>あ</title> <script type="text/javascript"> <!-- // --> </script> <script type="text/javascript"> <!-- window.onload=function (){ for(var i=0; i<data.length; i++){ document.FORM1.MENUA.options[i] = new Option(data[i][0],data[i][0]); } setSubMenu(0); }; function setSubMenu(no){ document.FORM1.MENUB.length=0; for(var i=1; i<data[no].length; i++){ document.FORM1.MENUB.options[i-1] = new Option(data[no][i].key,data[no][i].value); } } // --> </script> </head> <body> <form name="FORM1"> <select name="MENUA" onchange="setSubMenu(this.selectedIndex)"> </select> <br> <select name="MENUB" > </select> </form> </body> </html> 外部ファイルに data = [ // [メイン分類,サブ分類並び,…], ["北海道", {key:"函館市",value:"02_11"}, {key:"小樽市",value:"02_12"}, {key:"その他市町村",value:"02_099"}], ["青森", {key:"青森市",value:"03_01"}, {key:"弘前市",value:"03_02"}, {key:"その他市町村",value:"03_099"}], ["岩手県", {key:"盛岡市 ",value:"04_01"}, {key:"宮古市",value:"04_02"}, {key:"その他市町村",value:"04_099"}], ["宮城県", {key:"石巻市",value:"05_06"}, {key:"塩竈市",value:"05_07"}, {key:"その他市町村",value:"05_099"}] ]; この他にもう一つ別窓で <script type="text/javascript"> <!-- // --> </script> <script type="text/javascript"> <!-- window.onload=function (){ for(var i=0; i<data.length; i++){ document.FORM2.MENUC.options[i] = new Option(data[i][0],data[i][0]); } setSubMenu(0); }; function setSubMenu(no){ document.FORM2.MENUD.length=0; for(var i=1; i<data[no].length; i++){ document.FORM2.MENUD.options[i-1] = new Option(data[no][i].key,data[no][i].value); } } // --> </script> </head> <body> <form name="FORM2"> <select name="MENUC" onchange="setSubMenu(this.selectedIndex)"> </select> <br> <select name="MENUD" > </select> </form> </body> </html> 外部ファイルに data = [ // [メイン分類,サブ分類並び,…], ["プログラミング", {key:"HTML",value:"11_01"}, {key:"JavaScript",value:"11_02"}, {key:"その他市",value:"11_099"}], ["データベース", {key:"Oracle",value:"12_01"}, {key:"MySQL",value:"12_02"}, {key:"その他市",value:"12_099"}] ]; と書いたセレクトリストをもう一つ追加したいのです。 が何度やっても上手くいきません。

  • 今日の日付を自動的にセレクトしたいのですが・・・。

    うまくできません。 どなたか助けていただけないでしょうか? よろしくおねがいします。 今のソースはこんな状態です。 onChange="setDate(this.form);"は4月の時に30日までとかにつかっています。 <!--最初に今日の日付を選択したい--> var date=new Date(); var year = date.getYear(); var year= (year< 2000) ? year+1900 : year; var mon=date.getMonth(); var day=date.getDate(); alert(mon); function setNow(form){ for(var i = 0;i<document.nanngatu.nanngatu.options.length;i++){ if(document.nanngatu.nanngatu.options[i].text==mon){ document.nanngatu.nanngatu.options.selectedIndex=i; break; } } } --間は省略-- <onLoad="setNow(this.form)" > <form name="nanngatu"> <select name="nanngatu" onChange="setDate(this.form);" > <option value="32">1</option> <option value="30">2</option> <option value="32">3</option> <option value="31">4</option> <option value="32">5</option> <option value="31">6</option> <option value="32">7</option> <option value="31">8</option> <option value="32">9</option> <option value="31">10</option> <option value="32">11</option> <option value="31">12</option> </select>月

  • 正規表現をまとめることってできますか?

    正規表現をまとめるにはどうしたらよいでしょうか? var str = document.forms[0].school_list.value; if (str == "") return; var result = ""; for (var i = 0; i < str.length; i++) result = str.replace(/,/g,'\n'); document.forms[0].result_school_list.value = result; document.forms[0].result_school_list.select(); var str = document.forms[0].result_school_list.value; if (str == "") return; var result = ""; for (var i = 0; i < str.length; i++) result = str.replace(/、/g,'\n'); document.forms[0].result_school_list.value = result; document.forms[0].result_school_list.select();

  • 複数のセレクトメニューを制御するとき・・・

    どなたかお手すきでしたら、稚拙な質問にお付き合いお願い致します。 ネットで探した方法で、セレクトメニュー1の項目を選択したときにセレクトメニュー2の項目を変化させる制御をしています。 このフォームでDBにvalue値(1,2など数値で)を送信するようにしたいのですが この方法ですとセレクトメニュー2のvalue値が0(NULL)となってしまい上手く送信できません。 配列に文字列を入れていますし、DBの型をintにしているので0になってしまっていると思うのですが、 文字列としては送信したくはありません。 どのような方法でしたら文字列ではなく、上手くvalueに数値を入れることが出来るでしょうか。 どうかよろしくおねがいします。 以下使用しているコードです。 <html> <head> <title>テストテスト</title> <script language="JavaScript"><!-- menuItem = [ [], ["あああ","あああ2","あああ3","あああ4","あああ5"], ["いいい"], ["ううう","ううう2"], ["えええ","えええ2","えええ3","えええ4"] ]; function clearOption(len){ var i; for (i=0; i<len; i++){ document.aaa.bbb.options[i] = null; } } function setMenuItem(n){ optlen = document.aaa.bbb.options.length; while(optlen > 0){ clearOption(optlen); optlen = document.aaa.bbb.options.length; } if (menuItem[n].length > 0){ for (i=0; i<menuItem[n].length; i++){ document.aaa.bbb.options[i] = new Option(menuItem[n][i],menuItem[n][i]); } } } // --></script> </head> <body> <form name="aaa"> <select name="Maker" onChange="setMenuItem(this.selectedIndex)"> <option value="" selected>--- 選択してください ---</option> <option value="1">ひとつ</option> <option value="2">ふたつ</option> <option value="3">みっつ</option> <option value="4">よっつ</option> </select> <select name="bbb"> <option value="" selected>--- 選択してください ---</option> </select> </form> </body> </html>