SlideShare una empresa de Scribd logo
1 de 24
Descargar para leer sin conexión
Webページで学ぶ
JavaScript 2013 第5回
tyage@KMC
6/18
こんにちはこんにちは!
今日は創立記念日ですがどこか行きましたか
ふりかえり
● CSSをする
● JavaScriptしてないことに気づいたのでそろそろ
JavaScriptに戻りましょう
今日の予定
● 色々やってましたが、JavaScriptに戻りま
す!!!
● DOMをJavaScriptから操作してみよう
● Webページに動きをつけてみよう
JavaScript、覚えていますか
● まだまだやってないところも多いのですが基本
的な構文は思い出せるかしら
○ forとかwhileとか
● 今までコンソールで実行していましたが、HTML
から読み込んで実行することもできます。
● とりあえずHTMLからJavaScriptを実行できるよ
うにしましょう〜〜〜
HTMLから呼び出す
● とりあえず適当なHTMLを作って下さい
HTMLから呼び出す
● とりあえず適当なHTMLを作って下さい
● body要素内の一番下に次の行を追加しましょう
○ <script src="sample.js"></script>
● sample.jsはJavaSciptのファイル名です
HTMLから呼び出す
● とりあえず適当なHTMLを作って下さい
● head要素内に以下の行を追加しましょう
○ <script src="sample.js"></script>
● sample.jsはJavaSciptのファイル名です
● それが終われば、sample.jsを作りましょう
HTMLから呼び出す
sample.jsに適当なコードを書いてみましょう
var iSay = ['hi', 'i', 'am', 'tyage'];
for (var i = 0, l = iSay.length;i<l;++i) {
console.log(iSay[i]);
}
変数宣言をする前にvarをつけるとローカル変数に
なります(詳しい説明は後に)
HTMLから呼び出す
動きましたか?
HTMLから呼び出す
動きましたか?
しかしまだ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];
});
イベントを登録してみよう
// クリックしたら背景色を変えてみるとか
var colors = ["red", "blue", "yellow", "green"],
i = 0;
profile.addEventListener("click", function() {
profile.style.backgroundColor = colors[++i % 4];
});
さて、functionという新キーワードがでてきました。
function
JavaScriptで関数を定義する際に使用します
(ゆるミンに行った人は知ってるよね)
関数の説明は必要ですか?
function hello(name) {
console.log("Hello " + name + "!");
}
hello("tyage"); // => Hello tyage!
function
JavaScriptでは関数を値として扱えます
var hello = function(name) {
console.log("Hello " + name + "!");
};
// 引数として渡すこともできます
profile.addEventListener("click", function() {
profile.style.backgroundColor = colors[++i % 4];
});
イベントを登録してみよう
取得した要素.addEventListener(イベント, 関数);
取得した要素に対してイベントが発生したら、関数を実行する
という形
イベントにはclick(クリック), mouseover(マウスを載せた時),
change(値が変わった時)などなどがある
イベントを登録してみよう
// クリックしたら背景色を変えてみるとか
var colors = ["red", "blue", "yellow", "green"],
i = 0;
profile.addEventListener("click", function() {
profile.style.backgroundColor = colors[++i % 4];
});
profileがclickされたらfunction...が実行される
イベントを使ってみよう
● 前に作ったHTMLにイベントを登録してみたり
お疲れ様でした
● 次回は来週です

Más contenido relacionado

La actualidad más candente

NUTハッカソン2014成果報告
NUTハッカソン2014成果報告NUTハッカソン2014成果報告
NUTハッカソン2014成果報告Joe_noh
 
HTML5+wordpressで電子書籍
HTML5+wordpressで電子書籍HTML5+wordpressで電子書籍
HTML5+wordpressで電子書籍Wataru Asai
 
デザイナーさんでもできる Browsersync からはじめる作業効率化
デザイナーさんでもできる Browsersync からはじめる作業効率化デザイナーさんでもできる Browsersync からはじめる作業効率化
デザイナーさんでもできる Browsersync からはじめる作業効率化Kumiko SHIMIZU
 
