Although arrays form an important topic in any language, objects are the key to modern software development. They allow for a piece of complex software to be broken into smaller and simpler parts that can be debugged independently and then reused in various combinations.
Modern JavaScript extensively uses objects in any serious approach to the software development. Here I am offering three short lessons that are based on your use of w3schools in some creative ways and will help you understand the topic better.
Objects. Part 1
Objects are an extremely important topic in many modern programming languages, as well as in JavaScript. They dramatically increase your programming power, richness, effectiveness and efficiency. There are many tutorials on any part of JavaScript and you are encouraged to browse through some of them in order to find the ones that explain a particular topic in a way best for your learning methods and current understanding. Here I talk about something that will allow you to get into the tutorials on objects easier, compensating for often neglected efforts in letting students understand the nature of objects deep enough to be more comfortable with specific explanations.
Objects are complex data types that might contain data (properties) and a bunch of small programs (methods). Therefore they are like combinations of files with data and a library of programs in one system. Such system can be activated by just its name, can be send somewhere as one thing and then used in all its aspects, like getting data (properties) stored in it and/or running some programs that are contained in objects. In comparison with having files and programs separate – such complex systems (data types) like objects can be easily created and handled as one universal package where we can use its functional capabilities (by running the programs), its data storage capabilities by adding, changing, and retrieving data, or by both at the same time when newly obtained by an object data can be processed by its own programs (methods) either changing its own data or controlling input and output of data processing in and out of an object.
Object-oriented analysis, design and programming tends to see any real life object, process, concept, and so on as potential software objects with their structural and behavioral characteristics. Having these features, program objects can model real life objects that usually also have properties and can doo something (or something can be done to them). Examples: a car, a computer, a pen (with its size and weight, as well as an ability to touch paper, leave a line of ink, etc.) and so on. Once you are trained in such vision – you can quickly create models of real situations (or virtual and game situations) and make them interact with each other using their properties and behaviors in response to initiatives of other objects. Thus you can create real virtual/game worlds that react to actions of their own objects or physical objects like players.
ExampleA: myCar. CurrentMileage = 2000;
ExampleB: myCar.showYourCurrentMileage();
Here the first example shows how to store data in one of the properties of myCar object (CurrentMileage), while the second shows how to run a small program (showYourCurrentMileage()) that might be programmed to get that property and show it on the page. See below an example from w3schools of an object “person” and a link allowing to experiment with it by adding and retrieving more properties.
Example 1. Properties:
<body>
<article id="demo"></article>
<script>
var person = {
firstName : "John",
lastName : "Doe",
age : 50,
eyeColor : "blue"
};
document.getElementById("demo").innerHTML =
person.firstName + " is " + person.age + " years old.";
</script>
</body>
</html>
Then create more interesting objects with properties and something printed out about that object. Later you will be adding code for changing the properties and adding new properties dynamically.
Objects. Part 2. Methods
After you watch Lecture 1 (What are objects?) we can continue to the discussion of the second part of objects - programs that are stored in them. They are called methods. In this video lecture I will be talking about ways of using w3schools as a debugging and development platform
Objects. Part 3. More Advanced Stuff (optional reading)
First read http://www.w3schools.com/js/js_object_prototypes.asp about prototypes and experiment with them in included exercises. Important to understand that compared to the old typical object-oriented languages (VB, C++, C#, Java, etc.) that are strongly typed and have such forms as objects being created during the compilation time – dynamic languages (such as Perl, Ruby, Smalltalk, and… JavaScript, along with the number of others) allow to change the program and its data types during the execution depending on the situation. For example var x = 5; dynamically becomes and integer, but if later you use x=”hello”; then it becomes a string. You saw in the examples from w3schools how it is possible to change, add, delete properties and methods in objects. Same is possible to do in constructors using prototypes. This allows to change whole groups (types of objects) like instead of changing properties of a student Bob – you can change properties of the constructor which changes properties of ALL students that were derived (using “new”) from that constructor. For example in games, objects operating on the screen might change properties (like colors, shapes, etc.) and behaviors under various conditions DURING the game. In general program can change itself depending on the situation and an old saying that computer can do ONLY what it was programmed to do is incorrect. Software systems can LEARN (using various learning algorithms) and evolve to become more adequate to the situation when after a while the creators might not even know how and why the system does some new tricks.
This leads to the situation when in systems that were intended to be dynamic – the programmers do not know what properties and how many of them their objects will have after a while depending on various situations. This leads to the need in using safer forms of handling objects where their properties are treated as arrays and are accessed in a loop like is shown in http://www.w3schools.com/js/tryit.asp?filename=tryjs_object_for_in where the code uses it:
var txt = "";
var person = {fname:"John", lname:"Doe", age:25};
var x;
for (x in person) {
txt += person[x] + " ";}
Here x (better would have been to use conventional i, j as indexes) is just an index reflecting the position of an attribute in the object “person”. Using a tricky construction (for (x in person)) we can enumerate the properties and then treat them like an array using their relative number in the enumerated sequence treating it as person[x] instead of giving a name of each property as you did before.
An example of how useful objects are in making your code more compact and logic more clear can be seen in operating whole objects as variables by passing them to other objects or functions:
var father = {
firstname:"John",
lastname:"Doe",
age:65,
eyecolor:"blue"
};
function canRetire (person){
if (person.age > 62) {
return true;
return true;
} else {
return false;
}
Here, assuming that object father is an instance (derived from) of the type (class) person, we are passing the whole object to the function checking if that particular person (particular object) can retire. In a similar fashion once a function gets an object as a parameter – it can internally use all its properties and functions. Notice that instead of sending a bunch or parameters to a function we are sending just one (of type person) that can have a very complex and rich structure.
