透過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”
張貼留言

Python基礎篇--[如何安裝Pyrhon環境]

-
以前想學寫程式，卻都因為程式碼複雜難懂而半途放棄了，直到發現Python之後...

Python是一種物件導向、直譯式的程式語言。相對其他程式語言來說，由於Python的語法簡單，比較像是一般的英語一樣，對於初學者來說，是個比較容易入門的程式語言。並且Python的應用領域十分廣，舉凡作業系統、網站、資料科學、網頁資料蒐集、大數據分析、影像辨識處理、遊戲軟體製作、自動化文件處理等等，都可以辦到。看起來學習Pyrhon似乎是一個不錯的投資。

Python可以在多種平台開發與執行。不論是在Mac、Windows或Linux上面都可以執行Python。本文主要在說明macOS系統上需要的工具。

若Mac電腦的系統版本為 OS X 10.8以上的話，Python 2.7已經內建在裡面了。所以，如果不用Python3的話，是不需要另外安裝的。

如果要安裝最新的Python的話，請到Python網站下載軟體。 (https://www.python.org/downloads/)

安裝完畢之後，可以透過終端機輸入：python3 --version 檢查是否安裝成功。 python3 --version

IDE編輯器

編輯Python可以在Python系統內建的IDLE編輯器裡面撰寫程式。但是IDLE編輯器功能上面較為陽春。一般人會選擇其他工具進行撰寫。

PyCharm CE

你可以在PyCharm CE中建立Python文件、編寫與編譯，並在console中顯示執行的結果。

Anaconda

包含常用的科學與資料分析模組，內建Spyder編輯器與Jupyter Notebook編輯器。

安裝Anaconda

步驟為：
1. 首先，您可以從 https://www.anaconda.com/download 安裝Anaconda。


接下來可以選擇您要執行Python的作業系統，在這裡我選擇的是macOS。

有兩個版本可供選擇：Python 3.6和Python 2.7，選擇版之後點擊『64-Bit Graphical Installer』進行下載。
依照步驟指示安裝完畢之後。就可以在mac的Launchpad中可以找到名為“Anaconda-Navigator”的圖示，點擊就可以打開。

恭喜，看到這個就已經安裝完成。



留言

張貼留言

這個網誌中的熱門文章

用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元件實作，將HTML網頁Vue元件化

-
圖片
將HTML網頁Vue元件化 前一篇簡單的介紹了 元件的基本常識 。這篇我們要來試試看，實際上如何做出元件化的網頁。 第一個例子，我們要透過bootstrap網站上面的html範例，逐步將它改成Vue元件的頁面。 今天我們要練習的畫面，大家可以在這裡取得，下載為html檔案。下載html的方法這裡就不贅述。 https://getbootstrap.com/docs/4.1/examples/ 分析頁面 首先，我們先分析一下這個bootstrap的html範例 有頁首、頁尾、且中間主畫面可以分成兩個區塊。 下面區塊可以再分成更細的區塊，總共有六個區塊構成。 我們可以把分析的結果畫成下面的圖表。 網頁可以分割成Header、Footer、主要內容三段。主要內容的部分可以分上下，上面是bigBoard下面是一個個Item組成，總共有六個Item。 再回來對應下載的html原始碼。我們發現： Header 區塊，從 <header> 開始到 </header> 結束。 Footer 區塊，從 <footer class="text-muted"> 開始到 </footer> 結束。 主要內容區塊，從 <main role="main"> 開始到 </main> 結束。 主要內容區塊，又可以分成兩段，上半段從 <section class="jumbotron text-center"> 開始，到 </section> 結束; 下半段從 <div class="album py-5 bg-light"> 開始，到 </div> 結束，裡面有六個Item，每個Item都從。 <div class="col-md-4"> 開始，到 </div> 結束。 建立Vue 依照上面的分割方式，我們可以將整個網站分成幾個Vue元件。在分割之前，我們先在頁面上安裝Vue.js。一樣，我們先插入下面兩個部分。 Vue.js的CDN檔案連結
閱讀完整內容

Python基礎篇--[條件]如果發生這種狀況時，我該怎麼辦？

-
圖片
日常生活中隨處可見的選擇邏輯 一個夏日的中午，行經便利商店，看到冰櫃裡一瓶瓶冰涼的飲料，感覺喝下去會很解渴，於是你走了進去，打開冰櫃拿出一罐售價25圓的可樂。正要掏出皮包裡的悠遊卡購買時，發現悠遊卡內儲值的額度只剩5元。於是你檢查皮包中看看有沒有現金。結果發現有一張ㄧ百元，於是你拿出那張一百元給店員。像這樣子的情形你應該不陌生吧？這是日常生活常見的場景，可以說在我們人生中就是會不斷的面臨各種大大小小的選擇。 我們常常會說，如果碰到狀況A，就做AA這件事；如果碰到狀況B，就做BB這件事；如果既不是A也不是B的話，就去做CC這件事。如果我們用這樣子的邏輯來敘述上面的場景的話，就會變成： 如果悠遊卡的儲值大於可樂的售價(25元)，就用悠遊卡付款。 如果悠遊卡的儲值小於可樂的售價(25元)，尋找皮包是否有現金。 如果皮包有現金，而且現金大於可樂的售價(25元)，就用現金付款。 如果皮包沒有現金或現金小於可樂的售價(25元)，就不買可樂 if/else流程控制 我們知道Python 執行是從最頂端第一行開始，然後循序向下逐條執行。 但是，並不是所有程式都是由上而下循序的執行，如果程式中有流程控制的陳述句子時，可能會依據條件跳過某些程式碼，也可能跳過整個區塊的子句不執行。 簡單說，流程控制就是「程式按照當時狀況、分別執行不同處理動作的功能」。在表示方式上面，我們會使用 if、else 、elif等方式表示他們之間的關係。 IF陳述句 IF 用中文解釋就是指「如果」的意思。在流程圖中使用菱形來表示，表示程式要做出的實際決定。 如果條件為True時會執行子句，條件為False時子句會跳過不執行。 例如：「如果悠遊卡的儲值大於可樂的售價(25元)，就用悠遊卡付款。」如果用Python表示就會像這樣： 程式碼 if 悠遊卡的儲值 >=25： 使用悠遊卡付款 所有流程控制陳述句都是以冒號結尾，並在後面跟著一個新的程式區塊，也就是陳述子句。以上述的例子來說，陳述句是：『悠遊卡的儲值 >=25』，陳述子句是『使用悠遊卡付款』 程式碼 if 陳述條件成立： 執行這行陳述子句程式 需要特別注意的是，上面的語法中，tab的地方可以採
閱讀完整內容