透過Vue實現限制數入字數

-
我們都知道，平常在社群網站上會限制使用者輸入的字數。最具代表性的網站就是Twitter，Twitter限制一般使用者每次發表文章的字數在140字以內。讓使用者用最簡短的文字來表達想法。對於優化使用者體驗比較好的方式是，當使用者在輸入的同時，提示使用者還有多少字可以輸入，當使用這輸入的字數達到限制時，及時地停止使用者繼續輸入。 像這樣子限制使用者輸入字數的機制要如何來實現呢？ 有兩的點需要注意： 如何計算使用者輸入了多少字？ 當使用這輸入的字數達到限制時，該如何停止繼續輸入？ 今天我們就要透過Vue.js來製作一個可以幫我們控制輸入字數的程式。首先，我們先準備好需要的HTML檔案。 <!DOCTYPE html> <html lang=“zh-TW”> <head> <meta charset=“UTF-8” /> <meta name=“viewport” content=“width=device-width, initial-scale=1.0” /> <meta http-equiv=“X-UA-Compatible” content=“ie=edge” /> <link rel=“stylesheet” href=“https://stackpath.bootstrapcdn.com/bootstrap/4.1.3/css/bootstrap.min.css” integrity=“sha384-MCw98/SFnGE8fJT3GXwEOngsV7Zt27NXFoaoApmYm81iuXoPkFOJwJ8ERdknLPMO” crossorigin=“anonymous” /> <title>Start</title> </head> <body> <div id=“app” class=“container”> <div class=“row”> <div class=“col”> <textarea cols=“30” ...
張貼留言

你幾歲？

-
我們繼續學習Pyhton關於if-statements的各種問題。


我可以投票嗎？

又到了選舉的季節了，不知道自己是不是具有投票權？呵，我想應該不會不知道吧。
不過，我們假設自己不知道是不是可以投票，寫一個程式告訴我是否可以投票。

程式運作流程

詢問使用者的年紀，如果年紀大於20歲，就提醒他今年記得去投票，如果小於20歲，就告訴他還差幾歲能夠去投票。

初步撰寫


我們先簡化上面的規則：如果年紀大於20歲，就提醒他今年記得去投票，否則就告訴他不能夠投票。


首先，先設定一個變數age，讓使用者透過input()輸入數字。加上.strip()的目的是要移除不必要的輸入空格。整個式子外面包覆int()的目的是要將輸入的資料類型一率轉換成數字，如此才能夠與20比較。

接下來，透過if-statements來判斷是否可以投票。如果對於if-statements不熟悉的話，可以參考這一篇的說明。

我們再加入距離投票年限





我們定義了一個參數different，這個參數儲存了目前年齡距離投票的時間差距。（different = 20 - age）

到這裡為止，我們已經完成了上面預計的程式運作流程了。不過，這個程式看起來實在沒什麼用處，既然已經知道自己的年齡，用數學自己加加減減就可以得到答案，還需要透過程式詢問是否具有投票權嗎？

把日期轉換為歲數

接下來，我們再來修改一下上面的程式，從原本『詢問使用者的年紀』修改成『詢問使用者的出生年月日』。

程式運作流程變成了，『詢問使用者的出生年月日，如果年紀大於20歲，就提醒他今年記得去投票，如果小於20歲，就告訴他還差幾歲能夠去投票。』





留言

張貼留言

這個網誌中的熱門文章

用Python的條件實現電影分級流程

-
圖片
電影分級流程 電影的分級制度大家應該都不算陌生吧。就目前 台灣的現行分級制度 來說可以分為五級。分為 普遍級：一般觀眾皆可觀賞 保護級：未滿6歲之兒童不宜觀賞，6歲以上未滿12歲之兒童需父母、師長或成年親友陪伴觀賞。 輔12級：未滿12歲之兒童不宜觀賞。 輔15級：未滿15歲之人不宜觀賞。 限制級：未滿18歲之人不宜觀賞。 五種。 我們現在透過 Python的控制流程 來逐步思考這個問題吧。 首先，先處理限制級的問題。限制級的條件是未滿18歲之人不得觀賞限制級電影。 如果把它轉換成邏輯陳述，就可以變成『假如年齡小於18歲，不得觀賞『限制級』電影 。但可以觀賞其他級數電影--『普遍級』、『保護級』、『輔12級』與『輔15級』電影』 程式可以寫成如下的式子： 假設我們輸入15歲（age = 15）的話，執行結果如下： 假設我們輸入30歲（age = 30）的話，執行結果如下： 什麼訊息都沒有。 接下來我們來優化一下程式碼，在條件不符合的時候給他一些提示訊息。運用ELSE就可以表達「條件不符合時的狀況」。 程式可以改寫成如下的式子： 我們再次輸入30歲（age = 30），執行結果如下： 出現「可以觀賞任何電影」的訊息了。 接下來，我們輸入15歲輔導級的條件。 接者繼續輸入12歲輔導級與保護級的條件。 輸入完畢後我們測試一下，先輸入5歲（age = 5），執行結果如下： 怎麼與我們期待的結果不同？我們希望它落入age < 6 區段的陳述子句，卻落到 age < 18區段了。 主要的原因前面有說過，ELIF陳述句的順序非常重要，由於該陳述句中，一旦找到符合條件的子句，其他剩下的子句都會跳過。目前的狀況就是它找到 age < 18符合條件之後，就跳過後面所有的陳述子句了。因此，我們必須調整上面程式的順序： 調整後再輸入5歲（age = 5）執行一次，結果： 這樣子就正確了。如此，整個分級制度的邏輯就完成了。
閱讀完整內容

