メディアデザイン実習J 2013 Vol.1.5

299 views
264 views

Published on

東京造形大学での講義資料です。

Published in: Education, Technology, Design
0 Comments
0 Likes
Statistics
Notes
  • Be the first to comment

  • Be the first to like this

No Downloads
Views
Total views
299
On SlideShare
0
From Embeds
0
Number of Embeds
1
Actions
Shares
0
Downloads
1
Comments
0
Likes
0
Embeds 0
No embeds

No notes for slide

メディアデザイン実習J 2013 Vol.1.5

  1. 1. メディアデザイン実習Jvol.1.52013/4/23
  2. 2. !•  !•  !•  !!Web Web Web !•  !•  !開発環境を構築しよう
  3. 3. •  IDE !– Eclipse!– Aptana!– VisualStudio!– Xcode!!•  !–  !–  Fraise!(Smultron)!(1) 何で書くか?
  4. 4. (2) サーバー環境(実行環境)XAMPP!/!MAMPAptana!VM!ware!+!Ubuntu!ローカル リモート!Amazon!EC2!NiFy!C4SA!PaaSGoogle!App!EngineWindows!Azure!Heroku
  5. 5. Aptanaによる開発環境の構築Eclipse IDE!!!!HTML5!+!javascript !!!Windows
  6. 6. 受講者のためのサイトhSp://zokei.koekatamarin.com/
  7. 7. • • • •  !「何から始めるか?」恐れる必要はない!!!!
  8. 8. 1. 2.  !3. 4. 5. 6. 7. 8. 9.  !10.  o !「どう進めるか?」
  9. 9. それでは、いよいよ
  10. 10. .html と .js (1).html.js.css<link!type="text/css"!rel="stylesheet"!href="style.css"!/><script!type="text/javascript"!src="app.js"></script>!!
  11. 11. .html<script!type="text/javascript">!!!!!document.write(”<p>Hello!World!</p>");!</script><style!type="text/css">!p!{!fontgsize:!18px;!color:!#00f;!}!</style>!.html と .js (2)!HTMLJavaScriptCSS
  12. 12. <!DOCTYPE!html>!<head>!!!!!<mtle>Sample</mtle>!</head>!<body>!!<script!type="text/javascript">!!!!!document.write(”Hello!World!");!</script>!!</body>!(1)! (2)!<!DOCTYPE!html>!<head>!!!!!<mtle>Sample</mtle>!</head>!<body>!!<script!type="text/javascript"!src="app.js"></script>!!</body>!document.write(”Hello!World!");!!index.html index.htmlapp.js•  OK!•  HTML !•  SEO !• •  …<head>.html と .js (3)
  13. 13. Hello World !document.write(”Hello!World!");!JSdocument.body.appendChild(document.createTextNode("Hello!World!"));!Bodywindow.onload!=!funcmon!()!{!!!document.body.innerHTML!=!"Hello!World!";!}!Bodyalert(Hello!World!)! console.log(Hello!World!)!
  14. 14. •  !!.! !基本文法!=! . . . . .1556;. (“ ”). (“ ”);AcmonScript
  15. 15. •  A ( ) !!!•  A ( )変数と文字列alert(A);!Alert(‘A’);!Alert(“A”);!var!A!=!‘Hello!World!’;!!!alert(A);!alert(‘A’);!alert(“A”);!3
  16. 16. 配列 (1)var!ManU!=![!!!!!‘ ’,!!!!!‘ ’,!!!!!‘ ’,!];!0 1 2
  17. 17. var!ManU!=![!!!!!‘ ’,!!!!!‘ ’,!!!!!‘ ’,!];!!!!!var!player!=!ManU[0];!!alert(player);!!!!配列 (2)var!ManU!=![!!!!!‘ ’,!!!!!‘ ’,!!!!!‘ ’,!];!!!!!ManU[0]!=!‘ ’;!!var!player!=!ManU[0];!!alert(player);!!!!!
  18. 18. オブジェクトvar!ManU!=!{!!!!!LM:!‘ ’,!!!!!FW:!‘ ’,!!!!!CAM:!‘ ’,!};!!alert(ManU.CAM);!!!!!var!posimon!=!‘CAM’;!!alert(ManU[posimon]);!!!ManU CAM !→→javascript !!
  19. 19. <body><script src="js/vendor/jquery-1.9.1.min.js"></script><form><div>日本代表の<select><option>(ポジションを選択)</option><option value="FW">フォワード</option><option value="CAM">セントラルミッドフィルダー</option><option value="LM">左ミッドフィルダー</option><option value="RM">右ミッドフィルダー</option><option value="LDM">左ボランチ</option><option value="RDM">右ボランチ</option><option value="LB">左サイドバック</option><option value="LCB">左センターバック</option><option value="RCB">右センターバック</option><option value="RB">右サイドバック</option><option value="GK">ゴールキーパー</option></select>の選手って、誰だっけ?</div></form><div id="answer">それは、<span></span>です。</div><script>$(function(){var team = { FW: 前田遼一, CAM: 本田圭佑, LM: 香川真司, RM: 岡崎慎司,LDM: 遠藤保仁, RDM: 長谷部誠, LB: 長友佑都, LCB: 今野泰幸, RCB: 栗原勇蔵,RB: 内田篤人, GK: 川島永嗣 };$(select).change(function(){var player = ;var position = ;$(select option:selected).each(function(){position = $(this).attr(value);player = team[position];});$(#answer).show();$(#answer span).text(player);}).trigger(change);$(#answer).hide();});</script></body>

×