デザイナーさんでもできる Browsersync からはじめる作業効率化・春
デザイナーさんでもできる Browsersync からはじめる作業効率化・春デザイナーさんでもできる Browsersync からはじめる作業効率化・春
デザイナーさんでもできる Browsersync からはじめる作業効率化・春Kumiko SHIMIZU
 
第5回アドオンモジュールセミナー発表資料
第5回アドオンモジュールセミナー発表資料第5回アドオンモジュールセミナー発表資料
第5回アドオンモジュールセミナー発表資料oreno
 
React.jsでHowManyPizza
React.jsでHowManyPizzaReact.jsでHowManyPizza
React.jsでHowManyPizza松田 千尋
 
Pinoco phptal-phpcon-kansai
Pinoco phptal-phpcon-kansaiPinoco phptal-phpcon-kansai
Pinoco phptal-phpcon-kansaiHisateru Tanaka
 
20150717 これからプログラミングを勉強する人へ
20150717 これからプログラミングを勉強する人へ20150717 これからプログラミングを勉強する人へ
20150717 これからプログラミングを勉強する人へSEED310
 
HTML5でサイネージは作れる!!
HTML5でサイネージは作れる!!HTML5でサイネージは作れる!!
HTML5でサイネージは作れる!!Kazuya Hiruma
 
Pusherとcanvasで作るリアルタイムグラフ
Pusherとcanvasで作るリアルタイムグラフPusherとcanvasで作るリアルタイムグラフ
Pusherとcanvasで作るリアルタイムグラフRyunosuke SATO
 
HTML5-20100626
HTML5-20100626HTML5-20100626
HTML5-20100626Taku AMANO
 

La actualidad más candente (20)

NUTハッカソン2014成果報告
NUTハッカソン2014成果報告NUTハッカソン2014成果報告
NUTハッカソン2014成果報告
 
スライド2
スライド2スライド2
スライド2
 
HTML5+wordpressで電子書籍
HTML5+wordpressで電子書籍HTML5+wordpressで電子書籍
HTML5+wordpressで電子書籍
 
デザイナーさんでもできる Browsersync からはじめる作業効率化
デザイナーさんでもできる Browsersync からはじめる作業効率化デザイナーさんでもできる Browsersync からはじめる作業効率化
デザイナーさんでもできる Browsersync からはじめる作業効率化
 
スライド4
スライド4スライド4
スライド4
 
デザイナーさんでもできる Browsersync からはじめる作業効率化・春
デザイナーさんでもできる Browsersync からはじめる作業効率化・春デザイナーさんでもできる Browsersync からはじめる作業効率化・春
デザイナーさんでもできる Browsersync からはじめる作業効率化・春
 
第5回アドオンモジュールセミナー発表資料
第5回アドオンモジュールセミナー発表資料第5回アドオンモジュールセミナー発表資料
第5回アドオンモジュールセミナー発表資料
 
スライド3
スライド3スライド3
スライド3
 
Raytracing4
Raytracing4 Raytracing4
Raytracing4
 
ServerSideJavaScript
ServerSideJavaScriptServerSideJavaScript
ServerSideJavaScript
 
React.jsでHowManyPizza
React.jsでHowManyPizzaReact.jsでHowManyPizza
React.jsでHowManyPizza
 
Pinoco phptal-phpcon-kansai
Pinoco phptal-phpcon-kansaiPinoco phptal-phpcon-kansai
Pinoco phptal-phpcon-kansai
 
HTML基礎
HTML基礎HTML基礎
HTML基礎
 
Webサーバ、HTML
Webサーバ、HTMLWebサーバ、HTML
Webサーバ、HTML
 
スライド
スライドスライド
スライド
 
20150717 これからプログラミングを勉強する人へ
20150717 これからプログラミングを勉強する人へ20150717 これからプログラミングを勉強する人へ
20150717 これからプログラミングを勉強する人へ
 
スライド5
スライド5スライド5
スライド5
 
