JavaScript/Syntax｜JavaScript/BOM｜JavaScript/DOM｜JavaScript/Sample
JavaScriptとは、SunMicrosystems社とNetscapeCommunications社が開発したスクリプト言語です（Sunが開発したJavaという言語とは別物です）。
HTMLが文書の構造、CSSが文書の表現を定義するものだとすれば、Java ScriptはWebページの「振る舞い」を定義するものです。主要なWebブラウザ上で動作することはもちろん、ブラウザ以外のソフトウェアにも簡易な制御プログラムの記述用言語として移植されています。標準仕様は、ヨーロッパの標準化団体ECMAが発行した ECMAScript です。
世に登場したのは1995年ですが、Ajax（Asynchronous JavaScript ＋ XML）を活用したGoogleマップの登場（2005年）を機に、高機能なウェブアプリケーション開発言語として注目を集め、さらにHTMLとCSSに次ぐ第三の標準テクノロジー DOM（Document Object Model）が注目されるようになって、DOM-APIを利用する言語としての JavaScript にも注目が集まるようになりました。また JQuery のような優れたライブラリーが登場し、簡単に美しいインターフェースが実現できるようになったことも、その追い風になりました。2015 年には本格的な大規模更新が施された ECMAScript 6 (ES6) が策定され、2020年現在 10th Edition。
言語を学ぶということは「新たな思考回路を身につける」ということです。AI（先端的なIT技術）との協働が必須となる時代、コンピュータの思考回路を理解してそれを使いこなす技術が求められています。時間はかかると思いますが、プログラミング言語を学ぶきっかけとして JavaScript を選択することは、最も賢明であると考えます。
JavaScript を利用するには、以下の３つの方法があります。
<input type="button" onClick="alert('Hello World!');" value="hello"><script>
function 関数名（引数）{ 処理 }
function 関数名（引数）{ 処理 }
：
</script><script src="script.js" defer></script>
function 関数名（引数）{ 処理 }
function 関数名（引数）{ 処理 }
：JavaScriptファイル は、HTMLやCSSと同様にプレーンなテキストファイルです。したがって、HTML,・CSSと同様に、テキストエディタさえあれば、プログラムの開発が可能です。
JavaScript は、Webページが持つ機能のひとつとして、ブラウザ上で動作しますが、その文法に問題があったり、ロジックの問題があっても、ブラウザ上ではその機能が無視されるだけで、エラーメッセージが表面に現れることはありません（最悪の場合はブラウザがフリーズします）。そこで、スクリプトを開発する場合、それらを明示的に知るために、ブラウザの「コンソール」を使います。
以下、ブラウザでコンソールを表示する方法を紹介します。
<script>
console.log("Hello World!");
</script>
JavaScriptのプログラムの多くは、何らかのアクションに対するリアクションとして記述されます。簡単な例で言うと「ボタンをクリックしたら要素の色が変わる」といったものです。JavaScriptの事例を調べていると、イベントとイベントハンドラという用語が頻繁に登場します。重要なキーワードですので確認して下さい。
JavaScript はオブジェクト指向言語（Object-Oriented Programming）であると言われます。オブジェクトとは簡単に言えば「モノ」のことで、身近にある文具、家電、車などと同様にイメージして構いません。
オブジェクト指向プログラミングでは、それを「プロパティー」と「メソッド」の集合体と考えてコードを記述します。
例えば「車」を例にとると、それは以下のような「データ」と「処理機能」を持ったものであると説明することができます。参考 w3schools.com
従来の「手続き型プログラミング」では、「データ（変数またはプロパティ）」と「処理（関数またはメソッド）」はバラバラに捉えられていて、プログラマーは、処理を担う「関数（引数＞処理＞戻り値）」を、いかに独立性の高いものに仕立てるか・・ということに関心を集中させていましたが、オブジェクト指向プログラミングでは、「データ」と「処理」をセットにした「オブジェクト」を構成単位と見なすとともに「オブジェクトのデータは、オブジェクトが持つメソッドによって処理される」と考えることで、プログラマーは、それがいかに単品としてうまく動くかということに専念できるようになりました。これは、画期的な意識改革です。
実は、私たち「生き物」も、またそれを構成する単位である「細胞」も、すべて同様に内部に「データ」と「処理システム」を持つオブジェクトです。データはデータ、処理は処理と、バラバラなものを寄せ集めても、大きなシステムがうまく動く保証はありません。しかし「きちんと動く小さなモノを集めて少し大きなモノを作り、それらを集めてさらに大きなモノを作る」という発想で仕事をすれば、物事はうまくいきます。実際に「車」というオブジェクトは、ネジのようなサイズの小さな部品から、少しづつ大きなパーツの塊ができ、最終的には、いくつかの大きなパーツの組み合わせとして出来上がります。個々のパーツは、それぞれの段階で、きちんと動くようにできているので、最後の組み立てもシンプルな作業になります。
BOM（Browser Object Model）と DOM（Document Object Model ）という概念は、Web制作を理解する上で、重要なオブジェクトの概念です。
JavaScriptは、Browser Object のひとつである Window オブジェクトを上位概念として、その中に表示される HTML文書を Document Object として扱います。さらに言えば、Document Object の中にある個々の要素（例えば h1 要素）もオブジェクトです。JavaScript プログラミングは、それらが持つ様々な「プロパティー」と「メソッド」を使って、システムを構築する作業であると言えます。
プロパティーとメソッドの違いは、語の最後に ( ) の有無で判断できます（メソッドは関数なので ( ) が付きます）。
オブジェクトとプロパティー、またオブジェクトとメソッドは [ . （ドット）] で接続します。
以下、プロパティーとメソッドの例です。
スクリプトが＜head＞内にあると、ページのコンテンツよりも先にスクリプトが読み込まれて即実行されます。関数を定義するだけならいいのですが、ページの中に記述された要素に対して実際に操作を施す場合、このままだと、ページ読み込み完了（DOM構築）前にスクリプトが実行されて、思うように処理が実現されない・・という問題が起こります。
そこで、この場合の解決方法としては、＜/body＞タグ（終了タグ）の直前に＜script＞を書く・・という方法が多くの事例で見られます。こうすれば、スクリプトの実行前にすべての要素が読み込まれている（DOMが構築済みとなる）ので、ターゲットを掴み損なうことはありません。
<html>
：
<body>
：
<script>
// Do Something
</script>
</body>
</html>
プログラミングの基本的な感覚からすると、JavaScript は外部ファイルとして独立させて ＜head＞内で読み込むのがベストです。ただこの場合、先と同様、DOMの構築前にスクリプトが実行されてしまうという問題が生じます。
そこで、その回避策としてよく用いられるのが、window.onload イベントハンドラです。これを用いると、「ページの読み込み完了」というイベント通知を待ってから、スクリプトが実行されるので、.js 外部ファイルを安心して <head>で先読みさせることが可能になります。
window.onload = function() {
[ ここに、DOM構築直後に実行すべきプログラムを書く ]
}
HTML5の新しい仕様として、JavaScriptfの外部ファイルを読み込む方法として、 async属性 と defer属性 が追加されました。これに対応したブラウザの利用が前提であれば、DOM構築後にJSが確実に実行されるようにするは、defer属性をつければよい ということになります。
<script src="script.js"></script>
<script src="script.js" async></script>
<script src="script.js" defer></script>