3-寫程式從零開始系列-開始探索

以下提供三種入門方式供選擇

1. 不建立使用者界面(User Interface, UI)

- 沒有按鈕 文字輸入框那些 單純用命令主控台(console)的方式
- 打一行執行一次(多行按alt+enter)
- 比較不親切 一次也較難測試多項功能
- 建立環境容易，去別人電腦也能快速寫程式
- 這個方法的好處是可以用程式直接操控你正在瀏覽的網頁 包括自動抓取資料
- 手機：打開瀏覽器去jsconsole.com
  * 如果想操控當前網頁可以用eruda這個工具
  * 方法是在網址列打這串按enter
javascript:(function () { var script = document.createElement('script'); script.src="//cdn.jsdelivr.net/npm/eruda"; document.body.appendChild(script); script.onload = function () { eruda.init() } })()
  * 要複製的話開頭java少複製一個j再打上才行
- 電腦：打開chrome，按下F12或是開發者工具，再按console

2. 建立使用者界面(UI)（推薦）

- 可以放很多按鈕 文字框 日期選擇器等
- 親切而美觀 傳給別人也容易瞭解使用方法
- 手機：下載anWriter
https://play.google.com/store/apps/details?id=com.ansm.anwriter
  * 寫好程式按右下角的播放鍵即可測試
- 電腦：用內建的記事本 或是下載notepad++
  * 另存新檔 檔名最後加上.html
  * 類型選所有檔案
  * 編碼選UTF-8
  * 寫好程式點開儲存的.html檔，推薦使用chrome打開

3. 需要存取檔案

- 如果你只是需要可以讀取單一檔案做處理，可以選擇用第二種方式
- 如果你希望能大量讀寫檔案 那就要如下安裝node.js
- 手機：下載Dory - node.js
  * 裝好後右上角有個...然後按Shell
  * 輸入cd /sdcard/你找一個資料夾 -> 按enter
  * 這裏可以用npm安裝套件 如果沒有就跳過
  * 接著輸入node -> 按enter
- 電腦：安裝node.js
  * 裝好之後按<開始鍵+R>執行cmd
  * 會打開命令提示字元
  * 輸入cd /d D:\你找一個資料夾 -> 按enter
  * 這裏可以用npm安裝套件 如果沒有就跳過
  * 接著輸入node -> 按enter

留言

張貼留言

有任何批評指教或是問題都歡迎留言哦

這個網誌中的熱門文章

4-寫程式從零開始系列-第一個程式(建立UI)

# 建立UI的範例 - 本篇內容只適用於建立UI的探索， 不適用node.js和console的命令列 - 本文示範一個最簡單能輸入一段文字 經過處理再輸出的程式 <script> function 處理文字(vvv) {   var 輸入文字=ta1.value;   ta2.value=vvv+輸入文字.toLowerCase(); } </script> <textarea id="ta1">ABCDE</textarea> <br> <button onclick="處理文字('test');">測試😁😁</button> <br> <textarea id="ta2"></textarea> # 執行結果： ABCDE 測試😁😁 # w3school的語法測試頁(可修改程式) - 把範例程式碼貼到這頁上面/左邊的框框再按run就可以即時測試程式 https://www.w3schools.com/jsref/tryit.asp?filename=tryjsref_substr # 解析 - 以上是個最簡單的html js範例 - html裏面都是以<標籤></標籤>的方式放東西 - 少數標籤 例如換行<br>會沒有對應的</br> - 文字框的標籤叫textarea 按鈕的標籤叫button - 程式碼的標籤是script，夾在中間的是內容 - 要指定一個標籤被按下執行的動作是onclick - 要指定一個標籤的唯一識別名稱的屬性是id - 在這裏onclick這個屬性裡執行了函式處理文字 - function是定義函式的寫法，括號裏是參數 # 延伸閱讀 https://www.w3schools.com/jsref/jsref_obj_string.asp https://www.w3schools.com/jsref/jsref_obj_array.asp
閱讀完整內容

5-程式設計從零開始系列-程式基礎：字串處理範例

# 引言 - 本篇內容只適用於建立UI的探索， 不適用node.js和console的命令列 - 上一篇中已經介紹了最基礎的UI(使用者界面) - 這篇UI的部分就沿用以下，只拓寬文字框和修改處理文字： <script> function 處理文字() {   var 輸入文字=ta1.value;   ta2.value=輸入文字.trim()                      .split("\n")                    .map( item=>("#"+item) )                    .join("\n"); } </script> <textarea id="ta1" style="width:90vw;height:200px;">項目1 項目2 項目3</textarea> <br> <button onclick="處理文字();">測試😁😁</button> <br> <textarea id="ta2" style="width:90vw;height:200px;"></textarea> - 接下來探討處理文字這個函式裏面的內容 # 什麼是函式 - 如果大家對數學函數還有印象，它做的事情就是讓你能丟進去x，通過某種對x的運算得到想要的y值 - 在程式裡類似的東西叫函式(function)，不過你不見得要丟東西給它，它也不見得會產出東西，而可以只是用它來重複執行某些特定動作 - 在前一個範例裏面，處理文字這個函式會在你每次點按按鈕時執行，於是文字框1的字串被處理後丟到文字框2裏面顯示 - 這樣的過程被稱為輸入(input)和輸出(output) - 寫程式其實就是在寫函式，處理各種輸入輸出 ...
閱讀完整內容