# JavaScript

Wisej.NET enables adding unlimited JavaScript code with direct widget references. Your JavaScript code can be in `.js` files, called from C#/VB.NET, or embedded in resource files.

## JavaScript in Wisej.NET

All controls written in C#/VB.NET on the server are created as pure JavaScript widgets on the client and registered in a new object model under `App`. See [JavaScript Object Model](https://docs.wisej.com/docs/concepts/javascript-object-model).

You can add JavaScript to a Wisej.NET application in several ways:

* **Script tag in Default.htm**

  You can add scripts in the application startup page (usually `Default.htm`). However, scripts in the `<head>` tag execute before the Wisej.NET library loads and initializes. Even scripts loaded on document ready are too early for application widgets. Therefore, JavaScript in `Default.htm` should only be used for non-Wisej.NET purposes.
* **Embedded resource**

  Create a `.js` file, set it to [EmbeddedResource](https://docs.wisej.com/docs/concepts/embedded-resources) under `/Resources` or `/Platform` and add `[assembly:WisejResources]` to `AssemblyInfo.cs`. Wisej.NET loads and invokes these JavaScript files in order with the framework library.

  While too early for application objects, this is ideal for installing additional widget classes or overriding existing ones. All Wisej.NET widgets use this technique.
* **JavaScript Extender Provider**

  Drop the `JavaScript Extender` on any top-level container (`Form`, `Page`, `Desktop` or User Control) to extend all controls with two properties: `JavaScript` and `JavaScriptSource`.

The `JavaScript` property accepts JavaScript code that runs in the control's context - `this` refers to the control's widget on the client. You can use widget methods, properties and address related widgets. This code runs last, after Wisej.NET renders and updates page widgets.

Use this extender to attach client events or modify widget behavior. The image below shows a button code snippet displaying a client-side alert:

![JavaScript Extender](https://553579532-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2F-MF1D11gPs_az3xaKusw%2Fuploads%2Fgit-blob-6918a2a4743d6c9ab3b32a254db6dd32c46f73f2%2Fimage.png?alt=media)

The [`JavaScriptSource`](https://docs.wisej.com/api/wisej.web/extenders/wisej.web.javascript#setjavascriptsource-control-file) property works similarly but accepts a `.js` file instead of inline code. This is useful for longer scripts and leverages Visual Studio's JavaScript editor.

* **Call or Eval from C#/VB.NET**

  Every Wisej.NET control and the `Application` class expose two client-side JavaScript execution methods: [`Call`](https://docs.wisej.com/api/wisej.web/general/control#call-function-args) and [`Eval`](https://docs.wisej.com/api/wisej.web/general/control#eval-javascript).

  `Call(name, args)` invokes functions on the target widget, while `Eval(script)` executes any script in the widget's context.

{% tabs %}
{% tab title="C#" %}

```csharp
void form1_OnLoad(EventArgs e)
{
  // move the window to 10,10.
  // there is no need to do this since you can simply set the Location property, but
  // it shows how to call a client side function from the server.

  this.Call("moveTo", 10, 10);
}
```

{% endtab %}

{% tab title="VB.NET" %}

```ruby
Private Sub Form1_Load(sender As Object, e As EventArgs) Handles MyBase.Load

  ' move the window to 10,10.
  ' there is no need to do this since you can simply set the Location property, but
  ' it shows how to call a client side function from the server.

  Me.Call("moveTo", 10, 10)
  
End Sub
```

{% endtab %}
{% endtabs %}

Note that `Call` method's first parameter is just the function name, while `Eval` expects a complete script:

{% tabs %}
{% tab title="C#" %}

```csharp
void form1_OnLoad(object sender, EventArgs e)
{
  // attach to the "move" event on the client side and
  // log the information to the console (use F12 to see the result)

  this.Eval(@"this.addListener('move', function(e) {
    console.log('Moved to ' + e.getData());
  }");
}
```

{% endtab %}

{% tab title="VB.NET" %}

```ruby
Private Sub Form1_Load(sender As Object, e As EventArgs) Handles MyBase.Load

  ' attach to the "move" event on the client side and
  ' log the information to the console (use F12 to see the result)
  
  Me.Eval( _
    "this.addListener('move', function(e) {" & _
      "console.log('Moved to ' + e.getData());" & _
    "}" _
  )
  
End Sub
```

{% endtab %}
{% endtabs %}
