JavaScript(ジャバスクリプト) 【JavaScript】イベントリスナー・コールバック関数とは？
JavaScriptのイベントリスナーとコールバック関数は、JavaScriptが動的なWebサイトを作成するために使用する重要な概念です。 イベントリスナーとは？ JavaScriptでは、Webページ上で何かが起こるたびに「イベント」が...
JavaScript(ジャバスクリプト)
JavaScript(ジャバスクリプト) 
JavaScript(ジャバスクリプト) 【JavaScript】画像のバイナリデータとは？JavaScriptで画像に変換する方法
画像のバイナリデータとは？ 画像のバイナリデータとは、画像をコンピュータで処理するために使用されるバイナリ形式のデータです。バイナリデータは、0と1のビットの組み合わせで表現される情報です。画像は、ピクセルと呼ばれる小さな点の集合体で構成さ...
JavaScript(ジャバスクリプト) 【JavaScript】指定された時間の経過後に指定されたコードまたは関数を非同期に実行する
指定された時間の経過後に指定されたコードまたは関数を非同期に実行するには「setTimeout関数」「setInterval関数」が使えます。 setTimeout関数とは JavaScriptのsetTimeout関数は、指定された時間の...
JavaScript(ジャバスクリプト) 【JavaScript】「スコープ」の基本と種類について
JavaScriptにおけるスコープは、変数や関数がどの範囲で参照可能かを定義します。以下に、JavaScriptにおける主なスコープの種類を説明します。 グローバルスコープ（Global Scope） グローバルスコープ（Global S...
JavaScript(ジャバスクリプト) 【JavaScript】Cookieに値を保存する関数
JavaScriptを使ってCookieに値を保存するサンプルコードを作成してみます。※セキュリティやデータのサイズに注意しながら利用してください。 document.cookie document.cookieを使うことで、cookieに...
JavaScript(ジャバスクリプト) 【JavaScript】トークンを発行してメール認証する仕組みを作る(Part1)
トークンを発行してメール認証を行う仕組みを作る JavaScriptを使用してトークンを発行してメール認証を行う仕組みを作るためには、いくつかのステップを考える必要があります。 以下に参考の流れを示します。 ユーザー登録フォームを作成します...
JavaScript(ジャバスクリプト) 【JavaScript】特定の要素の前に要素を挿入する｜parentNode.insertBefore
parentNode.insertBefore JavaScriptで特定の要素の前に要素を挿入するには、次の手順で挿入できます。 挿入元の要素を特定します。 挿入先の要素を特定します。 挿入したい新しい要素を、挿入先の要素の直前に配置しま...
JavaScript(ジャバスクリプト) 【JavaScript】パラメータを使用してデータをエンコード・ハッシュ関数でハッシュ値を作成する
パラメータを使用してデータをエンコードしハッシュ値を計算してみます。 ハッシュ値とは？ 「ハッシュ値」とは、ハッシュ関数を使用してデータを固定長の値に変換することで得られる値です。 ハッシュ関数は、入力データの任意のサイズを受け取り、固定サ...
JavaScript(ジャバスクリプト) 【JavaScript】ハッシュ関数とハッシュ値についての基本
ハッシュ値とは？ 「ハッシュ値」とは、ハッシュ関数を使用してデータを固定長の値に変換することで得られる値です。ハッシュ関数は、入力データの任意のサイズを受け取り、固定サイズの出力であるハッシュ値を計算します。 ハッシュ関数は、データの内容に...
JavaScript(ジャバスクリプト) 【JavaScript】オブジェクト・プロパティ・メソッド・値について
今回はJavaScriptの基本、オブジェクト・プロパティ・メソッドについて見ていきます。 オブジェクトとは？ JavaScript のオブジェクトは、データとメソッドをまとめたものです。オブジェクトは、変数や関数などのプロパティの集合です...
JavaScript(ジャバスクリプト) 【JavaScript】図形の面積を計算する（Canvas）
JavaScriptで様々な図形の面積を計算する方法です。 長方形の面積を計算する 横 x 縦の値が返ります。 // 長方形の面積を計算する function calcRectangleArea(width, height) { retur...
JavaScript(ジャバスクリプト) DOMContentLoadedイベント／DOM操作の基本【JavaScript】
DOMとは？ DOM（Document Object Model）は、HTMLドキュメントの構造を表す階層的なオブジェクトモデルであり、JavaScriptを使用してドキュメントの内容や構造を変更することができます。DOMの処理は次のような...
JavaScript(ジャバスクリプト) 【JavaScript】Ajaxとは？（非同期的なJavaScriptとXML）
Ajaxとは？ Ajaxとは、Asynchronous JavaScript and XML（非同期的なJavaScriptとXML）の略語で、Webページを更新するために必要な情報を取得するためのテクノロジーです。 Ajaxを使用すること...
JavaScript(ジャバスクリプト) 【JavaScript】マウス位置を取得するプロパティ（client・page・screen・offset）
マウスの位置を取得する JavaScriptでマウスの位置を取得するには、以下のようなプロパティを使用します。 clientX, clientY pageX, pageY screenX, screenY offsetX, offsetY ...
JavaScript(ジャバスクリプト) 【JavaScript】ボタンをクリックしたときに現在のパラメータを次のページに渡す
ボタンをクリックしたときに、現在のページのパラメータを次のページに渡したい。 現在のページのパラメータを次のページに渡したい 例えば、次のようなパラメータがあったとします。 このページを開いたときに、次のページにパラメータを渡したい…。 例...
JavaScript(ジャバスクリプト) 【JavaScript】画面をスクロールしたら画像をふわっと表示する
画面スクロールイベントが発生したら特定の要素にクラスを追加して、スクロールしたら画像をふわっと表示させる方法です。 scrollイベントを取得 このコードは、特定のクラス名（ここでは 'wp-block-image'）が付いたすべての要素を...
JavaScript(ジャバスクリプト) 【JavaScript】端末がダークモードの時にダイアログやポップアップウィンドウで通知する方法
ダークモードでデザインが暗くなる 端末がダークモードの時に、CSSによってデザインが見づらい状態・・・になってしまう場合があります。 デザインによっては、ダークモードが動くと見づらくなる場合があるかもしれません。 この場合に、何かしらアナウ...
JavaScript(ジャバスクリプト) 【JavaScript】li要素全体をクリックしてリンク先にジャンプさせる
li要素全体をクリックしてリンクしたい 例えば下記のようなHTMLリスト（目次）があったとして、このli要素はリンクにならず、a要素がリンクとなります。 <div class="toc-content"> <ol class="toc-li...
JavaScript(ジャバスクリプト) 【JavaScript】特定のクラス名を指定して変数に格納する｜querySelector・querySelectorAll
querySelectorメソッド 特定のクラス名を指定するには、documentオブジェクトのquerySelectorメソッドやquerySelectorAllメソッドに、ドット（.）を使ってクラス名を指定します。具体的には、以下のよう...
JavaScript(ジャバスクリプト) 【JavaScript】ビルトインオブジェクトとは？JavaScriptの実行環境オブジェクト
ビルトインオブジェクトとは？ ビルトインオブジェクトとは、JavaScriptの実行環境に最初から用意されているオブジェクトのことを指します。ビルトインオブジェクトには、以下のようなものがあります。 Objectオブジェクト Arrayオブ...
