ビルトインオブジェクト(内臓オブジェクト)
いつものように今日の日付のフォルダを作る
→test1.html,test1.css,test1.jsを新規製作して保存
test1.htmlのタイトルは
<title>ビルトインオブジェクト</title>
test1.cssには
body{
background:#CCF;
}
test1.jsに
console.log('ok');
を書いてブラウザでいつものように確認。
今朝の雑談:
タッチタイピングについて
FJ方式:
FとJにでっぱりがついていて、そこに人差し指をポジショニングして行う。
6点入力:
点字の入力方法。点があれば1、なければ0という。
FDS JKL のキー を ①②③ ④⑤⑥ の点と して使います。
ビルトインオブジェクト(組み込みオブジェクト):
もともとJavaScriptがもともと持っている、最初から自動で使える、何の宣言も代入もせずにいきなりつかえるオブジェクトのこと。
Mathオブジェクトなど。
昔はそれしか使えなかったらしい。
今日は実験として、このオブジェクトを使った昔のやり方でプログラムを書くよ(いまは推奨しない)
<form>オブジェクト:
これもビルトインオブジェクトの1つ。いずれちゃんとやりますよ。今日はざっくり。
body内
<form name="f1">
<input type="text">
</form>
昔はidがなかったのでnameというのをつけていた。
<input type="text">というのは、文字列を入力するフォーム。
もともとの組み込みオブジェクトは、getElementByIdを使わなくても
制御できるという特質がある。
ちょっと付け加える
<input type="text" value="hogehoge">
→本来はinput type textにvalueを付けることはしない。
まれに入れておくこともあるらしい。
(今日はgetElementByIdを使わなくてもいけるというテストのために入れておく。)
テキストボックスにも名前を付けておこう
<input type="text" value="hogehoge" name="t1">
test1.js側に追加
var str = document.f1.t1.value;
↑昔風の記述だから覚えなくていい。
コンソールにこれを書き出してみましょう
console.log(str);
--->test1.html
<!DOCTYPE html>
<html lang="ja">
<head>
<meta charset="utf-8">
<title>ビルトインオブジェクト</title>
<link rel="stylesheet" href="test1.css">
</head>
<body>
<form name="f1">
<input type="text" value="hogehoge" name="t1">
</form>
<script src="test1.js"></script>
</body>
</html>
--->test1.js
var str = document.f1.t1.value;
console.log(str);
動的なHTML『ダイナミックHTML』(20年前の言い方)
→いまは普通にこれを「HTML」と呼ぶ。
むかしのひとたち「動くHTMLが作りたいな」
→(静的な)要素オブジェクトをgetElementByIdで動かすという手法が生まれた。
→逆に言えば、昔からある組み込みオブジェクト(<form>など)は
getElementByIdを使う必要がない。
ここまで歴史的経緯のお話。
なんで<script>の読み込みは<body>が閉じる寸前にするか?
→
じゃあ<script>を<form>の前において読み込みなおすと
→
Uncaught TypeError: Cannot read property 't1' of undefined
「t1なんて見つからないですよ」
jsにおいては順次実行。(※ただしfunctionは呼び出されるまで実行されない)
レンダリングが全部終わった時点でJavaScriptを読み込ませないと、
t1がないとかf1が見つからないという事になる。