html
|
1 2 3 4 5 6 7 8 9 10 11 12 |
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Document</title> <link rel="stylesheet" href="css/style.css"> </head> <body> <div id="calendar"></div> </body> <script src="app.js"></script> </html> |
js
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 |
const weeks = ['日','月','火','水','木','金','土']; const date = new Date(); const year = date.getFullYear(); const month = date.getMonth() + 1; const startDate = new Date(year, month -1, 1); //月の最初の日 const endDate = new Date(year, month, 0); //月の最後の日 const endDayCount = endDate.getDate(); //月の末日 const startDay = startDate.getDay(); //月の最初の日の曜日 let dayCount = 1; //日にちのカウント let calenderHtml = ''; // HTMLを組み立てる変数 //冒頭の年月を表示 calenderHtml += '<h1>' + year + '/' + month + '</h1>'; // tableタグ開始 calenderHtml += '<table>'; //曜日の行を作成 for (let i =0; i < weeks.length; i++){ calenderHtml += '<td>' + weeks[i] + '</td>'; } // for (let w = 0; w < 6; w++) { calenderHtml += '<tr>'; for (let d = 0; d < 7; d++) { if(w == 0 && d < startDay) { calenderHtml += '<td></td>'; }else if (dayCount > endDayCount) { calenderHtml += '<td></td>'; }else{ calenderHtml += '<td>' + dayCount + '</td>'; dayCount++; } } calenderHtml += '</tr>'; } calenderHtml += '</table>'; // HTMLに上記のコードを挿入 document.querySelector('#calendar').innerHTML = calenderHtml; |
css
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 |
h1{ font-size: 18px; } table{ border-spacing: 0; border-collapse: collapse; } td{ border: 1px solid #ddd; padding: 5px; text-align: center; } td:first-child{ color: red; } td:last-child{ color: royalblue; } td.is-disabled{ color: #ccc; } |
メモ
①varとletの違い
Qiita一言で言うと、変数のスコープがブロックスコープか関数スコープかの違いです。
letを使った場合、ブロックレベルで変数のスコープが定義されるため、以下の例のように1,2,1と表示されます。
●「変数を宣言する：とは
・ざっくりですが値を格納するための領域を確保する
・変数を利用するための宣言
●varとletの違い
letの方がES2015という最近追加された機能で、letの方がコードの保守性が良いように思います。
①変数の重複許容について
varは変数の重複を許容しますが、letは許容しません。
var hensuu = “変数1”;
var hensuu = “変数2”;
console.log(hensuu); //変数2と表示。最初の宣言は上書きされる。
let hen = “へんすう１”;
let hen = “へんすう2”;
console.log(hen); //エラーになる（Idemtifer ‘hennsuu’ has already been declard）
letを使った方が同じ名前の変数をうっかり使ってしまい、変数が予想外のものになったり、バグが発生しにくいと言えます。
②変数の有効範囲（ブロックスコープの認識）について
letの方がより細かく変数の有効範囲を管理できます。
varだと、if文でブロックを抜けた後でも、変数が有効になる
if (true) {
var i = 1;
}
console.log(i); //1と出力
letだと、ちゃんとスコープを認識する。
if (true) {
let i = 2;
}
console.log(i); //変数iはスコープ外なのでエラーになる。
jsには、ブロックレベルのスコープが存在しない。（javaやphpにはある）
varだとブロックスコープを認識しない。ブロックを抜けても変数が有効になうｒ．
一方、letはより細かく変数の有効範囲を管理できる。（letはブロックスコープを認識する）
●まとめ
varとletならletを使った方が安心だが、
letはES2015から利用できるので、環境を確かめてから使うべき。
②jsの演算子
この章では、JavaScript 言語のすべての演算子、式、キーワードについて文書化しています。
1. 基本式
this 関数の実行コンテキストを参照する
class クラス式も定義する
2. 左辺式
new new演算子は、コンストラクタのインスタンスを作成する。
new.target コンストラクタ内でnew.targetを使うことで、newによって呼び出されるコンストラクタを参照できる。
3. インクリメントとデクリメント
4. 単項演算子
void 式の戻り値を破棄する
typeof 与えられたオブジェクトの型を判別する
5. 算術演算子
6. 関係演算子
instanceof オブジェクトが別のオブジェクトのインスタンスかどうかを判別する
7. 等価演算子
8. ビットシフト演算子
9. バイナリビット演算子
10. バイナリ論理演算子
11. 条件（三項）演算子
12. 代入演算子
+= 加算値を代入する
-= 減算値を代入する
13. カンマ演算子
14. 非標準の機能
この記事へのコメントはありません。