【超初心者向け】JavaScriptの書き方 ＃1　オブジェクト・メソッド・パラメーターとは？

HTML・CSSのみを使った学習パートも終え、ついに妻がJavaScriptの学習に着手し始めました。

そして予想通りに初っ端の数ページでつまづいていました。

ここまでの話はこちらから。

【超初心者向け】HTML・CSSの書き方（第1話）

【超初心者向け】HTML・CSSの書き方（第2話）

【超初心者向け】HTML・CSSの書き方（第3話）

【超初心者向け】HTML・CSSの書き方（第4話）

渡した本は初心者向けでとてもわかりやすいものですので、本の内容をもとに妻へ補足した内容を今回は書いています。

JavaScriptとは？何ができるの？

JavaScriptの概要や用途については解説している書籍やWebサイトが多くあるので、詳細は省略します。

ざっくり説明すると、

Webページ内でHTML・CSSだけでは実装できない「動き」をつけることができるプログラミング言語

HTMLはマークアップ言語で、段落、見出し、画像、動画などの「構造」を決めます。

CSSはHTMLに色や形をつけるなど、「スタイル」を決めます。

※CSSでも一部、アニメーションなど「動き」をつけることはできます。

普段見ているWebサイトの多くはJavaScriptを使っているはずです。

オブジェクト・メソッド・パラメーターとは？

今回、妻がフリーズした部分です。

//(1)
document.write('<p class=”hello”>こんにちは</p>');

//(2)
document.getElementById('hello').innerHTML = 'こんにちは';

オブジェクト：ここではdocumentの部分であり、今表示されているWebページをさします。

メソッド：ここではwriteやgetElementByIdがそれにあたります。

パラメーター：（1）の例で‘<p class=”hello”>こんにちは</p>’ の部分です。

基本的にはこの3つで

だれ（オブジェクト）に何（パラメーター）をどう（メソッド）させる」かを書きます。

そのため（１）の例では、

ドキュメントに『こんにちは』と書かせる（表示させる）

（２）の例では、

ドキュメント（Webページ）内にあるidが「hello」の要素のHTMLの中身を「こんにちは」と書き換える

となります。

だいたいのメソッド名は英語の意味そのままの動きをしてくれます。

write　→　書く

getElementById　→　ID（HTMLのタグに設定できる属性、1つのページに同じ名前のidを1つだけつけることができる）で要素（Element）を取得（get）する

documentにはあらかじめいろんなメソッドが用意されていますが、そもそもこのdocumentというオブジェクトは何者なんでしょうか？

次回はDOM（どむ）とAPI（えーぴーあい）について説明したいと思います。

余談：プログラミングに必要なスキル？

僕はあまり気にしたことはありませんでしたが、プログラミングをつつがなく学ぶのであれば中学？高校？レベルの英語力も多少は必要なんだなと思いました。

つづく