webページで学ぶjavascript2013 第5回

Webページで学ぶJavaScript 2013 第5回

tyage@KMC6/18

こんにちはこんにちは！

今日は創立記念日ですがどこか行きましたか

ふりかえり

● CSSをする● JavaScriptしてないことに気づいたのでそろそろ

JavaScriptに戻りましょう

今日の予定

● 色々やってましたが、JavaScriptに戻ります！！！

● DOMをJavaScriptから操作してみよう● Webページに動きをつけてみよう

JavaScript、覚えていますか

● まだまだやってないところも多いのですが基本的な構文は思い出せるかしら○ forとかwhileとか

● 今までコンソールで実行していましたが、HTMLから読み込んで実行することもできます。

● とりあえずHTMLからJavaScriptを実行できるようにしましょう〜〜〜

HTMLから呼び出す

● とりあえず適当なHTMLを作って下さい


● とりあえず適当なHTMLを作って下さい● body要素内の一番下に次の行を追加しましょう

○ <script src="sample.js"></script>● sample.jsはJavaSciptのファイル名です


● とりあえず適当なHTMLを作って下さい● body要素内の一番下に次の行を追加しましょう

○ <script src="sample.js"></script>● sample.jsはJavaSciptのファイル名です● それが終われば、sample.jsを作りましょう


sample.jsに適当なコードを書いてみましょう

var iSay = ['hi', 'i', 'am', 'tyage'];for (var i = 0, l = iSay.length;i<l;++i) {

console.log(iSay[i]);}

変数宣言をする前にvarをつけるとローカル変数になります（詳しい説明は後に）


動きましたか？


動きましたか？

しかしまだWebページに影響は与えていませんね

では、次はJavaScriptでWebページに動きを与えてみましょう

DOM● 前回のCSSでDOM（Document Object Model）

というのが出て来ました。● ざっくりいうと、HTMLをツリー構造にして扱える

ようにしたものです。● DOMのお陰で、CSSからHTMLの要素に色付

けしたりできたのですが、JavaScriptからもDOMを通してHTMLの要素を操作することができます。○ （JavaScriptでDOMと言うと直接はHTMLと関係ない機

能も含めることがあります）

DOMの使い方

<div id="profile"><p id="name">Delicious Oimo Man</p><p id="age">20</p>

</div>

div#profile | 　|￣￣￣￣￣￣￣|

p#name p#age

DOMの使い方

// プロフィール要素を取得してみよう

var profile = document.getElementById("profile");console.log(profile);

// プロフィールのCSSを更新してみよう

profile.style.fontSize = "100px";

ちなみに

// から始まるのはJavaScriptでの一行コメントです。

// ここには何を書いても評価されません

/*複数行のコメントを付けたい場合はこうやって囲みます*/

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";

イベントを登録してみよう// クリックしたら背景色を変えてみるとか

var colors = ["red", "blue", "yellow", "green"],i = 0;

profile.addEventListener("click", function() {profile.style.backgroundColor = colors[++i % 4];

});




});

さて、functionという新キーワードがでてきました。

functionJavaScriptで関数を定義する際に使用します（ゆるミンに行った人は知ってるよね）関数の説明は必要ですか？

function hello(name) {console.log("Hello " + name + "!");

}hello("tyage"); // => Hello tyage!

functionJavaScriptでは関数を値として扱えます

var hello = function(name) {console.log("Hello " + name + "!");

};

// 引数として渡すこともできますprofile.addEventListener("click", function() {

profile.style.backgroundColor = colors[++i % 4];});

イベントを登録してみよう取得した要素.addEventListener(イベント, 関数);

取得した要素に対してイベントが発生したら、関数を実行する

という形

イベントにはclick（クリック）, mouseover（マウスを載せた時）, change（値が変わった時）などなどがある




});

profileがclickされたらfunction...が実行される

イベントを使ってみよう

● 前に作ったHTMLにイベントを登録してみたり

お疲れ様でした

● 次回は来週です

webページで学ぶjavascript2013 第5回

Documents