Javascriptの意味を理解するための「+」

このQ&Aのポイント
  • Javascriptのコードで使われる「+」は、文字列の結合や数値の加算を行う演算子です。
  • 質問文のコードでは、変数nに数値を代入していますが、「+」の有無によって特に違いはありません。
  • 「+」を消しても残しても、Console.log(n);で数値を確認することができます。
回答を見る
  • ベストアンサー

Javascriptの「+」の意味が分かりません

FirefoxのGreasemonkeyで知恵袋でお礼によって 背景の色を変更するコードを教えてもらいました。 しかし、4行目の「+」の意味がよく分かりません。 整数とnullを判別しているというのは分かるのですが 「+」を消した場合と残した場合で Console.log(n); と書いて数値を見てみたのですが特に違いはありませんでした。 var rows = document.querySelectorAll('#open-tab li'); for (var i=-1,row;row=rows[++i];){ var m = /お礼:(\d+)枚\s*$/.exec(row.textContent); var n = m ? +m[1] : 0; if(n===50) row.style.backgroundColor = "#3C6"; else if(n===100) row.style.backgroundColor = "#4AD"; }

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

  • ベストアンサー
  • b0a0a
  • ベストアンサー率49% (156/313)
回答No.2

数字文字列を数値化しているだけです s = "123" n = -s とすればsは-123になります +だと符号を替えず単に数値化することが出来ます その後の処理で===を使っているので数値化は必須です ==ならいらない処理ですが

その他の回答 (1)

  • hitomura
  • ベストアンサー率48% (325/664)
回答No.1

+付きの場合と+なしの場合とでデータ型がどうなっているかを、typeof 演算子を使って比較してみると何が起こっているか理解できるかと思います。 https://developer.mozilla.org/ja/docs/Web/JavaScript/Reference/Operators/typeof

