課程目標

學會基本的變數賦值

學會基本的字串連接

能從 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 屬性,弄得漂亮一點才專業

做出以上功能,你就完成這次的課程目標了!


歡迎將作業成果,在下方留言,跟大家分享,讓大家給你一些回饋!

可以將每課學到的觀念、關鍵字,丟到網路上去搜尋、研究一下!

發問請在「討論專區」為主,或者分享學習筆記、寫學習心得!

貼文都會出現在個人檔案頁面,成為學習歷程、部落格紀錄!

未來面試時,分享給面試官看,會讓人知道你的積極程度!

按讚的人:

共有 67 則留言

本篇章作業👍
https://jsfiddle.net/09v5oadu/23/

按讚的人:

很好!作業順利完成!

要繼續保持喔!

其它補充:

實務上,函式的內容,前面會加上縮排,比較好讀

請參考我課程內的範例,加上一些縮排,通常是用兩格或者四格縮排

交作業~
https://jsfiddle.net/birdie2019/xc5z47Lu/97/

按讚的人:

很好!作業順利完成!

這次的欄位,也一樣把樣式弄得很漂亮!繼續保持!

不好意思><請問這段
<input id="keyword" text="text" />
<button onclick="myFunction()">Click me</button>

是不是 type="text" 而不是 text="text" 呢 ? ><

按讚的人:

謝謝提醒!我的確打錯字了,已更新~!

您好,繳交作業
https://jsfiddle.net/TobeyLiu/fdahb5tp/6/
謝謝老師!

按讚的人:

寫得很好,順利完成!繼續保持!

https://jsfiddle.net/kazekaze/3pacwv7h/42/
繳交第二課作業,非常感謝。

按讚的人:

點擊「認識工廠」按鈕,沒有反應喔!

https://jsfiddle.net/973224/f9xzbqLt/49/

老師您好,我想詢問如何將矩形置網頁中間

按讚的人:

作業沒問題,順利通過!
發問的話,請到討論專區,我在那邊回答為主,也可以讓別人一起參與討論!

交作業~再麻煩站長了,謝謝!
https://clothes-form.glitch.me

按讚的人:

DONE! 感謝老師教材引導
https://jsfiddle.net/Ls0nye8o/11/

按讚的人:

繳交作業~~
https://jsfiddle.net/etai200/atk8d9px/67/
比起程式碼的部分 設計版面反而是一大難題呢
總是會想要設計的花俏一點 但是又會想要保留乾淨俐落的形象令人猶豫

按讚的人:

老師您好 本章作業請過目:https://jsfiddle.net/Quill0831/gLtmapnq/3/

按讚的人: