# 程式重點練習 :::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> ``` :::