What is Unobtrusive JavaScript ?

Unobtrusive is best practice of writing the JavaScript or JQuery in the decouple or separation format means -

When we write the JavaScript or JQuery - we usually followed the practice of writing the Presentation and behavior in one line only - which is not best practice e.g.

Unobtrusive means decouple or separation of presentation and behavior of object which help in cleaning and maintaining  the code and move out the entire behavior section in separate JS file. e.g.

What is Less.js ?

Less is amazing little tool and followed by reusable and dynamic approach.

Less is a CSS pre-processor, meaning that it extends the CSS language, adding features that allow variables, mixins, functions and many other techniques that allow you to make CSS that is more maintainable, themable and extendable.

Less.js has feature like :-

1.  Variables

2.  Operations

3. Mixims

We can download Less.js  from : http://lesscss.org/#download-options and Add as reference

Declare Variables:-

Deaclare Operation:-

It just like any programming language

@boxHeight:200px

@boxWidht: @boxHeight*2

Declare Mixins:-

Mixins allow you to embed all the properties of a class into another class by simply including the class name as one of its properties.

.RoundBorders {
  border-radius: 5px;
  -moz-border-radius: 5px;
  -webkit-border-radius: 5px;
}

Make it argument able:-

.RoundBorders (@radius) {
  border-radius: @radius;
  -moz-border-radius: @radius;
  -webkit-border-radius: @radius;
}

header {
  .RoundBorders(4px);
}

.button {
  .RoundBorders(6px);
}

What is JavaScript , JQuery and DOM ?

In very Short and Simplified manner:-

JavaScript is Language.

JQuery is Library or Framework or Reusable which is built on top of JavaScript.

Basically JQuery works with 3-S i.e. Start ($), Selector (“.” or “#”) and Shot (Action i.e. Click or Val etc.)

 DOM  (Document Object Model ) - It is representation of HTML document  or piece of Web Page or HTML Content exist in the Web page having tags like <Div>, <P>, <Span>, <UI>, <LI> etc..

DOM is like standard object which consist HTML elements properties, HTML elements methods, HTML elements events

DOM - In-Memory representation of HTML

High Level structure of DOM:

   

Add Print Button to List/Library form in SharePoint 2013 using jQuery

To Add the Print button, Open SharePoint list in browser, go to List Tab -> Customize List Tab -> Form Web Parts and then click on Default Display Form as shown in the fig below:

Then in this page, click on Add a Web Part 

and then from the web part Categories select Media and Content and then select Content Editor web part as shown in the fig below:

Then in the Content Editor web part click on Click here to add new content, then click on FORMAT TEXT -> Markup -> Edit Source as shown in the fig below:

Then in the HTML Souce, Add the below code as shown below:

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.5.2/jquery.min.js" type="text/javascript"></script><script>

$(document).ready(function() {

  $('.printList').click(function() { 

  window.print(); 

  return false; 

  });

});</script>

<style> 

.printList{ 

    color:#666666; 

    font-weight:bold; 

    cursor:pointer; 

}

.printList:hover{ 

color:#333333; 

font-weight:bold; 

cursor:pointer; 

}

</style>

<button class="printList">Print This Item</button>