第三題:
下圖的網頁包括第一列的表單列,第二列的產品清單列,以及最後一列的購物項目清 單。此網頁程式包括下列功能:
1. 點選[Add to Carts]按鈕,會將項目編號加入購物車變數(myCarts),並顯示在第三 列資訊列上。同時,[Add to Carts]按鈕會改變成[Cancel It]按鈕。
2. 再點選[Cancel It]按鈕,會將項目編號從購物車變數(myCarts)去除,並顯示最新 購物資料在第三列資訊列上。同時,[Cancel It]按鈕會改變成[Add to Carts]按鈕。
3. 點選[Purchase]按鈕會以 CGI 協定的 POST 方式向後端發出 request 需求:後端需 求 URL 是 : http://somecompanyXXX.com/purchase , request 參 數 包 括 purchaseData,內含使用者名稱(name)和項目編號清單(productIdList)。

下面為網頁的程式碼片段(忽略相關 CSS 設定),請在適當位置填入程式碼(僅限
JavaScript 指令),以顯示具備上述功能的網頁。(請使用符合 W3C 標準的 JavaScript 指令,
以考試當時最新版的瀏覽器為主,不用考慮與舊版瀏覽器的相容問題。)


