web制作勉強会 #2
TRANSCRIPT
Web Designing Talk #2徹底入門！ jQueryウゴくページヘの道。
今日のテーマ
動きのあるページを作れるようになろう。
ウゴく
2
そのために…
「プログラミング」をしてもらいます。
ちょっと
3
典型的反応例
俺文系だからプログラミングとかできねーし。
4
黙れ小僧 ！
5
文系病
そういうのを文系病と言います。
6
ウゴ(動)くページを作ろう•ポインタを重ねると画像が変わる•クリックしたら詳細がウニョって出る•スライドショーっぽく画像が流れる
7
ページが動けば心も く題して、「恋する❤」ページを作る会
ウゴ
9
本日の内容
•実際に動かすには？• Javascriptについての解説(30秒)• jQueryとは？• Javascriptの書き方•ラクラクjQueryの使い方•秘技プラグインへの道•制作タイム
10
実際に動かすには？
• CSSで状態を定義する• Flash使っちゃう• Javascriptで動かす 今日はコレ
etc....
11
Javascriptについて
•ブラウザ上で動く事実上唯一のプログラミング言語。
• JavascriptとJavaは違う。•略すならJSと略しましょう。
以上。12
Javascriptについて
細かくやると。。Javascriptは元々Netscape社が開発したプロトタイプベースオブジェクト指向言語です。現在はECMAScriptという名前で標準化されており、この実装には各ブラウザのJavascriptの他にFlashのActionScriptやJScriptなどがあります。主にクライアントサイドで用いられるための言語として開発、普及が行われましたが、近年はnode.jsなどを始めとしたサーバサイドJSも注目を集めています。言語としての特徴は動的型付け言語で、前述のとおりプロトタイプベースの言語であること、またファイル制御などについては標準のIOを持たず、サンドボックス内で実行される前提になっているところに特徴がある。言語的には無名関数や高階関数をサポートしており、記述すると関数型言語のような記述になることが多いです。また、整数型を持たず、内部的には浮動小数点演算がベースになっているため、Javascript登場時には実行速度がすこぶる遅かったです。またサンドボックスの実装がこなれていなかったこともあり、IEではActiveXと組み合わさってセキュリティホールがいくつかあったため、実行速度の遅さと大した活用法が見出されていなかったこともあり、ほとんど普及していませんでした。しかし2000年代前半からGoogleMapsなどを始めとしたAjax技術の再発見により、言語の価値が再評価されることになりました。現在ではJavascriptの開発も徐々に大規模化してきており、prototype.jsやjQueryといったライブラリ化にとどまらず、CoffeeScriptのようなJavascriptの記述性を高めるために、Javascriptをターゲット言語としたコードジェネレータ実装まで登場し始めている。なお、言語の基本的な制御構文や演算子についてはC言語のそれらを下敷きにしているため、CやJavaを扱ったことのある人間であれば入り口はとっつきやすい。しかしオブジェクト指向の部分についてはC++やJavaといったクラスベースのオブジェクト指向言語とは異なるプロトタイプベースを採用しているため、慣熟にはそれなりに経験が必要と思われます。またバッドノウハウを必要とする場面も多く、オライリーのサイ本とチョウチョ本は事実上必携です。
割とどうでも良い。
13
jQueryとは？
• JavascriptでHTMLを動かすのをとっても簡単にしてくれるライブラリ
•実質業界標準•イカしてる 機能集のこと
14
Javascriptの書き方
書き方は主に2種類
• HTMLのonホニャララ属性に書く
• scriptタグの中に書く
15
<h1 onmouseover=”alert(‘マウスが乗った’)”>見出し</h1>
<script type=”text/javascript”> alert(“このプログラムがロードされた”);</script>
Javascriptの書き方
よく使うonホニャララ属性
•onmouseover/onmouseoutポインタが乗った時、離れた時
•onclick/ondoubleclickクリック時、ダブルクリック時
• onload読み込み完了時
16
ラクラクjQueryの使い方
jQueryの使用を宣言する。
HTMLの<head>～</head>の間に次をぶち込む。
17
<script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/1.8.3/jquery.min.js"></script>
ラクラクjQueryの使い方
全ては対象を操作する。
18
$(“#header”).attr(‘src’, ‘a.jpeg’);
対象 操作
ラクラクjQueryの使い方
CSSの記法で対象を選択するので直感的
19
$(“#header”).attr(‘src’, ‘a.jpeg’);
CSS記法 src属性をa.jpegに変更
ラクラクjQueryの使い方
各部の詳細。
20
$(“#header”).attr(‘src’, ‘a.jpeg’);
jQueryを使う宣言 文の終わり
何の機能を使うか
ラクラクjQueryの使い方
よく使う機能
21
attr 指定した属性を取得、変更
slide アニメーションを付ける
bind イベント発生時の処理を指定
ラクラクjQueryの使い方
もっと多彩な機能がほしい時は
22
http://semooh.jp/jquery/
秘技プラグインへの道
「何か」をしたいと思った時、すでにそれは誰かが作った後かもしれません。
23
巨人の肩に立つ。
秘技プラグインへの道
• 「jquery プラグイン」でググろう。• 自分が欲しい機能の名前を知ろう。• ライトボックス、カルーセル、スターレーティング、スライドショーetc
24
語彙が豊富な人でないと、インターネットを使うのは難しい。
秘技プラグインへの道
イイと思ったヤツははてブで公開中。
25
http://b.hatena.ne.jp/calcs/
Web Creation Seminar
ボクと契約して
Webデザイナーになってよ！