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

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

• JS クリックした位置から波紋がでるボタン
• ボタンをクリックした時に、クリックした部分から波紋が広がる演出をつけたボタンのサンプルです。 以下のボタンをクリックしてください。 クリックした部分から波紋が広がります。 以下にクリック位置が出力されます。 このようなギミックは、複数...
• 2022-03-07 08:20:53

• JS 値を一定期間保持してABテスト
• cookieを利用して一定の時間、同じ人に同じものを表示して、別のコンテンツをだし分けるサンプルです。 このサンプルでは1日同じアルファベットを表示するサンプルです。 初回のアクセスでA・B・Cのどれかを表示して、その値をブラウザのcookieに保存します。...
• 2021-12-07 11:29:07

• JS 繋げて処理を実行
• functionなどの処理を複数続けて値を渡して実行したいときのサンプルです。 数珠繋ぎ（チェーン）でデータを渡して、処理をしたい時、Promiseのthenメソッドが便利です。 最初にPromiseを生成することで、thenで繋げて処理をすることが...
• 2021-05-31 01:33:48

• JS 同時にfunctionを実行
• Promiseを使って複数の処理を同時に実行するサンプルです。 複数の処理を同時に実行する処理は、複雑な記述になりがちです。 まとめて同時に発生させたり、それぞれエラーが発生したり、どこかで制御する処理を考えない...
• 2021-05-31 00:23:25

• JS if文の省略形
• ifの処理を省略して書くサンプル。 ifの処理の省略形は、読めるけどなかなか覚えにくい。 とはいえ、こういったショートハンドは人のコードを引き継ぐ際には必須なので、覚えておきたい。...
• 2021-05-30 22:49:25

• JS JSONのサンプル
• 記事のリストのデータのJSONのサンプル [[ { "post": [ { "id": 1, "title": "enjoy&qu...
• 2021-05-21 00:04:52

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

• JavaScript 音とアニメーションの連携
• 音が出るボタンを設置し、音に合わせて動きをつけるサンプルです。 このサンプルはjQueryとhowlerJSを使って、音がでるボタンを作り、音から抽出した音の長さを使って、CSSでアニメーションを実装しました。 howerJSというオー...
• 2021-01-31 23:53:53