JavaScript

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

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

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

• JS Ajaxをプレーンで実装
• プラグインを使わずにプレーンのJavaScriptで非同期通信Ajaxを実装するサンプルです。 XMLHttpRequestの関数を利用します。 XMLとありますが、JSONを使うケースが多いためJSONの例を掲載します。 [[ const xhr = new XMLHttpRequest();...
• 2023-01-06 00:12:08

• JS タブボタンで要素切り替え
• プレーンJSでタブの表現を実装するサンプルです。 jQueryなどを使わずにボタンを押すと、コンテンツを入れ替える表現を実装しました。 一つ目の要素がデフォルトで表示されます。 ボタン1...
• 2023-01-04 00:15:20

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

• JS ページ内スムーズリンク
• jQueryを使わずにページ内リンク（アンカーリンク）で滑らかに移動するリンクのサンプルです。 「href="#link"」のようなページ内リンクを無効にし、クリックするとスムーズなスクロールで移動するaタグをJSで実装しました。 jQueryなしで実装しています...
• 2022-06-26 14:25:25

• JS フルスクリーンの開始、解除
• ページでブラウザのフルスクリーンモードを実装し、解除するサンプルです。 動画の再生など大画面で見てほしいコンテンツは、全画面表示をしてほしいので、このサンプルはその制御をする時に使います。 ボタンを押して、フルスクリーン...
• 2022-06-19 22:11:22

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

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

• JS CSSを追加する
• jQueryなどを使わずに、JSのみでCSSを変更する時のサンプルです。 JSでドキュメントのスタイル情報を取得して、JSで新しいCSSを追記します。 下記の四角はサイズだけCSSで記述して描画しています。 width: 200px;height: 1...
• 2022-03-30 07:41:20