# 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)
---
# Agent Instructions: Querying This Documentation
If you need additional information that is not directly available in this page, you can query the documentation dynamically by asking a question.
Perform an HTTP GET request on the current page URL with the `ask` query parameter:
```
GET https://docs.journeyapps.com/reference/get-started/journeyapps-fundamentals/journeyapps-syntax-basics.md?ask=
```
The question should be specific, self-contained, and written in natural language.
The response will contain a direct answer to the question and relevant excerpts and sources from the documentation.
Use this mechanism when the answer is not explicitly present in the current page, you need clarification or additional context, or you want to retrieve related documentation sections.