Download to read offline
![JavaScriptの制御文
配列とfor in文
var test = [‘a‘,‘b‘,‘c‘]; // 配列を作成
for(var i in test){
alert(test[i]); // 配列の値を順に表示
}
配列の変わった使い方
var test = []; // 空の配列を作成
test["miku"] = 3; // 添え字には文字列も使える
test["rin"] = 9;](https://image.slidesharecdn.com/1-140413082855-phpapp01/75/Web-1-33-2048.jpg)
メディア工房サマーワークショップ「Webアプリ制作」1日目
- 1.
- 2.
- 3. 本ワークショップについて ≪ HTML5を用いたWebアプリケーション製作≫ Webの最新技術、HTML5でアプリが作れるようになる！ 目的 Webに関する基本的な知識を習得し、 Webページを作れるようになるだけでなく Webアプリケーションも作ることができるようになる
- 4. 関連授業 1年次 メディア実践 HTML5でゲームを作る 2年次 Web制作 Webサイト制作の企画から公開まで Webシステム PHPやSQLも触れてくれる
- 5. ワークショップの流れ 1日目 Webの仕組み HTMLを学ぶ CSSを学ぶ JavaScriptを学ぶ 2日目 Webアプリケーションとは？ Twitter APIを使ってみる
- 6. 簡単に自己紹介 遠藤崇 D科2年 最近はWebデザインにお熱 http://ougou80.web.fc2.com/ @mikankari 代表作 『シに恋』即死系学園ADV 『nikokara5』カラオケシステム
- 7.
- 8. Webの仕組み クライアント （Webブラウザ） サーバ （Webサーバソフトウェア） インターネット Web ページ クライアントサイド技術 • HTML・・・文書 • CSS・・・デザイン •JavaScript・・・簡易プログラム • Flash・・・動的コンテンツ サーバサイド技術 • PHP、Perlなど・・・プログラム • SQL・・・データベース ＼ 見 れ た ／
- 9.
- 10. HTMLとは Webページを記述するための言語 HyperTextMarkup Language ハイパーテキスト リンクを使って他のページと結び付けられる 画像などを埋め込むことができる マークアップ言語 見出しや段落などの文書構造の指定ができる マークアップで（目印を付けて）指定を行う
- 11. HTMLの例 <!DOCTYPE HTML PUBLIC"-//W3C//DTD HTML 4.01//EN"> <html> <head> <title>ここはページのタイトルです</title> </head> <body> <h1>ここは見出しです</h1> <p>ここは段落です</p> </body> </html>
- 12. HTMLの親戚 HTML（HTML4.01） 従来のWebページ <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN"> XHTML（XHTML1.0 or XHTML 1.1 or XHTML 2.0） 最近のWebページ HTMLよりも文法規則が厳しい <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.1//EN" "http://www.w3.org/TR/xhtml11/DTD/xhtml11.dtd"> HTML5 最新のWebページとWebアプリケーション 多数の機能強化 <!DOCTYPE html>
- 13. HTML5とは 狭義 HTMLがバージョンアップしたもの 広義 HTMLがバージョンアップしたもの HTML4.01→HTML5 CSSがバージョンアップしたもの CSS2→CSS3 JavaScriptがすごくなったもの JavaScript APIが追加される その他Webまわりの新技術 SVGやWebフォントなど
- 14. HTML5の利点 HTML5のいいところ 文書構造をよりわかりやすく データ保存、ファイル操作 GPS、カメラ、マイクの利用 通信機能の強化 動画や音声の再生 グラフィックス機能の強化 並列処理 デザインの幅が広がる Flashなどのプラグインをインストールさせる必要がない
- 15. HTML5の欠点 HTML5で気を付けたいこと まだ仕様が固まっていない 一部対応していないブラウザがある HTML5を書ける人が不足しているらしい 2008年に草案 2014年に正式勧告予定 単にHTML5といっても 技術が多い 古いブラウザなど
- 16. HTML5で遊んでみよう HTML5 andCSS3 - Adobe - The ExpressiveWeb – Beta http://beta.theexpressiveweb.com/ Adobe社が出したHTML5体験サイト SketchToy: Draw sketches and share replays with friends! http://sketchtoy.com/ 絵が描ける、共有機能も Andrew Hoyer | The Cloth Simulation http://andrew-hoyer.com/experiments/cloth/ 布のシュミレーション
- 17. HTMLの書き方 <p>ここは段落です</p> 開始タグ 終了タグ <a href="index.html">ここはリンクです</a> 属性 <br/> 終了タグがない要素もある p要素 a要素 br要素
- 18. HTMLをさらに学びたい サイトのソースコードを見る サイトを表示→右クリックで「ソースを表示」 解説サイトを見る HTMLクリックリファレンス http://www.htmq.com/index.htm とほほのWWW入門 http://www.tohoho-web.com/www.htm
- 19. CSSとは Webページのデザインを記述するための言語 CascadingStyle Sheets スタイルシート ページの見栄えが指定できる 色・枠・レイアウト・装飾など HTMLとは別に書く 「意味付け」と「見栄え」を分離するため Web ページ （HTML） デザイン （CSS）
- 20. CSSの用意 別ファイル（CSSファイル） <link rel="stylesheet"type="text/css" href="CSSファイルが 置いてある場所" /> HTMLファイルに埋め込む <style type="text/css"> CSSの内容 </style> ☆いずれもHTMLのhead要素の中に置く
- 21. CSSの書き方 table{ text-align: center;} セレクタ プロパティ HTMLの要素 h1.name{ font-size: 16px; } div#divsample{ border: 1px dashed #c0c0c0; } 単位付ける 複数の要素に １つの要素に
- 22. CSS3について CSS3では 色・枠・レイアウト・装飾などだけでなく 2D、3D変形 アニメーション 透過 グラデーション などが追加された 対応ブラウザが少ないため、今回は比較的対応の進んだ 透明度のみ取り上げている
- 23. Webページを作ってみよう 用意するもの テキストエディタ ブラウザ 作るもの PC向けWebサイトで一般的な固定レイアウトのページ
- 24. JavaScriptとは Webページの簡易プログラムを記述する言語 JavaScript スクリプト Webページに動きを持たせることができる テキストファイルを1行ずつ解析してプログラムを実行する HTMLとは別に書く 「意味付け」と「プログラム」を分離するため Web ページ （HTML） デザイン （CSS） プログラム （JavaScript）
- 25. JavaScriptとJavaの違い よく同じものと勘違いされるが、まったくの別物 JavaScript Webページ上で動く 文法規則がゆるい コンパイル（機械語への翻訳）の必要が無い Java デスクトップ上で動く 文法規則が厳しい コンパイルの必要あり、でないと動かない 2年後期の「応用プログラミングB」でお世話になる
- 26. JavaScriptができること 状況に応じてWebページの一部を書き換える フォームの入力をチェックをする 作ろうと思えばゲームも作れる HTML5のJavaScriptAPI データ保存、ファイル操作 GPS、カメラ、マイクの利用 通信機能の強化 動画や音声の再生 グラフィックス機能の強化 並列処理 Webアプリケーションがさらに作りやすくなった
- 27. JavaScriptの用意 別ファイル（JSファイル） <script type="text/javascript"src="JSファイルが置いてある 場所"></script> HTMLファイルに埋め込む <script type="text/javascript"> JavaScriptの内容 <script> ☆HTMLのhead要素の中にもbody要素の中にも置ける
- 28. JavaScriptのプロパティ プロパティ データ、変数みたいなもの vartest; プロパティ名 宣言 代入 test = 5; まとめて書くと var test = 5; 整数の他にも実数や文字列など が代入できる
- 29. JavaScriptのメソッド メソッド 処理、関数みたいなもの functiontest(args1, args2){ 処理内容 } メソッド名 引数 定義 呼出し test(5, 6);
- 30. JavaScriptのオブジェクト オブジェクト プロパティ（データ）とメソッド（処理）をまとめたもの オブジェクト内のプロパティ、メソッド、オブジェクトにアク セスするためには「.」（ドット）を使う プロパティ 他のオブジェクト メソッド プロパティ （株）アンク『Javaの絵本』P61より
- 31.
- 32. JavaScriptの制御文 四則計算や論理演算、条件分岐や繰り返しは、 Processing言語、C言語、C++言語、Java言語などと ほとんど同じ JavaScript固有なもの for in 文…配列とfor文 with 文…処理をまとめる
- 33. JavaScriptの制御文 配列とfor in文 vartest = [‘a‘,‘b‘,‘c‘]; // 配列を作成 for(var i in test){ alert(test[i]); // 配列の値を順に表示 } 配列の変わった使い方 var test = []; // 空の配列を作成 test["miku"] = 3; // 添え字には文字列も使える test["rin"] = 9;
- 34.
- 35. Webページの一部を書き換える <div id=“output“></div> var output= document.getElementById(“output“); output.innerHTML = ‘こんにちは‘; <div id=“output“>こんにちは</div> ☆HTMLが直接編集されるわけではない
- 36. JavaScriptのイベント イベント Event、できごと ボタンが押された、マウスポインタが画像の上に乗ったなど HTMLタグに on + イベント名 の属性をつける <input type="button" value="PUSH!" onclick="JavaScriptの内容" />