JavaScript はクライアント側で実行されるオブジェクト指向型のスクリプト言語です。初心者向けに、JavaScriptとは何ができるのか？をわかりやすく解説します。ご参考ください。
JavaScript(ジャバスクリプト)
JavaScript(ジャバスクリプト)
JavaScript(ジャバスクリプト) 
JavaScript(ジャバスクリプト) 【JavaScript】パラメーターを保持したままリダイレクトする
特定のパラメーターを保持したままリダイレクトするために、JavaScriptを使用する方法は以下の通りです。 このコードは、ブラウザの現在のURLからパラメーターを取得し、指定のパラメーターが存在する場合、新しいURLを構築し、そのパラメー...
JavaScript(ジャバスクリプト) 【JavaScript】プログレスバー（進捗状況）をページに表示する方法
プログレスバーを作る プログレスバーが0％から100％までアニメーションで増加し、ボタンをクリックすることでプログレスバーの進行を開始できます。 プログレスバーを作成する方法はいくつかありますが、以下に基本的なHTMLとCSSを使用して簡単...
JavaScript(ジャバスクリプト) 【JavaScript】ボタンをクリックした時に処理が完了するまで再度ボタンを押せないようにしたい
ボタンを連打できないようにしたい ボタンをクリックした時に処理が完了するまで再度ボタンを押せないようにするには、ボタンを非活性化（disabled）し、処理が完了した後に再度活性化させることができます。 以下は、コードにボタンを非活性化およ...
JavaScript(ジャバスクリプト) 【PWA】iOS 16.4のPWA（プログレッシブウェブアプリケーション）にアプリケーションバッジを設定する
iOS 16.4のPWA（プログレッシブウェブアプリケーション）にアプリケーションバッジを設定するには、Navigator.setAppBadgeを使用できます。以下は、このタスクを実行する基本的な手順です。 Service Workerの...
JavaScript(ジャバスクリプト) 【JavaScript】ブラウザ上でWEBPからJPGへの変換を行うツールを作る
HTMLとJavaScriptを使用して、WEBP画像を読み込みJPGに変換してダウンロードする、ブラウザ上でWEBPからJPGへの変換を行うツールを作ります。 サンプルページはこちら htmlコード <!DOCTYPE html> <ht...
JavaScript(ジャバスクリプト) 【JavaScript】「文字数カウンター」アプリケーションを作る方法
HTML, CSS, そして JavaScript だけで文字数カウンターを作成してみます。 完成形はこちら▼ 以下は、画面に文字を貼り付けるとその文字数が表示されるコードの例です。 文字数カウンターのHTMLコード ユーザーがテキストエリ...
JavaScript(ジャバスクリプト) 【Draggabilly】HTML要素をドラッグアンドドロップできるJavaScriptライブラリ
Draggabillyとは？ Draggabillyは、HTML要素をドラッグ可能にするためのJavaScriptライブラリです。指定したHTML要素をマウスやタッチ操作でドラッグできるようにします。 以下はDraggabillyの基本的な...
JavaScript(ジャバスクリプト) 【JavaScript】JavaScriptのループ文について（for文・while文・do-while文・break文・continue文）
JavaScriptのループ文について、丁寧に分かりやすくひとつずつ説明します。 for文 for文は、特定の回数だけ繰り返し処理を行うための文です。for文の構文は、次のとおりです。 for (初期化式; 条件式; 増減式) { // 繰...
JavaScript(ジャバスクリプト) 【JavaScript】イベントリスナー・コールバック関数とは？
JavaScriptのイベントリスナーとコールバック関数は、JavaScriptが動的なWebサイトを作成するために使用する重要な概念です。 イベントリスナーとは？ JavaScriptでは、Webページ上で何かが起こるたびに「イベント」が...
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の処理は次のような...
