Javascript objectsFrom WikiJava
HOW TO CREATE JAVASCRIPT OBJECTS
the articleObject oriented Programming in an important aspect of JavaScript. It is possible to use built-in objects available in JavaScript. It is also possible for a JavaScript programmer to define his own objects and variable types. In this JavaScript tutorial, you will learn how to make use of built-in objects available in JavaScript. Objects are nothing but special kind of data. Each object has Properties and Methods associated with it. Properties of an Object: Property is the value that is tagged to the object. For example let us consider one of the properties associated with the most popularly used String object - the length property. Length property of the string object returns the length of the string, that is in other words the number of characters present in the string. Here variablename is the name of the variable to which the string is assigned and length is the keyword. The property of an object is the value associated with the object.
javascript objects1.Creating a simple object <html> <body> <script type="text/javascript"> function Human(){ this.name = "ben"; this.age = 10; } human = new Human(); document.write("name="+human.name+"<br/>"); document.write("age="+human.age+"yrs"); </script> </body> </html> the output of the object will be name=ben age=10yrs 2.Creating a class object A new JavaScript class is defined by creating a simple function. When a function is called with the new operator, the function serves as the constructor for that class. Internally, JavaScript creates an Object, and then calls the constructor function. Inside the constructor, the variable this is initialized to point to the just created Object. This code snippet defines a new class, Ras, and then creates a single object of that class. <html> <body> <script type="text/javascript"> function Human() { this.name = "ben"; this.age = 10; } human = new Human(); document.write("name="+human.name+"<br/>"); document.write("age="+human.age+"yrs"); </script> </body> 3.Instantiating an object instantiating an object means adding the keyword "new" infront of the object name, and then creating an instance of the object by assigning it to a variable: <html> <body> <script type="text/javascript"> function Human(name,age) { this.name=name; this.age=age; } human=new Human("Ben",10); document.write("name="+human.name+"<br/>"); document.write("age="+human.age+"yrs"); </script> </body> </html> the output of the object will be name=ben age=10yrs advanced javascript objects4.Adding prototypes prototyping is where an object can inherit properties from another object, When evaluating an expression to retrieve a property, JavaScript first looks to see if the property is defined directly in the object. If it is not, it then looks at the object's prototype to see if the property is defined there. This continues up the prototype chain until reaching the root prototype. Each object is associated with a prototype which comes from the constructor function from which it is created. <html> <body> <script type="text/javascript"> Object.prototype.Name = "Ben"; function Human() { this.Age = 10; } Human.prototype.Job = "software developer"; Job.prototype = new Human; // Hook up A into B's prototype chain Human.prototype.constructor = Human; function Job() { this.Employer = "jjpeople"; } Job.prototype.JobRank = "Developer"; Human = new Job; document.write("name="+Human.Name+"<br/>" ); document.write("Age="+Human.Age+"<br/>" ); document.write("Job="+Human.Job+"<br/>" ); document.write("Employer="+Human.Employer+"<br/>" ); document.write("JobRank="+Human.JobRank+"<br/>" ); </script> </body> </html> 5.Advanced Objects <html> <body> <script type="text/javascript"> human = Object(); human.name = "Ben"; human.getName = function() { return this.name; } function Ben() { this.age = 10; this.getAge = function() { return this.age; } } MyAge = new Ben(); document.write("name="+human.getName()+"<br/>"); document.write("Age="+MyAge.getAge()); </script> </body> </html> Note that in the line "document.write("Age="+MyAge.getAge());" age is called from Ben 6.Creating objects using literal notation <html> <body> <script type="text/javascript"> human = { name : "Ben", age : 10, info: ["single", "Listening to raggea","reggea"], method1 : function(){ document.write("name=" + this.name+"<br/>") document.write("age=" + this.age+"<br/>") } }; human.method1(); document.write("marital status :"+human.info[0]+"<br/>") document.write("hobbies :"+human.info[1]+"<br/>") document.write("favourite music :"+human.info[2]+"<br/>") var referees : { giulio : "Giulio Giraldi", site : "www.wikijava.org"} var Education = { Lower : { primary : "st.Peter Mumias Boys", high_school: "vihiga high" }, University = {school:"jjpeople",course: "java programming", year : "first year"} } document.write("primary school :"+Education.Lower.primary+"<br/>") document.write("High school :"+Education.Lower.high_school+"<br/>") document.write("university :"+Education.University.school+"<br/>") document.write("course :"+Education.University.course+"<br/>") document.write("referees :" + referees.giulio+"<br/>") document.write("site : " + referees.site+"<br/>") </script> </body> </html> the dot (.) operator can be used to access the [] operator used with arrays. object.property object["property"] check"info: ["single", "Listening to raggea","reggea"]," or 'this.age' in "document.write("age=" + this.age+"<br/>")" 7.looping through properties in an object While looping through properties in an object use a for/in loop. <html> <body> <script type="text/javascript"> human = { fname:"Accadius", lname:"Ben", greeting:new Array("hello Accadius Ben") } for(x in human) alert( x + "-" + human[ x ] ) </script> </body> </html> See Also |
SearchAd |
