JavaScript

charCodeAt()は文字列または文字から指定文字のUnicodeを取得できます 引数には文字列の先頭から数えた位置を指定し、未指定は0、負の数の場合は文字列の最後から数えられます 引数が整数以外だった場合や文字が見つからない場合は「N ...

charAt()は文字列から位置を指定して切り出す事が可能です 引数には文字列の先頭から数えた位置を指定し、未指定は0、負の数の場合は文字列の最後から数えられます 文字が見つからない場合は空の文字列が返されます charAt()の動作サンプ ...

キーボードでの操作をトリガーにしたイベント実装のサンプルです キーボード操作イベント一覧（JavaScript） keydown キーが押されている時 keypress キーが押されている時 keyup キーが離された時 keydownとk ...

「ANIME.JS」で複数の連続したアニメーションを実装する方法です delayで開始時間をずらして繋いだり、Keyframes、タイムラインでの実装など様々な方法が用意されています delayのみで連続メーション この方法は簡単に利用でき ...

「ANIME.JS」で複数の要素をターゲットにしてアニメーションを指定する方法です カンマ区切りやスペース区切りでそれぞれ違った複数指定が可能です カンマ区切りでor指定 targets: '#aaa , #bbb' 繋げて記述してand指 ...

軽量で使いやすいアニメーションに特化した人気のJavaScript拡張ライブラリ「ANIME.JS」 「ANIME.JS」はCSSアニメーションの操作だけでなくSVGやDOMアニメーションの操作も可能です アニメーション関係のJavaScr ...

軽量で使いやすいアニメーションに特化した人気のJavaScript拡張ライブラリ「ANIME.JS」 「ANIME.JS」はCSSアニメーションの操作だけでなくSVGやDOMアニメーションの操作も可能です アニメーション関係のJavaScr ...

「addEventListener」だけに限らないですが「getElementByClassId」のid指定だと動くけど「getElementsByClassName」のclass指定だと動作しない場合 const target = doc ...

ドラッグ＆ドロップをトリガーにしたJavaScriptイベントの実装サンプルです drag&drop系イベント一覧（JavaScript） ドラッグ&ドロップする要素に適用するイベント名 dragstart ドラッグが開始さ ...

スクロールをトリガーにしたJavaScriptイベントの実装 JavaScript：スクロールをトリガーにしたイベントの動作サンプル サンプルではwindowのaddEventListenerにトリガーイベントscrollを定義して実行して ...

要素上でのマウスオーバー（ホバー）をトリガーとしたイベントサンプルです CSSで言うところの:hoverですが、マウスカーソルが要素上に入った時・入っている時・動いている時・離れた時など、様々なトリガーが存在します JavaScript・j ...

ダブルクリックをトリガーにしたJavaScriptイベントの実装サンプルです JavaScript・jQueryそれぞれ、functionとアロー関数版 JavaScript：ダブルクリックイベント動作サンプル サンプルではダブルクリック検 ...

要素上での右クリックをトリガーにしたJavaScriptイベントの実装 ブラウザのコンテキストメニュー以外の動作を指定したい場合に有効なトリガーイベントです JavaScript・jQueryそれぞれ、functionとアロー関数版のサンプ ...

要素クリックをトリガーにしたJavaScriptイベントの実装 JavaScript・jQueryそれぞれ、functionとアロー関数版のサンプルコードです 動作サンプル 動作サンプルではクリック数を表示しています See the Pen ...

「Animation Events」はCSSのアニメーションの状態を取得してトリガーイベントを実装できます 「Animation Events」で取得できるイベントは「animationsyart（開始時）」「animationiterat ...

PCでは正常に動いててもスマートフォンだとクリックが反応しなかったり画像描画が削除しても消えなかったりした場合の解決策です PCで正常に機能しているのにモバイル端末だと不安定な場合は、ソースコードの記述ミスではなくスペック差による処理落ちの ...

「CreateJS」でTickerを利用してコンテンツを更新するサンプルコードです 最低限必要なコード createjs.Ticker.addEventListener("tick", 実行関数名); 指定した関数を初期値のFPSで実行しま ...

「CreateJS」で丸いボタンを作成してクリックイベントを作成するサンプルコードです 背景のみにクリック可能にすると文字部分はクリック出来ません 背景と文字をContainerを利用してグループ化する事で全体をクリック可能になります Se ...

「CreateJS」でText()を使って表示する文字列や数値をアウトライン描画するサンプルコードです 対象.outline = 1; outlineは描画するテキストを枠文字にするプロパティです 指定する数値は、枠線のサイズになります S ...

「CreateJS」でText()を使って文字列や数値を表示するサンプルコードです 基本的な記述 createjs.Text(表示するテキスト,フォントスタイル,フォントカラー) 例 createjs.Text("Hello World", ...

「CreateJS」でShape()を使って四角形を描画するサンプルコードです drawrect(X座標,Y座標,幅,高さ) See the Pen CreateJS drawing Rect by yochans (@yochans) o ...

「CreateJS」でShape()を使って円を描画するサンプルコードです See the Pen CreateJS drawing Circle by yochans (@yochans) on CodePen. Shape()を使って円 ...

CreateJS（PreloadJS）で画像を事前ロードする時のサンプルコードです See the Pen CreateJS Image Load by yochans (@yochans) on CodePen. LoadQueueで画像 ...

「EASELJS」「TWEENJS」「SOUNDJS」「PRELODJS」から構成されている「CreateJS」 CreateJS | A suite of JavaScript libraries and tools designed f ...

Googleのスピードテストで出てくる「スクロールせずに見えるコンテンツのレンダリングをブロックしている JavaScript/CSS を排除する」という最適化項目 余談：ん、「PageSpeed Tools」ちょっと変わったみたいですね ...

コード表示をシンタックスハイライトで色付けして見やすく表示するJavaScriptライブラリ「Google Code Prettify」 プログラムコードのの紹介などで良く使われますね Google Code Prettifyを読み込む G ...

JavaScript JavaScriptで要素の位置を取得するスクリプト $('#contents').top; $('#contents').left; $('#contents').offsetTop; $('#contents'). ...