Web Application Development Practical9: jQuery

Copy and paste the following code into an HTML ﬁle. This is an alternative version of the exercise from practical 4, but written in the jQuery style rather than using the plain DOM. It uses the downloaded version of jQuery.

1
<html>
2
    <head>
3
        <script src="jquery-3.7.1.js"></script>
4
        <script>
5
            "use strict";
6

7
            function add(item, price) {
8
                let new_block=$("<tr><td>"+item+"</td><td>"+price+"</td></tr>"); new_block.css("color","red");
9

10
                $("#order tr").css("color","black");
11
                $("#order").append(new_block);
12

13
                let old_total = $("#total").val();
14
                let new_total;
15
                if (old_total == "") {
16
                    new_total = price;
17
                } else {
18
                    new_total = parseInt(old_total) + price;
19
                }
20
                $("#total").val(new_total);
21
            }
22

23
            function setup() {
24
                $("button.item").click(e => { add($(e.target).attr("data-item"),
25
                parseInt($(e.target).attr("data-price"))); });
26
            }
27

28
            $(setup);
29
        </script>
30
    </head>
31

32
    <body>
33
        <table id="order">
34
            <tr>
35
                <th>Item</th><th>Price</th>
36
            </tr>
37
        </table>
38

39
        <p>
40
            Total: <input id="total" type="text" id="total" readonly></input>
41
        </p>
42

43
        <button class="item" data-item="Burger" data-price="10">Burger</button>
44
        <button class="item" data-item="Chips" data-price="5">Chips</button>
45
        <button class="item" data-item="Salad" data-price="7">Salad</button>
46
    </body>
47
</html>

Run this script in your browser, and read through it to understand how it works. (The abbreviated code style of jQuery may be difficult to understand at first.)
Add a fourth button to add a Milkshake to the order which costs 2 pounds. Note how the setup() method now makes this easier than it previously was.

1
<button class="item" data-item="Milkshake" data-price="2">Milkshake</button>

Modify the script so that newly added items fade in instead of just appearing.
- You will need to make new_block be initially hidden. (jQuery will do nothing if asked to fade in an item that is already visible.) You can do this by calling the jQuery hide() method on it before adding it to the document. Do not do it by setting visibility: hidden in CSS, as jQuery does not update this.
- Remember to use fadeIn only after the new line is added to the table. It must already be added to the DOM before it can be animated.

1
// Hide the new block before adding it to the page, then fade it in after it's added.
2
new_block.hide();
3

4
$("#order tr").css("color","black");
5
$("#order").append(new_block);
6

7
// Fade in the new block after it's been added to the page.
8
new_block.fadeIn();

Modify the script to add a delete button to each row, as you did in the previous practical, but using the jQuery methods to add the button and event handler. You can still use a value closure in the same way you did without jQuery. Remember to reduce the total and to use the jQuery method to remove the row from the table.
- If you specify the delete button in HTML, as in the code above, then you may need to use the find method on new_block to get a jQuery reference to it.
- To read the price back from the table when deleting an item, you could mark the cells holding prices with a class, or use the CSS selector :nth-of-type(2) which selects the 2nd (or 3rd, 1st, 4th, etc…) item of a given type in a container. As before, remember that delete is a reserved word in JavaScript. Do not try to write a function called delete.

1
function add(item, price) {
2
    let new_block = $("<tr></tr>");
3
    let item_cell = $("<td></td>").text(item);
4
    let price_cell = $("<td></td>").text(price);
5
    let delete_cell = $("<td></td>");
6
    let delete_button = $("<button class='delete'>Delete</button>");
7
    delete_button.click(e => {
8
        let old_total = parseInt($("#total").val());
9
        let new_total = old_total - price;
10
        $("#total").val(new_total);
11

12
        // Prevent the user from clicking Delete rapidly while the fade-out animation is still running.
13
        delete_button.prop("disabled", true);
14

15
        // Fade out the row (use the new_block variable) before removing it from the page.
16
        new_block.fadeOut(400, () => {
17
          new_block.remove();
18
        });
19
    });
20
    // Append the <td> cells into the <tr>
21
    new_block.append(item_cell);
22
    new_block.append(price_cell);
23
    new_block.append(delete_cell);
24
    delete_cell.append(delete_button);
25
    new_block.css("color", "red");
26
    // Hide the new block before adding it to the page, then fade it in after it's added.
27
    new_block.hide();
28

29
    $("#order tr").css("color","black");
30
    $("#order").append(new_block);
31

32
    // Fade in the new block after it's been added to the page.
33
    new_block.fadeIn();
34

35
    let old_total = $("#total").val();
36
    let new_total;
37
    if (old_total == "") {
38
      new_total = price;
39
    } else {
40
      new_total = parseInt(old_total) + price;
41
    }
42
    $("#total").val(new_total);
43
}

