Javascript (カレンダー002_サンプル確認)

2020-07-09 最終更新日時 : 2020-09-27 User01

■サンプルのコードを確認していく。
前回で、だいたいの作成イメージをつくったので、本に書いてあったカレンダーのサンプルのコードを確認していく。
書き写したコードをブラウザで動かしてみると、下のような表示となり、「Uncaught ReferenceError: docucment is not defined」といったエラーが出ている。

エラーが出ている行をよくよく確認してみると、documentがdocucmentとなっていたよう。documentに直して再度動かすと、下のようにカレンダーが表示され、エラーも出ていなかった。これでサンプルとしては正しく動作しているよう。

このサンプルのbody部分は下の通り。テキスト(text)、テキストエリア(textarea)、ボタン(button)の部分は、見てわかる通りだけど、カレンダー部分はクラス扱いとして<script>の中でつくる形にしているみたい。
divのタグを見ていくと、大きくcalendar-boxとdiary-boxの2つに分けられ、その上をframe-boxで囲うような構成になっている。前回考えた形にするには、diary-box以下の部分をcalendar-boxの中に実装する必要があるし、カレンダー部分の<script>の中も修正する必要がある。どこから手をつけようか。

<body>
       <div class="frame-box">
       <div class="calendar-box">
       <div id="calendar" class="calendar"></div>
       </div>
       <div class="diary-box">
       <div id="diary_date" class="diary_date"></div>
       <input type="text" id="diary_title"><br><br>
       <textarea id="diary_body" rows="10" cols="18"></textarea><br><br>
       <input type="button" id="button" onclick="onSave(this)" value="保存">
       </div>
       </div>
</body>
カテゴリー
Javascript
前の記事
Javascript (カレンダー001_作成イメージ)
2020-07-07
次の記事
Javascript (カレンダー003_デザイン検討)
2020-07-12