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

Webページで学ぶJavaScript2013 第6回

on

  • 715 views

 

Statistics

Views

Total Views
715
Views on SlideShare
715
Embed Views
0

Actions

Likes
0
Downloads
6
Comments
0

0 Embeds 0

No embeds

Accessibility

Categories

Upload Details

Uploaded via as Adobe PDF

Usage Rights

© All Rights Reserved

Report content

Flagged as inappropriate Flag as inappropriate
Flag as inappropriate

Select your reason for flagging this presentation as inappropriate.

Cancel
  • Full Name Full Name Comment goes here.
    Are you sure you want to
    Your message goes here
    Processing…
Post Comment
Edit your comment

Webページで学ぶJavaScript2013 第6回 Webページで学ぶJavaScript2013 第6回 Presentation Transcript

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