CMP2-JQuery

Size: px

Start display at page:

Download "CMP2-JQuery"

せとかひでやま
5 years ago
Views:

1 JQuery Chrome HTML CSS JavaScript) JQuery Chrome JavaScript

2 jquery www lib lib <script src

net/ 1 <body> <p> </p> <script> $(function() { $('p').

3 jquery $() jquery() jquery( function(){... } ); jquery( '#hoge' ).on(... ); jquery( '#hoge' ).css(... ); $(function(){ }); jquery 1 <body> <p> </p> <script> $(function() { $('p').css('color', 'red'); }); </script> </body> $('p').css('color', 'red').css('background', 'yellow'); $('p').addclass('mystyle');

4 element tag : $("tagname") id : $("#idname") class : $(".classname") <p id="one">, <p class="one">

5 ( ) $('p').show(1000); $('p').hide(1000); $('p').fadein(1000); $('p').fadeout(1000); $('p').toggle(1000); $("#idname >.classname").css('color', 'red'); idname classname $("#idname").children().css('color', 'red'); idname

6 <p><a href=" </a></p> $('a[href=" 'red'); =!= *=.ac.jp alert($('p').css('color')); p jsfiddle console.log( " " ); alert( " " ); document.write( " " );

7 <p><a href=" </a></p> alert($('a').attr('href')); $('a').attr('href', ' $('p').text(' '); $('p').html('<html >');.empty().remove()

8 $('p').fadeout(1000, function() { }); alert("goodbye"); $('p').click(function() { }); alert("hello!"); function

9 mouseover: mouseout: mousedown: mouseup: mousemove: click: dblclick: keydown: keyup: focus: blur: change: resize: scroll: Query UI (jqueryui.com)

12 jquery jquery UI API Documentation jquery jquery UI Chrome

コンテンツメディアプログラミング実習 II 第 5 回 (2) デバッグの実際 3 組宮下中村 4 組菊池斉藤 Google Chrome Developer Tools(DevTools) 入門 Web 開発でよく使う特に使える Chrome デベロッパーツールの機能を参考にしています http://www.buildinsider.

13 コンテンツメディアプログラミング実習 II 第 5 回 (2) デバッグの実際 3 組宮下中村 4 組菊池斉藤 Google Chrome Developer Tools(DevTools) 入門 Web 開発でよく使う特に使える Chrome デベロッパーツールの機能を参考にしています他にもなどたくさんありますショートカットもちょくちょく覚えるといいです!

Chromeのデベロッパーツールにもっと慣れよう F12での起動要素の検証での起動 ESCで閉じる右上のクリックでも可 Google Chrome Developer Tools(DevTools) 入門 Web 開発でよく使う特に使える Chrome デベロッパーツールの機能

スマートフォンなどの表示を確認するためのエミュレーションウィンドウの表示 / 非表示を切り替えるデバイスモードアイコン 3. 各タブはパネルと呼ばれておりこのパネルで機能を切り替えることができる 4.

14 Chromeのデベロッパーツールにもっと慣れよう F12での起動要素の検証での起動 ESCで閉じる右上のクリックでも可 Google Chrome Developer Tools(DevTools) 入門 Web 開発でよく使う特に使える Chrome デベロッパーツールの機能より 1. Webページ上の要素をマウスを使って選択できる虫眼鏡アイコン 2. スマートフォンなどの表示を確認するためのエミュレーションウィンドウの表示 / 非表示を切り替えるデバイスモードアイコン 3. 各タブはパネルと呼ばれておりこのパネルで機能を切り替えることができる 4. デベロッパーツールの下部へのドロワー ( その中にはConsole/Search/Emulation/Rendering タブがある ) の表示 / 非表示を切り替えるドロワー (= 引き出しを意味する drawer ) は実際に引き出しのように下からスライドして表示されたり隠されたりする 5. デベロッパーツールの詳細な設定をする設定ダイアログの表示 / 非表示を切り替える 6. デベロッパーツールを別ウィンドウにするか下辺か右辺のいずれかにドックするかを切り替える 2

15 [Elements] パネルすでにこのパネルは慣れていると思いますが復習右クリックから Edit as HTML を選ぶと要素ごと編集できて便利 1 虫眼鏡アイコンマウスカーソルで検証したい要素を選択して DOM ツリーを選択状態にできる 2DOM エレメントツリー 3 サイドバー 4 パンくずリスト 3

16 要素に設定されている属性やスタイルを確認可能 user agent stylesheet というのはブラウザに設定されているスタイルのことね! 継承されたスタイルは Inherited from って書いてあります数値を矢印キーで上下させられたりカラーパレットを出せたり色々便利 a:hoverなど a 要素におけるCSS ( 疑似クラス ) をいじるときはこれを押す 4

ダウンロードにかかった時間上がリクエストから受信が完了するまでの時間下がリクエストから受信開始するまでの時間 4[Preserve log]( ログの保持 ):

17 [Network] パネルページのリクエストとダウンロードされるまでの時間が表示される 1[Status] 列 : HTTPステータス 2[Initiator] 列 : ファイルを呼び出す起点例えば JavaScriptコードから読み込まれたときにはその JavaScriptファイル名が表示される 3[Time] 列 : ダウンロードにかかった時間上がリクエストから受信が完了するまでの時間下がリクエストから受信開始するまでの時間 4[Preserve log]( ログの保持 ): ページを遷移してもログを残しておくように設定する 5フィルター : フィルターアイコン () をクリックすると ( のようにアイコンの色が変わり ) リクエストの種類をフィルターして特定の項目だけの表示に切り替えられる 5

18 [Sources] パネル CSSやJavaScriptをデバッグできる!! 1 ページのソースファイルを一覧表示するnavigatorを表示 2 ソースビュー 3 サイドバー 4 コード整形ボタン ( 便利!) Ctrl+S の保存はブラウザ内の保存にすぎないので注意! ( ファイル名を右クリック Local Modifications で見られる ) ほんとに保存したいときは Save As を選んでください 6

19 JS のエラーをデバッグ JSの文法エラーがある場合は右上に印が出るコンソールにエラーメッセージが出る右にどこでエラーがあるかも出ているのでクリックしてジャンプ! 正しく JS プログラムを用意しそれを少し壊して実行してみてどういうエラーが出るか試してみよう! 7

20 デバッガー機能のブレークポイントを使おう行番号をクリックするとブレークポイントが設定できるそこで処理が止まるさらにマウスオーバーするとそれぞれの変数の中身とかみんな見れちゃう!! 関数の中に入る / 入らないステップ実行がある JS のプログラムを用意して試してみよう 8

21 [Console] パネルページのエラー等の情報表示およびコマンド入力が可能オートコンプリートも便利 Shift+Enter で複数行の入力も可能 (Enter で実行ね ) 1 フィルターの表示 / 非表示を切り替える 2 コンソールログを表示するフレームを選択する 3 チェックを付けるとページを遷移してもコンソールログを残すことができる 9

22 コンソール上で使える特殊な関数 $ document.getelementbyidのショートカット $$ document.queryselectorallのショートカット $x document.evaluate(xpath) のショートカット $1, $2, $3, $4 $1から $4にはコンソールでの実行結果が4 回分だけ記憶されています copy(text) 引数に渡した文字列をクリップボードにコピー dir(object) 引数に渡したオブジェクトを解析 (DOM 要素を渡したときもオブジェクトとして扱う ) dirxml inspect 引数に渡したノードをツリー表示引数に渡したオブジェクトに応じて適切に解析を行う (localstorageを渡すとstorage パネルに切り替えるなどの処理も行う ) keys monitorevents オブジェクトのプロパティを配列で返す引数に渡したDOMについて各種イベントを監視する第 2 引数で監視するイベントの種類を制御できる unmonitorevents monitoreventsを解除 profile JavaScriptのプロファイリングを開始する profileend JavaScriptのプロファイリングを終了する values オブジェクトが持つ値を配列で返す 10

23 Web アプリケーション構築ってしんどいよねいろんな言語を使ういろんなAPIを使う複合的に使う連携して使うよくわからないまま使う ( 詳細な仕様なんて知らん ) 付け焼き刃の理解のまま勘でいじって組み合わせていくのははっきりいってストレスが大きいかもしれないでもスタンドアロンアプリでは絶対できないことができる! ネット上の大きな力を手に入れることができる! 11

24 心構え的なこと実は知識量の差ではない! プログラミングが得意な人がプログラミングしてるのを観察してみよう! バグっても平静を保っているなかなかデバッグできなくても全然焦らないきっといつかバグはとれるという確信があるのかも最初は動かなくて当たり前と思ってるのかも物事を怖がらないもし親にパソコンやスマホについて質問されたとしたら? しかもそれが慣れ親しんでいない OS の未知の質問だったとしたら? でもけっこう解決できるなぜか? 12

25 サーバーサイドプログラミングを学んだ後の応用実習に向けて配られた資料が全部理解出来なくてもできるかも配られた資料だけで十分ではないかも調べながらプログラミングする姿勢が大事英語のドキュメントでもビビらない自信がない人は本屋に行ってみよう! JavaScript や JQuery などを冠した本が山ほどある 13

26 課題 ( レポート ) クライアントサイドアプリケーション制作においてどのようなバグをどのようなデバッグ手法で直したか複数の事例とともにレポートとして提出してください単純な文法エラーではなくエラーがないのに意図した動作にならないバグを対象とします 14

Microsoft PowerPoint - CMP2_2デバッグ

Microsoft PowerPoint - CMP2_2デバッグコンテンツメディアプログラミング実習 II 第 5 回 (2) デバッグの実際 3 組宮下中村 4 組菊池斉藤 Google Chrome Developer Tools(DevTools) 入門 Web 開発でよく使う特に使える Chrome デベロッパーツールの機能を参考にしています http://www.buildinsider.net/web/chromedevtools/01 他にも