# Getting Started with JavaScript in FA Model > **NOTE** > > For best possible results, use [DevEco Studio V3.0.0.993](https://developer.harmonyos.com/cn/develop/deveco-studio#download) for your development. ## Creating a JavaScript Project 1. If you are opening DevEco Studio for the first time, click **Create Project**. If a project is already open, choose **File** > **New** > **Create Project** from the menu bar. On the **OpenHarmony** tab of the **Choose Your Ability Template** page, select **Empty Ability** and click **Next**. ![01](figures/01.png) 2. In the project configuration page, set **Compile SDK** to **8** or **9** (in the latter case, you also need to set **Model** to **FA**) and **Language** to **JS** and retain the default values for other parameters. ![04](figures/04.png) > **NOTE** > > If you are using DevEco Studio V2.2 Beta1 or later, you can use the [low-code development](https://developer.harmonyos.com/en/docs/documentation/doc-guides/ohos-low-code-development-0000001218440652) mode apart from the traditional coding approach. > > On the low-code development pages, you can design your application UI in an efficient, intuitive manner, with a wide array of UI editing features. > > To use the low-code development mode, turn on **Enable Super Visual** on the page shown above. 3. Click **Finish**. DevEco Studio will automatically generate the sample code and resources that match your project type. Wait until the project is created. ## JavaScript Project Directory Structure - **entry**: OpenHarmony project module, which can be built into an OpenHarmony Ability Package ([HAP](../../glossary.md#hap)). - **src > main > js**: a collection of JavaScript source code. - **src > main > js > MainAbility**: entry to your application/service. - **src > main > js > MainAbility > i18n**: resources in different languages, for example, UI strings and image paths. - **src > main > js > MainAbility > pages**: pages contained in **MainAbility**. - **src > main > js > MainAbility > app.js**: ability lifecycle file. - **src > main > resources**: a collection of resource files used by your application/service, such as graphics, multimedia, character strings, and layout files. For details about resource files, see [Resource Limitations and Access](../ui/js-framework-resource-restriction.md). - **src > main > config.json**: module configuration file. This file describes the global configuration information of the application/service, the device-specific configuration information, and the configuration information of the HAP file. For details about the configuration file, see [Application Package Structure Configuration File (FA Model)](package-structure.md). - **build-profile.json5**: current module information and build configuration options, including **buildOption** and **targets**. - **hvigorfile.js**: module-level compilation and build task script. You can customize related tasks and code implementation. - **build-profile.json5**: application-level configuration information, including the signature and product configuration. - **hvigorfile.js**: application-level compilation and build task script. ## Building the First Page 1. Use the **\** component. After the project synchronization is complete, choose **entry** > **src** > **main** > **js** > **MainAbility** > **pages** > **index** in the **Project** window and open the **index.hml** file. You can see that the file contains a **** component. The sample code in the **index.hml** file is shown below: ```html
Hello World
``` 2. Add a button and bind the **onclick** method to this button. On the default page, add a **\