1. Webページで学ぶ
JavaScript 2013 第5回
tyage@KMC
6/18

2. こんにちはこんにちは！
今日は創立記念日ですがどこか行きましたか

3. ふりかえり
● CSSをする
● JavaScriptしてないことに気づいたのでそろそろ
JavaScriptに戻りましょう

4. 今日の予定
● 色々やってましたが、JavaScriptに戻りま
す！！！
● DOMをJavaScriptから操作してみよう
● Webページに動きをつけてみよう

5. JavaScript、覚えていますか
● まだまだやってないところも多いのですが基本
的な構文は思い出せるかしら
○ forとかwhileとか
● 今までコンソールで実行していましたが、HTML
から読み込んで実行することもできます。
● とりあえずHTMLからJavaScriptを実行できるよ
うにしましょう〜〜〜

6. HTMLから呼び出す
● とりあえず適当なHTMLを作って下さい

7. HTMLから呼び出す
● とりあえず適当なHTMLを作って下さい
● body要素内の一番下に次の行を追加しましょう
○ <script src="sample.js"></script>
● sample.jsはJavaSciptのファイル名です

8. HTMLから呼び出す
● とりあえず適当なHTMLを作って下さい
● head要素内に以下の行を追加しましょう
○ <script src="sample.js"></script>
● sample.jsはJavaSciptのファイル名です
● それが終われば、sample.jsを作りましょう

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. HTMLから呼び出す
動きましたか？

11. HTMLから呼び出す
動きましたか？
しかしまだWebページに影響は与えていませんね
では、次はJavaScriptでWebページに動きを与え
てみましょう

12. DOM
● 前回のCSSでDOM（Document Object Model）
というのが出て来ました。
● ざっくりいうと、HTMLをツリー構造にして扱える
ようにしたものです。
● DOMのお陰で、CSSからHTMLの要素に色付
けしたりできたのですが、JavaScriptからもDOM
を通してHTMLの要素を操作することができま
す。
○ （JavaScriptでDOMと言うと直接はHTMLと関係ない機
能も含めることがあります）

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. DOMの使い方
// プロフィール要素を取得してみよう
var profile = document.getElementById
("profile");
console.log(profile);
// プロフィールのCSSを更新してみよう
profile.style.fontSize = "100px";

15. ちなみに
// から始まるのはJavaScriptでの一行コメントで
す。
// ここには何を書いても評価されません
/*
複数行のコメントを付けたい場合は
こうやって囲みます
*/

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. イベントを登録してみよう
// クリックしたら背景色を変えてみるとか
var colors = ["red", "blue", "yellow", "green"],
i = 0;
profile.addEventListener("click", function() {
profile.style.backgroundColor = colors[++i % 4];
});

18. イベントを登録してみよう
// クリックしたら背景色を変えてみるとか
var colors = ["red", "blue", "yellow", "green"],
i = 0;
profile.addEventListener("click", function() {
profile.style.backgroundColor = colors[++i % 4];
});
さて、functionという新キーワードがでてきました。

19. function
JavaScriptで関数を定義する際に使用します
（ゆるミンに行った人は知ってるよね）
関数の説明は必要ですか？
function hello(name) {
console.log("Hello " + name + "!");
}
hello("tyage"); // => Hello tyage!

20. function
JavaScriptでは関数を値として扱えます
var hello = function(name) {
console.log("Hello " + name + "!");
};
// 引数として渡すこともできます
profile.addEventListener("click", function() {
profile.style.backgroundColor = colors[++i % 4];
});

21. イベントを登録してみよう
取得した要素.addEventListener(イベント, 関数);
取得した要素に対してイベントが発生したら、関数を実行する
という形
イベントにはclick（クリック）, mouseover（マウスを載せた時）,
change（値が変わった時）などなどがある

22. イベントを登録してみよう
// クリックしたら背景色を変えてみるとか
var colors = ["red", "blue", "yellow", "green"],
i = 0;
profile.addEventListener("click", function() {
profile.style.backgroundColor = colors[++i % 4];
});
profileがclickされたらfunction...が実行される

23. イベントを使ってみよう
● 前に作ったHTMLにイベントを登録してみたり

24. お疲れ様でした
● 次回は来週です