Contenu connexe
Similaire à Webapp startup example_to_dolist
Similaire à Webapp startup example_to_dolist (20)
Webapp startup example_to_dolist
- 7. 1. クライアントって?
機能を提供。
リクエスト(要求)に応じて、レスポンス(応答)を返す。
機能を使う。
リクエストを送り、レスポンスを受け取る。
- 8. 1. クライアントって?
機能を提供。
リクエスト(要求)に応じて、レスポンス(応答)を返す。
サーバー
機能を使う。
リクエストを送り、レスポンスを受け取る。
- 9. 1. クライアントって?
機能を提供。
リクエスト(要求)に応じて、レスポンス(応答)を返す。
サーバー
機能を使う。
リクエストを送り、レスポンスを受け取る。
クライアント
- 22. 3. HTMLについて
•データをタグで囲み意味を持たせる文書
•開始タグ <html>
•終了タグ </html>
•属性 <div id=”hoge”>
•タグは様々なものがあり、108もある
•<title>, <h1>∼<h6>, <img>, <table>など
•HTML5では新しいデータの表示も対応
(audio,videoなど)
- 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. 3. HTMLについて
•ドキュメント宣言について
•ドキュメント宣言はブラウザにする挨拶
•HTMLのバージョンなどを知らせます
•HTML5で記述する場合には
•<!DOCTYPE html>
•HTML4で記述する場合には
•<!DOCTYPE html4.0>
•HTMLのバージョンが違うと見え方が変わっ
たりするので意外と重要です
- 25. 3. HTMLについて
•ヘッダ情報について
•HTMLファイル全体にかかる情報を記述
•文書タイトルや、文字コードなど様々
•後述するCSSファイル、JSファイルの読み込みも
•検索キーワードなどの宣言も
•スマホで表示した際の倍率や拡大縮小の可否
•結構いろいろあってやっぱりここも意外と重要
- 28. 3. HTMLについて
インライン要素 ボックス要素
大きく分けて4つに分類できます
フォーム要素 メディア要素
- 29. 3. HTMLについて
インライン要素
それ自体は形を持たない、
主に文字を格納するタグ要素
<a> リンクを貼る
<span> 特定の範囲をグループ化する
<br> 改行する
<code>, <ruby>など
- 30. 3. HTMLについて
ボックス要素
形を持っているタグ。
ページを構成する際に、
一番重要で一番よく使われるタグ要素。
様々なデータ形式がある。
- 31. 3. HTMLについて
ボックス要素
<p> 段落の単位でグルーピングする
<table>表形式のデータを表現する
<ul> リスト形式のデータを表現する
<div> 特定の範囲をグルーピングする
<header>, <footer>, <nav>など
- 32. 3. HTMLについて
フォーム要素
サーバに送信するデータなどを
入力したり、送信する際に用いる要素。
Webアプリケーションではよく使う要素。
<form> データを送信するフォームを作成
<input> ボタンとか文字とか色々な要素
<select>,<option> セレクトメニュー要素
<textarea> 改行を含む文字列の情報
<fieldset>,<label>など
- 33. 3. HTMLについて
メディア要素
画像などのメディアデータを表示するタグ。
HTML5で大幅に拡張されたタグ。
<img> 画像を表示するタグ
<canvas> ベクトルイメージを描画するタグ
<audio> 音楽を表示するタグ
<video> ビデオを表示するタグ
など
- 34. 3. HTMLについて
説明しきれないほど
いろんなタグがあります…
<!-- 画面に表示されない
コメントタグも意外と重要です -->
- 36. 4. CSSについて
CSSはHTMLファイルの見栄えをよくするものです。
様々なことを指定することができます。
•文字の大きさや色、フォント
•ボックスの外枠、内枠の幅や、枠線について
•背景色や、背景イメージ
•要素自体の高さや横幅
•配置される位置
- 37. 4. CSSについて
今までのCSSは基本的な事しか指定できなかった
CSS3からはオシャレな事も指定できるように
•みんな大好き角丸
•グラデーション
•ボックスの影、文字の影
•アニメーションなども
- 39. 4. CSSについて
•CSSを指定する方法は大きく3つ
•タグの中にstyle属性を定義して記述する
•HTMLファイルの<head>タグ内に
<style>タグを定義して記述する
•CSSファイルを作成してファイル内に記述する
•後者2つの方法はセレクタと呼ばれるスタイル
が適用される範囲を指定する方法がポイントに
- 40. 4. CSSについて
•実際にCSSはどのように書くかの例
CSSのテスト
見出しにありがちなデザインをどう書くか
- 41. 4. CSSについて
•実際にCSSはどのように書くかの例
CSSのテスト
文字の色を青っぽい色に
ボックスの内枠が10px
左の枠線を10pxで青色に
- 42. 4. CSSについて
•実際にCSSはどのように書くかの例
CSSのテスト
文字の色を青っぽい色に
color: #3377FF;
ボックスの内枠が10px
左の枠線を10pxで青色に
- 43. 4. CSSについて
•実際にCSSはどのように書くかの例
CSSのテスト
文字の色を青っぽい色に
color: #3377FF;
ボックスの内枠が10px
padding: 10px;
左の枠線を10pxで青色に
- 44. 4. CSSについて
•実際にCSSはどのように書くかの例
CSSのテスト
文字の色を青っぽい色に
color: #3377FF;
ボックスの内枠が10px
padding: 10px;
左の枠線を10pxで青色に
border-left: 10px solid blue;
- 45. 4. CSSについて
•タグにstyle属性を定義して記述する方法
<h1 style=”color: #3377FF; padding: 10px;
border-left: 10px solid blue;”>
CSSのテスト</h1>
- 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. 4. CSSについて
•style属性に書く方法はお手軽
•量が増えてくると重複したものが増えるかも
•style属性によるcss指定は描画速度が遅くなる
•cssによる指定が多い場合はできるだけセレクタ
を用いる
•cssファイルに分離した方が1つのファイルで複
数のページでスタイルが使い回せてGood!!
- 51. 5. JavaScriptについて
JavaScriptとは
•ブラウザ上で動作するスクリプト言語
•Webアプリケーションで欠かせない存在に
•コンパイルをする必要はない
•ページを読み込めば実行される
•ページ上の要素を操作するのに重要な言語
•ページのデータの計算や、動きを実現する
•今日サーバ側で動作させるようなものもある
•コンパイルしてjsを書き出す言語も登場
•DART, JSX, TypeScriptなど
- 53. 5. JavaScriptについて
書き方
•HTMLタグのonclick属性に記述する
•HTML上に<script>タグを定義し記述する
•jsファイルに記述して、HTMLで読み込む
なんだかCSSと同じような感じ…
- 54. 5. JavaScriptについて
HTMLタグのonclick属性に記述する
<input type=”button” onclick=”JavaScript:
alert(‘タグの中でJavaScriptを実行’);”>
- 55. 5. JavaScriptについて
HTML上に<script>タグを定義し記述する
<script>
alert(‘JavaScriptを<script>タグで実行’);
</script>
- 56. 5. JavaScriptについて
jsファイルに記述して、HTMLで読み込む
jstest.html
<html>
<head>
<script src=”./script.js”></script>
</head>
</html>
script.js
alert(‘jsファイルでJavaScriptを実行’);
- 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. 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. 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. 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
- 65. 5. JavaScriptについて
•データの操作を行う
•ユーザの操作によって、処理を行う
•イベントリスナー
•onclick属性、onload属性などもある
•画面上のデータをサーバへ送信する
•Formの場合はsubmitでも送信できる
•サーバから受信したデータを画面に反映する
•jsでサーバから受信する仕組みはAjax
- 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
- 73. 6. 実際にToDoリストを作りながら考えてみよう
ライブコーディング中に出てきたjQueryは
便利なのでぜひ使ってみてください
http://jquery.com/
•jQuery日本語リファレンス - http://semooh.jp/jquery/
•Qrefy - http://s3pw.com/qrefy/
- 75. まとめ
•Webアプリケーションを構成する要素は3つ
•HTML, CSS, JavaScript
•HTMLには4つの要素がある
•インライン、ボックス、フォーム、メディア
•CSSは見た目の設定を記述する
•JavaScriptはデータ処理や動きを記述する
•JavaScriptは実行されるタイミングに注意する
•CSS, JavaScriptは原則的に外部ファイルに記述する
Notes de l'éditeur
- \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