---
title: "Introduction to Essential JavaScript"
published_at: "2013-07-29T15:16:00+00:00"
modified_at: "2020-08-17T12:18:06+00:00"
url: "https://www.syncfusion.com/blogs/post/introduction-to-essential-javascript"
excerpt: "Bharath M Essential Studio® for JavaScript provides a rich set of controls; all of which have been developed using the jQuery plug-in style, so the controls maintain jQuery-like chaining on every action. For starters, let’s talk about the basics before..."
taxonomy_category:
  - "Development"
  - "HTML"
  - "JavaScript"
  - "Web"
---

# Introduction to Essential JavaScript

[Syncfusion Guest Blogger](https://www.syncfusion.com/blogs/author/syncfusion-guest-blogger)

![Image](https://www.syncfusion.com/blogs/wp-content/uploads/2018/08/js_intro_8868b8f9.png)


Bharath M

Essential Studio® for JavaScript provides a rich set of controls; all of which have been developed using the jQuery plug-in style, so the controls maintain jQuery-like chaining on every action.

For starters, let’s talk about the basics before getting into how to use any of our JavaScript controls. Here’s a list of what I’m going to discuss:

1. Default templates
2. Control creation
3. Getting and setting properties
4. Invoking functions
5. Wiring events

Let me start by providing a sample of how to use a default template.

### Default Template

This is the default template for Essential Studio® for JavaScript. The style sheet is set at the top. Flat Azure is the default theme.

```
    <title>Getting Started Essential JS</title>
    <!-- Style sheet for default theme (Flat Azure) -->
    <link href="http://cdn.syncfusion.com/js/web/flat-azure/ej.web.all-latest.min.css" rel="stylesheet" />
    <!--Scripts-->
    <script src="http://code.jquery.com/jquery-1.10.1.min.js"></script>
    <script src="http://borismoore.github.io/jsrender/jsrender.min.js"></script>
    <script src="http://ajax.aspnetcdn.com/ajax/globalize/0.1.1/globalize.js"></script>
    <script src="http://cdnjs.cloudflare.com/ajax/libs/jquery-easing/1.3/jquery.easing.min.js"></script>
    <script src="http://cdn.syncfusion.com/js/ej.widgets.all-latest.min.js"></script>

	

      
```

### Control creation

Controls can be created using following syntax in JavaScript:

```
$("jquery-selector").(); 
```

This creates a control with the default settings. Here’s an example:

```
$("#date-input").ejDatePicker(); 
```

To create a control with an option specified by you, use this syntax:

```
$("jquery-selector").(options); 
```

**options**: <Object Literal>

Here’s an example:

```
$("#date-input").ejDatePicker({
;
           persist: true
       });
```

### Getting or setting properties

Properties are important to define a control’s behavior. They have been enabled in every control with an option to access or change their values dynamically. This is the syntax to get or set property values:

**Getting properties**

```
$("jquery-selector").("model.propertyName")
-Or-
$("jquery-selector").("option", "propertyName"); 
```

This returns the value of the property with **propertyName**. Here’s an example using the second syntax:

```
$("#date-input").ejDatePicker("option", "date");
```

**Setting properties**

```
$("jquery-selector").("model.propertyName", "value");
-Or-
$("jquery-selector").("option", "propertyName", "value");
-Or-
$("jquery-selector").({"propertyName": "value"}); 
```

This sets the value of a property according to the value give to **propertyName**. Here’s an example:

```
$("#date-input").ejDatePicker("option", "date", new Date());
```

### Invoking Functions

Functions can be invoked the same way a property is accessed. Here’s the syntax for invoking functions:

```
$("jquery-selector").("functionName"); 
```

This calls the function with no parameter and returns **returnValue** if the function returns anything, or it will maintain the jQuery chain. Here’s an example:

```
$("#date-input").ejDatePicker("open");
```

The following syntax calls the function with parameter values **“param1”** and **“param2”**, and then it returns ** returnValue** if the function returns anything, or it will maintain the jQuery chain.

```
$("jquery-selector").("functionName", "param1", "param2"); 
```

Here’s an example of this:

```
$("#date-input").ejDatePicker("option", "cssClass", "custom");
```

### Wiring events

It is important to get a notification for an event whenever changes or actions happen in a control. Events can be wired the same way as jQuery events are bound. The syntax for this follows:

```
$("jquery-selector").("model.eventName", );
-Or-
$("jquery-selector").on("ej-plugin-nameeventName”, ); 
```

This binds the event’s “eventName” to the control. Here are examples of both types of syntax:

```
$("#date-input").ejDatePicker("model.destroy", function(){
       // event handler
       });

$("#date-input").on("ejDatePickerdestroy", function(){
       // event handler
       }); 
```

### Dependencies

Essential Studio® for JavaScript has dependencies on the following libraries:

· **jQuery**: 1.7.1 and above.

· **JsRender**: For templates.

· **jQuery Easing**: For animation.

· **jQuery Globalize**: For globalization.

You need to add references to all these script files in your projects.

### Syncfusion’s content delivery network

Essential Studio® for JavaScript libraries and themes are hosted on a content delivery network (CDN) server and are ready for use. Please refer to the following tables:

**Script**

| Name | CDN Link |
| --- | --- |
| ej.widgets.all | http://cdn.syncfusion.com/11.2/js/ej.widgets.all.min.js |

**Themes**

Essential Studio® for JavaScript supports 12 themes. They are listed in the following table with their CDN links.

| Skin | CDN Link |
| --- | --- |
| Flat Azure (default theme) | http://cdn.syncfusion.com/11.2/js/flat-azure/ej.widgets.all.min.css |
| Flat Azure Dark | http://cdn.syncfusion.com/11.2/js/flat-azure-dark/ej.widgets.all.min.css |
| Flat Lime | http://cdn.syncfusion.com/11.2/js/flat-lime/ej.widgets.all.min.css |
| Flat Lime Dark | http://cdn.syncfusion.com/11.2/js/flat-lime-dark/ej.widgets.all.min.css |
| Flat Saffron | http://cdn.syncfusion.com/11.2/js/flat-saffron/ej.widgets.all.min.css |
| Flat Saffron Dark | http://cdn.syncfusion.com/11.2/js/flat-saffron-dark/ej.widgets.all.min.css |
| Gradient Azure | http://cdn.syncfusion.com/11.2/js/gradient-azure/ej.widgets.all.min.css |
| Gradient Azure Dark | http://cdn.syncfusion.com/11.2/js/gradient-azure-dark/ej.widgets.all.min.css |
| Gradient Lime | http://cdn.syncfusion.com/11.2/js/gradient-lime/ej.widgets.all.min.css |
| Gradient Lime Dark | http://cdn.syncfusion.com/11.2/js/gradient-lime-dark/ej.widgets.all.min.css |
| Gradient Saffron | http://cdn.syncfusion.com/11.2/js/gradient-saffron/ej.widgets.all.min.css |
| Gradient Saffron Dark | http://cdn.syncfusion.com/11.2/js/gradient-saffron-dark/ej.widgets.all.min.css |

Now you should be able to easily integrate Essential Studio® for JavaScript into a new or existing application since it follows the same usage patterns as JQuery. We will post a blog on how to get started using the framework controls shortly.

For those who haven’t tried Essential Studio® for JavaScript, simply check out the following links for more details:

List of controls: [https://www.syncfusion.com/javascript-ui-controls](https://www.syncfusion.com/javascript-ui-controls)

Online demo: [http://js.syncfusion.com](https://js.syncfusion.com/demos/web/)

Essential Studio® for JavaScript download: [https://www.syncfusion.com/downloads/javascript](https://www.syncfusion.com/downloads/javascript)