Successfully reported this slideshow.
We use your LinkedIn profile and activity data to personalize ads and to show you more relevant ads. You can change your ad preferences anytime.
Webページで学ぶ
JavaScript 2013 第5回
tyage@KMC
6/18
こんにちはこんにちは!
今日は創立記念日ですがどこか行きましたか
ふりかえり
● CSSをする
● JavaScriptしてないことに気づいたのでそろそろ
JavaScriptに戻りましょう
今日の予定
● 色々やってましたが、JavaScriptに戻りま
す!!!
● DOMをJavaScriptから操作してみよう
● Webページに動きをつけてみよう
JavaScript、覚えていますか
● まだまだやってないところも多いのですが基本
的な構文は思い出せるかしら
○ forとかwhileとか
● 今までコンソールで実行していましたが、HTML
から読み込んで実行することもできます。
● とり...
HTMLから呼び出す
● とりあえず適当なHTMLを作って下さい
HTMLから呼び出す
● とりあえず適当なHTMLを作って下さい
● body要素内の一番下に次の行を追加しましょう
○ <script src="sample.js"></script>
● sample.jsはJavaSciptのファイル名...
HTMLから呼び出す
● とりあえず適当なHTMLを作って下さい
● body要素内の一番下に次の行を追加しましょう
○ <script src="sample.js"></script>
● sample.jsはJavaSciptのファイル名...
HTMLから呼び出す
sample.jsに適当なコードを書いてみましょう
var iSay = ['hi', 'i', 'am', 'tyage'];
for (var i = 0, l = iSay.length;i<l;++i) {
con...
HTMLから呼び出す
動きましたか?
HTMLから呼び出す
動きましたか?
しかしまだWebページに影響は与えていませんね
では、次はJavaScriptでWebページに動きを与え
てみましょう
DOM
● 前回のCSSでDOM(Document Object Model)
というのが出て来ました。
● ざっくりいうと、HTMLをツリー構造にして扱える
ようにしたものです。
● DOMのお陰で、CSSからHTMLの要素に色付
けしたりで...
DOMの使い方
<div id="profile">
<p id="name">Delicious Oimo Man</p>
<p id="age">20</p>
</div>
div#profile
|
 | ̄ ̄ ̄ ̄ ̄ ̄ ̄|
p#name p...
DOMの使い方
// プロフィール要素を取得してみよう
var profile = document.getElementById
("profile");
console.log(profile);
// プロフィールのCSSを更新してみよう...
ちなみに
// から始まるのはJavaScriptでの一行コメントで
す。
// ここには何を書いても評価されません
/*
複数行のコメントを付けたい場合は
こうやって囲みます
*/
DOMの使い方
// プロフィールの子要素を取得してみよう
// childNodesは配列のように扱うことができます
(実際には配列ではないです)
var children = profile.childNodes;
for (var i=0...
イベントを登録してみよう
// クリックしたら背景色を変えてみるとか
var colors = ["red", "blue", "yellow", "green"],
i = 0;
profile.addEventListener("click...
イベントを登録してみよう
// クリックしたら背景色を変えてみるとか
var colors = ["red", "blue", "yellow", "green"],
i = 0;
profile.addEventListener("click...
function
JavaScriptで関数を定義する際に使用します
(ゆるミンに行った人は知ってるよね)
関数の説明は必要ですか?
function hello(name) {
console.log("Hello " + name + "!...
function
JavaScriptでは関数を値として扱えます
var hello = function(name) {
console.log("Hello " + name + "!");
};
// 引数として渡すこともできます
pro...
イベントを登録してみよう
取得した要素.addEventListener(イベント, 関数);
取得した要素に対してイベントが発生したら、関数を実行する
という形
イベントにはclick(クリック), mouseover(マウスを載せた時),
...
イベントを登録してみよう
// クリックしたら背景色を変えてみるとか
var colors = ["red", "blue", "yellow", "green"],
i = 0;
profile.addEventListener("click...
イベントを使ってみよう
● 前に作ったHTMLにイベントを登録してみたり
お疲れ様でした
● 次回は来週です
Upcoming SlideShare
Loading in …5
×

Webページで学ぶJavaScript2013 第5回

522 views

Published on

  • Be the first to comment

  • Be the first to like this

Webページで学ぶJavaScript2013 第5回

  1. 1. Webページで学ぶ JavaScript 2013 第5回 tyage@KMC 6/18
  2. 2. こんにちはこんにちは! 今日は創立記念日ですがどこか行きましたか
  3. 3. ふりかえり ● CSSをする ● JavaScriptしてないことに気づいたのでそろそろ JavaScriptに戻りましょう
  4. 4. 今日の予定 ● 色々やってましたが、JavaScriptに戻りま す!!! ● DOMをJavaScriptから操作してみよう ● Webページに動きをつけてみよう
  5. 5. JavaScript、覚えていますか ● まだまだやってないところも多いのですが基本 的な構文は思い出せるかしら ○ forとかwhileとか ● 今までコンソールで実行していましたが、HTML から読み込んで実行することもできます。 ● とりあえずHTMLからJavaScriptを実行できるよ うにしましょう〜〜〜
  6. 6. HTMLから呼び出す ● とりあえず適当なHTMLを作って下さい
  7. 7. HTMLから呼び出す ● とりあえず適当なHTMLを作って下さい ● body要素内の一番下に次の行を追加しましょう ○ <script src="sample.js"></script> ● sample.jsはJavaSciptのファイル名です
  8. 8. HTMLから呼び出す ● とりあえず適当なHTMLを作って下さい ● body要素内の一番下に次の行を追加しましょう ○ <script src="sample.js"></script> ● sample.jsはJavaSciptのファイル名です ● それが終われば、sample.jsを作りましょう
  9. 9. HTMLから呼び出す sample.jsに適当なコードを書いてみましょう var iSay = ['hi', 'i', 'am', 'tyage']; for (var i = 0, l = iSay.length;i<l;++i) { console.log(iSay[i]); } 変数宣言をする前にvarをつけるとローカル変数に なります(詳しい説明は後に)
  10. 10. HTMLから呼び出す 動きましたか?
  11. 11. HTMLから呼び出す 動きましたか? しかしまだWebページに影響は与えていませんね では、次はJavaScriptでWebページに動きを与え てみましょう
  12. 12. DOM ● 前回のCSSでDOM(Document Object Model) というのが出て来ました。 ● ざっくりいうと、HTMLをツリー構造にして扱える ようにしたものです。 ● DOMのお陰で、CSSからHTMLの要素に色付 けしたりできたのですが、JavaScriptからもDOM を通してHTMLの要素を操作することができま す。 ○ (JavaScriptでDOMと言うと直接はHTMLと関係ない機 能も含めることがあります)
  13. 13. DOMの使い方 <div id="profile"> <p id="name">Delicious Oimo Man</p> <p id="age">20</p> </div> div#profile |  | ̄ ̄ ̄ ̄ ̄ ̄ ̄| p#name p#age
  14. 14. DOMの使い方 // プロフィール要素を取得してみよう var profile = document.getElementById ("profile"); console.log(profile); // プロフィールのCSSを更新してみよう profile.style.fontSize = "100px";
  15. 15. ちなみに // から始まるのはJavaScriptでの一行コメントで す。 // ここには何を書いても評価されません /* 複数行のコメントを付けたい場合は こうやって囲みます */
  16. 16. DOMの使い方 // プロフィールの子要素を取得してみよう // childNodesは配列のように扱うことができます (実際には配列ではないです) var children = profile.childNodes; for (var i=0,l=children.length;i<l;++i) { console.log(children[i].innerText); } children[0].innerText = "tyage";
  17. 17. イベントを登録してみよう // クリックしたら背景色を変えてみるとか var colors = ["red", "blue", "yellow", "green"], i = 0; profile.addEventListener("click", function() { profile.style.backgroundColor = colors[++i % 4]; });
  18. 18. イベントを登録してみよう // クリックしたら背景色を変えてみるとか var colors = ["red", "blue", "yellow", "green"], i = 0; profile.addEventListener("click", function() { profile.style.backgroundColor = colors[++i % 4]; }); さて、functionという新キーワードがでてきました。
  19. 19. function JavaScriptで関数を定義する際に使用します (ゆるミンに行った人は知ってるよね) 関数の説明は必要ですか? function hello(name) { console.log("Hello " + name + "!"); } hello("tyage"); // => Hello tyage!
  20. 20. function JavaScriptでは関数を値として扱えます var hello = function(name) { console.log("Hello " + name + "!"); }; // 引数として渡すこともできます profile.addEventListener("click", function() { profile.style.backgroundColor = colors[++i % 4]; });
  21. 21. イベントを登録してみよう 取得した要素.addEventListener(イベント, 関数); 取得した要素に対してイベントが発生したら、関数を実行する という形 イベントにはclick(クリック), mouseover(マウスを載せた時), change(値が変わった時)などなどがある
  22. 22. イベントを登録してみよう // クリックしたら背景色を変えてみるとか var colors = ["red", "blue", "yellow", "green"], i = 0; profile.addEventListener("click", function() { profile.style.backgroundColor = colors[++i % 4]; }); profileがclickされたらfunction...が実行される
  23. 23. イベントを使ってみよう ● 前に作ったHTMLにイベントを登録してみたり
  24. 24. お疲れ様でした ● 次回は来週です

×