自分の手で未来を創るーlav0

自分のために、誰かのために、今ここにないもの、もっと良くしたいもの、何でも自分の手で創っていく。そして、作ったものを公開していきます

JavaScript

JavaScriptの基礎事項まとめ

今回は、javascriptを書く際にチラ見するための記事。基本事項の部分をまとめています。

 

f:id:kslabo51:20191123223818j:plain

 


Google MapなどのAPIJSONなど使用する機会は多いと思うので一度に見れるといいなと思ってまとめました。自分で覚えることを目的としていますので、羅列です。ご容赦ください。

 

基礎編注意事項

★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 関数名() {

  処理内容;

 }

 

 ★引数の使用の仕方

f:id:kslabo51:20191123225415p:plain

 

★処理結果を値として返したい場合使うのがreturn

 ※関数内でreturnを使用すると、それ以降に処理を記述しても実行されない

f:id:kslabo51:20191123225704p:plain

 

★関数宣言

 function 関数名(仮引数, 仮引数, …) {

   処理;

   処理;

   return 返り値;

 }

 

★呼び出し 

         定数名(実引数, 実引数,...)



★スコープ

   ブロックを分けることで変数を使い分けができる。

   書いたコードはブロックで囲ってスコープを分ける習慣づけをしておくとよい



★関数式(名前がないので無名関数と呼ばれる)

 const 定数名 = function (仮引数, 仮引数, …) {

    処理;

    処理;

    return 返り値;

 };

 

アロー関数の書き方

f:id:kslabo51:20191123225914p:plain

①functionをとる②中身がreurnのみなので1行に③引数1つなのでの()をとる 

 

オブジェクト

★JSでのオブジェクトとは

  データ構造で配列内のそれぞれの値に説明をつけられる

  配列は[](大かっこ)、オブジェクトの場合{}(波かっこ)

  それぞれの要素に名前をつけることができる

   

例)

f:id:kslabo51:20191123230700p:plain

 

★JSでのクラスはその要素の名前を定義、それをもとにオブジェクトを作成

 クラスから作られるオブジェクトのことを、そのクラスのインスタンスとかインスタンスオブジェクトと呼ぶ

 

★オブジェクトの作り方 new

f:id:kslabo51:20191123230910p:plain

 

★メソッドをインスタンス化せずに呼び出すには staticキーワードをメソッドの前に

 クラス名に直接つけて呼び出すことができる

 

★JSのクラスの継承はextends

 ※railsは <

 コンストラクターで要素を追加するときに親クラスの要素は

  super(要素, 要素, …)

 新しい要素はこの下で定義

 

★配列絵の追加と削除

 unshift() 配列の前に追加

 push()  配列の後ろに追加

 shift()  配列の先頭を削除

 pop()  配列の末尾を削除

 plice() 要素の途中に追加したり削除したりする

   第一引数(始まり)第二引数(個数)第三引数以降

  (追加するときは追加分)

 

★forEach: Railsでいうeachと同じ使い方ができる  

f:id:kslabo51:20191123231115p:plain

 

★map()

 ()内に関数を渡すとその関数を全ての要素に対して適用して返してくれる

f:id:kslabo51:20191123231245p:plain

 

★filter()

()内に審議値を返関数を与えてtrueだった時の要素だけを返してくれる      

f:id:kslabo51:20191123231423p:plain

 

★オブジェクトの中身を取り出す

f:id:kslabo51:20191123231550p:plain

 

★スプレッド演算子 ...

注意点)コピーを代入するので後から元のデータ中身を変更しても中身はそれを代入した物は変更されない

 

★DOM

xmlやhtmlの各要素、たとえば<p>とか<img>とかそういった類の要素にアクセスする仕組み

 ※階層構造をしているものをDOMツリーという

 ※それぞれの要素をNodeという

 

★DOMを使ってページ内を操作

 テキストの変更: document.body.textContent = 'Hello';

 タイトルの変更:document.title = 'Changed!';

 

★要素の取得方法

f:id:kslabo51:20191123231921p:plain

 

例)

id属性へのアクセス   

f:id:kslabo51:20191123232529p:plain

タグ属性へのアクセス   

f:id:kslabo51:20191123232903p:plain

タグ属性へのアクセス(要素がたくさんある)

f:id:kslabo51:20191123233040p:plain

あるタグ属性の親要素や子要素へのアクセス

f:id:kslabo51:20191123233316p:plain

要素の属性へのアクセス(下記の例はtitle属性)    

f:id:kslabo51:20191123233433p:plain

要素のCSSへのアクセス  

f:id:kslabo51:20191123233620p:plain

CSSでー区切りのある要素を変更する際はーを覗いてつながりの文字を大文字始まりに

 

カスタムデータ属性へのアクセス  

f:id:kslabo51:20191123233811p:plain

divに設定したboxクラスに対してアクセス

f:id:kslabo51:20191123233926p:plain

※boxクラスを保持したままborder-pinkクラスの要素を追加する。下記は同じ結果になる   

f:id:kslabo51:20191123234042p:plain

あるクラスがあるかどうか確認してあれば外す、なければ追加する式

f:id:kslabo51:20191123234203p:plain

下記は上記と同じ結果になる     

 div.classList.toggle('box-pink');

 

JS側から直接HTMLに要素を追加する

f:id:kslabo51:20191123234417p:plain
今すでにある要素をコピーする  

f:id:kslabo51:20191123234528p:plain

ある要素を削除する  

f:id:kslabo51:20191123234621p:plain

 

フォームへのアクセス

f:id:kslabo51:20191123234813p:plain

 

テキストボックス、ラジオボタンセレクターへのアクセス    

f:id:kslabo51:20191123234949p:plain