目次
| 基本 | DOM | 制御文 |
| 画面部品 | 文字列関連 | 正規表現関連 |
| 数値関連 | イベント | 日時処理(Date) |
| 配列関連 | オブジェクト | 関数 |
| Windows | JavaScriptテーブル(jQuery) | フレームワーク/ツール |
| JavaScript外部リンク |
基本
- JavaScriptとは - JavaScriptの概要
- TypeScriptとJavaScriptの違い
- JavaScriptの動かし方とconsole.logの確認方法
- JavaScript Chromeブラウザでデバッグする方法
- JavaScript Edgeブラウザでデバッグする方法
- JavaScript constとletとvarの違い
- JavaScriptのデータ型とデータ型を調べる方法
- JavaScript 例外処理のサンプル(try...catchとthrow)
- JavaScript 変数の巻き上げとは
DOM
- JavaScript getElementByIdでIDから値を取得
- JavaScript getElementsByClassName クラスで取得
- JavaScript querySelector セレクタで要素を取得
- JavaScript querySelectorAll 複数要素を取得
- JavaScript getElementsByName name属性で取得
- JavaScript getElementsByTagName タグ名で取得
- JavaScript classListでCSSのクラスを追加/削除
- JavaScript children 全ての子の要素を取得/設定する
- JavaScript nextElementSibling DOMで次に移動
- JavaScript 属性値を取得/設定/削除する(getAttribute)
- JavaScript 要素を追加/削除する(createElement他)
- JavaScript replaceChild 要素を置換する
制御文
- JavaScript if文 条件分岐を行うサンプル
- JavaScript if文の == と === の違い
- JavaScript switch文のサンプル
- JavaScript for文 処理を繰り返す(break/continue)
- JavaScript while文とdo...while文のサンプル
画面部品
- JavaScript テキストボックスの値を取得/設定する
- JavaScript チェックボックスの値を取得/設定する
- JavaScript セレクトボックスの値を取得/設定する
- JavaScript ラジオボタンの値を取得/設定する
- JavaScript hiddenの値を取得/設定する
- JavaScript テキストエリアの値を取得/設定する
- JavaScript パスワード入力欄の値を取得/設定する
- JavaScript リストボックスの値を取得/設定する
- JavaScript 数値入力欄の値を取得/設定する
- JavaScript カラーボタンで色を取得/背景色セット
- JavaScript 要素を活性/非活性にする(disabled)
- JavaScript 要素を表示/非表示にする(displayとvisibility)
- iframeで画面を分割するサンプル
- HTML 入力画面の部品(form)
- HTML labelタグでクリックできる範囲を広げる方法
文字列関連
| 文字列を結合する | +演算子、代入演算子(+=)、concat、repeat、テンプレートリテラル、 |
| textContentとinnerHTMLの違い | textContent、innerHTML |
| 文字列を切り出す | slice、末尾削除 |
| 文字列を切り出す | substring |
| 文字列に指定の文字があるか | includes |
| 文字列の一部を取得する | substr |
| 文字列から１文字を取得する | charAt |
| 文字コードを取得する | charCodeAt、サロゲートペア文字列 |
| 文字からUnicodeを取得 | codePointAt、サロゲートペア文字列 |
| Unicodeから文字を取得 | fromCodePoint |
| 文字列の長さを取得する | length |
| 文字列の位置を取得 | indexOf |
| 大文字と小文字を変換 | toLowerCase、toUpperCase |
| 文字列の始まり/終わりを確認 | startsWith、endsWith |
| 文字列の先頭末尾の空白を取り除く | trim、replac、trimStart、trimEnd |
| 頭ゼロをつける | padStart、slice、padEnd |
| 文字列と数値の変換 | parseInt、String、Number、typeof |
| エスケープシーケンス | |
| URIのエンコードとデコード | encodeURIComponent、decodeURIComponent |
| encodeURIComponentとencodeURIの違い | encodeURIComponent、encodeURI |
正規表現関連
| 文字列を配列にする+正規表現 | split |
| 文字列を置換する+正規表現 | replace |
| 文字列を置換する+正規表現 | jQueryとjsのreplace |
| 正規表現で真偽値を返す | test |
| 正規表現でインデックス値を返す | search |
| 正規表現で値を返す | match |
| 正規表現で値を返す | exec |
数値関連
- JavaScript 計算のサンプル(a += 3や++aとa++)
- JavaScript 切り上げのサンプル(ceil)
- JavaScript 切り捨てのサンプル(floor)
- JavaScript 四捨五入のサンプル(round)
- JavaScript 乱数を生成するサンプル(random)
- JavaScript Mathクラスの関数(べき乗/平方根/立方根他)
- JavaScript 小数点ありの数値の表示(toFixed/指数)
イベント
- JavaScript イベントリスナを登録 (addEventListener)
- JavaScript 文字を入力すると画面に反映される
- JavaScript イベントリスナ削除 (removeEventListener)
- JavaScript 一定間隔で処理を繰り返す (setInterval)
- JavaScript 一定時間の経過後に処理を行う (setTimeout)
- JavaScript クリックで処理を実行する (onclick)
- JavaScript イベントとイベントハンドラのサンプル
- JavaScript イベントのバブリングとは
- JavaScript イベントを無効化する(preventDefault)
- JavaScript マウスイベントで処理を行うサンプル
日時処理(Date)
配列関連
- JavaScript 配列の仕組みと使い方のサンプル
- JavaScript ２次元配列のサンプル
- JavaScript if文で配列を比較するサンプル
- JavaScript for...in文とfor...of文のサンプル
- JavaScript forEach 配列を関数に渡して１回ずつ実行
- JavaScript mapとfilterとreduceの違い
- JavaScript map 配列を処理して新しい配列を作成
- JavaScript filter 条件にあった値で新しい配列を作成
- JavaScript reduce 配列を1つの値にして出力
- JavaScript Mapを使用するサンプル
- JavaScript Setを使用するサンプル
オブジェクト
- JavaScript オブジェクト(連想配列)の使い方
- JavaScript オブジェクトが存在するか確認
- JavaScript prototypeでメソッドを追加する
- JavaScript プロトタイプチェーンとは(継承)
- Javascript ダブルアンダースコア・プロト(__proto__)とは
- JavaScript JSONから値を取得する(parse)
- JavaScript オブジェクトをJSONにする(stringify)
- JavaScript クラスの仕組みとサンプル
- JavaScript クラスの継承の仕組みとサンプル
- JavaScript Promiseを使用するサンプル
- JavaScript Promiseをわかりやすくするasyncとawait
- JavaScript Fetch APIとXMLHttpRequest(XHR)の違い
- JavaScript Fetch APIの非同期通信でJSONを取得
- JavaScript XMLHttpRequestの非同期通信でJSON取得
- JavaScript オブジェクトの値をコピーする(assign)
関数
- JavaScript 関数のサンプル
- JavaScript 再帰関数のサンプル
- JavaScript 関数のデフォルト引数のサンプル
- JavaScript 関数式と無名関数と即時関数
- JavaScript クロージャのサンプル
- JavaScript 引数/戻り値が関数のサンプル(高階関数)
- JavaScript argumentsオブジェクトとcalleeのサンプル
- JavaScript thisの内容を指定する(bind)
- JavaScript thisの内容を指定する(call)
- JavaScript thisの内容を指定する(apply)
- JavaScript コールバック関数のサンプル
- JavaScript アロー関数のサンプル
Windows
| ウィンドウ/ダイアログを開く | open、alert、confirm、prompt |
| ページを遷移する | location、history |
| ディスプレイの幅/高さ/色深度を取得 | screen、width、height、availWidth、availHeight、colorDepth |
| ログやデバッグ用の出力を行う | console、log、info、warn、error、trace、time、timeEnd |
JavaScriptテーブル(jQuery)
JavaScriptフレームワーク/ツール
- Node.jsのインストールとhello worldを表示する手順
- Reactのインストールとhello worldを表示する手順
- React jsxファイルでhello worldを表示するサンプル
- React 画面の部品を使用するサンプル(ボタン等)
- React CSSを使用するサンプル
- React Propsを使用するサンプル
- React useStateを使用するサンプル
- React useEffectを使用するサンプル
- Vue.js hello worldを表示する/if文とfor文のサンプル
- Angularのインストールとhello worldを表示する手順
- webpackのインストールとhello worldを表示する手順
- js-cookieでクッキーを操作するサンプル
- Gulpでjsファイルを圧縮するサンプル
JavaScript外部リンク
Google Hosted Libraries
https://developers.google.com/speed/libraries
ブラウザの対応状況を確認できる
https://caniuse.com/
使用方法はCan I use ?のuseの後に調べる語句を入力します。