Vue CLI安裝[ Vue CLI 2 與 Vue CLI 3的差別 ]

-
圖片
Vue CLI是個用來快速建置Vue專案的工具。目前已經推出第三版。如果你現在才開始學習使用Vue CLI的話，可以把腦容量省下來，直些參考官網說明使用Vue CLI 3來建置專案就好。萬一你是在去年開始接觸到Vue CLI的話，可能當時碰到的是Vue CLI 2的版本，這時可能感受到版本過渡的差異。到底Vue CLI 3跟以前的版本有什麼差別呢？ 有別於上一個版本，Vue CLI 3提供GUI介面，降低使用者門檻，在圖形介面下點一點按鈕就可以做到Vue CLI 2相同的事。如果不習慣command line介面的話，可以使用GUI介面操作。 Vue CLI 是以 WEBPACK搭配相關套件SASS、 ESLint 、BABEL 編譯成可運行的版本。可以用ES6寫.js .Vue。 Vue Cli 3提供插件方式安裝，例如Type Script、SASS、 ESLint 、BABEL ，再透過以 WEBPACK編譯成可運行的版本。 安裝Vue CLI 2 安裝之前先確認一下是否已經安裝過Vue。 可以使用下面指令確認： $ vue -V 注意：V要大寫。 npm的網站 上有vue cli2的安裝說明 ( https://www.npmjs.com/package/vue-cli ) 順道一提的是，在安裝vue cli之前，必須先安裝 Node.js 。至於如何安裝Node.js在這裡就不贅述了。 $ npm install -g vue-cli 你有六種Template可以安裝Vue CLI Current available templates include: webpack - A full-featured Webpack + vue-loader setup with hot reload, linting, testing & css extraction. webpack-simple - A simple Webpack + vue-loader setup for quick prototyping. browserify - A full-featured Browserify + vueify setup with hot-reload, linting & unit ...
閱讀完整內容

如何利用Python實現攝氏轉華氏的溫度轉換

-
圖片
編寫程式的目的就是為了解決問題，因此，在開始設計程式之前，先暸解問題是很重要的。 開始寫程式之前要先暸解以下幾件事： 待解決的問題其具體內容是什麼？ 使用者為何？ 要處理的資料類型是什麼？放在哪裡？ 資料要如何輸入電腦？ 要如何處理資料？ 資料處理完畢後，要如何呈現？ 處理完畢的資料需要儲存嗎？如果要儲存，需要放在哪裡？ 既然已經暸解問題了，接下來透過程式處理的方法與處理的順序又是什麼呢？ 這時候可以利用流程圖來分析。不過，在畫圖之前需要先把程式處理的方式依照邏輯的順序與步驟一個一個地寫下來。 把程式運作的主要流程列出來之後，再透過流程圖來表示出來。 這個程式其實網路上到處都有可以使用的 線上轉換器 ，在這裡我們只是想要透過Python這個程式語言來看看，是否也可以實現，也算是一個牛刀小試。 我們希望：使用者輸入攝氏溫度後，可以得到相對應的華氏溫度。 思考方式： 關於這個問題要如何解呢？首先應該要問的是，如果是徒手轉換這兩個數值的話，該如何進行？ 為了解答這個問題，首先我們先找出攝氏轉華氏的公式。 以下是 維基百科 上面的說明： 可以看出攝氏轉華氏的公式是： F = C x 9/5 + 32 整個流程是下面這樣。 分析完畢之後，我們就可以開始寫程式了。 程式碼說明： 先印出說明， 提示使用者輸入攝氏溫度，並且移除輸入字串頭尾多餘的空白 帶入攝氏轉華氏公式，並將結果指定為F 印出轉換的結果（華氏溫度） 其中： print() 函數： python保留字 ，可以印出想要的結果。 int(C): 透過 int() 函數，把Ｃ轉換為整數（integer） strip()方法：用來移除字串頭尾指定的字元（預設為空格）或字元序列。 format()格式化函數：用來格式化字串 其實，要實現攝氏轉華氏不只有上面的方式，你也可以把程式改寫成函式的方式來獲取答案： 如果將上面的程式加上while迴圈，程式就會不斷的幫你轉換數值。 在迴圈中加入停止控制選項，只要按下q，就可以停止程式的執行。
閱讀完整內容