Upgrade to Pro — share decks privately, control downloads, hide ads and more …

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

Avatar for 北海道科学大学　電子計算機研究部 北海道科学大学　電子計算機研究部
November 14, 2016
Education
0
51

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

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

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

November 14, 2016
Tweet

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

See All by 北海道科学大学　電子計算機研究部
第12回Network講座2019
Avatar for 北海道科学大学　電子計算機研究部 densan
1
63
第11回Network講座2019
Avatar for 北海道科学大学　電子計算機研究部 densan
0
73
第10回Network講座2019
Avatar for 北海道科学大学　電子計算機研究部 densan
0
48
第09回Network講座2019
Avatar for 北海道科学大学　電子計算機研究部 densan
1
160
第08回Network講座2019
Avatar for 北海道科学大学　電子計算機研究部 densan
0
52
第07回Network講座2019
Avatar for 北海道科学大学　電子計算機研究部 densan
0
49
第06回Network講座2019
Avatar for 北海道科学大学　電子計算機研究部 densan
0
74
第05回Network講座2019
Avatar for 北海道科学大学　電子計算機研究部 densan
0
54
第04回Network講座2019
Avatar for 北海道科学大学　電子計算機研究部 densan
0
120

Other Decks in Education

See All in Education
Web 2.0 Patterns and Technologies - Lecture 8 - Web Technologies (1019888BNR)
Avatar for Beat Signer signer
PRO
0
3k
The World That Saved Me: A Story of Community and Gratitude
Avatar for hashimo2 _hashimo2
3
500
【ZEPホスト用メタバース校舎操作ガイド】
Avatar for aini school小中等部 ainischool
0
170
IKIGAI World Fes：program
Avatar for Fujinari tsutsumi
1
2.6k
1014
Avatar for cbtlibrary cbtlibrary
0
520
10分で学ぶ すてきなモナド
Avatar for soukouki soukouki
1
140
Cifrado asimétrico
Avatar for i-rochiño irocho
0
380
あなたの言葉に力を与える、演繹的なアプローチ
Avatar for Takuto Nagami logica0419
1
260
TypeScript初心者向け完全ガイド
Avatar for MIKIO KUBO mickey_kubo
1
120
0121
Avatar for cbtlibrary cbtlibrary
0
120
LotusScript でエージェント情報を出力してみた
Avatar for Haruyuki Nakano harunakano
0
120
1111
Avatar for cbtlibrary cbtlibrary
0
270

Featured

See All Featured
RailsConf & Balkan Ruby 2019: The Past, Present, and Future of Rails at GitHub
Avatar for Eileen M. Uchitelle eileencodes
141
34k
JAMstack: Web Apps at Ludicrous Speed - All Things Open 2022
Avatar for David Neal reverentgeek
1
320
The Mindset for Success: Future Career Progression
Avatar for Greg Gifford greggifford
PRO
0
230
Leading Effective Engineering Teams in the AI Era
Avatar for Addy Osmani addyosmani
9
1.5k
Imperfection Machines: The Place of Print at Facebook
Avatar for Scott Boms scottboms
269
14k
The innovator’s Mindset - 
Leading Through an Era of Exponential Change - McGill University 2025
Avatar for Jean-Marc De Jonghe jdejongh
PRO
1
88
Large-scale JavaScript Application Architecture
Avatar for Addy Osmani addyosmani
515
110k
The Invisible Side of Design
Avatar for Vitaly Friedman smashingmag
302
51k
Discover your Explorer Soul
Avatar for Emna emna__ayadi
2
1.1k
Bioeconomy Workshop: Dr. Julius Ecuru, Opportunities for a Bioeconomy in West Africa
Avatar for AKADEMIYA2063 akademiya2063
PRO
1
54
The Success of Rails: Ensuring Growth for the Next 100 Years
Avatar for Eileen M. Uchitelle eileencodes
47
7.9k
Leveraging LLMs for student feedback in introductory data science courses - posit::conf(2025)
Avatar for Mine Cetinkaya-Rundel minecr
0
130

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 を押す
  10. None

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

    Install Packageを選択する
  12. None

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

  14. y