Go to Qiita Advent Calendar 2024 Top
LoginSignup
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.

@SIS-CATS

Javascript基本集

Last updated at Posted at 2020-03-25

Javascript基本集

〜自分の学習用です〜

javascriptの基本を振り返ろうと思い作成しました。

##javascriptとは
人間がプログラム言語で記述したソースコード（設計図）をインタープリタと呼ばれるソフトウェアによって、コンピューターが実行できる形式に変換しつつ逐次実行するタイプのプログラム言語(軽量なインタプリタ型)。
あるいは実行時コンパイルされる、第一級関数を備えたプログラミング言語。
成熟した動的プログラミング言語であり、HTML文書に適用するとWebサイトに動的な対話操作を提供出来る。

　　
インタプリタ言語とは、
コードを実行する際に1行ずつ機械語に翻訳していく言語。
コンパイラ言語は始めに全コードを機械語に翻訳した後に一気に実行する言語。
　　

第一級関数とは、
関数を第一級オブジェクトとして扱うことのできる性質またはその関数のこと。
　　

第一級オブジェクトとは、
無名のリテラルとして表現可能な値で、
変数への格納や引数や戻り値として受け渡しが行えるようなオブジェクトのこと。

例）一般的な整数型のリテラル値（0, 99, -1）や論理型の値（true, false）
　　文字列リテラルの値（"abc"）、配列リテラル（[1, 2]）、オブジェクトリテラル{key: 'val'}

##読み込み方法
（１）インラインスクリプト
　　　HTML内にjavascriptを直接読み込む方法

<p>Hello world</p>
<script type="text/javascript">  
//この中にjavascriptを記述していく
</script>

（２）外部スクリプト
　　外部スクリプトを読み込む方法


<head>
    <script type="text/javascript" src="ファイル名">  //読み込むjsファイル名を追記する
    //この中にjavascriptを記述していく
    </script>
  </head>
  <body>
  </body>
</html>

Ruby on Railsではapp/assets/javascriptsディレクトリ以下の
全てのJavaScriptを自動で読み込む様に設定がされている。

##関数を変数へ代入
###JavaScriptの変数宣言方法は3種類。
スクリプトの中で変数を利用するにはまず最初に使用する変数を宣言しなくてはならない。　


var
//変数を宣言し、ある値に初期化することもできる（繰り返し宣言可）
let
//値の再代入はできるが同名変数の再宣言はできない
const
//値の再代入も同名変数の再宣言もできない

JavaScriptの関数や無名関数は第一級関数として扱うことができる。

 
const foo = function() {
   console.log("aaa");//行末のセミコロンは文が終わる場所を示す。
}

//変数を使用して呼び出し（aaaが出力される）　
foo();

ちなみに


// 右側がコメントアウトされる。

/*
挟まれているすべてがコメントアウト。
*/

###引数として関数を渡す場合
sayHello() 関数を greeting() 関数の引数として渡しており、関数を変数として扱っている


function sayHello() {
   return "Hello, ";
}
function greeting(helloMessage, name) {
  console.log(helloMessage() + name);
}
// `sayHello` を `greeting` 関数の引数として渡す
greeting(sayHello, "JavaScript!");

###関数を返す場合
下記では、関数を他の関数から返す必要がある。
関数を返すことができるのは、 JavaScript では関数を値として扱っているためである。


function sayHello() {
   return function() {
      console.log("Hello!");
   }
}

##関数の種類

ES6（ES2015）で追加されたアロー関数や無名関数などが存在する。


// 関数の実行方法

オブジェクト. 関数名();

###従来の関数


function yesnameFunc() {
    alert( yesname.innerHTML );
}

/*
 関数名に引数のカッコを付けて書く。
 ただし、下記の様にイベントリスナから読み込んで実行する場合は引数のカッコを付けない
*/

yesname.addEventListener( 'click', yesnameFunc, false );

###無名関数


const nonameFunc = function() {
    alert( noname.innerHTML );
}

/*
変数に関数を代入。これも同じ動き。
変数名＝関数名になる。
その場限りで（再利用しない）で行われる処理に多用する。
*/

###アロー関数（基本形）


// アロー関数1(Functionをアローに)

const arrow1Func = () => {
    alert( arrow1.innerHTML );
 }

/*
function()　が ()=>　になり、引数のカッコと順番が入れ替わる。
functionとアロー=>は順番が逆になる。
ブロック省略（処理が1行）
処理が1行の時はブロックが省略できる。
*/

###アロー関数2(処理が1行：ブロックを省略)


const arrow2Func = () => alert( arrow2.innerHTML );

/*
引数のカッコ省略（引数が1つ）
さらに引数が1つだと引数のカッコも省略できる。
つまり関数の中の処理が1行のみの場合はブロックの波カッコ{ }を省略可能。
*/

