今回からJavaScriptのきほんを学んでいこう。
JavaScriptとは
JavaScript はスクリプト言語で、動的に更新されるコンテンツを作成したり、マルチメディアを制御したり、画像をアニメーションさせたり、その他ほとんどすべてを可能にします。
MDN Web DocsのWebサイトより
JavaScriptは、一般的なブラウザである、Chrome、Edge、Safariなどで実行できる。
ブラウザの役割は、もちろん、Webページを表示することである。Webページは、一般的にHTMLとCSS、画像などで構成されている。
HTMLは、ページのコンテンツ（テキストや画像）を記述するものであり、CSSは、そのHTMLにスタイル情報を提供してレイアウトやデザインを決めるものである。
ところで、このHTMLやCSSは、基本的に、初めに読み込まれた時から変わることはない。
しかし、JavaScriptを使うことによって、HTMLやCSSを書き換えることができるのである。
これを「アウトプット」の処理という。
また、JavaScriptでHTMLから情報を読み取ることもできる。
これを「インプット」の処理という。
これから、JavaScriptを使って、HTMLやCSSをいろいろと書き換えて、ページのコンテンツを変えたり、動きをつけたりする方法を学んでいこう。
ところで、JavaScriptを使うためには、Webページが必要である。WebページにはHTMLもCSSも書かなくてはならない。さらには画像のデータが必要な場合もある。そこで、JavaScriptに関係あること以外は毎回書かなくて済むように、あらかじめテンプレートを用意しておくと良い。
ちなみに、本ブログでは、「確かな力が身につくJavaScript「超」入門 第2版 狩野 祐東 (著) SBクリエイティブ」のテンプレートを利用してご紹介している。
アウトプットのきほん（その１）
コンソールにアウトプット
主なブラウザには、「開発ツール」と呼ばれるWebサイト制作に便利な道具が用意されている。
コンソールはその中に含まれている。
まずは、「開発ツール」を開いてみよう。ここでは、 Google Chromeを使ってご紹介しよう。
Chromeの開発ツールを開く
「Google Chromeの設定」をクリックすると、メニューが表示される。
「その他のツール」→「デベロッパーツール」を選ぶと開発ツールが開く。
コンソールを使う場合、開発ツールの「Console」をクリックする。
コンソールを使ってみよう
それでは、コンソールに直接JavaScriptでプログラムを書いてみよう。
コンソールの「＞」の横に次のコードを記述してみよう。
console.log(‘Learn JavaScript’);
入力し終わったら、Enter キーを押してみよう。（Macはrerturnキー）
コンソールに上図のように表示されただろうか。
console.logは、（）内に指定したテキストや、数式の結果などをコンソールにアウトプットする機能である。なお、本ブログでは、テキストは、原則としてシングルクォート（’）を使って囲うものとする。
次に以下のように入力してみよう。
console.log(3+7);
console.logは（）内のテキストを出力するだけでなく、計算もしてくれることがわかった。
（参考）確かな力が身につくJavaScript「超」入門 第2版 狩野 祐東 (著) SBクリエイティブ
コメント