青色プログラム。

日々楽しくプログラミングを学ぶ

【JavaScript】四則演算、if文、配列、関数などの基礎

 

前回の続きです。 前回 → 変数と基礎的な出力

今回は、四則演算、加算子,、if文、swich文、for文、while文、配列、関数の基礎です。


 

四則演算

足し算、引き算、掛け算、割り算を指定して計算出来ます。

 

表示結果:6

var a = 3+3;
document.write( a );

/ 割る *カケル
“ ” で囲むと計算されない

 

表示結果:5*5=25

var g = 5*5;
var h = "5*5";
document.write(h + "=" + g);

""で囲むと計算されない


表示結果:1

var abc1 = 10%3;
document.write(abc1);

 

可算子

前置加算子 ++a
変数の値に1を加えたモノを表示

後置加算子 a++
変数の元の値を表示。その後にその元の値に1を加える。

減数子

前置減算子  --a
変数の値から1を引いたモノを表示

後置減算子  a--
変数の元の値を表示。その後にその元の値から1を引く

 

表示結果:4

var a1 = 3;
document.write(++a1);

 

表示結果:210

var a7 = 2;
document.write(a7--);
document.write(a7--);
document.write(a7--);

 

if文
if文とは、「もし○○○なら、×××と処理しなさい」という命令をするプログラミング

条件にマッチした場合 → TRUE(トゥルー)
条件にマッチしなかった場合 → FALSE(フォルス)


If (条件) {処理内容;}
もしAが10より大きい場合は、Aとする。

表示結果:A

Var a = 15;
if( a > 10 ){
document.write( “A” );}

A<b
A<=b
a==b 等しい
A != b 等しくない
A <> b 等しくない

 

論理演算子

&& = and
aとbが共にtrueの時に、処理を実行する

|| = or
aかbの少なくとも1つがtrueの場合に、処理する

! = Not
aがtrueの場合、処理は実行しない

 

もしある文字(a)が10未満であり、
なおかつ3より大きい場合は、aと表示する

var a = 5;
if( a < 10 && a > 3){
document.write( “a” );}

&& は、なおかつという意味

 

もし○○○なら・・・XXXと処理しなさい。

この条件にマッチしない場合(=falseの場合)で、
もし△△△なら・・・□□□と処理しなさい。
→ else if(エルスイフ)を使用

もし○○○なら・・・XXXと処理しなさい。
それ以外の場合(falseの場合)□□□と処理しなさい。
 else(エルス)を使用

 

表示結果:A

var a1 = 2;
if(a1 < 10){
 document.write( "A" );
}

a1は10より小さいので表示されますね

表示結果:B

var b2 = 3;
if (b2 < 1) { 
  document.write("A");
} else if (b2 > 1) { 
  document.write("B");
}

b2が、1より大きいのでAではなくB

 

表示結果:☆

var c1 = 10;
if (c1 < 10) { 
  document.write("★");
} else { 
  document.write("☆");
}

 

If文の中にif文を書いて複雑な文を作ることをネスト
もし○○○なら、かつ、もし×××なら、△△△と処理しなさい

表示結果:A

var a1 = 5;
if(a1 > 0){
 if(a1 < 10){
 document.write( "A" );
 }
}

5は0より大きく、かつ10より低いので

表示結果:C

var a4 = 5;
if(a4 < 3){
 document.write( "A" );
}else if(a4 < 5){
 document.write( "B" );
}else{
 document.write( "C" );
}

 

switch文

もし○○○と×××が等しければ、△△△と処理しなさい

switch (a) { 
  case●●: 処理内容; 
  break;
}

※Ifと同じ意味で書くことが出来る。

 

表示結果:B

var a1 = 1;
switch(a1){
case 0:
  document.write( "A" );
 break;

case 1:
  document.write( "B" );
 break;
}

 

for文(ループ処理)

for(初期値; 条件式; 増減式){
処理内容}

表示結果:1/2/3/4/5/6/7/8/9/10/

for(var i = 1; i <= 10; i++){
 document.write( i );
 document.write( "/" );
}

 iを10になるまで++して出力

表示結果:




for(var star = 1; star < 5; star++){
 document.write( "★" );
 document.write( "<br>" )
}


For文でも、if文同様に、ネストを作ることが可能です。

表示結果:246810

for(var i = 1; i <= 10; i++){
 if(i % 2 == 0){
 document.write( i );
 }
}

% 2 = 0 なので偶数条件で10まで表示ですね 

表示結果:
★★★★★
★★★★★
★★★★★
★★★★★
★★★★★

for(var star1 = 1; star1 <= 5; star1++){
 for(var star2 =1; star2 <= 5; star2++){
  document.write( "★" );
  }
 document.write( "<br>" );
}

 

表示結果:
★☆★☆★☆
★☆★☆★☆
★☆★☆★☆
★☆★☆★☆
★☆★☆★☆

for (var no1 = 0; no1 < 5; no1++) {
  for (var no2 = 0; no2 <= 5; no2++) {
    if (no2 % 2 == 0) {
      document.write("★");
    } else {
      document.write("☆");
    }
  }
  document.write("<br>");
}

 

while文

For文と同様にwhile文でもループ処理が出来ます。

初期値;
While( 条件式) {
  処理内容;
  増減式;
}

 

表示結果:

10
11
~(つづく)
29
30

var a = 10;
while (a <= 30) {
  document.write(a + "<br>");
  a++;
}

 

配列

複数の文字や数字などを1つに格納して管理するもの
箱に入れたれた物をValue(値)と呼び、箱の番号をkey(添え字)と呼ぶ
箱と値を合わせてelement(要素)

 

表示結果:
高木,田中,山本

var myoji = ["高木","田中","山本"];
document.write(myoji);

 

表示結果:
赤白黒

var color =["赤","白","黒"];
document.write(color[0]);
document.write(color[1]);
document.write(color[2]);

最初は0から始まる 

配列の応用
Unshiftを使えば、配列の先頭に新しく要素を”割り込み”で追加
Pushを使えば、配列の末尾に新しく要素を追加
Shiftを使えば、配列の先頭の要素を削除
Popを使えば、配列の末尾の要素を削除
Sliceを使えば、配列の一部を切り取って表示

 

表示結果:
鈴木,田中,高橋,斎藤

var myoji = ["田中", "高橋", "斎藤"];
myoji.unshift("鈴木");
document.write(myoji);

 

関数

予め何らかの処理をまとめておくことで、効率よくプログラミングする手法
関数を使う事で全て書き換えなくても良い、また同じ計算式を何度も書く必要がなくなる。

書き方

function 関数( 引数1, 引数2, 引数3・・・) {
  処理1;
  処理2;
  Return 戻り値
}

 

表示結果:
756
918

function totalPrice(price, tax = 1.08, haiso = 400) {
  return (price + haiso) * tax;
}
document.write(totalPrice(300) + "<br>");
document.write(totalPrice(450) + "<br>");

 

JavaScript基本でした。
理解しながらだと楽しいですね、0からだと少し分かりづらいかもですが一通り学習した後に見返すと良く思い出せて個人的に書いてて良い感触です。