LogoMark.png

JavaScript

JavaScript

JavaScript/SyntaxJavaScript/BOMJavaScript/DOMJavaScript/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) が策定されています。

CONTENTS


JavaScriptを利用するには

Webページ上のオブジェクトに「振る舞い」を定義する場合、 JavaScriptの書き方には、以下の3つの方法があります。

開発環境

TextEditor

JavaScriptファイル は、HTMLやCSSと同様にプレーンなテキストファイルです。したがって、HTML,・CSSと同様に、テキストエディタさえあれば、プログラムの開発が可能です。


JavaScriptコンソール

JavaScriptは、記述に問題がある場合もその情報は表面には現れません。またロジックの問題でそれが正常に動作しない場合も、画面上には何の警告もない(あるいは最悪フリーズする)のが普通です。そこで、スクリプトを開発する場合、それらを明示的に知るために、ブラウザのコンソールを使います。
以下、ブラウザでコンソールを表示する方法を紹介します。




JavaScriptプログラミングのキーワード

イベントとイベントハンドラ

JavaScriptのプログラムの多くは、何らかのアクションに対するリアクションとして記述されます。簡単な例で言うと「ボタンをクリックしたら要素の色が変わる」といったものです。JavaScriptの事例を調べていると、イベントとイベントハンドラという用語が頻繁に登場します。重要なキーワードですので確認して下さい。

プロパティーとメソッド

JavaScript はオブジェクト指向言語(Object-Oriented Programming)であると言われます。オブジェクトとは簡単に言えば「モノ」のことで、身近にある文具、家電、車などと同様にイメージして構いません。
 オブジェクト指向プログラミングでは、それを「プロパティー」と「メソッド」の集合体と考えてコードを記述します。

例えば「車」を例にとると、それは以下のような「データ」と「処理機能」を持ったものであると説明することができます。参考 w3schools.com

従来の「手続き型プログラミング」では、「データ(変数またはプロパティ)」と「処理(関数またはメソッド)」はバラバラに捉えられていて、プログラマーは、処理を担う「関数(引数>処理>戻り値)」を、いかに独立性の高いものに仕立てるか・・ということに関心を集中させていましたが、オブジェクト指向プログラミングでは、「データ」と「処理」をセットにした「オブジェクト」を構成単位と見なすとともに「オブジェクトのデータは、オブジェクトが持つメソッドによって処理される」と考えることで、プログラマーは、それがいかに単品としてうまく動くかということに専念できるようになりました。これは、画期的な意識改革です。
 実は、私たち「生き物」も、またそれを構成する単位である「細胞」も、すべて同様に内部に「データ」と「処理システム」を持つオブジェクトです。データはデータ、処理は処理と、バラバラなものを寄せ集めても、大きなシステムがうまく動く保証はありません。しかし「きちんと動く小さなモノを集めて少し大きなモノを作り、それらを集めてさらに大きなモノを作る」という発想で仕事をすれば、物事はうまくいきます。実際に「車」というオブジェクトは、ネジのようなサイズの小さな部品から、少しづつ大きなパーツの塊ができ、最終的には、いくつかの大きなパーツの組み合わせとして出来上がります。個々のパーツは、それぞれの段階で、きちんと動くようにできているので、最後の組み立てもシンプルな作業になります。
 
JavaScriptは、ブラウザを Window という名前のオブジェクトとし、また、その中に表示されるHTML文書を Document という名前のオブジェクトとして扱います。さらに言えば、Document の中にある個々の要素(例えば h1 要素)もオブジェクトです。JavaScript プログラミングは、それらが持つ様々な「プロパティー」と「メソッド」を使って、システムを構築する作業であると言えます。プロパティーとメソッドの違いは、語の最後に ( ) の有無で判断できます。メソッドは関数なので ( ) が付きます。オブジェクトとプロパティー、またオブジェクトとメソッドは [ . (ドット)] で接続します。

以下、プロパティーとメソッドの例です。




JavaScriptの実行タイミングを見極める

HTMLファイルの中に <script>タグを書く場合

スクリプトが<head>内にあると、ページのコンテンツよりも先にスクリプトが読み込まれて即実行されます。関数を定義するだけならいいのですが、ページの中に記述された要素に対して実際に操作を施す場合、このままだと、ページ読み込み完了(DOM構築)前にスクリプトが実行されて、思うように処理が実現されない・・という問題が起こります。
 そこで、この場合の解決方法としては、</body>タグ(終了タグ)の直前に<script>を書く・・という方法が多くの事例で見られます。こうすれば、スクリプトの実行前にすべての要素が読み込まれている(DOMが構築済みとなる)ので、ターゲットを掴み損なうことはありません。

<html>
          :
    <body>
          :
        <script>
          // Do Something
        </script>
    </body>
</html>


外部ファイルとして読む場合

プログラミングの基本的な感覚からすると、JavaScript は外部ファイルとして独立させて <head>内で読み込むのがベストです。ただこの場合、先と同様、DOMの構築前にスクリプトが実行されてしまうという問題が生じます。
 そこで、その回避策としてよく用いられるのが、window.onload イベントハンドラです。これを用いると、「ページの読み込み完了」というイベント通知を待ってから、スクリプトが実行されるので、.js 外部ファイルを安心して <head>で先読みさせることが可能になります。

window.onload = function() {
      [ ここに、DOM構築直後に実行すべきプログラムを書く ]
}


Async と Defer

HTML5の新しい仕様として、JavaScriptfの外部ファイルを読み込む方法として、 async属性 と defer属性 が追加されました。これに対応したブラウザの利用が前提であれば、DOM構築後にJSが確実に実行されるようにするは、defer属性をつければよい ということになります。


PAGES

GUIDE

DATA

Last-modified: 2019-08-20 (火) 14:09:17