記述場所
HTML ファイルの中の head 要素内、または body 要素内に記述する
※要素を取得する場合、取得する要素の後ろに記載しないと取得できない
<!DOCTYPE html> <html lang="ja"> <head> <meta charset="UTF-8"> <script> // コードを記述する </script> </head> <body> <script> // コードを記述する </script> </body> </html>
外部のjsファイルを読み込む方法
jsファイルの文字コードはHTML/JSPと合わせる、または
charsetにHTML/JSPと同じ文字コードつけること。
外部のjsには script の記載は不要。
<script src="/demo/resources/offer/js/common.js" charset="UTF-8"></script>
springで外部jsファイルを読み込む方法
１．servlet-context.xmlにresources配下を読み込む設定を記載する（デフォルトで記載あり）
servlet-context.xml
<resources mapping="/resources/**" location="/resources/" />
２．webapp＞resources配下にjsファイルを配置する
３．コンテキストパス＋jsファイルまでのパスを指定する
下記はコンテキストパスが「demo」の場合の例
<script src="/demo/resources/offer/js/common.js" charset="UTF-8"></script>
コメント
<script> // 一行コメント /* 複数行 コメント */ </script>
変数
変数名の重複が不可な「let」の使用を推奨
<script> // 変数 var A1= 123; // 数値 var A2= "あいえうお"; // 文字列（ダブルクォーテーション） var A3= 'あいえうお'; // 文字列 （シングルクォーテーション） var A4; A4 = "あとから代入"; // 変数（変数名の重複不可。その他はvarと同じため省略） let B= "定数のサンプル"; // 定数 const C= "定数のサンプル"; // 使用不可な名前 var 1st; // 数字から始まる名前は使用不可 var 123; // 数字だけの名前は使用不可 var if; // 予約語は使用不可 </script>
配列
<script> // 宣言 const array = ["one", "two", "three"]; // 使用 console.log(array[0]); // => "one" // ループ for (let item of array){ console.log(item); } // 追加（末尾に追加） array.push("D"); // 削除（最後尾を削除） const poppedItem = array.pop(); // 最末尾の要素を削除し、その要素を返す console.log(poppedItem); // => "D" // 存在しない場合、undefinedを返す console.log(array[100]); // => undefined // 要素数を返す console.log(array .length); // => 3 </script>
Object
<script> // 空のオブジェクト const hoge = {}; // 宣言時に初期値を設定 const obj = { key: "value", 123: 456, // 数値の場合ダブルクォーテーション不要 "my-key": "my-value" // キーにハイフンを使いたい場合ダブルクォーテーションで囲む }; // 使用方法 console.log(obj.key); // => "value" console.log(obj["key"]); // => "value" // これでも良い // ループ for (let item in obj){ console.log(item); } // プロパティの追加 // ※作成するキー(ここではnewKey)がオブジェクトになければ自動で作成される obj.newKey = "value"; obj["newKey"] = "value"; // これでも良い // プロパティの変更 // ※変更したいキーを選択する obj.newKey = "変更後value"; obj["newKey"] = "変更後value"; // これでも良い // プロパティの削除 delete obj.newKey; delete obj["newKey"]; // これでも良い // プロパティの存在確認 if ("key" in obj) { console.log("`key`プロパティは存在する"); } </script>
Map
Objectとの違い
①キーにString以外を設定することができる
②キーの列挙順が保証されている
③要素数の取得が簡単
④直接的に反復処理が可能
<script> const map = new Map(); // 新しい要素の追加 map.set("key", "value1"); // キーから値を取得 console.log(map.get("key")); // => "value1" // 要素数の取得 console.log(map.size); // => 1 // キーの存在確認 console.log(map.has("key")); // => true // 要素の削除 map.delete("key"); // 要素の削除（全部） map.clear(); </script>
<script> const map = new Map([["key1", "value1"], ["key2", "value2"]]); map.forEach((value, key) => { console.log(key+":"+value); }); </script>
比較演算子
厳密等価演算子（===）
同じ型で同じ値である場合に、trueを返す。
<script> console.log(1 === 1); // => true console.log(1 === "1"); // => false </script>
厳密不等価演算子（!==）
異なる型または異なる値である場合に、trueを返す。
<script> console.log(1 !== 1); // => false console.log(1 !== "1"); // => true </script>
等価演算子（==）
同じデータ型のオペランドを比較する場合は、厳密等価演算子（===）と同じ結果になる。
<script> console.log(1 == 1); // => true console.log("str" == "str"); // => true console.log("JavaScript" == "ECMAScript"); // => false // オブジェクトは参照が一致しているならtrueを返す // {} は新しいオブジェクトを作成している const objA = {}; const objB = {}; console.log(objA == objB); // => false console.log(objA == objA); // => true // 文字列を数値に変換してから比較 console.log(1 == "1"); // => true // "01"を数値にすると`1`となる console.log(1 == "01"); // => true // 真偽値を数値に変換してから比較 console.log(0 == false); // => true // nullの比較はfalseを返す console.log(0 == null); // => false // nullとundefinedの比較は常にtrueを返す console.log(null == undefined); // => true </script>
不等価演算子（!=）
等しくないならtrueを返す。
<script> console.log(1 != 1); // => false console.log("str" != "str"); // => false console.log("JavaScript" != "ECMAScript"); // => true console.log(true != true);// => false // オブジェクトは参照が一致していないならtrueを返す const objA = {}; const objB = {}; console.log(objA != objB); // => true console.log(objA != objA); // => false console.log(1 != "1"); // => false console.log(0 != false); // => false console.log(0 != null); // => true console.log(null != undefined); // => false </script>
if文
<script> let hoge= 1; if (1 == hoge) { alert("1です"); } else if (2 <= hoge){ alert("2以上です"); } else { alert("その他です"); } </script>
switch文
<script> let hoge= 0; switch (hoge) { case 1: alert("1です"); break; case 2: alert("2です"); break; default: alert("その他です"); break; } </script>
for文
for (初期化式; 条件式; 増分式)
<script> let total = 0; // totalの初期値は0 for (let i = 0; i < 10; i++) { total += i + 1; // 1から10の値をtotalに加算している } </script>
while文
while文は条件式がtrueであるならば、反復処理を行う。
<script> while (条件式) { 実行する文; } </script>
do-while文
do-while文は実行後に条件の判定を行う。（一度は必ず通る）
<script> do { 実行する文; } while (条件式); </script>
関数
オーバーロード（引数違いの関数名）不可。
<script> // 関数宣言（引数あり、戻り値あり） function 関数名(仮引数1, 仮引数2) { // 関数が呼び出されたときの処理 // ... return 関数の返り値; } // 関数宣言（引数あり、戻り値あり） function 関数名(仮引数1, 仮引数2) { // 関数が呼び出されたときの処理 // ... return 関数の返り値; } // 関数宣言（引数なし、戻り値なし） function 関数名() { // 関数が呼び出されたときの処理 // ... } // 関数宣言（これでも良い） var 関数名 = function(仮引数) { // 関数が呼び出されたときの処理 // ... return 関数の返り値; } // 関数呼び出し（引数あり、戻り値あり） let 関数の結果 = 関数名(引数1, 引数2); // 関数呼び出し（引数なし、戻り値なし） 関数名(); </script>
要素の取得
IDを指定（getElementById）
・同じIDが複数存在する場合は最初の要素しか取得しない
・存在しなかった場合は null が返る
<input type="text" id="hoge" value="サンプル"/> <script> var hoge = document.getElementById("hoge"); alert(hoge.value); </script>
Nameを指定（getElementsByName）
・name属性は複数取れる => 一つでも要素番号を指定する必要あり
・foreachで回すの不可 => forで回す
<input type="text" name="hoge" value="サンプル"/> <input type="text" name="hoge" value="サンプル2"/> <script> var hoge = document.getElementsByName("hoge"); alert(hoge[0].value); alert(hoge[1].value); for (var item of hoge) { alert(item.value); } </script>
tagを指定（getElementsByTagName）
・複数取得できる=>nameと同じ要領
<input type="text" name="hoge" value="サンプル"/> <input type="text" name="hoge" value="サンプル2"/> <script> var hoge = document.getElementsByTagName("input"); alert(hoge[0].value); alert(hoge[1].value); for (var item of hoge) { alert(item.value); } </script>
クラス名を指定（getElementsByClassName）
・複数取得できる=>nameと同じ要領
<input type="text" class="hoge" value="サンプル"/> <input type="text" class="hoge" value="サンプル2"/> <script> var hoge = document.getElementsByClassName("hoge"); alert(hoge[0].value); alert(hoge[1].value); for (var item of hoge) { alert(item.value); } </script>
CSSセレクタを指定（querySelector、querySelectorAll）
・querySelectorは一つの要素を取得 => class等で複数取れても最初の一つだけ
・querySelectorAllは複数の要素を取得
・要素番号を指定する場合、[ ]で囲むこと => ( )は使用不可
| セレクタ | 対象 | 例 |
|---|---|---|
| 全称セレクタ | すべての要素 | *{} |
| 要素セレクタ | タグ名 | h1{} |
| classセレクタ | class属性の値 | .hoge |
| idセレクタ | id属性の値 | #hoge |
| 属性セレクタ | 指定属性を持つ要素 | a[title] {} |
| 疑似要素セレクタ | 選択された要素の一部 | p::first-line {} |
| 疑似classセレクタ | 選択された要素の全体 | button:hover {} |
<input type="text" id="hoge1" class="smpl" value="サンプル"/> <input type="text" id="hoge2" class="smpl" value="サンプル2"/> <script> // IDを指定 var hoge1 = document.querySelector("#hoge1"); alert(hoge1.value); // classを指定 var hoge2 = document.querySelectorAll(".smpl"); alert(hoge2[0].value); // タグを指定 var hoge3 = document.querySelectorAll("input"); alert(hoge3[0].value); </script>
複雑な指定
