備忘録的リファレンス

JavaScriptリファレンス

 JavaScriptとは、htmlを動的に表示するスクリプトです。jQueryについても書いています。

 このページはwebページを開発しながら参照するJavaScriptリファレンスです。

JavaScript宣言とJSファイルの読み込み

 JavaScriptを利用するには、まずはHTMLの<meta>エレメントにスクリプトを宣言します。

Script宣言

 スクリプトを利用するためには先に<meta>エレメントでscriptのタイプを宣言します。ここではJavaScriptであることを前提としています。

<meta http-equiv="Content-Script-Type" content="text/javascript">

Scriptを直接記述

 スクリプトを直接書くことができます。

<script type="text/javascript">
...
</script>

Scriptの外部ファイル読み込み

 外部ファイルとして作成したスクリプトファイルを読み込むには<script>エレメントを使います。

<script type="text/javascript" src="example.js"></script>

代替テキスト

 スクリプトに対応していないブラウザで代替として<noscript>エレメントを使います。<noscript>エレメントは、<body>内に記述します。

<noscript>このページにはscriptが含まれています</noscript>

HTML内でのスクリプトの扱いについて

HTML(DOM)とJavaScript

 JavaScriptはブラウザ上で動くスクリプトです。webブラウザがI/Oになります。HTMLタグエレメント(DOM)を通してwebブラウザを利用します。
 HTMLテキストはブラウザでロードしたらDOM(Document Object Model)に変換されます。このDOMをJavaScriptで操作します。入出力におけるタグエレメントの利用方法、とくにEventインターフェイスについては理解しておいた方がよいでしょう。

 基本的にJavaScriptではサーバーとの双方向通信はできません。クライアントのリクエストに対してレスポンスを返すだけです。(双方向通信をするためには、サーバー側にNode.jsをインストールする方法があります。)

 webブラウザ依存のプログラミング言語というところが他のプログラミング言語と違う所です。

エレメントの取得/新規作成( I/O )

 JavaScriptは、ブラウザ上で実行できる言語です。ブラウザによってHTMLテキストがDOMというオブジェクトデータ化されます。このDOMを介してJavaScriptでデータの取得や新規作成を行います。

 HTMLテキストでは、タグエレメントもしくはエレメントと呼ばれる<p>などのタグが、ブラウザよってオブジェクト化されます。HTMLテキスト上のデータを取得するには、Document.getElementsByTagName()やDocument.getElementById()を使います

var element = document.getElementsByTagName('tag_name');

 これは、タグ名からHTMLCollectionというオブジェクトの列を取得します。詳しくは以下を参照してください。

「エレメントの取得と新規作成」ページへ

割り込み処理とEventインターフェイス

 ブラウザには、マウスやキーボード、API、エラーなどによる割り込み処理ができるようになっています。この割り込み処理はEventインターフェイスを利用します。

 Eventインターフェイスには、Eventというイベントを捉える方法とパラメータとメソッドが用意されています。さらに、Eventインターフェイスには用途による、MouseEvent、KeyboardEvent、やClipboardEventなどといった派生があります。

 イベントを捉える方法には、JavaScriptでエレメントオブジェクトにEventタイプを指定する、addEventListener()関数を利用する方法と、HTMLでエレメント属性として記述する方法があります。

JavaScriptでオブジェクトにEventタイプを指定
object.oninput = function(){ };
JavaScriptでオブジェクトにaddEventListener()関数で指定
object.addEventListener("input", function);

addEventListener()関数のfunction部分は引数を記述しない。関数側はfunction(event)とすると、eventオブジェクトを受け取ることができます。

HTMLでエレメント属性のEventタイプ
<tagelement oninput="oneFunction()">

DOM Eventインターフェイスのページを参照して下さい。

変数(Valiable)

 変数(valiable)はコンストラクタとして定義されています。

 JavaScriptが自動でデータ型を判別してくれますし、データ宣言を明記しなくても自動でメモリを割り当ててくれます。 データ宣言も型もないために、従来のプログラムに慣れていると見易いか、見難いかの問題があるかと思います。

演算子(Operation)

 演算子は、プログラムにおけるデータや変数(オペランド)の代入や四則計算、比較などといったデータ操作を行うためシンボルです。JavaScriptはオブジェクト指向ですので、オブジェクトに関する演算子も含まれています。

演算子について

制御構文(Control Flow Statements)

 制御構文(Control Flow Statements)は、あらかじめ用意されている制御構造で、プログラムの流れをコントロールする目的で用いる文(Statements)です。 

制御構文について

function(サブルーチン、プロシージャ)の定義

 function(関数)ステートメントはサブルーチンやプロシージャを定義することができます。

function(関数)ステートメントについて

予約語とグローバル変数、グローバル関数

 予約語とは、変数名に使えないあらかじめ決められた名称です。JavaScriptには、予約語ではないのですがグローバル変数とグローバル関数と呼ばれる変数名としては使わない方がよい名称があります。

予約語とグローバル変数、グローバル関数

正規表現

 JavaScriptにおける正規表現とは、複数の文字列を1つの文字列として表現する正規表現を用いて文字列のパターンマッチングを行う機能のことです。多くのプログラミング言語やアプリケーションと同じように、文字列のパターンマッチングを正規表現といっています。 

正規表現について

オブジェクト(クラスとインスタンス)

 JavaScriptにおけるクラス定義とそのインスタンスの生成についてです。JavaScriptではHTMLエレメントのタグエレメントがオブジェクト(DOM)として扱われています。これを理解し活用するとよいでしょう。

 オブジェクトは、それ固有のデータ群と関数群を持つデータです。データと関数を併せもつデータがオブジェクトという抽象的なものです。 実際のプログラムではオブジェクトの設計図であるクラスの定義を行い、そしてその設計図からオブジェクトデータであるインスタンスを生成します。

クラス定義とインスタンス生成について