學會基本的變數賦值
學會基本的字串連接
能從 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 屬性,弄得漂亮一點才專業
做出以上功能,你就完成這次的課程目標了!
歡迎將作業成果,在下方留言,跟大家分享,讓大家給你一些回饋!
可以將每課學到的觀念、關鍵字,丟到網路上去搜尋、研究一下!
發問請在「討論專區」為主,或者分享學習筆記、寫學習心得!
貼文都會出現在個人檔案頁面,成為學習歷程、部落格紀錄!
未來面試時,分享給面試官看,會讓人知道你的積極程度!
不好意思><請問這段
<input id="keyword" text="text" />
<button onclick="myFunction()">Click me</button>
是不是 type="text" 而不是 text="text" 呢 ? ><
您好,繳交作業
https://jsfiddle.net/TobeyLiu/fdahb5tp/6/
謝謝老師!
https://jsfiddle.net/973224/f9xzbqLt/49/
老師您好,我想詢問如何將矩形置網頁中間
繳交作業 感謝
https://jsfiddle.net/vcd0ak9o/5/
本課作業 繼續努力><
https://jsfiddle.net/81ue_lan/odgu03af/24/
https://jsfiddle.net/johnny890118/69qrnxL1/101/
交作業,請站長檢查,謝謝
繳交作業~~
https://jsfiddle.net/etai200/atk8d9px/67/
比起程式碼的部分 設計版面反而是一大難題呢
總是會想要設計的花俏一點 但是又會想要保留乾淨俐落的形象令人猶豫
本篇章作業👍
https://jsfiddle.net/09v5oadu/23/