# JavaScript
You can use a **.js** file in the ECMAScript compliant JavaScript language to define the service logic of an HML page. With dynamic typing, JavaScript can make your application more expressive with a flexible design. The following describes the JavaScript compilation and running.
## Syntax
The ECMAScript 6.0 syntax is supported. Lite wearables only support the following ECMAScript 6.0 syntax:
1. let/const
2. arrow functions
3. class
4. default value
5. destructuring assignment
6. destructuring binding pattern
7. enhanced object initializer
8. for-of
9. rest parameter
10. template strings
- Module declaration
Import functionality modules.
```
import router from '@system.router';
```
- Code reference
Import JavaScript code.
```
import utils from '../../common/utils.js';
```
## Objects
- Page objects
| Attribute | Type | Description |
| ----- | --------------- | ---------------------------------------- |
| data | Object/Function | Data model of the page. If the attribute is of the function type, the return value must be of the object type. The name cannot start with a dollar sign ($) or underscore (_). Do not use reserved words (**for**, **if**, **show**, and **tid**).
|
| $refs | Object | DOM elements or child component instances that have registered the **ref** attribute. For an example, see [Obtaining a DOM Element](#obtaining-a-dom-element). |
## Obtaining a DOM Element
Use **$refs** to obtain a DOM element.
```html
```
```js
// index.js
export default {
data: {
images: [
{ src: '/common/frame1.png' },
{ src: '/common/frame2.png' },
{ src: '/common/frame3.png' },
],
},
handleClick() {
const animator = this.$refs.animator; // Obtain the DOM element whose $refs attribute is animator.
const state = animator.getState();
if (state === 'paused') {
animator.resume();
} else if (state === 'stopped') {
animator.start();
} else {
animator.pause();
}
},
};
```
## Lifecycle APIs
- Page lifecycle APIs
| Name | Type | Parameter | Return Value | Description | Triggered When |
| --------- | -------- | ---- | ---- | ------ | ------------------- |
| onInit | Function | N/A | N/A | Listens for page initialization. | Page initialization is complete. This API is called only once in the page lifecycle.|
| onReady | Function | N/A | N/A | Listens for page creation.| A page is created. This API is called only once in the page lifecycle. |
| onShow | Function | N/A | N/A | Listens for page display. | The page is displayed. |
| onHide | Function | N/A | N/A | Listens for page disappearance. | The page disappears. |
| onDestroy | Function | N/A | N/A | Listens for page destruction. | The page is destroyed. |
The lifecycle APIs of page A are called in the following sequence:
- Open page A: onInit() -> onReady() -> onShow()
- Open page B on page A: onHide() -> onDestroy()
- Go back to page A from page B: onInit() -> onReady() -> onShow()
- Exit page A: onHide() -> onDestroy()
- Hide page A: onHide()
- Show background page A on the foreground: onShow()
- Application lifecycle APIs
| Name | Type | Parameter | Return Value | Description | Triggered When |
| --------- | -------- | ---- | ---- | ---- | --------- |
| onCreate | Function | N/A | N/A | Listens for application creation.| The application is created.|
| onDestroy | Function | N/A | N/A | Listens for application exit.| The application exits.|