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>

# 執行結果：

# w3school的語法測試頁(可修改程式)

- 把範例程式碼貼到這頁上面/左邊的框框再按run就可以即時測試程式

# 解析

- 以上是個最簡單的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

留言

張貼留言

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

這個網誌中的熱門文章

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 https://play.google.com/sto...
閱讀完整內容

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) - 寫程式其實就是在寫函式，處理各種輸入輸出 ...
閱讀完整內容