TechHeap: Javascript

Showing posts with label Javascript. Show all posts

November 28, 2016

Example of using Models in Backbone JS

Models are data container where we can also add logics to data like validations, conversions or any specific computation if requires.

In this post we will understand how can we create our own Model Class and then create methods under it with data variables to contain the data.

Example:

Books Model Class

 var bookModel = Backback.Model.extend({});

The above code will create a plain Model class of object bookModel. Now lets create some variables and set values into that.

 bookModel.set({bookName: "BackBone", noOfPages: 80});

the above line will create 2 variables under bookModel Model Object.

To create a function under it, we can do while creating the Model class. For example:

 var bookModel = Backback.Model.extend({  
      publishBookPrice : function (){  
           alert("the price of this book is 200 INR");  
      }  
 });

November 26, 2016

Backbone JS Event ON example

ON Event

Syntax: object.on(event, callback, [context])
It will bind a callback function to an object. The callback will be invoked whenever the event is fired or triggered. We can bind single or multiple events in the same object to get it triggered.

Example with single event:

 <!DOCTYPE html>  
   <head>  
    <title>Event On Example</title>  
      <script src="jquery-3.1.1.min.js" type="text/javascript"></script>  
      <script src="underscore-min.js" type="text/javascript"></script>  
      <script src="backbone-min.js" type="text/javascript"></script>  
   </head>  
   <body>  
    <script type="text/javascript">  
         //Here creating an object 'myVal' and extending with Backbone.Events method  
      var myVal = _.extend({name:'Hello World'}, Backbone.Events);  
      // The on() method will bind callback function to an object and invoked whenever an event triggers  
      myVal.on('myFunc', function () {  
       alert(this.name);  
      });  
      //It triggers the 'myFunc' event on object 'myVal'  
      myVal.trigger('myFunc');  
    </script>  
   </body>  
 </html>

Example with multiple event:

 <!DOCTYPE html>  
   <head>  
    <title>Event On Example</title>  
      <script src="jquery-3.1.1.min.js" type="text/javascript"></script>  
      <script src="underscore-min.js" type="text/javascript"></script>  
      <script src="backbone-min.js" type="text/javascript"></script>  
   </head>  
   <body>  
    <script type="text/javascript">  
      //Here creating an object 'myVal' and extending with Backbone.Events method  
      var myVal = _.extend({name:'Hello World'}, Backbone.Events);  
      // The on() method will bind callback function to an object and invoked whenever an event triggers  
      myVal.on('change hide', function (message) {  
       alert(this.name + message);  
      });  
      //It triggers the 'change' event on object 'myVal'  
      myVal.trigger('change', ' with change trigger');  
      //triggers the 'hide' event on object 'myVal'  
      myVal.trigger('hide', ' with hide trigger');  
    </script>              
   </body>  
 </html>

March 01, 2016

How to Debug JavaScript code/functions of an application using breakpoint on browser

We can debug javascript functions/scripts of an application when running it on any browser like Internet Explorer, Mozilla, Chrome etc. Browsers provides the facility to enable user to use breakpoints and start debugging the JavaScript. We can use breakpoints from where we want to inspect the code flow and results.

This debugging helps developers to understand the flow and errors if any. Following are the steps to do it.

Press F12 (Developer Mode), after running the page of your application. You will see below screen (IE11 Developer Tool):

Click on Debugger Tab, you will see HTML and JS list associated to the HTML Page. To debug any javascript function, we need to add a breakpoint as shown below (red circle in left):

When you refresh the page or trigger the action, the browser will pause the code at this breakpoint, using above icons you can execute each code and check the issues or values at run time.

September 26, 2011

Manage Browser History in javascript using YUI utility

Using YUI utility one can manage browser history. It is supported in maximum browsers except Opera.

According to YUI, it states that we can register new entries or we can say custom entries into browser history, for that user have to first register (YAHOO.util.History.register method) with browser history using YUI then can add dynamic entries into the history.

