JavaScript取得, 文字列

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

JavaScript取得, 文字列

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

JavaScriptイベント

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

JavaScriptANIME.JS, JavaScriptライブラリ

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

JavaScriptANIME.JS, JavaScriptライブラリ

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

JavaScriptANIME.JS, JavaScriptライブラリ

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

JavaScriptANIME.JS, JavaScriptライブラリ

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

JavaScriptイベント

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

JavaScriptイベント

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

JavaScriptイベント

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

JavaScriptイベント

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

JavaScriptイベント

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

JavaScriptイベント

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

JavaScriptイベント

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

CSS, JavaScriptCSSアニメーション, イベント

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

JavaScriptCreateJS, JavaScriptライブラリ

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

JavaScriptCreateJS, JavaScriptライブラリ

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

JavaScriptCreateJS, JavaScriptライブラリ

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

JavaScriptCreateJS, JavaScriptライブラリ

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

JavaScriptCreateJS, JavaScriptライブラリ

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

JavaScriptCreateJS, JavaScriptライブラリ

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

JavaScriptCreateJS, JavaScriptライブラリ

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

JavaScriptCreateJS, JavaScriptライブラリ

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

JavaScriptCreateJS, JavaScriptライブラリ

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

CSS, JavaScriptWEBサイト高速化

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

JavaScriptシンタックスハイライト, JavaScriptライブラリ

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

JavaScript取得

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