コンピュータサイエンス 4. ウェブプログラミング

(1)

コンピュータサイエンス

4. ウェブプログラミング

Chris Plaintail

(2)

ウェブプログラミング

ここではウェブ上でのプログラミングを学ぶ．ウェブページを記述するマークアップ言語 HTML の仕様は，もともと構造と表現を区別するようになっていなかったが，現在では，構造は HTML で，表現は CSS で指定される．まず，この点を簡単におさらいする．また，HTML は静的なページを一方向的に伝えるように設計されていて，クライアント側からの要求によって動的に変化するページを提供する機能を持っていない．双方向的な通信による動的なページをつくるために，様々な工夫がなされてきているが，この中で Ajax (Asynchronous JavaScript+ XML) と PHP を紹介する．また最後に，SQL によるデータベースの取り扱いも取り上げる．

(4)

ウェブのしくみ

ウェブサーバー HTML, CSS ウェブブラウザ CSS -http, https HTMLは意味と構造を指示する（表現は CSS で指定する）．テキストエディタで編集してウェブブラウザで表示する．ファイル名の拡張子は .html とする．ローカルで表示するには「file://ファイルのパス」とする．

(5)

HTML：基本

要素・内容・タグ

<タグ属性="値">内容</タグ>

空要素

<タグ属性="値"> 汎用属性 style id class

(6)

HTML：ヘッダ情報

サンプル

sample-0.html

<!DOCTYPE html> <html lang="ja"> <head> <title>タイトル</title> <meta charset="utf-8">

(7)

HTML：基本要素

サンプル

sample-1.html

<!DOCTYPE html> <html lang="ja"> <head> ... </head> <body> <h1>見出し</h1> <p>本文（段落） <a href="hyperlink.html">ハイパーリンク</a> <img src="gazou.jpg" alt="画像">

</p> </body> </html>

(8)

HTML：表組

サンプル

sample-2.html

<!DOCTYPE html> <html lang="ja"> <head> ... </head> <body> <h2>表組み</h2> <table> <tr><td>日本</td><td>東京</td></tr> <tr><td>中華民国</td><td>台北</td></tr> <tr><td>大韓民国</td><td>ソウル</td></tr> </table> </body> </html>

(9)

HTML：リスト

サンプル

sample-3.html

(10)

HTML：フォーム

サンプル

sample-4.html

<body>

<form action="sample.php" methot="post"> メールアドレス：<input type="email"><br> パスワード：<input type="password"><br> 電話番号：<input type="tel"><br>

氏名：<input type="text"><br> <input type="submit" value="送信"> <input type="reset" value="リセット"> </form>

(11)

HTML：フォーム

サンプル

sample-5.html

<form action="sample.php" methot="post"> 言語：

<select id="language" name="language"> <option value="en">英語</option> <option value="de">ドイツ語</option> <option value="fr">フランス語</option> <option value="ja" selected>日本語</option> <option value="zh">中国語</option>

</select> </form>

(12)

HTML：フォーム

サンプル

sample-6.html

連絡方法（複数選択可）：

<select id="contact" name="contact" multiple size="5"> <option value="email" selected>電子メール</option> <option value="tel" selected>電話</option>

<option value="fax" selected>ファックス</option> <option value="postal" selected>郵便</option> <option value="office">直接来場</option> </select>

(13)

CSS

設定の適用 style属性（個別に設定） <style>要素（ヘッダに記述） <link>要素（外部ファイルから読み込む） <html lang="ja"> <head>... </head> <body> <p style="color:blue;font-size:10px;"> style 属性で個別に設定</p> </body> </html>

(14)

CSS

設定の適用 style属性（個別に設定） <style>要素（ヘッダに記述） <link>要素（外部ファイルから読み込む） <html lang="ja"> <head> <style> p {color:blue; font-size:10pt;} </style> </head> <body> <p>ヘッダに記述</p> </body> </html>

(15)

CSS

設定の適用 style属性（個別に設定） <style>要素（ヘッダに記述） <link>要素（外部ファイルから読み込む） <html lang="ja"> <head>

example.css

p {color:blue; font-size:10pt;}

(16)

CSS

表現の指定

セレクタ{プロパティ:値;}

