JavaScriptで指定した要素のウィンドウ内での座標値を取得するコードを紹介します。概要JavaScriptで要素のウィンドウの座標値を取得するには、getBoundingClientRect() メソッドを呼び出すと位置を取得できます
JavaScriptで指定した要素のページ内での位置を取得するコードを紹介します。概要JavaScriptで要素の位置を取得するには、getElementById() メソッドなどで要素のオブジェクトを取得し、getBoundingClie
jQueryを利用してウェブブラウザのページ全体にポップアップ表示するコードと実行結果を実装します。補足jQueryを利用せずJavaScriptで実装する方法はこちらの記事を参照してください。コード下記のHTMLファイルを作成します。&l
JavaScriptのJSファイルが大きくなってくると、コードファイルを分割したいことがあります。JSファイルから別のJSファイルを呼び出す方法を紹介します。はじめにクライアントサイドで実行される JavaScriptには別ファイルを読み込
外部のJSファイルを読み込んで処理を呼び出すコードを紹介します。概要外部のJavaScriptファイル (JSファイル)を読み込むには、script タグを利用します。scriptタグのsrc属性に読み込むJSファイルを指定します。書式&l
ドラッグ&ドロップ操作中にドラッグ元の要素だけスタイルを変更するコードを紹介します。概要こちらの記事では、ドラッグ＆ドロップの操作中にドラッグされた要素のスタイルを変更するコードを紹介しました。記事で紹介した実装では、ドラッグされて
ドラッグ&ドロップ操作中にドラッグ元の要素を非表示にするコードを紹介します。概要こちらの記事ではドラッグ操作中にドラッグされている要素のスタイルを変更するコードを紹介しました。この記事では、ドラッグ操作中にドラッグ元の要素を非表示に
ドラッグ&ドロップ操作中の要素のスタイルをCSSを利用して変更するコードを紹介します。概要ドラッグ操作中の要素のスタイルを変更すする場合は、ドラッグ開始時にサブクラス名を追加し、ドラッグ終了後にサブクラスを削除する方法で対応できます
JavaScriptを利用して、指定した要素(エレメント)の子要素の最初、または最後にHTMLを挿入するコードを紹介します。概要指定した要素(エレメント)の子要素の最初にHTMLを挿入する場合は、insertAdjacentHTML() メ
JavaScriptで指定した要素(エレメント)の前 または 後にHTMLを挿入するコードを紹介します。概要指定した要素の前後にHTMLを挿入するには、insertAdjacentHTML メソッドを利用すると実現できます。この記事では、i
JavaScriptのDrag&Dropのイベント発生タイミングについて紹介します。概要JavaScriptでのドラッグ＆ドロップのイベントには下記があります。dragstartdragenterdragoverdragleaved
JavaScriptでテキストボックスの値を設定するコードを紹介します。テキストボックスのid属性の値を利用して設定する場合書式JavaScriptでフォームのコントロールをidから参照する場合は次の書式で参照できます。document.f
jQuery Sortable を利用してドラッグで順番の変更ができる、階層構造のリストのコードを紹介します。概要こちらの記事ではjQuery UIを利用してドラッグで順番の変更ができるリストのコードを紹介しました。リストがネストされている
jQuery Sortable のダウンロード手順を紹介します。手順jQuery Sortable のWebサイト(https://johnny.github.io/jquery-sortable/)にアクセスします。下図のページが表示され
jQuery UI を利用してドラッグで項目の順番の並べ替えができるリストを作成するコードを紹介します。概要jQuery UIライブラリを利用して、ドラッグで項目の順番の並べ替えのできるリストを作成するには、下記の処理を実行します。(リスト
NuGet を利用して jQuery をインストールします。手順Visual Studio を起動しWebアプリケーションのプロジェクトを作成します。プロジェクトの作成後 [ツール]メニューの[NuGet パッケージ マネジャー]の[パッケ
ドラッグ&ドロップで項目の並べ替えができるリストを作成するコードを紹介します。概要HTML5のドラッグ&ドロップ機能を利用して、項目の並べ替えができるリストを作成します。例コード下記のHTML,CSSファイルを作成します。[
ドラッグ&ドロップで項目の入れ替え可能なリストを作成するコードを紹介します。概要HTML5のドラッグ&ドロップ機能を利用して、項目の入れ替えができるリストを作成します。例コード下記のHTML,CSSファイルを作成します。Li
クラスリストのトグルによるクラスの追加と削除の切り替えで要素にクラスを追加、削除するコードを紹介します。概要クラスリストのトグルを利用すると、指定したクラスが無い場合にはしてクラスを要素に追加し、指定したクラスがある場合は、要素から指定クラ
ウェブページの指定した領域にドラッグ＆ドロップされたハイパーリンクの遷移先のURLを取得するJavaScriptコードを紹介します。概要こちらの記事とこちらの記事では要素のドラッグ&ドロップ、こちらの記事ではエクスプローラからのファ
JavaScript のpreventDefault のありなしによる動作の違いについて紹介します。概要preventDefault メソッドを呼び出すことで標準の動作を無効にすることができます。この記事では、コード例を利用して、preve
JavaScriptで関数を定義するコードを紹介します。概要引数を受け取り結果を戻り値として返す処理、すなわち関数を定義する書式とコードを紹介します。書式以下の書式を利用します。function 関数名(引数名1, 引数名2, .....
JavaScriptでの変数の宣言、代入、参照の書式とコードについて紹介します。書式宣言var変数宣言は下記の書式を利用します。var (変数名);変数の宣言と同時に値の代入をする書式も利用できます。var (変数名)=(代入する値);下記
jQueryを利用して、リンクがクリックされたタイミングで処理を実行するコードを紹介します。概要jQueryを利用してクリックイベントを処理するには、セレクタでオブジェクトを取得し、オブジェクトのonメソッドを呼び出し、”click”を第一
jQueryを利用して、ボタンがクリックされたタイミングで処理をするコードを紹介します。概要jQueryを利用してボタンのクリックイベントを処理するには、セレクタでオブジェクトを取得し、オブジェクトのonメソッドを呼び出し、”click”を
iOSのMobile Safariで以前はWeb Audio API でサウンドが再生できていたが、バージョンアップ等で再生できなくなってしまう現象について紹介します。現象iOSのMobile SafariでWeb Audio APIのサウ
JavaScriptで文字列を連結して結合するコードを紹介します。概要文字列を結合する場合は "+" 演算子を用います。または、String.concat() メソッドを利用します。書式(文字列または文字列変数) + (文字列または文字列変
JavaScriptのクラスの継承について紹介します。概要JavaScriptのclassでもクラスの継承が利用できます。クラスを継承する場合には extends を利用します。書式class (クラス名) extends (継承元クラス)
JavaScriptでprototype を利用して、オブジェクトのプロトタイプオブジェクトを利用するコードを紹介します。概要JavaScriptの関数には、prototype の名称のオブジェクトがあります。prototype はオブジェ
JavaScriptでクラスを利用するコードを紹介します。概要ECMAScript6からJavaScriptでクラスを定義するためのclass構文が追加されました。この記事では、class構文を利用したJavaScriptのクラスのコードを
JavaScript での in演算子について紹介します。オブジェクトでの in 演算子の利用オブジェクトでin演算子を利用すると、オブジェクトにフィールド(メンバ変数)が存在するか判定できます。プログラム例下記のHTMLファイルを作成しま
JavaScriptで文字列内に指定した文字列が含まれるか検索するコードを紹介します。概要文字列を検索するには indexOf() メソッドを利用します。書式(文字列変数).indexOf((検索文字列));(文字列変数).indexOf(
JavaScriptで文字列を置換するコードを紹介します。概要JavaScriptで文字列を置換するには、String.prototype.replace() メソッドを利用します。書式(文字列の変数).replace((置換対象文字列),
JavaScriptでセレクトボックス、ドロップダウンリストボックス（コンボボックス）の選択要素を変更したタイミングで処理を実行するコードを紹介します。概要ドロップダウンリストボックスやセレクトボックス(コンボボックス)の選択要素が変更され
Ajaxページで[前へ][次へ]ボタンの制御ができるようにするコードを紹介します。PushState PopState のページでの利用例となります。概要PopStateの動作をこちらの記事で紹介しました。また、PushStateの動作をこ
オブジェクトのプロパティの値を取得・設定するコードを紹介します。概要JavaScriptではオブジェクトを定義することで、クラスのようなカプセル化を実現できます。この記事ではオブジェクトのプロパティにアクセスするコードの記述方法を紹介します
