Task 1. Set up Coursework/Examination Weights

Transcription

1 Lab02 Page 1 of 6 Lab 02 Student Mark Calculation HTML table button textbox JavaScript comments function parameter and argument variable naming Number().toFixed() Introduction In this lab you will create a simple webpage for calculating a student's mark. It will allow the user to set up the weights and input the marks for his coursework and exam. Figure 1 shows the result. Part 1. Set up the weights Part 2. Calculate final mark Figure 1. Student Mark Calculation (Final version) Task 1. Set up Coursework/Examination Weights 1. Download the initial HTML file from the CS1102 course web. Open it in IE. Like figure 2, nothing is clickable. The default weights, 30/70, are shown. Open the file in Komodo Edit 7. Study the code within the body section. Note: In a table, <tr> is a row, <td> is a cell in the row. 2. Now, we are going to add the +1 and 1 buttons as in Figure 1. Figure 2. Initial version Your task add these tags <p> Fine adjustment for coursework: <button type="button" onclick="increase_cw( );">+1 <button type="button" onclick="decrease_cw( );">-1 </p> Explanation: To deal with onclick, we call increase_cw() and decrease_cw() to do the jobs. These functions will be created in next step Check it! Can you see the nice buttons in the webpage? (yes/no) If you need help, find the Lab helpers.

2 Lab02 Page 2 of 6 3. We will create the increase_cw() and decrease_cw() functions to update the weights. (i) Firstly, give the cell "30" an ID: <td >30</td> id="cw_weight" Then handle "70" similarly, with id="exam_weight" (ii) Now, add the increase_cw() and decrease_cw() functions in the script block (within the head section) : <script> // Increase the weight of coursework by 1 ; decrease the weight of exam by 1 function increase_cw( ) document.getelementbyid('cw_weight').innerhtml = Number(document.getElementById('cw_weight').innerHTML) + 1; document.getelementbyid('exam_weight').innerhtml = Number(document.getElementById('exam_weight').innerHTML) - 1; // Decrease the weight of coursework by 1 ; increase the weight of exam by 1 function decrease_cw( ) Your task: Fill in this part. Hint: refer to the increase_cw() function. </script> Figure 3 Test it! Can you click the buttons to change the weights to 35/65, then back to 30/70? (yes/no) If you need any help, find the Lab helpers. Study the explanations below: In HTML, we use the <script> element to insert a script block. Then the browser will interpret its contents according to the JavaScript language. /* We can write single line JavaScript comments as : //..., or multi lines as */ At the moment, you may think of writing a function as packaging some code contents and assign a name. Learn very soon! We use ( ) for enclosing parameters We use to enclose the code contents in the function. name of the function function increase_cw( ).. The contents contained in the function. The increase_cw function contains 2 statements only (marked with and in Figure 3). They are assignment statements,.. =..; which change the LHS based on the value provided on the RHS. Recall: Each statement is ended with a semi colon (;). innerhtmls are text. To perform calculations (+,, *, /), conversion to numeric is needed first. To do so, we use the built in Number() function like: Number(document.getElementById('cw_weight').innerHTML)

3 Lab02 Page 3 of 6 4. Add the 40/60, 30/70, and 20/80 buttons and the required changeratio function: The button tags: <p> Quick setting of the weights: <button type="button" onclick="changeratio(40,60);" > 40 / 60 <button type="button" onclick="changeratio(30,70);" > 30 / 70 <button type="button" onclick="changeratio(20,80);" > 20 / 80 </p> The changeratio function: /* Change weights to c/e */ function changeratio(c,e) document.getelementbyid('cw_weight').innerhtml=c; document.getelementbyid('exam_weight').innerhtml=e; </script> Study the explanations below: A function call is a command which executes a function. Example: In, the 3 onclick event handlers make function calls to the same function: changeratio: onclick = "changeratio(40,60);" onclick = "changeratio(30,70);" onclick = "changeratio(20,80);" These are arguments These statements invoke the function (or we say: "make function calls") An argument is a data which we provide when we make a function call. E.g., the three function calls in the above are invoked with three different sets of arguments. A parameter is used in a function definition, inside the brackets, serving as a placeholder for an argument. E.g., in : function changeratio(c,e), the parameters c and e are listed. They are placeholders to stand in for the arguments which will really be passed at run time. Then in the function, we write e and c directly to refer to the run time arguments (see ) Q: Can we use other names instead of changeratio, e, and c? Learn very soon! A: Yes! But there are some considerations. Test it! When you click the buttons, can the weights change correctly? (yes/no) If you need any help, find the Lab helpers.

