JavaScript

getBoundingClientRect setAttribute Array CSV Date ES Modules addEventListener clearInterval click console crossorigin decodeURIComponent deviceorientation document draggable encodeURIComponent for function geolocation getElementById getElementsByClassName getHours getMinutes getSeconds getTime hash height history host href if import indexOf innerHTML innerHeight length location log match module naturalHeight naturalWidth navigator offsetHeight onclick onmousedown open originalEvent parent parseInt pathname port preventDefault protocol querySelector replace script scrollHeight setTimeout stopPropagation toFixed toGMTString toLocaleString toLowerCase toggle userAgent vibrate width window replaceState event position Chart D3 search XMLHttpRequest XDomainRequest enchant hello webgl clamp touchstart touchmove touchforcechange force touches devicemotion acceleration cookie pushState File setInterval TypeScript textContent connection FileReader write getContext Image drawImage const push readAsText split shift getImageData sort getSelection baseNode encodeURI getRangeAt toString Promise all then catch howler requestPermission json DOMContentLoaded DOMParser parseFromString getAttribute onload stringify parse unshift random Math scrollTo pageYOffset fullscreenchange fullscreenElement requestFullscreen exitFullscreen insertAdjacentHTML styleSheets insertRule targetTouches querySelectorAll remove

• JS テキストと画像を入力してプレビューする
• テキストを入力すると自動でそのテキストを解析し、プレビュー表示するサンプルです。 入力欄 （入力と同時にページ下部に変換して表示） テキストの入力 改行はbrタグに変換する https://で始まるとリンクを生成する...
• 2024-04-22 01:04:01

• JS 配列要素の読み込みと表示
• プレーンJavaScriptでJSONを非同期通信（AJAX）で読み込み表示するサンプルです。 jQueryなどのライブラリを使うともっと記述は減らせますが、あえて使いたくないときは以下のように書きます。 XMLHttpRequestはJSONも対応しているため、JS...
• 2023-01-15 17:46:25

• GTM リファラでコンテンツを変える
• 特定のURLからランディングしたとき、ページのコンテンツを差し替えるサンプルです。Google Tag Managerを活用しています。 ツイッターからのリンクでこのページに飛ぶと下記のボタンが青くなります。 リファラの値に「https://t.co/」が含まれると検知して、情報を差し替えます。...
• 2022-07-03 18:09:43

• JS HTMLの上書きと挿入
• JavaScriptを使って、HTMLの要素を挿入するサンプルです。 一つの要素を書き換えるパターンと、押すたびに増えるパターンをJSのみで実装します。 ボタンを押すと下部の枠にHTMLの要素が追加されます。 innerHTML...
• 2022-04-01 08:47:41

• JS マウスの位置の取得
• マウスが要素の上に来た時の位置を取得するサンプルです。 マウスオーバーしたときと、クリックされたとき、それぞれのマウスの位置を取得します。 以下の正方形にマウスを合わせてください。 スマホではタップした...
• 2022-04-01 08:46:11

• JS 複数の要素のクリック
• ボタンが押された時にイベントを発生させるJavaScriptのみのサンプルです。 idで1箇所のみに実装するケースと、classで複数箇所に実装するケースがあります。 よく見かけるサンプルはidのケースですが、実際サービスに実装するときは...
• 2022-03-18 07:25:03

• JS サウンドビジュアライザー
• 音を使ったビジュアル表現のサンプルです。 jQueryとhowler.jsを使ったサウンドビジュアライザーのサンプルコードの備忘録です。 音のスピードや音量調整も簡易的に付けています。 BGM ra...
• 2021-06-02 00:56:29

• JavaScript 別ページのOG情報を取得
• JSでHTMLページのOG情報を取得して、ページ内に表示するサンプルです。通信するページへはアクセス許可があるページに限ります。 同じサイト内で、別のページのOG情報を取得する時のサンプルです。 OG情報とはページをSNSでシェアするときなどに読み込まれるページの概要をまとめた情報で...
• 2021-05-05 18:45:28

• JavaScript 画像をcanvasに変換する
• imgタグで呼び出した画像をcanvasに描画するサンプルです。描画の際にリサイズもします。 表示した画像をCanvasに描画します。 imgの元画像は600pxですが、CSSで200pxにしているので、canvasでも200pxに合わせてリサイズしています。 このサンプ...
• 2020-09-13 14:10:15

• JS 通信速度の検知
• 現在Chromeではブラウザで通信速度をJacaScriptで計測できます。 navigator.connection.***の値で取得できます。 2020年１月現在、IE,EdgeやSafariではまだ実装されていません。 これをうまく使うと回線速度に応じたコン...
• 2020-01-15 07:23:56