JavaScriptのfor文条件式について

このQ&Aのポイント
  • JavaScriptのfor文の条件式「y < year + 2」は、yがyearよりも小さい場合に処理を続ける意味です。
  • 具体的には、現在の年度を表す変数yearに2を足した値よりもyが小さい場合、処理を繰り返します。
  • 例えば、yearが2021の場合、yが2020までの範囲で処理が繰り返されます。
回答を見る
  • ベストアンサー

js for文 条件式

javascript function generateCalendarPulldown(){ //var nowDate = new Date(today); var year = Number(todayArr[0]); var mon = Number(todayArr[1]); var $selectYear = $('#dialog_panel .dialog_body ul li select#year'); var $selectMonth = $('#dialog_panel .dialog_body ul li select#month'); $selectYear.empty(); $selectYear.empty(); for(var y = year; y < year + 2; y++){ $selectYear.append(new Option(y, y)); } for(var m = 1; m < 13; m++){ $selectMonth.append(new Option(m, m)); } $selectYear.val(year); $selectMonth.val(mon); generateDay(); } javascriptのコードなのですが12行目のfor文の初期化式なのですが for(var y = year; y < year + 2; y++)の条件式の部分の 「 y < year + 2 」、yが yearよりも小さければ処理を続けるという意味だと思うのですが year + 2の部分の意味が良く理解できていないのですが 日本語で解説するとどのような文章になるでしょうか? (yが year より小さければ year に2を足すという意味ではないですよね?)

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

  • ベストアンサー
  • chie65535
  • ベストアンサー率43% (8519/19367)
回答No.2

>「 y < year + 2 」、yが yearよりも小さければ処理を続けるという意味だと思うのですが 違います。 y < year + 2 と書いた場合、加算演算子+の方が、比較演算子<よりも優先順位が高いので y < (year + 2) と言う意味になる。 なので「y」と「year + 2」を比較する事になる。 つまり「yが、yearに2を足した値よりも小さいならば」と言う意味になる。 演算子には「優先順位」と言うのがあるって事を覚えておこう。基本中の基本です。

その他の回答 (1)

  • UmeRabbit
  • ベストアンサー率37% (15/40)
回答No.1

var y = year ここでyをyearで初期化しています。 例えば2017という数値が入ったとします。 y < year + 2 この条件式はyがyear+2より小さい場合ループという条件です。 先程の条件で置き換えるとy < 2017 + 2 つまり y < 2019 となります。 上記の考え方から指定した年から2年分のカレンダーを生成するプログラムなのではないかと思います。

関連するQ&A

  • 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-Type" content="text/html; charset=shift_jis"> <title>スクリプトテスト</title> <style type="text/css"> .menu li{ list-style-type:none; float:left; border:solid 1px #666666; } .menu li a{ padding:5px; background:#eeeeee; display:block; } .menu li a:hover{ background:#ffffff; } </style> <script type="text/javascript"> <!-- var day01 = new Date(); var year01 = day01.getFullYear(); //年 var mon01 = day01.getMonth() + 1; //月 var date01 = day01.getDate(); //日 var day02 = new Date(); day02.setDate( day02.getDate()+1 ); var year02 = day02.getFullYear(); //年 var mon02 = day02.getMonth() + 1; //月 var date02 = day02.getDate(); //日 var day03 = new Date(); day03.setDate( day03.getDate()+2 ); var year03 = day03.getFullYear(); //年 var mon03 = day03.getMonth() + 1; //月 var date03 = day03.getDate(); //日 var day04 = new Date(); day04.setDate( day04.getDate()+3 ); var year04 = day04.getFullYear(); //年 var mon04 = day04.getMonth() + 1; //月 var date04 = day04.getDate(); //日 var day05 = new Date(); day05.setDate( day05.getDate()+4 ); var year05 = day05.getFullYear(); //年 var mon05 = day05.getMonth() + 1; //月 var date05 = day05.getDate(); //日 var day06 = new Date(); day06.setDate( day06.getDate()+5 ); var year06 = day06.getFullYear(); //年 var mon06 = day06.getMonth() + 1; //月 var date06 = day06.getDate(); //日 var day07 = new Date(); day07.setDate( day07.getDate()+6 ); var year07 = day07.getFullYear(); //年 var mon07 = day07.getMonth() + 1; //月 var date07 = day07.getDate(); //日 // --> </script> </head> <body> <ul class="menu"> <script type="text/javascript"> <!-- document.write('<li><a href="'+year01+mon01+date01+'.html">'+mon01+'月'+date01+'日'+'</a></li>'); //--> </script> <script type="text/javascript"> <!-- document.write('<li><a href="'+year02+mon02+date02+'.html">'+mon02+'月'+date02+'日'+'</a></li>'); //--> </script> <script type="text/javascript"> <!-- document.write('<li><a href="'+year03+mon03+date03+'.html">'+mon03+'月'+date03+'日'+'</a></li>'); //--> </script> <script type="text/javascript"> <!-- document.write('<li><a href="'+year04+mon04+date04+'.html">'+mon04+'月'+date04+'日'+'</a></li>'); //--> </script> <script type="text/javascript"> <!-- document.write('<li><a href="'+year05+mon05+date05+'.html">'+mon05+'月'+date05+'日'+'</a></li>'); //--> </script> <script type="text/javascript"> <!-- document.write('<li><a href="'+year06+mon06+date06+'.html">'+mon06+'月'+date06+'日'+'</a></li>'); //--> </script> <script type="text/javascript"> <!-- document.write('<li><a href="'+year07+mon07+date07+'.html">'+mon07+'月'+date07+'日'+'</a></li>'); //--> </script> </ul> </body> </html>

  • JS 日付表示

    JavaScript for文の日付表示について JavaScriptでfor文で日付表示したい場合、月末の最終日を取得するだけでは月の切り替えができないのでしょうか? 今日から一週間後までを表示するアプリを作りたいのですが1/31を過ぎると2/1にならず1/32と表示されてしまいます。 何か間違っている所ありますでしょうか? 以下ソースコード <script type="text/javascript"><!-- var now = new Date(); var y = now.getFullYear(); var m = now.getMonth() + 1; var d = now.getDate(); console.log(now); // Thu Jan 30 2014 00:00:00 GMT+0900 (東京 (標準時)) console.log(new Date(now.getFullYear(), now.getMonth() + 1, 0)); // Fri Jan 31 2014 00:00:00 GMT+0900 (東京 (標準時)) for(i=0;i<100;i++){ document.write(y + "/" + m + "/" + (d + i).toString() + "<br>"); } // --></script> <body> </body>

  • JavaScript多重ループを使ったHTML生成

    JavaScriptで以下のようなHTMLを生成したいと考えています。 <li>を任意の数で繰り返し処理して生成し、 さらにそれを任意の数で繰り返し処理して生成した<ul>に 紐づけるようにしたいと考えています。 <div id="index"> <ul>   <li><div></div></li>   <li><div></div></li>   <li><div></div></li>   ↓   <li>任意の数で繰り返し </ul> <ul>   <li><div></div></li>   <li><div></div></li>   <li><div></div></li>   ↓   <li>任意の数で繰り返し </ul> ↓ <ul>任意の数で繰り返し </div> 以下のようなスクリプトをjQueryを使って書いてみましたが、うまくできませんでした。 アドバイスいただけると大変助かります。 よろしくお願いいたします。 (function(x, y) {   var i = 0, j = 0, x = x, y = y;   var index = $("#index");     while(j < y) {       var ul = $("<ul>");       ul.appendTo(index);       while(i < x) {         var li = $("<li>");         var div = $("<div>");         div.appendTo(li);         li.appendTo(ul);         i++;       }     j++;     } })(5, 5);

  • for(var i=0;...) の i の値を保持するには?

    ----- <ul> <li>test1</li> <li>test2</li> <li>test3</li> </ul> <script type='text/javascript'> (function(){ var li = document.getElementsByTagName('li'); for(var i=0,max=li.length; i<max; i++){ li[i].onclick = function(){ alert(i); }; } })(); </script> ----- 上記スクリプトを実行すると、全てのli要素でクリックしたときに "3" がalertされます。 0,1,2 をそれぞれalertしたいのですが、どういった方法が考えられるでしょうか? 現在作成しているスクリプトでは、下記のようにidに値を保持しています。 もう少しスマートな方法がある気がするのですが…。 --- li[i].id = 'test' + i; li[i].onclick = function(){ alert(this.id.replace(/^test(\d+)/, '$1')); }; ---

  • スクリプトで<div id="links">

    下記スクリプトで<div id="links"></div>のところを 開いた瞬間 <ul> <li><a href="http://foo.com/">foo</a></li> <li><a href="http://bar.com/">bar</a></li> </ul> に変換したいのですがうまくいきません どこをどのように変更すれば変換されるのでしょうか 【スクリプト】 <!DOCTYPE html> <html> <head> <meta charset="utf-8" /> <script type="text/javascript"> var URL = new Array("http://foo.com/","http://bar.co.jp/"); var TITLE = new Array("foo","bar"); // 表示用コンテナ var container = document.getElementById('links'); // リセット container.innerHTML=''; var ul=document.createElement('ul'); container.appendChild(ul); for(var i=0;i<URL.length;i++){ var li=document.createElement('li'); var a=document.createElement('a'); // 'href'属性の設定 a.setAttribute('href',URL[i]); // ラベル a.appendChild(document.createTextNode(TITLE[i])); li.appendChild(a); ul.appendChild(li); } </script> </head> <body> <div id="links"></div> </body> </html>

  • jQueryでXMLを操作

    jQueryでXMLを操作 最近jQueryを勉強しはじめました。 jQueryでXMLを読み込んで、item val="new"を含んだデータのみ<ul></ul>内に表示したいのですが うまくいきません。 ご教授願います。 また、こういったjQueryの使い方に関する、お勧めの本やページ等ございましたら 教えてください。宜しくお願い致します。 -------------------------XML Data------------------------- <data> <item val="new"> <link>01.html</link> <name>ほげ田 ほげ太</name > <photo>dummy.jpg</photo> </item> <item val="new"> <link>02.html</link> <name>ほげ田 ほげ子</name > <photo>dummy.jpg</photo> </item> <item val="new"> <link>03.html</link> <name>ほげ山 ほげ太</name > <photo>dummy.jpg</photo> </item> <item> <link>04.html</link> <name>ほげ山 ほげ子</name > <photo>dummy.jpg</photo> </item> </data> -------------------------JavaScript------------------------- $(function(){ $.ajax({ url: 'doctors/data.xml', dataType: 'xml', timeout: 1000, error: function(){ alert("xmlファイルの読み込みに失敗しました"); }, success : function(data){ $("item",data).each(function(){ if($("item",this).attr("val") == "new"){ $(".column").append('<li><a href="'+$("link",this).text()+'"><img src="image/'+$("photo",this).text()+'" alt="'+$("name",this).text()+'" title="'+$("name",this).text()+'"></a></li>'); } }) } }) $("li.noJavaScript").remove(); }) -------------------------HTML------------------------- <div id="wrapper"> <ul class="column"> <li class="noJavaScript">javaScriptを有効にしてください。</li> </ul> </div>

  • jqueryにてIEでの不具合 each処理?

    cromeやfirefoxでは正常に動きますが、IEにて一部動いてくれない部分があり困っています。 おかしな点や原因など教えていただきたくご質問させていただきます。 <style> .that{color:red;} </style> <script type="text/javascript"> $(function(){ $('button').click(function(){ $('#list>ul').removeClass('that'); var val = $(this).text(); $('#list>ul li').each(function(){ if($(this).text() == val){ $(this).parent().addClass('that'); }; }); }); }); </script> html↓ <button>100</button> <button>200</button> <button>300</button> <div id="list"> <ul> <li>100</li><li>200</li> </ul> <ul> <li>300</li><li>200</li> </ul> </div> クリックしたボタンの数値があるULの色を変えるものです。 100と300をクリックした場合は正常に変わりますが、200をクリックした時に変わらなくなります。 <li>の中で最後に書かれている数値が効かなくなるようで、<li>の100と200を入れ替えると100が効かなくなります。(IEのみ) 原因等わかりましたらよろしくお願いいたします。

  • JavaからJavascriptの配列を出力したい

    JavaからJavascriptの配列を出力したいのですが、 appendした要素を区切り文字で区切って返す方法が わかりません。 <% StringBuffer js = new StringBuffer(); js.append("1"); js.append("2"); %> Javaで↑のように格納した後に、 下記のようにJavascriptの配列を出力したいです。 if(a = 1){ val=new Array("1,"2"); }

  • jQueryでリストを分割してページ送りを表示

    現在、以下の内容でリストを分割してページ送りで切り替えられる様にしています。 [jQuery] $(function() { var item = $('#list li').length; var i = 0; while (i < item){ var group = i * 10; var num = group + 10; for (var j = group; j < num; j++) { $('#list li').eq(j).addClass('num'+(i+1)); } i++; } /* Pagenation */ $('#list').after('<ul id="nav"></ul>') var lastrep = $('#list li:last').attr('class').replace(/no/i,''); var lists = ""; for (var i = 0; i < lastrep; i++) { lists += '<li class="page-count">'+( i+1 )+'</li>\n'; } $("nav").append(lists); /* First View */ $('#list li').hide(); $('#list .no1').show(); $('#nav li').eq(0).addClass('current'); /* Click */ $('#nav li').click(function () { var items = $(this).parent().children().index(this); var setitems = items +1; $('#list li').hide(); $('#list .no'+setitems).show(); $('#nav li').removeClass('current'); $(this).addClass('current'); }); }); [html] <ul id="nav"> <li class="page-count current">1</li> <li class="page-count">2</li> <li class="page-count">3</li> <li class="page-count">4</li> </ul> <ul id="list"> <li class="no1">item</li> <li class="no1">item</li> ... <li class="no4">item</li> </ul> このページネーションの部分を次の様にするにはどうしたら良いでしょうか…? [html] <ul id="nav"> <li class="page-count">Prev</li> <li class="page-count">Next</li> </ul> <div class="count"><span class="now">1</span>/<span class="total">4</span></div>

  • JavaScriptのプルダウン処理について

    最近JavaScriptを勉強し始め、うるう年に対応した日付プルダウン処理が可能、という事なので、ネットを参考に以下のようにしてみました。 //月によって日数を変更する処理 function setDay(year,month,day) { var y = parseInt(document.getElementById(year).value,10); var m = parseInt(document.getElementById(month).value,10); // 閏年判定 if (2 == m && (y % 400 == 0 || (y % 4 == 0 && y % 100 != 0))) { //月の最終日の変数 var last = 29; } else { var lastday = new Array(31, 28, 31, 30, 31, 30, 31, 31, 30, 31, 30, 31); last = lastday[m-1]; } // 要素取得と初期化 var obj = document.getElementById(day); obj.length = 0; // 日の要素を追加 for (var i = 0; i < last; i++) { obj.options[obj.length++] = new Option(i + 1, i + 1); } } これでうるう年対応とする事は出来たのですが、恥ずかしい事にネットの情報なので、何をしているのかおぼろげにしか理解出来ません。大変申し訳ないのですが、このソースについて解説して頂けないでしょうか?どうぞよろしくお願い致します。

専門家に質問してみよう