JavaScript localStorageを使って登録した情報を保存する JavaScript初学者講座
以前リファクタリングまで行った追加できるリストですが、どこにもデータを保存していなかったため、ブラウザを閉じたりページを読み込み直すと初期状態に戻ってしまいました。
以前の記事
このリストを簡易的なToDoリストとして使えるよ...
JavaScript
JavaScript 
JavaScript クラス構文にリファクタリング、コードの見通しをよくする JavaScript初学者講座
前回記事で作成したプログラムは、関数の定義はあまりせずにハードコーディングしているため、同じようなコードが２回書かれている見通しの悪いプログラムでした。
一度作成して動いているコードでも可視性や保守性を上げるためや、効率の良いプログ...
JavaScript CSSの操作によるstyleの変更、アニメーション JavaScript初学者講座
JavaScriptで操作できるのはHTMLだけでなく、CSSのプロパティや値を操作することも可能です。値を動的に変更することで、アニメーションのような動きのある演出をページに盛り込むことができます。アニメーションはCSSでもできる部分は...
JavaScript テキストを変更できるリストを作る JavaScript初学者講座
前回の記事ではul要素内にli要素を追加・削除できるプログラムを作りました。ただ単にli要素が増えて行っても実用性がないので、li要素のテキストを変更できるようにカスタマイズしていきます。
HTMLは編集と編集完了時の決定ボタンを追...
JavaScript 追加・削除可能なリストを作る JavaScript初学者講座
JavaScriptによるHTMLの操作は追加だけではなく、削除や置き換え、複製など様々な操作が可能です。これまで学んできた追加、イベントを使いながら、新たに削除を勉強していきます。
要素の削除 .remove()
まずは削除...
JavaScript イベントを理解する（クリック）JavaScript 初学者講座
WEBページではユーザーからの入力を受け取り、なんらかの応答を返すという処理が随時行われています。入力の代表的なものをいくつか挙げますと、
ページが読み込まれるマウスオーバークリック、タップ、ドラッグページをスクロールフォームにテキ...
JavaScript HTMLの操作 要素の作成・追加 Javascript初学者講座
前回記事でHTMLの取得方法を勉強したので、今回はその取得したHTMLに対しての操作を勉強していきます。HTML部分は前回使っていたものをそのまま使います。
<header class="globalHeader">...
JavaScript HTMLの操作 要素の取得 Javascript初学者講座
JavaScriptではHTMLの要素を操作して様々な変化を与えることができます。基本的な処理の流れは
要素の情報を取得 ↓取得した要素の情報を操作
の順で処理をしていきます。
まずは要素の取得から勉強していきましょう。...
JavaScript 関数の基本 Javascript初学者講座
プログラムを書いていると、同じ処理を何度も書くことがよくあります。JavaScriptに限らず他の言語でも同じような処理は関数を作って処理をすることで、重複した記述を減らすことができます。
今回は基本的な関数の定義の仕方を勉強してい...
JavaScript ループ処理（for, foreach） Javascript初学者講座
JavaScriptに限らずプログラムしている同じ処理を繰り返し行いたいケースが出てきます。WEBサイトの制作で例を挙げると、下記のようなものはループ処理で表示されることもあります。
お知らせ一覧に各記事の日付とタイトルにリンクをつ...