#author("2026-01-06T10:15:22+09:00;2025-10-14T10:59:30+09:00","default:member","member") #author("2026-01-06T10:20:22+09:00;2025-10-14T10:59:30+09:00","default:member","member") *いわもと あゆ [[通信ネットワーク演習]] ~ ~ **演習 //&color(red){演習の制作物をリンク}; -Blank File : [[javascript_blank>https://515o0.github.io/Javascript_blank/]] -Color Change A：[[javascript_change_a>https://515o0.github.io/javascript_change_a/]] -Color Change B : [[javascript_change_b>https://515o0.github.io/javascript_change_b/]] -Fortune Slip : [[javascript_fortune>https://515o0.github.io/Javascript_fortune/]] -Gallery : [[javascript_gallery>https://515o0.github.io/Javascript_gallery/]] -TabUI : [[javascript_tab>https://515o0.github.io/Javascript_tub/]] -Object : [[javascript_object>https://515o0.github.io/Javascript_object/]] -TextAnimation：[[javascript_textanimation>https://515o0.github.io/Javascript_text_anemation/]] -Scroll : [[javascript_scroll>https://515o0.github.io/Javascript_scroll/]] -Map：[[javascript_map>https://515o0.github.io/Javascript_map/]] -Weather：[[javascript_weather>https://515o0.github.io/Javascript_weather/]] ~ ~ **最終成果物 //&color(red){タイトル・公開URLの記入}; //***&color(red){タイトル}; //&color(red){https://www.example.com/}; [[Mini Budget Note>https://515o0.github.io/Javascript_saves/]] ~ ***サイトの趣旨 //&color(red){これはどんなサイトか・・を簡潔に}; かんたんな家計簿サイト ~ ***技法・技術情報 //&color(red){サイトで用いている技術や文法事項について記入}; [条件分岐 if/else] 支出リストが空かどうかチェックして表示/非表示を切り替える [入力・送信 form/submit] -[条件分岐 if/else] 支出リストが空かどうかをチェックして、空なら「まだ記録がないよ」と表示 if (filtered.length === 0) { emptyMessage.style.display = "block"; } else { emptyMessage.style.display = "none"; } -[入力・送信 form/submit] フォーム送信時に支出を追加する処理を実行 [DOM操作 getElementById, querySelector] -[DOM操作 getElementById, querySelector] IDで特定の要素を取得 const listEl = document.getElementById("expense-list"); const emptyMessage = document.getElementById("empty-message"); const template = document.getElementById("expense-item-template"); 支出入力 日付入力 カテゴリ編集パネル（追加・削除） カテゴリフィルター きろく一覧 -[ローカルストレージ localStorage] ページ読み込み時にデータを復元して、閉じても入力データが保持される。 ~ ***先行事例・参考情報 //&color(red){先行事例の紹介、参考サイトなど}; [[タメルメ>https://tameru.me/account]] ~ ~ **リンク ***公開リポジトリ -GitHub：https://github.com/515o0 //&small(※リンクを無効にするため半角スペースを挿入しています。自分のページに掲載の際は、スペースを詰めてください。);