Task 16:0 basic JavaScript Coding (IV)

Task 16:0 Basic JavaScript Coding (iv)

For the crowd:

0 Basic or Beginner

Difficulty:

Medium

Important Notes

Baidu Front-end Technical College's curriculum task is the front-end engineers of Baidu for the front-end different mastery of the level of students design. We try to ensure the quality of the course content and the rationality of learning difficulty, but even so, it is your every thought and practice to really decide the effect of the course.

The solution for most topics in the course is not unique, and it is consistent with what we do in the actual work. Therefore, our request is not only to achieve the effect of the design draft, but also to think more about different solutions, evaluate the pros and cons of different scenarios, and then use the most elegant way in this scenario to achieve. The solutions that are ultimately not adopted by us can also help us to learn a lot of knowledge. Therefore, the resources we have listed are not necessarily necessary to meet the needs. Sometimes, the requirements of the implementation of the topic is very simple, even in reference, but behind the thinking and practice is the most important part of the task. When studying these materials, we should think more, ask questions and question more. Believe that through the exchanges with the small partners, you can make your study more effective.

Mission Purpose

• Continue the JavaScript experience based on the previous task
• Learn more about JavaScript's event mechanisms and DOM operations
• Learning event Broker Mechanism
• Learn a simple form validation feature
• Learn to load JavaScript files externally

Task description

• Refer to the following sample code, after the user has entered the city name and air quality index, click the "Confirm Add" button, the user's input will be validated, added to the following table, a new line to display
• The city name entered by the user must be a Chinese-English character, and the air quality index must be an integer
• The city name and air quality index entered by the user need to be preceded and removed space and empty character processing (trim)
• When the user enters a non-specification, you need to give a hint (allow alert, or you can define your own hint)
• Users can click on the "Delete" button in the table column to delete the data from that row.

Task.html

<! doctype>
Task.js
/** * aqidata, storing user input Air index data * Sample format: * aqidata = {*    "Beijing": all, *    "Shanghai": + *}; */var aqidata = {};/** * Get data from user input  Add a piece of data to Aqidata * Then render aqi-list list, add new Data */function Addaqidata () {}/** * render aqi-table table */function renderaqilist () {}/** * Click on add-btn processing logic * Get user input, update data, and make page rendering update */function Addbtnhandle () {  addaqidata ();  Renderaqilist ();} /** * Click on the individual Delete button when the processing logic * to obtain which city data is deleted, delete data, update the table display */function Delbtnhandle () {  //do sth.  Renderaqilist ();} function init () {  ///In this case, bind a click event to ADD-BTN, trigger the Addbtnhandle function when clicked/  /Find a way to bind the event to all the delete buttons in aqi-table, Trigger Delbtnhandle function}init ();
Task considerations
 
 

  
  
 
   
While implementing simple functionality, learn about JavaScript basic syntax, events, and DOM knowledge
 
   
Please note that the code style is neat and elegant
 
   
The code contains the necessary comments
 
   
Verify that the input logic can be judged when the focus is lost, or it can be judged when the button is clicked
 
   
We recommend that you do not use any third-party libraries, frameworks
 
   
The sample code is just examples, can be used directly, or it can be overridden entirely by itself
 
  
 
 
Task Collaboration recommendations
 
 

  
  
 
   
Team focused discussion, clear the topic requirements, ensure that the team each to the subject of cognitive consensus
 
   
Practice of accomplishing tasks individually
 
   
Cross-review other people's code, suggesting that everyone see at least one team member's code
 
   
Discuss each other and finally synthesize a copy of the best code within the group to submit
 
  
 
 
Online learning Resources
 
 

  
  
 
   
JavaScript Introductory article
 
   
MDN JavaScript
 
  
 
 
Task 16:0 basic JavaScript Coding (IV)