---
tags: HW3
---

<h1 style="text-align:center;">
CP113-A-HW3
</h1>

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

###### 請<span style="color:red;"><b>直接</b></span>下載，並在對應的作答區作答。

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

:::warning
<h6>
時間：05/03 23：59 逾時不候
</h6>
:::

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

:::danger
<h6>
本次作業 <span style="color:red;"><b>無手刻</b></span>，並以<span style="color:red;"> <b>最終結果</b> </span>評分
</h6>
:::

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

<h4>
Part 1 使用 Javascript 自動建立一個 九九乘法表 ( 40% )
</h4>

:::danger
<h6>
<span style="color:red;"><b>必須</b></span>，建立起<span style="color:red;"><b> 相同結構 </b></span>的網頁，才可以直接無痛套用 CSS
</h6>
:::

1. Table 結構為如以下 ( caption，thead，tbody ) ( 25% )

<table>
    <caption></caption>
    <thead>
        <tr>
            <th></th>
            ...
        </tr>
    </thead>
    <tbody>
        <tr>
            <td></td>
            ...
        </tr>
        ...
    </tbody>
</table>

2. 在 Table 後面建立 1個狀態顯示 & 1組 3個 button ，結構如下 ( 15% )

* 初始狀態顯示 **點選 column 試試看** ( 6% )
* Button 文字 3，7，12 ( 9% )

<div>
    <p></p>
</div>
<div>
    <div>
        <button></button>
    </div>
    ...
</div>

<h6>
Part 1 結果圖 ( 點擊可以放大圖片 )
</h6>

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

<h4>
Part 2 事件 ( 60% )
</h4>

:::info
<h6>
本題的變色，可隨意自訂
</h6>

<h6>
可參考網站

[JavaScript DOM Event (事件處理)](https://www.fooish.com/javascript/dom/event.html)
</h6>
:::

<h5>
Mouseover & Mouseout ( 42% )
</h5>

1. ( 16% ) 移進每個 column 中，會**背景反色** & **文字變成 自己的學號**，**且同時同 列 也會變色**，移出後回復原樣。 ( 圖1 )
2. ( 16% ) 移進 button 中，column 中的積數為 button 文字的倍數時，將符合的columns **背景反色** & **文字同背景**，移出後回復原樣。( 圖2 )

:::info
<h6>可以利用 JS 裡面的 indexOf，substring 去判定 button 倍數 <br> or <br>
js 的 二維陣列
</h6>

<h6>

[Array.prototype.indexOf() 用法](https://developer.mozilla.org/zh-TW/docs/Web/JavaScript/Reference/Global_Objects/Array/indexOf)

[JavaScript String substring() 用法](https://www.fooish.com/javascript/string/substring.html)

</h6>
:::

3. ( 10% ) 移進 caption，隨機對 column 套上 classname=firework ( 每次皆不同個 column )，移出後回復原樣。( 圖3 )

:::info

<h6>可以利用 Math.random() <--- 隨機產出 0~1 的亂數</h6>
<br>

# Example.

if (Math.random() >= 0.75){ do something ...}

:::

<h5>
Mouseup & Mousedown ( 18% )
</h5>

1. ( 18% ) 點擊 column 時，將狀態顯示 (第一題第二小題的 p DOM ) 顯示為 => 現在點選的是：[ column 內容 ]，結束點擊時回復原樣( 圖4 )

<h4>
CSS (直接引用即可)
</h4>

:::warning
<h6>
如第一題自動產生的格式與要求不同，套用CSS時將會出現部分無法套用之情形
</h6>
:::

body {
        font-family: consolas, 'Microsoft JhengHei';
}

table {
        margin: 7.5vh auto 0 auto;
}

table caption {
	font-weight: bold;
	margin-bottom: 32px;
	font-size: 5vmin;
}
table th,td {
	text-align: center;
	padding: 8px 24px;
}

body > div {
	margin-top: 32px;
}

body > div:nth-of-type(1) p {
	text-align: center;
	font-weight: bold;
}

body > div:nth-of-type(2) {
	display: flex;
	justify-content: center;
	align-items: center;
}

body > div:nth-of-type(2) > div {
	width: 15%;
}

body > div:nth-of-type(2) > div:not(:first-of-type) {
	margin-left: 10%;
}

button {
	width: 100%;
	height: 64px;
	font-size: x-large;
	cursor: pointer;
	border-radius: 10px;
	background-color: rgba(221, 221, 221, 0.603);
}

button:hover {
	background-color: rgb(165, 255, 255);
}

button:focus {
	outline: none;
}

.firework {
	animation: shiny 0.25s infinite;
}

@keyframes shiny {
	0% {
		background: red;
	}
	25% {
		background: orange;
	}
	50% {
		background: greenyellow;
	}
	75% {
		background: skyblue;
	}
	100% {
		background: blue;
		color: whitesmoke;
	}
}

<h4>
結果圖
</h4>

<h5>
圖1 ( 點擊可以放大圖片 )
</h5>

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

<h5>
圖2 ( 點擊可以放大圖片 )
</h5>

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

<h5>
圖3 ( 點擊可以放大圖片 )
</h5>

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

<h5>
圖4 ( 點擊可以放大圖片 )
</h5>

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