Showing posts with label JavaScript. Show all posts
Showing posts with label JavaScript. Show all posts

Tuesday, January 30, 2018

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


Write a program for confirm box in javascript.

A confirm box is often used if you want the user to verify or accept something.
When a confirm box pops up, the user will have to click either "OK" or "Cancel" to proceed.

Program
<html>
<head></head>
<body>
<h1 > Javascript</h1>
<button onclick="abc()"> submit</button>
<p id="demo"></p>
<script type="text/javascript">
function abc(){
var text;
if (confirm("press button")) {
text="you passsed OK";
console.log("" + text);
}
else
{
text="You Passed cancel";
console.log("" + text);
}
document.getElementById('demo').innerHTml="text";
}

</script>
</body>
</html>

Output



Write a program for window navigator in javascript.



Program
<html>
<body>
<h2>The Navigator Object</h2>
<p id="demo"></p>
<p id="demo1"></p>
<p id="demo2"></p>
<p id="demo3"></p>
<p id="demo4"></p>
<p id="demo5"></p>
<p id="demo6"></p>
<p id="demo7"></p>
<p id="demo8"></p>
<script>
document.getElementById("demo").innerHTML ="navigator.cookieEnabled = " + navigator.cookieEnabled;
document.getElementById("demo1").innerHTML = "navigator.appName = " + navigator.appName;
document.getElementById("demo").innerHTML = "navigator.appCodeName = " + navigator.appCodeName;
document.getElementById("demo2").innerHTML ="navigator.product = " + navigator.product;
document.getElementById("demo3").innerHTML = "navigator.App version = " +  navigator.appVersion;
document.getElementById("demo4").innerHTML ="navigator.userAgent = " +  navigator.userAgent;
document.getElementById("demo5").innerHTML = "navigator.platform = " + navigator.platform;
document.getElementById("demo6").innerHTML ="navigator.language = " + navigator.language;
document.getElementById("demo7").innerHTML ="navigator.onLine = " + navigator.onLine;
document.getElementById("demo8").innerHTML ="javaEnabled = " + navigator.javaEnabled();
</script>
</body>
</html>

Output


Write a program for History of window in javascript.

The window.history object contains the browsers history.
Some methods:
  1. history.back() - same as clicking back in the browser
  2. history.forward() - same as clicking forward in the browser
Program
<!DOCTYPE html>
<html>
<head>
<script type="text/javascript">
function goForward(){
window.history.forward()
}
function goBack(){

window.history.back()
}
</script>
</head>
<body>
<h1> HELLO </h1>
<input type="button" value="Back" onclick="goBack()">
<input type="button" value="forward" onclick="goForward()">
</body>

</html>

Output


After click the Back button




After click the Forward button


Write a program for redirect the browser to a new page in javascript.

The window.location.assign() method loads a new document.

The window.location object can be used to  redirect the browser to a new page.

Program
<!DOCTYPE html>
<html>
<head>
<script type="text/javascript">
function abc()
{

window.location.assign("https://www.w3schools.com");
}
</script>
</head>
<body>
<h1>Java</h1>
<h2> Documents</h2>
<input type="button" value="Load Document" onclick="abc()">
</body>

</html>

Output



Write a program for location details in javascript.

The window.location object can be used to get the current page address (URL).
  • window.location.href returns the href (URL) of the current page
  • window.location.hostname returns the domain name of the web host
  • window.location.pathname returns the path and filename of the current page
  • window.location.protocol returns the web protocol used (http: or https:)

Program
<html>
<head></head>
<body>
<p id="id1"></p>
<p id="id2"></p>
<p id="id3"></p>
<p id="id4"></p>
<p id="id5"></p>

<p><b>Note: If the port number is default (80 for http and 443 for https), most browsers will display 0 or nothing.</b></p>

<script type="text/javascript">
document.getElementById('id1').innerHTML="Page location is" + window.location.href;
document.getElementById("id2").innerHTML = "Page hostname is: " + window.location.hostname;
document.getElementById("id3").innerHTML = "Page pathname is: " + window.location.pathname;
document.getElementById("id4").innerHTML = "Page protocol is: " + window.location.protocol;
document.getElementById("id5").innerHTML = "Page port is: " + window.location.port;
</script>
</body>
</html>

Output

Write a program for screen details in javascript.

The window.screen object can be written without the window prefix.
Properties:
  • screen.width
  • screen.height
  • screen.availWidth
  • screen.availHeight
  • screen.colorDepth
  • screen.pixelDepth
Program
<!DOCTYPE html>
<html>
<head></head>
<body>
<p id="id1"></p>
<p id="id2">></p>
<p id="id3">></p>
<p id="id4"></p>
<p id="id5"></p>
<p id="id6"></p>


