第10回の実演記録

開発ツールに以下のような(JavaScriptの)式を入力してみて下さい。

• 矢印キーやTabキーを使って履歴や補完の機能を活用すること。
• 例えば window　を入力するときは、 wi ぐらいまで打鍵して Tab キーを叩いてみるといい。

window
	// オブジェクト（= { } で囲まれた連想配列でもる）
	// が値として表示されるだろう。
	// ブラウザの、開かれているタブごとにこの値が違うが、
	// すべての変数やオブジェクトの大元となるのがこの値。
this
	// window と同じものを指している筈
window.document
	// winodowオブジェクトの、document属性の値
document
	// DOM の 最上位にある要素。
	// 実は window.document, this.document 
	//   と同じもの
	// (this.____ の レシーバは省略可能なのでこう書ける）	
document.body
	// HTMLの body要素に相当する
body
	// この形ではアクセスできない（エラーになる）
document.body.children
    // bodyに配置された要素の配列（のようなもの）
document.body.children[0]
    // 最初の要素（以下同様）
document.body.children[1]
    // 他の方法として、
    //   id や クラス名を指定して要素を得ることもできる
document.getElementById('b-div')
    // ここでは b-div というidのついた要素があることを
    // 前提としている
var  x=document.getElementById('b-div')
    // 通常はこのようにgetした要素を変数に入れてから使う
    //  （ここでは x という名前をつけた と見ることもできる）
x.setAttribute('style','color:red')
x.setAttribute('style','color:blue')
    // 属性をプログラムで変更する
    // （と、要素の色が変わるのがわかるだろう）
x.innerHTML="文字が変更されました"
    // 表示される文字列も変えられるし
x.remove
    //        これだと関数オブジェクトを表示するだけ
x.remove()
	// 括弧つきで書くことにより関数を呼び出す（実行する）
x
	// すでにページからは除去された要素が
    // オブジェクトとしてコンソールに表示される
document.getElementsByClassName('code')
    // この式の値は、要素の配列（のようなもの）
new Date().toLocaleString
    // Dateオブジェクト（現在時刻を保持する）の
	// toLocaleString属性（は、関数オブジェクト なので）
new Date().toLocaleString()
	// その関数を呼び出して見る（と、文字列が値として返る）