---
title: 2024程設筆記
tags: 2024
author: xCk27x、yunnnnchieh
---
# 關於網頁的50個問題
###### tags: `2024`
:::info
請在裡面挑選30題完成
:::
## 前端
1. 請舉出三個例子，將child對於parent水平且垂直置中
```html=
<div id="parent">
<p id="child">我想置中</p>
</div>
```
2. 今天有一張png圖片，我希望他非透明部分能呈現陰影，應該怎麼設定css屬性?
(提示: 不是box-shadow)
3. 我有一個元素他被設定了```position: relative```，但我同時希望他能夠根據另一個```position: relative```的父元素進行定位，請問應該怎麼做?
```html=
<div id="grandParent" class="relative">
<div id="parent" class="relative">
<p id="child" class="absolute">
請勿更動這家人的position設定
</p>
</div>
</div>
```
4. 請問以下css selector分別代表什麼?
- .intro
- #Lastname
- h1, p
- div .container
5. 請舉出三個可以在vue元件之間傳遞資料的方法(只要a.vue可以改變b.vue中存取的值即可)
6. 有一個image倍div包住了，但我希望這個image能根據這個div的最大高度或最大寬度去縮放(img的長或寬其中之一等於div的長或寬)，應該怎麼做?
```html=
<div class="w-60 h-40"> //這裡是tailwind語法，請先花時間熟悉
<img src="fit-parent.png" />
</div>
```
7. 請將以下scss改寫為css
```sass
.section {
width: 100vw;
height: 100vh;
position: relative;
& p {
color: white;
&:hover {
color: red;
cursor: pointer;
}
}
&_container {
min-width: 10rem;
position: absolute;
left: 3rem;
right: 3rem;
outline: 1px solid black;
&-1 {
background-image: linear-gradient(to right bottom, black, white);
}
&-2 {
background-image: linear-gradient(to bottom, gray, blue);
}
&-3 {
background-image: linear-gradient(to left top, red, yello);
}
}
}
// 我知道用GPT翻很快，但花時間理解才會進步
```
8. 請用白話文解釋這個div倒底會怎麼被解剖
```css=
.stake {
display: grid;
grid-template-columns: repeat(auto-fill, minmax(100px, 1fr));
grid-gap: 1rem;
}
```
- 對grid有興趣可以玩這個: [Grid Garden - A game for learning CSS grid](https://cssgridgarden.com/)
9. 一般設定父元素為flex後，元素會由左而右依序排列，如果太擠也不會往下換行。但我現在想要讓flex元素由下而上排列，並且太擠時會往左邊換行，請問該如何設定父元素?
```=
結果會長這樣
---------
| 6 3 |
| ^ ^ |
| 8 5 2 |
| ^ ^ ^ |
| 7 4 1 |
---------
```
10. 今天有一個css動畫，我希望他永遠不會停止，請問應該怎麼設定
11. display:none、跟 visibility:hidden差別是什麼
12. 有一個超好用的 css function 叫做 clamp()，請詳細的解釋他怎麼使用。
13. 常常會搞混 ```@media(max-width: 540px) {...}``` 跟 ```media(min-width: 540px) {...}```，請問哪一個的意思才是「先設計小於540px的版面，當畫面大於540px時套用@media的內容」
## JavaScript
1. 你知道的，javascript是一個非常詭異的語言，而有一個非常經典的例子
```javascript=
('b' + 'a' + +'a' + 'a').toLowerCase()
```
請回答這個字串的字面值是多少，並解釋原因。
2. 請對```[1,2,3,4,5,6,7]```使用map方法，得出新陣列```[1,3,5,7,9,11,13]```(各元素的值加上自己的index)
3. 請對```[1,2,3,4,5,6,7]```使用filter方法，得出```[3,6]```(留下為3倍數的元素)
4. 請對```[1,2,3,4,5,6,7]```使用reduce，得出5040(各元素乘積)
5. push、unshift跟concat都是Array.prototype中用來將陣列擴展的方法，那他們的差別是是甚麼?
6. javascript單執行緒的語言，所以以下程式碼的輸出可能會跟你想的不一樣。請回答以下程式碼的輸出是什麼
```javascript=
for (let i = 0; i < 3; i++) {
setTimeout(() => {
console.log(i);
}, 100)
}
```
7. 如果你做完了剛剛那題，那你應該知道event loop是什麼了，請順便解釋一下他是做什麼的吧!
8. 請用一句話解釋callback function是甚麼。
9. 當我對一個Promise物件使用.then()時，這個.then()裡面的程式甚麼時後會被執行 ?
## TypeScript
:::warning
為啥要寫typescript？根本原因不是什麼「型別檢查好棒」
、「你遲早會用到」、「js是個奇怪的語言」這種冠冕堂皇的話。要說原因，你去問企劃組是誰想要做RPG的，這種物件傳來傳去的東西用弱型別寫根本地獄，我完全想像得到報錯時出現"read undefined"的畫面。
:::
1. 請舉出三個宣告型別的方法(let a: number算一種)
2. 要怎麼定義一個 type ?
3. 那怎麼定義一個 interface 呢 ?
4. 我想要宣告一個變數是字串的陣列型態，請問應該怎麼做?
5. 難的來了，請解釋以下定義的type是什麼意思
```typescript=
type obj = {
[key: string]: number;
}
```
6. 請問基本型別中，哪些型別直接進行 if() 判斷後會是true，哪些會是false
7. 如果一個函數沒有回傳值，那我應該怎麼宣告?
8. 我們知道應該要避免變數被隱性的設為any型態，但是當我建立一個callback function如下，為什麼acc跟cur這兩個變數不用宣告型態也沒關係 ?
```typescript=
let nums = [1,2,3,4,5,6,7];
nums.reduce((acc, cur) => acc + cur)
```
## vue/nuxt
:::warning
為什麼我要兩個綁在一起問？原因是我上次寫純vue是半年以前了，實在不能說很熟。
而且nuxt好寫多了，你碰過大概也會回不去。
:::
1. 請舉出一段範例程式碼，用來向 https://ncufresh/backend 發送get請求
2. 請問nuxt中，pages資料夾下的_slug.vue有甚麼特殊作用 ?
3. 解釋 Nuxt.js 中的布局模板（Layouts）和組件（Components）之間的區別
4. 請問在nuxt專案中，常常會用以下兩種方法去尋找檔案: ```@/filePath``` 跟 ```~/filePath```，他們的差別是甚麼?
## Git
:::info
如果你想不到答案，可以上 https://learngitbranching.js.org/?locale=zh_TW&demo=
試著操作一下。
:::
1. 發送一個新 commit 通常需要哪些步驟
2. 請問 ```git merge``` 跟 ```git rebase``` 差別是甚麼，你比較喜歡哪種作法?
3. 以下的 git 紀錄顯示，我用 ```git fetch``` 後發現 o/main 因為同事的 work 而被更新了，那我現在要怎麼將main更新到o/main的位置上呢 ?
4. 請解釋 git reset 的三種模式差別是甚麼?
5. 有一個跟 ```git reset``` 相近的指令叫 ```git revert```，請解釋他跟git reset的差別。
6. ```git checkout``` 可以將head移動到不同分支上，他有一個常用的選項 ```git checkout -b <branchName>```，請問他是做什麼的
7. 請解釋 ```git checkout HEAD~3``` 是甚麼意思 ?
8. 請在console中輸入
```bash
$ git checkout -b test1
$ git push
// 報錯: fatal: The current branch test1 has no upstream branch.
```
請查看完整錯誤訊息，解釋報錯的原因，並給出解決方案。
## express
1. Middleware 在 Express 中的作用是什麼？
2. 請解釋Express中Body Parser的作用
3. 用javascript建立一個 Express 伺服器，當收到 GET 請求時，回傳 "Hello, World!"
4. 根據上面的程式碼，當用戶發送 GET 請求到 /api/posts/:postId/comments/:commentId 路由時，會發生甚麼情況？請解釋在不同情況下伺服器端的回應。
```javascript=
const express = require('express');
const app = express();
const posts = [
{ id: 1, title: 'Post 1', comments: ['Comment 1', 'Comment 2'] },
{ id: 2, title: 'Post 2', comments: ['Comment 3', 'Comment 4'] }
];
app.get('/api/posts/:postId/comments/:commentId', (req, res) => {
const postId = parseInt(req.params.postId);
const commentId = parseInt(req.params.commentId);
const post = posts.find(post => post.id === postId);
if (post) {
const comment = post.comments[commentId - 1];
if (comment) {
res.send(`文章 ${postId} 的評論 ${commentId}：${comment}`);
} else {
res.status(404).send('評論不存在');
}
} else {
res.status(404).send('文章不存在');
}
});
app.listen(3000, () => {
console.log('伺服器已啟動在端口 3000');
});
```
5. 承上題，在上面的程式碼中，為什麼在獲取評論時使用 ```commentId - 1```，而不是直接使用 ```commentId```？
6. 承上題，在上面的程式碼中，假設用戶發送了一個 GET 請求到 ```/api/posts/2/comments/3``` 路由，那麼伺服器端會回應甚麼訊息？
7. 在上面的程式碼中，當用戶發送一個 GET 請求到 ```/users/:userId``` 路由時，程式碼會依序進行什麼步驟?
```javascript=
const express = require('express');
const app = express();
const users = [
{ id: 1, name: 'John' },
{ id: 2, name: 'Jane' },
{ id: 3, name: 'Doe' }
];
app.get('/users/:userId', (req, res) => {
const userId = parseInt(req.params.userId);
const user = users.find(user => user.id === userId);
if (user) {
res.send(`用戶名：${user.name}`);
} else {
res.status(404).send('用戶不存在');
}
});
app.listen(3000, () => {
console.log('伺服器已啟動在端口 3000');
});
```
8. 在上面的程式碼中，為什麼要使用 ```parseInt()``` 函式將 ```userId``` 轉換為整數型？
9. 如果在 myMiddleware 中間件中忘記調用 next()，會發生什麼情況？
```javascript=
// 自定義 middleware 函式
const myMiddleware = (req, res, next) => {
console.log('這是自定義的 middleware');
next();
};
```
10. 請解釋 CSRF（Cross-Site Request Forgery） 保護是什麼，以及在 Express 應用程式中是如何被實現的
Sign in with Wallet
Connect another wallet