関連するQ&A

  • dhtmlx.comのガントチャート祝日表示

    以下のガントチャートを使用し、 http://dhtmlx.com/docs/products/dhtmlxGantt/index.shtml phpで更新可能にしたのですが、javascriptが無知の為、 祝日表示でつまづいています。 holiday.js に 祝日一覧を作り、読み込ませ、カレンダーの祝日部分の色を 変えようかと思っています。 以下のソースがヘッダーの土日の色を変えるソースのようですが、 newCell.innerHTML = day;newCell.setAttribute("idx", idx);var monthRow = row.parentNode.parentNode.rows[0];if (idx==0 || day==1){var newCell2 = monthRow.insertCell(monthRow.cells.length);newCell2.className = "monthName";newCell2.style.height = "20px";if (monthRow.cells.length%2 == 0)newCell2.style.backgroundColor = "#f7f8f7";newCell2.colSpan = this._calculateMonthColSpan(new Date(date), Math.max(1,this.countDays-idx));newCell2.innerHTML = this.getMonthScaleLabel(date)}else {var n = monthRow.cells.length, cs=0;for(var i=0;i<n;i++){cs += monthRow.cells[i].colSpan};if (idx>=cs)monthRow.cells[n-1].colSpan += 1};var w = date.getDay();if (w==0 || w==6)newCell.style.backgroundColor = "#f7f8f7"};GanttChart.prototype.incHeightPanelTasks = function(height) これは簡単に言うと、どういう命令文なのでしょうか? このあたりが理解できれば、何とかなりそうな気がするんですが・・・ よろしくお願いいたします。

  • javascriptでクリックするごとにセルの色を変えたい

    javascript初心者です。 現在テーブルの作成を行っており、マウスを乗せたら色が変わるやクリックして指定の色に変えるなどは実現いたしましたが、クリックするごとに色が変わる(赤→青→赤→青・・・など)ものができません。 現在下記のように作っていますがエラーが起きてしまいます。 どのように直せばよいかご教授願います。 <script type="text/javascript"> <!-- var color1 = "#ff0000"; var color2 = "#0000ff"; function onC(obj){ if (obj.style.backgroundColor = color1){ obj.style.backgroundColor = color2; } else if (obj.style.backgroundColor = color2){ obj.style.backgroundColor = color1; } } //--> </script> <body> <table border="1" cellpadding=20> <tr> <td onClick = "onC(this)"><br> </td> </tr> </table> </body>

  • JavaScriptエラーが出ます…

    2つのJavaScriptエラーが出て大変困っております。 どなたか分かる方いらっしゃいませんでしょうか? ※当方はJavaScriptは分かりません。 検索にて調査いたしましたが、情けないですがもうお手上げ状態です。 ▼1つめ----------------------------------------------▼ メッセージ: 'null' は Null またはオブジェクトではありません。 ライン: 8 文字: 3 コード: 0 コード内容 以下 var accordion=function(){ var tm=10; var sp=10; function slider(n){ this.nm=n; this.arr=[]; this.sel='' } slider.prototype.init=function(t,c,k){ var a,h,s,l,i; a=document.getElementById(t); h=a.getElementsByTagName('dt'); s=a.getElementsByTagName('dd'); l=h.length; for(i=0;i<l;i++){ var d=h[i]; this.arr[i]=d; d.onclick=new Function(this.nm+".process(this)"); if(k!=null&&c==i){this.sel=d.className=k} } l=s.length; for(i=0;i<l;i++){ var d=s[i]; d.maxh=d.offsetHeight; if(c!=i){d.style.height='0'; d.style.display='none'} } } slider.prototype.process=function(d){ var i,l; l=this.arr.length; for(i=0;i<l;i++){ var h=this.arr[i]; var s=h.nextSibling; if(s.nodeType!=1){s=s.nextSibling} clearInterval(s.timer); if(h==d&&s.style.display=='none'){ s.style.display=''; setup(s,1); h.className=this.sel} else if(s.style.display==''){setup(s,-1); h.className=''} } } function setup(c,f){c.timer=setInterval(function(){slide(c,f)},tm)} function slide(c,f){ var h,m,d; h=c.offsetHeight; m=c.maxh; d=(f==1)?Math.ceil((m-h)/sp):Math.ceil(h/sp); c.style.height=h+(d*f)+'px'; c.style.opacity=h/m; c.style.filter='alpha(opacity='+h*100/m+')'; if(f==1&&h>=m){clearInterval(c.timer)} else if(f!=1&&h==1){c.style.display='none'; clearInterval(c.timer)} } return{slider:slider} }(); ▲1つめここまで----------------------------------------------▲ ▼2つめ----------------------------------------------▼ メッセージ: 'obj.length' は Null またはオブジェクトではありません。 ライン: 238 文字: 10 コード: 0 コード内容 以下 http://www.myulond.com/js.txt ▲1つめここまで----------------------------------------------▲ どうぞ、ご教授よろしくお願いいたします。

  • JavaScriptのgetElementById以降の記述?

    ボタンをクリックすると表示内容とボタン色を変える、というJavaScriptを書き換えているところなのですが、 わからないことがあるので宜しくお願いします。 ※ボタンにはid名(id="tab0"、id="tab1"、id="tab2"、…といったふうに)が付けてあります。 ------------------------------------------------------------ 参考にしている書き換え前のJavaScriptの一部 ------------------------------------------------------------ function changeTab(n) { if ( n != tabNum && document.getElementById("tab"+n+"_content") ) { document.getElementById("tab"+tabNum).style.backgroundColor="#666"; document.getElementById("tab"+tabNum+"_content").style.display = "none"; document.getElementById("tab"+n).style.backgroundColor="#fff"; document.getElementById("tab"+n+"_content").style.display = "block"; tabNum = n; }} ------------------------------------------------------------ ボタン(<button type="button" id="tab0">)の代わりに 画像(<input type="image" id="tab0" src="xxx.gif">)にしたので、 クリックしたときに画像を別の画像に入れ替えるようにしたいのです。 「style.backgroundColor="#fff";」の部分を書き換えれば良いと思うのですが…。 説明不足の点などありましたら補足しますので宜しくお願いします。

  • Greasemonkeyで背景色を全て指定色に変更

    FirefoxのGreasemonkeyで全てのページの背景色を指定色にしたいのですがどうしたら良いのでしょうか? 白色を指定色に変えるコードは以下の通りなのですが、 全ての色を指定色に変えるようにするにはどうしたら良いでしょうか? ------------------------------------------------------------- var everything = document.getElementsByTagName("*"); var bgcolor = []; for(var i=0; i<everything.length; i++) { bgcolor[i] = document.defaultView.getComputedStyle(everything[i], "").getPropertyValue("background-color"); if( bgcolor[i] == "rgb(255, 255, 255)" || bgcolor[i] == "rgb(250, 250, 250)" ) { everything[i].style.backgroundColor = "#C2C7CF"; } } ------------------------------------------------------------- 以上です。 よろしくお願い致します。

  • HTML内への2つのJavaScriptの書き込みについて

    お世話になります。 この1週間皆様のお力をお貸しいただいて ようやくほぼ完成というところまでこぎつけました!! 本当に皆様のご協力に感謝です!ありがとうございます。 HTML内に、JavaScriptファイルへのリンクが2点 そのほかにJ Queryのギャラリーを利用しているため、 HTMLに直接書いてある 下記Javascriptがあります。 $('#thumbs-adv ul.thumbs li').css('opacity', onMouseOutOpacity) .hover( function () { $(this).not('.selected').fadeTo('fast', 1.0); }, function () { $(this).not('.selected').fadeTo('fast', onMouseOutOpacity); } ); $(document).ready(function() { var galleryAdv = $('#gallery-adv').galleriffic('#thumbs-adv', { delay:2000, numThumbs:16, <省略. . . . . . > onTransitionOut:function(callback) { $('#slideshow-adv, #caption-adv').fadeOut('fast', callback); }, onTransitionIn:function() { $('#slideshow-adv, #caption-adv').fadeIn('fast'); }, onPageTransitionOut:function(callback) { $('#thumbs-adv ul.thumbs').fadeOut('fast', callback); }, onPageTransitionIn:function() { $('#thumbs-adv ul.thumbs').fadeIn('fast'); } }); var galleryMin = $('#gallery-min').galleriffic('#thumbs-min', { imageContainerSel:'#slideshow-min', controlsContainerSel:'#controls-min' }); }); ここに、まだ他のJavaScriptをHTMLページ内に 追加したいのですが、追加すると、 J queryのギャラリーの表示がなくなってしまいます。 追加したいJavaScriptは以下です。 <script type="text/javascript" charset="UTF-8"> var M0, M1; /*@if(1)attachEvent('on'+ @else@*/addEventListener(/*@end@*/  'load', function () {   var cnt = 0, I, o;   var UL = document.getElementById('gazou');   var LI = UL.getElementsByTagName('LI');   var MI = document.getElementById('menu-index');   document.getElementById('num1').firstChild.nodeValue = I = LI.length;   for (var i = 0; i<I; i++) {    o = document.createElement('LI');    o.appendChild(document.createTextNode('○'));    o.id = 'idx-' + i;    MI.appendChild(o);   }   (M1 = LI[0]).style.zIndex = 2;  }, false); document./*@if(1)attachEvent('on'+ @else@*/addEventListener(/*@end@*/  'mouseover', function (evt) {  var e = evt./*@if(1) srcElement @else@*/ target /*@end@*/;  var p = getParent(e, 'id', 'menu-index');  var n;    if (M0) { M0.firstChild.nodeValue = '●'; M0.style.color = ''; M0 = null; }  if (p && e.nodeName == 'LI') {   e.firstChild.nodeValue = '●';   e.style.color = 'red';   M0 = e;   n = e.id.match(/-(\d+$)/)[1];   document.getElementById('num0').firstChild.nodeValue = n - 0 + 1;   Image('gazou', n);  } }, false); function getParent(node, type, val) {  return node ? (val == node[type]) ? node: arguments.callee(node.parentNode, type, val): null; } function Image (id, vno) {  var a = 100, LI = document.getElementById(id).getElementsByTagName('LI')[vno];if (LI == M1) return;  var P = (function L () {   M1.style./*@if(1) filter = 'Alpha(opacity=' + a +')' @else@*/ opacity = a/100 +'' /*@end@*/;   if ((a-=20)<0) M1.style.zIndex = 0 +'', LI.style.zIndex = 2 +'', M1 = LI; else setTimeout(L, 30);  });  LI.style.zIndex = 1;  LI.style./*@if(1) filter = 'Alpha(opacity=100)' @else@*/ opacity = '1' /*@end@*/;  P(); } // --> </script> HTML内に書き込むJavaScriptは1つでないといけないのでしょうか? また、この問題を解決するには、どうすればよいでしょうか? よろしくご教授お願いいたします!!!

  • JavaScript テキストボックスの入力チェックについて

    JavaScript テキストボックスの入力チェックについて こんにちは、趣味でJavaScriptをしている者です。 テキストボックスに入力した文字列のチェックについて 質問させていただきます。 まず、よろしければ、以下のコードを見ていただきたいのですが・・・ <html> <head> <script type="text/javascript"> var N=5; var str = ""; var moji = new Array("a","b","c","d","e"); var Ary = new Array(); function init(){ for(i=0;i<N;i++) { for(j=0;j<N;j++) { if(j != i){ for(k=0;k<N;k++) { if(k!=i && k!=j){ for(m=0;m<N;m++) { if(m!=i && m!=j && m!=k){ for(n=0;n<N;n++) { if(n!=i && n!=j && n!=k && n!=m){ str = str + moji[i] + moji[j] + moji[k] + moji[m] + moji[n]; Ary.push(str); str =""; } } } } } } } } } alert("並べました"); } function check() { var obj = document.getElementById("txtA"); var key = obj.value; for(i=0;i<Ary.length;i++) { if(key == Ary[i]) { document.getElementById("result").value = key+"は"+(i+1)+"ばんめです"; } } } </script> </head> <body bgColor="rgb(240,220,250)" onLoad="init()"> <form name="Form1"> a,b,c,d,eを辞書式に<br> abcdeからedcbaまで並べるとき<br> テキストボックスに入力した文字列が<br> 何番めになるか表示します <br><br> 文字列を入力: <input type="text" id="txtA" size="10">  <input type="button" value="チェック" onClick="check()"> <br><br>  結果表示 : <input type="text" id="result" size="30"> </form> </body> </html> このコードにおいて、テキストボックスの文字列のチェックが できるようにしたいのです。 *半角英字のa-eであること。 *五文字であること。 *a-eが一度ずつ使われていること。 以上の条件をチェックするには「正規表現」を使えばよいのでしょうか? 「正規表現」についてよくわかりませんので、質問させていただきました。 もしよろしければ、解説していただけないでしょうか。 よろしくお願いします。

  • JavaScriptについて

    JavaScriptでボタンゲームを作っているのですが、ボタンを押して正解だった場合、色が変わり押せなくなるようにしたいのですが、うまくいきません。どうしたら良いか困っています。 原因として「順番が正しいかどうか判定する」ところじゃないかと思います。 <script type="text/javascript"> //初期処理 var suji = "(1)(2)(3)(4)(5)(6)(7)(8)(9)(10)(11)(12)(13)(14)(15)"; var pushed = ""; // 押されたボタン管理 var startTime; // ゲーム開始時間を管理 var labelArray = suji.split(""); // 数字を一文字ずつ分割 $("startButton").onclick = start; nextGame(); // スタートボタンを表示する // 開始準備 function nextGame() { $("buttons").innerHTML = ""; $("startButton").style.visibility = "visible"; } // ゲーム開始 function start() { $("startButton").style.visibility = "hidden"; // 配列に数字を代入して順番をシャッフル arrayShuffle(labelArray); // ボタンを作る for (var i = 0; i < labelArray.length; i++) { var b = document.createElement("button"); b.innerHTML = labelArray[i]; b.onclick = button_clickHandler; $("buttons").appendChild(b); } pushed = 0; startTime = (new Date()).getTime(); } // ボタンが押された時の処理 function button_clickHandler(e) { var ch = e.target.innerHTML; // 押されたボタンの文字 // 順番が正しいかどうか判定する if (suji.substr(pushed, 1) != ch) { alert("違います。次は、" + suji.substr(pushed,1)); } else { $("buttons").innerHTML=""; arrayShuffle(labelArray) for(var i = 0; i < labelArray.length; i++) { var b = document.createElement("button"); b.innerHTML = labelArray[i]; b.onclick = button_clickHandler; $("buttons").appendChild(b); } e.target.disabled = true; e.target.style.backgroundColor = "#909090"; pushed++; } if (pushed == labelArray.length) { var now = new Date().getTime(); var tm = Math.floor((now - startTime) / 1000); var min = Math.floor(tm % 3600 / 60); var sec = tm % 60; alert("おめでとうございます。\n"+ min + "分" + sec +"秒でクリアです!"); nextGame(); } } // 配列をシャッフルする function arrayShuffle(bs) { for (var i = 0; i < bs.length; i++) { var r = Math.floor(Math.random()*bs.length); var tmp = bs[i]; bs[i] = bs[r]; bs[r] = tmp; } } function $(id) { return document.getElementById(id); } </script>

  • Javascriptで複数のjsonを読み込みたい

    Javascriptについてご教授頂きたい点があり、質問しました。 私事で、現在とあるサイトの修正を行なっています。そのサイト内の更新情報の部分がJavascriptで制作されており、具体的にはjson形式のファイルをJavascriptで読み込み、HTMLとして出力する形になっています。 質問下部が、そのJavascriptです。 現在はjsonファイルをひとつだけの読み込んで表示しているのですが、 今後コンテンツの拡充するため、2種類のjsonを読み込む必要がでてきました。 jsonファイルの中身や項目ついては2種類ともほぼ同じような内容です。 考えられる様々な方法を試してみたのですが、うまくいかず、質問させていただきました。 どなたかお力添えを頂けないでしょうか。 var result2 = ''; var rec2 = 5; var jsonHostname = "元々のJSONのディレクトリURL"; var jsonUrl = ''; jsondata2 = ""; function callback_whats_new(data2) {callbackCommon2(data2);} function callbackCommon2(data2) { jsondata2 = data2; if(typeof jsondata2 == 'object'){ draw2(); } else { indexDiv2.innerHTML = '<br><div class="t_m" style="text-align:left; margin-left:8px;">当サイトをご覧いただくには、<br>JavaScriptとFlashの再生環境が必要となります。<br><br>' + '詳しくは「<a href="">ご利用に際して</a>」をご覧ください。<br><br></div>'; } } function getIndex2(n2) { var list = n2; var type = list; indexDiv2 = document.getElementById(type); filename = type; var url = jsonHostname + filename + '.json?' + (new Date().getTime()); 元々入っていたjsonファイルののURL var idval = 'jsonp_' + type; var charset = 'utf-8'; charset = charset ? charset : 'utf-8'; var headObj = document.getElementsByTagName('head')[0]; var scriptTag = document.getElementById(idval); if (scriptTag) { headObj.removeChild(scriptTag); } scriptTag = document.createElement('script'); scriptTag.type = 'text/javascript'; scriptTag.id = idval; scriptTag.charset = charset; scriptTag.src = url; headObj.appendChild(scriptTag); } function draw2(e,n1, n2, n3, n4) { result2=""; if (typeof n1 != 'undefined') turn = n1; if (typeof n2 != 'undefined') cat_2 = n2; if (typeof n3 != 'undefined') category = n3; hl = jsondata2.headline; if(typeof rec2!='number'){ hlLength = hl.length; }else if(rec2 > hl.length){ hlLength = hl.length; }else{ hlLength = rec2; } tMon = 0; for (var i = 0; i < hlLength; i++) { wrHTML2(i); } if (result2) { indexDiv2.innerHTML = result2; } else { indexDiv2.innerHTML = '<span class="t_m">該当する情報はありません。</span>\n'; } if (typeof list == 'object' && listNum < list.length) getIndex2(list); } function wrHTML2(n) { var f = 0; var f2 = 0; var icon=""; var date = (jsondata2.headline[n].date) ? jsondata2.headline[n].date : ""; if (cat_2 && cat_2 != Number(date.substr(4,2))) return; var uri = (jsondata2.headline[n].uri.uri) ? jsondata2.headline[n].uri.uri : ""; var tar = jsondata2.headline[n].uri.target; var no = jsondata2.headline[n].txt.no; var txt = (jsondata2.headline[n].txt.txt) ? jsondata2.headline[n].txt.txt : ""; var jsOpenWinFlg; if (-1!= uri.indexOf("/html/")){ if (-1!= (jsOpenWinFlg = uri.indexOf("/report/"))){ var aElementAttr = 'href="JavaScript:popupWin(\''+uri+'\',\'subwin\',\'900\',\'700\');"'; }else if (-1!= (jsOpenWinFlg = uri.indexOf("/news/other/"))){ var aElementAttr = 'href="JavaScript:popupWin(\''+uri+'\',\'subwin\',\'900\',\'700\');"'; }else{ var aElementAttr = 'href="'+uri+'" target="'+tar+'"'; } }else{ var aElementAttr = 'href="'+uri+'" target="'+tar+'"'; } if (date) date = date.substr(2,2) + '/' + date.substr(4,2) + '/' + date.substr(6); result2 += '<table width="100%"><tr>'; result2 += '<td width="17%" valign="top">' + date + '</td>'; result2 += '<td width="83%" valign="top">'; result2 += '<a ' + aElementAttr + '>' + txt + '</a>'; result2 += '</td>'; result2 += '</tr></table>'; } ​

  • PHP内にJavaScript

    下記のようなはじめての訪問者に対してようこそ!と表示するJavaScriptをPHP内で動かすにはどのように記入すればよいのでしょうか? ==================================================== <script language="JavaScript"> var key = "freekeyword"; var n = 0; var cookies = document.cookie.split("; "); for(var i=0;i<cookies.length;i++){ var str = cookies[i].split("="); if(str[0] == key){ // n = str[1]; } } window.onload = function() { if(n == 0){ document.getElementById('welcome').innerHTML = 'ようこそ!'; } n++; setCookie(key,n); } function setCookie(key,val){ document.cookie = key + "=" + escape(val) + "; "; } </script> ==================================================== このスクプリトを下記<head>内にどのように記入すればよいので しょうか? PHPの文法などほとんど分からないレベルなのでそもそも質問 自体間違ってるかもしれませんがPHP内で同様の動作をさせたい のです。よろしくお願いします ==================================================== <?php echo ' <html> <head> </head>'; echo ' <body> <div id="welcome"></div> </body></html>'; ?> ====================================================

    • ベストアンサー
    • PHP

専門家に質問してみよう