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

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

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

CSS(Cascading Style Sheet)の第3版です。CSS3と略されることが多いです。色やデザインを柔軟に変更することが可能になります。

Chrome

Google Chromeは携帯、テレビ、デスクトップなどの様々なプラットフォームで利用できるウェブブラウザです。Googleが開発したもので、Blink (レンダリングエンジン) とアプリケーションフレームワークを使用しています。

HTML5

HTML5 (Hyper Text Markup Language、バージョン 5)は、マークアップ言語であるHTMLの第5版です。

JavaScript

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

teratail

teratail(テラテイル)は、プログラミングに特化した日本語Q&Aサイトです。

Q&A

2回答

1338閲覧

プログラムファイルをブラウザで実行させる方法

b1ackc0ffee

総合スコア267

CSS3

CSS(Cascading Style Sheet)の第3版です。CSS3と略されることが多いです。色やデザインを柔軟に変更することが可能になります。

Chrome

Google Chromeは携帯、テレビ、デスクトップなどの様々なプラットフォームで利用できるウェブブラウザです。Googleが開発したもので、Blink (レンダリングエンジン) とアプリケーションフレームワークを使用しています。

HTML5

HTML5 (Hyper Text Markup Language、バージョン 5)は、マークアップ言語であるHTMLの第5版です。

JavaScript

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

teratail

teratail(テラテイル)は、プログラミングに特化した日本語Q&Aサイトです。

0グッド

0クリップ

投稿2015/12/11 02:50

1つのファイルをブラウザのにドラッグ&ドロップし、プログラムが実行されるか確認したいのですが、

それは、HTMLとCSSのみしか反映されないのでしょうか。

下記のコードの書き方はあっていますか?
拡張子は、jsではなくhtmlであっていますか?

下記のファイルを実行させても、
0年00月
としか表示されませんでした。
JSはブラウザで処理してくれないのでしょうか。

html

1<!DOCTYPE html> 2<html lang="ja"> 3<head> 4<meta charset="utf-8"> 5<style type="text/css"> 6 7td { 8background-color: white; 9height: 20px; 10color: black; 11} 12 13td:first-child, 14td:last-child, 15h4{ 16color: red; 17} 18 19</style> 20</head> 21 22 23<body> 24 <h3 id="thismonth">0年00月</h3> 25 <table id="calender"></table> 26 27<script> 28var today = new Date(); 29//4ケタの年を取得する 30var year = String(today.getFullYear()); 31//2桁の月を取得する 32var month = String(100 + today.getMonth() + 1).substr(1, 2); 33//2桁の日を取得する 34var day = String(100 + today.getDate()).substr(1, 2); 35 36var html = ""; 37 38html += year + '年' + month + '月'; 39 40$("#thismonth").html(html); 41 42 43 44//1日の曜日データ取得 newしてからじゃないとダメっぽい。 45var KongetuNoTsuitachi = new Date('2015/12/1'); 46//1日が何曜日か 47var blank = KongetuNoTsuitachi.getDay(); 48console.log(blank); 49 50var html; 51html += '<thead><tr><th class="sun">日</th><th>月</th><th>火</th><th>水</th><th>木</th><th>金</th><th class="sat">土</th></tr></thead>'; 52 53html += '<tbody>' 54 55//1weekのため 56var count = 0; 57 58 59 60//ここから1日の曜日までの空欄 61for (var i = 0; i < blank; i++) { 62 63 //セルの数が7個になったら改行 64 if (count % 7 == 0) { 65 html += '<tr>'; 66 } 67 68 html += '<td></td>'; 69 count++; 70} 71 72 73 74 75// 来月の0日を調べると、今月の末日がわかる 76var yokugetsunozeronichi = new Date(now.getFullYear(), monthOfNext, 0); 77var KongetuNoNissu = yokugetsunozeronichi.getDate(); 78console.log(KongetuNoNissu); 79 80//ここから祝日の対応 81var arrayHoliday = new Array(); 82arrayHoliday = ["20150101","20151223"]; 83console.log(arrayHoliday); 84 85//日数分回す 86for (i = 1; i <= KongetuNoNissu; i++) { 87 if (count % 7 == 0) { 88 html += '</tr></tr>'; 89 } 90 var holiday = year + month + ((100 + i).substr(1, 2)); 91 console.log(holiday); 92 93 if ($.inArray(holiday, arrayHoliday)) { 94 html += "<td><h4>" + i + "</h4></td>" ; 95 count++; 96 } else { 97 html += "<td>" + i + "</td>"; 98 count++; 99 } 100} 101 102 103 104 105 106// 最後の日から土曜までの空欄 107while (count % 7 != 0) { 108 109 html += '<td></td>'; 110 count++; 111 if (count % 7 == 0) { 112 html += '</tr>'; 113 114 } 115 116} 117 118html += '</tbody>' 119 120$("#calender").append(html); 121 122console.log(i); 123 124 125 126//※inArrayが使えそうなので、if/forいらない 127//if(YYYYMMDD == nowyear + nowmonth + i){ 128//html<> 129//} 130 131 132 133</script> 134 135</body> 136</html> 137

宜しくお願いいたします。

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

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

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

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

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

guest

回答2

0

拡張子はHTMLで問題ないです。

下記の行が問題なのだと思います。

JavaScript

1$("#thismonth").html(html);

上記のように$を使用した書き方は、大抵の場合JQueryというJavaScriptのプラグインを使用した書き方ですが、
肝心のJQueryを読み込むコードがありません。
head内に以下を追加してみてください。

HTML

1<script src="http://code.jquery.com/jquery-1.11.3.min.js"></script>

ついでですが、
大抵のブラウザには開発者ツールというものが付いています。
IE、ChromeではF12で呼び出せます。

そこの「コンソール(console)」に、
JavaScriptのエラー等が出力されます。

また、デバッグを行うことも可能です。

JavaScriptで問題が発生した場合は確認してみてください。

投稿2015/12/11 03:10

編集2015/12/11 03:14
moredeep

総合スコア1507

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

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

0

ブラウザがjavascriptをサポートしますが、
上記コードはJqueryを使っているので、

<script type="text/javascript" src="jquery-1.10.2.js"></script>

これを追加して、jquery-1.10.2.jsファイルを配置すれば動くと思います。

投稿2015/12/11 03:13

liguofeng29

総合スコア801

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

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

あなたの回答

tips

太字

斜体

打ち消し線

見出し

引用テキストの挿入

コードの挿入

リンクの挿入

リストの挿入

番号リストの挿入

表の挿入

水平線の挿入

プレビュー

まだベストアンサーが選ばれていません

会員登録して回答してみよう

アカウントをお持ちの方は

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

ただいまの回答率
85.50%

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

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

質問する

関連した質問