HTML5でサイネージは作れる!!
HTML5でサイネージは作れる!!HTML5でサイネージは作れる!!
HTML5でサイネージは作れる!!
 
Pusherとcanvasで作るリアルタイムグラフ
Pusherとcanvasで作るリアルタイムグラフPusherとcanvasで作るリアルタイムグラフ
Pusherとcanvasで作るリアルタイムグラフ
 
HTML5-20100626
HTML5-20100626HTML5-20100626
HTML5-20100626
 

Similar a Webページで学ぶJavaScript2013 第5回

a-blog cms初心者が テンプレート作るまで
a-blog cms初心者が テンプレート作るまでa-blog cms初心者が テンプレート作るまで
a-blog cms初心者が テンプレート作るまでgirigiribauer
 
Web制作勉強会 #2
Web制作勉強会 #2Web制作勉強会 #2
Web制作勉強会 #2Moto Yan
 
WordBench Kobe jQueryどうでしょう
WordBench Kobe jQueryどうでしょうWordBench Kobe jQueryどうでしょう
WordBench Kobe jQueryどうでしょうHishikawa Takuro
 
WordPress プラグイン Infinite Scroll を試してみた
WordPress プラグイン Infinite Scroll を試してみたWordPress プラグイン Infinite Scroll を試してみた
WordPress プラグイン Infinite Scroll を試してみたYuji Nojima
 
グリッドレイアウトを簡単に行うJavaScript!Masonry.js
グリッドレイアウトを簡単に行うJavaScript!Masonry.jsグリッドレイアウトを簡単に行うJavaScript!Masonry.js
グリッドレイアウトを簡単に行うJavaScript!Masonry.jsYoshinori Kobayashi
 
20121019-jenkins-akiko_pusu.pdf
20121019-jenkins-akiko_pusu.pdf20121019-jenkins-akiko_pusu.pdf
20121019-jenkins-akiko_pusu.pdfakiko_pusu
 
Javaな人が気を付けるべきJavaScriptコーディングスタイル
Javaな人が気を付けるべきJavaScriptコーディングスタイルJavaな人が気を付けるべきJavaScriptコーディングスタイル
Javaな人が気を付けるべきJavaScriptコーディングスタイルMaaya Ishida
 
「現場のプロが教えるWebデザイン新・スタンダードテクニック37」に載っているテクニックでLP作ってみた話
「現場のプロが教えるWebデザイン新・スタンダードテクニック37」に載っているテクニックでLP作ってみた話「現場のプロが教えるWebデザイン新・スタンダードテクニック37」に載っているテクニックでLP作ってみた話
「現場のプロが教えるWebデザイン新・スタンダードテクニック37」に載っているテクニックでLP作ってみた話Yuki Kuramochi
 
CSSフレームワークを使った 簡単なレスポンシブデザインの作成
CSSフレームワークを使った 簡単なレスポンシブデザインの作成CSSフレームワークを使った 簡単なレスポンシブデザインの作成
CSSフレームワークを使った 簡単なレスポンシブデザインの作成Kazuki Akiyama
 
コマンドライン使いもLibreOffice
コマンドライン使いもLibreOfficeコマンドライン使いもLibreOffice
コマンドライン使いもLibreOfficeKiwamu Okabe
 

Similar a Webページで学ぶJavaScript2013 第5回 (12)

a-blog cms初心者が テンプレート作るまで
a-blog cms初心者が テンプレート作るまでa-blog cms初心者が テンプレート作るまで
a-blog cms初心者が テンプレート作るまで
 
Web制作勉強会 #2
Web制作勉強会 #2Web制作勉強会 #2
Web制作勉強会 #2
 
WordBench Kobe jQueryどうでしょう
WordBench Kobe jQueryどうでしょうWordBench Kobe jQueryどうでしょう
WordBench Kobe jQueryどうでしょう
 
WordPress プラグイン Infinite Scroll を試してみた
WordPress プラグイン Infinite Scroll を試してみたWordPress プラグイン Infinite Scroll を試してみた
WordPress プラグイン Infinite Scroll を試してみた
 
