Practical Session 4: DOM#

Copy and paste the following code into an .html file:

1
<html>
2
    <head>
3
        <title>JavaScript Example</title>
4
        <script src="script.js"></script>
5
    </head>
6
    <body>
7
        <div id="block1">
8
            <p>I wanted to be <i>a tree</i></p>
9
            <p>Until that is, <b>I learned..</b></p>
10
        </div>
11
        <div id="block2">
12
            <p><u>I already am one.</u></p>
13
        </div>
14
        <button onClick="change()">Change</button>
15
    </body>
16
</html>

Copy and paste the following code into the file script.js in the same directory.

1
"use strict";
2
function change() {
3
    let block = document.getElementById("block1");
4
    for (let x of block-elementsByName("p")) {
5
        for (let y of x.childNodes) {
6
            if(y.nodeType == 3) {
7
                console.log(y.nodeValue);
8
            }
9
        }
10
    }
11
}

Note the following:

The src attribute in the script tag in the above file, to store the script in a separate file from the web page. This is a standard technique when producing web applications.
The for...of syntax used for the for loop in the change() function. This is an abbreviated method to loop through an array. A traditional number-based for loop, ie for (let x = 0 ; x < block.childNodes.length; x++) would also work. Note that for...in does exist in JavaScript but has a different effect; be careful not to confuse the two.
console.log is a preferable way of printing debug information than document.write or window.alert, but the output only appears if the Web Developer console is open in the browser. However, it does have the benefit that objects that are printed to the console can be inspected properly instead of only appearing as placeholder strings.
Every element or node object has a nodeType property. If this is 3, the node holds text, and the text is gotten from the nodeValue property. Remember that in the DOM, text is a separate node from the element that contains the text.

INFO

关于 nodeType 的更多信息可参考：https://developer.mozilla.org/zh-CN/docs/Web/API/Node/nodeType

Load the HTML file above into Chrome, open the Web Developer console, and then click on the “change” button and look at the output.
Modify the loop above so that the outer loop only loops through b elements (while still looping through only those that are inside the div with id block1). The output should be “I learned…”

1
function change2(){
2
    let block = document.getElementById("block1");
3
    for(let x of block.getElementsByTagName("b")){
4
        for(let y of x.childNodes){
5
            if(y.nodeType == 3){
6
                console.log(y.nodeValue);
7
            }
8
        }
9
    }
10
}

Modify the loop again, in a similar way to question 2 so that the output becomes “a tree”.

1
function change3(){
2
    let block = document.getElementById("block1");
3
    for(let x of block.getElementsByTagName("i")){
4
        for(let y of x.childNodes){
5
            if(y.nodeType == 3){
6
                console.log(y.nodeValue);
7
            }
8
        }
9
    }
10
}

Without adding any IDs to the HTML file, modify the script so that the text a tree on the page turns green when the change button is clicked. (You can modify the CSS color of the element by changing its style.color property. This can be set to any string that would be valid in a CSS file - just the string green will work here. Note that the color is stored on the surrounding element, ie the i, not the text.)

1
function change4(){
2
    let block = document.getElementById("block1");
3
    let italic = block.getElementsByTagName("i");
4
    for (let item of italic){
5
        item.style.color = "green";
6
    }
7
}

Modify the program so that clicking “Change” turns all of the text green except “I already am one.” and the button. If you remember how CSS works, you should be able to eliminate the loop from the function!

1
function change5(){
2
    let text_to_green = document.getElementsByTagName("p");
3
    for (let item of text_to_green){
4
        if (item.textContent != "I already am one."){
5
            item.style.color = "green";
6
        }
7
    }
8
}

Cut and paste the following code into an .html file:

1
<html>
2
    <head>
3
        <title>JavaScript Example</title>
4
        <script src="script.js"></script>
5
    </head>
6
    <body>
7
        <table id="order">
8
            <tr>
9
                <th>Type</th><th>Price</th>
10
            </tr>
11
        </table>
12
        <button onClick="add('Burger',10)">Burger</button>
13
        <button onClick="add('Chips',5)">Chips</button>
14
        <button onClick="add('Salad',7)">Salad</button>
15
    </body>
16
</html>

And this into the file script.js:

1
"use strict";
2
function add(item, price) {
3
    let table = document.getElementByld("order");
4
    let newRow = document.createElement("tr");
5
    let newCell = document.createElement("td");
6
    letcellText = document.createElement(item);
7
    newCell.appendChild(cellText);
8
    newRow.appendChild(newCell);
9
    table.appendChild(newRow);
10
}

