The Qt 6 Book
Contribute!
Contribute!
  • Preface

    • Welcome!
    • Acknowledgements
    • Authors
  • Meet Qt

    • Qt and Qt Quick
    • Qt Building Blocks
    • Qt 6 Introduction
  • Getting Started

    • Quick Start
    • Installing Qt 6 SDK
    • Hello World
    • Application Types
    • Summary
  • Qt Creator IDE

    • Qt Creator IDE
    • The User Interface
    • Registering your Qt Kit
    • Managing Projects
    • Using the Editor
    • Locator
    • Debugging
    • Shortcuts
  • Quick Starter

    • Quick Starter
    • QML Syntax
    • Core Elements
    • Components
    • Simple Transformations
    • Positioning Elements
    • Layout Items
    • Input Elements
    • Advanced Techniques
  • Fluid Elements

    • Fluid Elements
    • Animations
    • States and Transitions
    • Advanced Techniques
  • QtQuick Controls

    • UI Controls
    • Introduction to Controls
    • An Image Viewer
    • Common Patterns
    • The Imagine Style
    • Summary
  • Model View

    • Model-View-Delegate
    • Concept
    • Basic Models
    • Dynamic Views
    • Delegate
    • Advanced Techniques
    • Summary
  • Canvas

    • Canvas Element
    • Convenience API
    • Gradients
    • Shadows
    • Images
    • Transformation
    • Composition Modes
    • Pixel Buffers
    • Canvas Paint
    • Porting from HTML5 Canvas
  • Shapes

    • Shapes
    • A Basic Shape
    • Building Paths
    • Filling Shapes
    • Animating Shapes
    • Summary
  • Effects

    • Effects in QML
    • Particle Concept
    • Simple Simulation
    • Particle Parameters
    • Directed Particles
    • Affecting Particles
    • Particle Groups
    • Particle Painters
    • Graphics Shaders
    • Shader Elements
    • Fragment Shaders
    • Wave Effect
    • Vertex Shader
    • Curtain Effect
    • Summary
  • Multimedia

    • Multimedia
    • Playing Media
    • Sound Effects
    • Video Streams
    • Capturing Images
    • Summary
  • Qt Quick 3D

    • Qt Quick 3D
    • The Basics
    • Working with Assets
    • Materials and Light
    • Animations
    • Mixing 2D and 3D Contents
    • Summary
  • Networking

    • Networking
    • Serving UI via HTTP
    • Templates
    • HTTP Requests
    • Local files
    • REST API
    • Authentication using OAuth
    • Web Sockets
    • Summary
  • Storage

    • Storage
    • Settings
    • Local Storage - SQL
  • Dynamic QML

    • Dynamic QML
    • Loading Components Dynamically
    • Creating and Destroying Objects
    • Tracking Dynamic Objects
    • Summary
  • Javascript

    • JavaScript
    • Browser/HTML vs Qt Quick/QML
    • JS Language
    • JS Objects
    • Creating a JS Console
  • Qt C++

    • Qt and C++
    • A Boilerplate Application
    • The QObject
    • Build Systems
    • Common Qt Classes
    • Models in C++
  • Extending QML

    • Extending QML with C++
    • Understanding the QML Run-time
    • Plugin Content
    • Creating the plugin
    • FileIO Implementation
    • Using FileIO
    • Summary
  • Qt for Python

    • Qt for Python
    • Introduction
    • Installing
    • Building an Application
    • Limitations
    • Summary
  • Qt for MCUs

    • Qt for MCUs
    • Setup
    • Hello World - for MCUs
    • Integrating with C++
    • Working with Models
    • Summary

JS Language

This chapter will not give you a general introduction to JavaScript. There are other books out there for a general introduction to JavaScript, please visit this great side on Mozilla Developer Network.

On the surface JavaScript is a very common language and does not differ a lot from other languages:

function countDown() {
  for(var i=0; i<10; i++) {
    console.log('index: ' + i)
  }
}

function countDown2() {
  var i=10;
  while( i>0 ) {
    i--;
  }
}

But be warned JS has function scope and not block scope as in C++ (see Functions and function scope).

The statements if ... else, break, continue also work as expected. The switch case can also compare other types and not just integer values:

function getAge(name) {
  // switch over a string
  switch(name) {
  case "father":
    return 58;
  case "mother":
    return 56;
  }
  return unknown;
}

JS knows several values which can be false, e.g. false, 0, "", undefined, null). For example, a function returns by default undefined. To test for false use the === identity operator. The == equality operator will do type conversion to test for equality. If possible use the faster and better === strict equality operator which will test for identity (see Comparison operators).

Under the hood, javascript has its own ways of doing things. For example arrays:

function doIt() {
  var a = [] // empty arrays
  a.push(10) // addend number on arrays
  a.push("Monkey") // append string on arrays
  console.log(a.length) // prints 2
  a[0] // returns 10
  a[1] // returns Monkey
  a[2] // returns undefined
  a[99] = "String" // a valid assignment
  console.log(a.length) // prints 100
  a[98] // contains the value undefined
}

Also for people coming from C++ or Java which are used to an OO language JS just works differently. JS is not purely an OO language it is a so-called prototype based language. Each object has a prototype object. An object is created based on his prototype object. Please read more about this in the book Javascript the Good Parts by Douglas Crockford.

To test some small JS snippets you can use the online JS Console or just build a little piece of QML code:

import QtQuick 2.5

Item {
  function runJS() {
    console.log("Your JS code goes here");
  }
  Component.onCompleted: {
    runJS();
  }
}
Help us improve this page!
Last Updated: 11/26/25, 7:55 PM
Contributors: Fabrice SALVAIRE
Prev
Browser/HTML vs Qt Quick/QML
Next
JS Objects