---
# System prepended metadata

title: Untitled
tags: [HW4]

---

---
tags: HW4
---


<h1 style="text-align:center;">
CP113-B-HW4
</h1>


<h3>
作業相關附件與繳交處
</h3>

###### 請<span style="color:red;"><b>直接</b></span>下載，並在對應的作答區作答。<br><br>此次作業主要是 async await / fetch，Array sort & filter & Dom Events (加分)為主要要素，作答卷會附上相關 CSS 以及 指定插入 Dom 的位置，如需自行修改也可以。<span style="color:red;"><b>但不建議更動，寫JS即可。</b></span>

[HW4-作答卷](https://drive.google.com/file/d/1oxen1Qr5hktfgh5RCkkfk4orsA_9_GXa/view?usp=sharing)
[HW4-作業繳交處](https://forms.gle/QAdnsja8LaJZ2omm8)

:::warning
<h6>
時間：06/18 23：59 逾時不候
</h6>
:::

:::danger
###### 如遇有 API 打不通的問題，請速速寄信讓我知道，感恩。
:::

:::info
<h6>
作業繳交 ( 一個 html 檔案，不需要壓縮，檔名為學號 [只需要數字的部分])
<br>
如要多次繳交檔案命名方式為
<br>
<span style="color:red;"><b>學號_版本</b></span>，Ex.1086215_2.html
</h6>
<h6>
有問題請寄信至 s1086215@g.yzu.edu.tw，請<span style="color:red;"> 勿 </span>用 Portal 發信
<br>
若繳交時被GOOGLE拒絕，通常是你有 <span style="color:red;">"多重"</span> 的副檔名 Ex. 1086215.html.html
</h6>
:::

<h3>
相關評分與要求
</h3>

#### 評分標準

```
1-1 ( 20% ) Fetch API 
1-2 ( 60% ) JSON Show
2-1 ( 20% ) Table
2-2 ( 加分 ) ( 30% ) Filter 級距加分 ( 0 / 10 / 20 / 30 )
2-3 ( 加分 ) ( 30% ) Sorter 級距加分 ( 0 / 10 / 20 / 30 )
```


<h4>
Part 1 Fetch API & 結構重構
</h4>


##### Data col 解釋
```yaml=
topic=區域
sub_topic=次區域
date=新聞日期
board=新聞來源
d_v=正負面分數 (1-9)
d_a=激動分數 (1-9)
valence=綜合面向 ( pos, neu, neg )
title=新聞標題
```


1. Target： [20200101~20201231 隨機抽樣新聞](http://140.138.154.197:8787/CP113/B/HW4)

:::warning
###### <span style="color:red;">該 URL 會回傳 一標準 JSON 格式 DATA，可用 json() function 解譯</span><br>[json function document](https://developer.mozilla.org/zh-TW/docs/Web/API/Body/json)<br><br><br>HTML不用 require 即可使用 function，所以 Fetch function 直接用就可以了。
:::
2. Conlose log print fetch result
3. console log print 出其格式如下，encoding='utf-8-sig'
```json=
{
    total:(all_news_length),
    tags:[
            {
            topic:(topic_name),
            length:(topic_news_length),
            sub_topics:[
                {
                    name:(sub_topic_name),
                    length:(sub_topics_news_length)
                }
                ...
            ]
        }
        ...
    ]
}

### sample ###
{
    total:9453,
    tags:[
            {
            topic:亞太,
            length:666,
            sub_topics:[
                {
                    name:台灣,
                    length:64
                },
                {
                    name:日本,
                    length:64
                },
                {
                    name:大陸,
                    length:64
                }
                ...
            ]
        }
        ...
    ]
}

```

<h4>
Part 2 建立網頁
</h4>

:::warning
必須利用 JS 撰寫，<span style="color:red"><b>不可手刻</b></span>
:::

1. 利用得到的 DATA 建立一個 Table

    * 照往常的 thead tbody 架構
    * 欄位有 topic, sub_topic, date, board, d_v, d_a, valence, title 

2. (加分) 對 topic & valence 有個別的 filter (全部 為回復原樣子)
3. (加分) 對 date & d_v & d_a & valence 有個別的 sorter ( ASC & DESC & 回復原狀 )


<h3>
Code Tips
</h3>

```htmlembedded=
<div>
    <div id="filter">
        <div>
            <span>Filter</span>
        </div>
        <div>
            <div id="topic">(topic filter 插入處)</div>
            <div id="valence">(valence filter 插入處)</div>
        </div>
    </div>
    <div id="sorter">(sorter 插入處)</div>
</div>
<div id="table">(table 插入處)</div>
```

```javascript=
文字 sort sample

col=element.target.innerHTML;

ASC
data = data.sort(function (a, b) {
	return a[col] > b[col] ? 1 : a[col] < b[col] ? -1 : 0;
});
    
DESC
data = data.sort(function (a, b) {
	return b[col] > a[col] ? 1 : b[col] < a[col] ? -1 : 0;
});


filter sample

data = data.filter(function (item) {
	return item.topic == ele.target.innerHTML;
});

json array 取值 sample

data = [
            {
                title:'YAYAYA',
                content:'ioleiole'
            },
            {
                title:'BilaBila',
                content:'PachuPachu'
            },
            {
                title:'Taiwai naboone',
                content:'RRRRRRRR'
            },
    ]
    
取 第2個的title 寫法

title = data[1]['title']

```

### 答案範例 ( 點擊可放大 )
###### 如圖片顯示在題目中無說明，表示不需要做到，但可以根據 CSS 去增減 Class Event ( css 皆已寫好，請根據 CSS 去增減 class )

##### Fetch result (有可能會有兩種顯示方式，皆無差，直接印出 Fetch callback 即可。)

[![](https://i.imgur.com/PT0TwBy.jpg)](https://i.imgur.com/PT0TwBy.jpg)

[![](https://i.imgur.com/sl5oCHq.jpg)](https://i.imgur.com/sl5oCHq.jpg)


##### Rebuild json (不一定為正確答案)

[![](https://i.imgur.com/rOSdjn4.jpg)](https://i.imgur.com/rOSdjn4.jpg)

##### 原始樣子

[![](https://i.imgur.com/qYsUvoD.jpg)](https://i.imgur.com/qYsUvoD.jpg)


##### Topic Filter

[![](https://i.imgur.com/nA6xQsl.gif)](https://i.imgur.com/nA6xQsl.gif)

##### Valence Filter

[![](https://i.imgur.com/rGLRlI7.gif)](https://i.imgur.com/rGLRlI7.gif)


##### Sorters

[![](https://i.imgur.com/SbeifGU.gif)](https://i.imgur.com/SbeifGU.gif)