Load this page in Chrome. Click on each of the three buttons to see the effect they have on the page. It may also be a good idea to open the Web Developer sidebar and use the Inspector to see how the model of the page changes each time a button is clicked.
Add another button to the HTML page which adds a Milkshake which costs 2 pounds.

1
<button onclick="add('Milkshake',2)">Milkshake</button>

Modify the add function so that the price is properly added to the table as well as the HTML file and notice the structure that you use to do so: adding an item and price to the .html file and notice the structure that you use to do so.

1
function add(item, price){
2
  let table = document.getElementById("order");
3
  let newRow = document.createElement("tr");
4
  let newCell = document.createElement("td");
5
  let cellText = document.createTextNode(item);
6
  newCell.appendChild(cellText);
7
  newRow.appendChild(newCell);
8
  table.appendChild(newRow);
9

10
  // Create a new cell for the price and append it to the new row
11
  let priceCell = document.createElement("td");
12
  let priceText = document.createTextNode(price);
13
  priceCell.appendChild(priceText);
14
  newRow.appendChild(priceCell);
15
  table.appendChild(newRow);
16
}

Add the text: <input type="text" id="total" readonly></input> to the HTML to create a box in which to store the total.
Modify the add function so that it updates the total in the total input box whenever an item is added.

1
function add(item, price){
2
  let table = document.getElementById("order");
3
  let newRow = document.createElement("tr");
4
  let newCell = document.createElement("td");
5
  let cellText = document.createTextNode(item);
6
  newCell.appendChild(cellText);
7
  newRow.appendChild(newCell);
8
  table.appendChild(newRow);
9

10
  // Create a new cell for the price and append it to the new row
11
  let priceCell = document.createElement("td");
12
  let priceText = document.createTextNode(price);
13
  priceCell.appendChild(priceText);
14
  newRow.appendChild(priceCell);
15
  table.appendChild(newRow);
16

17
  // Update the total price, formatting it to 2 decimal places
18
  let total = document.getElementById("total");
19
  total.value = (parseFloat(total.value || 0) + price).toFixed(2);
20
}

Tips

You can read and write the contents of an input box by using its value property - eg, in this case, document.getElementByld("total").value.
You can calculate the total in three ways: keep a running total in a JavaScript global variable, read the prices out of the table and recalculate the total every time, or read the previous total from the input box. All of these are viable.
But if you decide to read the prices from the table or the total from the input box, note that they will be strings, and you will need to use parseInt() to turn them back into integers to add them properly.
Note that trying to convert an empty string to a number with parseInt will yield NaN, not 0. You will need to either allow for this possibility or make sure that the total field is initialized to 0.

Modify the add function so that if the item has already been ordered, an alert box (window.alert) appears and the item is not added again.

1
let orderdItems = [];
2
function add(item, price){
3
  if (orderdItems.includes(item)){
4
    alert("You have already ordered this item.");
5
    return;
6
  }
7

8
  let table = document.getElementById("order");
9
  let newRow = document.createElement("tr");
10
  let newCell = document.createElement("td");
11
  let cellText = document.createTextNode(item);
12
  newCell.appendChild(cellText);
13
  newRow.appendChild(newCell);
14
  table.appendChild(newRow);
15

16
  // Create a new cell for the price and append it to the new row
17
  let priceCell = document.createElement("td");
18
  let priceText = document.createTextNode(price);
19
  priceCell.appendChild(priceText);
20
  newRow.appendChild(priceCell);
21
  table.appendChild(newRow);
22

23
  // Update the total price, formatting it to 2 decimal places
24
  let total = document.getElementById("total");
25
  total.value = (parseFloat(total.value || 0) + price).toFixed(2);
26

27
  orderdItems.push(item);
28
}

Tip

You can either loop through the contents of the HTML table to check for an existing item, or you can create a global variable holding an array of items on the order and update it as well as the table when items are added. Either way is OK. Looping through the table makes the structure more awkward, but creating a separate array runs the risk of the web page and the array going out of sync.

Modify the table to add an additional column. The additional column should have a Delete button for each item on the order. Your JavaScript code that adds an item to the table will need to add the Delete button to each row as well. Do not attempt to make the button do anything, yet.
Add the following line to your code that creates the Delete button:

1
deleteButton.onc11ck = function() {
2
    del(newRow);
3
}

When you add an event handler to an element in JavaScript, although it is legal to use a string as you do in .html, it is a better idea to write an explicit function in this way. This also gives you an additional capability which is used here: newRow is a local variable in add , but if you use it in an event handler created within add , its value at the time you create the event handler is saved and remains stored within the event handler. This allows you to store the element object for the row to be deleted in the event handler to avoid searching for it when the actual deletion takes place. This is called a closure.

