JavaScriptとJavaくらべてみました

JavaScriptとJavaをちょいちょい比較しつつJavaScriptの特徴をまとめていきます

###JavaScriptとJavaは関係しているの？
<font color="Red">**結論、JavaScriptとJavaは全く別物です！**</font>
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/543815/6b337280-bfb2-273b-5721-38b31f7d2743.png)
###JavaScriptとは

![3.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/543815/cb794cca-bc2f-1693-9934-dcf5dd3898ca.png)
:point_right:最大の特徴はWebブラウザ上で動作する
　例えばクライアントの画面（HTMLやCSS）やブラウザの機能（ポップアップや戻るボタン）を自由に操ることができ、動きのあるWebページが作成可能

:point_right:Webブラウザ上で動作し、サーバとの通信が発生しない
　ページ内で完結する動作を組むとき :arrow_right: JavaScript
　ページを跨ぐ動作を組むとき :arrow_right: Java
　というイメージを持つとよいでしょう！

:point_right:scriptタグを使ってHTMLに埋め込む
　scriptタグはheadタグ直下かbodyタグ直下に記述（※どちらでもOK、どちらにもメリットデメリットがある）
　HTML同様JavaScript処理も同様に1行ずつ上から順に読み込み&実行していく
　:robot:この1行ずつ読み込んで実行していく実行方式を**インタプリンタ**という
　:robot:Javaはインタプリンタ方式ではありません、Javaはファイルごとコンパイルして実行していく
　なのでJavaScriptとJavaは処理の方式が違う。


###JavaScriptの文法

<JavaScript文法(データ）>
![4.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/543815/70d56db1-29fc-72d0-5f08-240a03cd8609.png)
:writing_hand_tone1:変数（プリミティブ）
<font color="Red">変数の扱いはJavaとはかなり違います！</font>
JavaScriptは動的型付け言語という変数に型を持たない言語です
※変数というデータを入れるための箱はあるが、数値型でも文字型でも論理型でも**どんな型でも入れることができる不思議な箱**ですね:santa::gift:

変数宣言方法
var 変数名　・・・　通常の変数宣言
let 変数名　・・・　ローカル変数（スコープ内のみ有効）の宣言
const 変数名・・・　読み取り専用定数の宣言（※[final](https://qiita.com/ryo2132/items/eb9a63f2b107c1d6b25c)とおなじ）

:writing_hand_tone1:変数（オブジェクト）
基本的にオブジェクトはJavaとおなじイメージでOK→複数の変数と複数のメソッドをまとめて置ける

JavaScriptでは変数は**プロパティ**と呼ばれる（※Javaではフィールド）

:writing_hand_tone1:データ型
※変数にはなんでも入る箱ですが、データ自体についはちゃんと型が用意されています
※typeof演算子を用いると変数内のデータ型を確認できる

Number型　・・・　整数、小数点、Infinity（無限）etc
String型　　・・・　文字列
Boolean型　・・・　true/false
Null型　　　・・・　null
Undefined型・・・　undefined（変数宣言時、とりあえず設定される初期値）
Symbol型　・・・　識別子

:writing_hand_tone1:文字リテラル
文字列の囲いは「’ ’」「” ”」どちらでも可
※Javaでは「" "」

:writing_hand_tone1:コメント
JavaScriptのコメントはJavaとおなじで「//」「/* */」を用いる

:writing_hand_tone1:スコープ
JavaScriptのスコープは
　・グローバルスコープ　・・・　関数の外（scriptタグ直下）
　・ローカルスコープ　　・・・　関数の中
　※JavaScriptでもifやforなどの制御構文はあるがスコープとしてみなされない

Javaは
　・ifの後の{ }、forの後の{ }などの制御構文内

:writing_hand_tone1:デバック
ブラウザ上で動作する言語であり、挙動のチェックもブラウザ上
デバックもブラウザで提供されているデバックツールを用いることが一般的
例）Google　Chromeのディベロッパーツール

:writing_hand_tone1:関数（function)
JavaにおけるメソッドはJavaScriptでは**関数（function）**と呼ばれます
　　<font color="Blue">function関数名( 引数 ) { まとめたい処理 }</font>
Javaと違い戻り値に関する定義がありませんが、処理中にreturn文を書けば戻り値が返る
※返すデータが何でも入る箱に入るので型を指定する意味が無いため型を指定しないだけ

※定義された関数は、HTML全体の解析時に**先に読み込まれている**ため定義されている行より上の処理からでも利用できる

:writing_hand_tone1:関数オブジェクトと無名関数
JavaScriptでは**関数をオブジェクトとして扱うことが可能（関数オブジェクト）、つまり変数に入れることができる**
　　<font color="Blue">var 関数名 = function（ 引数 ） { まとめたい処理 };
　　※関数の実行時は、関数名（引数）というように引数情報が必要</font>
この右辺で作成されたオブジェクト（関数名なしの関数を右辺で作成している）を名前がない関数、**無名関数**と言います

<font color="Red">**//注意//**</font>
関数定義されたものは、事前に読み込まれているので初めからあるものとして扱えるが、無名関数は定義された行で生成されるため、この行より上の処理からは利用できません！

#####JavaScriptにおけるオブジェクトとは
Javaでは変数とメソッドがあるが、
JavaScriptにおけるオブジェクトは全て変数になる。
・変数の中身が問題で、中身が関数オブジェクトであればメソッドとして扱う
・中身が関数オブジェクト以外（データ等）であればプロパティとして扱う（Javaで言うフィールド）
オブジェクトの直下は変数しかない。
そして変数の中身が関数オブジェクトかそれ以外で扱いが変わる
![オブジェクト.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/543815/5216f96f-5454-843f-dae3-11f6cd861614.png)

###DOM（Document Object model）

**DOM/DOMツリー**

・HTMLやXMLといったWebページを構成する文書情報をアプリケーションから操作するために用意されたAPIをDOMと言う
※JSというプログラムからHTMLという画面情報をいじくるための橋渡しとなるツール、DOMを介して画面情報をいじくれる

DOMツリー・・・HTMLの情報をオブジェクトとして表現したもの
　　　　　　ツリーと言うのは階層構造をもった樹形図のようなもの
　　　　　　一つ一つの要素を**Node（ノード）**と呼ぶ
　　　　　　Nodeの中でも文書内のタグ情報と連動しているものは**Element（エレメント）**といい、
　　　　　　JavaScriptから操作することになるのは基本的に**Element（エレメント）**になります

※Elementの階層構造は文書のタグ構成と一致しており、htmlを頂点としてその下にheadとbody、headの下にはtitleなど、bodyの下にh1やformなどで構成されます

・ブラウザ全ての機能と情報をアプリケーションから操作可能とするオブジェクトを**ブラウザオブジェクト**と言う
　DOMツリーはその中でも画面表示情報を管理する**document**オブジェクトの直下に構築されていく

![オブジェクト (1).png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/543815/ca7c9e0f-53a8-93d5-a110-390bb2863fc1.png)

###ブラウザオブジェクトとDOMツリー
プログラムで操作できるようブラウザの全ての情報をオブジェクト化したものを
<font color="Red">ブラウザオブジェクト</font>と言う
![オブジェクト (2).png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/543815/d4a0a396-def8-31e9-92fe-cb9f7ec339d4.png)
具体的にどうやっ使っていくかというと・・・

例えば<font color="Blue">alertメソッドを使って</font>アプリケーションからダイアログの表示をさせたい場合は<font color="Blue">window.alert()</font>と書きます
「window.」は省略可能のため、 <font color="Blue">alert()</font> だけでも大丈夫です

**Windowオブジェクトの直下にはブラウザの機能ごとに複数のオブジェクトが存在します**
例）
<font color="Blue">history（履歴）/location（URL)/document（表示情報）/
screen（モニタのサイズ）/navigator（利用状況）</font>

