JavaScriptとJavaをちょいちょい比較しつつJavaScriptの特徴をまとめていきます
JavaScriptとJavaは関係しているの？
結論、JavaScriptとJavaは全く別物です！
JavaScriptとは
最大の特徴はWebブラウザ上で動作する
例えばクライアントの画面（HTMLやCSS）やブラウザの機能（ポップアップや戻るボタン）を自由に操ることができ、動きのあるWebページが作成可能
Webブラウザ上で動作し、サーバとの通信が発生しない
ページ内で完結する動作を組むとき 
JavaScript
ページを跨ぐ動作を組むとき Java
というイメージを持つとよいでしょう！
scriptタグを使ってHTMLに埋め込む
scriptタグはheadタグ直下かbodyタグ直下に記述（※どちらでもOK、どちらにもメリットデメリットがある）
HTML同様JavaScript処理も同様に1行ずつ上から順に読み込み&実行していく
この1行ずつ読み込んで実行していく実行方式をインタプリンタという
Javaはインタプリンタ方式ではありません、Javaはファイルごとコンパイルして実行していく
なのでJavaScriptとJavaは処理の方式が違う。
JavaScriptの文法
変数（プリミティブ）
変数の扱いはJavaとはかなり違います！
JavaScriptは動的型付け言語という変数に型を持たない言語です
※変数というデータを入れるための箱はあるが、数値型でも文字型でも論理型でもどんな型でも入れることができる不思議な箱ですね
変数宣言方法
var 変数名 ・・・ 通常の変数宣言
let 変数名 ・・・ ローカル変数（スコープ内のみ有効）の宣言
const 変数名・・・ 読み取り専用定数の宣言（※finalとおなじ）
変数（オブジェクト）
基本的にオブジェクトはJavaとおなじイメージでOK→複数の変数と複数のメソッドをまとめて置ける
JavaScriptでは変数はプロパティと呼ばれる（※Javaではフィールド）
データ型
※変数にはなんでも入る箱ですが、データ自体についはちゃんと型が用意されています
※typeof演算子を用いると変数内のデータ型を確認できる
Number型 ・・・ 整数、小数点、Infinity（無限）etc
String型 ・・・ 文字列
Boolean型 ・・・ true/false
Null型 ・・・ null
Undefined型・・・ undefined（変数宣言時、とりあえず設定される初期値）
Symbol型 ・・・ 識別子
文字リテラル
文字列の囲いは「’ ’」「” ”」どちらでも可
※Javaでは「" "」
コメント
JavaScriptのコメントはJavaとおなじで「//」「/* */」を用いる
スコープ
JavaScriptのスコープは
・グローバルスコープ ・・・ 関数の外（scriptタグ直下）
・ローカルスコープ ・・・ 関数の中
※JavaScriptでもifやforなどの制御構文はあるがスコープとしてみなされない
Javaは
・ifの後の{ }、forの後の{ }などの制御構文内
デバック
ブラウザ上で動作する言語であり、挙動のチェックもブラウザ上
デバックもブラウザで提供されているデバックツールを用いることが一般的
例）Google Chromeのディベロッパーツール
関数（function)
JavaにおけるメソッドはJavaScriptでは関数（function）と呼ばれます
function関数名( 引数 ) { まとめたい処理 }
Javaと違い戻り値に関する定義がありませんが、処理中にreturn文を書けば戻り値が返る
※返すデータが何でも入る箱に入るので型を指定する意味が無いため型を指定しないだけ
※定義された関数は、HTML全体の解析時に先に読み込まれているため定義されている行より上の処理からでも利用できる
関数オブジェクトと無名関数
JavaScriptでは関数をオブジェクトとして扱うことが可能（関数オブジェクト）、つまり変数に入れることができる
var 関数名 = function（ 引数 ） { まとめたい処理 };
※関数の実行時は、関数名（引数）というように引数情報が必要
この右辺で作成されたオブジェクト（関数名なしの関数を右辺で作成している）を名前がない関数、無名関数と言います
//注意//
関数定義されたものは、事前に読み込まれているので初めからあるものとして扱えるが、無名関数は定義された行で生成されるため、この行より上の処理からは利用できません！
JavaScriptにおけるオブジェクトとは
Javaでは変数とメソッドがあるが、
JavaScriptにおけるオブジェクトは全て変数になる。
・変数の中身が問題で、中身が関数オブジェクトであればメソッドとして扱う
・中身が関数オブジェクト以外（データ等）であればプロパティとして扱う（Javaで言うフィールド）
オブジェクトの直下は変数しかない。
そして変数の中身が関数オブジェクトかそれ以外で扱いが変わる
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オブジェクトの直下に構築されていく
ブラウザオブジェクトとDOMツリー
プログラムで操作できるようブラウザの全ての情報をオブジェクト化したものを
ブラウザオブジェクトと言う
具体的にどうやっ使っていくかというと・・・
例えばalertメソッドを使ってアプリケーションからダイアログの表示をさせたい場合はwindow.alert()と書きます
「window.」は省略可能のため、 alert() だけでも大丈夫です
Windowオブジェクトの直下にはブラウザの機能ごとに複数のオブジェクトが存在します
例）
history（履歴）/location（URL)/document（表示情報）/
screen（モニタのサイズ）/navigator（利用状況）
point
DOMツリーはブラウザオブジェクトであるdocumentオブジェクトの直下に構築されている
DOMの操作
Elementは文書内のタグの情報をプロパティとして持つオブジェクトです
このプロパティの値を書き換えるとブラウザ上の情報に即時反映される
例えばinputタグのプロパティ「value」は入力値を管理する変数ですが、このプロパティに文字列を代入する処理を書いておくと実行時にテキストボックスへと入力される
Elementのプロパティを書き換えるためにはまずElementにアクセスする必要がある
アクセスする方法はいくつかありますが、まず覚えていただきたいのがid属性を用いたアクセス法です
id属性はElementを一意に特定するための目印のようなもので、 DOMツリー全体で重複して設定することが許されていません
以下のようにgetElementByIdメソッドで取得したいElementの id属性を指定すると該当のElementオブジェクトを取得できる
document.getElementById( "取得したいElementのid属性" )
※このオブジェクトは参照型変数なので、取得したオブジェクト内の プロパティを書き換える=大元のDOMツリーの内容を書き換えるということになります
※他では例えばname属性を用いたアクセス法などもありますが、 name属性はフォームによるサーバーとの通信で用いるもの、HTML操作はそれ以外の要素（特に初心者はid属性）で行う方がベターと思っておくと混乱せずに 済むかもしれません。
〜コード例〜
<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>
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...
こうした出来事のことをイベントと言い、イベントを検知した際に 実行される処理のことをイベントハンドラと言います
イベントハンドラは以下のようなイベントに対応したプロパティが用意されており、これを検知した後に実行させたい関数オブジェクトを仕込むことで設定完了となる
・ページの読み込みが完了した → onLoad
・フォームが送信された → onSubmit
・ユーザーがボタンの上にマウスを乗せた → onMouseOver
・ユーザーがウィンドウを閉じた → onUnload
・エラーが発生した → onError
JavaScriptの外部ファイル化
JavaScript、HTMLのファイルを分けて作成する
分離することで様々なメリットがあります！
・HTML部隊とJavaScript部隊で並行して開発することができる
・JavaScript処理実行中にエラーが起きた場合JavaScriptファイルだけ確認すれば良い
・管理の意味でもメンテの意味でも開発効率の意味でもいろんな意味でいいことがある