Download as PDF, PPTX
Web制作勉強会 #2
- 1. Web Designing Talk#2 徹底入門！ jQuery ウゴくページヘの道。
- 2. 今日のテーマ ウゴく 動きのあるページを作れるようになろう。 2
- 3.
- 4.
- 5. 黙れ小僧！ 5
- 6. 文系病 そういうのを文系病と言います。 6
- 7. ウゴ(動)くページを作ろう • ポインタを重ねると画像が変わる • クリックしたら詳細がウニョって出る • スライドショーっぽく画像が流れる 7
- 8. ページが動けば心も く ゴ ウ 題して、「恋する❤」ページを作る会
- 9.
- 10. 本日の内容 •実際に動かすには？ • Javascriptについての解説(30秒) • jQueryとは？ • Javascriptの書き方 • ラクラクjQueryの使い方 • 秘技プラグインへの道 • 制作タイム 10
- 11. 実際に動かすには？ •CSSで状態を定義する • Flash使っちゃう 今日はコレ • Javascriptで動かす etc.... 11
- 12. Javascriptについて • ブラウザ上で動く事実上唯一のプログ ラミング言語。 • JavascriptとJavaは違う。 • 略すならJSと略しましょう。 以上。 12
- 13. 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
- 14. jQueryとは？ • JavascriptでHTMLを動かすのをとっ ても簡単にしてくれるライブラリ • 実質業界標準 機能集のこと • イカしてる 14
- 15. Javascriptの書き方 書き方は主に2種類 • HTMLのonホニャララ属性に書く <h1 onmouseover= alert( マウスが乗った ) >見出し</h1> • scriptタグの中に書く <script type= text/javascript > alert( このプログラムがロードされた ); </script> 15
- 16. Javascriptの書き方 よく使うonホニャララ属性 • onmouseover/onmouseout ポインタが乗った時、離れた時 • onclick/ondoubleclick クリック時、ダブルクリック時 • onload 読み込み完了時 16
- 17. ラクラクjQueryの使い方 jQueryの使用を宣言する。 HTMLの<head>∼</head>の間に次をぶ ち込む。 <script type="text/javascript" src="https:// ajax.googleapis.com/ajax/libs/jquery/ 1.8.3/jquery.min.js"></script> 17
- 18. ラクラクjQueryの使い方 全ては対象を操作する。 $( #header ).attr( src , a.jpeg ); 対象 操作 18
- 19. ラクラクjQueryの使い方 CSSの記法で対象を選択するので直感的 $( #header ).attr( src , a.jpeg ); CSS記法 src属性をa.jpegに変更 19
- 20. ラクラクjQueryの使い方 各部の詳細。 何の機能を使うか $( #header ).attr( src , a.jpeg ); jQueryを使う宣言 文の終わり 20
- 21. ラクラクjQueryの使い方 よく使う機能 attr 指定した属性を取得、変更 slide アニメーションを付ける bind イベント発生時の処理を指定 21
- 22. ラクラクjQueryの使い方 もっと多彩な機能がほしい時は http://semooh.jp/jquery/ 22
- 23. 秘技プラグインへの道 「何か」をしたいと思った時、すでにそ れは誰かが作った後かもしれません。 巨人の肩に立つ。 23
- 24. 秘技プラグインへの道 •「jquery プラグイン」でググろう。 • 自分が欲しい機能の名前を知ろう。 • ライトボックス、カルーセル、スター レーティング、スライドショーetc 語彙が豊富な人でないと、 インターネットを使うのは難しい。 24
- 25. 秘技プラグインへの道 イイと思ったヤツははてブで公開中。 http://b.hatena.ne.jp/calcs/ 25
- 26. ボクと契約して Webデザイナーになってよ！ Web Creation Seminar