【新人教育 JavaScript】Lesson 01 〜 JavaScript is Simple 〜

#あらすじ
　JavaScript（以下は"JS"で呼ぶ）は主にフロントエンド(お客様のブラウザー)に使われていて、Web技術の礎とも言えるほど重要な技術である。
　しかし、JSの特性などで、「使いにくい」、「分かり辛い」など苦情も時々聞いてきた。それに加えて、jQueryをはじめたJSライブラリーがよく使われて、生のJSを理解せずWeb開発を行い、後ほどブラウザーが変な動きを見せたことも珍しくない。
　さらに、日本では[W3C School](http://www.w3schools.com/)のような実例が充実して、文法も美しい教育サイトが（筆者が知る限り）存在しない。故にJS未経験者への教育は非常に苦労であった。
　余談ですが、W3C Schoolの中国語サイトは二件ある。[一件目](http://www.w3school.com.cn/)は中国語版の本家らしいが、使われている関数・ライブラリが古い。[二件目](http://www.runoob.com/)はパクリらしいが、更新が早く、英語版の本家ほどはないが、かなり新しい情報が入っている。それも彼ノ国の「特殊な事情」であろう(笑)。
　ここで、私たちは初心に帰って、生のJSからもう一度JSを理解しましょう。
　<b>なお、この記事に関するソースコードは[こちら](https://github.com/jerrywdlee/javascript_for_rookies)でダウンロードできます。</b>
#シリーズ一覧
|No.|記事|キーワード|
|:-----------|------------:|------------:|
|Lesson 01|[JavaScript is Simple (本記事)](http://qiita.com/jerrywdlee/items/96efa42b35e9c9f72c91)|JavaScriptとは|
|Lesson 02|[Meet Functions and Variables](http://qiita.com/jerrywdlee/items/eb95d6bad4695dc7ba2a)|関数と変数|
|Lesson 03|未定||
|Extra 01|[jQuery or Not, That is the Question](http://qiita.com/jerrywdlee/items/dde4044b9e4e08c74f45)|jQueryの使用と比較|
#Chapter 01: ~ JavaScriptとは ~
　JavaScriptはNetscape社のBrendan Eich氏により開発されたスクリプト言語である。1996年3月リリースしたブラウザー：Netscape Navigator 2.0で初めて実装された。
　当初は<i><b>LiveScript</i>と呼ばれていたが、その後Sun Microsystems社(現・Oracle社)と業務提携のため、同社開発したプログラミング言語<i><b>Java</i>にちなんで<i><b>JavaScript</i>と改名した。
　しかしJavaScriptの仕様はJavaと全く違い（三菱電機と三菱鉛筆の関係みたい）、このネーミングは後ほど沢山誤解を招いていて、Brendan Eich氏もかなり後悔していた模様。
　JavaScriptの中核的な仕様が<i><b>ECMAScript</i>として標準化され、多くのウェブブラウザで利用できるようになった。故に、正式な文書では、しばしばECMAScriptでJavaScriptのことを指していた。
<b>　覚える必要があるのは、以下の３点だけ：</b>

+ JavaScriptとJavaは別物‼︎
* JavaScriptとJavaは別物‼︎
- JavaScriptとJavaは別物‼︎

#Chapter 02: ~ 1行の"Hello World!" ~
　JavaScriptの文法と使い方は非常に柔軟で自由である（その分、[危険になる時](http://d.hatena.ne.jp/Kango/20150329/1427605145)もあるが）。ここで私たちはたった一行のコードで"Hello World!"を表示する。

```html:javascript_demo.html
<a href="#" onclick="alert('Hello World!');">Click Me!</a>
```
エディターで上記の一行を記入して、"javascript_demo.html"として保存すれば完成です。
IEやChromeなどブラウザーで開いて、リンクをクリックしてみれば、"Hello World!"が表示される。
<img width="80%" alt="スクリーンショット 2016-04-15 15.31.48.png" src="https://qiita-image-store.s3.amazonaws.com/0/87438/a18e158b-1928-135d-d0dc-b0c2173b3ab8.png">

　多分気付いた方はいらっしゃると思うが。JavaScriptの公式拡張子は".js"のはずなのに...
　その理由は、生のJavaScriptはHtmlタグと連携せずに動けないことである。上記の書き方のようにJavaScriptをそのままHtmlのタグ内に嵌め込む書き方の他に、同じHtmlファイル内の別箇所で記載する書き方、".js"ファイルで記載し、Htmlにインポートする書き方３種類が主流である。
　また、Htmlのタグの使い方については、スペースの関係上で割愛致す。本シリーズは新人教育向けの記事であるため、難しいタグは使っていない。おまじないとして扱っても構わないと思う。
　次の章で、残った２つのJavaScriptの記法を全部試そう。
#Chapter 03: ~ JavaScriptの記法 ~
##同じHtmlの別箇所で記載
　第２章が紹介した直接Htmlタグに埋め込む記法は、関数が長くなる場合は読みづらくなることがある。長い関数を扱いたい時は`<script>`タグを利用した方が無難。
###作成して動かしてみよう
まず、以下のソースコードを記入し`script_tag.html`として保存してください。

```html:script_tag.html
<script type="text/javascript">
  function alert_3_times() {
    alert('Hello World!');
    alert('Javascript is Awesome!');
    alert('See You Later ;)');
  }
</script>
<button onclick="alert_3_times();">Alert 3 Times</button>
```
そしてブラウザーで開いて、ボタンをクリックすれば、Alretが三回出現するはず。
<img width="80%" alt="alert_3_time.png" src="https://qiita-image-store.s3.amazonaws.com/0/87438/ea93c9d4-4588-7c71-91b2-77ac4c8ed5e6.png">
###解説
　ここでは、関数(function)という機能が利用された。この機能の詳細は次のLessonで詳しく説明するので、ここは「おまじない」と思ってください。
　この関数の本体は長いため、タグの中に嵌め込むと大変なことになるので、`<script>`タグを使って別の箇所で記入し、関数名だけタグの中に入れていた。
##別ファイルで記載する
　HtmlファイルはあくまでもWeb Pageのフォーマットを記載するものなので、手続きなどをまとめて別のところに記載すれば、より管理しやすくなる。
###作成して動かしてみよう

+ まず`scripts`というフォルダーを作る。
+ エディターを開いて、ソースコードを記入し、`scripts`フォルダー配下で`script.js`として保存する。

```js:script.js
function greet() {
  var your_name = prompt('Plz Input Your Name','Neptunia'); // LoL! You See my hobby ;)
  var confirm_msg = "Dear " + your_name + ", " + "Is JavaScript Awesome?";
  var confirm_window = confirm(confirm_msg);
  if (confirm_window === true) {
    alert('Thank You ' + your_name + ' (^ - ^)');
  }else {
    alert("I'm So Said (; _ ;)");
  }
}
```
+ 新しいファイルを新規作成し、ソースコードを記入し、`js_file_demo.html`と名付けて保存。

```html:js_file_demo.html
<script src="scripts/script.js"></script>
<button onclick="greet();">Hi! Click Me!</button>
```
+ ブラウザーで開いてクリックすると、動く。

<img width="80%" alt="js_file_demo.html" src="https://qiita-image-store.s3.amazonaws.com/0/87438/a110762c-fcd4-487b-85bf-77447f61ca80.png">
###解説
　ここのHtmlファイルの中に、`<script>`タグはあったが、ソースコードは書いていない。`src="scripts/script.js"`という属性を利用して`scripts`フォルダー配下の`script.js`を参照していた。
　もちろんインターネット上に存在する".js"ファイルも参照できます。例えば下記のコードはGoogleのサーバーでjQueryライブラリを参照することの意味。

```html
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.0/jquery.min.js"></script>
```
　また、JavaScriptの記述を".js"にまとめる場合、できればスクリプト専用のフォルダーを一個作って、その中に配置すると管理しやすい。
　なお、先ほど作成した`<script>`タグは相対パスを使っていた。フロントエンド(ブラウザー上)で動くもの、Htmlにしろ、JavaScriptにしろ、相対パスの原点はHtmlファイルである。仮に".js"ファイル内で何かを参照しようとしても、".js"ファイル出発の相対パスは使っちゃダメ。
 
#要点復習
<b>
1. JavaScriptとJavaは全くの別物。
2. JavaScriptは単体で動かない、必ずHtmlと連携すること。
3. JavaScriptはタグの中、htmlの中、そして".js"ファイルの中から呼び出せる。
</b>

お疲れ様でした。
それでは。


<b>[目次へ戻る](http://qiita.com/jerrywdlee/items/96efa42b35e9c9f72c91#%E3%82%B7%E3%83%AA%E3%83%BC%E3%82%BA%E4%B8%80%E8%A6%A7)</b>