現在の言語: 日本語 |
| 日付関連 |
| 曜日コードの取得 曜日をコードとして返す結果は日曜日が0から始まる値となっています。 |
| 日付の加減算 今日の日付や指定の日付に対して日付を加減算した結果を取得できます。 |
| 表示切り替え |
| タグの表示切り替え タグの表示切替 |
| HTMLタグの出力 HTMLタグを出力する方法 |
| HTMLタグの切り替え タイマーでHTMLタグを切り替える方法 |
| 要素の表示切替 要素の表示切り替えの説明となります。 |
| 制御 |
| <a href="#">のclickイベントで、上に移動させない方法 <a href="#">のclickイベントが実行されると、画面が上にスクロールしてしまう現象をjavascriptで制御する方法 |
| onload時点で画面サイズを取得 window.onloadとDOMContentLoadedイベントの違い |
| フォントサイズにあわせて自動調整 Canvas APIを使用してテキストの幅と高さを計算して、フォントサイズを調整します。 |
| ダブルタップ無効の設定 ダブルタップを無効にする設定方法について |
| prettify |
| prettify内のプログラムをコピーする処理 prettify内のプログラムをコピーするサンプルです。 |
| 同期非同期 |
| async/awaitの関係(基本) async/awaitの基本的な処理の説明をします。 |
| await |
| asyncとawaitによる同期処理 javascriptで順番を守って実行したい場合は asyncとawaitを使って実装する方法があります。 |
| Promise.all() Promise.all() |
| 画像表示処理 |
| 画像のフェードイン・フェードアウト async/awaitの基本的な処理の説明をします。 |
| 画像データ退避 画像表示処理 |
| タイマー関連 |
| setIntervalとsetTimeout setIntervalとsetTimeoutについて |
| タイマーで一定間隔でスピードを早くする方法 タイマーの実行間隔を短縮 |
| カウントダウン タイマーを使用したカウントダウン |
| プロパティ関連 |
| 要素の値取得および設定 (1) value (2) innerText (3) textContent (4) innerHTML |
| divタグの幅の取得 getComputedStyleで値を取得 |
| z-index関連 |
| z-indexを使用したキャラの移動 簡単なキャラの移動処理 |
| z-indexを使用したキャラの当たり判定 簡単な当たり判定のサンプル |
| 定数関連 |
| 列挙型 enumのような定数の代わりとなる方法のサンプルです。 |
| Infinity Infinity |
| エラー判定関連 |
| try ... catchについて try catchのエラーについて |
| キャラ移動関連 |
| 障害物判定 fetchでテキストファイルを読み込む方法 |
| キャラの場所の変更 A地点からB地点への変更処理 |
| キャラを一定時間ごとに動かす タイマー処理を使用して一定時間ごとにキャラを移動させます |
| 自動で動かしたときのキャラの向き キャラを動かしたときのキャラの向きを変更 |
| 半円の弧を通り上から下に動く 左側の半円が終わったら右側の半円を動くサンプル |
| ファイル関連 |
| fetchでテキストファイルを読み込む方法 fetch APIを使ってテキストファイルを読み込む処理 |
| 乱数関連 |
| 乱数 数字を使った乱数のサンプル |
| 配列要素をランダムに入れ替え フィッシャー・イェーツのシャッフルアルゴリズムを使用した配列の並び替え |
| base64関連 |
| base64を使った文字列のエンコード・デコード btoaとatob関数を使用します。(Unicode文字を扱う場合は、事前処理が必要です) |
| 正規表現 |
| 正規表現を使った数字チェック 正規表現を使用した数字チェック |
| null/undefined関連 |
| 値が存在しない状態(nullとundefined) 値が存在しない状態 |
| 画面関連 |
| onload onloadは「Webページに表示されるすべての読み込みが完了した時点」で処理を行うのが基本です。 |
| 強制リロード 現在のページや指定したページのリロードについて |
| 画面切り替え 画面を切り替える例 |
| ページのローディング中表示 ローディングアイコンを表示することによりユーザビリティを期待する方法 |
| すごろく関連 |
| キャラ移動による画面切り替え 移動による画面を切り替える例 |
| マス目をタップしたらイベント内容を表示 マスの内容を通知する処理 |
| イベントの画像とメッセージを表示 イベントに一致する画像とメッセージを表示 |
| スコアの更新 サイコロを振って進めたあとのスコア更新 |
| 配列関連 |
| 配列をクリア（要素をすべて削除） 配列関連 |
| 配列要素の削除 配列の指定したインデックス要素の削除をする処理 |
| キャラクター用座標配列 キャラクターの座標を管理する配列 |
| filter()メソッド trueを返す要素のみを新しい配列に含めます。 |
| find()メソッド 配列の中から特定の条件を満たす最初の要素を見つけて返す関数です。 |
| map Array.prototype.map()メソッド |
| オブジェクト配列の動的追加 クラス配列を動的に追加する方法 |
| fromEntries fromEntries |
| reduce 配列の各要素を累積的に処理した結果を返します |
| some 配列に対してsomeを実行した結果 |
| every 配列に対してeveryを実行した結果 |
| join Array.prototype.join() |
| レイヤー関連 |
| 移動によってキャラクターが枠に消えていく状態に推移 レイヤーを使って非表示エリアをつくり、キャラクターがその場所に移動するため隠れるように見える状態となります。 |
| 判定関連 |
| 厳密な型変換による判定 ===(厳密等価演算子)と==(抽象等価演算子)の判定について |
| NULL合体演算子 NULL合体演算子(??) |
| オプショナルチェイニング オプショナルチェイニング(?.) |
| Array.isArray() Array.isArray() |
| 関数 |
| substring() substr()は非推奨です |
| slice 文字列から特定の範囲を抜き出す関数 |
| 自作関数 自作関数(無名関数) |
| toFixed toFixedと浮動小数誤差 |
| requestAnimationFrame |
| 左右移動および上下移動 requestAnimationFrameを使用したサンプル |
| コントロール関連 |
| スライダー スライダーのmin/max/valueの値変更 |
| 動的コントロール作成 for文などでタグを動的に作成 |
| 色関連 |
| カラーコード変換 HEXとRGB |
| 色の選択 マウスで色を選択してください。 |
| hexと透過色 hexと透過色の計算について |
| 言語関連 |
| 言語切替 日本語と英語の切り替えサンプル |
| イベント関連 |
| ボタンイベントリスナー イベントの実装方法 |
| e.currentTargetとe.target e.currentTargetとe.target |
| addEventListenerと引数の関数とevent 関数の引数にeventについて |
| スコープ関連 |
| シャドーイング グローバルスコープのシャドーイング |
| グローバルスコープへのアクセス シャドーイングを使ったスコープ内からのグローバルスコープへのアクセス |
| グローバルオブジェクトの退避変数と上書き 退避変数を使用した実行とグローバルオブジェクトを上書きする例 |
| クラス関連 |
| クラスの宣言 クラスの宣言 |
| setterとgetter setterとgetter |
| クラスフィールド public / private / static |
| クラスメソッド public / private / static |
| クラスの継承 継承を使用したオーバーライド |
| クラスのオーバーライド 親と子のクラス関係 |
| ポリモーフィズム ポリモーフィズム |
| クラスのsuper constructorとメソッド |
| クラスのデリゲート デリゲート |
| データ関連 |
| Web Storage sessionStorage / localStorage |
| HTML関連 |
| querySelectorAll() 指定したCSSセレクタに一致するすべての要素を取得するメソッド |
| JSON関連 |
| JSONの配列変換 JSON形式の文字列データの変換 |
| ダイアログ関連 |
| ファイル選択ダイアログ ファイル選択ダイアログ |
| ファイル選択ダイアログから選択したファイルを読み込む ファイル選択ダイアログから選択したファイルを読み込む |
| createObjectURL createObjectURL |
| 戻る処理関連 |
| 現在表示中のURLを取得 現在表示中のURLを取得 |
| 現在開いているページの上端のy座標と左端のx座標 window.scrollYとwindow.scrollXプロパティ |
| document.referrer 前回(リファラー)のURLを取得 |
| 戻る処理を判定 pageshowイベントとperformance.getEntriesByType |
| 戻るボタンを実行した場合、元のスクロール位置に戻す処理[簡易的処理] 戻るボタンを実行した場合に前回のスクロール位置で表示する処理 |
| indexedDB関連 |
| indexedDBのサポート判定処理 indexedDB |
| データベース作成 データベース作成 |
| indexedDB のデータベースを削除 indexedDB |
| 既存のデータベース一覧の取得 indexedDB.databasesメソッドがサポートされている場合、データベース一覧を取得する方法 |
| データベース存在チェック 指定したデータベースの存在チェック |
| データベースのバージョン取得 データベースのバージョン取得 |
| オブジェクトスキーマ作成サンプル オブジェクトスキーマ(テーブル)の一覧を取得 |
| オブジェクトスキーマ作成サンプル オブジェクトスキーマ(テーブル)の一覧 |
| オブジェクトスキーマ(テーブル)存在チェック オブジェクトスキーマ(テーブル)存在チェック |
| オブジェクトスキーマ(テーブル)削除 オブジェクトスキーマ(テーブル)削除 |
| オブジェクトスキーマ(テーブル)のインデックス追加 オブジェクトスキーマのレコードに高速で検索可能なキー（インデックス）の定義を追加 |
| オブジェクトスキーマ(テーブル)のインデックスフィールド取得 インデックスフィールドの一覧を取得する方法 |
| オブジェクトスキーマ(テーブル)の主キーフィールド取得 主キーフィールドの一覧を取得する方法 |
| オブジェクトスキーマ(テーブル)の主キーフィールド取得 主キーフィールドの一覧を取得する方法 |
| insert indexedDB |
| select indexedDB |
| delete indexedDB |
| update(indexedDB) get()を使用した更新処理(where条件なしのケース) |
| update(indexedDB) getAllを使用してすべての行を更新 |
| update(indexedDB) カーソルを使用してすべての行を更新 |
| count(*) indexedDB |
| メタ情報からオブジェクトストアを作成 indexedDB |
| order by(単一フィールド) indexedDB |
| order by 複数フィールド indexedDB |
| group byと同様の処理 indexedDB |
| exists(getKey) indexedDB |
| exists(openCursor) indexedDB |
| ajax関連 |
| 単純リクエスト ajax |
| プリフライトリクエスト ajax |
| 入れ子になった配列データ ajax |
| キー判定 ajax |
| get ajax |
| ファイルアップロード ajax |
| 画像表示 ajax |
| 画像とテキストを表示 ajax |
| ajaxで画像とストーリを自動表示 ajax |
| 著作権情報 |
| ホームページおよプリ等に掲載されている情報等については、いかなる保障もいたしません。 ホームページおよびアプリ等を通じて入手したいかなる情報も複製、販売、出版または使用させたり、 または公開したりすることはできません。 当方は、ホームページおよびアプリ等を利用したいかなる理由によっての障害等が発生しても、 その結果ホームページおよびアプリ等を利用された本人または他の第三者が被った損害について 一切の責任を負わないものとします。 |