前回は配列まで書いたので、今回は、関数、オブジェクト、DOMについてです。概念的に難しい部分で、説明しだすとすごいボリュームになりそうなため、ポイントをかなり絞って書きました。
関数
必要に応じて呼び出して使える処理の集合体のようなもの。引数を受け取り、処理を行ったあと、返り値を返します。
といっても、最初だと全くイメージがつかないので、材料（引数）を買ってきて、材料を切って煮て焼いて（関数）、料理（返り値）に仕上げるイメージ。
関数の書き方
function 関数名（引数）{
処理の内容
}
オブジェクト
オブジェクトとは、データ（プロパティ）と操作（メソッド）の集合として定義し、プログラムで扱えるようにしたもの。
JavaScriptの基本的な考え方で、オブジェクトを操作することで、色々な処理を行うことができます。
ここは完璧に理解しようとすれば、ものすごい時間がかかりそう（というか自分も完全に理解してないw）なので、作りながら覚えていく方が早そうです。
オブジェクト・プロパティ・メソッド
//プロパティ オブジェクト.プロパティ； //メソッド オブジェクト.メソッド()；
DOM（Document Object Model）
DOM（Document Object Model）は、「HTMLをオブジェクトとして扱えるようにしたもの」。
ブラウザにHTML文書が読み込まれるとJavaScriptでDOMオブジェクトが自動で生成されるので、生成されたDOMオブジェクトに定義されているプロパティやメソッドを利用することができます。
例えば、ボタンをクリックしたときに、特定のHTMLの要素を入れ替えるといったことも可能になるというわけですね。
参考例として、テキストボックスにリンク名とURLを入力すると、URLが指定されたa要素が追加されるプログラムです。
<!DOCTYPE html>
<html lang="ja">
<head>
<meta charset="UTF-8">
<title>要素の作成・追加</title>
<script>
function add_element(){
var name = document.getElementById("name"); //nameの要素を取得
var link = document.getElementById("link"); //linkの要素を取得
var box = document.getElementById("box");
//a要素の作成・追加
var element_a = document.createElement("a");
//作成したa要素の内容を設定
element_a.innerHTML = name.value ;
element_a.href = link.value ;
box.appendChild(element_a) ;
}
window.onload = function(){
var add = document.getElementById("add");
add.addEventListener("click",add_element, false);
}
</script>
</head>
<body>
<label>リンク名：<input type ="text" id ="name"></label>
<label>URL：<input type ="url" id ="link"></label>
<button id="add">リンク追加</button>
<div id ="box"></div>
</body>
</html>JavaScriptの学習をCodeCampの教科書に沿って進めてきて、ほとんどググって解決できていたのですが、ここは途中まで進めたものの解決できませんでした。
レッスンを予約して講師の方に聞いたら一瞬で解決。プログラミングの学習って一度つまづくとやる気を失ってしまうんですが、CodeCampだと、翌日にレッスンを予約すればすぐ解決できるので便利ですね。
いやはや、しかし、意外と単純なコードで動くもんです。
さて、これまでブログで学習メモとして、JavaScriptについて書いてきましたが、DOMの操作でCodeCampのJavaScript編は8割くらい終了です。
実際にやってみた感想としては、「え？こんだけ？」という感じで、今の状態だと全く何も作れる気がしないというのが正直なところw
結局は、自分で何かを作ってみて、引き出しを増やしていかないとどうにもならないと悟りました。
あとは比較的時間のかかりそうな実習が2つと、jQuery、Ajaxについて学んで終了という流れです。次回は実習の1つ「カウントダウンタイマー」について書いてみようと思います。
