【プログラミング学習メモ】関数・オブジェクト・DOM操作

プログラミムコードが表示されたPC画面
The following two tabs change content below.
gorian91
希少難病ブロガー自身の難病から体力的な限界を感じ、時間を自由に活用できるフリーランスの道へ。2016年から法人化。難病当事者の雇われない生き方・働き方を追求しています。
プログラミムコードが表示されたPC画面

前回は配列まで書いたので、今回は、関数、オブジェクト、DOMについてです。概念的に難しい部分で、説明しだすとすごいボリュームになりそうなため、ポイントをかなり絞って書きました。

関数

必要に応じて呼び出して使える処理の集合体のようなもの。引数を受け取り、処理を行ったあと、返り値を返します。

といっても、最初だと全くイメージがつかないので、材料(引数)を買ってきて、材料を切って煮て焼いて(関数)、料理(返り値)に仕上げるイメージ。

関数の書き方

 

オブジェクト

オブジェクトとは、データ(プロパティ)と操作(メソッド)の集合として定義し、プログラムで扱えるようにしたもの。

JavaScriptの基本的な考え方で、オブジェクトを操作することで、色々な処理を行うことができます。

ここは完璧に理解しようとすれば、ものすごい時間がかかりそう(というか自分も完全に理解してないw)なので、作りながら覚えていく方が早そうです。

オブジェクト・プロパティ・メソッド

 

DOM(Document Object Model)

DOM(Document Object Model)は、「HTMLをオブジェクトとして扱えるようにしたもの」。

ブラウザにHTML文書が読み込まれるとJavaScriptでDOMオブジェクトが自動で生成されるので、生成されたDOMオブジェクトに定義されているプロパティやメソッドを利用することができます。

例えば、ボタンをクリックしたときに、特定のHTMLの要素を入れ替えるといったことも可能になるというわけですね。

参考例として、テキストボックスにリンク名とURLを入力すると、URLが指定されたa要素が追加されるプログラムです。

JavaScriptの学習をCodeCampの教科書に沿って進めてきて、ほとんどググって解決できていたのですが、ここは途中まで進めたものの解決できませんでした。

レッスンを予約して講師の方に聞いたら一瞬で解決。プログラミングの学習って一度つまづくとやる気を失ってしまうんですが、CodeCampだと、翌日にレッスンを予約すればすぐ解決できるので便利ですね。

いやはや、しかし、意外と単純なコードで動くもんです。

 

さて、これまでブログで学習メモとして、JavaScriptについて書いてきましたが、DOMの操作でCodeCampのJavaScript編は8割くらい終了です。

実際にやってみた感想としては、「え?こんだけ?」という感じで、今の状態だと全く何も作れる気がしないというのが正直なところw

結局は、自分で何かを作ってみて、引き出しを増やしていかないとどうにもならないと悟りました。

あとは比較的時間のかかりそうな実習が2つと、jQuery、Ajaxについて学んで終了という流れです。次回は実習の1つ「カウントダウンタイマー」について書いてみようと思います。