基礎

javascript 基礎

投稿日:

for(let i = 1; i <= 10; i++){
console.log('nogi');
}

for(let i = 1; i <= 10; i++){
console.log('nogi' + i);
}

5 'ではできない時

× console.log('it's me');
〇 console.log("it's me");

 

 

6 四則演算 余りと乗

余り
console.log(10 % 3); 10/3の余り
2乗、3乗は*を使う
console.log(10 ** 3); 10*10*10

 

 

7 定数

const price = 150;
console.log(price * 140);
console.log(price * 160);

constでprice等(なんでもいい)を定義し、あとはそれを使いまわせば楽

 

 

8 変数

let price = 15;
console.log(price * 100);//15*100
console.log(price * 200);//15*200

price = 20;
console.log(price * 100);//20*100
console.log(price * 200);//20*200
  • constでは再代入(price15→20)にはできないが、letは再代入できる

 

ポイント

  • 使い分けとしては、基本はconst
    letでなければならないときにのみletを使う

  • 定数として使えるもの
    〇:英数字、$、_
    ×:-(my-name)、英数字からはじまるもの(3name)

 

9 変数+= *= ++など

足す price = price + 100;→省略:price += 100;

1足す price = price + 1;→省略:price += 1;→price ++;

1引く price = price - 1;→省略:price -= 1;→price --;

かける price = price * 2;→省略:price *= 2;

 

 

10 データ型

文字列 string→'hello' "世界"
数値 number→5  4.3  -20
undefined
null
真偽値 boolean→true false
オブジェクト object→{a:3, b:5}

どの型なのか調べるときはtypeofを使う
console.log(typeof 'hello');
console.log(typeof true);
console.log(typeof undefined);など

 

 

11 数値と文字列

数値同士の計算はok
console.log(5 - 3);
console.log(5 * 3);
console.log(5 / 3);
console.log(5 + 3);

しかし、数値と文字列を計算する場合は-,*,/はいいが+だけ違う結果になる

console.log('5' + 3); これは8ではなく53になる
↓こうならないようにするためには
console.log(parseInt('5' , 10) + 3);//10進法に変換する

&nbsp;

 

12 比較演算子

より大きい price > 1000

以上 price >= 1000 大なりイコールと覚えると便利

イコール price === 1000 比較の時は=が3つ

異なる price !== 1000

 

 

13 if

あなたの点数を40点としましょう。

80点以上のとき合格
60点以上ののときボーダー
60点未満のとき不合格

const score = 40;

if(score >= 80){
console.log('合格');
} else if (score >=60){
console.log('ボーダー');
}else {
console.log('不合格');
}

 

 

14 if短縮形

あなたの点数を90点としましょう。

80点以上のとき合格
80点未満のとき不合格

const score = 90;

if(score >= 80){
console.log('合格');
}else {
console.log('不合格');
}

score >= 80 ? console.log('合格') : console.log('不合格');

※人が書いてるコードを読めるための知識として知っておこう
短縮形はコードが読みづらいので使わないほうがいい

 

 

15 AND,ORのif

短答試験合格かつ論文試験52点以上の時→試験合格

const tscore = path;
const rscore = 52;

if (tscore === 'path'){
if(rscore >= 52){
console.log('試験合格');}}

↓これでもいいが下記のほうがコンパクトでいい

if (tscore  === 'path' && rscore >= 52){ console.log('試験合格'); }}

AND &&

OR ||

~ではない !

 

 

16 switch

===の時は~、===の時は~、===の時と、
大小とかでない場合はif elseではなくswitchが便利

const signal = 'black'

switch (signal){
case 'red':console.log('止まれ');
break;
case 'yellow':console.log('注意');
break;
case 'bule':case 'green':console.log('進め');
break;
//どれにも当てはまらない場合↓
default:console.log('wrong signal');
break;
}

 

 

17 for let と テンプレートリテラル


for(let i = 1; i <= 10; i++){
console.log('hai');
}

ログ:hai,hai,hai~10回


for(let i = 1; i <= 10; i++){
console.log('hai' + i);
}

ログ:hai1,hai2~hai10

変数をiと決めて、1を1~10まで1ずつ増やす
そしてfor文なので10までの間haiをログ表示する

↓テンプレートリテラルを使う

for(let i = 1; i <= 10; i++){
console.log(`hai ${i}`);
}

