Two-way data binding with an input field in AngularJS

Two-way data binding is one of the important features of AngularJS. Two-way data binding makes sure that changes in the data model are automatically reflected in the corresponding elements in the view. It also automatically updates the data model when the user makes changes to the related view. <!DOCTYPE html> <html ng-app> <head> <meta charset="utf-8"> […]
Continue reading…

Enjoyed this post? Share it!

 
 

Convert JSON to JavaScript Objects

JSON is the representation of a JavaScript object in string form. We can use the JSON.parse(string) method to convert a string that is properly formatted with JSON into a JavaScript object. var team = ‘{"name":"RajTeam", "members":["Raj","Kamal"], \ "number":123, "location": "Bangalore"}’; var teamObj = JSON.parse(team); console.log(teamObj.name); console.log(teamObj.members); This is the output from the code above: RajTeam […]
Continue reading…

Enjoyed this post? Share it!

 
 

change text decoration css using jquery

<head> <script type="text/javascript" src="jquery-1.7.21.7.2.js"> </script> <script type="text/javascript"> /* <![CDATA[ */ $(document).ready(function(){ $("#mylink").mouseover(function(){ $(this).css("textDecoration", "underline"); }); $("#mylink").mouseout(function(){ $(this).css("textDecoration", "none"); }); }); /* ]]> */ </script> </head> <body> <p><a id="mylink" href="http://w3mentor.com" style="text-decoration: none"> w3mentor.com</a></p> </body>
Continue reading…

Enjoyed this post? Share it!

 
 

Create and display custom objects using JavaScript

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"> <html> <head> <title>JavaScript – Create and Display Object Types</title> </head> <script language="JavaScript">   // ************************************************************************ // CREATE AN AUTOMOBILE USING A CONSTRUCTOR // ************************************************************************ function Automobile(manufacturer, model, series) {     // ************************************************************************ // DEFINE AUTOMOBILE ATTRIBUTES // ************************************************************************ this.manufacturer= manufacturer; this.model = model; this.series = series;   […]
Continue reading…

Enjoyed this post? Share it!

 
 

Create a Monthly Auto Loan Payment Calculator in Javascript

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"> <html> <head> <title>JavaScript – Loan Calculator</title> </head>   <script language="JavaScript"> function calculateLoan() { nMon = document.form1.txtNumerOfMonths.value; iRate = document.form1.txtInterestRate.value; aFinanced = document.form1.txtAmountFinanced.value; mPayment = (iRate * aFinanced)/ nMon;   alert(’Your monthly payment would be $ ‘ + Math.round( mPayment ) );   }   </script>     </head> […]
Continue reading…

Enjoyed this post? Share it!

 
 

Illustrate how to manipulate JavaScript variables for web pages

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"> <html> <head> <title>JavaScript – Creating JavaScript variables for web pages 1</title> </head>   <script language="JavaScript">   // ************************************************************************ // DEFINE BEHAVIOR TO ACCESS ATTRIBUTES // ************************************************************************ function getFullName() { var firstName, lastName, fullName;   firstName = document.form1.txtFirstName.value; lastName = document.form1.txtLastName.value;   fullName = firstName + " " + […]
Continue reading…

Enjoyed this post? Share it!

 
 

Example of Encapsulation using JavaScript

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"> <html> <head> <title>JavaScript – Encapsulation Exercise</title> </head>   <body> <p> <script language="JavaScript" type="text/JavaScript">   // ************************************************************************ // CREATE AN AUTOMOBILE USING A CONSTRUCTOR // ************************************************************************ function Automobile(speed) {   // ************************************************************************ // PUBLIC PROPERTY — ANYONE MAY READ/WRITE // ************************************************************************ this.model = "Standard";   // ************************************************************************ // PRIVATE […]
Continue reading…

Enjoyed this post? Share it!

 
 

Example to illustrate Polymorphism using JavaScript

To illustrate Polymorphism using JavaScript we define a base object called Automobile with attributes and behaviors. Then we create sub object called Mercedes and Porshce to share the Automobiles attributes and behaviors. <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"> <html> <head> <title>JavaScript – Polymorphism Example</title> </head>   <body> <p> <script language="JavaScript" type="text/JavaScript">   function Automobile(speed) […]
Continue reading…

Enjoyed this post? Share it!

 
 

Example to illustrate Inheritance using JavaScript

In the example we define a base object called Car, and Create sub object called ferrari that inherits attributes from Car. <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"> <html> <head> <title>JavaScript – Inheritance Example</title> </head>   <body> <p> <script language="JavaScript" type="text/JavaScript">     // ************************************************************************ //Define a Car object // ************************************************************************ function Car() { //Add […]
Continue reading…

