webページで学ぶjavascript2013 第6回
Post on 24-May-2015
497 Views
Preview:
TRANSCRIPT
Webページで学ぶJavaScript 2013 第6回
tyage@KMC6/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/
お疲れ様でした
● 次回は来週です
top related