🔍 搜尋結果:JavaScript 系列

🔍 搜尋結果:JavaScript 系列

JavaScript 系列一:第7課 ── 認識巢狀結構

## 課程目標 學會「數字」資料型態的比較 多學一個 `else if` 條件判斷,進行流程控制 學會巢狀 if/else 條件判斷,進行流程控制 ## 課程內容 前面的課程中,我們有學過比對字串是否相同 ``` var str1 = '星期一'; var str2 = '星期二'; if (str1 == str2) { alert('同一天'); } else { alert('不同天'); } ``` 同樣的寫法,也能用來比較數字 ``` var x = 100; var y = 50 + 50; if (x == y) { alert('同樣大小'); } else { alert('不同大小'); } ``` 除了比較等於 `==` 之外,還有其它基本比較,分別是 - `!=` 不等於 - `>` 大於 - `<` 小於 - `>=` 大於等於 - `<=` 小於等於 用法一樣,放在 if 後面小括號之中即可。這些比較都很常用到! --- 之前的課程,有學過 if/else 語句,這次再多學一個,叫做 `else if` 語句 當 if 條件不成立,就會進到 else if 條件檢查,如果還是不成立,最終才會進到 else ``` var x = 10; var y = 20; if (x > y) { alert('x 比較大'); } else if (x == y) { alert('x 跟 y 一樣大'); } else { alert('y 比較大'); } ``` 上述範例,在 jsfiddle 跑跑看,把 `x` `y` 的值隨意調整一下,就會知道 if / else if / else 的運作方法! 除此之外,`else if ` 語句可以有多個,不只有一個,如果寫多個 else if 的話,就會逐個逐個檢查是否成立 如果不成立,就進到下一個條件檢查;如果成立,就執行當前大括號裡面的內容 ``` var height = 170; if (height >= 190) { alert('您非常高喔!'); } else if (height >= 180) { alert('您的身高挺不錯!'); } else if (height >= 175) { alert('您高於平均身高!'); } else if (height >= 170) { alert('您是標準身高呢!'); } else { alert('加油!可以多喝牛奶!'); } ``` 上述範例,在 jsfiddle 跑跑看,把 `height` 調整一下,玩玩看吧! --- 最後來學一下巢狀條件判斷 開始之前,先學一個數學運算,叫做「餘數」,寫法是 `%` 跟加減乘除類似,餘數會將數學上的餘數計算出來,`alert(10 % 3)` 會顯示 1,`alert(10 % 2)` 會顯示 0 如果你忘記餘數是什麼,請去翻一下小學數學課本,或者網路搜尋一下 ``` var x = 35; if (x % 2 == 1) { if (x > 100) { alert('這數字很大,而且是奇數。') } else { alert('這數字不大,而且是奇數。') } } else { if (x > 100) { alert('這數字很大,而且是偶數。') } else { alert('這數字不大,而且是偶數。') } } ``` 上述範例,在 jsfiddle 跑跑看,把 `x` 調整一下,玩玩看吧! 巢狀結構,就是進行完條件檢查之後,在裡面又遇到一個條件檢查 乍看之下很亂,但也只是多一層,習慣一下,其實也還好 其實,巢狀結構可以有很多層,也就是 if 裡面有 if 然後裡面又有 if,可以不斷寫下去 但實務上會避免這樣寫,因為會讓程式碼非常難讀。可能的話,同樣邏輯,試著改用別的寫法,會比較好讀 比方說使用 `&&` 來改寫,這是數學邏輯上的「且」的意思 ``` var x = 35; if (x % 2 == 1 && x > 100) { alert('這數字很大,而且是奇數。') } else if (x % 2 == 1 && x <= 100) { alert('這數字不大,而且是奇數。') } else if (x % 2 == 0 && x > 100) { alert('這數字很大,而且是偶數。') } else { alert('這數字不大,而且是偶數。') } ``` 這段程式,跟上一段程式,邏輯上是完全一模一樣的喔! 至於哪種寫法比較漂亮呢?這純粹是主觀問題,都可以。 程式設計之中,很多事情都是主觀問題,不用被困擾太久。先能跑就好了,你就先用就對了 ## 課後作業 接續前一課的作業,目前的導購&促銷流程,效果還不錯 但你發現有些人不懂批發工廠的運作,下單數量太少,或者太多 常常要在電話中解釋,有點浪費時間,你希望在網頁上能有提示改善 這次的作業,要做業界所謂的「表單驗證」功能 --- 這次驗證,需要驗證「顧客名稱」與「訂購數量」這兩個欄位 如果顧客名稱是空白沒填,點擊訂購按鈕請用 alert 跳出訊息「煩請填寫您的大名。」 如果訂購數量沒填,請用 alert 跳出訊息「煩請輸入訂購數量。」 如果訂購數量有填,但是數量小於 100,請用 alert 跳出訊息「抱歉,我們工廠的最低出貨量是 100 件。」 如果訂購數量有填,但是數量大於 5,000,請用 alert 跳出訊息「抱歉,我們工廠的最高出貨量是 5,000 件。」 如果以上表單欄位驗證,通通沒問題,就進入正常流程 1. 跳出招呼訊息 2. 顯示訂單詳細內容 做出以上功能,你就完成這次的課程目標了!

