第四回後期ネットワークチーム講座

Transcript

1. ネットワークチーム 後期第四回講座資料 HTML、Jade
2. 目次 • HTML • Jade
3. HTML （HyperText Markup Language） • Webページを作成するための言語。 • 今日のWebページの多くはHTMLで作成されている。 • 「タグ」というものを使って記述する
4. HTML （HyperText Markup Language） <!DOCTYPE html> <html lang=“ja”> <head> <meta charset=“utf-8”> <title>densan</title> </head> <body> <h2>電算ネットワークチーム</h2> <p>電子計算機研究部へようこそ</p> </body> </html>
5. ＭＶＣモデル • “Model” “View” “Controler” の略 • プログラミングを行う際に、プログラムを 1. 実際の処理、データベースへのアクセス（Model） 2. 入力の受け取り、ModelとViewの制御（Controler） 3. クライアントへの情報の表示（View） この3つの機能に分割して作成することをいう。
6. MVCモデル • Koa.jsのみではViewの機能が実現できないため、 外部のテンプレートエンジンを利用する必要がある。 1. Jade 2. EJS 3. Hogan.js 4. ECT …など
7. Jadeの記法 ①基本的にタグ名のみ記述 （<>いらず、閉じタグもなし） ② インデントを用いて階層構造を表現する ③タグ名の後に( )を付けて属性の指定ができる
8. Jadeの記法 ④ 簡単な制御構文（While, If など）や変数、JSコードが利用で きる JSのコードは先頭に” – “（ハイフン）を付けて記述する ⑤ 変数を呼び出す場合、 #{変数名} または =変数名 と記述 ⑥ コマンドを用いることでテンプレートの継承ができる
9. パッケージの入れ方 （Sublime Text） 1. Sublime Textを起動してCtrl キー + shift キー + P を押す
11. パッケージの入れ方 （Sublime Text） 2. フォームに install と入力する 3. Package Control: Install Packageを選択する
13. パッケージの入れ方 （Sublime Text） 4. Jade と入力して出てくる選択肢の一番上をクリック
14. y