###アロー関数3(引数が1つ：カッコも省略)


const arrow3Func = text => alert(text);

/*
引数が1つだけの時は引数を囲うカッコまで省略可能。
（引数が0個または複数個の場合はカッコを省略不可）
引数付きの関数をイベントリスナで読み込む時には引数無しの無名関数でラップすることも注意
引数ありの関数の実行は下記の様に記述。
*/

//arrow3に表示したいテキスト
const arrow3Text = arrow3.innerHTML;

//関数を実行
オブジェクト.arrow3Func(arrow3Text);

##演算子

演算子 説明 シンボル 例
追加
連結		 2つの数字を加えるか2つの文字列を結合する。 + 6 + 9; Hello + "world!";
減算
乗算
除算		 基本的な数学の計算を実施する。 -
*
/		 9 - 3
8 * 2
9 / 3;
代入 変数に値を割り当てる。 = var myVariable = 'Bob';
等価 2 つの値と型が互いに等しいかどうかを調べ、 true / false (真偽値)の結果を返す。 === var myVariable = 3; myVariable === 4;
否定
非等価		 その後にあるものと論理的に反対値を返す。
例えばtrueをfalseに返す。
等価演算子と一緒に使用されると、否定演算子は2つの値が等しくないかどうかをテストする。		 !
!==		 Notの場合、基本式はtrue
それを否定しているので比較結果はfalse。

var myVariable = 3;
!(myVariable === 3)

「等しくない」は、基本的に同じ結果を異なる構文で与える。
ここでは「myVariableが3とは等しくないことをテストする。
myVariableは3と等しいのでfalseを返す。

var myVariable = 3
myVariable !== 3

但し、「+」は文字列として数字を連携出来るが（例:　１０　＋　"1" = 101 ）、
「-」は連結せずに計算式となる（例: 10 - "1" = 9 ）。

##条件文

条件文は、ある式が true を返すかどうかをテストし、その結果次第でそれぞれのコードを実行するコード構造。条件文のよくある形は if ... else 文。


var s = 5;
var z = 2;
if ( s + z === 7) {
  alert('ご名答！');    
} else {
  alert('ブッブー！');    
}

##ループ文

###①for文


for ([初期化式（変数の初期化）], [条件式（継続する条件）], [加算式（変数の増減）])
  ループ処理文（繰り返す処理の内容）

1.もしあれば、初期化式が実行される。
　この式は通常、1個またはそれ以上のループカウンタを初期化するが、
　この構文ではいかなるレベルの複雑な式を入れることが可能。
　初期化式で変数を宣言することも可能。
2.条件式が評価される。
　条件式の値がtrueの場合、ループ文が実行される。
　条件式の値がfalseの場合、forループは終了する。
　条件式がすべて省略されている場合、条件式は真であると仮定される。
3.処理が実行される。
　複数の文を実行するには、それらの文をグループ化するためにブロック文 ({ ... }) を使用する。
　もしあれば、更新式 加算式が実行される。
4.上記2に制御が戻る。

例）１回目〜１０００回目までを繰り返して表示する処理
１００１回目以降は継続する条件に当てはまらないのでfalseとなり処理が中断される。


for(var i = 1, i <= 1000, i++) {
  document.writeln(i + "回目")
}

###break
１０回繰り返す処理であるが、変数iが7であればループを抜ける。


for (var i = 0; i < 10; i ++) {
    if (i == 7) {
        // 変数『i』が『7』ならループを抜ける
        document.write(i + "finish!<br>");
        break;　
    }
    document.write(i + "<br>");
}


【結果】

0
1
2
3
4
5
6
7 //finish!

###continue
変数iが7なら、『★2』を処理せず『★1』に戻る。


for (var i = 0; i < 10; i ++) {        // ★1
    if (i == 7) {
       
        document.write("skip!<br>");
        continue;
    }
    
    document.write(i + "<br>");// ★2
}


【結果】

0
1
2
3
4
5
6
skip!
8
9

###②do...while 文


do
  ループ処理文（繰り返す処理の内容）
while (条件式);

例）変数iが5未満でなくなる直前まで繰り返しされる。


var i = 0;
do {
  i += 1;
  console.log(i);
} while (i < 5);

###③while 文


while (条件式)
  ループ処理文（繰り返す処理の内容）

例）whileループは、nが3未満の場合繰り返される。


let n = 0;
let x = 0;
while (n < 3) {
  n++;
  x += n;
}

処理内容としては
1 回目の反復後 : n = 1, x = 1
2 回目の反復後 : n = 2, x = 3
3 回目の反復後 : n = 3, x = 6

ひとまずここまで:santa:

0
1
0

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
Sign upLogin
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?