JavaScript 系列一:第6課 ── 認識資料型態與轉換

## 課程目標 學會「數字」資料型態 學會基本的資料型態轉換 ## 課程內容 在之前的課程中,我們學會了宣告字串、以及字串的連接 ``` var str1 = '新年'; var str2 = '快樂'; var str3 = var1 + str2; alert(str3); ``` 這課我們要學「數字」這種資料型態以及一些基本操作 ``` var x = 30; var y = 5; var z1 = x + y; var z2 = x - y; var z3 = x * y; var z4 = x / y; alert(z1); alert(z2); alert(z3); alert(z4); ``` 以上是加減乘除的範例,很簡單吧! 要注意的是,長得像數字的字串,其實依然是字串 ``` var a1 = '100'; var a2 = 100; ``` 上面的 `a1` `a2` 兩個變數,看起來很像,但資料型態不一樣 雖然直接進行字串連接或者加減乘除,程式不會出問題,但那其實是 JavaScript 引擎知道你懶惰,「猜測」你需要型態轉換,自動幫你轉換 但其實手動把型態轉換清楚比較好,比較不會有誤會 比方說,上面的 `a1 + a2` 如果都當成數字,會是 `200`;如果都當成字串,那字串連接會是 `'100100'` 這種情況就很容易造成出錯,所以要養成習慣,把型態轉換清楚 要把數字轉成字串,可以使用「數字」這種資料型態內建的 `.toString()` 函式 ``` var a1 = '100'; var a2 = 100; var a3 = a1 + a2.toString(); alert(a3); ``` 要把字串轉成數字,也有一個內建函式 `parseInt()` 可以使用 ``` var a1 = '100'; var a2 = 100; var a3 = parseInt(a1) + a2; alert(a3); ``` 這些範例都去 jsfiddle 跑跑看,就會很清楚了! --- 使用函式的時候,有時像在直接呼叫一個「函式」,例如 `alert()` `parseInt(a1)` 有時又像在呼叫「物件」的「函式」,例如 `document.getElementById()` `a2.toString()` 你或許會覺得,怎麼不設計成 `a1.toInt()` 跟 `parseString(a2)` 呢? 這些其實是程式語言設計者的主觀喜好、偏好、習慣而已,不重要,反正能跑就好了,你就先用就對了 --- 有件事要提一下,前面的課程,有說到如何取得用戶輸入的內容 ``` var str = document.getElementById('keyword').value; ``` 在 JavaScript 之中,用戶在 html 元素輸入的內容,一律都會是「字串」 就算用戶是輸入阿拉伯數字,在 JavaScript 中拿到值之後,如果需要數學計算的話,要記得把型態轉成數字 ## 課後作業 接續前一課的作業,雖然詳細的報價,你希望在電話中跟對方談,因為要了解客製化細節,才能報價 但是你覺得先在網頁上,顯示初步的報價,可以節省一些時間,比較有效率 這次的作業要用簡單的數學,來初步顯示報價 --- 目前的欄位有顧客名稱、服裝分類、服裝類型 請再增加一個文字輸入欄位,讓客戶能輸入「訂購數量」 為了簡單起見,男裝不論類型,一件都報 600 元;女裝不論類型,一件都報 500 元 在點擊訂購按鈕之後,訂單細節裡面,顯示「初步估價」給客戶看,類似這樣: ``` ---------- |您的訂單    | |顧客姓名:XXX| |服裝分類:XXX| |服裝類型:XXX| |訂購數量:XXX| |初步估價:XXX| ---------- ``` 做出以上功能,你就完成這次的課程目標了!

JavaScript 系列一:第5課 ── 基本的 if/else 條件流程控制

