感謝のプログラミング 10000時間

たどり着いた結果(さき)は、感謝でした。

JavaScriptでDOMの操作をするサンプルや言葉の意味について、まとめ。

スポンサーリンク

言葉の定義

・DOMとは、HTMLドキュメントやXMLドキュメントをプログラムから利用するためのAPIのこと。
W3Cによって、DOMの仕様はLevel1〜3まで定義されている。
・DOMの記述ルールは以下のとおり。

インターフェース名.メソッド名()
インターフェース名.プロパティ名

これを見るとわかるように、DOMの操作とはDOMオブジェクトの操作することである。
・タグとは、文書構造を指定するためのマークアップ言語である。pとかinputとか、色々ある。

ノードを選択する方法

ノードを選択する方法は以下の4つ
・IDによる検索
・タグ名による検索
・クラス名による検索
・名前による検索

親とか子とか兄弟とか

ツリーの親とか子とかのプロパティ名が決まっている。

プロパティ名 取得できるノード
parentNode 親ノード
childNodes 子ノードリスト
firstChild 最初の子ノード
lastChild 最後の子ノード
nextSibling 次のノード
previousSibling 1つ前のノード

サンプルいろいろ

・windowがロードされたときに機能するようにJavaScriptを書く

function hogehogeFunc() {
	//Id hogeがクリックされたときにこの関数が動く
}

// windowがロードされたときに機能する
window.onload = function() {
        //クリックでhogehogeFuncを実行する。
	document.getElementById('hoge').onclick = hogehogeFunc;
}

・要素を挿入したり、JavaScriptでテキストを表示させたり
以下の様なHTMLに動的にテキストを表示させる。

<!doctype html>
<html lang="ja">
<head>
    <meta charset="utf-8">
    <title>要素の作成 テスト</title>
    <!--[if lt IE 9]>
    <script src="http://html5shiv.googlecode.com/svn/trunk/html5.js"></script>
    <![endif]-->
    
</head>
<body>
    <div id="someDiv">
    </div>
    <script src="js/createelement.js"></script>
</body>
</html>

JavaScriptはこちら。

window.onload = function() {
	//p要素を作る準備
	var p1 = document.createElement('p');
	p1.textContent = 'JavaScriptでテキストを表示の時はtextContentを使おう';
	p1.className = 'addClass';

	//ここでid someDivに上で作った要素を追加する。
	var div = document.getElementById('someDiv');
	div.appendChild(p1);

	//他の要素の前後関係をつけて要素を挿入する方法
	var p2 = document.createElement('p');
	p2.textContent = '要素を挿入する';

	//p1の前にp2を挿入する
	div.insertBefore(p2,p1);
};

読んだ本(参考文献)

パーフェクトJavaScript (PERFECT SERIES 4)

パーフェクトJavaScript (PERFECT SERIES 4)


この本は、中級以上にステップアップするための必須かつ大切な情報が詰まっていると信じている。

感謝のプログラミング

今回で感謝のプログラミングは【448時間目】
10000時間まで、あと【9552時間】

一日2時間とか3時間しか勉強できていない。これは良くない。
平日でも英語に1時間。プログラミングに3時間はやりたい。

6月が終わりまでに500時間は最低でもクリアしたいなぁ。
1年で1000時間。全然足りないな。もっと集中しよう。