---
# System prepended metadata

title: 程式重點練習

---

# 程式重點練習

:::success
Math.
:::
## 1.if判斷

* 判斷輸入的數字是否為質數，是的話輸出是，否的話輸出否
    :::spoiler Hint
    :::info
    質數的特性是什麼
    :::

* 輸入一筆成績規則如下
    * 大於100或小於0輸出：成績錯誤
    * 100~90(包含90)輸出：A
    * 90~70(包含70)輸出：B
    * 70~60(包含60)輸出：C
    * <60輸出：不及格

## 2.for迴圈

* 印金字塔
1. ![](https://hackmd.io/_uploads/ByQuXBHr2.png)

2. ![](https://hackmd.io/_uploads/S16yeBHHh.png)
3. ![](https://hackmd.io/_uploads/H1eNperSB2.png)
4. ![](https://hackmd.io/_uploads/rkc7ZBHH2.png)


## 3.while/for迴圈

* 根據輸入數字做不同動作，輸入特定數字時結束迴圈：
    * 數字為1時：輸出"Hello World"
    * 數字為2時：輸出"This is John(名字)"
    * 數字為3時：讓使用者輸入兩數字，在相加後輸出
    * 數字為4時：結束迴圈
    * 其他數字：輸出"Error"
* 3n + 1 problem
    1. 輸入整數 n
    2. 如果 n = 1 結束迴圈
    3. 如果 n 是奇數 那麼 n=3*n+1
    4. 否則 n=n/2
    5. 回到2.
    * 每次n更新都要印出
    * 如下圖我的輸入為22
    * ![](https://hackmd.io/_uploads/rJk8OHrB3.png)

<!-- * 氣泡排序法 -->

<!-- ## 4.Function -->
<!-- * 輾轉相除法求最大公因數(偏難) -->

## 4.字串切割

* 輸入"My name is xxx"，輸出xxx
    * indexoOf
    * substring
    * length

## Js複習

1. 請設計一個表單，裡面可以輸入帳號密碼，在送出表單後，請設計函式利用If else判斷帳號長度必須在1至8之間，密碼長度必須在8至20之間，最後檢查帳號密碼不能一樣，符合這三個條件alert出"登入成功" 只要有一項不符合，alert'格式錯誤'(提示: 利用(getEelementById=>value=>length))
https://nkfw.dstw.dev/demo/Javascript/DOM/Practice1/


:::spoiler 參考解答
```htmlembedded!
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<body>
    <center>
        <form>
            <label for="帳號">輸入帳號:</label>
            <input type="text" id="account" placeholder="帳號長度1到20"><br>
            <label for="密碼">輸入密碼:</label>
            <input type="password" id="password" placeholder="密碼長度8到20"><br><br>
            <input type="button" onclick="check_account()" value="送出">
        </form>
    </center>
    <script>
        let password=document.getElementById('password')
        let account=document.getElementById('account')
        function check_account(){
            console.log(password.value)
            if((account.value).length>=1 && account.value.length<=20){
                check_password()
            }
            else{
                alert("帳號請輸入正確格式")
            }
        }
        function check_password(){
            if(password.value.length>=8 && password.value.length<=20){
                check_same()
            }
            else{
                alert("請輸入正確密碼格式")
            }
        }
        function check_same(){
    
            if(account.value!=password.value){
                alert("成功登入")
            }
            else{
                alert("帳號密碼請不一樣")
            }
        }
        
    </script>
</body>
</html>
```
:::

---

2. 在許多網頁或app中，我們會有多個選項進行個人化設定，這些選項通常可以讓我們選擇使用或不使用設定。
設計一個頁面，包含三個或以上勾選框(checkbox)及一個繳交按鈕(button)；建立一個陣列，將全部的勾選框作為物件放入陣列中，在按下按鈕後，透過迴圈將陣列中各個勾選框中的checked屬性取出，並一一放入另一個陣列中最後輸出於控制臺。
https://nkfw.dstw.dev/demo/Javascript/DOM/Practice2/

:::spoiler 需求概念
* getElementById(標籤的id)
* array(陣列)如何增加元素and取得陣列中的元素
    * 陣列的第一個元素是`array[0]`！
* for迴圈
    * `for(i = 0; i < 5; i++)` 是會執行5次的迴圈！
* <button onClick="getData()"></button>，按下時呼叫getData()
:::

:::spoiler 參考解答
```htmlembedded!
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<body>
    <form>
        <input type="checkbox" id="color" name="color">
        <label for="color">深色模式</label>
        <br>
        <input type="checkbox" id="public" name="public">
        <label for="public">公開個人檔案</label>
        <br>
        <input type="checkbox" id="request" name="request">
        <label for="request">接受好友邀請</label>
        <br>
        <input type="button" id="submit" value="完成" onclick="getData()">
    </form>
    <script>
        var checkboxs = [];
        checkboxs.push(document.getElementById("color"));
        checkboxs.push(document.getElementById("public"));
        checkboxs.push(document.getElementById("request"));
        var submit = document.getElementById("submit");

        var answers = [];
        function getData() {
            var answers = []; // 清空answers
            for (i = 0; i < checkboxs.length; i++) {
                answers.push(checkboxs[i].checked);
            }
            console.log(answers);
        }
    </script>
</body>
</html>
```
:::