質問をすることでしか得られない、回答やアドバイスがある。

15分調べてもわからないことは、質問しよう!

新規登録して質問してみよう
ただいま回答率
85.48%
JSON

JSON(JavaScript Object Notation)は軽量なデータ記述言語の1つである。構文はJavaScriptをベースとしていますが、JavaScriptに限定されたものではなく、様々なソフトウェアやプログラミング言語間におけるデータの受け渡しが行えるように設計されています。

JavaScript

JavaScriptは、プログラミング言語のひとつです。ネットスケープコミュニケーションズで開発されました。 開発当初はLiveScriptと呼ばれていましたが、業務提携していたサン・マイクロシステムズが開発したJavaが脚光を浴びていたことから、JavaScriptと改名されました。 動きのあるWebページを作ることを目的に開発されたもので、主要なWebブラウザのほとんどに搭載されています。

Q&A

解決済

2回答

1455閲覧

Javascriptにおいて、関数内での関数を実行させるには。

Shinog

総合スコア99

JSON

JSON(JavaScript Object Notation)は軽量なデータ記述言語の1つである。構文はJavaScriptをベースとしていますが、JavaScriptに限定されたものではなく、様々なソフトウェアやプログラミング言語間におけるデータの受け渡しが行えるように設計されています。

JavaScript

JavaScriptは、プログラミング言語のひとつです。ネットスケープコミュニケーションズで開発されました。 開発当初はLiveScriptと呼ばれていましたが、業務提携していたサン・マイクロシステムズが開発したJavaが脚光を浴びていたことから、JavaScriptと改名されました。 動きのあるWebページを作ることを目的に開発されたもので、主要なWebブラウザのほとんどに搭載されています。

0グッド

0クリップ

投稿2015/10/08 13:16

編集2015/10/08 13:19

はじめまして。

現在、以下の記事を参考にしてカレンダーを作っているのですが、
JSONから取り出した情報(日付)の日のみ色を変える機能を実装しようと考えており、コードを変更したものの色が全く変わりません。

自分なりに考えてみたところ、関数内で関数を実行することが原因だと考えているのですが、具体的にどう対処すればいのかわかりません。

何かお分かりの方は是非ともご教授のほどよろしくお願いします。

http://www.allinthemind.biz/markup/javascript/calendar.html

html

1<div id="calendar"></div> //カレンダーの表示部分 2<p><a href="#" id="month_prev_ajax">前月へ</a>/ <a href="#" id="month_next_ajax">次月へ</a></p> //月の移動ボタン

javascript

1<script type="text/javascript"> 2// 取得したい年・月設定 3var y,m; 4var p = location.search; 5 6 y = new Date().getFullYear(); 7 m = new Date().getMonth()+1; 8 9function calendar(y,m){ 10 11 // 初期設定 12 var feb_date = (y%4 == 0 && y%100 != 0)?29:28; 13 if(y%400 == 0){feb_date = 29}; 14 var month_count = {1:31,2:feb_date,3:31,4:30,5:31,6:30,7:31,8:31,9:30,10:31,11:30,12:31} 15 var day_en = {d0:"sun",d1:"mon",d2:"the",d3:"wed",d4:"thu",d5:"fri",d6:"sat"}; 16 var m_display = (m<10)?"0"+String(m):m; 17 var last_day = new Date(y,m-1,month_count[m]).getDay(); 18 var first_day = new Date(y,m-1,1).getDay(); 19 var w = 1; 20 var d = first_day; 21 22 // マークアップ生成 23 var txt = ""; 24 txt += '<h1>' + y + '年' + m + '月のカレンダー</h1>\n'; 25 txt += '<table summary="' + y + '年' + m_display + '月のカレンダー" class="calendar month' + m + '">\n'; 26 txt += '<tr>\n'; 27 txt += '<th>SUN</th>\n'; 28 txt += '<th>MON</th>\n'; 29 txt += '<th>TUE</th>\n'; 30 txt += '<th>WED</th>\n'; 31 txt += '<th>THU</th>\n'; 32 txt += '<th>FRI</th>\n'; 33 txt += '<th>SAT</th>\n'; 34 txt += '</tr>\n'; 35 txt += '<tr class="week1">\n'; 36 for(var j=0;j<first_day;j++){ 37 txt += '<td>&nbsp;</td>\n'; 38 } 39 for(var i=1;i<=month_count[m];i++){ 40 if(d != 0 && (first_day + i)%7 == 1){ 41 w++; 42 d = 0; 43 txt += '</tr>\n'; 44 txt += '<tr class="week' + w + '">\n'; 45 } 46 var i_display = (i<10)?"0"+String(i):i; 47 48 day_count = (i%7 == 0)? Math.floor(i/7) : Math.floor(i/7) + 1 ; 49 50 //ここから記事の中身を変更します 51 var cleared = false; //日付がJSONに格納されているか把握するためにフラグを立てます 52 53 $.getJSON("data2.json", function(data){ 54 $(data).each(function(){ 55 var date = this.Date.date; 56 var limit = this.Date.limitt; 57 58 var ydate = date.slice(0, 4); //日付から年のみ抽出 59 var mdate = date.slice(5, 7); //日付から月のみ抽出 60 var ddate = date.slice(8, 10); //日付から日のみ抽出 61 62 63 if(y == ydate && m == mdate && i_display == ddate){ 64 txt += '<td id="d' + y + m_display + i_display + '" class="' + 'check' + '">' + i + '</td>\n'; 65 cleared = true; //もし日付が一致すればtdのクラスをcheckに変更し、フラグをtrueにする(checkクラスにcssで色を付けています) 66 } 67 68 }) 69 }) 70 71 if (!cleared) { //もしフラグがtrueでなければ色付けされていないtdへ 72 txt += '<td id="d' + y + m_display + i_display + '" class="' + day_en['d'+d] + day_count + ' date' + i + '">' + i + '</td>\n'; 73 } 74 //ここまで 75 76 d++; 77 } 78 for(var j=0;j<(6-last_day);j++){ 79 txt += '<td>&nbsp;</td>\n'; 80 } 81 txt += '</tr>\n'; 82 txt += '</table>\n'; 83 84 // 書き出し 85 document.getElementById("calendar").innerHTML = txt; 86} 87 88//以降月を変えるためのコード 89window.onload = function(){ 90 calendar(y,m); 91 92 93 document.getElementById("month_prev_ajax").onclick = function(){ //前月へボタンを押された時 94 m--; 95 if(m==0){y--;m=12;} 96 calendar(y,m); 97 return false; 98 } 99 100 document.getElementById("month_next_ajax").onclick = function(){ //次月へボタンを押された時 101 m++; 102 if(m==13){y++;m=1;} 103 calendar(y,m); 104 return false; 105 } 106 107 108} 109 110</script>

