第64回：jQuery勉強結果本編0「jQueryって何？」
どうも、シノだ。
今回から、新講座シリーズを開始する。
…と思ったのだが、まだ勉強を始めたばかりの内容で、教えると自信満々に書いてミスするのもなんか申し訳ない。
というわけで、シリーズ名を今回から変更する。
題して、「勉強結果」シリーズ。
…安直だなと思ったそこのあなた。
私にはこういったセンスはないのだ。許してほしい。
さて、今回からは、新しく勉強を始めた「jQuery」というものについて勉強した結果を書いていく。
初回は、そもそも「jQueryとは何か」という部分から解説していくことにしよう。
今回の目次だ。
0.今までやっていたこと
これまでは、「HTML&CSS講座」、「JavaScript講座」をやっていた。
それぞれの初回を貼っておく。
HTML&CSS講座：
JavaScript講座：
なお、これから書いていく「jQuery」は、これらの内容を簡単にでいいので理解していることを前提とする。
1.「jQuery」とは&使い方
jQueryとは、簡単に言ってしまうと、JavaScriptを書くときに、ページの動きやコンテンツを扱いやすくするためのものだ。
もの…と書くとピンと来づらいかもしれない。
いきなりだが、このjQueryを使用するための方法を説明する。
多分、その方が分かりやすいと思う。
jQueryを使用するためには、以下の1文をHTMLのheadタグ内に記述するだけだ。
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.1.0/jquery.min.js"></script>…この書き方、どこかで見たことないだろうか。
そう、外部のJavaScriptを読み込むための記述だ。
ということは、このjQueryを使うためには、このsrcの部分にあるjsファイルを読み込めばいいとなる。
これが、jQueryの正体だ。
改めて、正式な用語も交えて書くと…
jQueryとは、JavaScriptのページの動き、コンテンツ等を扱いやすくするライブラリ
という説明になる。
このライブラリというのが、あらかじめ処理を記載しておき、コードを書くときの手助けをしてくれる外部のJavaScriptだ。
もちろん、jQuery以外にも様々な種類がある。
気になった方は、私の紹介を待つ必要なんてないので、どんどん調べてみてほしい。
2.どんなことができるの？
さて、どんなことができるかを簡単にお見せしておこう。
今までと違って、操作によってさまざまな動きが追加されるので、視覚的にも楽しいと思う。
以下の枠内に用意してみたので、いじってみてほしい。
もちろん、これ以外にも色々なことができる。あんなことはできるのか、とか思いながらいじってみるといいだろう。
コンテンツ
一応、ここのソースコードも記載しておく。
HTML部分(上に書いたjQuery読み込みも忘れずに)
<p id="sample-content">コンテンツ</p>
<p id="sample-err-content" style="display: none; color: red;">ここにエラーが表示されます</p>
<input id="button-sizeUp" type="submit" value="大きくする" />
<input id="button-sizeDown" type="submit" value="小さくする" />
$(function(){
function toBig(n){
n += 10;
if(n > 100){
return -1;
}
return n;
}
function toSmall(n){
n -= 10;
if(n < 1){
return -1;
}
return n;
}
$('#button-sizeUp').on('click',
function(){
var $str = $('#sample-content');
var $err_str = $('#sample-err-content');
var $fontSize_str = $str.css('font-size').replace('px', '');
var $fontSize = parseInt($fontSize_str);
var $fontSize_after = toBig($fontSize);
if($fontSize_after == -1){
$err_str
.text('これ以上大きくできません。')
.slideDown();
}else{
$err_str.slideUp();
var $fontSize_str_after = $fontSize_after + 'px';
$str.stop(true).animate(
{
fontSize: $fontSize_str_after
},
500
);
}
}
);
$('#button-sizeDown').on('click',
function(){
var $str = $('#sample-content');
var $err_str = $('#sample-err-content');
var $fontSize_str = $str.css('font-size').replace('px', '');
var $fontSize = parseInt($fontSize_str);
var $fontSize_after = toSmall($fontSize);
if($fontSize_after == -1){
$err_str
.text('これ以上小さくできません。')
.slideDown();
}else{
$err_str.slideUp();
var $fontSize_str_after = $fontSize_after + 'px';
$str.stop(true).animate(
{
fontSize: $fontSize_str_after
},
500
);
}
}
);
});
まとめ
いかがだっただろうか。
今回はまだ軽い紹介なので、大したことは書いていない。
次回から、本格的なコーディングについて解説していく。
もちろん、上でやったように、はてなブログでも使える形にするつもりだ。
更新情報はTwitterでも発信している。
続きが気になるという方は、チェックしてもらえればと思う。
次回：(未投稿)
それでは。
