JavaScript
JavaScriptの基礎事項まとめ
今回は、javascriptを書く際にチラ見するための記事。基本事項の部分をまとめています。
Google MapなどのAPIやJSONなど使用する機会は多いと思うので一度に見れるといいなと思ってまとめました。自分で覚えることを目的としていますので、羅列です。ご容赦ください。
基礎編注意事項
★JSからファイルを呼び出すとき、同じフォルダ内の場合は
<script src="main.js"></script>ののうにファイル名だけ
別のフォルダから呼び出すとき、そのフォルダ名を紐づける
<script src="js/main.js"></script>
★JSは大文字と小文字が厳密に区別される
★エスケープ方法
例)’(シングルクォーテーション)を文字列にしないなど
その場合\(バックスラッシュを使用)
★計算式 べき乗 ** アスタリスクの後に何乗にするか記載
★定数・変数の命名形式の注意点 -(ハイフォン)は使えない
★文字列を数値に変換するparseInt ※()内の10は10進数にという意味
console.log(parseInt('5', 10) + 3);
★エラーで出てくるNaNは Not a numberの意味
★テンプレートリテラル:JSで文字列の中に変数をあてこむ方法
console.log(`hello ${i}`);
’(シングルクォーテーション)ではなく `(バッククオート)を使用
※Railsでは#{} JSでは${}
★関数の書き方
function 関数名() {
処理内容;
}
★引数の使用の仕方
★処理結果を値として返したい場合使うのがreturn
※関数内でreturnを使用すると、それ以降に処理を記述しても実行されない
★関数宣言
function 関数名(仮引数, 仮引数, …) {
処理;
処理;
return 返り値;
}
★呼び出し
定数名(実引数, 実引数,...)
★スコープ
ブロックを分けることで変数を使い分けができる。
書いたコードはブロックで囲ってスコープを分ける習慣づけをしておくとよい
★関数式(名前がないので無名関数と呼ばれる)
const 定数名 = function (仮引数, 仮引数, …) {
処理;
処理;
return 返り値;
};
アロー関数の書き方
①functionをとる②中身がreurnのみなので1行に③引数1つなのでの()をとる
オブジェクト
★JSでのオブジェクトとは
データ構造で配列内のそれぞれの値に説明をつけられる
配列は[](大かっこ)、オブジェクトの場合{}(波かっこ)
それぞれの要素に名前をつけることができる
例)
★JSでのクラスはその要素の名前を定義、それをもとにオブジェクトを作成
クラスから作られるオブジェクトのことを、そのクラスのインスタンスとかインスタンスオブジェクトと呼ぶ
★オブジェクトの作り方 new
★メソッドをインスタンス化せずに呼び出すには staticキーワードをメソッドの前に
クラス名に直接つけて呼び出すことができる
★JSのクラスの継承はextends
※railsは <
コンストラクターで要素を追加するときに親クラスの要素は
super(要素, 要素, …)
新しい要素はこの下で定義
★配列絵の追加と削除
unshift() 配列の前に追加
push() 配列の後ろに追加
shift() 配列の先頭を削除
pop() 配列の末尾を削除
plice() 要素の途中に追加したり削除したりする
第一引数(始まり)第二引数(個数)第三引数以降
(追加するときは追加分)
★forEach: Railsでいうeachと同じ使い方ができる
★map()
()内に関数を渡すとその関数を全ての要素に対して適用して返してくれる
★filter()
()内に審議値を返関数を与えてtrueだった時の要素だけを返してくれる
★オブジェクトの中身を取り出す
★スプレッド演算子 ...
注意点)コピーを代入するので後から元のデータ中身を変更しても中身はそれを代入した物は変更されない
★DOM
xmlやhtmlの各要素、たとえば<p>とか<img>とかそういった類の要素にアクセスする仕組み
※階層構造をしているものをDOMツリーという
※それぞれの要素をNodeという
★DOMを使ってページ内を操作
テキストの変更: document.body.textContent = 'Hello';
タイトルの変更:document.title = 'Changed!';
★要素の取得方法
例)
id属性へのアクセス
タグ属性へのアクセス
タグ属性へのアクセス(要素がたくさんある)
あるタグ属性の親要素や子要素へのアクセス
要素の属性へのアクセス(下記の例はtitle属性)
要素のCSSへのアクセス
※CSSでー区切りのある要素を変更する際はーを覗いてつながりの文字を大文字始まりに
カスタムデータ属性へのアクセス
divに設定したboxクラスに対してアクセス
※boxクラスを保持したままborder-pinkクラスの要素を追加する。下記は同じ結果になる
あるクラスがあるかどうか確認してあれば外す、なければ追加する式
下記は上記と同じ結果になる
div.classList.toggle('box-pink');
JS側から直接HTMLに要素を追加する
今すでにある要素をコピーする
ある要素を削除する
フォームへのアクセス