2015-02-06

アニメーションの続き

今日は簡単なアニメーションjQueryのhide()とtoggle()の勉強をしました。

参考書で少し気になったのが、セミコロン(;)の扱いです！命令の一番後ろに記述するセミコロンですが、命令が続いた時、最初の命令にはセミコロンを付けないようです。うーん、ややこしいです。

「命令の後ろにはセミコロン」と思っていた考えを少し改めなければ、です。

(今回はshow()とhide()を使った例にあったものです。それぞれのボタンをクリックしてdiv要素を表示・非表示にしました。)

それと！

:not(:animated)にすることでアニメーションが続くというエラーをなくす方法も書いてありました。参考書をパラパラめくってみると、この書き方は覚えておくべきっぽいです。

セレクタを指定してあげる時は

$(' div:not(:animated) ')

のようにする感じです。

次のブログでこの基礎の章を終わらせたいです！次の章は面白そう！(^ ^)

2015-02-05

今日から簡単なアニメーションjQuery！

２－６章では簡単な

show()、hide()、fadeあたりが登場してきます。

まずはshow()！

参考書では<button>をクリックするとdiv要素を表示させる命令が例としてあげられていました。

参考書にも書いてありましたが、jQueryはcssと合わせて記述しないと動きません。

div要素をCSSでdisplay: none;にしておいてからのjQueryでshow()にする命令をします。

ググるといろんなjQueryが紹介されていますが、やはりCSSとjQuery合わせて紹介されていますよね。

あと、コールバック！

jQueryのアニメーションが終わった後の処理なんかも指定できます。

$(' セレクタ ').show( ' スピード ',コールバック関数 );

で指定してあげます。

参考書ではshow()のあとにdiv要素の背景を赤から青に指定してあげています。

コールバック関数と合わせて考えると、いろいろな動きが出来そうです！

今日はここまでです。

