script– tag –

はじめに 前回の記事では、オブジェクトや配列のデータをJSON文字列に変換する方法を解説しました。今回はその変換したデータを、ブラウザ側に保存しておける仕組み「localStorage」「sessionStorage」について解説します。 これまでのJavaScriptの処理は...

はじめに 前回の記事では、Fetch APIでサーバーとデータをやり取りする方法を解説しました。その中でJSON.stringify()やresponse.json()という形で、何度も「JSON」という言葉が登場していたのを覚えているでしょうか。 今回は、そのJSONについて改めて詳...

はじめに 前回の記事では、非同期処理の基本としてPromise・async/awaitの書き方を解説しました。 今回は、その知識を使って実際にサーバーとデータをやり取りするFetch APIを解説します。ページ全体を再読み込みせずにサーバーと通信してデータを取得・送...

はじめに 前回の記事では、複数の値をまとめて扱えるオブジェクトの基本を解説しました。 今回からは応用編として、非同期処理の基本を解説します。非同期処理は、サーバーとの通信や時間のかかる処理を扱うために欠かせない仕組みで、次回解説する「Fetch...

はじめに 前回の記事では、条件分岐・繰り返し処理の基本的な使い方を解説しました。 今回は、複数の値を1つにまとめて扱えるオブジェクト（Object）の基本を解説します。配列の操作を解説した記事では配列の中にオブジェクトを入れて扱う例を紹介しました...

はじめに 前回の記事では、関数（Function）の基本的な使い方を解説しました。 今回は、条件によって処理を分ける条件分岐（if文・switch文）と、同じ処理を何度もくり返す繰り返し処理（for文・while文）の基本的な使い方を解説します。どちらもプログラ...

はじめに 前回の記事では、正規表現（RegExp）の使い方を解説しました。 今回は、一連の処理をひとまとまりにして名前を付け、何度でも呼び出せるようにする関数（Function）の基本的な使い方を解説します。これまでの記事でもaddEventListenerやforEach・...

はじめに 前回の記事では、配列（Array）の操作方法を解説しました。 今回は、文字列が特定のパターン（形式）に合っているかを調べたり、パターンに一致する部分を取り出したり置き換えたりできる正規表現（RegExp）の使い方を解説します。メールアドレス...

はじめに 前回の記事では、演算子（算術演算子・比較演算子・論理演算子・三項演算子）の使い方を解説しました。 今回は、複数のデータをまとめて扱うときに欠かせない配列（Array）の操作方法を解説します。要素の追加・削除から検索、変換・集計、並び替...

はじめに 前回の記事では、日付（Dateオブジェクト）の操作方法を解説しました。 今回は、値の計算や条件分岐に欠かせない演算子の使い方を解説します。算術演算子・比較演算子・論理演算子・三項演算子まで、実務でよく使う書き方と、つまずきやすい落と...

はじめに 前回の記事では、文字列（String）の操作方法を解説しました。 今回は、日付や時刻を扱うDateオブジェクトの使い方を解説します。現在日時の取得、年月日・曜日の取得、日付の計算、表示形式の整形まで、実務でよく使う操作方法を中心に紹介しま...

はじめに 前回の記事では、<form>タグ（フォーム）をJavaScriptで操作する方法を解説しました。 今回は、フォームの入力値チェックや画面表示の整形など、あらゆる場面で使う文字列（String）の操作方法を解説します。文字列の検索、抽出、置換、分...

はじめに 前回の記事では、<img>タグ（イメージ）をJavaScriptで操作する方法を解説しました。 今回は、お問い合わせフォームや検索窓など、Webサイトに欠かせないフォーム（<form>タグ）をJavaScriptで操作する方法を解説します。フォーム要...

はじめに 前回の記事では、<a>タグ（リンク）をJavaScriptで操作する方法を解説しました。 今回は、Webページに欠かせないもう1つの要素、イメージ（<img>タグ）をJavaScriptで操作する方法を解説します。srcの書き換えによる画像切り替え、読...

はじめに 前回の記事では、addEventListenerを使ったイベント処理の基本と、イベント委任の仕組みについて解説しました。 今回は、そのイベント処理の知識も使いながら、Webページに欠かせないリンク（<a>タグ）をJavaScriptで操作する方法を解説し...

はじめに 前回の記事では、documentオブジェクトを使ったHTML要素の取得・操作方法について解説しました。 今回は、「ボタンがクリックされた」「フォームが送信された」「キーが押された」といった、ユーザーの操作やブラウザの状態変化に反応するイベン...

はじめに 前回の記事では、alert・confirm・promptを使ったダイアログボックスの表示方法について解説しました。 今回は、windowオブジェクトの子オブジェクトであるdocumentを使って、HTML要素を取得・操作する方法を解説します。ボタンをクリックしたら...

はじめに 前回の記事では、window.open()を使ったウィンドウの開閉・移動・リサイズについて解説しました。 今回は、ブラウザが標準で用意しているダイアログボックス（alert・confirm・prompt）の使い方を解説します。「保存しました」といった通知や、「...