SharePoint 2010 - Javascript Client Object Model

The following working example uses Javascript, JQuery, and CAML.

 http://msdn.microsoft.com/en-us/library/jj245759.aspx
 http://www.sharepointnutsandbolts.com/2010/10/sp2010-ajaxpart-2-using-javascript.html

======================================================

<div style="padding: 20px;">
<hr />
<h3>
Calculate Total Subs Reserved for a Single Day (Pending/Approved)</h3>
<table border="0" cellpadding="0" cellspacing="4">
  <tbody>
<tr>
    <td height="55"><input class="input-small search-query" id="targetDay" maxlength="10" name="targetDay" placeholder="YYYY-MM-DD" style="font-size: 150%;" type="text" /></td>
    <td width="80"><button class="btn btn-primary" id="btnGo" type="button">GO</button></td>
    <td width="200"><div id="totalSubsResults" style="color: red; font-weight: bold;">
</div>
</td>
  </tr>
</tbody></table>
<hr />
</div>
<script type="text/javascript">
    var allDocs;
    var GUIDSubStartDate = "_a3909a47_509a_47e3_a9e7_2e149c274379";
    var GUIDSubEndDate = "_fa7b1c2e_5d62_4edc_a3bd_aa41c9da2003";
    var GUIDSubNumber = "_c0232d29_8c9c_4c08_bf02_3ade22e7d14f";


    $('#btnGo').click(function () {
        SP.SOD.executeFunc('sp.js', 'SP.ClientContext', sharePointReady);
    });
    
    
      function sharePointReady() {
        //var currentDay = '2013-10-23'
        var currentDay = $('#targetDay').val();
        
        //var ctx = new SP.ClientContext.get_current();
        var ctx = new SP.ClientContext;
        var targetList = ctx.get_web().get_lists().getByTitle('PDR');
        
        //var query = SP.CamlQuery.createAllItemsQuery();
        //allDocs = targetList.getItems(query);
        //ctx.load(allDocs);
        
        var query = new SP.CamlQuery();
        query.set_viewXml("<view><query><where><and><neq><fieldref Name='ApprovalStatus' /><value Type='Choice'>REJECTED</Value></Neq><and><leq><fieldref Name='" + GUIDSubStartDate + "' /><value IncludeTimeValue='FALSE' Type='DateTime'>" + currentDay + "</Value></Leq><geq><fieldref Name='" + GUIDSubEndDate + "' /><value IncludeTimeValue='FALSE' Type='DateTime'>" + currentDay + "</Value></Geq></And></And></Where></Query></View>");

        allDocs = targetList.getItems(query);
        ctx.load(allDocs);
        ctx.executeQueryAsync(Function.createDelegate(this, getDocsAllItemsSuccess),  Function.createDelegate(this, getDocsAllItemsFailure));
    }


    function getDocsAllItemsSuccess(sender, args) {
        var totalSubsNumber = 0;
        var listEnumerator = allDocs.getEnumerator();
        // Loop Over Records ------------
        while (listEnumerator.moveNext()) {
            var mySubsNumber = listEnumerator.get_current().get_item(GUIDSubNumber);
            //$('#detailsSubResults').append(mySubsNumber + '<br />');
            totalSubsNumber += mySubsNumber;
        }
        // Output Total ------------------
        //alert(totalSubsNumber);
        
        $("#totalSubsResults").fadeOut(500, function() {
            $(this).html("<table cellpadding=3 cellspacing=0 border=0 align=right>
<tr><td><span style=font-size:350%>"+totalSubsNumber+"</span></td><td><span style=font-size:125%>SUBS<br/>RESERVED</span></td></tr>
</table>
");
            $(this).fadeIn(500);
        });
        
    }

    function getDocsAllItemsFailure(sender, args) {
        alert('Failed to get list items. \nError: ' + args.get_message() + '\nStackTrace: ' + args.get_stackTrace());
    }
    
</script>