TODOアプリで学ぶWEBアプリケーションのクライアント開発の事始め @天王洲で勉強会とか(2012/10/4)        キヤノンソフト情報システム       内 慎一朗(Kumeuchi Shinichiro)
おことわり本発表は発表者個人の見解及び調査したものであり所属する企業とは何ら関係ありません。また、発表の内容についてはすでに古かったり、間違っている内容が含まれている事もあります。こういった発表にまだまだ慣れていないため、不手際があるとは思いま...
自己紹介  内慎一朗。28歳独身おうし座。2009年キヤノンソフト情報システム入社。入社ともに上京した関西人。業務では、主にWebメールのパッケージ製品のスマートフォン版UI開発などクライアント開発の全般に従事。業務中ではJavaScript,...
お話しする内容1.クライアントって?2.Webアプリケーションのクライアント3.HTMLについて4.CSSについて5.JavaScriptについて6.ToDOリストを作りながら考えてみよう
1.クライアントって?
1. クライアントって?クライアント【client】コンピュータネットワークにおいて、サーバコンピュータの提供する機能やデータを利用するコンピュータのこと。家庭でインターネットを利用する際のパソコンなどが該当する。また、サーバソフトウェアの提供...
1. クライアントって?         機能を提供。         リクエスト(要求)に応じて、レスポンス(応答)を返す。         機能を使う。         リクエストを送り、レスポンスを受け取る。
1. クライアントって?         機能を提供。         リクエスト(要求)に応じて、レスポンス(応答)を返す。  サーバー         機能を使う。         リクエストを送り、レスポンスを受け取る。
1. クライアントって?          機能を提供。          リクエスト(要求)に応じて、レスポンス(応答)を返す。  サーバー          機能を使う。          リクエストを送り、レスポンスを受け取る。 クライアント
1. クライアントって?   クライアントは人が直接使うもの
2.WEBアプリケーションの   クライアント
2. Webアプリケーションのクライアント       Webアプリケーションの       クライアントが指す範囲
2. Webアプリケーションのクライアント
2. Webアプリケーションのクライアント
2. Webアプリケーションのクライアント
2. Webアプリケーションのクライアント        今回お話しする範囲は      原則的にWebブラウザです。
2. Webアプリケーションのクライアント       クライアントを構成する          テクノロジー
2. Webアプリケーションのクライアントデータ構造    HTMLデザイン      CSS                     Flash   Silverlight 動作     JavaScript
2. Webアプリケーションのクライアントデータ構造    HTMLデザイン      CSS                     Flash   Silverlight 動作     JavaScript
2. Webアプリケーションのクライアントデータ構造    HTMLデザイン      CSS                     Flash   Silverlight 動作     JavaScript
3.HTMLについて
3. HTMLについて  •データをタグで囲み意味を持たせる文書   •開始タグ <html>   •終了タグ </html>   •属性 <div id=”hoge”>  •タグは様々なものがあり、108もある   •<title>, <h1...
3. HTMLについて •基本的なHTMLの書き方                  <!DOCTYPE html>            ドキュメン                                               ...
3. HTMLについて  •ドキュメント宣言について   •ドキュメント宣言はブラウザにする挨拶   •HTMLのバージョンなどを知らせます  •HTML5で記述する場合には   •<!DOCTYPE html>  •HTML4で記述する場合に...
3. HTMLについて •ヘッダ情報について  •HTMLファイル全体にかかる情報を記述  •文書タイトルや、文字コードなど様々  •後述するCSSファイル、JSファイルの読み込みも  •検索キーワードなどの宣言も  •スマホで表示した際の倍率...
3. HTMLについて  コンテンツ部分について      コンテンツに使われるタグは       実に様々なタグがあります
3. HTMLについて      大きく分けて4つに分類できます
3. HTMLについて   インライン要素     ボックス要素      大きく分けて4つに分類できます   フォーム要素      メディア要素
3. HTMLについて  インライン要素     それ自体は形を持たない、     主に文字を格納するタグ要素     <a> リンクを貼る     <span> 特定の範囲をグループ化する     <br> 改行する     <code>, ...
3. HTMLについて   ボックス要素     形を持っているタグ。     ページを構成する際に、     一番重要で一番よく使われるタグ要素。     様々なデータ形式がある。
3. HTMLについて   ボックス要素      <p> 段落の単位でグルーピングする      <table>表形式のデータを表現する      <ul> リスト形式のデータを表現する      <div> 特定の範囲をグルーピングする  ...
3. HTMLについて   フォーム要素    サーバに送信するデータなどを    入力したり、送信する際に用いる要素。    Webアプリケーションではよく使う要素。     <form> データを送信するフォームを作成     <input...
3. HTMLについて   メディア要素    画像などのメディアデータを表示するタグ。    HTML5で大幅に拡張されたタグ。      <img> 画像を表示するタグ      <canvas> ベクトルイメージを描画するタグ      ...
3. HTMLについて          説明しきれないほど        いろんなタグがあります…    <!-- 画面に表示されない      コメントタグも意外と重要です -->
4.CSSについて
4. CSSについて  CSSはHTMLファイルの見栄えをよくするものです。  様々なことを指定することができます。  •文字の大きさや色、フォント  •ボックスの外枠、内枠の幅や、枠線について  •背景色や、背景イメージ  •要素自体の高さや...
4. CSSについて  今までのCSSは基本的な事しか指定できなかった  CSS3からはオシャレな事も指定できるように  •みんな大好き角丸  •グラデーション  •ボックスの影、文字の影  •アニメーションなども
4. CSSについて ブラウザごとに挙動が違ったりするので注意!             IE6~8の暗黒時代…
4. CSSについて  •CSSを指定する方法は大きく3つ   •タグの中にstyle属性を定義して記述する   •HTMLファイルの<head>タグ内に    <style>タグを定義して記述する   •CSSファイルを作成してファイル内に記...
4. CSSについて   •実際にCSSはどのように書くかの例             CSSのテスト      見出しにありがちなデザインをどう書くか
4. CSSについて   •実際にCSSはどのように書くかの例             CSSのテスト                文字の色を青っぽい色に             ボックスの内枠が10px左の枠線を10pxで青色に
4. CSSについて   •実際にCSSはどのように書くかの例             CSSのテスト                文字の色を青っぽい色に                    color: #3377FF;         ...
4. CSSについて   •実際にCSSはどのように書くかの例             CSSのテスト             文字の色を青っぽい色に                 color: #3377FF;         ボックスの内...
4. CSSについて   •実際にCSSはどのように書くかの例             CSSのテスト              文字の色を青っぽい色に                      color: #3377FF;         ...
4. CSSについて   •タグにstyle属性を定義して記述する方法  <h1 style=”color: #3377FF; padding: 10px;          border-left: 10px solid blue;”>  C...
4. CSSについて •<head>タグ内に<style>タグを定義して記述する       <html>       <head>       <style>         h1 {            color: #3377FF;  ...
4. CSSについて •CSSファイルに記述する  csstest.html     <html>     <head>     <link rel=”stylesheet” href=”./style.css” tyle=”text/css”...
4. CSSについて  •style属性に書く方法はお手軽  •量が増えてくると重複したものが増えるかも  •style属性によるcss指定は描画速度が遅くなる  •cssによる指定が多い場合はできるだけセレクタ  を用いる  •cssファイル...
4. CSSについて    できるだけCSSファイルを使いましょう
5.JAVASCRIPTについて
5. JavaScriptについて            JavaScriptとは   •ブラウザ上で動作するスクリプト言語   •Webアプリケーションで欠かせない存在に   •コンパイルをする必要はない   •ページを読み込めば実行される ...
5. JavaScriptについて                    書き方
5. JavaScriptについて                    書き方    •HTMLタグのonclick属性に記述する    •HTML上に<script>タグを定義し記述する    •jsファイルに記述して、HTMLで読み込む ...
5. JavaScriptについて    HTMLタグのonclick属性に記述する   <input type=”button” onclick=”JavaScript:   alert(‘タグの中でJavaScriptを実行’);”>
5. JavaScriptについて   HTML上に<script>タグを定義し記述する   <script>    alert(‘JavaScriptを<script>タグで実行’);   </script>
5. JavaScriptについて   jsファイルに記述して、HTMLで読み込む jstest.html    <html>    <head>    <script src=”./script.js”></script>    </head...
5. JavaScriptについて •タグ上に書く方法はその場でかけるのでお手軽 •CSSと同じで共通化できなかったり見づらい •<script>タグに書くのとjsファイルに書くのは  原則的には同じ意味 •ファイル化すると同じ処理を複数のペー...
5. JavaScriptについて      できるだけjsファイルを使いましょう
5. JavaScriptについて   JavaScriptは読み込んだ時点で実行されるので           記述する位置は大切です。
5. JavaScriptについて         <html>  読      <head>         <script>alert(‘JS’);</script>  み      </head>         <h1>○○○○○</h...
5. JavaScriptについて         <html>                1  読      <head>         <script>alert(‘JS’);</script>  み      </head>    ...
5. JavaScriptについて         <html>                1  読      <head>         <script>alert(‘JS’);</script>  み      </head>    ...
5. JavaScriptについて         <html>                1  読      <head>         <script>alert(‘JS’);</script>  み      </head>    ...
5. JavaScriptについて         Webアプリケーションにおける                JavaScriptの役割
5. JavaScriptについて   •データの操作を行う   •ユーザの操作によって、処理を行う    •イベントリスナー    •onclick属性、onload属性などもある   •画面上のデータをサーバへ送信する    •Formの場...
6.実際にTODOリストを作りながら考えてみよう
6. 実際にToDoリストを作りながら考えてみよう        ToDoリストの機能 •入力したデータの登録、送信 •あらかじめ登録されたデータの受信、表示   基本的なWebアプリケーションの機能       を学習する事ができる
6. 実際にToDoリストを作りながら考えてみよう                   送信                   受信              登録  入力   ToDoリスト          サーバ        (Cli...
6. 実際にToDoリストを作りながら考えてみよう  入力   ToDoリスト        (Client)        表示 ユーザ
6. 実際にToDoリストを作りながら考えてみよう                   登録  入力   ToDoリスト                   参照        (Client)        表示               ...
6. 実際にToDoリストを作りながら考えてみよう               使用する開発ツール                 Aptana Studio                 http://www.aptana.com/    ...
6. 実際にToDoリストを作りながら考えてみよう     では、実際に作ってみましょう
6. 実際にToDoリストを作りながら考えてみよう   ライブコーディング中に出てきたjQueryは      便利なのでぜひ使ってみてください                     http://jquery.com/•jQuery日本語リ...
まとめ
まとめ•Webアプリケーションを構成する要素は3つ •HTML, CSS, JavaScript•HTMLには4つの要素がある •インライン、ボックス、フォーム、メディア•CSSは見た目の設定を記述する•JavaScriptはデータ処理や動きを...
以上、長らくの間ご清聴ありがとうございます。
Upcoming SlideShare
Loading in …5
×

Webapp startup example_to_dolist

491 views
413 views

Published on

0 Comments
0 Likes
Statistics
Notes
  • Be the first to comment

  • Be the first to like this

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

No notes for slide
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • Webapp startup example_to_dolist

    1. 1. TODOアプリで学ぶWEBアプリケーションのクライアント開発の事始め @天王洲で勉強会とか(2012/10/4) キヤノンソフト情報システム 内 慎一朗(Kumeuchi Shinichiro)
    2. 2. おことわり本発表は発表者個人の見解及び調査したものであり所属する企業とは何ら関係ありません。また、発表の内容についてはすでに古かったり、間違っている内容が含まれている事もあります。こういった発表にまだまだ慣れていないため、不手際があるとは思いますが、ご了承ください。
    3. 3. 自己紹介 内慎一朗。28歳独身おうし座。2009年キヤノンソフト情報システム入社。入社ともに上京した関西人。業務では、主にWebメールのパッケージ製品のスマートフォン版UI開発などクライアント開発の全般に従事。業務中ではJavaScript, CSS3, HTML5, Javaなど 趣味は登山、アーチェリー、ランニング、歩き旅などが趣味。リアルタイムWeb関連技術(WebSocket, node.jsなど)に興味があります。 @kumetter Kumeuchi Shinichiro
    4. 4. お話しする内容1.クライアントって?2.Webアプリケーションのクライアント3.HTMLについて4.CSSについて5.JavaScriptについて6.ToDOリストを作りながら考えてみよう
    5. 5. 1.クライアントって?
    6. 6. 1. クライアントって?クライアント【client】コンピュータネットワークにおいて、サーバコンピュータの提供する機能やデータを利用するコンピュータのこと。家庭でインターネットを利用する際のパソコンなどが該当する。また、サーバソフトウェアの提供する機能やデータ利用するソフトウェアのこと。Webブラウザなどが該当する。 IT用語辞典 e-Wordより引用
    7. 7. 1. クライアントって? 機能を提供。 リクエスト(要求)に応じて、レスポンス(応答)を返す。 機能を使う。 リクエストを送り、レスポンスを受け取る。
    8. 8. 1. クライアントって? 機能を提供。 リクエスト(要求)に応じて、レスポンス(応答)を返す。 サーバー 機能を使う。 リクエストを送り、レスポンスを受け取る。
    9. 9. 1. クライアントって? 機能を提供。 リクエスト(要求)に応じて、レスポンス(応答)を返す。 サーバー 機能を使う。 リクエストを送り、レスポンスを受け取る。 クライアント
    10. 10. 1. クライアントって? クライアントは人が直接使うもの
    11. 11. 2.WEBアプリケーションの クライアント
    12. 12. 2. Webアプリケーションのクライアント Webアプリケーションの クライアントが指す範囲
    13. 13. 2. Webアプリケーションのクライアント
    14. 14. 2. Webアプリケーションのクライアント
    15. 15. 2. Webアプリケーションのクライアント
    16. 16. 2. Webアプリケーションのクライアント 今回お話しする範囲は 原則的にWebブラウザです。
    17. 17. 2. Webアプリケーションのクライアント クライアントを構成する テクノロジー
    18. 18. 2. Webアプリケーションのクライアントデータ構造 HTMLデザイン CSS Flash Silverlight 動作 JavaScript
    19. 19. 2. Webアプリケーションのクライアントデータ構造 HTMLデザイン CSS Flash Silverlight 動作 JavaScript
    20. 20. 2. Webアプリケーションのクライアントデータ構造 HTMLデザイン CSS Flash Silverlight 動作 JavaScript
    21. 21. 3.HTMLについて
    22. 22. 3. HTMLについて •データをタグで囲み意味を持たせる文書 •開始タグ <html> •終了タグ </html> •属性 <div id=”hoge”> •タグは様々なものがあり、108もある •<title>, <h1>∼<h6>, <img>, <table>など •HTML5では新しいデータの表示も対応 (audio,videoなど)
    23. 23. 3. HTMLについて •基本的なHTMLの書き方 <!DOCTYPE html> ドキュメン ト宣言 <html> <head> <title>HTMLの書き方</title> ヘッダ部分 <meta charset="UTF-8"> 報を記述 </head> 文書のヘッダ情 <body> <header> <h1>HTMLの書き方</h1> <nav> <h1>ナビゲーション</h1> <ul> <li id=”navMenuA”>メニューA</li> <li id=”navMenuB”>メニューB</li> ンツ部分 コンテ <li id=”navMenuC>メニューC</li> を記述 され る部分 </ul> 実際に表示 </nav> </header> <div> </div> </body> </html>
    24. 24. 3. HTMLについて •ドキュメント宣言について •ドキュメント宣言はブラウザにする挨拶 •HTMLのバージョンなどを知らせます •HTML5で記述する場合には •<!DOCTYPE html> •HTML4で記述する場合には •<!DOCTYPE html4.0> •HTMLのバージョンが違うと見え方が変わっ たりするので意外と重要です
    25. 25. 3. HTMLについて •ヘッダ情報について •HTMLファイル全体にかかる情報を記述 •文書タイトルや、文字コードなど様々 •後述するCSSファイル、JSファイルの読み込みも •検索キーワードなどの宣言も •スマホで表示した際の倍率や拡大縮小の可否 •結構いろいろあってやっぱりここも意外と重要
    26. 26. 3. HTMLについて コンテンツ部分について コンテンツに使われるタグは 実に様々なタグがあります
    27. 27. 3. HTMLについて 大きく分けて4つに分類できます
    28. 28. 3. HTMLについて インライン要素 ボックス要素 大きく分けて4つに分類できます フォーム要素 メディア要素
    29. 29. 3. HTMLについて インライン要素 それ自体は形を持たない、 主に文字を格納するタグ要素  <a> リンクを貼る  <span> 特定の範囲をグループ化する  <br> 改行する  <code>, <ruby>など
    30. 30. 3. HTMLについて ボックス要素 形を持っているタグ。 ページを構成する際に、 一番重要で一番よく使われるタグ要素。 様々なデータ形式がある。
    31. 31. 3. HTMLについて ボックス要素  <p> 段落の単位でグルーピングする  <table>表形式のデータを表現する  <ul> リスト形式のデータを表現する  <div> 特定の範囲をグルーピングする  <header>, <footer>, <nav>など
    32. 32. 3. HTMLについて フォーム要素 サーバに送信するデータなどを 入力したり、送信する際に用いる要素。 Webアプリケーションではよく使う要素。  <form> データを送信するフォームを作成  <input> ボタンとか文字とか色々な要素  <select>,<option> セレクトメニュー要素  <textarea> 改行を含む文字列の情報  <fieldset>,<label>など
    33. 33. 3. HTMLについて メディア要素 画像などのメディアデータを表示するタグ。 HTML5で大幅に拡張されたタグ。  <img> 画像を表示するタグ  <canvas> ベクトルイメージを描画するタグ  <audio> 音楽を表示するタグ  <video> ビデオを表示するタグ  など
    34. 34. 3. HTMLについて 説明しきれないほど いろんなタグがあります…  <!-- 画面に表示されない    コメントタグも意外と重要です -->
    35. 35. 4.CSSについて
    36. 36. 4. CSSについて CSSはHTMLファイルの見栄えをよくするものです。 様々なことを指定することができます。 •文字の大きさや色、フォント •ボックスの外枠、内枠の幅や、枠線について •背景色や、背景イメージ •要素自体の高さや横幅 •配置される位置
    37. 37. 4. CSSについて 今までのCSSは基本的な事しか指定できなかった CSS3からはオシャレな事も指定できるように •みんな大好き角丸 •グラデーション •ボックスの影、文字の影 •アニメーションなども
    38. 38. 4. CSSについて ブラウザごとに挙動が違ったりするので注意! IE6~8の暗黒時代…
    39. 39. 4. CSSについて •CSSを指定する方法は大きく3つ •タグの中にstyle属性を定義して記述する •HTMLファイルの<head>タグ内に <style>タグを定義して記述する •CSSファイルを作成してファイル内に記述する •後者2つの方法はセレクタと呼ばれるスタイル が適用される範囲を指定する方法がポイントに
    40. 40. 4. CSSについて •実際にCSSはどのように書くかの例 CSSのテスト 見出しにありがちなデザインをどう書くか
    41. 41. 4. CSSについて •実際にCSSはどのように書くかの例 CSSのテスト 文字の色を青っぽい色に ボックスの内枠が10px左の枠線を10pxで青色に
    42. 42. 4. CSSについて •実際にCSSはどのように書くかの例 CSSのテスト 文字の色を青っぽい色に color: #3377FF; ボックスの内枠が10px左の枠線を10pxで青色に
    43. 43. 4. CSSについて •実際にCSSはどのように書くかの例 CSSのテスト 文字の色を青っぽい色に color: #3377FF; ボックスの内枠が10px padding: 10px;左の枠線を10pxで青色に
    44. 44. 4. CSSについて •実際にCSSはどのように書くかの例 CSSのテスト 文字の色を青っぽい色に color: #3377FF; ボックスの内枠が10px padding: 10px;左の枠線を10pxで青色に border-left: 10px solid blue;
    45. 45. 4. CSSについて •タグにstyle属性を定義して記述する方法 <h1 style=”color: #3377FF; padding: 10px; border-left: 10px solid blue;”> CSSのテスト</h1>
    46. 46. 4. CSSについて •<head>タグ内に<style>タグを定義して記述する <html> <head> <style> h1 { color: #3377FF; padding: 10px; border-left: 10px solid blue; } </style> </head> <body> <h1>CSSのテスト</h1> </body> </html>
    47. 47. 4. CSSについて •CSSファイルに記述する csstest.html <html> <head> <link rel=”stylesheet” href=”./style.css” tyle=”text/css”> </head> <body> <h1>CSSのテスト</h1> </body> </html> style.css h1 { color: #3377FF; padding: 10px; border-left: 10px solid blue; }
    48. 48. 4. CSSについて •style属性に書く方法はお手軽 •量が増えてくると重複したものが増えるかも •style属性によるcss指定は描画速度が遅くなる •cssによる指定が多い場合はできるだけセレクタ を用いる •cssファイルに分離した方が1つのファイルで複 数のページでスタイルが使い回せてGood!!
    49. 49. 4. CSSについて できるだけCSSファイルを使いましょう
    50. 50. 5.JAVASCRIPTについて
    51. 51. 5. JavaScriptについて JavaScriptとは •ブラウザ上で動作するスクリプト言語 •Webアプリケーションで欠かせない存在に •コンパイルをする必要はない •ページを読み込めば実行される •ページ上の要素を操作するのに重要な言語 •ページのデータの計算や、動きを実現する •今日サーバ側で動作させるようなものもある •コンパイルしてjsを書き出す言語も登場 •DART, JSX, TypeScriptなど
    52. 52. 5. JavaScriptについて 書き方
    53. 53. 5. JavaScriptについて 書き方 •HTMLタグのonclick属性に記述する •HTML上に<script>タグを定義し記述する •jsファイルに記述して、HTMLで読み込む なんだかCSSと同じような感じ…
    54. 54. 5. JavaScriptについて HTMLタグのonclick属性に記述する <input type=”button” onclick=”JavaScript: alert(‘タグの中でJavaScriptを実行’);”>
    55. 55. 5. JavaScriptについて HTML上に<script>タグを定義し記述する <script> alert(‘JavaScriptを<script>タグで実行’); </script>
    56. 56. 5. JavaScriptについて jsファイルに記述して、HTMLで読み込む jstest.html <html> <head> <script src=”./script.js”></script> </head> </html> script.js alert(‘jsファイルでJavaScriptを実行’);
    57. 57. 5. JavaScriptについて •タグ上に書く方法はその場でかけるのでお手軽 •CSSと同じで共通化できなかったり見づらい •<script>タグに書くのとjsファイルに書くのは  原則的には同じ意味 •ファイル化すると同じ処理を複数のページ使用可
    58. 58. 5. JavaScriptについて できるだけjsファイルを使いましょう
    59. 59. 5. JavaScriptについて JavaScriptは読み込んだ時点で実行されるので 記述する位置は大切です。
    60. 60. 5. JavaScriptについて <html> 読 <head> <script>alert(‘JS’);</script> み </head> <h1>○○○○○</h1> 込 <p> み ○○○○○○○○○○ ○○○○○○○○ 順 ○○○○○○○○○○○○ </p> 序 <input type=”button” onclick=”JavaScript:alert(‘JS’);”> <script>alert(‘JS’);</script> </html>
    61. 61. 5. JavaScriptについて <html> 1 読 <head> <script>alert(‘JS’);</script> み </head> <h1>○○○○○</h1> 込 <p> み ○○○○○○○○○○ ○○○○○○○○ 順 ○○○○○○○○○○○○ </p> 序 <input type=”button” onclick=”JavaScript:alert(‘JS’);”> <script>alert(‘JS’);</script> </html>
    62. 62. 5. JavaScriptについて <html> 1 読 <head> <script>alert(‘JS’);</script> み </head> <h1>○○○○○</h1> 込 <p> み ○○○○○○○○○○ ○○○○○○○○ 順 ○○○○○○○○○○○○ </p> 序 <input type=”button” onclick=”JavaScript:alert(‘JS’);”> <script>alert(‘JS’);</script> </html> 2
    63. 63. 5. JavaScriptについて <html> 1 読 <head> <script>alert(‘JS’);</script> み </head> <h1>○○○○○</h1> 込 <p> み ○○○○○○○○○○ ○○○○○○○○ 順 ○○○○○○○○○○○○ 押された時 </p> 序 <input type=”button” onclick=”JavaScript:alert(‘JS’);”> <script>alert(‘JS’);</script> </html> 2
    64. 64. 5. JavaScriptについて Webアプリケーションにおける JavaScriptの役割
    65. 65. 5. JavaScriptについて •データの操作を行う •ユーザの操作によって、処理を行う •イベントリスナー •onclick属性、onload属性などもある •画面上のデータをサーバへ送信する •Formの場合はsubmitでも送信できる •サーバから受信したデータを画面に反映する •jsでサーバから受信する仕組みはAjax
    66. 66. 6.実際にTODOリストを作りながら考えてみよう
    67. 67. 6. 実際にToDoリストを作りながら考えてみよう ToDoリストの機能 •入力したデータの登録、送信 •あらかじめ登録されたデータの受信、表示 基本的なWebアプリケーションの機能 を学習する事ができる
    68. 68. 6. 実際にToDoリストを作りながら考えてみよう 送信 受信 登録 入力 ToDoリスト サーバ (Client) 参照 表示 DB ユーザ
    69. 69. 6. 実際にToDoリストを作りながら考えてみよう 入力 ToDoリスト (Client) 表示 ユーザ
    70. 70. 6. 実際にToDoリストを作りながら考えてみよう 登録 入力 ToDoリスト 参照 (Client) 表示 WebStrage ユーザ
    71. 71. 6. 実際にToDoリストを作りながら考えてみよう 使用する開発ツール Aptana Studio http://www.aptana.com/ Javaでおなじみのeclipseベースの HTML,CSS,JavaScriptに特化した 総合開発環境(IDE) 現状これといった定番のエディタはない… •WebStorm - http://www.jetbrains.com/webstorm/ •DreamWeaver, eclipse(with HTML Editor Plugin),etc
    72. 72. 6. 実際にToDoリストを作りながら考えてみよう では、実際に作ってみましょう
    73. 73. 6. 実際にToDoリストを作りながら考えてみよう ライブコーディング中に出てきたjQueryは 便利なのでぜひ使ってみてください http://jquery.com/•jQuery日本語リファレンス - http://semooh.jp/jquery/•Qrefy - http://s3pw.com/qrefy/
    74. 74. まとめ
    75. 75. まとめ•Webアプリケーションを構成する要素は3つ •HTML, CSS, JavaScript•HTMLには4つの要素がある •インライン、ボックス、フォーム、メディア•CSSは見た目の設定を記述する•JavaScriptはデータ処理や動きを記述する •JavaScriptは実行されるタイミングに注意する•CSS, JavaScriptは原則的に外部ファイルに記述する
    76. 76. 以上、長らくの間ご清聴ありがとうございます。

    ×