## 課程目標 學會基本的 if/else 條件判斷,進行流程控制 學會基本的字串比較 ## 課程內容 這課來學一點流程控制 ``` var str1 = '星期一'; var str2 = '星期二'; var str3 = '星期三'; var str4 = '星期一'; if (str1 == str2) { alert('同一天'); } else { alert('不同天'); } ``` 這邊我們宣告四個字串,接著用 `==` 比較字串是否相同 如果相同,就會執行 if 後面大括號 `{}` 包起來的內容 如果不相同,就會執行 else 後面大括號 `{}` 包起來的內容 請在 jsfiddle 試試看上面的範例,實驗一下、玩玩看,就會清楚了! 請把 if 後面的字串比較,排列組合,拿 `str1` `str2` `str3` `str4` 隨便改改看 會發現只有 `if (str1 == str4)` 的時候會顯示「同一天」 --- 你可能會覺得很奇怪,數學課不是說「等於」應該長這樣嗎「=」?為什麼有兩個等號? 其實是因為在程式設計之中,單個等號被拿來用作「變數賦值」了,也就是單個等號是在設定值給變數 所以你習慣的「等於」只好用兩個等號來表示,所以變通一下。只是這樣而已,就習慣一下吧! ## 課後作業 接續前一課的作業,你的「線上下單」頁面,目前會顯示訂單資訊了 為了進一步提高轉換率,你決定鼓勵客戶立刻下單,你願意送出小禮物 --- 目前流程是在點擊訂購按鈕之後 1. 跳出招呼訊息 2. 顯示訂單詳細內容 請增加一個推銷訊息視窗 1. 跳出招呼訊息 2. 跳出推銷訊息視窗 3. 顯示訂單詳細內容 推銷訊息視窗,用一個新的 alert 訊息來做就好 如果顧客選擇服裝分類是「男裝」,就跳出 alert 訊息顯示「最近剛好是工廠週年慶,只要您今天來電下單,我們將贈送您帥氣領帶!」 如果顧客選擇服裝分類是「女裝」,就跳出 alert 訊息顯示「最近剛好是工廠週年慶,只要您今天來電下單,我們將贈送您美麗圍巾!」 做出以上功能,你就完成這次的課程目標了!

JavaScript 系列一:第4課 ── 基本的陣列操作

## 課程目標 學會基本的陣列取值 能從 html 元素中,得到用戶選取的內容 ## 課程內容 這課先來學一點陣列觀念 ``` var colors = ['red', 'orange', 'yellow', 'green']; ``` 中括號 `[]` 包起來就是宣告一個陣列,並記錄到 `colors` 變數中。此陣列內容是四個字串。 陣列索引從 0~3,因為在程式設計中,索引通常是從 0 開始而不是從 1 開始。 在陣列後方,使用中括號加上索引,就可取得陣列內容的值 ``` alert(colors[0]); alert(colors[1]); ``` 這兩個 alert 會顯示出陣列中第一個元素、第二個元素,馬上到 jsfiddle 試試看就會清楚了! --- 在前幾課,我們學會了取得 `<input type="text" />` 這種元素內容的方法 文字輸入框是最常用到的網頁功能,除此之外,下拉式選單也很常用 ``` <select id="my-colors"> <option value="red">鮮豔的紅色</option> <option value="orange">美麗的橘色</option> <option value="yellow">亮眼的黃色</option> </select> <button onclick="showColor()">Click me</button> ``` 像這樣的選單,如何取得用戶選取的值呢? ``` function showColor() { var menu = document.getElementById("my-colors"); var index = menu.selectedIndex; alert(index); var value = menu.options[index].value; var text = menu.options[index].text; alert(value); alert(text); } ``` 首先一樣用 `document.getElementById` 找到我們的選單元素 選單元素這種物件,會有 `.selectedIndex` 屬性來代表目前選中的索引 我們用 alert 先把索引跳出來看一下 同時,選單元素這種物件,會有 `.options` 屬性來代表其中的 `<option>` 元素,並且會是一個陣列 這個陣列裡面,通通都是物件,一個物件代表一個 `<option>` 元素 每個 `option` 物件,又有 `.value` 屬性可供存取,以及 `.text` 屬性可供存取 工程師可以根據需要選擇 `.value` 或 `.text` 來使用 我們在寫 html select 元素時,通常會在 value 放英文單字,然後 text 放清楚的中文說明 請在 jsfiddle 試試看上面的範例,實驗一下、玩玩看,就會清楚了! ## 課後作業 接續前一課的作業,你的「線上下單」頁面,目前會顯示訂單資訊,方便顧客確認 除了顧客名稱之外,這課的作業要加強下單功能、顯示更多訂單資訊 --- 除了輸入客戶名字的欄位之外,請用 `select` 元素加上一個選單,讓用戶可以選擇服裝的分類:男裝、女裝 接著再用 `select` 元素多做一個選單,讓用戶可以選擇服裝的類型:外套、上衣、下身 這樣顧客就知道這間「成衣批發工廠」,有提供哪些商品批發了! 接著要將顧客選擇的內容,顯示在訂單資訊裡面 類似這樣: ``` ---------- |您的訂單    | |顧客姓名:XXX| |服裝分類:XXX| |服裝類型:XXX| ---------- ``` XXX的地方預設是空白,在點擊訂購按鈕之後,跳出招呼訊息之後,就把XXX改為顧客輸入、選擇的內容 請替這個訂單資訊區塊加一些 css 屬性,弄得漂亮一點 做出以上功能,你就完成這次的課程目標了!