The Browser History Manager only provides a way of storing/retrieving the history of states visited by an application. It is up to the implementer to name and handle each state appropriately.

Through this way, we can decide which page should be come when we click on back browser button.

Please refer the following link to use the same.

September 18, 2011

Scrolling Status Bar using Javascript

Displays a scrolling Text in the browser status window

September 16, 2011

Simplest way to disable Alt-Left key event to stop browser back event

There is a very simple way to disable Alt-Left Key event which is used to stop back browser event.
Download this file "shortcut.js" from this link and include it into the page.

Now just right below code to stop or control this event:

shortcut.add("Alt+left",function() {
callFunc();
});

function callFunc()
{
return false;
}

It will disable the key event on browser and will stop back event.

How to Disable or Hide Back Browser Button using JavaScript

How to Disable or Hide Back Browser Button using JavaScript:
I have found lot of queries on internet about how to disable back browser button.

After lots of search, I came to a conclusion that back browser button cannot be disabled, however we can tweak it according to our requirement. So, the main work is how to tweak it to fulfill our requirement. For this, first we need to identify the need and scenario of disable back button.

First Scenario:

Need to disable back button so that user cannot go back and forth through browser back button or only use back buttons created in application.

Solution:
Solution for above solution is to use a JavaScript function called window.open().

Let us first understand the definition and usage of above function:
Syntax:
window.open(URL,name,specs,replace)

Use:
The open() method opens in new browser window.

How to enable scripting in your browser

To allow all Web sites in the Internet zone to run scripts, use the steps that apply to your browser:

Windows Internet Explorer

(all versions excluding Pocket Internet Explorer)
Note To allow scripting on perticular Web site only, and to leave scripting disabled in the Internet zone, add that Web site to the Trusted sites zone.

On the Tools menu, click Internet Options, and then click the Security tab.
Click the Internet zone.
If you do not have to customize your Internet security settings, click Default Level. Then do step 4

If you have to customize your Internet security settings, follow these steps: a. Click Custom Level. b. In the Security Settings – Internet Zone dialog box, click Enable for Active Scripting in the Scripting section.

Click the Back button to return to the previous page, and then click the Refresh button to run scripts.

Mozilla Corporation’s Firefox version 2

On the Tools menu, click Options.
On the Content tab, click to select the Enable JavaScript check box.
Click the Go back one page button to return to the previous page, and then click the Reload current page button to run scripts.

Opera Software’s Opera version 9

On the Tools menu, click Preferences.
On the Advanced tab, click Content.
Click to select the Enable JavaScript check box, and then click OK.
Click the Back button to return to the previous page, and then click the Reload button to run scripts.

Netscape browsers

Select Edit, Preferences,Advanced
Click to select Enable JavaScript option.

August 17, 2011

Disable backspace keyboard event for browser back button only

The following is the code to disable backspace keyboard event for browser back button only. Code works fine for IE, FF, Chrome

jQuery(document).unbind('keypress'); //for other
jQuery(document).unbind('keydown'); // for IE
jQuery(document).keypress(function (e) {
	//alert(e.target.nodeName.toUpperCase());
    if ( e.target.nodeName.toUpperCase() != 'INPUT' && 
			e.target.nodeName.toUpperCase() != 'TEXTAREA') {			
			  var code = (e.keyCode ? e.keyCode : e.which);							
			  if ( code == 8 ) return false;
	 }		
});

jQuery(document).keydown(function (e) {
	//alert(e.target.nodeName.toUpperCase());
	if ( e.target.nodeName.toUpperCase() != 'INPUT' && 
			e.target.nodeName.toUpperCase() != 'TEXTAREA') {			
				var code = (e.keyCode ? e.keyCode : e.which);							
				if ( code == 8 ) return false;
	}		
});

How to disable right click on browser page using javascript

document.oncontextmenu=new Function("return false;");

Pages