Enviar búsqueda
Cargar
Webページで学ぶJavaScript2013 第5回
•
0 recomendaciones
•
587 vistas
京大 マイコンクラブ
Seguir
Denunciar
Compartir
Denunciar
Compartir
1 de 24
Descargar ahora
Descargar para leer sin conexión
Recomendados
Webページで学ぶJavaScript2013 第6回
Webページで学ぶJavaScript2013 第6回
京大 マイコンクラブ
Webページで学ぶJavaScript2013 第4回
Webページで学ぶJavaScript2013 第4回
京大 マイコンクラブ
20130202 fe勉強会 canvas
20130202 fe勉強会 canvas
Keisuke Aizawa
今さら始めるJavaScript
今さら始めるJavaScript
Ashitaba YOSHIOKA
フレームワーク使おうぜ!
フレームワーク使おうぜ!
Takuya Sato
【もくもく会】Windows環境でSassを使う!Gulp導入のキモ
【もくもく会】Windows環境でSassを使う!Gulp導入のキモ
Masako Miyazaki
Webページで学ぶJavaScript2013 第8回
Webページで学ぶJavaScript2013 第8回
京大 マイコンクラブ
Yeoman RIAビルドツール超入門
Yeoman RIAビルドツール超入門
Masakazu Muraoka
Más contenido relacionado
La actualidad más candente
NUTハッカソン2014成果報告
NUTハッカソン2014成果報告
Joe_noh
スライド2
スライド2
優一郎 板谷
HTML5+wordpressで電子書籍
HTML5+wordpressで電子書籍
Wataru Asai
デザイナーさんでもできる Browsersync からはじめる作業効率化
デザイナーさんでもできる Browsersync からはじめる作業効率化
Kumiko SHIMIZU
スライド4
スライド4
優一郎 板谷
デザイナーさんでもできる Browsersync からはじめる作業効率化・春
デザイナーさんでもできる Browsersync からはじめる作業効率化・春
Kumiko SHIMIZU
第5回アドオンモジュールセミナー発表資料
第5回アドオンモジュールセミナー発表資料
oreno
スライド3
スライド3
優一郎 板谷
Raytracing4
Raytracing4
Kazuma Hatta
ServerSideJavaScript
ServerSideJavaScript
Ryunosuke SATO
React.jsでHowManyPizza
React.jsでHowManyPizza
松田 千尋
Pinoco phptal-phpcon-kansai
Pinoco phptal-phpcon-kansai
Hisateru Tanaka
HTML基礎
HTML基礎
優一郎 板谷
Webサーバ、HTML
Webサーバ、HTML
Shuhei Iitsuka
スライド
スライド
優一郎 板谷
20150717 これからプログラミングを勉強する人へ
20150717 これからプログラミングを勉強する人へ
SEED310
スライド5
スライド5
優一郎 板谷
HTML5でサイネージは作れる!!
HTML5でサイネージは作れる!!
Kazuya Hiruma
Pusherとcanvasで作るリアルタイムグラフ
Pusherとcanvasで作るリアルタイムグラフ
Ryunosuke SATO
HTML5-20100626
HTML5-20100626
Taku AMANO
La actualidad más candente
(20)
NUTハッカソン2014成果報告
NUTハッカソン2014成果報告
スライド2
スライド2
HTML5+wordpressで電子書籍
HTML5+wordpressで電子書籍
デザイナーさんでもできる Browsersync からはじめる作業効率化
デザイナーさんでもできる Browsersync からはじめる作業効率化
スライド4
スライド4
デザイナーさんでもできる Browsersync からはじめる作業効率化・春
デザイナーさんでもできる Browsersync からはじめる作業効率化・春
第5回アドオンモジュールセミナー発表資料
第5回アドオンモジュールセミナー発表資料
スライド3
スライド3
Raytracing4
Raytracing4
ServerSideJavaScript
ServerSideJavaScript
React.jsでHowManyPizza
React.jsでHowManyPizza
Pinoco phptal-phpcon-kansai
Pinoco phptal-phpcon-kansai
HTML基礎
HTML基礎
Webサーバ、HTML
Webサーバ、HTML
スライド
スライド
20150717 これからプログラミングを勉強する人へ
20150717 これからプログラミングを勉強する人へ
スライド5
スライド5
HTML5でサイネージは作れる!!
HTML5でサイネージは作れる!!
Pusherとcanvasで作るリアルタイムグラフ
Pusherとcanvasで作るリアルタイムグラフ
HTML5-20100626
HTML5-20100626
Similar a Webページで学ぶJavaScript2013 第5回
a-blog cms初心者が テンプレート作るまで
a-blog cms初心者が テンプレート作るまで
girigiribauer
Web制作勉強会 #2
Web制作勉強会 #2
Moto Yan
WordBench Kobe jQueryどうでしょう
WordBench Kobe jQueryどうでしょう
Hishikawa Takuro
WordPress プラグイン Infinite Scroll を試してみた
WordPress プラグイン Infinite Scroll を試してみた
Yuji Nojima
グリッドレイアウトを簡単に行うJavaScript!Masonry.js
グリッドレイアウトを簡単に行うJavaScript!Masonry.js
Yoshinori Kobayashi
20121019-jenkins-akiko_pusu.pdf
20121019-jenkins-akiko_pusu.pdf
akiko_pusu
Djangoのススメ
Djangoのススメ
Alisue Lambda
Javaな人が気を付けるべきJavaScriptコーディングスタイル
Javaな人が気を付けるべきJavaScriptコーディングスタイル
Maaya Ishida
「現場のプロが教えるWebデザイン新・スタンダードテクニック37」に載っているテクニックでLP作ってみた話
「現場のプロが教えるWebデザイン新・スタンダードテクニック37」に載っているテクニックでLP作ってみた話
Yuki Kuramochi
CSSフレームワークを使った 簡単なレスポンシブデザインの作成
CSSフレームワークを使った 簡単なレスポンシブデザインの作成
Kazuki Akiyama
コマンドライン使いもLibreOffice
コマンドライン使いもLibreOffice
Kiwamu Okabe
Webページで学ぶJavaScript2013 第0回
Webページで学ぶJavaScript2013 第0回
京大 マイコンクラブ
Similar a Webページで学ぶJavaScript2013 第5回
(12)
a-blog cms初心者が テンプレート作るまで
a-blog cms初心者が テンプレート作るまで
Web制作勉強会 #2
Web制作勉強会 #2
WordBench Kobe jQueryどうでしょう
WordBench Kobe jQueryどうでしょう
WordPress プラグイン Infinite Scroll を試してみた
WordPress プラグイン Infinite Scroll を試してみた
グリッドレイアウトを簡単に行うJavaScript!Masonry.js
グリッドレイアウトを簡単に行うJavaScript!Masonry.js
20121019-jenkins-akiko_pusu.pdf
20121019-jenkins-akiko_pusu.pdf
Djangoのススメ
Djangoのススメ
Javaな人が気を付けるべきJavaScriptコーディングスタイル
Javaな人が気を付けるべきJavaScriptコーディングスタイル
「現場のプロが教えるWebデザイン新・スタンダードテクニック37」に載っているテクニックでLP作ってみた話
「現場のプロが教えるWebデザイン新・スタンダードテクニック37」に載っているテクニックでLP作ってみた話
CSSフレームワークを使った 簡単なレスポンシブデザインの作成
CSSフレームワークを使った 簡単なレスポンシブデザインの作成
コマンドライン使いもLibreOffice
コマンドライン使いもLibreOffice
Webページで学ぶJavaScript2013 第0回
Webページで学ぶJavaScript2013 第0回
Más de 京大 マイコンクラブ
テキストファイルを読む💪 第1回
テキストファイルを読む💪 第1回
京大 マイコンクラブ
かわいくなろうとしたら語彙力が下がった話
かわいくなろうとしたら語彙力が下がった話
京大 マイコンクラブ
Common Lisp入門
Common Lisp入門
京大 マイコンクラブ
多倍長整数の乗算と高速フーリエ変換
多倍長整数の乗算と高速フーリエ変換
京大 マイコンクラブ
つくってあそぼ ラムダ計算インタプリタ
つくってあそぼ ラムダ計算インタプリタ
京大 マイコンクラブ
Geometry with Unity
Geometry with Unity
京大 マイコンクラブ
セミコロンレスc++
セミコロンレスc++
京大 マイコンクラブ
エンジニアと健康
エンジニアと健康
京大 マイコンクラブ
女の子になれなかった人のために
女の子になれなかった人のために
京大 マイコンクラブ
Pietで競プロしよう
Pietで競プロしよう
京大 マイコンクラブ
もし太陽のコアがIntelCoreだったら
もし太陽のコアがIntelCoreだったら
京大 マイコンクラブ
C# ゲームプログラミングはホントにメモリのことに無頓着でいいの?
C# ゲームプログラミングはホントにメモリのことに無頓着でいいの?
京大 マイコンクラブ
プログラムを高速化する話Ⅱ 〜GPGPU編〜
プログラムを高速化する話Ⅱ 〜GPGPU編〜
京大 マイコンクラブ
ドット絵でプログラミング!難解言語『Piet』勉強会
ドット絵でプログラミング!難解言語『Piet』勉強会
京大 マイコンクラブ
No SSH (@nojima; KMC関東例会)
No SSH (@nojima; KMC関東例会)
京大 マイコンクラブ
DTM練習会2017第1.5回 「伴奏の付け方」
DTM練習会2017第1.5回 「伴奏の付け方」
京大 マイコンクラブ
hideya流 テストプレイ観察術
hideya流 テストプレイ観察術
京大 マイコンクラブ
暗号技術入門 秘密の国のアリス 総集編
暗号技術入門 秘密の国のアリス 総集編
京大 マイコンクラブ
Altseed
Altseed
京大 マイコンクラブ
C#でゲームを作る2016 第8回
C#でゲームを作る2016 第8回
京大 マイコンクラブ
Más de 京大 マイコンクラブ
(20)
テキストファイルを読む💪 第1回
テキストファイルを読む💪 第1回
かわいくなろうとしたら語彙力が下がった話
かわいくなろうとしたら語彙力が下がった話
Common Lisp入門
Common Lisp入門
多倍長整数の乗算と高速フーリエ変換
多倍長整数の乗算と高速フーリエ変換
つくってあそぼ ラムダ計算インタプリタ
つくってあそぼ ラムダ計算インタプリタ
Geometry with Unity
Geometry with Unity
セミコロンレスc++
セミコロンレスc++
エンジニアと健康
エンジニアと健康
女の子になれなかった人のために
女の子になれなかった人のために
Pietで競プロしよう
Pietで競プロしよう
もし太陽のコアがIntelCoreだったら
もし太陽のコアがIntelCoreだったら
C# ゲームプログラミングはホントにメモリのことに無頓着でいいの?
C# ゲームプログラミングはホントにメモリのことに無頓着でいいの?
プログラムを高速化する話Ⅱ 〜GPGPU編〜
プログラムを高速化する話Ⅱ 〜GPGPU編〜
ドット絵でプログラミング!難解言語『Piet』勉強会
ドット絵でプログラミング!難解言語『Piet』勉強会
No SSH (@nojima; KMC関東例会)
No SSH (@nojima; KMC関東例会)
DTM練習会2017第1.5回 「伴奏の付け方」
DTM練習会2017第1.5回 「伴奏の付け方」
hideya流 テストプレイ観察術
hideya流 テストプレイ観察術
暗号技術入門 秘密の国のアリス 総集編
暗号技術入門 秘密の国のアリス 総集編
Altseed
Altseed
C#でゲームを作る2016 第8回
C#でゲームを作る2016 第8回
Webページで学ぶJavaScript2013 第5回
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.
お疲れ様でした ● 次回は来週です
Descargar ahora