JavaScript 系列一:第3課 ── 修改 html 的內容

## 課程目標 學會動態修改 html 元素中的內容 ## 課程內容 在上一課,我們學會了這樣用 JavaScript 取得用戶輸入到 html 元素的內容 ``` var str = document.getElementById('keyword').value; ``` 那麼針對 `h1`, `h2`, `p` 這些用來顯示文字的元素,要如何用 JavaScript 修改其中的文字呢? 其實做法非常類似,這樣就可以了 ``` <p id="welcome">歡迎光臨</p> ``` ``` document.getElementById('welcome').textContent = '謝謝光臨'; ``` 一樣先去找出網頁中 id 為 `welcome` 的元素,接著去修改 `textContent` 這個屬性的內容 跟上一課把資料記錄在變數中類似,這邊把資料記錄在此「元素」的「屬性」之中,等於是在修改屬性內容 如前一課所說,各種 html 元素,在 JavaScript 中是一種物件 而在畫面上顯示的文字,在 JavaScript 中會將這些文字存放在物件的 `textContent` 這屬性之中 `h1`, `h2`, `p` 等等元素都可以這樣修改內容,連 `div`, `span` 這些元素也可以這樣修改內容 除了直接賦值為字串之外,使用「變數」來賦值也沒問題 ``` var str = '萬事順利'; document.getElementById('welcome').textContent = str; ``` 請在 jsfiddle 試試看上面的範例,把元素寫在 html 區塊,把修改屬性寫在 JavaScript 區塊,實驗一下、玩玩看! ## 課後作業 接續前一課的作業,你的「線上下單」頁面,目前只有簡單的招呼訊息 你希望在畫面上顯示簡單的訂單資訊,讓顧客聯絡你之前,能看著螢幕再確認一次,減少顧客下單之後又反悔的機率 這課的作業要做這個訂單資訊,先只做「顧客姓名」就好 --- 請在訂購按鈕的下方,寫一個區塊顯示訂單資訊 看起來類似這樣: ``` [我要訂購] ---------- |您的訂單    | |顧客姓名:XXX| ---------- ``` XXX的地方預設是空白,在點擊訂購按鈕之後,跳出招呼訊息之後,就把XXX改為顧客輸入的名稱 請替這個訂單資訊區塊加一些 css 屬性,弄得漂亮一點 做出以上功能,你就完成這次的課程目標了!

JavaScript 系列一:第2課 ── 基本的變數操作、從 html 取得內容

