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

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

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

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

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

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

November 14, 2016
Tweet

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

See All by 北海道科学大学　電子計算機研究部
第12回Network講座2019
Avatar for 北海道科学大学　電子計算機研究部 densan
1
55
第11回Network講座2019
Avatar for 北海道科学大学　電子計算機研究部 densan
0
70
第10回Network講座2019
Avatar for 北海道科学大学　電子計算機研究部 densan
0
46
第09回Network講座2019
Avatar for 北海道科学大学　電子計算機研究部 densan
1
160
第08回Network講座2019
Avatar for 北海道科学大学　電子計算機研究部 densan
0
49
第07回Network講座2019
Avatar for 北海道科学大学　電子計算機研究部 densan
0
46
第06回Network講座2019
Avatar for 北海道科学大学　電子計算機研究部 densan
0
71
第05回Network講座2019
Avatar for 北海道科学大学　電子計算機研究部 densan
0
51
第04回Network講座2019
Avatar for 北海道科学大学　電子計算機研究部 densan
0
100

Other Decks in Education

See All in Education
登壇未経験者のための登壇戦略～LTは設計が9割！！！～
Avatar for モブエンジニア masakiokuda
2
490
Visualisation Techniques - Lecture 8 - Information Visualisation (4019538FNR)
Avatar for Beat Signer signer
PRO
0
2.4k
SkimaTalk Teacher Guidelines Summary
Avatar for SkimaTalk skimatalk
0
790k
2025年度春学期　統計学　第2回　統計資料の収集と読み方（講義前配付用） (2025. 4. 17)
Avatar for Akira Asano akiraasano
PRO
0
140
SARA Annual Report 2024-25
Avatar for SARA Institute sara2023
1
180
OpenSourceSummitJapanを運営してみた話
Avatar for Kujiraitakahiro kujiraitakahiro
0
700
著作権と授業に関する出前講習会/dme-2025-05-01
Avatar for Takahiro Sumiya gnutar
0
200
教員向け生成AI基礎講座（2025年3月28日 東京大学メタバース工学部 ジュニア講座）
Avatar for Lui Yoshida luiyoshida
1
560
Dashboards - Lecture 11 - Information Visualisation (4019538FNR)
Avatar for Beat Signer signer
PRO
1
2k
実務プログラム
Avatar for リスナビ takenawa
0
5k
Gesture-based Interaction - Lecture 6 - Next Generation User Interfaces (4018166FNR)
Avatar for Beat Signer signer
PRO
0
1.7k
系統性を意識したプログラミング教育～ガチャを実装しよう～
Avatar for アシアル情報教育研究所 asial_edu
0
400

Featured

See All Featured
Designing Dashboards & Data Visualisations in Web Apps
Avatar for Des Traynor destraynor
231
53k
Dealing with People You Can't Stand - Big Design 2015
Avatar for Cassini Nazir cassininazir
367
26k
GraphQLとの向き合い方2022年版
Avatar for Yosuke Kurami quramy
48
14k
What's in a price? How to price your products and services
Avatar for Michael Herold michaelherold
246
12k
Improving Core Web Vitals using Speculation Rules API
Avatar for Sergey Chernyshev sergeychernyshev
17
940
Fantastic passwords and where to find them - at NoRuKo
Avatar for Phil Nash philnash
51
3.3k
Building Adaptive Systems
Avatar for Chris Keathley keathley
43
2.6k
Building Better People: How to give real-time feedback that sticks.
Avatar for Will Jessup wjessup
367
19k
Rebuilding a faster, lazier Slack
Avatar for samanthasiow samanthasiow
82
9.1k
Gamification - CAS2011
Avatar for David Bonilla davidbonilla
81
5.3k
Distributed Sagas: A Protocol for Coordinating Microservices
Avatar for Caitie McCaffrey caitiem20
331
22k
Easily Structure & Communicate Ideas using Wireframe
Avatar for Afnizar Nur Ghifari afnizarnur
194
16k

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