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

• 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 元画像のサイズと表示画像のサイズ
• サイト上で画像を小さく表示することはよくありますが、表示されている縦横のサイズはよく使うのですが、たまに元の画像のサイズを使いたい時があります。 そんな時は以下のようなJavaScriptで元の画像のサイズを取得することができます。 [[<img id="neko" src="/img/demo/cat/002.jpg"...
• 2019-08-07 22:34:44

• JS idやclassの値取得
• JavaScriptで特定のidやclassの要素を指定し、そのタグ内の値の取得や出力をします。 読めばわかるものの、使わなければ忘れがちな値の取得と出力です。 classの場合は「getElementsByClassName」 idの場合は「getElementById」 idは一つ...
• 2019-08-03 12:36:14