このページの2つのバージョン間の差分を表示します。
両方とも前のリビジョン 前のリビジョン 次のリビジョン | 前のリビジョン | ||
05.javascriptでtodoアプリ:index.html [2018/12/08] adash333 [3. todo.htmlファイル(HTMLファイル、ホームページのファイル)を作成] |
05.javascriptでtodoアプリ:index.html [2018/12/10] (現在) adash333 [方針をたてる] |
||
---|---|---|---|
行 16: | 行 16: | ||
-データはブラウザ上の『localStorage』という場所に保存(異なるスマホ・パソコン間では共有しない) | -データはブラウザ上の『localStorage』という場所に保存(異なるスマホ・パソコン間では共有しない) | ||
- | ものとします。なお、異なるパソコン間でデータを共有するためには、サーバー関連の知識が必要になります。当サイトでもこの次の回で、Firebase(一部無料のサーバーサービス)を用いたToDoアプリの解説を行いたいと思います。 | + | ものとします。なお、異なるパソコン間でデータを共有するためには、サーバー関連の知識が必要になります。当サイトでも、別の機会にFirebase(一部無料のサーバーサービス)を用いたToDoアプリの解説を行いたいと思います。 |
今回は、[[https:// | 今回は、[[https:// | ||
行 22: | 行 22: | ||
ソースコード | ソースコード | ||
+ | https:// | ||
これから作るもの | これから作るもの | ||
+ | https:// | ||
==== 0.用意するもの(開発環境) ==== | ==== 0.用意するもの(開発環境) ==== | ||
パソコン\\ | パソコン\\ | ||
行 67: | 行 67: | ||
- | ==== 4.Bulmaのcolumn(カラム)システムを用いて計算結果とボタンをデザイン ==== | + | ==== 4.ToDoアイテム追加欄と、ToDoリストをデザイン ==== |
+ | -javacript-test/ | ||
+ | -画面右上の『鉛筆ボタン』をクリックして、todo.htmlを編集します。 | ||
+ | {{: | ||
+ | {{: | ||
- | ===== 参考サイト ===== | + | -コードが編集できるようになるので、『Bulmaテンプレート』を『ToDoアプリ』に変更 |
+ | {{: | ||
+ | |||
+ | -さらに、『< | ||
+ | |||
+ | < | ||
+ | <div class=" | ||
+ | <p class=" | ||
+ | <input id=" | ||
+ | </p> | ||
+ | <p class=" | ||
+ | <a id=" | ||
+ | </p> | ||
+ | </ | ||
+ | <nav class=" | ||
+ | <div id=" | ||
+ | </ | ||
+ | </ | ||
+ | |||
+ | {{: | ||
+ | |||
+ | -下の方へ行き、『Commit changes』をクリックすると、変更した内容が保存されます。 | ||
+ | |||
+ | {{: | ||
+ | |||
+ | この時点で、以下のようになっています。 | ||
+ | |||
+ | {{: | ||
+ | |||
+ | Bulmaのフォームについて:https:// | ||
+ | |||
+ | ==== 5.ToDoアイテムの追加と、ToDoリスト表示の関数をJavascriptで記載 ==== | ||
+ | |||
+ | |||
+ | ===== 参考サイト ===== | ||
+ | こちらのサイトのコードを利用させていただきました。 | ||
https:// | https:// | ||
+ | |||
+ | |||
+ | |||
+ | |||
+ | https:// | ||
+ | 【JavaScript入門】addEventListener()によるイベント処理の使い方! | ||
+ | 20181205 by マサト | ||
+ | |||
+ | |||