Javascript・Jqueryに挑戦してみよう

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

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

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

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

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

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

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

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

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

var x = 3;
var y = 4;
var z = x + y;
console.log(z);

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

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

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

{
  var x = 3;
  var y = 4;
  var z = x + y;
  console.log(z);
}

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

var myCar = new Object();
myCar.make = "Ford";
myCar.model = "Mustang";
myCar.year = 1969;

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

var obj = new Object();

obj.method = function(arg)
{
    alert(arg);
}

obj.method("テスト");    // テスト と表示される

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

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

var obj = new Object();

obj.method = function(arg)
{
    alert(arg);
}

obj.method("テスト");    // テスト と表示される

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

// 1行のコメント

/*
 複数行の
 コメント
*/

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

下記のサイトを参考

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

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

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

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

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

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

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

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

$(function(){
}

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

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

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

    $(“#hoge”) – idセレクタ
    $(“.hogehoge”) – クラスセレクタ
    $(“li a”) – 子孫セレクタ
    $(“p.hoge, p.hogehoge”) – グループセレクタ

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

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

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

このテキストは青くなりますこのテキストは青くなりますこのテキストは青くなりますこのテキストは青くなりますこのテキストは青くなりますこのテキストは青くなりますこのテキストは青くなりますこのテキストは青くなりますこのテキストは青くなりますこのテキストは青くなりますこのテキストは青くなりますこのテキサスは青くなりますこのテキストは青くなりますこのテキストは青くなりますこのテキストは青くなりますこのテキストは青くなりますこのテキストは青くなります

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

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

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

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

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

参照：OZPAの表

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