Write the del function in JavaScript to delete the row when the button is clicked. (Since the closure gives you a reference to the row to be deleted as a parameter to your del function, all you need to do is call remove() on it. Note that delete is a reserved word in JavaScript. Do not attempt to write a function called delete.)
Modify the del function to also subtract the price of the deleted item from the total. (You can obtain this from the row, or you can store it in the closure as well.)
Modify the program again to store a quantity for each item. It should increase by 1 if a duplicate order is made. Clicking the delete button should reduce the quantity by 1 if more than 1 is ordered, and remove the row only if the quantity is lowered to 0.

Hints

Remember that you are also in control of the HTML for the rows. If it’s becoming difficult to find data inside them, generate them with data- attributes or class attributes to help you find the data you need.
You can make the quantity field a regular text field if you want, but you could also place a randomly input element in it to make it easier to update.
You can’t update the values stored in closures.

1
let orderdItems = {};
2
function add(item, price){
3
  if (orderdItems[item]){
4
    orderdItems[item]++;
5
    let quantityCell = document.getElementById(item + "-quantity");
6
    quantityCell.textContent = orderdItems[item];
7
    let priceCell = document.getElementById(item + "-price");
8
    priceCell.textContent = (orderdItems[item] * price).toFixed(2);
9
  } else {
10
    let table = document.getElementById("order");
11
    let newRow = document.createElement("tr");
12
    let newCell = document.createElement("td");
13
    let cellText = document.createTextNode(item);
14
    newCell.id = item;
15
    newCell.appendChild(cellText);
16
    newRow.appendChild(newCell);
17
    table.appendChild(newRow);
18

19
    orderdItems[item] = 1;
20

21
    let quantityCell = document.createElement("td");
22
    quantityCell.id = item + "-quantity";
23
    quantityCell.textContent = "1";
24
    newRow.appendChild(quantityCell);
25
    table.appendChild(newRow);
26
    let priceCell = document.createElement("td");
27
    priceCell.id = item + "-price";
28
    priceCell.textContent = price.toFixed(2);
29
    newRow.appendChild(priceCell);
30
    table.appendChild(newRow);
31

32
    // Add a delete button to the new row
33
    let deleteCell = document.createElement("td");
34
    let deleteButton = document.createElement("button");
35
    deleteButton.textContent = "Delete one";
36
    deleteButton.onclick = function() {
37
      deleteOneItem(item, price);
38
    };
39
    let deleteAllButton = document.createElement("button");
40
    deleteAllButton.textContent = "Delete all";
41
    deleteAllButton.onclick = function() {
42
      deleteAllItems(item, price);
43
    };
44
    deleteCell.appendChild(deleteButton);
45
    deleteCell.appendChild(deleteAllButton);
46
    newRow.appendChild(deleteCell);
47
    table.appendChild(newRow);
48
  }
49
  // Update the total price, formatting it to 2 decimal places
50
  let total = document.getElementById("total");
51
  total.value = (parseFloat(total.value || 0) + price).toFixed(2);
52
}
53
function deleteOneItem(item, price) {
54
  let quantityCell = document.getElementById(item + "-quantity");
55
  if (!quantityCell) return;
56

57
  let qty = parseInt(quantityCell.textContent, 10);
58
  if (isNaN(qty) || qty <= 0) return;
59

60
  qty -= 1;
61

62
  if (qty > 0) {
63
    orderdItems[item] = qty;
64
    quantityCell.textContent = qty;
65
    let priceCell = document.getElementById(item + "-price");
66
    if (priceCell) {
67
      priceCell.textContent = (qty * price).toFixed(2);
68
    }
69
  } else {
70
    let row = quantityCell.parentNode;
71
    if (row && row.parentNode) {
72
      row.parentNode.removeChild(row);
73
    }
74
    delete orderdItems[item];
75
  }
76

77
  let total = document.getElementById("total");
78
  total.value = (parseFloat(total.value || 0) - price).toFixed(2);
79
}
80
function deleteAllItems(item, price){
81
  let table = document.getElementById("order");
82
  let targetItem = document.getElementById(item);
83
  if (targetItem && targetItem.parentNode && table) {
84
    table.removeChild(targetItem.parentNode);
85
  }
86
  let total = document.getElementById("total");
87
  let curQty = orderdItems[item] || 0;
88
  total.value = (parseFloat(total.value || 0) - curQty * price).toFixed(2);
89
  delete orderdItems[item];
90
}

音乐

音乐

Practical Session 4: DOM#

支持与分享

评论区

音乐

目录

音乐

音乐

Web Application Development Practical4: DOM

Practical Session 4: DOM#

支持与分享

评论区

音乐

目录