主な演算子
| 演算子 | 意味 |
|---|---|
| a + b | a+b |
| a - b | a-b |
| a * b | a×b |
| a / b | a÷b |
| a % b | a÷bの余り |
| a ** b | aのb乗 |
| a++ または ++a | a+1してaに代入 |
| a-- または --a | a-1してaに代入 |
| a += b | a+bしてaに代入 |
| a -= b | a-bしてaに代入 |
| a *= b | a×bしてaに代入 |
| a /= b | a÷bしてaに代入 |
| a %= b | a÷bの余りをaに代入 |
配列
配列は複数のデータを１つにまとめて管理するのに使われる。
配列の作成
sample.js
let 変数名 ＝ [データ0,データ1,データ2,...,データX];
配列の読み取り
sample.js
変数名[インデックス番号];
配列に登録されているでーたには0,1,2,...と番号が付く。この番号のことをインデックス番号という。
for...of文
sample.js
for(let 変数名 of 対象となる配列) ｛
処理内容をここに書く
｝
for...of文は繰り返しの一種で配列の項目数分、｛｝内の処理を実行する。
let 変数名 で繰り返しに使う変数を定義。定義した変数には繰り返しの処理が行われるたびに配列のデータが1つ代入される。
配列のメソッド
| メソッド名 | 意味 |
|---|---|
| 配列の変数名.pop( ) | 配列の最後のデータを削除する |
| 配列の変数名.push(データ) | 配列の最後にデータを追加する |
| 配列の変数名.shift( ) | 配列の最初のデータを削除する |
| 配列の変数名.unshift(データ1,データ2,...) | 配列の最初にデータ1,データ2,...を追加する |
テンプレート文字列
sample.js
const li = '<li>${item}</li>';
｝
（バックティック）で囲まれた文字列のことをテンプレート文字列という。で囲んだ部分のテキストを文字列データにする。'や"と違い文字列中に変数などを埋め込むことができる。
sample.js
${変数名}
変数を埋め込むにはこの形を使う。テンプレート文字列の${}内ではファンクションを呼び出したり、計算が行える。テンプレート文字列は文字列の途中で改行できる。
insertAdjacentHTMLメソッド
sample.js
取得した要素.insertAdjacentHTML('挿入する場所',挿入する要素);
例
document.getElementById('list').insertAdjacentHTML('beforeend'li,);
挿入する場所を指定するキーワード
| 演算子 | 意味 | 言い換え |
|---|---|---|
| 'beforebegin' | 取得した要素の前に挿入 | 取得した要素の開始タグの前に挿入 |
| 'afterbegin' | 取得した要素の子要素として挿入。すでに子要素がある場合はその前に挿入。 | 取得した要素の開始タグのすぐ後に挿入 |
| 'beforeend' | 取得した要素の子要素として挿入。すでに子要素がある場合はその後に挿入。 | 取得した要素の終了タグのすぐ前に挿入 |
| 'afterend' | 取得した要素の後に挿入 | 取得した要素の終了タグの後に挿入 |