jQuery

jQuery is the one of the important scripting language to make your web pages more interactive by changing them on the fly.

Its very essential to understand the basics right, so it will help you a lot  in SharePoint development.

While developing apps this is one of the major tool to develop SharePoint  Apps on SharePoint 2013. You can develop apps anywhere i.e. On either on-premises or the SharePoint online. 

In this post we will cover the basics of jQuery and what are the tools required to write the scripts and how this has been used in SharePoint hosted apps.

You will learn with the help of examples that we use in SharePoint development in this case SharePoint Apps development, so that it will easy when you come across those scripts that we use while developing an application. This approach makes learning of the concepts makes simple.

Any suggestions on this approach you can post in the comments section below.

Another main advantage of the this scripting language is to allow for easy selection of Document Object Model (DOM) elements and to perform operations on the collection of selected elements in  the HTML page. It's popular because it simplifies the process of selecting DOM elements.

Note: It is not only for SharePoint developers, if you are dot net developer it provides lots of opportunities to create more interactive web pages in web development. For that matter any web developer and designer.

What is DOM?

It is a standard defined by the World Wide Web Consortium (W3C) for web developers and designers to interact with web pages on any browser.

According to Wikipedia, it defined DOM as below.

"The Document Object Model (DOM) is a cross-platform and language-independent convention for representing and interacting with objects in HTML, XHTML and XML documents".

Development of apps in SharePoint has to be on client side so as a SharePoint developer it becomes very important and added advantage if you learn it.

What are the tools or software required to learn:

Below are the basic tools required to start learning it:

1. Text editor (note pad or notepad++) : To write the script.
2. Browser (internet explorer, Mozilla, Google Chrome etc.) : To test  what you have written.
3. jQuery library : which will reduce the code to be written to achieve the required functionality.
4. Web Server : If you are going for web development this is required. It can be on your local machine also.

If you have a machine, by default you will have a note pad (Text editor) and browser. The web server can be an IIS (Internet Information server).

From where do we get library?

You can go to www.jQuery.com , click on download and get the latest version either production or development.

Difference between Production and developer version:

• Production version improves the performance by deleting the unwanted spaces.
• Developer version is to explore more of what is inside the library.

Note: To Learn jQuery, you need to know HTML and CSS. But whenever it is required i will cover them.

What is all about  $ symbol ?

You will see the dollar $ symbol everywhere whenever you try to write scripts. $ Symbol is equivalent of jQuery, so instead writing each and every time jQuery in the script we can simply use $ symbol.

// $ symbol is equivalent of jQuery

jQuery () = $()

While writing the functions you can simply specify $ ().

What can be different parameters you can pass into the function.

• CSS selector.
• String of HTML.
• Or Javascript object.

JavaScript interpreter:

JavaScript interpreter applies changes to the DOM's representation of the page in the browser history. You will come to know to know how this behaves while working on scripts. Whenever the JavaScript interpreter see the code between the <script></script> tags, it will translate the directions you given in to the actions on the page

Selectors:

We have three types of selector.

In the examples we will use CSS selectors.

1. Elements Selector:

// Shows the all the P elemnts in the page

Example : $("p").show();

// P is a paragraph element in CSS

// CSS element selector:

P {

Text - color:#000000;

}

2. Class selectors:

// Slide up all the elements that are memebrs of CSS class class

Example : $(".class").Slideup();

.class is a class element in CSS

CSS Class selector:

.class{

display:block;

}

3. Id Selector :

// Adds text "hello" to the ID selector

Example : $("#message").text("Hello");

#message is a ID element in CSS

CSS ID selector:

#message{

color:#FF0000;

}

Examples:

You will learn the concepts using the code snippets that we come across in SharePoint Apps development.

Below is the code snippet you will get it under App.js file when you create SharePoint-Hosted app using visual studio 2012.

In the above code snippet we will look into 

$(document). ready ( function (){

});

In the above code selector is document which means DOM and Ready is a method.

Always remember the separator between the selector and method is dot.

JavaScript interpreter says to DOM, whenever you are Ready and loaded I want you to do some activity inside the function()).

DOM says to the JavaScript interpreter that whenever I am Ready I will execute the code inside the curly braces.

So whenever the DOM is loaded completely it will execute the below lines of code.

context = SP.ClientContext.get_current();

web = context.get_web();

getUserName();

Next one is   

$('#message').text('Hello ' + user.get_title());

In  the above code  we are adding text "Hello" to a #message selector.

Conclusion:

In this article we have seen what is jQuery and its advantages. What is a $ dollar symbol, JavaScript interpreter, Selectors. Seen one example App.js file in SharePoint hosted app project.

Hope this will start you to learn the concepts of beautiful scripting language.

- See more at: http://www.sharepoint-journey.com/jquery.html#sthash.f8Rl0goj.dpuf