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

ネットワークチーム後期第四回講座資料 HTML、Jade

目次 • HTML • Jade

HTML （HyperText Markup Language） • Webページを作成するための言語。 • 今日のWebページの多くはHTMLで作成されている。 • 「タグ」というものを使って記述する

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>

ＭＶＣモデル • “Model” “View” “Controler” の略 • プログラミングを行う際に、プログラムを 1. 実際の処理、データベースへのアクセス（Model）
2. 入力の受け取り、ModelとViewの制御（Controler） 3. クライアントへの情報の表示（View）この3つの機能に分割して作成することをいう。

MVCモデル • Koa.jsのみではViewの機能が実現できないため、外部のテンプレートエンジンを利用する必要がある。 1. Jade 2. EJS 3. Hogan.js
4. ECT …など

Jadeの記法 ①基本的にタグ名のみ記述（<>いらず、閉じタグもなし） ② インデントを用いて階層構造を表現する ③タグ名の後に( )を付けて属性の指定ができる

Jadeの記法 ④ 簡単な制御構文（While, If など）や変数、JSコードが利用できる JSのコードは先頭に” – “（ハイフン）を付けて記述する ⑤
変数を呼び出す場合、 #{変数名} または =変数名と記述 ⑥ コマンドを用いることでテンプレートの継承ができる

パッケージの入れ方（Sublime Text） 1. Sublime Textを起動してCtrl キー + shift キー
+ P を押す

パッケージの入れ方（Sublime Text） 2. フォームに install と入力する 3. Package Control:
Install Packageを選択する

パッケージの入れ方（Sublime Text） 4. Jade と入力して出てくる選択肢の一番上をクリック

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

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

北海道科学大学　電子計算機研究部

More Decks by 北海道科学大学　電子計算機研究部

Other Decks in Education

Featured

Transcript

ネットワークチーム後期第四回講座資料 HTML、Jade

目次 • HTML • Jade

HTML （HyperText Markup Language） • Webページを作成するための言語。 • 今日のWebページの多くはHTMLで作成されている。 • 「タグ」というものを使って記述する

HTML （HyperText Markup Language） <!DOCTYPE html> <html lang=“ja”> <head> <meta

ＭＶＣモデル • “Model” “View” “Controler” の略 • プログラミングを行う際に、プログラムを 1. 実際の処理、データベースへのアクセス（Model）

MVCモデル • Koa.jsのみではViewの機能が実現できないため、外部のテンプレートエンジンを利用する必要がある。 1. Jade 2. EJS 3. Hogan.js

Jadeの記法 ①基本的にタグ名のみ記述（<>いらず、閉じタグもなし） ② インデントを用いて階層構造を表現する ③タグ名の後に( )を付けて属性の指定ができる

Jadeの記法 ④ 簡単な制御構文（While, If など）や変数、JSコードが利用できる JSのコードは先頭に” – “（ハイフン）を付けて記述する ⑤

パッケージの入れ方（Sublime Text） 1. Sublime Textを起動してCtrl キー + shift キー

パッケージの入れ方（Sublime Text） 2. フォームに install と入力する 3. Package Control:

パッケージの入れ方（Sublime Text） 4. Jade と入力して出てくる選択肢の一番上をクリック

y

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

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

More Decks by 北海道科学大学 電子計算機研究部

Other Decks in Education

Featured

Transcript

More Decks by 北海道科学大学　電子計算機研究部