グリッドレイアウトを簡単に行うJavaScript!Masonry.js
グリッドレイアウトを簡単に行うJavaScript!Masonry.jsグリッドレイアウトを簡単に行うJavaScript!Masonry.js
グリッドレイアウトを簡単に行うJavaScript!Masonry.js
 
20121019-jenkins-akiko_pusu.pdf
20121019-jenkins-akiko_pusu.pdf20121019-jenkins-akiko_pusu.pdf
20121019-jenkins-akiko_pusu.pdf
 
Djangoのススメ
DjangoのススメDjangoのススメ
Djangoのススメ
 
Javaな人が気を付けるべきJavaScriptコーディングスタイル
Javaな人が気を付けるべきJavaScriptコーディングスタイルJavaな人が気を付けるべきJavaScriptコーディングスタイル
Javaな人が気を付けるべきJavaScriptコーディングスタイル
 
「現場のプロが教えるWebデザイン新・スタンダードテクニック37」に載っているテクニックでLP作ってみた話
「現場のプロが教えるWebデザイン新・スタンダードテクニック37」に載っているテクニックでLP作ってみた話「現場のプロが教えるWebデザイン新・スタンダードテクニック37」に載っているテクニックでLP作ってみた話
「現場のプロが教えるWebデザイン新・スタンダードテクニック37」に載っているテクニックでLP作ってみた話
 
CSSフレームワークを使った 簡単なレスポンシブデザインの作成
CSSフレームワークを使った 簡単なレスポンシブデザインの作成CSSフレームワークを使った 簡単なレスポンシブデザインの作成
CSSフレームワークを使った 簡単なレスポンシブデザインの作成
 
コマンドライン使いもLibreOffice
コマンドライン使いもLibreOfficeコマンドライン使いもLibreOffice
コマンドライン使いもLibreOffice
 
Webページで学ぶJavaScript2013 第0回
Webページで学ぶJavaScript2013 第0回Webページで学ぶJavaScript2013 第0回
Webページで学ぶJavaScript2013 第0回
 

Más de 京大 マイコンクラブ

かわいくなろうとしたら語彙力が下がった話
かわいくなろうとしたら語彙力が下がった話かわいくなろうとしたら語彙力が下がった話
かわいくなろうとしたら語彙力が下がった話京大 マイコンクラブ
 
多倍長整数の乗算と高速フーリエ変換
多倍長整数の乗算と高速フーリエ変換多倍長整数の乗算と高速フーリエ変換
多倍長整数の乗算と高速フーリエ変換京大 マイコンクラブ
 
つくってあそぼ ラムダ計算インタプリタ
つくってあそぼ ラムダ計算インタプリタつくってあそぼ ラムダ計算インタプリタ
つくってあそぼ ラムダ計算インタプリタ京大 マイコンクラブ
 
C# ゲームプログラミングはホントにメモリのことに無頓着でいいの?
C# ゲームプログラミングはホントにメモリのことに無頓着でいいの?C# ゲームプログラミングはホントにメモリのことに無頓着でいいの?
C# ゲームプログラミングはホントにメモリのことに無頓着でいいの?京大 マイコンクラブ
 
プログラムを高速化する話Ⅱ 〜GPGPU編〜
プログラムを高速化する話Ⅱ 〜GPGPU編〜プログラムを高速化する話Ⅱ 〜GPGPU編〜
プログラムを高速化する話Ⅱ 〜GPGPU編〜京大 マイコンクラブ
 
ドット絵でプログラミング!難解言語『Piet』勉強会
ドット絵でプログラミング!難解言語『Piet』勉強会ドット絵でプログラミング!難解言語『Piet』勉強会
ドット絵でプログラミング!難解言語『Piet』勉強会京大 マイコンクラブ
 
DTM練習会2017第1.5回 「伴奏の付け方」
DTM練習会2017第1.5回 「伴奏の付け方」DTM練習会2017第1.5回 「伴奏の付け方」
DTM練習会2017第1.5回 「伴奏の付け方」京大 マイコンクラブ
 
