代写 JavaScript
的Lab小作业，练习对JavaScript的Object进行操作。
Script 1
Create an object Constructor to create an object of a book. Make sure you have
5 different properties like title, author, publish date, edition, etc. Next,
write the script that adds a new book to the array and finally uses
“document.write” to print the object to the web page.
Script 2
Using the example script from the lesson (see below), extend the script so
that it loops through each of the programming languages in the object array.
Print out all of the properties for each object. And if the object’s name
contains javascript, output a special message.
function progLangObj(name,use,level,status) {
this.name=name;
this.use=use;
this.level=level;
this.status=status;
this.addToArray = function() {
theProgLangArray.push(this);
};
this.addToArray();
}
// Initialize the array, and create some objects …
var theProgLangArray = [];
var oJavascript = new progLangObj(“JavaScript”,”Client Side Scripting”,”Easy”,”Fun”);
var oPHP = new progLangObj(“PHP”,”Server Side Scripting”,”Medium”,”Also Fun”);
var oJava = new progLangObj(“Java”,”Compiled Language”,”Hard”,”Fun but hard!”);
// Create a loop that can loop through the entire theProgLangArray array and print out the name, use, level and status contained in each object.
// your code here
// Hint: think of this as two loops … one loop to loop through each object in the array, and an inner loop that prints out the items in the object.
—|—
Objects, everywhere
Everything in JavaScript is an Object: a String, a Number, an Array, a Date….
In JavaScript, an object is data, with properties and methods.
An object is a self-contained entity comprising of ‘properties’ (think
variables) and methods (functions that do something with the variables
typically). The object stores data in the properties and can perform tasks via
the methods. You use objects all the time as you program in JavaScript.
There are built in objects like Date and Math, and the browsers’ Document
Object Model (the web page itself). Don’t worry about that last piece about
the DOM yet, more on this to come soon enough.
Finally, there are objects that you make that are used by your programs.
When you create an object, it uses an approach called prototyping. Simply,
this means that you are declaring an object with name and then adding the
properties to it (which are basically variables). Then, anytime you need a new
instance of this object, you instantiate it by calling with a new keyword.
How about we create an object for JavaScript as a language? Here we go:
progLangObj = new Object();
progLangObj.name = “JavaScript”;
progLangObj.use = “Client side scripting”;
progLangObj.level = “Easy”
progLangObj.status = “Fun”
—|—
We just created an object called “progLangObj” and added the following
properties to it: “name”, “use”, “level”, and “status”.
Note, you can also build an object like this:
var progLangObj = {name:”Javasctript”, use:”Client Side Scripting”, level:”Easy”, status:”Fun”};
—|—
Now let’s do something with this object, we’ll start by outputting the
properties of the object to the screen:
alert(progLangObj.name + “ is “ + progLangObj.level);
—|—
If you run that statement, you will see one of the values stored in our
programming object that we created above.
You may be wondering, one value is nice, but how can I see everything in my
object? Here is a way to loop through all of the properties and values of the
progLangObj object:
for (var prop in progLangObj) {
document.write(prop + “ = “ + progLangObj[prop]);
}
—|—
Object Constructor
The next step in using objects is to re-use it. An object is like, well, a
thing that we can use again and again. The object can be a template - or a
class - and like a function where you are able to feed different parameters in
code and use it again and again, we can now use a function to create and name
an object that you can then add properties to and access throughout a script.
To do this, we use an object Constructor, which is a function that you define
in order to create multiple objects of a similar type … like this:
function progLangObj(name,use,level,status) {
this.name=name;
this.use=use;
this.level=level;
this.status=status;
}
—|—
Now, every time you want to store information about a new programming language
that you know about, you can instantiate a new progLangObj like this:
var oJavascript = new progLangObj(“JavaScript”,”Client Side Scripting”,”Easy”,”Fun”);
—|—
and then
var oPHP = new progLangObj(“PHP”,”Server Side Scripting”,”Medium”,”Super Fun”);
—|—
Now, let’s look again at how you can loop through the object and find it’s
properties.
The code below, is how this loop is set up, it will not run as is. Just look
at it to see how we are looping through all of the properties of an object and
for each, printing out the property name and value. Note how the object’s key
and value pairs are separated by simply declaring the variable name (property)
and the object.
for (var property in objectname) {
alert(property+ “ = “ + objectname[property]);
}
—|—
So, here is the full script, this will run, it will create the object
construction class add then add a programming language object, and finally
print it out:
function progLangObj(name,use,level,status) {
this.name=name;
this.use=use;
this.level=level;
this.status=status;
}
var oJavascript = new progLangObj(“JavaScript”,”Client Side Scripting”,”Easy”,”Fun”);
for (var prop in oJavascript) {
alert(prop + “ = “ + oJavascript [prop]);
}
—|—
I assume you are now thinking “ok, that’s great, but how do I loop through all
of my objects without knowing it’s name? Is there an object of all my
objects?” Well, no, but you can create an array that holds the names of all
your objects, and the best way to do this is by adding it to the constructor.
However, we need to talk about “this” first.
THIS
“This” is a keyword that you’ll see in Javascript when working with objects.
It refers to the element or object that you are currently working on and can
be quite a powerful tool in a function. For example, you can pass the element
or object in to the function and do things to it without having to specify by
name exactly which object you are working on!
So, in the object Constructor class above I threw a “this” into the mix
without explanation. In the following example note that “this” refers to the
object that progLangObj is making:
function progLangObj(name,use,level,status) {
this.name=name;
this.use=use;
this.level=level;
this.status=status;
}
—|—
When we call on the function, it instantiates an object and assigns the name,
use, etc. by using “this” as the placeholder for the objects name.
Next, I’m using the “push” method to push the new object in an array that
contains all of my objects.
function progLangObj(name,use,level,status) {
this.name=name;
this.use=use;
this.level=level;
this.status=status;
// with the following function, I am creating a function called “addToArray” that expects an object and will append (or push) it into the array
this.addToArray = function() {
theProgLangArray.push(this);
};
this.addToArray();
}
// Now, we get to work by initializing the array, and creating some objects …
var theProgLangArray = [];
var oJavascript = new progLangObj(“JavaScript”,”Client Side Scripting”,”Easy”,”Fun”);
var oPHP = new progLangObj(“PHP”,”Server Side Scripting”,”Medium”,”Also Fun”);
var oJava = new progLangObj(“Java”,”Compiled Language”,”Hard”,”Fun but hard!”);
—|—
Ok, now we’re set up … we’ve created the array, we’ve created objects, and as
we were creating each object, we pushed the object into an array that we can
now use to call up all of our objects. Here is the final step, a loop to go
through the array. Let’s use the forEach method to loop:
theProgLangArray.forEach(function(language) {
var x = language.name
alert(x);
});
—|—
Pretty interesting, right? Now, can you figure out how to also show the use,
status, and level of the progLangObj?
Next steps
Read up on objects:
- Eloquent Javascript, read chapter 4, up to the Objects as Maps subsection, ( http://eloquentjavascript.net/04_data.html )
- Optionally:
- http://www.w3.org/wiki/Objects_in_JavaScript
- http://w3schools.com/js/js_objects.asp
Ok … let that all sink in and then head over to the Assignments section and
look for Assignment 6.
