26/05/2011
3
IF you often watch the HBO movies, then the title of this JavaScript post will be familiar to you: "Simply the Best". Yes, that's right, I want to borrow this slogan from HBO to describe the content of this post: it will provide you the very basic JavaScript concepts, and you will be able to access, understand the web programming JavaScript language easily and quickly.
This JavaScript article tutorial shows you the full-detailed practices, combined with live JavaScript example codes to try. At present, this JavaScript article tutorial us 5 parts and I'll update if there's new chapter, meanwhile, you can go through:
- Part 1: JavaScript Classes
- Part 2: JavaScript Inheritance
- Part 3: JavaScript and JSON
- Part 4: The Prototype Property
- Part 5: JavaScript Closures
Read more other JavaScript article tutorials on jsB@nk:
- JavaScript Function Declarations & JavaScript Function Expressions - Basic Concepts
- JavaScript Prototype: Some Basic Concepts
- 5 Chief JavaScript Inheritance Concepts
- Simple Concepts about Types and Objects in JavaScript OOP
- Top 10 Best JavaScript eBooks that Beginners should Learn
- Demo
- Enlarge
- Reload
- New window
Generate your business videos by AI with voice or just text
Your first FREE AI Video App! Automate Your First AI Video. Create Your Professional Video In 5 Minutes By AI No Equipment Or Video Editing Skill Requred. Effortless Video Production For Content Marketers.
While the Javascript language offers many of the constructs required for object-oriented programming, they remain largely unused. Today we�ll take a look at how to start with object-oriented programing in Javascript. by defining a class in Javascript. We�ll use the simple HTML file to call our script file,
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN"> <html> <head> <title>Hello Javascript!</title> <script type="text/javascript" src="MyScript.js"></script> </head> <body> Hello Javascript! </body> </html>
Now let�s create a class definition (in MyScript.js). Note that there is no �class� keyword in Javascript, the class definition is just a function definition,
function MyClass() { // Public field this.aPublicField = "This is a public field of the type MyClass"; // Private field var aPrivateField = "This is a private field of the type MyClass"; // Public method this.aPublicMethod = function() { // Use the private method if (aPrivateMethod()) { return this.aPublicField; } else { return aPrivateField; } } // Private method function aPrivateMethod() { return true; } // Oops! We can expose the private field this.exposePrivateField = aPrivateField; // and the private method this.exposePrivateMethod = aPrivateMethod; } // Create an instance of MyClass using the �new� keyword var myclass = new MyClass(); // Get the public field alert(myclass.aPublicField); // Call the public method alert(myclass.aPublicMethod()); // Call the private field � can�t get to them directly alert(myclass.exposePrivateField); alert(myclass.exposePrivateMethod());
So it�s pretty simple to create a class in Javascript. We can also create a runtime field for the class,
// Create an instance of MyClass var myclass = new MyClass(); // Create a field at runtime myclass.aRuntimeField = "This is a runtime field of the type MyClass"; // View the field value alert(myclass.aRuntimeField);
Part 2: Javascript Inheritance
Now that we created a base Javascript class in the first post, let�s inherit from it to get a derived class.
// Define the derived function (remember there is no 'class' keyword in Javascript) function MyDerivedClass() { } // Derive from MyClass, equivalent to �> public class MyDerivedClass : MyClass MyDerivedClass.prototype = new MyClass(); // Create an instance of the derived class var myderivedClass = new MyDerivedClass(); // Get the public field alert(myderivedClass.aPublicField); // Call the public method alert(myderivedClass.aPublicMethod());
Woah! That was simple! Notice that MyClass�s private methods and the runtime field (aRuntimeField) we gave to MyClass in the last post is not available to MyDerivedClass.
Let�s override the base classe�s public fields and methods and see what happens,
// Define the derived function (remember there is no 'class' keyword in Javascript function MyDerivedClass() { // Override the base's public field this.aPublicField = "This is a public field of the type MyDerivedClass"; // Override the base's public method this.aPublicMethod = function() { return this.aPublicField; } } // Derive from MyClass, equivalent to �> public class MyDerivedClass : MyClass MyDerivedClass.prototype = new MyClass(); // Create an instance of the derived class var myderivedClass = new MyDerivedClass(); // Get the public field alert(myderivedClass.aPublicField); // Call the public method alert(myderivedClass.aPublicMethod());
You�ll see that the base classes public fields and methods have been overridden in the derived class.
We can obviously derive again,
// Derive from MyDerivedClass function MyDerivedDerivedClass() { // Override the base's public field this.aPublicField = "This is a public field of the type MyDerivedDerivedClass"; // Override the base's public method this.aPublicMethod = function() { return this.aPublicField; } } // Derive from MyDerivedClass, equivalent to �> public class MyDerivedDerivedClass : MyDerivedClass MyDerivedDerivedClass.prototype = new MyDerivedClass(); // Create an instance of the derived class var myderivedderivedClass = new MyDerivedDerivedClass(); // Call the public method alert(myderivedderivedClass.aPublicField);
by Preview- Sent (0)
- New
Author:
Previews:
Comment:
Votes:
Sent:
Size:
Rank:
Soumya Chattopadhyay [more]
85,808
3
0
0
37.55 KBytes
0 votes / 85,808 previews / 3 comment
26/05/2011
IF you often watch the HBO movies, then the title of this JavaScript post will be familiar to you: "Simply the Best". Ye...JavaScript Concepts: Simply the Best - JavaScript Concepts: Simply the Best
