# JourneyApps Syntax Basics
## XML
All Views and most of their [components](https://docs.journeyapps.com/reference/build/ui-components) are defined using XML syntax. It's possible to define queries directly from the View XML. [Format strings](https://docs.journeyapps.com/reference/app-features/xml-format-strings) can also be used in some components in the XML. In addition, the [Data Model](https://docs.journeyapps.com/reference/get-started/journeyapps-fundamentals/what-is-the-data-model) and [Sync Rules](https://docs.journeyapps.com/reference/build/data-model-configuration/data-rules/sync-rules-v2) are also defined using XML.
If you have never used XML before, you can find more information [here](http://www.xmlfiles.com/xml/).
## JavaScript/TypeScript
JavaScript or TypeScript is used to define the behavior and logic of apps built on JourneyApps. Each view has a corresponding JavaScript or TypeScript file, that is automatically executed when the view loads.
The following functionality is supported from the JavaScript/TypeScript in JourneyApps:
### Creating Variables
The JavaScript/TypeScript `init()` function is called when a view is loaded for the first time. This is typically used for initializing variables or queries.
Any variable or parameter defined in a view can be referenced by `view.variablename`.
Example View XML:
```xml
```
... and the JavaScript:
```javascript
function init() {
view.comments = "";
}
```
### Referencing Variables
A variable (or parameter) in a view can refer directly to a variable, a field of an object variable, and traverse through object relationships.
#### **Example**
Suppose we have a view defining the following variables:
```xml
```
Then the following variable references are all valid:
```javascript
counter
current_asset
current_asset.make
current_asset.category
current_asset.category.name
```
### Navigating to other views
To navigate to other views, you can use the `navigate` syntax.
You can define the logic for navigation from either the JS or the XML. There are also multiple `navigate` methods that you can use, depending on whether you'd like to add the new view to the view stack, or whether you'd like to dismiss back to a previous view or not. For a complete reference, please read [the reference documentation](https://docs.journeyapps.com/reference/get-started/journeyapps-fundamentals/view-navigation).
For example, if you have a view with path `user/new`, it can be called from JavaScript as follows:
```javascript
function goToNewUser() {
navigate.link("user/new");
}
```
If you wish to navigate directly from the XML (for example, by using a button), you can use the `$:` syntax to call the relevant `navigate` method directly (read more about `$:` functions [here](https://docs.journeyapps.com/reference/app-features/calling-js-functions-from-xml)).
```xml
```
If the view we are linking to requires any parameters, we can simply pass those parameters to the JavaScript function, for example:
```javascript
function goToNewUser() {
// The additional parameters to this function are passed to the 'user/new' view.
navigate.link("user/new", view.user_type);
}
```
Similarly from the XML:
```xml
```
### Calling Links with Branching Logic
Example View XML:
```xml
```
To do branching, we can simply use instead of an if statement in our JavaScript function:
```javascript
function proceed() {
if (view.age >= 18) {
navigate.link("adult_form");
} else {
navigate.link("child_form");
}
}
```
### Performing Calculations
An example for how calculations may be performed:
View XML:
```xml
BMI
```
View JavaScript:
```javascript
function calculate_bmi() {
var weight = view.weight;
var height = view.height;
if (weight > 0 && height > 0) {
var finalBmi = weight / (height / 100 * height / 100);
view.bmi = finalBmi;
if ( finalBmi < 18.5 ) {
view.description = "The patient is too thin.";
} else if ( finalBmi < 25 ) {
view.description = "The patient is healthy.";
} else {
view.description = "The patient is overweight.";
}
} else {
dialog("Incorrect inputs", "Please complete the fields correctly");
}
}
```
Note that the view is automatically refreshed with the new "bmi" and "description" values.
### Debugging
JourneyApps provides several ways to debug your app.
#### **console.logs**
For simple or repetitive debugging operations, you can display debugging messages on your app's console using the `console.log` function. See the next section for instructions to access the console.
```javascript
console.log("message");
```
These messages can be seen in the application [diagnostics](https://docs.journeyapps.com/reference/technical/device-diagnostics), under the *Logs* section, as well as the app's console. This latter option is more suitable for development purposes. See the next section for details.
#### Chrome Developer Console
An app's console is found within the "Console" tab of the Chrome Developer Console.
The Chrome Developer Console can be accessed when the *Debug* option is enabled in the JourneyApps container. This option is enabled for the Desktop container installed via the **Test App** flow in OXIDE, and is also enabled on [Web](https://docs.journeyapps.com/reference/technical/supported-platforms/web-container) (testing.onjourneyapps.com). The *Debug* option can be enabled for a custom-branded container in the [Platform section](https://docs.journeyapps.com/reference/oxide/create-and-manage-app-containers#platforms).
Opening the console differs per platform:
* On Desktop, right-click anywhere and select "Toggle DevTools".
* On Web, right-click and select "Inspect", and then navigate to the "Console" tab.
* Debugging on Android devices requires several steps, following the general Android debugging guidelines. On a high level:
* "[Developer options](https://developer.android.com/studio/debug/dev-options)" must be enabled on the device.
* The device must be connected to the [Android debug bridge](https://developer.android.com/tools/adb) or Android Studio on a Desktop computer (via USB or wirelessly).
* On the Desktop computer, in Chrome, the Android device should then be listed here:
* Select "inspect" to open the console.
#### **Debug console**
{% hint style="info" %}
**Version compatibility**
The debug console was introduced with version **4.75.0** of the JourneyApps Runtime.
{% endhint %}
For more advanced debugging use the debug console. Capabilities include accessing view variables from within the developer console, and exploring underlying components of your app such as the `DB` or `journey` namespaces.
It is available within the Chrome Developer Console described above. To activate the debug console, open the "Console" tab and change the console context to `JourneyScript.worker.js` in the available dropdown.
{% hint style="info" %}
* Enable **Verbose** log levels, and for best results, update the developer console settings to include time stamps.
* Since version **4.85.0** of the JourneyApps Runtime, more detailed performance profiling can be enabled in the debug console, see [`journey.profiling`](https://docs.journeyapps.com/reference/build/js-ts-apis/journey).
{% endhint %}
### Further JavaScript/TypeScript Functionality in JourneyApps
Working with Objects:
* [Querying the database](https://docs.journeyapps.com/reference/get-started/journeyapps-fundamentals/accessing-the-database/querying-db-objects)
* [Manipulating objects](https://docs.journeyapps.com/reference/get-started/journeyapps-fundamentals/accessing-the-database/manipulating-db-objects)
Other JavaScript/TypeScript Functionality:
* [Linking specific data to a user](https://docs.journeyapps.com/reference/build/js-ts-apis/user)
* [Opening External Links/Apps](https://docs.journeyapps.com/reference/build/integration/opening-external-links-apps)