0
1

Delete article

Deleted articles cannot be recovered.

Draft of this article would be also deleted.

Are you sure you want to delete this article?

More than 3 years have passed since last update.

JavaScript:コメントと変数の書き方と演算子の使い方とif,switch,for,while文の書き方、配列、関数の書き方

Last updated at Posted at 2019-11-09

#コメントアウト記述方法
 JavaScriptのファイル内にメモを記述できる。
 ①1行のコメント
  //コメント
 ②複数行のコメント
  /*コメント*/

#文字列の出力方法
 ①ブラウザに表示する
  document.write("出力したい文字列");
 ②コンソールに表示
  console.log("出力したい文字列");

  改行したい場合は、” ”の中に<br>を記述する。
  他にもHTMLのタグを” ”の中に記述できる。

#アラートの表示
 ブラウザのポップアップに表示させるメッセージ機能
  alert("表示したいメッセージ");

#確認ダイアログの表示
 アラートと似た機能で、アラートのメッセージに「OK」「キャンセル」を表示させる機能
  confirm("表示したいメッセージ");

#データ型
 ①数値 (整数や小数などの数字)
 ②文字列(アルファベットや文字や数字の集まり)
 ③論理値(True、False)

#変数
 あとで何かしらの値が入る領域のこと
 ●変数の前にはvarを記述する
 ●ABC abc Abc等、大文字と小文字は区別される
 ※変数名の先頭に数字は使えない
 ※「_(アンダーバー)」以外の記号は使えない

 例)
  var name = "名前";
  document.write("name");
  ↓
  実際のブラウザ上には「名前」が表示される。

#四則演算・剰余
 ◆四則演算
  var a = 3+3;
  document.write(a);
  ↓
  6が表示される。
  3-2なら1、3*3なら9、9/3なら3が表示される

  var a = "3+3";
  document.write(a);
  ↓
  " "で囲むと、3+3がそのまま表示される
 
 ◆剰余
  var a = 10%3;
  document.write(a);
  ↓
  10/3の余りである1が表示される。

#加算子と減算子;
####加算子(インクリメント)
   ◆前置加算子
    変数の前に「++」と記述すると、変数の値に1を加えたものを表示
    例)
     var a = 10;
     document.write(++a);
     ↓
     11が表示される。

   ◆後置加算子
    変数の後ろに「++」と記述すると、変数の元の値を表示。その後に元の値に1を加える。
    例)
     var a = 10;
     document.write(a++);
     document.write("<br>");
     document.write(a++);
     document.write("<br>");
     document.write(a++);
     ↓
     10
     11
     12が表示される。

####減算子(デクリメント)
   ◆前置減算子
    変数の前に「--」と記述すると、変数の値に1を引いたものを表示
    例)
     var a = 10;
     document.write(--a);
     ↓
     9が表示される。

   ◆後置加減算子
    変数の後ろに「--」と記述すると、変数の元の値を表示。その後に元の値から1を引く。
    例)
     var a = 10;
     document.write(a--);
     document.write("<br>");
     document.write(a--);
     document.write("<br>");
     document.write(a--);
     ↓
     10
     9
     8が表示される。

#if文
  if(条件){処理内容;}
  もし〇〇なら、✕✕と処理しなさいという命令をするプログラミング
    例えば、新しくSNSのIDを登録する場合、
    そのIDがすでに他者に使われているIDであれば、
    「このIDはすでに使用されているので別のIDを登録してください」と表示される。
    「もし〇〇なら」の条件にマッチした場合→TRUE**
    「もし〇〇なら」の条件にマッチしなかった場合→
FALSE**

   例)もし、変数aの値が10より大きい場合は、Aと表示する
     var a = 15;
     if(a > 10) {
      document.write("A");
     }
     ↓
     Aと表示される。

####比較演算子

                 
比較演算 解説
a > b aは、bより大きい
a < b aは、bより小さい(未満)
a >= b aは、b以上
a <= b aは、b以下
a == b aとbは等しい(等価演算子)
a != b aとbは等しくない
a <> b aとbは等しくない

   例)もし、変数aの値が10と等しい場合は、Aと表示する
     var a = 10;
     if(a == 10) {
      document.write("A");
     }
     ↓
     Aと表示される。

   例)もし、変数aの値が10と等しい場合は、表示「違います!」とアラートを表示する
     var a = 5;
     if(a != 10) {
      alert("違います");
     }
     ↓
     「違います!」というアラートが表示される。

####論理演算子

     
論理演算子 意味 解説
a && b and aとbがともにTRUEのときに処理を実行する  
a || b or aかbの少なくとも1つがTRUEの場合に処理を実行する 
a ! b Not aがTRUEの場合処理は実行しない

   例)もし、変数aの値が10未満で、なおかつ3より大きい場合は、Aと表示する
     var a = 5;
     if(a < 10 && a > 3) {
      document.write("A");
     }
     ↓
     Aと表示される。

   例)もし、変数aの値が5以下の場合、もしくは10以上の場合は、Aと表示する
     var a = 11;
     if(a <= 5 || a >= 10) {
      document.write("A");
     }
     ↓
     Aと表示される。

