Skip to main content

JAVA-SCRIPT OBJECT


Creating a JavaScript Object

With JavaScript, you can define and create your own objects.
There are different ways to create new objects:
  • Define and create a single object, using an object literal.
  • Define and create a single object, with the keyword new.
  • Define an object constructor, and then create objects of the constructed type

Objects are Variables
JavaScript variables can contain single values:
Example
var person = "John Doe";

full example:-
<!DOCTYPE html>
<html>
<body>

<h2>JavaScript Variables</h2>

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

<script>
// Create and display a variable:
var person = "John Doe";
document.getElementById("demo").innerHTML = person;
</script>

</body>
</html>

Objects are variables too. But objects can contain many values.
The values are written as name : value pairs (name and value separated by a colon).
Example
var person = {firstName:"John", lastName:"Doe", age:50, eyeColor:"blue"};

Full example :-
<!DOCTYPE html>
<html>
<body>

<p>Creating a JavaScript Object.</p>

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

<script>
var person = {
  firstName : "John",
  lastName  : "Doe",
  age     : 50,
  eyeColor  : "blue"
};

document.getElementById("demo").innerHTML = person.firstName + " " + person.lastName;
</script>

</body>

</html>


  • Define and create a single object, using an object literal.

Simple Object    Example   :

<script> 
                emp={id:102,name:"Shyam Kumar",salary:40000} 
                document.write(emp.id+" "+emp.name+" "+emp.salary); 
                </script> 







  • Define and create a single object, with the keyword new.

object using new keyword example :

<script> 
var emp=new Object(); 
emp.id=101; 
emp.name="Ravi Malik"; 
emp.salary=50000; 
document.write(emp.id+" "+emp.name+" "+emp.salary); 
</script>




  • Define an object constructor, and then create objects of the constructed type

Object  Constructor example:
                <script> 
                function emp(id,name,salary){ 
                this.id=id; 
                this.name=name; 
                this.salary=salary; 
                } 
                e=new emp(103,"Vimal Jaiswal",30000); 
                document.write(e.id+" "+e.name+" "+e.salary); 
                </script>

Comments

Popular posts from this blog

Jquery Sliding

jQuery Sliding Methods:-  With jQuery you can create a sliding effect on elements. jQuery has the following slide methods: slideDown() slideUp() slideToggle() (1)slideDown()  example:- <html> <head> <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.4.1/jquery.min.js"></script> <script> $(document).ready(function(){   $("#flip").click(function(){     $("#panel").slideDown("slow");   }); }); </script> <style> #panel, #flip {   padding: 5px;   text-align: center;   background-color: #e5eecc;   border: solid 1px #c3c3c3; } #panel {   padding: 50px;   display: none; } </style> </head> <body> <div id="flip">Click to slide down panel</div> <div id="panel">Hello world!</div> </body> </html> (2)sldeUP()  example:- <html> <head> <script src="https://ajax.

layout code example:-

<!DOCTYPE html> <html lang="en"> <head>   <title>Bootstrap Example</title>   <meta charset="utf-8">   <meta name="viewport" content="width=device-width, initial-scale=1">   <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.4.1/css/bootstrap.min.css">   <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.4.1/jquery.min.js"></script>   <script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.16.0/umd/popper.min.js"></script>   <script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.4.1/js/bootstrap.min.js"></script> </head> <body>  <section>       <div class="container">         <header>           <h3  class="text-center">Services</h3>           <p class="text-center">Laudem latine pe

Juqery fade

jQuery Fading Methods :-  With jQuery you can fade an element in and out of visibility. jQuery has the following fade methods: fadeIn() fadeOut() fadeToggle() fadeTo() jQuery fadeIn() Method The jQuery fadeIn() method is used to fade in a hidden element. Syntax:- $(selector).fadeIn(speed,callback); <html> <head> <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.4.1/jquery.min.js"></script> <script> $(document).ready(function(){   $("button").click(function(){     $("#div1").fadeIn();     $("#div2").fadeIn("slow");     $("#div3").fadeIn(3000);   }); }); </script> </head> <body> <p>Demonstrate fadeIn() with different parameters.</p> <button>Click to fade in boxes</button><br><br> <div id="div1" style="width:80px;height:80px;display:none;background-color:red;"></div><