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%D6Ja...
今日の予定
● 前回はDOMの操作をJavaScriptでやりました
● 今回は、もっと簡単にDOM操作をするために
「jQuery」というライブラリを使います
● jQuery使ってサイトとか作ってみましょか
● 次回からどうするか、特に決ま...
前回やったこと
● かなり重要なこと(function)をやりました
● JavaScriptをやる際に、functionがわからないと
詰むので、軽く見なおしておきましょう
jQuery
● こ↑れ↓
○ http://jquery.com/
● めちゃくちゃ使われているJavaScriptライブラリ
● 要は、これを使えばJavaScriptを使う際に色々
便利なことができるようになる
例えば
前回のこれ
// プロフィール要素を取得してみよう
var profile = document.getElementById("profile");
console.log(profile);
// プロフィールのCSSを更新してみよ...
例えば
jQueryだともっと簡単にかけるよ!
// プロフィール要素を取得してみよう
var profile = $("#profile");
console.log(profile);
// プロフィールのCSSを更新してみよう
profi...
例えば
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() {
profi...
例えば
前回の色を変える奴
var colors = ["red", "blue", "yellow", "green"],
i = 0;
profile.click(function() {
profile.css("background-c...
要素の取得
● $("#id")
● $(".class")
● $("tag")
○ $("div"), $("p"), $("body")
● $("parent").find("children")
● $("something").ea...
要素の操作
● $("#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/
お疲れ様でした
● 次回は来週です
Upcoming SlideShare
Loading in...5
×

Webページで学ぶJavaScript2013 第6回

523

Published on

0 Comments
0 Likes
Statistics
Notes
  • Be the first to comment

  • Be the first to like this

No Downloads
Views
Total Views
523
On Slideshare
0
From Embeds
0
Number of Embeds
2
Actions
Shares
0
Downloads
8
Comments
0
Likes
0
Embeds 0
No embeds

No notes for slide

Webページで学ぶJavaScript2013 第6回

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

    Clipping is a handy way to collect important slides you want to go back to later.

×