## 課程目標 學會基本的變數賦值 學會基本的字串連接 能從 html 元素中,得到用戶輸入的內容 ## 課程內容 在上一課的內容中,我們這樣來顯示訊息視窗 ``` alert('你點擊了按鈕!'); ``` 像這樣單引號包起來的內容 `'你點擊了按鈕!'` 我們叫「字串」,是一種資料類型 除了直接把字串當參數傳給函數之外,還可以先把字串紀錄在「變數」之中,方便重複使用 ``` var message = '你點擊了按鈕!'; alert(message); ``` 就跟函數名稱一樣,變數名稱是隨便命名的,取一個自己看得懂的名稱就行了 記錄到變數之後,就可以到處重複使用,不用每次手寫整段資料內容 不論是字串或者變數,都可以連接起來使用 ``` var text1 = '恭喜'; var text2 = '發財'; alert(text1 + text2); alert('萬事' + '如意'); ``` 除了「字串」這種資料類型之外,還有「數字」等等其他類型,之後課程會提到 --- 不論是購物網站、社群網站、各種網站,一定會經常需要用戶輸入的內容 有一個簡單的方法可以取得用戶輸入內容 ``` <input id="keyword" type="text" /> <button onclick="myFunction()">Click me</button> ``` ``` function myFunction() { var str = document.getElementById('keyword').value; alert(str); } ``` 函數中的 `document` 是一個 JavaScript 在瀏覽器中內建的「物件」,這個物件代表網頁當下的狀態,有很多資料、函數可以呼叫使用 後面的 `.` 代表去呼叫這個「物件」的「函數」,或者去存取這個「物件」的「屬性」 這邊的 `document.getElementById('keyword')` 代表以 `'keyword'` 為參數去呼叫 `getElementById`函數 這函數會去找出網頁中 id 為 `keyword` 的元素,元素在 JavaScript 中也是一種物件 後面的 `.value` 就是去存取元素的 value 屬性。各種輸入相關的元素,都會把用戶的輸入內容存在 `value` 這屬性之中 使用以上的幾段程式碼,可以輕鬆地取得用戶輸入的內容 請在 jsfiddle 試試看上面的範例,把輸入欄位與按鈕寫在 html 區塊,把函數定義寫在 JavaScript 區塊,實驗一下、玩玩看! ## 課後作業 接續第一課的作業,你的「線上下單」頁面,目前有個訂購按鈕 你對按下按鈕的導購訊息,不太滿意,你希望能顯示客戶的名字,看起來更專業 這課的作業要來改善這個「線上下單」頁面的功能 --- 請使用 jsfiddle,多加一個文字輸入欄位,讓客戶能輸入名字 在客戶點擊訂購按鈕之後,跳出的訊息會顯示: 「XXX您好!謝謝您對我們的衣服有興趣!請致電 0987-654-321,會有專人提供您報價!」 請稍微替這個輸入客戶名字的欄位加一些 css 屬性,弄得漂亮一點才專業 做出以上功能,你就完成這次的課程目標了!

JavaScript 系列一:第1課 ── 基本的函數操作、onclick 事件

## 課程目標 學會定義函數的基本方法 學會呼叫函數的基本方法 學會 onclick 事件的用法 ## 課程內容 請打開這個網站,用這個網站來練習&寫作業: https://jsfiddle.net 在學 html/css 時,我們會給元素一些屬性,例如 id 與 class 屬性,連結的 href 屬性,圖片的 src 屬性 同樣的語法,還可以用來做一些互動式效果、功能 例如,可以這樣在按鈕上做出「點擊後」觸發的效果 ``` <button onclick="myFunction()">Click me</button> ``` onclick 我們叫「事件屬性」。也是屬性的一種,語法跟一般屬性相同 屬性內容是去執行 `myFunction`,後面的小括號 `()` 代表執行的意思 這邊的 `myFunction` 是所謂的「函數」。名稱是隨便命名的。根據互動的內容,取一個自己看得懂的名稱就行了 小括號裡面可以傳參數,這邊我們沒用到參數,所以直接小括號包起來 `()` 就可以 如何定義 `myFunction` 函數的內容呢?這樣即可 ``` function myFunction() { alert('你點擊了按鈕!'); alert('這是很好的開始!'); } ``` 這個函數中,使用了 JavaScript 在瀏覽器中內建的 `alert` 函數。這函數會根據參數,跳出小視窗,把參數顯示在畫面上 在 JavaScript 中,一段動作的結尾都會加上分號 `;` 用來代表這段結束 分號其實可以省略不寫,程式一樣會正常執行,但加上分號,看起來更清楚一點點 有點像寫文章時結尾的「句點」,有人習慣寫,有人經常不寫,但加了比較清楚 請在 jsfiddle 試試看上面的範例,把按鈕寫在 html 區塊,把函數定義寫在 JavaScript 區塊,實驗一下、玩玩看! ## 課後作業 假設你家裡是開成衣批發工廠的,你用 html/css 寫了一個工廠的介紹網頁 在「線上下單」頁面,你希望引導客戶聯絡你,你親口介紹、聊過才報價、提高成交率 你不想把商品報價、聯絡方式直接顯示在畫面上,你希望是點擊按鈕之後,才顯示聯絡資訊 這次作業,需要你實作這個功能。 --- 請使用 jsfiddle,做一個「我要訂購」按鈕 點擊這個按鈕,會跳出 alert 訊息顯示「謝謝您對我們的衣服有興趣!請致電 0987-654-321,會有專人提供您報價!」 接著做一個「認識工廠」按鈕 點擊這個按鈕,會跳出 alert 訊息顯示「我們工廠位於新北市,通過國際 ISO9001 認證,品質讓您放心!」 請稍微替這兩個按鈕加一點 css 屬性,弄得漂亮一點,漂亮的按鈕,會讓客戶更想點 做出這兩個按鈕,你就完成這次的課程目標了!