忍者ブログ

からすまる日誌 JavaScript

基本(15) 組み込みオブジェクト

×

[PR]上記の広告は3ヶ月以上新規記事投稿のないブログに表示されています。新しい記事を書く事で広告が消えます。

基本(15) 組み込みオブジェクト

ビルトインオブジェクト(内臓オブジェクト)
 

いつものように今日の日付のフォルダを作る
→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が見つからないという事になる。
 
PR

コメント

ただいまコメントを受けつけておりません。

ブログ内検索

P R