JavaScript From Zero

# 引言 - 本篇內容只適用於建立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) - 寫程式其實就是在寫函式，處理各種輸入輸出 ...

# 建立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

以下提供三種入門方式供選擇 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 https://play.google.com/sto...

# 我推薦的語言： JavaScript - 理由   * 他是我們每天瀏覽的 網頁 中互動的 唯一語言   * 他擁有 跨平臺 的特性 不論是手機 電腦 Android iOS Windows MacOS Linux都可以順利運行   * 要開始實做非常簡單 甚至 不用安裝 任何東西   * 很容易線上利用別人的網頁測試語法   * 合併html css 可以 快速建立親和的使用界面 # 熱門語言有哪些? - 編譯式：整個程式架構完成才能執行，比較不能一行一行邊寫邊執行 觀察結果   * 例如C, C++, C# - 直譯式：通常可以邊寫邊執行 容易觀察結果   * 例如JavaScript, Python

# 前言 - 大家好 這個系列是想針對完全沒碰過程式的人 - 希望能最後做到自己寫些小工具幫助生活 # 學程式的目的？ - 通常是因為有大量而重複的資料處理要做 - 例如   - 從字典網站查詢多個字詞 整理他們的解釋   - 利用程式重複計算某些算式的解   - 模擬物理系統的運動   - 整合醫院的病歷資料   - 重複執行某個特定的繪畫動作或是音樂創作