Tuesday, January 30, 2018

Write a program for adding a controller in angularJS.

  • Add a controller to your application, and refer to the controller with the ng-controller directive:

Program
<!DOCTYPE html>
<html>
<head>
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.6.4/angular.min.js">
</script>
</head>
<body>
<div ng-app="abc" ng-controller="def">
<input ng-model="name">
</div>
<script>
var app=angular.module('abc',[]);
app.controller('def' , function($scope)
{
$scope.name="Rushi Dave";
});
</script>
</body>
</html>

Output


Write a program for a background color in angularJS.

Change the color of the input box by changing its value:

Program
<html>
<head>
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.6.4/angular.min.js">
</script>
</head>
<body>
<div ng-app="" ng-init="myCol='Red'">
<input style="background-color:{{myCol}}" ng-model="myCol" value="{{myCol}}">
</div>
</body>
</html>

Output


write a program for AngularJS Applications

  • AngularJS modules define AngularJS applications.
  • AngularJS controllers control AngularJS applications.
  • The ng-app directive defines the application, the ng-controller directive defines the controller.


Program
<!DOCTYPE html>
<html>
<head>
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.6.4/angular.min.js">
</script>
</head>
<body>
<div ng-app="abc" ng-controller="def">
First Name: <input type="text" ng-model="firstname"><br>
Last Name:  <input type="text" ng-model="lastname"><br>
<br>
Full Name:{{firstname + " "+lastname}}
</div>

<script >
var app=angular.module('abc',[]);
app.controller('def',function($scope)
{
$scope.firstname ="RUSHI";
$scope.lastname="DAVE";

});
</script>
</body>
</html>

Output


write a program for initializes AngularJS application variables.

  • AngularJS directives are HTML attributes with an ng prefix.
  • The ng-init directive initializes AngularJS application variables.


Program
<!DOCTYPE html>
<html>
<head>
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.6.4/angular.min.js">
</script>
</head>
<body>
<div ng-app="" ng-init="firstname='RUSHI'">
<p>the name is <span ng-bind="firstname"></span>
</p>
</div>
</body>
</html>

Output


write a program for angularJS extends HTML.

  1. The ng-app directive defines an AngularJS application.
  2. The ng-model directive binds the value of HTML controls (input, select, textarea) to application data.
  3. The ng-bind directive binds application data to the HTML view.


Program

<!DOCTYPE html>
<html>

<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.6.4/angular.min.js">
</script>


<body>
<div ng-app="">

<p> input some text</p>
<p> Name: <input type="text" ng-model="name"></p>
<p ng-bind="name"></p>
</div>
</body>
</html>

Output





Friday, January 26, 2018

write a program for AJAX response in javascript.

  • The readyState property holds the status of the XMLHttpRequest.
  • The onreadystatechange property defines a function to be executed when the readyState changes.
Program

<html>
<body>

<p id="demo"></p>
<h2>The XMLHttpRequest Object</h2>
<button type="button" onclick="loadDoc()">Change Content</button>


<script>
function loadDoc() 
{
  var xhttp = new XMLHttpRequest();
  xhttp.onreadystatechange = function() 
  {
    if (this.readyState == 4 && this.status == 200) {
      document.getElementById("demo").innerHTML =this.responseText;
       
    }
  };
  xhttp.open("GET", "ajres.html", true);
  xhttp.send();
}
</script>

</body>
</html>

Output



write a program for AJAX request in javascript.


  • To send a request to a server, we use the open() and send() methods of the XMLHttpRequest object


Program
<html>
<body>

<div id="demo">
<h2>Ajax </h2>
<button type="button" onclick="loadDoc()">Change Content</button>
</div>

<script>
function loadDoc() {
  var xhttp = new XMLHttpRequest();
  xhttp.onreadystatechange = function() {
    if (this.readyState == 4 && this.status == 200) {
      document.getElementById("demo").innerHTML =this.responseText;
    }
  };
  xhttp.open("GET", "history.html", true);
  xhttp.send();
}
</script>

</body>
</html>

Output



Write a program for set and stop timing in javascript.

  • The window.setTimeout() method can be written without the window prefix.
  • The first parameter is a function to be executed.
  • The window.clearTimeout() method can be written without the window prefix.
  • The clearTimeout() method uses the variable returned from setTimeout():

Program
<html>
<head>
<script type="text/javascript">
function abc(){
alert("hello");
}
</script>
</head>
<body>
<h1> hello</h1>
<p><b>Click "Submit". Wait 2 seconds. The page will alert "hello".</b></p>
<p><b>Click "Stop" to prevent the first function to execute.</b></p>
<p><b>(You must click "Stop" before the 2 seconds are up.)</b></p>
<button onclick ="Var=setTimeout(abc,2000);"> Submit</button>
<button onclick="clearTimeout(Var);"> Stop</button>
</body>
</html>

Output



Write a program for promtbox in javascript

  • A prompt box is often used if you want the user to input a value before entering a page.
  • When a prompt box pops up, the user will have to click either "OK" or "Cancel" to proceed after entering an input value.


Program
<html>
<head></head>
<body>
<h1 > Javascript</h1>
<button onclick="myFunction()"> Try It</button>
<p id="demo"></p>
<script type="text/javascript">

function myFunction()
{
   var txt;
   var person = prompt("Please enter your name:", "Harry Potter");
   if (person == null || person == "") {
       txt = "User cancelled the prompt.";
   } else {
       txt = "Hello " + person + "! How are you today?";
   }
   document.getElementById("demo").innerHTML = txt;
}
</script>
</body>
</html>

Output