Modify the script so that rows fade out when they are deleted. Note that you must allow the fade to complete before calling remove() or detach() on the row. To do this, you will need to use the completion function parameter to fadeOut().
Copy and paste the following code which implements the same functionality but uses the vue.js reactive framework. (Vue.js is used only because it does not require a compiler to be installed separately.)

1
<html>
2
    <head>
3
        <script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
4
        <script src="jquery-3.7.1.js"></script>
5
        <script>
6
        "use strict";
7

8
        function setup() {
9
            var app = new Vue({
10
                el: '#app', data: {
11
                    order: [],
12
                    total: 0,
13
                    menu: [{name: "Burger", price: 10},
14
                    {name: "Chips", price: 5},
15
                    {name: "Salad", price: 7}]
16
                },
17
                methods: {
18
                    add: function(event) {
19
                        let name = $(event.target).attr("data-name");
20
                        let price = $(event.target).attr("data-price");
21
                        this.total += parseInt(price);
22
                        this.order.push({name: name, price: price});
23
                    }
24
                }
25
            });
26
        }
27

28
        $(setup);
29
        </script>
30
    </head>
31

32
    <body>
33
        <div id="app">
34
            <table id="order">
35
                <tr><th>Item</th><th>Price</th>
36
                <tr v-for="item in order">
37
                <td>{{ item.name }}</td><td>{{ item.price }}</td>
38
                </tr>
39
            </table>
40
            <div>
41
            Total: <input type="text" v-model="total" readonly></input>
42
            </div>
43
            <span v-for="item in menu">
44
                <button v-bind:data-name="item.name"
45
                        v-bind:data-price="item.price"
46
                        v-on:click="add">{{ item.name }}</button>
47
            </span>
48
        </div>
49
    </body>
50
</html>

Run this code and read and understand it. It will probably be helpful to refer to the vue.js documentation at https://vuejs.org/v2/guide/index.html .
Modify this page to add the Milkshake item and to support the delete functionality, as in the previous exercise. You do not need to make the items animate as they are added or deleted.

1
function setup() {
2
    var app = new Vue({
3
        el: '#app', data: {
4
            order: [],
5
            total: 0,
6
            menu: [{name: "Burger", price: 10},
7
            {name: "Chips", price: 5},
8
            {name: "Salad", price: 7},
9
            {name: "Milkshake", price: 2}]
10
        },
11
        methods: {
12
            add: function(event) {
13
                let name = $(event.target).attr("data-name");
14
                let price = parseInt($(event.target).attr("data-price"), 10);
15
                this.total += price;
16
                this.order.push({name: name, price: price});
17
            },
18
            remove: function(index) {
19
                let item = this.order[index];
20
                if (!item) return;
21
                this.total -= item.price;
22
                this.order.splice(index, 1);
23
            }
24
        }
25
    });
26
}

1
<body>
2
    <div id="app">
3
        <table id="order">
4
            <tr>
5
                <th>Item</th>
6
                <th>Price</th>
7
                <th>Action</th>
8
            </tr>
9
            <tr v-for="(item, index) in order" :key="index">
10
                <td>{{ item.name }}</td>
11
                <td>{{ item.price }}</td>
12
                <td><button @click="remove(index)">Delete</button></td>
13
            </tr>
14
        </table>
15
        <div>
16
        Total: <input type="text" v-model="total" readonly></input>
17
        </div>
18
        <span v-for="item in menu">
19
            <button v-bind:data-name="item.name"
20
                    v-bind:data-price="item.price"
21
                    v-on:click="add">{{ item.name }}</button>
22
        </span>
23
    </div>
24
</body>

音乐

音乐

支持与分享

评论区

音乐

文章目录