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
49
第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
【洋書和訳：さよならを待つふたりのために】第1章　出会いとメタファー
Avatar for 柳沼諒平 yaginumatti
0
250
Generative AI Leader 認定試験範囲の解説
Avatar for Cloud Ace cloudace
0
100
【洋書和訳：さよならを待つふたりのために】第2章　ガン特典と実存的フリースロー
Avatar for 柳沼諒平 yaginumatti
0
230
TinyGoをWebブラウザで動かすための方法+アルファ_20260201
Avatar for モブエンジニア（Masaki Okuda） masakiokuda
2
230
Postcards
Avatar for Gabriel Ramírez-Vilchis gabrielramirezv
0
120
KBS新事業創造体験2025_科目説明会
Avatar for Yasuchika Wakayama yasuchikawakayama
0
160
10分で学ぶ すてきなモナド
Avatar for soukouki soukouki
1
150
Evaluation Methods - Lecture 6 - Human-Computer Interaction (1023841ANR)
Avatar for Beat Signer signer
PRO
0
1.3k
1125
Avatar for cbtlibrary cbtlibrary
0
170
栃木にいても「だいじ」だっぺ〜！ 栃木＆全国アジャイルコミュニティへの参加・運営の魅力
Avatar for sasakendayo sasakendayo
1
150
JAPAN AI CUP Prediction Tutorial
Avatar for Shotaro Ishihara upura
2
720
SJRC 2526
Avatar for cbtlibrary cbtlibrary
0
200

Featured

See All Featured
Heart Work Chapter 1 - Part 1
Avatar for Lake Fama lfama
PRO
5
35k
Building Experiences: Design Systems, User Experience, and Full Site Editing
Avatar for Michelle Schulp Hunt marktimemedia
0
410
Darren the Foodie - Storyboard
Avatar for Kevinho.art khoart
PRO
2
2.4k
BBQ
Avatar for Matthew Crist matthewcrist
89
10k
Deep Space Network (abreviated)
Avatar for Tony Rice tonyrice
0
67
Are puppies a ranking factor?
Avatar for Jono Alderson jonoalderson
1
2.7k
Build your cross-platform service in a week with App Engine
Avatar for Jose L jlugia
234
18k
Why Your Marketing Sucks and What You Can Do About It - Sophie Logan
Avatar for Sophie Logan marketingsoph
0
77
世界の人気アプリ100個を分析して見えたペイウォール設計の心得
Avatar for Akihiro Kokubo akihiro_kokubo
PRO
66
37k
The Hidden Cost of Media on the Web [PixelPalooza 2025]
Avatar for Tammy Everts tammyeverts
2
200
How to audit for AI Accessibility on your Front & Back End
Avatar for davetheseo davetheseo
0
180
Why Mistakes Are the Best Teachers: Turning Failure into a Pathway for Growth
Avatar for Umar Saidu Auna auna
0
57

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