iPentec.com  /  Document

JavaScript プログラミング 記事一覧

JavaScript のインデックスページです。


トピックス記事

JavaScript のページ

ASP.NET, C#, JavaScript

ScriptManagerを使用せずにJavaScriptからASP.NETのロジックを呼び出す
ASP.NETのウェブサービスをJavaScriptから呼び出す

Aタグ, JavaScript

Aタグのリンク先URLを動的に変更する

Bodymovin, JavaScript, Lottie

Lottieアニメーションの再生、一時停止、停止
Bodymovin で出力した LottieアニメーションをWebページで再生するコードと実行結果

C#, JavaScript, オートコンプリート

テキストボックスのオートコンプリート / サジェストを実装する

Cookie, Javascript

Cookieをクリアする

Cookie, JavaScript

Cookieからデータを読み込む
JavaScriptでCookieにデータを書き込むコード

Cookie, Javascript, jQuery

Cookieの読み込み、書き込み、削除のコードと実行結果

CSS classList, JavaScript

要素のクラスやサブクラスを動的に設定する - classListプロパティの利用
要素にクラスを追加、削除する - クラスリストのトグルによるクラスの追加と削除の切り替え

CSS スタイル変更, HTML, JavaScript

class属性を動的に変更する - classNameプロパティの利用

CSS ポップアップ表示, JavaScript

HTMLページ内でモーダルの表示枠を表示するコードと実行結果
ページ全体にポップアップ表示するコードと実行結果

CSS, CSS Animation, JavaScript

アニメーション再生の終了直後にJavaScriptを実行するコードと実行結果

CSS, CSS スタイル変更, HTML, JavaScript

JavaScriptでCSSのスタイルを動的に変更する方法

CSS, HTML, JavaScript

HTML, CSS, JavaScriptでの色指定
テキストボックスに文字が入力されている場合にだけ、テキストボックスの中にクリアボタンを設置する
テキストボックスの中にクリアボタンを設置する

CSS, JavaScript

サイドバーの幅をドラッグで変更できるようにする - HTMLページでのスプリッタの作成
ページのカラーテーマをページ表示中に変更できるようにする
トグルで動作するアニメーションつき折りたたみ可能なパネルのコードと実行結果
アニメーション動作する 折りたたみ可能なパネルの作成
クリックをトリガーにしたアニメーション - CSS JavaScriptを用いたクリックで開始するアニメーション

CSS, JavaScript, アコーディオンパネル

アコーディオンパネルのコードと表示結果 - 枠のコンテンツの冒頭が少し見えるアコーディオンパネル

CSS, JavaScript, ダークモード

OSのカラー設定がダークモードの場合にダークモード対応したWebページを表示し、手動でカラーモードを変えられるようにする

fetch, JavaScript

JavaScriptを使ったWebファイル、Web APIレスポンスの取得コードと実行結果 - fetch の利用

Google Cloud Platform, Google Map, HTML, JavaScript

Google Maps API の APIキーを取得する

Google Map, html, JavaScript

Google Map API でアイコンと影を描画順を指定して地図に表示する

Google Map, HTML, JavaScript

