サンプル・プログラム
documentオブジェクト
monthlyCalendar.html
31: let now = new Date(document.lastModified);
32:
monthlyCalendar.html
128: let year = parseInt(document.getElementById('year').value, 10);
129: let month = parseInt(document.getElementById('month').value, 10);
たとえば、document.getElementById('year').value は、documentオブジェクトからidが 'year' に一致する要素（オブジェクト）を返す関数である。その要素の属性valueをプロパティとして参照したり、代入したりできる。
monthlyCalendar.html
204: window.onload = function() {
205: //タイトル等をセット
206: document.title = TITLE;
207: document.getElementById('title').innerHTML = TITLE + ' <span style="font-size:small;">' + getLastModified() + '版</span>';
208: document.getElementById('reference').innerHTML =`
209: ※参考サイト <a href="${REFERENCE}">${REFERENCE}</a>
210: `;
211:
たとえば、上記の window.onload は、Windowインターフェースがロードされたとき――つまり、このHTMLファイルがブラウザにロードされたときに実行するユーザー定義関数を登録している。ここでは関数名を指定しない無名関数としてイベントハンドラに登録している。
組み込みオブジェクト
たとえば、Math.PI は円周率πを表すプロパティである。
また、Math.sqrt は引数の平方根を返すメソッドである。
JavaScriptでよく使う組み込みオブジェクトは次の通り。
| オブジェクト | 説明 |
|---|---|
| Number | 数値にかかわるオブジェクト |
| String | 文字列にかかわるオブジェクト |
| Boolean | Boolean型にかかわるオブジェクト |
| Array | 配列にかかわるオブジェクト |
| Math | 数学定数や関数にかかわるオブジェクト |
| Date | 日付にかかわるオブジェクト |
| RegExp | 正規表現にかかわるオブジェクト |
| Function | 関数にかかわるオブジェクト |
| Object | Objectにかかわるオブジェクト |
| Arguments | 引数にかかわるオブジェクト |
イベントハンドラ
| イベント | 説明 |
|---|---|
| onBlur | ページやフォーム要素からフォーカスが外れた時に発生 |
| onFocus | ページやフォーム要素にフォーカスが当たった時に発生 |
| onChange | フォーム要素の選択、入力内容が変更された時に発生 |
| onSelect | テキストが選択された時に発生 |
| onSubmit | フォームを送信しようとした時に発生 |
| onReset | フォームがリセットされた時に発生 |
| onAbort | 画像の読み込みを中断した時に発生 |
| onError | 画像の読み込み中にエラーが発生した時に発生 |
| onLoad | ページや画像の読み込みが完了した時に発生 |
| onUnload | ウィンドウを閉じた時、他のページに切り替えた時、ページをリロード（更新）した時に発生 |
| onClick | 要素やリンクをクリックした時に発生 |
| onDblClick | 要素をダブルクリックした時に発生 |
| onKeyUp | 押していたキーをあげた時に発生 |
| onKeyDown | キーを押した時に発生 |
| onKeyPress | キーを押してる時に発生 |
| onMouseOut | マウスが離れたした時に発生 |
| onMouseOver | マウス乗った時に発生 |
| onMouseUp | クリックしたマウスを上げた時に発生 |
| onMouseDown | マウスでクリックした時に発生 |
| onMouseMove | マウスを動かしている時に発生 |
Symbolオブジェクト
たとえば、下記のプログラムでは sym1, sym2, sym3 に、それぞれ異なる値が代入される。
const sym1 = Symbol();この性質を利用し、プロパティに隠しデータ user[SECRET_KEY] を持たせたものが "Symbol1.html" である。
const sym2 = Symbol('hoge');
const sym3 = Symbol('hoge');
Symbol1.html
20: <script>
21: //ページのロード時に実行
22: window.onload = function() {
23: const SECRET_KEY = Symbol('secret');
24:
25: const user = {
26: firstName: 'papa',
27: lastName: 'pahoo',
28: [SECRET_KEY]: 'パスワード123',
29: };
30:
31: // 通常のキー配列にはシンボルキーは含まない
32: document.getElementById('keys').innerHTML = Object.keys(user);
33:
34: document.getElementById('first_name').innerHTML = user.firstName;
35: document.getElementById('secret_key').innerHTML = user[SECRET_KEY];
36:
37: }
38: </script>
JavaScriptは、数学定数や関数をオブジェクトとして備えており、HTMLファイルそのものをオブジェクトとして扱うことができる。