Webエンジニア目指して#16

どうも勤務先の改善案件でWebの知識を活かしたらウケたマンです。

既存のWebツールをインラインフレームに入れてカテゴリ分けの見出しをつけたくらいですが...

ボタンを押したら10秒間隔でページ更新するようなJSを組みましたが、これが結構勉強になりましたね。

さてやっていきましょう。ProgateのJavaScript IIです。期間が空いてるって？鬼滅の刃見てました...

例の如くC言語で基礎っぽいのはやってるんで学んだとこだけ書きます

配列のlength

配列名.length　で配列に格納された数を扱う。

オブジェクト

sample={name:AAA,rank:1} でオブジェクトを定義し、

sample.nameやsample.rankで要素を扱える。

要素は「name:AAA」の部分。

「name」をプロパティ、

「AAA」を値という。

配列と複合した使い方は下のような感じ。

sample=[

  {name:AAA,rank:1},

  {name.AA,rank:2}

];

console.log(sample[1].name);

関数

const sample=function(){

  console.log("aiueo");

  console.log("12345");

}

で定義し、

sample();

で呼び出す。

アロー関数

const sample = ()=>{ };

で関数を定義できる。便利。

何がアローって　=>　この部分ね。イカ速

引数

ひきすう　です。

ここでは関数の()の中身のことです。

下のような感じで、データの引き渡しをします。

const sample=(name)=>{

console.log(`私は${name}です`);

};

sample("L");

このように定義でリンクさせて、実行文で引き渡します。

アローだとより一層データ渡してる感じが出ますね

下記のように、()の中をカンマで区切ることで複数の引数を使えます。

const sample=(day,time,action)=>{

console.log(`${day}は${time}に${action}をしました。`);

};

sample("2019/12/25","PM8:00","一人でスマブラ");

戻り値

例がないと話が進まないので先に構文書きます

const sample=(num1,num2)=>{

return num1+num2;

};

const sum = sample(3,7);

上の文の場合、実行結果3+7より、10が戻り値です。

その戻り値は定数sampleへ代入され、実行結果を値として扱えるようになります。

つまり上記の定数sumは戻り値である10が代入されます。

急に理系っぽいのきましたね。ちなみにreturnのあとは()で括らなくていいです。計算に応じて四則演算などで使う感じですかね？

比較演算子をreturnすると戻り値はtrue/falseになるみたいです。

また、returnを使うと処理終了となり以降に記述された文は実行されないとか。

スコープ

Sassでやりましたねこれ

関数内で宣言した定数や変数はその関数の中でしか使えないやつです。

と思いきや、if文などの{}で括られるものはスコープを作るみたいです。

デフォルト値とかに利用できそうですね

こんなもんです。戻り値がネックですね

ではでは。