ログ:hai1,hai2~hai10

ちなみに`hai`だけだとhai,hai~10回

テンプレートリテラルの意味はなに?下記にその答えあり

 

 

18 do while

while{
〇〇処理
}

~までの間〇〇処理を繰り返すが、最初マイナスの場合表示できないので、
do while文を使う

let hp = -50;

do{
console.log(`${hp} ヒットポイント残り`)
hp -= 15;
} while (hp > 0);

仮に上記でテンプレートリテラルを使わずhpとやると最初の-50が表示されるだけになる

また、数値だけではなく

const 〇〇 = "おはよう";

console.log(`みなさん${〇〇}`);

こうすることで定数のところを変えるとログ表示を変えることができる

 

 

19 continueとbreak

1~10を表示する際、3の倍数のとき表示しない

for (let i = 1; i <= 10;i++){
if(i % 3 ===0){
continue;    ←3で割ったとき余りが0になる(=3の倍数のとき)、↓のログ処理にいかず、iに1を足す
}
console.log(i);

結果:1,2,4,5,7,8,10が表示

continueではなく、breakなら結果:1,2が表示
→なぜなら1はログ表示、2も、3のときにやめる

continueはいったんとばす、breakはそこでやめる

 

 

20 function

consolo.log('aaaaaaa');
consolo.log('bbbbbb');
consolo.log('cccc');

間にテキスト等を入れたいときfuncitonを使う

function ads(){
 consolo.log('広告A');
 consolo.log('広告B');
 consolo.log('広告C');
}

このようにしておくと、ads();と入力するだけで上記広告A~Cが表示されるようになる。

constとfunctionの違いは・・
constは定数変数の宣言、funcitonは関数の定義

 

 

21 引数

function minami(mii = 'hoshino'){//仮引数
console.log('------------pan----------');
console.log(`----------${mii}-------`);//テンプレートリテラルを使う
console.log('------------pan---------');
}

minami();
minami('shokupan'); ←実引数

①では()内に何も書いてないので、pan,hoshino,panが表示される。
funcitonでmii=hosihoと仮引数を決めておくことで、
空白時それが書かれるので便利(書いていないとundefinedとなる。

②pan,shokupan,panと表示される

 

 

22 return

function kei(a,b,c){
console.log(a + b +c);
}

functionはkeiのa+b+cをログ表示を含む

①kei(1,2,2); ←1+2+2で5が表示
②kei(5,5,10); ←5+5+10で20が表示

↓さらに①+②の合計も出すときreturnを使う

function skei(a,b,c){
return a+b+c
}

まずfuncitonで関数を定義し、次にconstで変数を。

const goukei = skei(1,2,2) + skei(5,5,10);

console.log(goukei);

ログには5+20の25が表示

 

 

23 無名関数 const ○○ = funciton~return

関数式
const 定数名 = function(仮引数、仮引数・・・){  ←無名関数
処理
処理
return 返り値

呼び出し
定数名(実引数、実引数・・)

const kei = function(a,b,c){
return a+b+c;
};

const goukei = kei(1,2,3) + kei(4,5,6);
console.log(goukei);

 

 

24 アロー関数

上記赤枠のfunction、{}、returnがあればそれを取る

const kei =(a,b,c) => a+b+c;

これ以外は同じ

const double = function(a){
return a*2;
};

↓これをアロー関数で

const double =(a) => a*2;としたいが・・配列が1個の時は()を取ってもいい
const double =a => a*2;

 

 

25 スコープ

function f(){
const x = 1;
console.log(x);
}

f()の関数としてログ表示に変数x1を残す

f();

const x = 2;

console.log(x);

const xは1回しか使えないが、funcitonの中と外で使っているのでok

中で使っているx=1はその中でのみ、よって、上記ログは2が表示される。

 

 

26 const等エラー

index.htmlでconst x =300;とし
jsファイルでconst x =100;

この場合、通常スクリプト読み込みを先にし、そのあとにスクリプトを書くので
js読み込み→index.htmlとなる。
あとで読み込まれたものが反映するのではなくエラーが出る。

よって、jsファイルに書くときはブロックで囲う癖をつける。
ブロックとは・・

{
const x =100;

}

 

 

 

 

 

 

-基礎

Copyright© プログラミング , 2020 All Rights Reserved.