気になる質問をクリップする

クリップした質問は、後からいつでもMYページで確認できます。

またクリップした質問に回答があった際、通知やメールを受け取ることができます。

バッドをするには、ログインかつ

こちらの条件を満たす必要があります。

guest

回答2

0

1. 
$.getJSON()はjQueryのメソッドかと思います。他の部分ではjQuery使ってないようですが、読み込んでいますでしょうか?(読み込んで無ければエラーになってカレンダー完成しないと思いますが…)

次に、$.getJSON()初期設定では非同期だったかと思います。参考リンク
その場合、画面に表示が終わった後に、中の処理が動いているという可能性もあります。
(というか非同期だとtxtは別スコープの変数になってそうですね。)

既に対策済みかも知れませんが、
ちょっと見た感じで他に動かない原因になりそうなものは気がつきませんでしたので一応

投稿2015/10/08 14:41

編集2015/10/08 14:45
hirohiro

総合スコア2068

バッドをするには、ログインかつ

こちらの条件を満たす必要があります。

0

ベストアンサー

data2.jsonの内容を記載して頂けますか。

あと下の比較ですが、mって最初のm = new Date().getMonth()+1;ですよね。
1~9月の時は1桁で出るのでfalseになると思います。
(これだけが原因ではないと思いますが)

if(y == ydate && m == mdate && i_display == ddate){
}

投稿2015/10/08 13:42

YuyaYasuda

総合スコア88

バッドをするには、ログインかつ

こちらの条件を満たす必要があります。

Shinog

2015/10/08 14:18 編集

ご回答ありがとうございます。 このコードとは別に、JSONではないオブジェクト(ただし日付の形式は同じ)をfor...inでループさせた時は正常に作動(日付に色が付く)したので、桁数の問題ではないかと思っております。
Shinog

2015/10/08 14:17 編集

/
YuyaYasuda

2015/10/08 14:41

$.ajaxSetup({ async: false }); $.getJSON("data2.json", function(data){ としていただけますでしょうか。 こちらではこれで出来ました。Ajaxが非同期で実行されるためi_displayが常に31になっていました
Shinog

2015/10/09 09:00

ありがとうございます! $.ajaxSetup({ async: false }); を追加することで無事解決致しました。
guest

あなたの回答

tips

太字

斜体

打ち消し線

見出し

引用テキストの挿入

コードの挿入

リンクの挿入

リストの挿入

番号リストの挿入

表の挿入

水平線の挿入

プレビュー

15分調べてもわからないことは
teratailで質問しよう!

ただいまの回答率
85.48%

質問をまとめることで
思考を整理して素早く解決

テンプレート機能で
簡単に質問をまとめる

質問する

関連した質問