Display Username of Current Logged In User using Javascript Client Object Model in Sharepoint

Reference

http://sharepoint.stackexchange.com/questions/73032/get-current-user-in-client-object-model-with-javascript

Add a webpart page to sharepoint site

Add content editor webpart

Edit content editor webpart

Copy and paste the content mentioned below in HTML mode and save the webpat page

<script type="text/javascript">

ExecuteOrDelayUntilScriptLoaded(init,'sp.js');

var currentUser;
function init(){
    this.clientContext = new SP.ClientContext.get_current();
    this.oWeb = clientContext.get_web();
    currentUser = this.oWeb.get_currentUser();
    this.clientContext.load(currentUser);
    this.clientContext.executeQueryAsync(Function.createDelegate(this,this.onQuerySucceeded), Function.createDelegate(this,this.onQueryFailed));
}

function onQuerySucceeded() {
    document.getElementById('userLoginName').innerHTML = currentUser.get_loginName(); 
    document.getElementById('userId').innerHTML = currentUser.get_id();
    document.getElementById('userTitle').innerHTML = currentUser.get_title();
    document.getElementById('userEmail').innerHTML = currentUser.get_email();
}

function onQueryFailed(sender, args) {
    alert('Request failed. \nError: ' + args.get_message() + '\nStackTrace: ' + args.get_stackTrace());
}
</script>
<div>Current Logged User:
    <span id="userLoginName"></span>
    <span id="userId"></span>
    <span id="userTitle"></span>
    <span id="userEmail"></span>
</div>