• Like
Webページで学ぶJavaScript2013 第6回
Upcoming SlideShare
Loading in...5
×

Thanks for flagging this SlideShare!

Oops! An error has occurred.

Webページで学ぶJavaScript2013 第6回

  • 430 views
Published

 

  • Full Name Full Name Comment goes here.
    Are you sure you want to
    Your message goes here
    Be the first to comment
    Be the first to like this
No Downloads

Views

Total Views
430
On SlideShare
0
From Embeds
0
Number of Embeds
0

Actions

Shares
Downloads
7
Comments
0
Likes
0

Embeds 0

No embeds

Report content

Flagged as inappropriate Flag as inappropriate
Flag as inappropriate

Select your reason for flagging this presentation as inappropriate.

Cancel
    No notes for slide

Transcript

  • 1. Webページで学ぶ JavaScript 2013 第6回 tyage@KMC 6/25
  • 2. どうも、アイスクリーム人間です ぁっぅぃ...
  • 3. いままでのあらすじ JavaScriptの基本構文(第0回〜第2回) ↓ HTMLの基礎(第2回〜第3回) ↓ CSSの基礎(第4回) ↓ JavaScriptとDOM(第5回) ↓ 今ココ!
  • 4. かなりハードスケジュール ● だったような気がするので、復習会が立ち上 がったみたいです ● https://www.kmc.gr.jp/pukiwiki/?Web% A5%DA%A1%BC%A5%B8%A4%C7%B3% D8%A4%D6JavaScript%202013#p5f0e301 ● まあ、のんびりやりましょうや
  • 5. 今日の予定 ● 前回はDOMの操作をJavaScriptでやりました ● 今回は、もっと簡単にDOM操作をするために 「jQuery」というライブラリを使います ● jQuery使ってサイトとか作ってみましょか ● 次回からどうするか、特に決まってないです・・・
  • 6. 前回やったこと ● かなり重要なこと(function)をやりました ● JavaScriptをやる際に、functionがわからないと 詰むので、軽く見なおしておきましょう
  • 7. jQuery ● こ↑れ↓ ○ http://jquery.com/ ● めちゃくちゃ使われているJavaScriptライブラリ ● 要は、これを使えばJavaScriptを使う際に色々 便利なことができるようになる
  • 8. 例えば 前回のこれ // プロフィール要素を取得してみよう var profile = document.getElementById("profile"); console.log(profile); // プロフィールのCSSを更新してみよう profile.style.fontSize = "100px";
  • 9. 例えば jQueryだともっと簡単にかけるよ! // プロフィール要素を取得してみよう var profile = $("#profile"); console.log(profile); // プロフィールのCSSを更新してみよう profile.css('font-size', 100);
  • 10. 例えば jQueryだともっと簡単にかけるよ! // プロフィール要素を取得してみよう var profile = $("#profile"); console.log(profile); CSSのセレクタが使える!!
  • 11. 例えば jQueryだともっと簡単にかけるよ! CSSと同じプロパティ名でいい // プロフィールのCSSを更新してみよう profile.css('font-size', 100);
  • 12. 例えば 前回の色を変える奴 var colors = ["red", "blue", "yellow", "green"], i = 0; profile.addEventListener("click", function() { profile.style.backgroundColor = colors[++i % 4]; });
  • 13. 例えば 前回の色を変える奴 var colors = ["red", "blue", "yellow", "green"], i = 0; profile.click(function() { profile.css("background-color", colors[++i % 4]); });
  • 14. 要素の取得 ● $("#id") ● $(".class") ● $("tag") ○ $("div"), $("p"), $("body") ● $("parent").find("children") ● $("something").each(function() { $(this) // <=要素を一つずつ操作 }) ● etc...
  • 15. 要素の操作 ● $("#hoge").fadeIn() ○ アニメーションも作れる ● $(".fuga").css("propaty", value) ● $("p").width(100).slideDown() ○ ドットでつなげて複数の操作をすることもできます(メソッ ドチェーン)
  • 16. その他いろいろ ● AjaxとかDeferredとか、数値・文字の判別とか
  • 17. 書いてみよう ● 適当なHTMLファイルを書いて、scriptから ● http://code.jquery.com/jquery-2.0.2.min.js ● これを読み込んで使おう $(function() { // ここにコードを書くといいよ });
  • 18. 制作物はこちら ● https://www.kmc.gr. jp/~tyage/uploader/
  • 19. お疲れ様でした ● 次回は来週です