ちょっと短くなってしまいました。。明日はもう少しかけるよう頑張ります。(^ ^;;

2015-02-04

Ajaxを使ってみよう

参考書の２－５になると、Ajaxが登場しました。

正直「Ajax」ってなんだろう。。という感じで今まで触れてこなかった分野です。ですがさすがドーナツ本、すごく解りやすく解説されていました。

html内にあるリンクをクリックすると別のhtmlを読み込みますね。ですがhtmlを読み込むのに時間がかかってしまうのだそう。なのでAjaxを使ってページを切り替えずに一部だけを書き換えることで、非常にWebページとして操作しやすくなります。

出てきたjQueryが「load()」です。

自分でtest.htmlを作ってみたのですが、

まずheader内のscriptを

こいつに書き換えました。参考書もこれになっていたので。

それと参考書にも書かれていましたが、どうやらGoogle ChromeではAjaxが実現できない模様です。なのでSafariなど別のブラウザでブラウザ表示しなければなりません。

どうしてもChromeで見たい場合はローカルでサーバー環境を作ることです！

load()カッコ内の記述はいたってシンプルです！

とりあえず気を付けたいのが、書き換える場所の要素を

$(' p ').load(' ./sample02.html p ');

と書いてしまうと、pタグを置き換えるときにpタグの入れ子が発生する事態に…。

<p><p>置き換えられた後のテキスト</p></p>

ここはdivで外側を囲うことで回避するのが良いようです。

$(' div ').load(' ./sample02.html p ');

Ajaxはまだまだ何かありそうですが、参考書はこのくらいのようです。

明日からいよいよアニメーション効果で動きをつけます！

予告ですが、近々新しくサーバーを借りてWordpressで自分のブログを作ろうと思っています。はてなブログでは学んだことを書くだけで終わってしまいますから。。

自分の好きなようにWordpressをカスタマイズして、ブログをつけていきたいです～。

jQueryのテストも実現できるのではないかと期待しています‼

しばしお待ちを‼‼

2015-02-03

フォームの続き

①フォームの内容変更を感知するchange()

change()はフォームの内容が変更されることを感知する命令です。

実際のフォームでは、例えばセレクトボックスの選択行を変更すると、自動的にテキストが変わるなどです。

（例）

申込者：
<select>
<option value="お名前">個人</option>
<option value="会社名">法人</option>
</select>
<p><span>お名前</span><input type="text"></p>
<script>
$(function(){
$('select').change(function(){
$('span').text($(this).val());
});
});
</script>

②フォームの送信を感知するsubmit()

submit()はフォームの送信ボタンがクリックするときに発生するイベント処理を実行します。フォームは送信されるとform要素に記述されているaction属性のURLに対して、form要素内のフォーム部品で入力、選択されている情報を送信します。送信前にsubmit()で処理を実行します。ちなみにreturn false;で送信をキャンセルです。

$(function(){
$('form').submit(function(){
if($('input[name="name"]').val()==''){
if($('span').css('font-weight')!= 'bold'){
$('input[name="name"]').css('border', '1px solid red').after('<span>名前を入力してください</span>');
$('span').css({
'color': 'red',
'font-weight': 'bold'
});
}
return false;
}
});
});

submit()でお問い合わせフォームのチェック機能を追加できます。name属性をval()で取得、入力・未入力をifで判断します。

ですが、命令は一度表示すればいいので、参考書ではさらにif文でfont-weight:bold;かを判断することで回避しています。

③フォーム部品を選択するセレクタ

⚫︎チェックの入っているフォーム部品を選択する :checked

:checkedはラジオボタンやチェックボックスでチェックが入っている要素だけを選択します。

$(function(){
$('input[type="checkbox"]').click(function() {
$('label').css('background', '');
$(':checked').each(function(){
$('label[for="'+ $(this).attr('id') +'"]').css('background', '#ccc');
});
});
});

例にeach()が出てきましたが、参考書の先の章で解説してくれるようです。

⚫︎選択されている要素を選択する :selected

:selectedはセレクトボックスで選択されている要素だけを選択できます。

フォームがかなりそれらしくなってきました！

例文を試しに打ち込んでみると、少し記述を間違えるだけで動いてくれません…。

また、例文も難易度が上がってきました。

基礎で出てきた命令文やセレクタの繰り返しのようですので、どんなに複雑でもまだまだ対応できると思います。

2015-02-01

フォーム機能を使いこなそう　val()

これからフォームをjQueryで操作していきます。

前回に引き続き、自分のメモのような感じで書いていきます。

フォーム部品の値を取得・変更する命令

フォームを操作する専用の命令がval()です。val()を使うと、フォームに入力または選択されている値（value属性の値）を取得・変更できます。

<p>メールアドレス：<input type="text" name="name"></p>
<button>確認</button>
<script>
$(function(){
    $('button').click(function(){
        $('p').text($('input').val() + 'にメールします');
        $('button').text('送信');
    });
});
</script>

input要素の値を取得し、pタグに「【inputに記述したメールアドレス】にメールします」という確認メッセージを書き出します。

select／option要素　　$('select').val()

textarea要素　　　　　　$('textarea').val()

●　value属性の値を変更する

<p>お名前：<input type="text"><button>クリア</button></p>
<script>
$(function(){
    $('button').click(function(){
        $('input').val('');
    });
});
</script>

buttonをクリックするとval('')の空要素、つまりinput内がクリアになります。

●　フォーカスを感知するfocus()

input要素などのフォーム部品がマウスやタブキーによって選択された状態（フォーカス状態）になったことを感知し、設定された処理を実行します。

（例）最初はinput内に薄いグレーで「入力してください」を置く。inputをクリックするとテキストがなくなり、黒で文字が打てるようになる。もう一度クリックしたときにまた戻らないように一度だけ命令を実行する「one()」を併用する。

●　フォーカスが外れたことを感知するblur()

if文を使ってinput内を操作

<p>お名前：<input type="text" value=""></p>
<script>
$(function(){
    $('input').val('入力してください').css('color', '#ccc').one('focus', function(){
        $(this).val('').css('color', '#000');
    }).blur(function(){
        if($(this).val()==''){
            $(this).val('入力してください').css('color', '#ccc').one('focus',function(){
                $(this).val('').css('color', '#000');
            });
        }
    });
});
</script>

if文も覚えていきます。if文はいろいろな場面に登場していくので、絶対に使いこなしたいです！

if(条件){

条件が正しい場合に実行する処理

}

●比較演算子

①==　　左右の値が等しい

②!=　　左右の値が等しくない

③>　　　左の値が右の値よりも大きい

④<　　　左の値が右の値よりも小さい

⑤>=　　左の値が右の値よりも大きい、もしくは同じ

⑥<=　　左の値が右の値よりも小さい、もしくは同じ

if文の条件は複数指定することができ、すべての条件を満たしたいときは&&、どれかが正しいときに実行させたい場合は||でつなげて記述します。

if(条件１ && 条件２){

条件１と条件２が正しい場合の処理

}

if(条件１ || 条件２){

条件１、条件２のどちらかが正しい倍に実行する処理

}

条件を満たしていない場合はelse,else ifでつなげます。

if(条件){

条件が正しい場合に実行する処理

}else{

条件が正しくない場合に実行する処理

}

if(条件１){

条件が正しい場合の処理

}else if(条件２){

条件２が正しい場合の処理

}else{

条件１、条件２が正しくない場合の処理

}

次回もフォームをやっていきます。実はまだまだ参考書の前半だったり…。

2015-02-01

イベントでタイミングを設定する

続きまして、

参考書『Web制作の現場で使うjQueryデザイン入門』の２－３にあたります。

◎Webページ全体の読み込みが終わり、準備が出来てからscript要素内の処理を実行させるために、

$(function(){
    $('button').click(function() {
        /* Act on the event */
    });
});

このように、$(function(){});の内側にスクリプトを記述していきます。

①click()

（例）

<button>画像を変更</button>
<p><img src="images/01.jpg" alt="01"></p>
<script>
$(function(){
    $('button').click(function(){
        $('img').attr('src', 'images/02.jpg').attr('alt', '02');
    });
});
</script>

●　a要素に設定したclickイベントの処理が動かない

href属性に設定されたリンク先のURLを開いてしまうため、

return false;で回避します。

（例）

<a href="images/02.jpg">画像を変更</a>
<p><img src="images/01.jpg" alt="01"></p>
<script>
$(function(){
    $('a').click(function() {
        $('img').attr('src', 'images/02.jpg').attr('alt', '02');
        return false;
    });
});
</script>

◎$(this)

イベントが発生した要素を取得できる

（例）

<ul>
    <li><a href="images/01.jpg" alt="01">01</a></li>
    <li><a href="images/02.jpg" alt="02">02</a></li>
    <li><a href="images/03.jpg" alt="03">03</a></li>
</ul>
<p><img src="images/04.jpg" alt="04"></p>
<script>
$(function(){
    $('a').click(function(){
        $('img').attr('src', $(this).attr('href')).attr('alt', $(this).text());
        return false;
    });
});
</script>

②ダブルクリックイベントを感知するdblclick()

記述の仕方はclick()と同じ

<button>画像を変更</button>
<p><img src="images/01.jpg" alt="01"></p>
<script>
$(function(){
    $('button').dblclick(function() {
        $('img').attr('src', 'images/02.jpg').attr('alt', '02');
    });
});
</script>

●dblclick()をクリックするとa要素が動かない

click()と同じようにreturn false;を追記してもうまく動作しない。

dblclick()用のreturn false;の記述を覚えておく必要があります。

（例）

<a href="images/02.jpg">画像を変更</a>
<p><img src="images/01.jpg" alt="01"></p>
<script>
$(function(){
    $('a').dblclick(function() {
        $('img').attr('src', $(this).attr('href')).attr('alt', $(this).text());
    }).click(function(){
        return false;
    });
});
</script>

③マウスのボタン操作を感知する　mousedown()／mouseup()

④マウスオーバー／マウスアウトを感知する　mouseover()／mouseout()

⑤マウスの動きに合わせて処理を実行するmousemove()

mousemove()は、特定の要素上でマウスカーソルが動いた場合に処理を実行できます。

実際にmousemove()を利用するのは、座標などの情報を取得する命令と組み合わせるケースがほとんどです。

mousemove()内のfunction()をfunction(e)にすると、イベント発生時にe.clientXで現在のマウスのX座標、e.clientYでマウスのY座標を取得できます。X座標とY座標はブラウザの左上からマウスカーソルまでの距離をピクセルで表したものです。

（例）

<img src="images/01.jpg" height="640" width="1024" alt="01">
<p></p>
<script>
$(function(){
    $('img').mousemove(function(e) {
        $('p').html('現在のX座標は'+ e.clientX +'<br>現在のY座標は'+e.clientY);
    });
});
</script>

img要素上でマウスカーソルが動いている場合に、カーソルのX座標とY座標をp要素に書き出すスクリプトです。

⑥イベント発生時に一度だけ処理を実行するone()

$(セレクタ).one('イベント発生の条件', function(){

イベント発生時に実行する処理

});

（例）

<ul>
    <li><a href="images/01.jpg">01</a></li>
    <li><a href="images/02.jpg">02</a></li>
    <li><a href="images/03.jpg">03</a></li>
</ul>
<p><img src="images/04.jpg" alt="04"></p>
<script>
$(function(){
    $('ul').on('click', 'a', function(){
        $('img').attr('src', $(this).attr('href')).attr('alt', $(this).text());
        return false;
    });
});
</script>

on()を使った書き方のメリットは、実行した時点でHTMLに存在していない要素、将来追加される要素にもイベント処理を登録しておける点です。

（例）

下の記述ではbuttonクリック時に追加されるli要素のaをクリックしても画像が表示されません。

<button>li要素を追加</button>
<ul>
    <li><a href="images/01.jpg">01</a></li>
    <li><a href="images/02.jpg">02</a></li>
    <li><a href="images/03.jpg">03</a></li>
</ul>
<p><img src="images/04.jpg" alt="04"></p>
<script>
$(function(){
    $('a').click(function(){
        $('img').attr('src', $(this).attr('href')).attr('alt', $(this).text());
        return false;
    });
    $('button').click(function(){
        $('ul').append('<li><a href="images/04.html">04</a></li>');
    });
});
</script>

script内の記述にon()を追加　↓

$(function(){
    $('ul').on('click', 'a', function(){
        $('img').attr('src', $(this).attr('href')).attr('alt', $(this).text());
        return false;
    });
    $('button').click(function(){
        $('ul').append('<li><a href="images/04.jpg">04</a></li>');
    });
});

だんだんscript内の記述が長くなってまいりました。今回ちょっとややこしかったのが、return false;の記述場所でしょうか。あと、複数命令を記述するときの場所もややこしいように感じました。この参考書を終える頃にはこのあたりも完璧にしておきたいです！

2015-02-01

HTML／CSSを操作するjQueryの命令（続き）

前回のブログに引き続き、HTML・CSSを操作する命令について書いていきます。

属性値の変更と取得

①属性値の変更　attr()　・　属性値の取得　attr()

（例）

<a href="http://google.co.jp">リンク先</a>
<script>
$(function(){
$('a').attr('href', 'http://yahoo.co.jp/');
});
</script>

（例）

<a href="http://google.co.jp">リンク先</a>
<script>
$(function(){
$('a').text($('a').attr('href'));
});
</script>

②属性値の削除　removeAttr()

<a href="http://google.co.jp" target="_blank">リンク先</a>
<script>
$(function(){
$('a').removeAttr('target');
});
</script>

③class属性の追加　addClass()

④class属性の削除　removeClass()

⑤cssの制御

<p>テキストテキストテキストテキスト</p>
<script>
$(function(){
    $('p').css({
        'background-color': 'yellow',
        'font-weight': 'bold',
        'color': 'red'
    });
});
</script>

CSSプロパティの取得　css()

（例）

<p>テキストテキストテキストテキスト</p>
<script>
$(function(){
$('p').text($('p').css('color'));
});
</script>

結果　↓

rgb(0, 0, 0)　が表示される

◎メソッドチェーン

jQueryでは命令と命令をドット（.）でつなげて記述することで、１つのセレクタに対して２つ以上の命令を連続して実行できます。

（例）

<p>テキストテキストテキストテキスト</p>
<script>
$(function(){
$('p').prepend('<strong>先頭に挿入</strong>').append('<strong>後ろに挿入</strong>');
});
</script>

まだシンプルな命令ではありますが、自分でscriptを書いてみて実際にその通りの動作をしてくれると嬉しいです(^ ^)。次回のブログはやっと登場、イベントについてです！