暗号技術入門 秘密の国のアリス 総集編
暗号技術入門 秘密の国のアリス 総集編暗号技術入門 秘密の国のアリス 総集編
暗号技術入門 秘密の国のアリス 総集編京大 マイコンクラブ
 

Más de 京大 マイコンクラブ (20)

テキストファイルを読む💪 第1回
テキストファイルを読む💪  第1回テキストファイルを読む💪  第1回
テキストファイルを読む💪 第1回
 
かわいくなろうとしたら語彙力が下がった話
かわいくなろうとしたら語彙力が下がった話かわいくなろうとしたら語彙力が下がった話
かわいくなろうとしたら語彙力が下がった話
 
Common Lisp入門
Common Lisp入門Common Lisp入門
Common Lisp入門
 
多倍長整数の乗算と高速フーリエ変換
多倍長整数の乗算と高速フーリエ変換多倍長整数の乗算と高速フーリエ変換
多倍長整数の乗算と高速フーリエ変換
 
つくってあそぼ ラムダ計算インタプリタ
つくってあそぼ ラムダ計算インタプリタつくってあそぼ ラムダ計算インタプリタ
つくってあそぼ ラムダ計算インタプリタ
 
Geometry with Unity
Geometry with UnityGeometry with Unity
Geometry with Unity
 
セミコロンレスc++
セミコロンレスc++セミコロンレスc++
セミコロンレスc++
 
エンジニアと健康
エンジニアと健康エンジニアと健康
エンジニアと健康
 
女の子になれなかった人のために
女の子になれなかった人のために女の子になれなかった人のために
女の子になれなかった人のために
 
Pietで競プロしよう
Pietで競プロしようPietで競プロしよう
Pietで競プロしよう
 
もし太陽のコアがIntelCoreだったら
もし太陽のコアがIntelCoreだったらもし太陽のコアがIntelCoreだったら
もし太陽のコアがIntelCoreだったら
 
C# ゲームプログラミングはホントにメモリのことに無頓着でいいの?
C# ゲームプログラミングはホントにメモリのことに無頓着でいいの?C# ゲームプログラミングはホントにメモリのことに無頓着でいいの?
C# ゲームプログラミングはホントにメモリのことに無頓着でいいの?
 
プログラムを高速化する話Ⅱ 〜GPGPU編〜
プログラムを高速化する話Ⅱ 〜GPGPU編〜プログラムを高速化する話Ⅱ 〜GPGPU編〜
プログラムを高速化する話Ⅱ 〜GPGPU編〜
 
ドット絵でプログラミング!難解言語『Piet』勉強会
ドット絵でプログラミング!難解言語『Piet』勉強会ドット絵でプログラミング!難解言語『Piet』勉強会
ドット絵でプログラミング!難解言語『Piet』勉強会
 
No SSH (@nojima; KMC関東例会)
No SSH (@nojima; KMC関東例会)No SSH (@nojima; KMC関東例会)
No SSH (@nojima; KMC関東例会)
 
DTM練習会2017第1.5回 「伴奏の付け方」
DTM練習会2017第1.5回 「伴奏の付け方」DTM練習会2017第1.5回 「伴奏の付け方」
DTM練習会2017第1.5回 「伴奏の付け方」
 
hideya流 テストプレイ観察術
hideya流 テストプレイ観察術hideya流 テストプレイ観察術
hideya流 テストプレイ観察術
 
暗号技術入門 秘密の国のアリス 総集編
暗号技術入門 秘密の国のアリス 総集編暗号技術入門 秘密の国のアリス 総集編
暗号技術入門 秘密の国のアリス 総集編
 
Altseed
AltseedAltseed
Altseed
 
C#でゲームを作る2016 第8回
C#でゲームを作る2016 第8回C#でゲームを作る2016 第8回
C#でゲームを作る2016 第8回
 

Webページで学ぶJavaScript2013 第5回