1# JavaScript
2
3
4You 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.
5
6
7## Syntax
8
9The ECMAScript 6.0 syntax is supported. Lite wearables only support the following ECMAScript 6.0 syntax:
10
111. let/const
12
132. arrow functions
14
153. class
16
174. default value
18
195. destructuring assignment
20
216. destructuring binding pattern
22
237. enhanced object initializer
24
258. for-of
26
279. rest parameter
28
2910. template strings
30
31- Module declaration
32
33  Import functionality modules.
34
35
36  ```
37  import router from '@ohos.router';
38  ```
39
40- Code reference
41
42  Import JavaScript code.
43
44
45  ```
46  import utils from '../../common/utils.js';
47  ```
48
49
50## Objects
51
52- Page objects
53    | Attribute   | Type             | Description                                      |
54    | ----- | --------------- | ---------------------------------------- |
55    | 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**).<br>|
56    | $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).|
57
58
59## Obtaining a DOM Element
60
61Use **$refs** to obtain a DOM element.
62
63```html
64<!-- index.hml -->
65<div class="container">
66  <image-animator class="image-player" ref="animator" images="{{images}}" duration="1s" onclick="handleClick"></image-animator>
67</div>
68```
69
70
71   ```js
72   // index.js
73   export default {
74     data: {
75       images: [
76         { src: '/common/frame1.png' },
77         { src: '/common/frame2.png' },
78         { src: '/common/frame3.png' },
79       ],
80     },
81     handleClick() {
82       const animator = this.$refs.animator; // Obtain the DOM element whose $refs attribute is animator.
83       const state = animator.getState();
84       if (state === 'paused') {
85         animator.resume();
86       } else if (state === 'stopped') {
87         animator.start();
88       } else {
89         animator.pause();
90       }
91     },
92   };
93   ```
94