デザイナー向けのjQuery勉強会に参加しました！jQueryやJavascriptの基礎を教えていただきました。
今回のセミナーの内容について
jQueryについての説明のあと、clickイベントを使ったワークショップ、Animate.cssのワークショップがありました。この記事は、自分メモが中心です。
「$(function(){ });」の意味
jQueryを使うとき、よく$(function(){ });の中に、コードを書きます。$(document).ready(function() { });の省略形で、document（HTML）を全て読み込んだ後に実行するという意味だそうです。
「引数 (e)」の秘密と「console.log( );」
【３行目】clickしたとき、などによく書くfunction(e)。この(e)は、セレクタp（下記の場合’#myP’）の情報が引数eに入るという意味だそうです。この(e)には、クリックしたときなどのイベント情報が渡されます。eでなくても、eventなど他の引数名に変更可能です。（eは、eventの略みたいです。）
【５行目】console.log(e);でブラウザの開発ツール内のconsoleに表示されます。
console.log();便利ですね。
[code]$(function(){ //$(document).ready(function() {
var p = $(‘#myP’);
p.on(‘click’, function(e) {
p.toggleClass(‘clicked’);
console.log(e);
});
});[/code]
カモメ括弧 {} で囲むオブジェクトリテラル
オブジェクトを囲むときは、カモメ括弧{}で囲みます。{}の中は、コロン:で区切られた名前と値のセットになり、名前と値のセットは、カンマ ,で区切ります。最後に書く名前と値のセットの末尾には、カンマ ,をつけません。
以下は、変数styleに{}内のオブジェクトを代入しています。
[code]var style= {
"font-size":"50px",
"display":"block",
"background":"#AAA"//最後のカンマは入れない
};[/code]
変数宣言の「var」は必ずつけること：スコープ
スコープは、変数の有効範囲です。JavaScriptのスコープには、グローバル変数とローカル変数があります。グローバル変数は、プログラム全体から参照でき、ローカル変数は宣言した関数の中でのみ参照できます。
[code]var b = ‘Global’;
var scopetest = function(){
var b = ‘Local’;
return b;
}
console.log(scopetest()); //’Local’
console.log(b); //’Global'[/code]
function(){...} 内で変数を宣言する場合に、varをつけ忘れるとグローバル変数になるので、変数の宣言にはvarをつけましょう！
[code]var b = ‘Global’;
var scopetest = function(){
b = ‘Local’;
return b;
}
console.log(scopetest()); //’Local’
console.log(b); //’Local'[/code]
「debugger;」でBreakpointを作る
スクリプトを任意の場所（Breakpoint）でプログラムをとめて、デバッグする際には、debugger;を途中に入れて、ブラウザで表示するとdebugger;の位置でスクリプトが一旦停まります。
Animate.cssの実装
（１）公式サイトAnimate.cssからcssをダウンロードして、link設定をする。
（２）セレクタp = $('.textsample');へ、イベント'mouseover'時にclass='animated flip'を追加する。
（３）イベント'mouseout'時にclass='animated flip'を削除する設定をする。
[code]<!DOCTYPE html>
<html lang="ja-JP">
<head>
<meta charset="utf-8">
<title>animate.css</title>
<style>
.test p{
background-color: #fcc;
padding: 5px;
text-align: center;
font-size: 20px;
}
</style>
<!–（１）–>
<link rel="stylesheet" href="animate.css">
<script src="http://code.jquery.com/jquery-2.1.0.min.js"></script>
<script>
$(function(){
//（２）
var p = $(‘.textsample’);
p.on(‘mouseover’,function() {
p.addClass(‘animated flip’);
});
//（３）
p.on(‘mouseout’,function() {
p.removeClass(‘animated flip’);
});
});
</script>
</head>
<body>
<div class="test">
<p class="textsample">animated flip</p>
</div>
</body>
</html>[/code]
上記で、flip（くるっと横に一回転）するアニメーションをセレクタに設定できます。動きはAnimate.css公式サイトから選べます！
アニメーションの速度は、animate.cssの.animatedで設定されていますので、変更時はその部分を修正するか、別途classにanimation-durationの設定をするなどして対応できるようでした。
[code].animated {
-webkit-animation-duration: 1s;
animation-duration: 1s;
-webkit-animation-fill-mode: both;
animation-fill-mode: both;
}[/code]
最後に感想など
10年以上使っているJavascriptへの理解がすごく深まったセミナーでした。デバッグの方法をしっかり教えていただけたので、今後つまづいたときは、どこが動かなくなっているのかチェックできるようになりたいです。講師のみなさま、ご一緒させていただいたみなさまありがとうございました。
技術的な表記などに間違いがありましたら、教えていただければうれしいです。掲載された記事の情報もしくは内容を利用することで直接・間接的に生じた損失に関しては、一切責任を負いかねます。導入等はご自身の責任で行ってください。
