# 2024-07 資展 C# 班 - Js

## 課前準備
1. 指定 IDE: https://code.visualstudio.com/
2. 投影片: https://drive.google.com/drive/folders/1Kpst3N9W-iyrxNlLqbCWJqsWEJd9ZrDR?usp=drive_link
3. 示範程式碼: https://github.com/johnliu-tw/ispan-C-sharp-js-2024-07
4. Code Pen: https://codepen.io/
5. 手寫題題庫: https://www.explainthis.io/zh-hant/swe/fe-whiteboard

## Day1
### 小試身手 - 範例圖影
1. 
2. 
3. 
4. 
5. 
6. 同上
7. 
8. 
9. 

--中午休息--

10. 同上
11. 
12. 
13. 
14. 

範例資料:

let products = [
  { name: "蘋果", price: 100 },
  { name: "水梨", price: null },
  { name: "香蕉", price: 200 },
  { name: "橘子", price: 300 },
  { name: "葡萄", price: 400 }
];

15. 

### 作業範例

## Day2

### 小試身手 - 範例圖影
1. 
2. 
3. 
4. 

--中午休息--

5. 
6. 

### 課堂函式小測驗
https://forms.gle/cKkMZXNcRdYzuQwZA

### 職涯講座
https://app.sli.do/event/3QsXiUSi27aVM1rRggYQUm

### 作業範例
1. [](https://youtu.be/Toas4nc91gA)

## Day3
### 小試身手 - 範例圖影

1. [](https://youtu.be/MpimaMioMNA)
2. [](https://youtu.be/SnPoAvfQGQw)
3. [](https://youtu.be/8K7nqmJs14k)

### 物件課堂小測驗
https://forms.gle/Wdww6iqsSY1d3Q1E7

### 專案示範影片 - 計算機
[](https://youtu.be/YfttD-3ywjY)

### 專案示範影片 - Todo List
[](https://youtu.be/WB_FRWMEmgs)

## Day4
### 小試身手 - 範例圖影
1. 
2. [](https://youtu.be/c6Q41nOssKU)
3. [](https://youtu.be/HtDj3tevNN8)
4. 
5. [](https://youtu.be/gK1oEvXB--E)

#### 小試身手 5 範例 HTML

  <h2>Create a New Post</h2>
  <form id="articleForm">
    Title: <input type="text" name="title" id="title"><br>
    Content: <textarea type="text" name="content" id="content"></textarea><br>
    Author Email: <input type="text" name="email" id="email"><br>
    Creation Date: <input type="date" name="datetime" id="datetime"><br>
    
    <button type="submit">Submit</button>
  </form>
  <script>
        articleForm.addEventListener('submit', function(e){
            e.preventDefault();
            // your code
        });
  </script>

### 職涯講座
https://app.sli.do/event/f7W9nZ4c1y2wt88vi4oFUP

### 課程問卷回饋調查
...