Javascript

JavaScript: parseInt() Function

Posted on Updated on

  • The parseInt() function parses a string and returns an integer.

Syntax: parseInt(string, radix)

String is required and radix is optional.

  • The radix parameter is used to specify which numeral system to be used, for example, a radix of 16 (hexadecimal) indicates that the number in the string should be parsed from a hexadecimal number to a decimal number.If the radix parameter is omitted, JavaScript assumes the following:
    • If the string begins with “0x”, the radix is 16 (hexadecimal)
    • If the string begins with “0”, the radix is 8 (octal). This feature is deprecated
    • If the string begins with any other value, the radix is 10 (decimal)
    • Only the first number in the string is returned!
    • Leading and trailing spaces are allowed.
    • If the first character cannot be converted to a number, parseInt() returns NaN.

     

Example:

var a = parseInt(“10”) + “<br>”;—-10
var b = parseInt(“10.00”) + “<br>”;—-10
var c = parseInt(“10.33”) + “<br>”;—-10
var d = parseInt(“34 45 66”) + “<br>”;—34
var e = parseInt(” 60 “) + “<br>”;—–60
var f = parseInt(“40 years”) + “<br>”;—-40
var g = parseInt(“He was 40”) + “<br>”;—NaN

var h = parseInt(“10”, 10)+ “<br>”;—-10
var i = parseInt(“010”)+ “<br>”;—–10
var j = parseInt(“10”, 8)+ “<br>”;—-8
var k = parseInt(“0x10”)+ “<br>”;—-16
var l = parseInt(“10”, 16)+ “<br>”;—–16

Advertisements

Javascript : Parsing URL Query Params

Posted on Updated on

Parsing the URL query string in plain Javascript , code snippet below :

function getUrlVars() {

var vars = [], hash;

var hashes = window.location.href.slice(window.location.href.indexOf(‘?’) +
1).split(‘&’);

        for(var i = 0;  i < hashes.length;  i++){

hash = hashes[i].split(‘=’);

hash = hashes[i].split(‘=’);

vars.push(hash[0]); vars[hash[0]] = hash[1];

}

      return vars;

}

JQuery : DataGrid with AJAX response using jeasyui API

Posted on Updated on

API Documentation :  https://www.jeasyui.com/documentation/index.php

<link rel=”stylesheet” type=”text/css” href=”themes/bootstrap/easyui.css”>

<link rel=”stylesheet” type=”text/css” href=”themes/icon.css”>

http://jquery.min.js

http://jquery.easyui.min.js http://datagrid-detailview.js

 

