**Course Title:** QML Application Development **Section Title:** JavaScript in QML **Topic:** Data manipulation and event handling **Overview** In this topic, we will delve into the world of data manipulation and event handling in QML using JavaScript. We will explore the various ways to work with data, handle user interactions, and create dynamic behavior in your QML applications. By the end of this topic, you will have a solid understanding of how to manipulate data and handle events in QML. **Understanding Data Manipulation in QML** In QML, data manipulation refers to the process of creating, modifying, and deleting data in your application. This data can be stored in various forms, such as JSON objects, arrays, and lists. QML provides several ways to manipulate data, including: * **JavaScript Arrays**: QML supports JavaScript arrays, which can be used to store and manipulate data. [More information on JavaScript arrays](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Array) * **QML List Models**: QML list models provide a way to store and manipulate data in a list format. [More information on QML list models](https://doc.qt.io/qt-5/qml-models.html) * **JSON Objects**: QML supports JSON objects, which can be used to store and manipulate data in a JSON format. [More information on JSON objects in QML](https://doc.qt.io/qt-5/qml-data-types.html#json-object) **Example: Manipulating Data with JavaScript Arrays** ```qml import QtQuick 2.15 Item { property var names: ["Alice", "Bob", "Charlie"] Component.onCompleted: { names.push("David") // Add a new name to the array console.log(names) // Output: ["Alice", "Bob", "Charlie", "David"] } } ``` **Understanding Event Handling in QML** In QML, event handling refers to the process of handling user interactions, such as mouse clicks, keyboard input, and touch events. QML provides several ways to handle events, including: * **Signal Handlers**: QML provides signal handlers, which can be used to handle events. [More information on signal handlers in QML](https://doc.qt.io/qt-5/qml-signals.html) * **JavaScript Functions**: QML supports JavaScript functions, which can be used to handle events. [More information on JavaScript functions in QML](https://doc.qt.io/qt-5/qml-data-types.html#javascript-function) * **Mouse and Touch Events**: QML provides mouse and touch events, which can be used to handle user interactions. [More information on mouse and touch events in QML](https://doc.qt.io/qt-5/qml- mouseevents.html) **Example: Handling Mouse Events with Signal Handlers** ```qml import QtQuick 2.15 Item { Rectangle { width: 100 height: 100 color: "red" MouseArea { anchors.fill: parent onClicked: { parent.color = "blue" // Change the color of the rectangle on click } } } } ``` **Key Concepts and Takeaways** * Data manipulation in QML can be done using JavaScript arrays, QML list models, and JSON objects. * Event handling in QML can be done using signal handlers, JavaScript functions, and mouse and touch events. * Use JavaScript arrays to store and manipulate data in your QML application. * Use signal handlers to handle user interactions in your QML application. **Practical Exercise** 1. Create a new QML project in Qt Creator. 2. Create a list of names using a JavaScript array. 3. Display the list of names in a QML ListView. 4. Add a button to add a new name to the list. 5. Handle the button click event using a signal handler. **Leave a comment or ask for help** If you have any questions or need help with the practical exercise, please leave a comment below. In the next topic, we will learn about integrating JavaScript with QML components.

import QtQuick 2.15

Item {
    property var names: ["Alice", "Bob", "Charlie"]

    Component.onCompleted: {
        names.push("David")  // Add a new name to the array
        console.log(names)  // Output: ["Alice", "Bob", "Charlie", "David"]
    }
}

import QtQuick 2.15

Item {
    Rectangle {
        width: 100
        height: 100
        color: "red"

        MouseArea {
            anchors.fill: parent

            onClicked: {
                parent.color = "blue"  // Change the color of the rectangle on click
            }
        }
    }
}