4 Lab02 Page 4 of 6 Task 2. Calculate Final Mark 1. For the text boxes displayed in Part 2 of Figure 1, now we add the tags: <input type="text" id="cw_mark"/> <input type="text" id="exam_mark"/> <input type="text" id="final_mark" readonly="readonly" /> Explanations: <input type="text".. /> specifies a textbox <.. readonly=" readonly"..> is to control that the final mark cannot be typed by the user. Check it! Can you see the proper textboxes in the webpage? (yes/no) 2. Add the Calculate button and the required calculatefinalmark function: <button type="button" onclick="calculatefinalmark();" > Calculate /* Calculate final mark */ function calculatefinalmark() var result; result = Number(document.getElementById("cw_mark").value)* Number(document.getElementById("cw_weight").innerHTML)/100 + Number(document.getElementById("exam_mark").value)* Number(document.getElementById("exam_weight").innerHTML)/100; document.getelementbyid('final_mark').value = result.tofixed(1); Study the explanations below: We use the var keyword to declare variables. A variable refers to a memory location for keeping run time data. We can simply treat a variable as a name associated with a value. Here the var result; statement declares a variable named result which will be used to store an intermediate value of the final mark. We write result =..; to assign the calculated result (RHS) to the result variable (LHS). Note that we split this statement into 6 lines. The proper indentations reveal the different parts clearly. If we write the statement in one very long line, typo mistakes will not be spotted easily; corrections and future modifications will be difficult. To refer to the contents in a textbox, we write.value For grouping within an expression, we can write nested (). We do not write [] or. The result variable now contains the calculated numeric value. We round it up to 1 decimal place for showing (tofixed: convert to fixed point notation of a number) in the textbox. To do so, we write result.tofixed(1);. Test it! When you click the buttons, can the weights change correctly? (yes/no) If you need any help, find the Lab helpers.

5 Lab02 Page 5 of 6 Study the following note carefully: Rules and conventions for naming of functions, parameters, and variables Only allow uppercase and lowercase letters, digits, and underscore (_). Example: result1, result2, add_50_bonus CANNOT start with 0 9. CANNOT be a keyword. Eg. 9To5 and var are wrong The names should be descriptive. For example, in the changeratio function we used the parameter names c and e such that it is easy to distinguish their roles: c for coursework; e for exam. Reminder: better readability = easy to maintain and less careless mistakes Often started in lowercase. camelcase : A common naming style, like calculatefinalmark (First word starts with lowercase, others start with uppercase) Turn to next page for the Exit Test

6 Lab02 Page 6 of 6 Some require careful observations! Exit-Test Complete the summary below. General Notes: New tags in this lab:,, I've practiced using the key for proper. HTML comments: JavaScript comments: (single line), (multi lines) CSS comments: Given words and terms: <button> <table>, <tr>, <td> <input type="text" /> Indentations tab /*...*/ <!.. > //... In our webpages, JavaScript code is added in: (1) Embedded within HTML tags as, e.g. <.. onclick="..." > (2) Within : <script> </script> Event Handlers Script Blocks Writing JavaScript: src value innerhtml statements function call arguments parameters Number(x) y.tofixed(2) spaces var 0 9 To refer to an HTML element whose ID is "x", we write: To refer to the embedded content between its start and end tags as: If the element is a textbox, we refer to the text in the box as: If it is an image (<img>), we refer to its source file as: (This is covered in Lab01 Follow up Reading and Activities Task for Challenge.) document.getelementbyid("x") document.getelementbyid("x"). document.getelementbyid("x"). document.getelementbyid("x"). Each function contains one or more which will run in order whenever the function is called. To make a we should supply according to the of the function. For conversion from text (x) to numeric: For rounding up a number (y) to 2 decimal places: We CANNOT write function calculate Final mark() because a function's name can contain a z, A Z, 0 9, _ only; are not allowed. A function's name cannot start with ; cannot be a keyword like. ** Show your answers to the Lab Helper. This is the end of the Lab. Please fill in and submit the Progress Sheet attached below. You have learnt a lot in this lab. If needed, please redo again and review all covered skills. You may then proceed to the Follow up Reading and Activities for this Lab, which can be found at the course web. Lab02 Progress Sheet Helper's signature : ( / ) dd mm Student name and EID : [E.g. Chan Siu Pang (spchan31)] Student belongs to : L (Lab session) e.g., L09 Remarks : e.g., late / not this group / join 2nd time Progress & performance Rated by the student : [poor] [excellent] (Please circle) Rated by the helper : [poor] [excellent] References: 5: Very familiar with the contents. Easily complete the Exit Test. 4: Spend effort to review through doing the Exit Test. Afterwards, get 100% familiar with the contents. 3: Have basic ideas about all the contents after learning through the Exit Test.