####else if文
  if(条件1){処理内容;}
   else if(条件2){処理内容;}
  もし〇〇なら、✕✕と処理しなさい
  この条件にマッチしない場合で、
  もし△△なら、□□と処理しなさいという命令をするプログラミング

   例)もし、変数aの値が10より大きい場合は、Aと表示する
     そうでない場合で、変数aが10未満の場合は、Bと表示する
     var a = 5;
     if(a > 10) {
      document.write("A");
     } else if(a < 10) {
        document.write("B");
       }
     ↓
     Bと表示される。

####else 文
  if(条件1){処理内容;}
   else {処理内容;}
  もし〇〇なら、✕✕と処理しなさい
  それ以外(=FALSE)の場合、□□と処理しなさいという命令をするプログラミング

   例)もし、変数aの値が10より大きい場合は、Aと表示する
     そうでない場合は、Bと表示する
     var a = 5;
     if(a > 10) {
      document.write("A");
     } else {
        document.write("B");
       }
     ↓
     Bと表示される。

#swich文
   var a = "A";
switch(a){
     case "✕✕":
      document.write("△△");
     break;
      case "◻◻":
      document.write("●●");
     break;
     default:
      document.write("■■");
   }
   もし、〇〇(上記ではaのこと)が✕✕の場合、△△と処理する
   もしくは、〇〇が◻◻の場合、●●と処理する
   それ以外の場合は、■■と処理する
   というような命令をするプログラミング

#for文
   for(初期値; 条件式; 増減式){
    処理内容
   }
   繰り返し(ループ)処理をするプログラミング
   例)
    for(var i = 0; i < 10; i++){
     document.write(i);
    }
    ↓
    0123456789と表示される。

   例)1〜10までループを回し、iが偶数の場合のみ、iを出力
    for(var i = 1; i <= 10; i++){
     if(i % 2 == 0){
     document.write(i + "
");
     }
    }
    ↓
    2
    4
    6
    8
    10

#while文
   初期値;
   while(条件式){
   処理内容; 増減式;
   }
   繰り返し(ループ)処理をするプログラミング
   例)
    var i = 0;
while(i < 3) {
    document.write(i);
    i++;
    }
    ↓
    012と表示される。

#配列
   配列とは、複数の数字や文字列を1つに格納して管理するもの
   var a1 = "A";
   var a2 = "B";
   var a3 = "C";

   配列として一括で管理できる
   var a = ["A","B","C"];

   ●格納された文字列や数値を**value(値)という。
   ●文字列や数値を格納している場所の数字を
key(添え字)という。
   ※番号は[0]から始まる
   ●格納している場所と、格納されている値をあわせて
element(要素)**という。

   配列には以下の2通りの書き方がある。
   ①
    var a = ["A","B","C"];
     document.write(a);
   ②
    var a = new Array("A","B","C");
     document.write(a);
   どちらも意味は同じ。

   ◆要素の削除(delete)
    var a = ["A","B","C"];
delete a[0];
     document.write(a[0]);
    ↓
    undefindと表示される。

   ◆連想配列
    添字に名前をつけることができる
    var a = {"Aの箱":"A","Bの箱":"B","Cの箱":"C"};
     document.write(a["Aの箱"]);
     またはdocument.write(a.A);
   

####要素の追加・削除
   ◆先頭に要素を追加(unshift)
   unshiftで、配列の先頭に、新しく要素を割り込ませる事ができる。
   例)
    var a = ["A","B","C"];
a.unshift["T"];
    document.write(a);
    ↓
    T,A,B,Cと表示される。

   ◆末尾に要素を追加(push)
   unshiftで、配列の先頭に、新しく要素を割り込ませる事ができる。
   例)
    var a = ["A","B","C"];
a.push["Z"];
    document.write(a);
    ↓
    A,B,C,Zと表示される。

   ◆先頭の要素を削除(shift)
   shiftで、配列の先頭の要素を削除する事ができる。
   例)
    var a = ["A","B","C"];
a.shift();
    document.write(a);
    ↓
    B,Cと表示される。

   ◆末尾の要素を削除(pop)
   popで、配列の末尾の要素を削除する事ができる。
   例)
    var a = ["A","B","C"];
a.pop();
    document.write(a);
    ↓
    A,Bと表示される。

####切り出し(slice)
   sliceを使って、配列の一部を切り取って表示する事ができる。
   例)
    var a = ["A","B","C"];
     document.write(a.slice(1,2));
    ↓
    Bと表示される。※[1],[2]の間の要素を切り取るため、[1]であるBが表示される

#関数の書き方
   ①function 関数名(引数1,引数2,引数3・・・){
     処理1;
     処理2;
     
     return 戻り値
    }

   ②var 関数名 = function(引数1,引数2,引数3・・・){
     処理1;
     処理2;
     
     return 戻り値
    }

0
1
1

Register as a new user and use Qiita more conveniently

  1. You get articles that match your needs
  2. You can efficiently read back useful information
  3. You can use dark theme
What you can do with signing up
0
1

Delete article

Deleted articles cannot be recovered.

Draft of this article would be also deleted.

Are you sure you want to delete this article?