動網期末報告

FreeCodeCamp 排行榜

資工二　杜杰

<HTML>

很基本

但不好學？

_( : з」∠)_

使用技術

前端

  • HTML
  • CSS
  • JavaScript
  • JQuery
  • Jade
  • Scss

後端

  • Node.js
  • Express
  • Socket.io

爬蟲

  • python

JQuery

// DOM
document.querySelector(".myclass")

// JQuery
$('.myClass')

Jade

<!DOCTYPE html>
<html lang="en">
  <head>
    <title>Jade</title>
  </head>
  <body>
    <h1>Jade - node template engine</h1>
    <div id="container" class="col">
      <p>You are amazing</p>
    </div>
  </body>
</html>
doctype html
html(lang="en")
  head
    title= pageTitle
  body
    h1 Jade - node template engine
    #container.col
      p You are amazing

HTML

Jade

Scss

ul {
  margin: 0;
}
ul li {
  padding-left: 10px;
}
ul li.top {
  padding-left: 0px;
}
ul {
  margin: 0;
  li {
    padding-left: 10px;
    &.top {
      padding-left: 0px;
    }  
  }
}

Css

Scss

Node.js

Node.js 是 Ryan Dahl 基於 Google 的 V8 引擎於 2009 年釋出的一個 JavaScript 開發平台，主要聚焦於 Web 程式的開發。

Socket.io

WebSocket 是 HTML5 開始提供的一種瀏覽器與伺服器之間，一個雙向通訊的網路技術

說穿了其實就是瀏覽器在和伺服器互戳

......(略)......

{
  "id": {
    "$t": "https://spreadsheets.google.com/feeds/list/1PCCnOeg4gbIFhPT5H2wuo6gWHnobt0hCdJSZLCyAXaA/1/public/values/cokwr"
  },
  "updated": {
    "$t": "2016-06-06T01:57:08.933Z"
  },
  "category": [
    {
      "scheme": "http://schemas.google.com/spreadsheets/2006",
      "term": "http://schemas.google.com/spreadsheets/2006#list"
    }
  ],
  "title": {
    "type": "text",
    "$t": "jd615645"
  },
  "content": {
    "type": "text",
    "$t": ""
  },
  "link": [
    {
      "rel": "self",
      "type": "application/atom+xml",
      "href": "https://spreadsheets.google.com/feeds/list/1PCCnOeg4gbIFhPT5H2wuo6gWHnobt0hCdJSZLCyAXaA/1/public/values/cokwr"
    }
  ],
  "gsx$username": {
    "$t": "jd615645"
  }
},

......(略)......

https://github.com/jd615645/FCCRank

專案連結

FCCrank

參考資料

帶你的朋友一起寫程式吧(Slideshare)

http://www.slideshare.net/DylandyChang/ss-45542340

Made with Slides.com