<script type="text/javascript">
document.getElementById('id1').innerHTML="  Screen Width is" + screen.width;
document.getElementById('id2').innerHTML="Screen Height is" + screen.height;
document.getElementById('id3').innerHTML="   Available screen width is" + screen.availWidth;
document.getElementById('id4').innerHTML=" Available screen height is" + screen.availHeight;
document.getElementById('id5').innerHTML="Color Depth  is" + screen.colorDepth;
document.getElementById('id6').innerHTML="Color Pixel Depth is" + screen.pixelDepth;


</script>

</body>
</html>

Output


Write a program for Window's Height and Width in javascript.

  • Two properties can be used to determine the size of the browser window.
  1. window.innerHeight - the inner height of the browser window 
  2. window.innerWidth - the inner width of the browser window
Note: Both properties return the sizes in pixels
    Program
    <html>
    <body>

    <p id="demo"></p>

    <script>
    var w = window.innerWidth
      document.documentElement.clientWidth
    document.body.clientWidth;

    var h = window.innerHeight
      document.documentElement.clientHeight
    document.body.clientHeight;

    var x = document.getElementById("demo");
    x.innerHTML = "Browser  width: " + w + ", height: " + h + ".";
    </script>

    </body>
    </html>

    Output


    Thursday, January 25, 2018

    Write a program for numeric validation in Javascript.

    JavaScript is often used to validate numeric input.

    Program
    <html>
    <head>
    <script>
    function myFunction() {
        var x, text;
        x = document.getElementById("numb").value;
        if (isNaN(x) || x < 1 || x > 10) {
            text = "Input not valid";
        } else {
            text = "Input OK";
        }
        document.getElementById("demo").innerHTML = text;
    }
    </script>
    </head>
    <body>
    <h4>Please input a number between 1 and 10</h4>
    <input id="numb">
    <button type="button" onclick="myFunction()">Submit</button>
    <p id="demo"></p>
    </body>
    </html>

    Output




    How to use form validation in Javascript.

    HTML form validation can be done by JavaScript.

    Program
    <html>
    <head>
    <script type="text/javascript">

    function validateForm(){

    var x= document.forms["form"]["fname"].value;
    var x1= document.forms["form"]["lname"].value;
    var x2= document.forms["form"]["Email"].value;
    var x3= document.forms["form"]["city"].value;
    if(x==""){

    alert("please enter Fname, Lname,Email,City");


    return false;
    }
    console.log("fname =" + x);
    console.log("lname =" + x1);
    console.log("Email =" + x2);
    console.log("city =" + x3);

    }
    </script>
    </head>
    <body>
    <form name="form" onsubmit ="return validateForm()">
     First Name: <input type="text" name="fname"><br/>
     Last Name: <input type="text" name="lname"><br/>
     Email: <input type="text" name="Email"><br/>
     city: <input type="text" name="city"><br/>

    <input type="submit"  value="submit" >


    </form>
    </body>
    </html>

    Output



    Wednesday, January 24, 2018

    How to use browser detection in Javascript.

    There is a simple JavaScript which can be used to find out the name of a browser and Vesrions.

    Program

    <html>
     
       <head></head>
     
       <body>
         
          <script type="text/javascript">

               var userAgent   = navigator.userAgent;
                var opera       = (userAgent.indexOf('Opera') != -1);
                var ie          = (userAgent.indexOf('MSIE') != -1);
                var gecko       = (userAgent.indexOf('Gecko') != -1);
                var netscape    = (userAgent.indexOf('Mozilla') != -1);
                var version     = navigator.appVersion;
               
                if (opera){
                   document.write("Opera based browser");
                   }
               
                else if (gecko){
                   document.write("Mozilla based browser");
                   }
               
                else if (ie){
                   document.write("IE based browser");
                     }
               
                else if (netscape){
                   document.write("Netscape based browser");
                  }
               
                else{
                   document.write("Unknown browser");
                }
                 document.write("<br /> Browser version info : " + version );
              </script>
         
       </body>
    </html>

    Output


    How to use plugins in javscript.

    The JavaScript navigator object includes a child object called plugins

    Program

    <html>
    <head>
    <title>Multimedia</title>
    </head>
    <body>

    <table border="1">
    <tr>
    <th>Plug In Name</th>
    <th>File Name</th>
    <th>Description</th>
    </tr>
    <script type="text/javascript">
    for(i=0;i<navigator.plugins.length;i++){
    document.write("<tr><td>");
    document.write(navigator.plugins[i].name);
    document.write("</td><td>");
    document.write(navigator.plugins[i].filename);
    document.write("</td><td>");
    document.write(navigator.plugins[i].Description);
    document.write("</td></tr>");

    }
    </script>
    </table>
    </body>
    </html>

    Output