:point_right:point
**DOMツリーはブラウザオブジェクトである<font color="Red">documentオブジェクトの直下に構築</font>されている**

###DOMの操作

:writing_hand:Elementは**文書内のタグの情報をプロパティとして持つオブジェクト**です
　**このプロパティの値を書き換えるとブラウザ上の情報に即時反映**される
　例えばinputタグのプロパティ「value」は入力値を管理する変数ですが、このプロパティに文字列を代入する処理を書いておくと実行時にテキストボックスへと入力される

:writing_hand:Elementのプロパティを書き換えるためにはまずElementにアクセスする必要がある
　アクセスする方法はいくつかありますが、まず覚えていただきたいのが**id属性を用いたアクセス法**です
　id属性は**Elementを一意に特定するための目印**のようなもので、 DOMツリー全体で重複して設定することが許されていません

:arrow_double_down:以下のように**getElementByIdメソッド**で取得したいElementの id属性を指定すると該当のElementオブジェクトを取得できる

```javaScript.js
document.getElementById( "取得したいElementのid属性" )
```
※このオブジェクトは参照型変数なので、取得したオブジェクト内の プロパティを書き換える=大元のDOMツリーの内容を書き換えるということになります

※他では例えばname属性を用いたアクセス法などもありますが、 **name属性はフォームによるサーバーとの通信で用いるもの**、HTML操作はそれ以外の要素（特に初心者はid属性）で行う方がベターと思っておくと混乱せずに 済むかもしれません。


〜コード例〜

```HTML.html
<p>ユーザーID：                                                                                                    
  <input type="text" name="USER_NAME" maxlength="20" id="USER_ID">                                  
</p> 
<p>パスワード：                                                                                        
　<input type="password" name="PASSWORD" maxlength="20" id="PASSWORD_ID">
</p>
```

```JavaScript.js
var elmSubmit = document.getElementById("ID_SUBMIT");
elmSubmit.onclick = function(){
  var elmUserId   = document.getElementById("USER_ID");
  var elmPassword = document.getElementById("PASSWORD_ID");
  var canSubmit = true;
  if(elmUserId.value == "" || elmPassword.value == ""){
    alert("入力漏れの項目があります。");
    canSubmit = false;
  }
  return canSubmit;
}
```
###イベントハンドラ
ブラウザ上では以下のような様々な出来事が起きます
・ページの読み込みが完了した
・フォームを送信しようとした
・ユーザーがボタンの上にマウスを乗せた
・ユーザーがウィンドウを閉じた
・エラーが発生した
etc...
:writing_hand:こうした出来事のことをイベントと言い、**イベント**を検知した際に 実行される処理のことを**イベントハンドラ**と言います

:writing_hand:イベントハンドラは以下のようなイベントに対応したプロパティが用意されており、これを検知した後に実行させたい関数オブジェクトを仕込むことで設定完了となる

・ページの読み込みが完了した → onLoad
・フォームが送信された → onSubmit
・ユーザーがボタンの上にマウスを乗せた → onMouseOver
・ユーザーがウィンドウを閉じた → onUnload
・エラーが発生した → onError
![オブジェクト (3).png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/543815/463df63b-3f6d-abcd-e7ef-a8c39f0ac9a1.png)

###JavaScriptの外部ファイル化
JavaScript、HTMLのファイルを分けて作成する

:point_right:分離することで様々なメリットがあります！
・HTML部隊とJavaScript部隊で並行して開発することができる
・JavaScript処理実行中にエラーが起きた場合JavaScriptファイルだけ確認すれば良い
・管理の意味でもメンテの意味でも開発効率の意味でもいろんな意味でいいことがある