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

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

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

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

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

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

November 14, 2016
Tweet

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

See All by 北海道科学大学　電子計算機研究部
第12回Network講座2019
Avatar for 北海道科学大学　電子計算機研究部 densan
1
57
第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
110

Other Decks in Education

See All in Education
Портфолио - Шынар Ауелбекова
Avatar for z shynar
0
120
Node-REDで広がるプログラミング教育の可能性
Avatar for ueponx ueponx
0
160
HTML5 and the Open Web Platform - Lecture 3 - Web Technologies (1019888BNR)
Avatar for Beat Signer signer
PRO
2
3k
尊敬語「くださる」と謙譲語「いただく」の使い分け
Avatar for marimari hysmrk
0
120
Présentation_2nde_2025.pdf
Avatar for Monsieur Bernhard bernhardsvt
0
280
[Segah 2025] Gamified Interventions for Composting Behavior in the Workplace
Avatar for Ezequiel dos Santos ezefranca
0
220
Master of Applied Science & Engineering: Computer Science & Master of Science in Applied Informatics: Artificial Intelligence and Data Science
Avatar for Beat Signer signer
PRO
0
840
DIP_2_Spatial
Avatar for Mohammed Hachama hachama
0
190
探査機自作ゼミ2025スライド
Avatar for sksat sksat
3
820
Réaliser un diagnostic externe
Avatar for FOURNIER martine
0
270
子どもが自立した学習者となるデジタルの活用について
Avatar for Naoki Kato naokikato
PRO
0
120
株式会社アイエスエイ 会社概要
Avatar for recruit_ISA recruit_isa
0
110

Featured

See All Featured
Gamification - CAS2011
Avatar for David Bonilla davidbonilla
81
5.5k
Scaling GitHub
Avatar for Zach Holman holman
463
140k
How to train your dragon (web standard)
Avatar for Monica Dinculescu notwaldorf
97
6.3k
jQuery: Nuts, Bolts and Bling
Avatar for Doug Neiner dougneiner
65
7.9k
Designing for humans not robots
Avatar for Tammie Lister tammielis
254
26k
Principles of Awesome APIs and How to Build Them.
Avatar for Keavy McMinn keavy
127
17k
Building a Scalable Design System with Sketch
Avatar for Laura Van Doore lauravandoore
463
33k
Side Projects
Avatar for Sacha Greif sachag
455
43k
Refactoring Trust on Your Teams (GOTO; Chicago 2020)
Avatar for Rebecca Miller-Webster rmw
35
3.2k
A better future with KSS
Avatar for Kyle Neath kneath
239
18k
Helping Users Find Their Own Way: Creating Modern Search Experiences
Avatar for Dan Newman danielanewman
31
2.9k
VelocityConf: Rendering Performance Case Studies
Avatar for Addy Osmani addyosmani
333
24k

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