北海道工業大学電子計算機研究部ネットワークチーム　前期講座資料01

2.  目標
 講座概要
 HTML とは
 CSS とは
 JavaScript とは
 サーバサイドの仕組み
 クライアントサイドの仕組み
 Web プログラミングの利点と欠点
 課題

3.  Web に対する興味と知識を深める。
 プログラミングの為の思考力を身につけ
る。
 簡単なゲームもしくは Web アプリケーショ
ンを開発する為の礎を築く。

4. 講座
(学習のキッカケ作り、ガイド)
課題
(講座に対するフィードバック)
応用
(復習、予習、自力での学習)

5.  サーバ側で計算して、クライアント(パソコ
ン)に表示する。
 Web はクライアントサーバモデル
Web サーバクライアント
HTML CSS JS
Image

6.  文章に構造を持たせた文書。
 写真や図を埋め込むことが可能。
HTMLとは文章に構造を持
たせた文書のことで、写
真や図を埋め込むことが
できます。CSSはHTMLに
対してスタイルを指定す
るものです。JavaScript
はHTMLに対して動きをも
たせるもので、例えば写
真をスライドショーで表
示させることができます。
文章に構造を持たせた
文書のことで、写真や図
を埋め込むことができま
す。
> CSS
HTMLに対してスタイル
を指定する
> JavaScript
HTMLに対して動きをも
たせる
HTML とは
文章 HTML 文書

7.  HTML に対してスタイルを指定するもの。

8.  プログラミング言語
› スクリプト言語
 HTML に対して動きを持たせるもの。
› アニメーション
› ユーザインターフェース

9.  要求されたファイル等をクライアントへ送
信する。
 送信されてきたデータを用いて、何らかの
処理をした後に結果をクライアントへ返
す。
詳細は後期講座でやります。
今知りたい人は、後で講師の所まで。

10.  クライアントサイドでは Web ブラウザが
サーバと通信する。
 Web ブラウザの HTML レンダリングエンジ
ンが HTML/CSS/JS を解釈して表示する。

11.  好きなブラウザは？
› Internet Explorer Trident
› Safari WebKit
› Google Chrome (Chromium) WebKit → Blink
› Firefox Gecko → Servo
› Opera Presto → WebKit → Blink
› その他

12.  利点
› 画面に表示させるのが比較的簡単。
› 単純な処理に向いている。
› インターフェース(クライアントサイド)とロジック
(サーバサイド)が疎結合。
 欠点
› 複数のブラウザに対応しなければならない。
› セキュリティ面に特に注意する必要がある。
› ブラウザの上で動作することによるオーバーヘッド
が大きい。

13.  講座に対するアンケート
› 分からなかった点
› 特に重要だと思った点
› 次に学びたいこと
› どのような形式の講座を希望するか
 語句調べ
› HTML5
› CSS3
› ECMAScript6
› Node.js