# INFOR 學術 Web 題本

## 問答題

- [ ] 請分別使用 callback、`Promise`、`async`/`await` 實作 sleep。

- [ ] 請舉例說明 `function*` 的功能與用途。

- [ ] 請實作一個稱為 `Even` 的 `class`，使得 `x instanceof Even` 為 `true` 若且唯若 *x* 是偶數。

- [ ] 請簡述 TCP 和 UDP 的異同與使用時機。

- [ ] IPv4 長度為 32 位元，共可提供 4,294,967,296 (2^32) 組，但由於現今連上網路的設備已經暴增，且因為 IPv4 位置分配不當，幾乎配發完畢。而有一種解決方案稱作 NAT (Network Address Translation)，試討論 NAT 帶來的利與弊。

- [ ] 請問 CSS 是否為圖靈完備？若是，請舉例說明。

- [ ] 請提出一些 HTML5 新增的功能，並與以往的解決方案進行比較。

- [ ] 請問如何透過 JS 更改偽元素(pseudo element)？

- [ ] 請問 babel 的用途為何？

- [ ] 請簡述 `get` 及 `set` 的用途為何。

- [ ] 請為 `document.cookie` 寫一個API，並提供`get`、`set`、`delete`三個函數。

- [ ] 請簡述 `with` 的用途，並解釋為何不建議使用它。

- [ ] 請介`...`的至少三種使用方法。

- [ ] 請舉例說明`Proxy`及`Reflect`的用途及使用時機。

- [ ] 請實作函數`readonly`，使下列代碼中的`myMethod`不可被修改

class myClass {
    @readonly
    myMethod() {
        console.log("jizz");
    }
}

- [ ] 請問可以被`for in`迴圈遍歷的物件需要滿足什麼條件？

- [ ] 試比較 function 與 arrow function 之差異，並舉出其使用時機。

- [ ] CSRF 可以使駭客透過網站已儲存的 cookie 假冒成使用者發出請求，試解釋其攻擊原理，並提出數個防範攻擊的解決方案 (請完整解釋)。

- [ ] 比較 `var`、`let`、`const` 之差異與使用時機，並提出範例。

- [ ] javascript 是一個物件導向語言，而其中 `prototype` 是 javascript 中的繼承模型，試解釋如何使用 `prototype` 與 `new`。

- [ ] SPA (Single Page Application) 是現在常用的技術，使網頁能夠在不換頁的情況下更新網頁內容，提升載入速度。但在伺服器僅提供一個 loader 頁面的情況下，搜尋引擎並不會等待其內容載入完成而使得網頁SEO降低。試提出解決方案 (請完整解釋)。

- [ ] koa 與 express 都是現在常用的 nodejs web 框架，試比較其異同。

- [ ] pug (Jade) 是一個網頁模板引擎，透過 pug 可以使用更簡單、簡潔的方式編寫網頁，而免去重複撰寫標籤的困擾。試舉例 pug 的語法，並解釋如何將 pug 轉換成 HTML。

- [ ] `#` 符號在 URL 中有許多用途，試舉出數個用法與使用情境。

- [ ] 試解釋 WebRTC 運作原理

- [ ] 試解釋 `this`

- [ ] 試解釋 Blob 與 File 的用法

- [ ] 小明用 `RegExp` 的 `test` 方法來判斷字串是否符合其規則，但卻發現重複測試時結果會不同，閱讀下列程式碼，試解釋原因以及解決方式

var r = new RegExp("jizz", "g");
var str = "jizzzzz71222";

console.log(r.test(str));
// result: true

console.log(r.test(str));
// result: false

console.log(r.test(str));
// result: true

- [ ] 試問如何使用 HTML5 新增之 `template` 標籤

- [ ] 試解釋如何實作 SSO (Single Sign-On)，並解釋其運作流程

- [ ] HTML、CSS、JS 現今已能用來開發桌面原生應用(如 VSCode、GitHub Desktop、Discord 等)，試舉出數個框架並描述如何打包成 windows 安裝檔

- [ ] 以下是一個程式碼展示網站，但是行號好像出了點問題，請試著使用開發者工具找出問題，並透過更動CSS來把行號修好吧! (請勿更動 HTML，並維持網頁之樣式)
網站程式碼: https://jsfiddle.net/etojkfx7/ <br>
預期要看到的效果:

## 實作
- [ ] 聊天室
- 需求
- 前端設計
- 帳號密碼登入系統
- 自定義個人資料(頭像等)
- 可開設單人聊天室(能使用ID等方式找到人)
- 可開設群組
- 可以發送純文字訊息
- 可以發送多媒體訊息
- 可封鎖別人
- 額外
- 可支援視訊語音聊天
- 可支援多人視訊聊天

- [ ] Markdown 編輯器
- 需求
- 前端設計
- 可即時預覽
- 可上傳圖片至伺服器或是 Imgur
- 工具欄可快速生成Markdown 語法(表格、列表等)
- 支援 GFM (GitHub Flavored Markdown) 與 emoji
- 額外
- 串接各 OAuth API
- 可在離線情況下編輯、預覽

- [ ] 雲端硬碟
- 需求
- 前端設計
- 帳號密碼登入系統
- 可於前端上傳、下載、刪除、重新命名檔案
- 可創建資料夾並移動檔案
- 額外
- 可上傳大檔案(>1 GiB)
- 可將上傳之檔案加密，並於下載時解密
- 可建立分享連結並有存取密碼機制

- [ ] INFOR Site
- 需求
- 前端設計
- RWD
- 內容、功能的完整性(請發揮創意)

## 加分
- 新番爬蟲<br>有個油宅，他很懶，懶得自己去找新番列表。<br>他希望有人能夠幫他寫個爬蟲抓新番的時間表，並且有個美觀的頁面整理給他看。<br>
- 需求：
- 抓取新番的中文與日文名稱
- 抓取新番的簡介、官網
- 抓取新番的撥出時段
- 抓取新番的海報、宣傳圖或是視覺圖
- 將資料整理成圖文資料列表，並呈現於網頁上
- 將資料整理成瀑布流，並呈現於網頁上
- 將資料按照播出日整理成一周日程表
- 能夠將資料輸出成 JSON 儲存
- 能夠匯出精美的一周日程表圖片
- 提示
- 可至 https://www.animen.com.tw/ 找到新番資料