SharePoint Client Object Model JavaScript

Advantage of SharePoint Client Object Model for JavaScript
Web page can interact with SharePoint without requiring a page refresh. In the background, the page uses JavaScript to communicate with SharePoint via the COM to retrieve or update data in SharePoint.
Accessing SharePoint
The first thing to note about the COM with JavaScript is that it is disconnected from SharePoint in the sense that in order to retrieve or update data in SharePoint, asynchronous calls to the server must be made. Because of its asynchronous nature, the page can continue to be responsive to the user while the data is being retrieved or updated in the background. This can be both an asset and a liability if not handled properly.
In order to access the COM in a webpage, a reference to the JavaScript file containing the COM code must be included. There are 3 JavaScript files which contain the code for the COM: SP.js, SP.Core.js, and SP.Runtime.js. SharePoint provides the SharePoint:ScriptLink server control tag for referencing JavaScript files. Using the ScriptLink control will:
assure that the JavaScript file is loaded only once
assure that dependency files are also loaded
In a SharePoint Application page, the ScriptLink tag should be declared within the PlaceHolderAdditionalPageHead Content Placeholder.

<asp:Content ID="PageHead" ContentPlaceHolderID="PlaceHolderAdditionalPageHead" runat="server" />
<SharePoint:ScriptLink Name="SP.js" LoadAfterUI="true" runat="server" />
</asp:Content>

sharepoint client object model javascript

sharepoint client object model javascript

Create a SharePoint page.

Add Content editor web part

Open notepad

Add below content

<script type="text/javascript" src="//ajax.aspnetcdn.com/ajax/4.0/1/MicrosoftAjax.js"></script>
<script type="text/javascript" src="jquery-1.9.1.js"></script>
<script type="text/javascript" src="_layouts/15/sp.runtime.js"></script>
<script type="text/javascript" src="_layouts/15/sp.js"></script>

<script type="text/javascript">

var siteUrl = 'http://sp2013/';

function Update() {
var ListName = "Mylist";
var context = new SP.ClientContext.get_current(); // the current context is taken by default here
//you can also create a particular site context as follows

var lstObject = context.get_web().get_lists().getByTitle(ListName);
this.lstObjectItem = lstObject.getItemById(1);
lstObjectItem.set_item('Title', 'This is updated item');
lstObjectItem.update();
lstObject.set_description("Updated description using ECMAScript");
lstObject.update();
context.executeQueryAsync(Function.createDelegate(this, this.onSuccess),
Function.createDelegate(this, this.onFailure));
}

function onSuccess() {
alert('Item udated');
}

function onFailure(sender, args) {
alert('Request failed. ' + args.get_message() + '\n' + args.get_stackTrace());
}

function Delete() {
var ListName = "Mylist";
var context = new SP.ClientContext.get_current(); // the current context is taken by default here
//you can also create a particular site context as follows
//var context = new SP.ClientContext('/Sites/site1');

var lstObject = context.get_web().get_lists().getByTitle(ListName);
this.lstObjectItem = lstObject.getItemById(3);
lstObjectItem.deleteObject();

context.executeQueryAsync(Function.createDelegate(this, this.onSuccessD),
Function.createDelegate(this, this.onFailureD));
}

function onSuccessD() {
alert('Item Deleted');
}

function onFailureD(sender, args) {
alert('Request failed. ' + args.get_message() + '\n' + args.get_stackTrace());
}

</script>
<input type="button" id="btnu" onclick="Update(); return false;" value = "Update Item" />

<input type="button" id="btnD" onclick="Delete(); return false;" value = "Delete Item" />
Upload in to SharePoint.

Copy the file location (URL)

Edit Content editor web part

Provide url which you get from above step in “Content Link” section.

Save.