SUNABA KOZA ９日目 ゼロからのJS基礎構文 前編
こんにちは、コイアイです。
この note は 7月11日 の授業ノートです。
またまた遅くなってスミマセン...。
長くなってしまったので前後編にわけます。
よしなに。
JSとは
JavaScript とはブラウザ向けのスクリプト言語です。
スクリプト言語とは何なんでしょうか？
ググってみると、「簡易であることを目的に作られた言語」だとか、「スクリプト言語でかかれたものの多くはインタープリタ型」だとか 情報がフワッとしてるんですよね...。
いまいち理解が出来ていないので、分かったら追記したいと思いマス...。
また JavaScript はインタープリタ型の言語でもあります。インタープリタとは”翻訳”の意味で、その名の通り 書かれたコードを逐一解析してコンピュータに理解できるように翻訳します。 コード書いてそのまま実行できる手軽さが魅力です。
これに対してコンパイル型の言語というものが在ります。
googleでcompileの意味を調べると
produce (a list or book) by assembling information collected from other sources.
と出てきます。
どうやら沢山の情報を一か所に集めるというニュアンスがあるようで、
この名の通り コンパイル型では一括で解析が行われます。
その為インタプリタ型の言語と比べて軽いのが特徴です。
予備知識
ES5 ES6
標準化団体ECMA international によって標準化された JavaScript の ECMAScript というものがあります。
これの最新版が2015年6月に採択された ECMAScript 2015 であり版数から ECMAScript 6 通称ES6と呼ばれています。
しかし、この note では jQuery を使う関係から 第五版の ES5 についての解説が主になります、よろしくお願いします。
文 (Statement)
JSのコードは一つ以上の 文 で構成されています。プログラミングで言う 文 とは 手続き (procedure) を表すことらしいです。
はい、また未知の単語が出てきましたね...。
procedure は ルーチン と同じニュアンスらしく、プログラミングでいうルーチンは 意味や内容がまとまっている作業の事を指すそうです。
つまり 文 とは意味や内容がまとまっている作業の事を指します。
具体例として
window.alert("Hello World!");までが一文となります。これだとわかりやすいですね。
では、JSの具体的な 文 のルールを見ていきましょう。
１：文末に ; （セミコロン）をつける
セミコロンは無くても動くのですが、文の区切りを明確にするためにも必ず書くようにしましょう。
２：文の途中で空白や改行を含められる
コードの視認性を高めるために改行することができます。
しかし、下のように単語の途中で改行することは認められていません。
wind
ow.alert("Hello World!");3:大文字 小文字が区別される
window.Alert("Hello World!");上の文はスペルは合っているのですが alert が Alert となっているためエラーになってしまいます。
↓ 字句解析と構文解析について
式 (expression)？
すみません、文と式の違いがいまいちわかりません...。
幾つかの言語を触ったことがある方なら分かりやすいのかもしれませんが、ワタシはまだ理解できないみたいです。
読み込み方
CSSでもやったように、HTMLの中に書いていく方法と外部ファイルとして読み込む方法があります。
HTML内に直接書いていく場合
基本的に script 要素は </body> 閉じタグ直前に書きます。
<body>
hogehoge
hogehoge
hogehoge
<script type="text/javascript">
console.log"Hello World!"
</script>
</body>こうすることで、ページの描画を終えた後にスクリプトの読み込みが始まるので 快適にページを表示することができます。
ただ、関数の定義等の問題で この方法が使えない場合もあります...。
その場合は<head>の配下に記述します。
やらないに越したことがないのは、
<body>配下の任意の位置に記述することです。なるべく上で上げた二つの範囲に収めるようにした方が良いでしょう。
外部ファイルとして別に定義する場合
<head>
<script type="text/javascript" src="通したいpath.js"></script>
</body>この方法により HTML の見通しが良くなります。
できるだけ HTML に記述するよりも外部ファイルとして読み込みましょう。
HTML ファイルの中に記述するのは、コードが非常に短いときに絞ったほうが良いみたいです。
コメント
JavaScript には3つのコメントの記入方法があります。
// comment 書いた行がコメントとして認識される。
/* comment */ 囲われたブロックをコメントとして認識するため複数行に指定できます・
これに加えてドキュメンテーションコメントというものが在るみたいなのですが、が、まだワカラナイ(´;ω;｀)
コンソールに出力
では実際にJSにコードを書いていきましょう！
最初は一番基本的な console.log からです。
console.log("Hello World!");ブラウザで表示してと...。
あれ、表示されませんね...。
では検証ツールを開いて console タブに切り替えてみましょう。
検証ツールの cosole にHello World! と出力されているのが確認できたでしょうか！？
この console は2つの大きな役割があります。
１つはエラーの確認ができること。
つまり、JSの記述間違い等があればここで指摘してくれます。
２つ目は対話的であることです。
ここはイマイチ分からないと思いますが、後に説明します GetElementById のところで意味が分かると思いマス。
後編につづく...。
8/30 全体の構成を大きく変更し、加筆修正を行いました。