JavaScript基本のき「基本的概念」

入浴:JavaScriptの基本的概念HTML/CSS

オブジェクト、プロパティ、メソッド、イベントハンドラ・・・横文字ばかりでわからない・・・

今回はJavaScriptの超基本を一緒に学びましょう。「JavaScriptって何?」のの基本的概念を説明したいと思います。

実際にプログラミングするようになれば、すんなり理解出来るようになります。まずは、ざっくりイメージを掴みましょう。そうした方が、プログラミングしやすくなると思います。

オブジェクト、プロパティなど横文字ばかりでますし、関数や変数など数学ぽい言葉が出てきます。今回は文章ばかりで分かりにくいと思いますが、「こんな感じ」と受け取っていただければいいかなと思います。

JavaScriptの基本的概念

今回説明しようと思う言葉は、以下の8種類あります。CSSでも書き方のルールがありました。CSSはセレクタとプロパティと値で書かれます。JavaScriptでも書き方のルールがあります。それが以下の8種類になります。

  1. オブジェクト
  2. プロパティ
  3. メソッド
  4. イベントハンドラ
  5. 関数
  6. 変数・定数
  7. 演算子
  8. ステートメント(命令文)

オブジェクト・・・パーツ

オブジェクトはあらかじめブラウザが持っている部品や情報のことです。簡単にいえば、パーツです。ナビゲータオブジェクトとビルトインオブジェクトの2種類と、ユーザがオブジェクトを作成することも可能です。

  • ナビゲータオブジェクト・・・予めブラウザ自身が持っている部品や情報のこと
  • ビルトインオブジェクト・・・JavaScriptがブラウザに組み込んだ部品や情報のこと

プロパティ・・・詳細

オブジェクトは多くの属性を持っていて、その属性のことをプロパティといいます。例えば、背景というオブジェクトがあったとしたら、色や模様がプロパティになります。

また、プロパティ自身がオブジェクトでもあります。色は赤、青、黄色、緑・・・と種類があるように、色は背景のプロパティであり、赤、青のオブジェクトでもあります。

オブジェクト.プロパティ=値

メソッド・・・実行

メソッドはオアブジェクトに対して動作を指定します。例えば、「今日は何日?」と質問したら「木曜日」と応答するように、動作を指定します。

オブジェクト.メソッド(値)

イベントハンドラ・・・反応

リンクボタンの上にカーソルを置いた時にリンクボタンの色が変わったり、大きくなったりするホームページがあります。この「カーソルを置いた時」をイベントと呼びます。イベントに起こる動作をイベントハンドラと言います。

イベントハンドラ名=スクリプトまたは関数

関数・・・一連の処理

いい知廉の処理手続きをまとめたものを、関数といいます。関数の定義は<HEAD>内で行い、関数の実行は<BODY>内で行います。

関数の定義はfunction 関数名{引数,引数・・・}{処理}と書きます。

変数・定数・・・設定

変数は数字以外にも文字列やプロパティ、条件式などなんでも入ります。なにかしらの値を記しておくボックスみたいなものです。

var 変数名=値

定数とは変数に設定する値で変化しない値を定数といいます。

演算子

値の計算や比較などに用いる記号のことや式のことを演算子といいます。

ステートメント(命令文)

ifやforやコメントアウトなどの命令文をステートメントといいます。functionも命令文です。

最後に

ざっくりとした説明でスミマセンでした。

JavaScriptはホームページに動きをつけるプログラムなので、どんな時に、どれを、どうやって、どうするかをブラウザに指示している文章になります。実際は、コレは演算子で~、命令文で~なんて意識しないので、なんとなくで十分ですよ。

もっと詳しいことを知りたい方はプログラミングのオンラインスクールCodeCampTechAcademy [テックアカデミー]がおすすめです。自宅でしっかり学ぶ事ができるので、自分のペースで学べます。無料体験もありますよ。

本ならば、秀和システムのHTML&CSS&JavaScript辞典がオススメです。この辞典はわかりやすくまとまっていて、調べたいときにそこだけ見ればいいようになっています。1冊お手元に置いておくと「あれ、なんだったけ?」というときに便利ですよ。

なんとなく、言葉の違いがわかった気がする!