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 let 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 undefined unshift userAgent vibrate webgl width window write XDomainRequest XMLHttpRequest

• JS URLのハッシュ値をUIに活用する
• URLの最後に#をつけて文字列をつけるとページ内のIDのまでページ内で移動します。一瞬で移動せずにスクロールとアコーディオンを組み合わせたUIのサンプルです。 ページ内からのリンクはaタグで書くだけ。 クリックすると、アコーディオンで隠れているコンテンツのところまで、スクロールし、コンテンツを表示します。...
• 2019-08-07 22:06:43

• JS 加速度検知
• スマホを振ったときにJavaScriptで仕掛けを作りたいときのサンプルです。 このサンプルではiOS、Androidのブラウザで、スマホを握って振ったときに、文字が切り替わるスクリプトを実装しています。 function ClickRequestDeviceSen...
• 2019-07-29 21:35:59

• JS 傾き検知
• スマホにはほとんど傾きを検知するセンサーが内蔵されており、その値を利用できます。 スマホのみ下記の画像が３次元にひねり動きます。 まず、特定の方向にスマホを向けて、平らにすると初期値になります。 そこから、縦に起こす数値、横にひ...
• 2019-08-07 21:27:06

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

• JS バイブレーション
• 現在はまだAndroidのみですが、バイブレーションをJSで発火させることができます。 スマホには大抵バイブレーションの機能がついています。 OSがAndroidの場合、以下のJavaScriptで簡単に発動できます。 $(document).ready(function() {...
• 2019-07-28 17:08:52

• JS CSV読み込みjQueryで表示
• CSVを読み込み、jQueryで出力するサンプルです。 HTML5のFile APIを使ってローカルのCSVファイルを取り込み、加工できる状態にするスクリプトです。 下記のようなカンマ区切りのファイルをローカルに置き、...
• 2019-07-28 04:54:43

• JS クリックでコピー
• ボタンをクリックするとテキストなどをコピーするJSのサンプルです。 jQueryのプラグイン「clipboard.js」を使うと、どこかをクリックすることで、クリップボードにコピーすることができます。 コピーが成功したらイベントを動か...
• 2019-08-03 12:30:15

• JavaScript 値のチェック
• 値をチェックをする際のサンプルです。 入力値や引数で、数字や文字列だけあるいは指定の記号を扱いたいときがあります。 すぐにifで分岐を作れるよう例文を用...
• 2019-08-07 21:01:39

• JS URLクエリ取得
• URLから情報を取得するときの例です。 URLについているパラメータ情報だけでなく、JavaScriptでURLからいろいろな情報を得ることができます。 [[location....
• 2019-08-03 12:22:10

• JS cookie書き込み
• 改めてcookieの書き込みについてまとめます。 JavaScript データの書き込み 基本的にエンコードするようにします。 半角スペースやセミコロンがクッキ...
• 2019-07-29 20:39:39