Enjoyed this post? Share it!

 
 

Example for changing line width of rectangle with Canvas

<!DOCTYPE html> <html> <head> <title>Example for changing line width of rectangle with Canvas</title> <meta charset="utf-8">   <script src="http://ajax.googleapis.com/ajax/libs/jquery/1/jquery.min.js"></script>   <script> $(document).ready(function() { var canvas = document.getElementById("myCanvas"); var ctx = canvas.getContext("2d"); ctx.lineWidth = 20; ctx.strokeStyle = "rgb(255, 0, 0)";//red ctx.strokeRect(50, 50, 100, 100); }); </script> </head>   <body> <canvas id="myCanvas" width="500" height="500"> <!– Insert fallback content […]
Continue reading…

Enjoyed this post? Share it!

 
 

Drawing color filled rectangle with Canvas Example

<!DOCTYPE html> <html> <head> <title>Drawing color filled rectangle with Canvas Example</title> <meta charset="utf-8">   <script src="http://ajax.googleapis.com/ajax/libs/jquery/1/jquery.min.js"></script>   <script> $(document).ready(function() { var canvas = document.getElementById("myCanvas"); var ctx = canvas.getContext("2d"); ctx.fillStyle = "rgb(255, 0, 0)"; //red ctx.fillRect(50, 50, 100, 100); }); </script> </head>   <body> <canvas id="myCanvas" width="500" height="500"> <!– Insert fallback content here –> </canvas> </body> […]
Continue reading…

Enjoyed this post? Share it!

 
 

Drawing filled paths with using Canvas

<!DOCTYPE html> <html> <head> <title>Drawing Paths with Canvas Example</title> <meta charset="utf-8">   <script src="http://ajax.googleapis.com/ajax/libs/jquery/1/jquery.min.js"></script>   <script> $(document).ready(function() { var canvas = document.getElementById("myCanvas"); var ctx = canvas.getContext("2d"); ctx.beginPath(); ctx.moveTo(50, 50); ctx.lineTo(50, 250); ctx.lineTo(250, 250); ctx.closePath(); ctx.fill(); }); </script> </head>   <body> <canvas id="myCanvas" width="500" height="500"> <!– Insert fallback content here –> </canvas> </body> </html>
Continue reading…

Enjoyed this post? Share it!

 
 

How to draw a rectangle with outline using Canvas

<!DOCTYPE html> <html> <head> <title>Canvas Example</title> <meta charset="utf-8">   <script src="http://ajax.googleapis.com/ajax/libs/jquery/1/jquery.min.js"></script>   <script> $(document).ready(function() { var canvas = document.getElementById("myCanvas"); var ctx = canvas.getContext("2d"); ctx.strokeRect(50, 50, 100, 100); }); </script> </head>   <body> <canvas id="myCanvas" width="500" height="500"> <!– Insert fallback content here –> </canvas> </body> </html>
Continue reading…

Enjoyed this post? Share it!

 
 

Draw a 2D filled rectangle using Canvas

<!DOCTYPE html> <html> <head> <title>Canvas from scratch</title> <meta charset="utf-8">   <script src="http://ajax.googleapis.com/ajax/libs/jquery/1/jquery.min.js"></script>   <script> $(document).ready(function() { var canvas = document.getElementById("myCanvas"); var ctx = canvas.getContext("2d"); ctx.fillRect(50, 50, 100, 100); }); </script>   </head>   <body> <canvas id="myCanvas" width="500" height="500"> </canvas> </body> </html>
Continue reading…

Enjoyed this post? Share it!

 
 

Example of jQuery.getScript() along with callback

The jQuery.getScript() function takes the URL of a file of JavaScript code as its first argument. It asynchronously loads and then executes that code. // Dynamically load a script from some other server jQuery. getScript("http://w3mentor.com/js/myscript.js"); // Load a library and use it once it loads jQuery.getScript("js/myscript.js", function() { $(’div’).myscript(); // Use the library we loaded […]
Continue reading…

Enjoyed this post? Share it!

 
 

Detect the browser version in Javascript

<HTML> <HEAD> <TITLE>Browser Detecti on</TITLE> </HEAD> <body> <SCRIPT LANGUAGE="JavaScript"> var browsername= navigator.appName var browserversion = navigator.appVersion if (browsername == "Microsoft Internet Explorer" ) { document. write(" You are using MS Internet Explorer version " + browserversion) } else { document. write(" You are using Netscape Navigator version " + browserversion) } </SCRIPT> </BODY> </HTML>
Continue reading…

Enjoyed this post? Share it!