$(function(){$(function(){

$(‘#tt’).datagrid({

title:’Search Results :’,

width:1000,

height:400,

style:’margin-left:500px;margin-top:200px;’,

remoteSort:false,

singleSelect:true,

nowrap:false,

fitColumns:true,

loadMsg:’Please wait loading….’,

pagination:true,

url:”,//REST Service

columns:[[

{field:’uniqueid’,title:’Unique Id’,align:’center’,width:50},

{field:’filename’,title:’File Name’,width:120,align:’center’,sortable:true}, {field:’version’,title:’Version’,width:80,align:’center’,sortable:true}, {field:’softwaretype’,title:’Software Type’,width:80,align:’center’,sortable:true,formatter:formatsoftwaretype}, {field:’operatingsystem’,title:’Operating System’,width:80,align:’center’,sortable:true,formatter:formatostype}, {field:’productname’,title:’Product Name’,width:80,align:’center’,sortable:true}, {field:’entitled’,title:’Entitled?’,width:40,align:’center’,sortable:true}, {field:’accountnumber’,title:’Account Num’,width:60,align:’center’}, {field:’publishdate’,title:’Publish Date’,width:60,align:’center’}, {field:’downloadurl’,title:’Download’,width:70,align:’center’

} });

 });

HTML Code :

<body><body> <table id=”tt” ></table></body>

AngularJS : $scope and $rootScope

Posted on

$scope is an object that is accessible from current component e.g Controller, Service only. $rootScope refers to an object which is accessible from everywhere of the application we can say it is a global scope of variable.

You can think $rootScope as global variable and $scope as local variables.

blog

How to send AJAX request in EXT JS framework

Posted on

  • You can use Ext.Ajax to communicate with server-side code or service in the same domain. Ext.Ajax is a singleton instance of Ext.data.Connection which is main class to setup a connection.

Consider the following example of Ajax request:

        Ext.Ajax.request({
            url: '/api/students',
            method: 'GET',
            timeout: 60000,
            params:
            {
                id: 1 // loads student whose Id is 1
            },
            headers:
            {
                'Content-Type': 'application/json'
            },
            success: function (response) {
            
            },
            failure: function (response) {
                Ext.Msg.alert('Status', 'Request Failed.');

            }
        });
  • In the above example, we send HTTP GET request to REST api url http://localhost/api/students endpoint using Ext.Ajax.request() method.
  • The url config specifies the endpoint.
  • The method config specifies the HTTP method. It can be GET, POST, PUT, DELETE or other valid HTTP method.
  • The params config specifies the parameter that should go along with HTTP request.
  • The success and failure config is used to specify callback function which will be executed if request executed successfuly or failed.

How to form Grid component in EXTJS

Posted on

GRID:

  • This component is simple component to display data which is a collection of record stored in Ext.data.Store in the tabular format.

Syntax:

Ext.create(‘Ext.grid.Panel’,{
grid properties..
columns : [Columns]
});

Let us understand with an example

<!DOCTYPE html>
<html>
<head>
   <link href="https://cdnjs.cloudflare.com/ajax/libs/extjs/6.0.0/classic/theme-classic/resources/theme-classic-all.css" rel="stylesheet" />
    type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/extjs/6.0.0/ext-all.js">
    type="text/javascript">
      // Creation of data model
      Ext.define('StudentDataModel', {
         extend: 'Ext.data.Model',
         fields: [
         {name: 'name', mapping : 'name'},
         {name: 'age', mapping : 'age'},
         {name: 'marks', mapping : 'marks'}
         ]
      });

      Ext.onReady(function(){
         // Store data
         var myData = [
            { name : "Asha", age : "16", marks : "90" },
            { name : "Vinit", age : "18", marks : "95" },
            { name : "Anand", age : "20", marks : "68" },
            { name : "Niharika", age : "21", marks : "86" },
            { name : "Manali", age : "22", marks : "57" }
         ];
         // Creation of first grid store
         var gridStore = Ext.create('Ext.data.Store', {
         model: 'StudentDataModel',
         data: myData
         });
         // Creation of first grid
         Ext.create('Ext.grid.Panel', {
            id                : 'gridId',
            store             : gridStore,
            stripeRows        : true,
            title             : 'Students Grid', // Title for the grid
            renderTo          :'gridDiv', // Div id where the grid has to be rendered
            width             : 600,
            collapsible       : true, // property to collapse grid
            enableColumnMove  :true, // property which alllows column to move to different position by dragging that column.
            enableColumnResize:true, // property which allows to resize column run time.
            columns           :
               [{ 
                  header: "Student Name",
                  dataIndex: 'name',	
                  id : 'name',    
                  flex:  1,  		 // property defines the amount of space this column is going to take in the grid container with respect to all.	
                  sortable: true, // property to sort grid column data. 
                  hideable: true  // property which allows column to be hidden run time on user request.
               },{
                  header: "Age", 
                  dataIndex: 'age',
                  flex: .5, 
                  sortable: true,
                   hideable: false // this column will not be available to be hidden.
               },{
                  header: "Marks",
                  dataIndex: 'marks',
                  flex: .5, 
                  sortable: true, 
                  // renderer is used to manipulate data based on some conditions here who ever has marks greater than 75 will be displayed as 'Distinction' else 'Non Distinction'.
                  renderer :  function (value, metadata, record, rowIndex, colIndex, store) {
                     if (value > 75) {
                        return "Distinction";	  
                     } else {
                        return "Non Distinction";
                     }
                  }
            }]
         });
      });
   
</head>
<body>
   
id = "gridDiv">
</body> </html>

 

  • Ext.grid.Panel is simply a component that displays data contained in
    a Ext.data.Store. Ext.data.Store can be thought of as a collection
    of records, or Ext.data.Model instances.
  • The benefit of this setup is separating our concerns. Ext.grid.Panel is only concerned with displaying the data, while Ext.data.Store takes care of fetching and saving the data using Ext.data.proxy.Proxy.
  • First, we need to define a Ext.data.Model. A model is just a collection of fields that represents a type of data.
  • We just created an Ext.grid.Panel that renders itself to the body element. We also told the Grid panel to get its data from the userStore that we previously created.
  •  

    Finally, we defined the Grid panel’s columns and gave them a dataIndex property. This dataIndex associates a field from our model to a column.

  • Similarly there are various properties that you can define to your grid,many are used in above example with comment lines describing them.




Javascript : Difference between == and ===

Posted on

JavaScript has both strict and type-converting equality comparison.

  • Two strings are strictly equal when they have the same sequence of characters, same length, and same characters in corresponding positions.
  • Two numbers are strictly equal when they are numerically equal (have the same number value). NaN is not equal to anything, including NaN. Positive and negative zeros are equal to one another.
  • Two Boolean operands are strictly equal if both are true or both are false.
  • Two objects are strictly equal if they refer to the same Object.

 

Lets take an example – 

if(0 == false ) {

console.log(“inside if”);

}

Here the type conversion happens first and then comparison is done , Hence the condition is true and inside if will be printed on the browser console .

Now ,

if(0 === false ) {

console.log(“inside if”);

}

Here type conversion does not happen , Hence the if condition is false , thread will not go inside if condition .

 

Other Examples in same way –

1 == “1” // true, automatic type conversion for value only
1 === “1” // false, because they are of a different type
null == undefined // true
null === undefined // false