Web Audio のサウンド再生を一時停止 (ポーズ) するコードを紹介します。概要Web Audio のサウンド再生を一時停止する場合には、AudioContextのsuspend()メソッドを呼び出します。一時停止した状態からサウンド
Web Audio のサウンド再生を停止 (終了) するコードを紹介します。概要Web Audio のサウンド再生を停止するには、AudioContextのcloseメソッドを呼び出して、オーディオコンテキストを閉じるか、AudioBuff
JavaScriptで文字列を数値に明示的に変換するコードを紹介します。概要JavaScriptで文字列を数値に明示的に変換する場合には Number 関数を利用します。補足数値を文字列に変換する処理はこちらの記事を参照してください。書式N
JavaScriptで数値を明示的に文字列に変換するコードを紹介します。概要JavaScriptで数値を明示的に文字列に変換する場合には以下の方法があります。 String 関数を利用する toString メソッドを利用する toFixe
JavaScriptを利用して、CSSファイルを動的に切り替えてスタイルを変更するコードと実行結果を紹介します。概要ボタンやリンクのクリックでページにリンクされているCSSファイルを変更して、動的にページのスタイルを変更したい場合があります
JavaScriptコード内の文字列でUnicodeの16進数表記の文字を表現する書式を紹介します。概要JavaScriptのコード内の文字列で、Unicodeの文字を表現する際に16進数表記で記述する場合には、\u{} の書式を利用します
JavaScriptでCSSセレクタの書式でID名、タグ名、クラス名を指定してHTML要素 (DOMオブジェクト) を取得するコードを紹介します。概要以下のページでは、getElementById, getElementsByName, g
JavaScriptを利用して指定したNameのHTML要素 (DOMオブジェクト) を取得するコードを紹介します。概要指定したNameのHTML要素(DOMオブジェクト)を取得する場合は documentオブジェクトの getElemen
JavaScriptを利用して指定したIDのHTML要素 (DOMオブジェクト) を取得するコードと実行結果を紹介します。概要指定したIDのHTML要素(DOMオブジェクト)を取得する場合は documentオブジェクトの getEleme
HTML Canvas の描画設定を保存し、後で描画設定を復帰させるコードを紹介します。概要HTML Canvas のコンテキストではアクティブなペンのカラーやペンの幅、塗りつぶしのカラーなどの描画設定は1つしか保持できず、描画のたびに切り
Webページでスクロールを禁止する方法を紹介します。概要スクロールができるWebページでスクロールを禁止させたい場合があります。スクロールを禁止する方法はいくつかありますが、この記事では、マウスホイールのブロック、タッチによる操作のブロック
JavaScriptでURLをデコードするコードを紹介します。概要JavaScriptでURLをデコードする処理をしたい場合があります。JavaScriptでURLをエンコードするにはdecodeURIComponentメソッドを利用します
JavaScriptでURLをエンコードするコードを紹介します。概要JavaScriptでURLにパラメーターを利用する場合、パラメーターにURLに利用できない文字が含まれていることがあります。(参考:URLに利用できる文字)この場合、サー
JavaScriptを利用して要素のクラスやサブクラスを動的に設定するコードを紹介します。概要こちらの記事では、classNameプロパティを変更して、要素のクラスを変更するコードを紹介しました。この方法では要素のクラスを変更できますが、J
HTMLページの要素の順番を変更して要素の位置を変更するコードを紹介します。概要JavaScriptを利用して要素の順番を変更して要素の位置を変更する場合には、insertBefore() メソッドを利用します。なお、DOMノードの親子関係
JavaScriptを利用してHTMLの要素を複製するコードを紹介します。概要JavaScriptを利用してHTMLページ内の要素を複製してページ内に配置するコードを紹介します。要素の複製は、コピー元の要素のオブジェクトを取得しオブジェクト
HTMLで要素の親子関係を変更して要素の位置を変更するコードを紹介します。概要HTMLでDOMにアクセスして要素を取得し、その要素の親子関係を変更することで要素の表示位置を変更することができます。この記事では要素の親子関係を変更することで、
HTML JavaScriptのページでドラッグ＆ドロップでページ内の要素を移動させるコードを紹介します。概要HTMLページで要素をドラッグ＆ドロップで移動させるコードを紹介します。要素の絶対座標を指定する方法ではなく、ドロップした要素の子
別のJavaScriptのファイルを動的に読み込むコードを紹介します。概要こちらの記事では複数のJavaScriptファイルに分割されたコードを読み込む方法を紹介しました。この方法で処理は実行できますが、HTMLファイル側にアクセスするすべ
OSのカラー設定がダークモードの場合にダークモード対応したWebページを表示し、手動でカラーモードを変えられるようにするコードを紹介します。概要こちらの記事でOSのカラー設定に応じてWebページのカラーを変えるコードを紹介しました。また、こ
JavaScriptを利用して、ページのカラーテーマをページ表示中に変更できるようにするコードを紹介します。概要こちらの記事では、prefers-color-scheme を利用して、OSのカラー設定がダークモードの場合にダークモードに対応
オブジェクトの値が配列のJSONの読み込みのコードを紹介します。概要JSONでオブジェクトの配列の読み込みのコードをこちらの記事で紹介しました。JSONでオブジェクトの配列を扱う場合の書式の一つとして、一つのオブジェクトの値にオブジェクトの
JavaScriptでオブジェクトの配列型のJSONを読み込んで値を取得するコードを紹介します。概要こちらの記事ではシンプルなオブジェクトのJSONの読み込み(パーシング)を紹介しました。この記事ではJSONがオブジェクトの配列形式で取得し
シンプルなデモを作成してWeb SQL を利用するコードを紹介します。注意WebSQLは非推奨となり、多くのWebブラウザでは機能が廃止されています。本記事で紹介しているコードも最新のWebブラウザでは動作しない場合があるためご注意下さい。
シンタックス ハイライティング （Syntax Highlighting) ライブラリの紹介です。概要Webページでソースコードを掲載する際に、キーワードなどを別の色で表示したいことがあります。HTMLでキーワードのカラーを変更すれば対応で
正規表現を利用して文字列を検索するコードを紹介します。パターンに一致するか判定するパターンに一致するかを判定する場合は、RegExp オブジェクトのtest メソッドを利用します。プログラム例 : コード下記のHTMLファイルを作成します。
Web Audio API 再生サウンドの再生終了を検出するコードを紹介します。概要Web Audio API 再生サウンドの終了を検出する場合は、オーディオソース(AudioBufferSourceNode)のOnEndedイベントを実装
Web Audio API で再生しているサウンドを一時停止するコードを紹介します。概要Web Audio APIで再生しているサウンドを一時停止する場合はAudioContextオブジェクトのsuspend メソッドを呼び出します。停止状
Web Audio API で再生しているサウンドの音量を変更するコードを紹介します。概要Web Audio APIで再生されているサウンドの音量を変更するには、再生開始時にGainNodeオブジェクトに接続して再生を開始します。再生中にG
JavaScriptでウェブブラウザで表示しているページ全体にポップアップを表示するコードを紹介します。コード:単純なポップアップ表示下記のCSS,HTMLファイルを作成します。all-screen-popup.cssbody { p
jQueryを利用して、指定した要素の位置にスクロールするコードと実行結果を紹介します。補足jQueryを利用しない実装方法はこちらの記事を参照してください。概要jQueryを利用して画面をスクロールするには、$(window).scrol
JavaScriptで指定した要素の位置にスクロールするコードと実行結果を紹介します。概要JavaScriptで指定した位置にスクロールするには、 document.documentElement.scrollTop にスクロールしたい位置
パラメーターを保持してページ転送をするコードを紹介します。概要meta refreshタグを利用してページを転送する方法を紹介しましたが、この方法ではアクセスしたURLにパラメータが追加されている場合、転送によりパラメーターが失われてしまい
JavaScriptでリダイレクト、ページの転送をするコードを紹介します。概要JavaScriptでページを切り替えるには、document.location.href window.location.href() を利用します。docum
jQueryで指定した要素のスクリーン上での座標値を取得するコードを紹介します。概要jQueryでウィンドウ上での座標値を取得する場合は、要素のオブジェクトのoffsetやpositionメソッドを呼び出し、ページ全体の座標を取得し、その値
jQueryで指定した要素のページ内での位置(絶対位置)を取得するコードを紹介します。概要jQueryで要素の座標値を取得する場合は offset() メソッドを利用します。offset() メソッドでは領域の左と上の座標のみ取得できるた
