- 面向人羣：
- 零基礎或初學者
- 難度：
- 中等
重要說明
百度前端技術學院的課程任務是由百度前端工程師專爲對前端不一樣掌握程度的同窗設計。咱們盡力保證課程內容的質量以及學習難度的合理性，但即便如此，真正決定課程效果的，仍是你的每一次思考和實踐。html
課程多數題目的解決方案都不是惟一的，這和咱們在實際工做中的狀況也是一致的。所以，咱們的要求不單單是實現設計稿的效果，更是要多去思考不一樣的解決方案，評估不一樣方案的優劣，而後使用在該場景下最優雅的方式去實現。那些最終沒有被咱們採納的方案，一樣也能夠幫助咱們學到不少知識。因此，咱們列出的參考資料未必是實現需求所必須的。有的時候，實現題目的要求很簡單，甚至參考資料裏就有，可是背後的思考和親手去實踐倒是任務最關鍵的一部分。在學習這些資料時，要多思考，多提問，多質疑。相信經過和小夥伴們的交流，能讓你的學習事半功倍。前端
任務目的
- 在上一任務基礎上繼續JavaScript的體驗
- 深刻學習JavaScript的事件機制及DOM操做
- 學習事件代理機制
- 學習簡單的表單驗證功能
- 學習外部加載JavaScript文件
任務描述
- 參考如下示例代碼，用戶輸入城市名稱和空氣質量指數後，點擊「確認添加」按鈕後，就會將用戶的輸入在進行驗證後，添加到下面的表格中，新增一行進行顯示
- 用戶輸入的城市名必須爲中英文字符，空氣質量指數必須爲整數
- 用戶輸入的城市名字和空氣質量指數須要進行先後去空格及空字符處理（trim）
- 用戶輸入不合規格時，須要給出提示（容許用alert，也能夠自行定義提示方式）
- 用戶能夠點擊表格列中的「刪除」按鈕，刪掉那一行的數據
task.html
<!DOCTYPE>
<html>
<head>
<meta charset="utf-8">
<title>IFE JavaScript Task 01</title>
<script src="task.js"></script>
</head>
<body>
<div>
<label>城市名稱：<input id="aqi-city-input" type="text"></label><br>
<label>空氣質量指數：<input id="aqi-value-input" type="text"></label><br>
<button id="add-btn">確認添加</button>
</div>
<table id="aqi-table">
<!--
<tr>
<td>城市</td><td>空氣質量</td><td>操做</td>
</tr>
<tr>
<td>北京</td><td>90</td><td><button>刪除</button></td>
</tr>
<tr>
<td>北京</td><td>90</td><td><button>刪除</button></td>
</tr>
-->
</table>
</body>
</html>
task.js
/**
* aqiData，存儲用戶輸入的空氣指數數據
* 示例格式：
* aqiData = {
* "北京": 90,
* "上海": 40
* };
*/
var aqiData = {};
/**
* 從用戶輸入中獲取數據，向aqiData中增長一條數據
* 而後渲染aqi-list列表，增長新增的數據
*/
function addAqiData() {
}
/**
* 渲染aqi-table表格
*/
function renderAqiList() {
}
/**
* 點擊add-btn時的處理邏輯
* 獲取用戶輸入，更新數據，並進行頁面呈現的更新
*/
function addBtnHandle() {
addAqiData();
renderAqiList();
}
/**
* 點擊各個刪除按鈕的時候的處理邏輯
* 獲取哪一個城市數據被刪，刪除數據，更新表格顯示
*/
function delBtnHandle() {
// do sth.
renderAqiList();
}
function init() {
// 在這下面給add-btn綁定一個點擊事件，點擊時觸發addBtnHandle函數
// 想辦法給aqi-table中的全部刪除按鈕綁定事件，觸發delBtnHandle函數
}
init();
任務注意事項
- 實現簡單功能的同時，請仔細學習JavaScript基本語法、事件、DOM相關的知識
- 請注意代碼風格的整齊、優雅
- 代碼中含有必要的註釋
- 驗證輸入邏輯能夠在失去焦點時判斷，也能夠在點擊按鈕時判斷
- 建議不使用任何第三方庫、框架
- 示例代碼僅爲示例，能夠直接使用，也能夠徹底本身重寫
任務協做建議
- 團隊集中討論，明確題目要求，保證隊伍各自對題目要求認知一致
- 各自完成任務實踐
- 交叉互相Review其餘人的代碼，建議每一個人至少看一個同組隊友的代碼
- 相互討論，最後合成一份組內最佳代碼進行提交