(17)

CSS

セレクタ

要素要素名 p {color:blue;}

全称 * * {color:bule;}

class 要素名. クラス名 p.xxx {color:blue;}

id 要素名#id 名 p#yyy {color:blue;}

未訪問リンク要素名:link a:link {color:blue;}

訪問済リンク要素名:visited a:visited {color:blue;}

列挙セレクタ, セレクタ h1, h2 {color:blue;}

子孫セレクタセレクタ p li{color:blue;}

子セレクタ>セレクタ ul > li {color:blue;}

(18)

プログラムの記述場所

直接 script 要素に記述（head または body）外部ファイルに記述 <!DOCTYPE html> <html lang="ja"> <head> <title>JavaScript プログラム</title> </head> <body> <script> alert("Hello World!!"); </script> </body> </html>

(19)

プログラムの記述場所

直接 script 要素に記述（head または body）外部ファイルに記述 <!DOCTYPE html> <html lang="ja"> <head> <title>JavaScript プログラム</title> <script src="example.js"></script> </head> <body> </body> </html>

example.js

console.log("Hello World!!");

(20)

プログラムの記述

行末にセミコロン ; <!DOCTYPE html> <html lang="ja"> <head> <title>JavaScript プログラム</title> </head> <body> <script> alert("Hello World!!"); </script> </body> </html>

(21)

変数

宣言

var x, y_1, X; var price, number; 値の代入・初期化

x = 1; var Y = 3;

(22)

変数

データ型数値型整数・実数 10 1.5 文字列型クオートで囲む ’Hello World!’ "こんにちは" 論理型真偽値 true false

(23)

配列

配列の宣言 var 配列名 = [ 値 1, 値 2, 値 3,...]; var fruits = [ "りんご", "みかん", "いちご" ]; var petbottle = [ 280, 350, 500, 900 ]; 配列要素の参照配列名 [インデックス] 配列要素への値の代入配列名 [インデックス]=値;

(24)

二次元配列

var matrix = [ [1, 2, 3], [10, 20, 30], [100, 200, 300]]; console.log(matrix[0][0]); console.log(matrix[0][1]); console.log(matrix[0][2]); console.log(matrix[1][0]); console.log(matrix[1][1]); console.log(matrix[1][2]); console.log(matrix[2][0]); console.log(matrix[2][1]); console.log(matrix[2][2]);

(25)

連想配列

宣言 var Taro = { "身長" : 170, "体重" : 70, "性別" : "男性" } 要素の参照連想配列名. キー【問 2】上の例にある連想配列を宣言し，その各要素を alert で出力するプログラムを作成しよう．

(26)

演算子

代入演算子 a = 3 算術演算子 3 + 1 比較演算子 a < 10

(27)

演算子

算術演算子 + 数値の加算 1 + 1 2 + 文字列連結 "Hello"+"World!" "HelloWorld!" - 数値の減算 3 - 1 2 * 数値の乗算 3 * 2 6 / 数値の除算 10 / 3 3 % 数値の剰余 10 * 3 1

(28)

演算子

複合代入演算子 += a += b; a = a + b; -= a -= b; a = a - b; *= a *= b; a = a * b; /= a /= b; a = a / b; %= a %= b; a = a % b; ++ a++; a = a + 1; -- a--; a = a - 1;

(29)

演算子

【問 3】変数 a, b を定義し，適当な値を代入して，それらの四則演算（加算・減算・乗算・除算）の結果を alert で出力するプログラムをつくれ． 1 結果をまとめてひとつの alert で． 2 各演算ごとに別々の alert で．【問 4】前問の計算結果を，たとえば「3+ 2 を計算すると 7 になります」のように，文字列とともに alert で出力してみよ．

(30)

演算子

【問 5】連想配列を定義して，身長と体重の平均を算出するプログラムを作成せよ．名前身長体重性別 Taro 170 70 男性 Yuri 180 75 女性 Saburo 175 80 男性 Tulip 160 60 女性 Goro 185 90 男性

(31)

(32)

(33)

(34)

(35)

(36)

(37)

(38)

(39)

(40)

(41)

(42)

(43)

コンピュータサイエンス 4. ウェブプログラミング