Javascript・Jqueryに挑戦してみよう

Javascriptって何

文字や画像,ページ等に種々の自動的な「バリエーション」や「動き」が与える事ができ,
計算や情報の検索も可能な仕組みに変化させることができます。
JavaScriptは,補助言語で,文字や画像,ページ等を動かす仕掛けを作るものです。

HTML&JavaScriptで書かれたページは,ほとんどの場合,
Windowsパソコン備え付けのソフトInternet Explorer上で動かすことができるので,
改めて特別のソフトを求めなくても,これを実行することができます。

JAVAとJava Scriptは全く違うモノ

JavaとJavaScriptはどれだけ違うか?

JavaとJavaScriptはまったく違うプログラミング言語です。

似ているのは名前だけなので、

  • インドとインドネシアくらい違う
  • 中国と中国地方くらい違う
  • ココナッツとナッツくらい違う
  • メロンとメロンパンくらい違う

ってくらい名前が似ているだけなのです。

下記を参考に
https://eng-entrance.com/java-javascript#JavaJavaScript

基本の文法

JavaScriptのプログラムは「文」の集まりです。以下のような感じです。
〇〇は□□を××しなさいみたいな感じで指示を与えます。

このコード自体の意味は、今はわからなくて大丈夫です。
重要なのは文の終わりについているセミコロン(;)です。
文の終わりには基本的にセミコロンをつけます。
今後セミコロンが最後についているものが出てきても、
「何だこれ?」ではなく「文の終わりなんだ」と理解してください。
(セミコロンをつけなかった場合、自動的に挿入されますが、思わぬ動きをすることがあるので、きちんとつけましょう。)

ただし、ブロックが最後にくる文の終わりにはセミコロンをつけません。
ブロックについては、次で説明します。

ブロック

ブロックというのは、0個以上の文をグループにするためのものです。
以下のように書きます。

これについても、今はコードの意味はわからなくていいです。
中括弧で囲まれた部分がグループになっているということだけ覚えてください
(オブジェクトとは違うので注意)。
先ほど説明した通り、ブロックの最後にはセミコロンをつけません。
今後、ブロックが最後についた文が出てきますが、その時はセミコロンをつけないというように思ってください。

オブジェクト

先ほど、「〇〇は□□を××しなさいみたいな感じで指示を与えます。」
部分の説明の、「〇〇にあたるモノ」下記を参考してください。

「myCar」
という名前のオブジェクトを作成し、
「make、model、year」 という名前のプロパティを付与することができます

メソッド

先ほど、「〇〇は□□を××しなさいみたいな感じで指示を与えます。」
部分の説明の、「××にあたるモノ」下記を参考してください。

実はこれも関数オブジェクトです。
つまり、オブジェクトのメソッドというのは、
単に関数オブジェクトの参照が代入されているプロパティだった、という訳です。

 もっと言ってしまえば、JavaScriptのオブジェクトメンバはプロパティしか存在しない、
という事です。プロパティの中で関数オブジェクトの参照を持ったものをメソッドと呼ぶ、という訳です。

パラメータ

先ほど、「〇〇は□□を××しなさいみたいな感じで指示を与えます。」
部分の説明の、「□□にあたるモノ」下記を参考してください。

JavaScript のパラメータとは、オブジェクトに渡す値であり、
JavaScript のプロパティとは、オブジェクトの持ち物です。

その他の基礎知識

JQueryって何?

wikipedia によると以下のように記載されています。

jQuery(ジェイクエリー)は、ウェブブラウザ用のJavaScriptコードをより容易に記述できるようにするために設計された軽量なJavaScriptライブラリである。ジョン・レシグが、2006年1月に開催された BarCamp NYC でリリースした。様々な場面で活用されており、JavaScriptライブラリのデファクトスタンダードと呼ぶ者もいる。

ライブラリーの種類

ライブラリーとは「使用頻度の高い機能や効果などのプログラムを再利用できる形にまとめたもの」です。

下記のサイトを参考

コリス|2015年総まとめ、jQueryのプラグインとスクリプト100選

ライブラリーを準備する

jQueryの公式サイトからjquery.min.jsをダウンロードして、それをサーバーに配置して読み込む方法。
CDNにて設置する方法。

CDNとは

GoogleのCDNからjQueryを読み込む」という方法です。
このやり方をすると、なんと1行でjQueryを読み込むことが可能になります!/p>

jQueryを利用する

それではjQueryを利用していきます。

基本の記述

jQuery の基本形は、「セレクタ」で要素を指定して「メソッド」で何かをする。


↑これがjQueryの基本形。無論、全てがこの形ではないですし、
細々した説明は色々とありますが全て放り投げておきます。

今回は上の基本的な形の中に様々な命令を記述していくことになります。覚えちゃいましょう。

では更に記述をしていきましょう。

の中に書いていくコードはこのような形となります。

ざっくりとこんな意味になります。Aを「セレクタ」と言い、Bを「メソッド」、Bの直後の括弧内を「パラメータ」と言います。パラメータは必ずしも必要なわけではなく、パラメータを用いないメソッドもあります。

「セレクタ」とは任意の範囲、要素を指定するためのもので、jQueryを覚える上で欠かせない要素です。…ですがセレクタはCSSと同じような記述をするため、スタイルシートを扱えるのであれば比較的簡単に覚えることができます。
例えば

こんな感じ。(セレクタは「“」(ダブルクォーテーション)、もしくは「’」(シングルクォーテーション)で囲うのを忘れずに。)
他にも様々なセレクタがございます。

jQueryはこの「セレクタ」で指定した場所に、メソッドおよびパラメータで記述した命令が処理されていく、と言うのがおおまかな流れとなります。

では、具体例を一つ上げるとしましょう。

こうなりますね。
では、この文字群をCSSを使うことなくjQueryで青色に変化させてみたいと思います:)

コードはこのような形となります。先ほどの説明と照らすと…

こういう感じ。つまり、「セレクタ(.hoge1)」のcssを「color:blue;」にしろ、と命令したことになります。
cssメソッドを用いる場合は、プロパティーと値(ここでは「color」 と 「blue」)をダブルクォーテーションで囲んで、カンマ「,」で区切ります。

これによって先ほどのテキストが…

見事、スタイルシートをいじることなく青色に変化しました:)
どうでしょう、なんとなく、理解していただけましたでしょうか?

参照:OZPAの表

JQUERYは手軽

JavaScriptを短く書くことができる
CSSに近い記述方法なので、html・cssの知識があれば習得は早い
クロスブラウザに対応しているのでブラウザ間の調整の必要がない。

Commentsこの記事についたコメント

%d人のブロガーが「いいね」をつけました。