Google Mapへ追加したマーカーをすべてクリアする
Google Map JavaScript API v3 を使って地図上にアイコンを表示する
Google Map APIで表示した地図にビル名や施設名が表示されない (Google Map APIによる施設の表示)
Google Map JavaScript API v3 を使ってマップ上にピンを立てる (マーカーを表示する）
Google Map JavaScript API v3 APIを使ったシンプルな地図表示

Highcharts, JavaScript

散布図を描画する (Highchartsを利用)
グラフを描画する (Highchartsを利用)

highlight.js, JavaScript, コードハイライト

highlight.js を利用したWebページでのソースコードのカラーリング

HTML DOMオブジェクトの取得, JavaScript

指定したタグのHTML要素 (DOMオブジェクト) を取得する
CSSセレクタの書式でID、タグ名、クラス名を指定してHTML要素 (DOMオブジェクト) を取得する - querySelector, querySelectorAll を利用したDOMオブジェクトの取得
指定したNameのHTML要素 (DOMオブジェクト) を取得する
HTML要素 (DOMオブジェクト) をIDから取得するコードと実行結果

HTML iframe, JavaScript

JavaScriptを利用してフレームにページを組み込まれるのを避ける (フレームリンクの解除)

HTML スライダー, JavaScript

HTMLスライダーコントロールのスライダーの値 (つまみの位置)を取得する

HTML セレクトボックス, JavaScript

セレクトボックス、ドロップダウンリストボックス（コンボボックス）の選択要素を変更したタイミングで処理を実行する
セレクトボックスで選択されている項目を取得する

HTML チェックボックス, JavaScript

HTMLページのチェックボックスのチェックを設定する
HTMLページのチェックボックスがチェックされているか取得する

HTML テキストボックス, JavaScript

JavaScriptでテキストボックスの文字列を設定する
JavaScriptでテキストボックスに入力された値を取得する

HTML ラジオボタン, JavaScript

ラジオボタンのチェック状態を設定する
ラジオボタンのチェック状態を取得する

HTML, HTML Canvas, JavaScript

HTML Canvas の描画設定を保存し、後で描画設定を復帰させる
HTML Canvasを利用して 画像のモザイクフェードイン、フェードアウトを実装する
HTML Canvasを利用して 画像のモザイク処理をする
HTML Canvasの描画内容を別のHTML Canvasに描画する
HTML Canvas オブジェクトを作成する - メモリー上でのHTML Canvasの作成
HTML Canvas に動的に線形グラデーションを描画する
HTML Canvas に動的に円形グラデーションを描画する
HTML Canvasでピクセル情報を設定する
HTML Canvasでピクセル情報を取得する
HTML Canvas でのマウスポインタの位置を取得する - HTML Canvas でのマウスポインタの移動の検出
HTML Canvas を利用して文字列のアウトラインを描画する
HTML Canvas を利用して文字列を描画する
HTML Canvas を利用して長方形 (矩形) を描画する
HTML Canvas を利用して円を描画するコードと実行結果
HTML Canvas を利用して画像を描画する
HTML Canvas を利用して線を描画する
HTML Canvas を利用して図形を描画する

HTML, HTML テキストボックス, JavaScript

JavaScriptで編集状態のテキストボックスの背景色やボーダーを変更する - フォーカスのあるテキストボックスのスタイルの変更

HTML, HTML5, JavaScript

HTML hidden Property による要素の表示・非表示の切り替え

HTML, HTML5, JavaScript, JavaScript Drag&Drop

複数の要素をドラッグ＆ドロップできるようにする
要素をドラッグ＆ドロップできるようにする

HTML, Javascript

シンプルなポップアップを表示する

HTML, JavaScript

日付の入力フィールドに設定したvalue の値が入力フィールドに反映されない
Aタグをクリックしてもページ遷移しないコードと実行結果 - HTML・JavaScriptでリンク動作を制御する方法
JavaScriptでページの背景色、前景色(文字色)を変更する
Webブラウザーのウィンドウ内に擬似ダイアログボックスを表示する

HTML, JavaScript, カラーピッカー

カラー選択ボックス (カラーピッカー) で選択したカラーの値を取得するコードと実行結果

HTML5, JavaScript

ドラッグ&ドロップで項目の入れ替え可能なリストを作成する

HTML5, JavaScript, JavaScript Drag&Drop

ドラッグ&ドロップで項目の並び替えが可能なリストを作成する

IndexedDB, JavaScript

IndexedDBからレコード (データ)を検索するコードと実行結果
IndexedDBのデータを削除するコードと実行結果
IndexedDBのデータを更新するコードと実行結果
IndexedDBにデータを挿入するコードと実行結果
IndexedDB のデータベースを削除するコードと実行結果
IndexedDB のオブジェクトストア (テーブル) を作成、削除するコードと実行結果
IndexedDB のデータベースを開くコードと実行結果
IndexedDBからすべてのレコード (データ)を取得するコードと実行結果
IndexedDB を利用するシンプルなプログラムのコードと実行結果

innerHTML, JavaScript

innerHTML に代入した値が画面に反映されない

iOS, JavaScript, Web Audio API, サウンド

iOSのMobile Safari でWeb Audio API を利用したサウンドが以前は再生できていたが、再生できなくなった
iOSのMobile SafariでWeb Audio API を利用してサウンドを再生する
iOSのMobile Safari でWeb Audio API を利用したサウンドが再生されない (タッチ制約による制限)

JavaScript

HTMLページのリンクのクリックで、クリップボードに文字列を挿入するコードと実行結果
オブジェクトをマージするコードと実行結果
イベントで実行されるJavaScriptでalertを実行すると他のイベントが発生しない
aタグの onclick, mousedown, mouseup, href のJavaScriptの実行順
複数のチェックボックスをまとめて選択する
MouseMoveイベントのコードと実行結果
貼り付け (ペースト) 操作を検出する
JavaScriptでコピー操作を検出する
文字列の文字数を取得する
insertAdjacentHTML, insertAdjacentText を利用して要素をHTMLページに挿入する
JavaScriptのOnClick, OnMouseDown, OnMouseUp の違い、イベントが発生する順番
JavaScriptでボタンを動的に作成する
文字で埋めて指定した文字数の文字列を作成する
JavaScriptで指定した桁数の先頭を0で埋める
JavaScriptでボタンのクリックを発生させるコードと実行結果
NaN を判定する
JavaScriptのコメント書式
innerHTMLプロパティに文字列を足しこむと、意図した表示にならない。
マウスポインタが要素の領域に重なったとき、領域から出た時にJavaScriptを実行する OnMouseOver, OnMouseOut イベントの利用
変数宣言 var と let の違い
変数の内容を整形して文字列で出力する (JavaScriptでのFormat関数)
Webブラウザーのタブの文字列を変更する
小数を指定した小数点以下の桁数にする
"===" 演算子の意味 ("==" と "===" の違い)
REST Webサービスを呼び出す
指定したタグに属性を追加する
コンボボックスで選択されている項目を取得する
WebページでAltキーを押すとメニューにフォーカスが移る動作をブロックする
Webページでキーボードによるページのリロード、ページの戻る、進むをブロックする
Load DOMContentLoaded ReadyStateChange の呼び出し順とwindow, documentオブジェクトからの呼び出し
文字列を数値に変換する
数値を文字列に変換する
JavaScriptでCSSファイルを動的に切り替えてスタイルを変更するコードと実行結果
JavaScriptコード内の文字列でUnicodeの16進数表記の文字を表現する
Webページでスクロールを禁止する
別のJavaScriptのファイルを動的に読み込む - JavaSctiptコードを別のファイルに分割する
正規表現を利用して文字列を検索する
JavaScriptで指定した要素の位置へスクロールするコードと実行結果
パラメーターを保持してページ転送をする
JavaScriptでリダイレクトする
指定した要素のウィンドウ内の座標値を取得する
指定した要素のページ内での位置(絶対位置)を取得する
JavaScriptのJSファイルから別のJSファイルを呼び出す - JSファイルの分割
外部のJSファイルの処理を呼び出す - 外部JSファイルの読み込み
指定した要素(エレメント)の子要素の最初、または最後にinsertAdjacentHTMLを利用してHTMLを挿入する
指定した要素(エレメント)の前 または 後にinsertAdjacentHTMLを利用してHTMLを挿入する
ウェブページの指定した領域にドラッグ＆ドロップされたハイパーリンクの遷移先のURLを取得する
preventDefault のありなしによる動作の違い
関数を定義する
変数の宣言、変数への代入、変数の参照
文字列を結合する (文字列に文字列を追加する)
クラスの継承 (extends を利用したクラス継承)
prototype の利用 - オブジェクトのプロトタイプオブジェクトの参照
class構文を利用したJavaScriptでのクラスの実装
in 演算子の利用
文字列内を検索する - indexOf メソッドを利用して、文字列内に指定した文字列が含まれるか検索する
JavaScriptで文字列を置換する
オブジェクトのプロパティへのアクセス (プロパティの値を取得・設定する)
テキストボックスで KeyDown イベントを利用すると入力したキーを含むテキストボックスの値が取得できない (テキストボックスの値が意図したものと異なる )
イベントのキャンセル preventDefault stopPropagation の違い
JavaScriptで POSTのページ遷移をする方法
img タグの画像を動的に変更する
postMessage を利用した別のHTMLページへのメッセージ送信
JavaScript : 小数の丸め込み(四捨五入)をする
JavaScriptで小数点以下の値を切り上げるコードと実行結果
JavaScriptで小数部を切り捨てるコードと実行結果
Webブラウザーのウィンドウ、タブを閉じる
確認ダイアログを表示する
一定量スクロールするとヘッダやツールバーがスクロールせずに固定される枠の作成
ひとつ前のページに戻る、一つ次のページに進む
ページのDOMツリーが構築された直後、Webブラウザーの画面にページが表示される前にJavaScriptを実行する - DOMContentLoaded イベントの利用
文字列の前後の空白を削除する - trim メソッドによる文字列のトリミング
文字列内の指定した開始位置から終了位置までの文字列を取得する - 文字列から部分文字列を取得する
文字列を改行や区切り文字で分割する - Splitによる文字列分割
警告ダイアログを表示する - alert関数によるダイアログ表示
イベントリスナーとイベントの動作の違い (addEventListener と on..... の動作の違い)
JavaScriptでの無名関数の利用
ページ表示時、読み込み時に JavaScriptを実行するコードと実行結果
JavaScriptでの16進数の記述
押下されたマウスボタンを取得する
マウスボタンのクリックと、クリック座標の位置を取得する
選択されたファイルを開きファイルの内容を読み込む - FileReader の利用
指定したフォントがインストールされているか確認する
JavaScriptからHTMLフォームをサブミットする
セッションストレージ (Session Storage) を使用する
画面の解像度 (スクリーンのサイズ) を取得するコードと実行結果
処理を遅延して実行する (一定時間経過後に処理を実行する)
JavaScriptによって出力されたHTMLのコードを確認する - DocumentWrite や innerHTMLで設定されたコード内容を確認する
JavaScriptでユーザーエージェント(UserAgent)を取得するコードと実行結果
JavaScriptでページをリロードする
オブジェクトを定義する
ページ内の指定した位置に文字を出力する方法
SyntaxHighliter3でワードラップさせる
スクロール量の取得 - JavaScript でどのくらいスクロールしたかを取得する

JavaScript, JavaScript DOM操作

HTMLページの要素の順番を変更して要素の位置を変更する
HTMLページの要素を複製する
HTMLページの要素の親子関係を変更して要素の位置を変更する

JavaScript, JavaScript Drag&Drop

ドラッグ＆ドロップでページ内の要素を移動させる (任意の位置への配置ではない階層移動)
ドラッグ&ドロップ操作中にドラッグ元の要素だけスタイルを変更する
ドラッグ&ドロップ操作中にドラッグ元の要素を非表示にする
ドラッグ&ドロップ操作中の要素のスタイルをCSSを利用して変更する
JavaScriptのドラッグ＆ドロップのイベント発生タイミングについて
ドラッグ＆ドロップでファイルを受け入れる - ドラッグ＆ドロップによるファイル選択

JavaScript, JavaScript onchange

テキストボックスの入力文字が変化したタイミングでJavaScriptを実行するコードと実行結果

JavaScript, JavaScript onClick

aタグのonclickでリンククリック時にJavaScriptを実行するコードと実行例
ボタンのクリック時にJavaScriptを実行するコードと実行結果

JavaScript, JavaScript ローカル ストレージ

ローカル ストレージ (Local Storage) の変更イベントを利用する
ローカル ストレージ (Local Storage) を使用する

JavaScript, JavaScript 制御フロー

JavaScript : for of 文による繰り返し処理 - JavaScriptでのforeach ループ
JavaScript : do while文を利用した繰り返し処理
JavaScript : if文による条件分岐
JavaScript : for文による繰り返し処理 / forループ処理
JavaScript : switch case文を利用した条件分岐のコードと実行結果
JavaScriptでネストしたループから抜ける方法
JavaScript : while文による繰り返し処理 (whileループの書式)
JavaScriptでループを終了し次のループに移る方法 - continue文の利用
JavaScriptでのループの中断方法 - break文の利用

JavaScript, JavaScript 配列

2次元配列、多次元配列の宣言・初期化・代入・参照
配列の宣言・初期化・代入・参照
配列の長さを取得する

JavaScript, jQuery

指定した要素の位置にスクロールするコードと実行結果
指定した要素のウィンドウ内での座標値を取得する
指定した要素のページ内での位置(絶対位置)を取得する
jQueryでページ全体にポップアップ表示するコードと実行結果
jQuery Sortable を利用してドラッグで順番の変更ができる、階層構造のリストを作成する
jQuery Sortable のダウンロード
jQuery UI を利用してドラッグで項目の順番の並べ替えができるリストを作成する
jQueryを利用して、リンクがクリックされたタイミングで処理を実行する
jQueryを利用して、ボタンがクリックされたタイミングで処理を実行する
jQueryでテキストボックスの文字列を設定する
jQueryのダウンロード手順
jQueryで透明度の変化するアニメーションを実装する - フェードイン、フェードアウトの実装
要素が画面内にスクロールインしたタイミングで処理をする
jQueryを利用して、ボタンやリンクがクリックされたタイミングで処理をする
$(function(){ ... } の意味
jQueryのメソッド拡張 - extend を利用したjQueryの拡張
オブジェクトをマージする - extend の利用
jQueryを利用して、Webブラウザーのスクロール量を取得する
一定量スクロールするとヘッダやツールバーがスクロールせずに固定される枠の作成 (jQueryを利用)
jQueryで選択ボックス / コンボボックスの選択状態を取得する
ラジオボタンのチェック状態を取得する
jQueryでチェックボックスのチェック状態を取得するコードと実行結果
jQueryで複数のテキストボックスの値をまとめて取得する
jQueryでできること - jQueryのメリット
jQueryでテキストボックスの値を取得する
イベント内のセレクタで自身の要素を選択する
jQyeryでアニメーションを実装する
jQuery のMouseMoveイベントを利用する
jQuery のイベントを利用する
jQuery のセレクタを用いて要素内のドキュメント/テキストを変更する
jQuery のセレクタ一覧
jQuery のセレクタを用いて要素のスタイルを変更するコードと実行結果
jQuery でページ表示時にjavascriptを実行するコードと実行結果

JavaScript, jQuery, NuGet

NuGet を利用した jQuery のインストール

JavaScript, jQuery, URL処理

jQueryでURLのパラメーターを取得する

JavaScript, jQuery, アコーディオンパネル

jQueryによる折りたたみ可能なパネルの作成 - jQueryによるアコーディオンパネルの作成

JavaScript, jQuery, アンカーリンク

ページ内リンクでスムーズスクロールする - スクロールアニメーションするリンクの作成 (jQuery 利用)

JavaScript, JSON

HTMLファイル中にJSONを記述してJavaScriptで読み込み、値を取得する
オブジェクトの値がオブジェクトの配列のJSONの読み込み
オブジェクトの配列型のJSONの読み込み
オブジェクトをJSONに変換する
JSON JSONP のContent-type の MIME Type
取得した JSON がキャッシュされないようにする

JavaScript, JSON, XMLHttpRequest

JSONの読み込みと値の取得

JavaScript, JSONP

JSONPを利用する

JavaScript, Lottie

Lottieのアニメーションを再生するJavaScript (lottie.js, lottie.min.js) を取得する

JavaScript, Prism.js, コードハイライト

Prism.js を利用したWebページでのソースコードのカラーリング

JavaScript, SyntaxHighliter3, コードハイライト

SyntaxHighlighter を利用したWebページでのソースコードのカラーリング

JavaScript, URL エンコード デコード

文字列をURLデコード (URIデコード) する
文字列をURLエンコード (URIエンコード) する

JavaScript, URL処理

指定したURLを特定のウィンドウで開く - 新しいウィンドウでURLを開き、2回目はそのウィンドウでURLを開く
指定したURLにページ遷移するコードと実行結果
指定したURLを別ウィンドウで開くコードと実行結果
URLのパラメーターを取得する

JavaScript, UUID

JavaScript によるUUIDの作成

JavaScript, Web Audio API, サウンド

Androidの一部の機種のみでGoogle ChromeでWeb Audio のサウンドが再生できない
Web Audio のサウンド再生を一時停止 (ポーズ) する
Web Audio のサウンド再生を停止 (終了) する
Web Audio API 再生サウンドの再生終了を検出する
Web Audio API で再生しているサウンドを一時停止する
Web Audio API 再生サウンドの音量を変更する
Web Audio API を利用してWebブラウザーでオーディオファイルを再生する (Microsoft Edge, Google Chrome用)

JavaScript, Web SQL

Web SQL データベースのテーブルからレコードを検索して取得する
Web SQL データベースのテーブルにレコードを挿入、更新、削除する
Web SQL データベースのテーブルを削除する
Web SQL データベースのテーブルを作成する
Web SQL データベースを削除する方法
Web SQL データベースを開くコードと実行結果
Web SQL を利用する

JavaScript, XML, XMLHttpRequest

XMLのパーシング - XMLの読み込みと値の取得

JavaScript, XmlHttpRequest

XmlHttpRequestで異なるドメインのファイルにアクセスする

JavaScript, XMLHttpRequest

JavaScriptでXMLHttpRequestを利用してPOSTでデータを送信する
JavaScriptでHTTPを利用してWebのファイルを取得する - XMLHttpRequestの利用
XMLHttpRequestで複数のファイルにアクセスしたがレスポンスが1度しかない

JavaScript, アンカーリンク

ページ内リンクでスムーズスクロールする - スクロールアニメーションするページ内リンクの作成

JavaScript, キーボード入力

キーボードの入力解除(KeyUp)を受け取るコード
キーボードの入力(KeyDown)を受け取る

JavaScript, コードハイライト

Webページでのコードハイライト ライブラリの紹介
google-code-prettify を利用した Webページでのソースコードのカラーリング

JavaScript, サウンド

Audio オブジェクトを利用してサウンドを再生する

JavaScript, タイマー処理

一定間隔で処理を実行する / タイマーの利用 (setInterval を利用)
JavaScriptでのタイマー処理 一定間隔で処理を実行する (setTimeoutを利用)

JavaScript, テンプレートリテラル

文字列中にプレースホルダーを設定して変数の値を文字列中に表示するコードと実行結果 - JavaScript でFormat関数と同様の処理をしたい

JavaScript, ファイルアップロード

HTML5のFileオブジェクトを利用したファイルアップロード
JavaScriptを利用してファイルをアップロードする - HTMLHttpRequestを利用したファイルのアップロード
ファイル参照ボックス (ファイルアップロード) の選択ファイル名を取得する

JavaScript, マウスポインタ 座標

ページのスクロール量を含めた マウスポインタの座標を取得する
マウスポインタの座標を取得するコードと実行結果

JavaScript, 印刷

HTMLページを印刷する

JavaScript, 日付・時刻

iPhone や Mac でJavaScript の日付処理がNan表示になる
日付の加算、減算をする
javaScriptで文字列から日付オブジェクトに変換する
日付・時刻のDateオブジェクト値を文字列に変換・整形する
JavaScript で現在時刻を取得するコードと実行結果

JavaScript, 履歴制御

Ajaxページで[前へ][次へ]ボタンの制御ができるようにする - PushState PopState の利用例
Webブラウザーの [前へ][次へ] ボタンがクリックされ履歴のページが表示されるイベントを検出する - popStateの利用
ページの遷移はせずにページ遷移したように見せかけ、履歴にページを追加する - pushState の利用

JavaScript, 連想配列

連想配列のすべてのキーを取得する、連想配列のすべての要素を取得する
指定したキーが連想配列に存在するか確認する - in 演算子の利用
連想配列の宣言・初期化・代入・参照