Object Oriented Programming In Javascript

Yes, there is OOP in JavaScript.  The below code are notes that I took during my first week of Advanced Javascript class that I am currently enrolled in at Ryerson University.  These are working code.  I used the free Komodo editor from ActiveState.  It is a cool editor with colored syntax and intellisense and works with HTML and Javascript, and even Perl, PHP, Phyton and Ruby.

// creating native object types like dates, strings, numbers, and booleans
var date = new Date();
var str1 = "Sotto";
var str2 = new String("Rodan");
var num1 = 0.35;
var num2 = new Number(0.4);
var bool1 = true;
var bool2 = new Boolean(false);

// calling native object types' properties and methods
var strLen = str1.length;
var fixedNum = num1.toFixed(4);

// creating custom objects, in this example blank objects
var obj1 = new Object();
var obj2 = {};

// adding properties and methods after creating a custom object
obj1.prop1 = "Object1's Property1";
obj1["prop1"] = "Object1's Property1 using []";
obj1.func1 = function () {
return "Object1's Function1";
};
obj1["func1"] = function () {
return "Object1's Function1 using []";
};

// you can also add properties and methods to the native objects
// using the prototype object
Date.prototype.myCustomProperty = "My Custom Property";
var date = new Date();
//alert(date.myCustomProperty);

// some like the Math object does not have the prototype object
// so you add directly
Math.myCustomProperty = "My Custom Property";
//alert(Math.myCustomProperty);

// removing property or function from an object
delete obj1.func1;
obj1.func1(); // displays undefined

// creating a custom object with properties and functions
// notice you use , to separate each properties and functions in {}
var invoice = {
taxRate: 0.35,
dueDays: 30,
getSalesTax: function(subTotal) {
return (subTotal * invoice.taxRate);
},
getTotal: function(subTotal, salesTax) {
return (subTotal + salesTax);
}
};

// creating object references
var today2 = new Date();
var now = today2;

// creating a class
// you create a constructor function first
var Vehicle = function(make, model) {
this.make = make;
this.model = model;
this.miles = 0;
}

// then create the class methods and other properties
// through the prototype object
Vehicle.prototype.drive = function(miles) {
this.miles += miles;
return this;
}

Vehicle.prototype.canFly = false;

var myCar = new Vehicle("Honda", "CRV");
myCar.drive(300);

// creating a sub class (inheritance)
var Car = function(make, model, door, suv) {
this.make = make;
this.model = model;
this.door = door;
// example of optional arguments
if (arguments.length == 4) {
this.suv = suv
}
else {
this.suv = false;
};
this.miles = 0;
};

Car.prototype = new Vehicle();

var my2ndCar = new Car("Honda", "Odyssey", 4, false);
my2ndCar.drive(50).drive(100);

// notice above the method is called one after the other
// this is possible if the method is a cascading method
// a cascading method is one that returns the this object

// looping through the object's properties and methods
for (var property in my2ndCar) {
alert(property);
}

// checking if the object's property is enumerable
alert(my2ndCar.propertyIsEnumerable("make")); // displays true
alert(my2ndCar.propertyIsEnumerable("drive")); // displays false

// using the in operator
alert("make" in my2ndCar); // displays true
alert("drive" in my2ndCar); // displays true

// using the instanceof operator
alert(my2ndCar instanceof Car); // displays true
alert(my2ndCar instanceof Vehicle); // displays true
alert(my2ndCar instanceof Object); // displays true
alert(my2ndCar instanceof String); // displays false

// using the typeof operator
alert(typeof my2ndCar); // displays object
alert(typeof Vehicle); // displays function
alert(typeof Car); // displays function
alert(typeof my2ndCar.make); // displays string
alert(typeof my2ndCar.drive); // displays function

Advertisements

Design Patterns: Fundamentals

Fundamental design patterns are divided into 3 categories:

EDIT: The above patterns are called the 23 Gang of Four (GoF) patterns.  More information can be found from this link.  The site provides a description, a UML class diagram and C# code as well.

HTML Fundamentals

Below are the fundamentals that you need to know to start creating HTML pages.  Good for brushing up your HTML skills if you feel you forgot them already.

<!-- comments -->
<!-- tags are those enclosed in <> like <html> and <head> -->
<!-- most tags have opening and closing tags like <p> and </p> -->
<!-- few tags are self-enclosing tags like <img /> -->
<!-- from opening tag to closing tag is what is called an element -->
<!-- attributes are name="value" pairs like in <p id="p1"> -->
<!DOCTYPE html>
<html></html>
<head></head>
<title></title>
<link type="text/css" rel="stylesheet" href="stylesheet.css" />
<body></body>
<p></p>
<strong></strong> <!-- to bold text -->
<em></em> <!-- to italicize text -->
<h1></h1> to <h6></h6>
<img src="image.jpg" />

<a href="URL">this is a text link</a> <!-- text link -->
<a href="URL"><img src="image.jpg" /></a> <!-- image link -->

<ul> <!-- you can nest lists -->
<li></li>
</ul>
<ol>
<li></li>
</ol>

<!-- attributes for styling text (inline style) -->
<p style="color:blue; font-size:10px; font-family:Courier">
<body style="background-color:brown">
<h3 style="text-align:center">

<table>
<thead>
<tr> <!-- row header -->
<th></th> <!-- column header -->
</tr>
</thead>
<tbody>
<tr>
<td></td>
</tr>
<tbody>
</table>

<!-- attributes for styling table (inline style) -->
<td colspan="2″ style="border:1px solid black">

<div></div> <!-- for dividing webpage into smaller pieces --->

<!-- attributes for styling div (inline style) -->
<div style="width:50px; height:50px"></div>

<span></span> <!-- for styling even smaller parts like text -->
<p>This is black, this is <span style="color:red">red</span>!</p>

<!-- NOTE:
<div> is a block level element
<span> is an inline level element
Block level element has new lines before and after
and consumes the whole width available
Inline level element has no new lines,
can be placed aside other elements
and cannot define width
-->

 

You could also look into this link for a quick review of HTML basics.

Webbing My Way To Frontend Development

I just joined the Front End Developer Group in LinkedIn and came across this posting with a link to a site listing the best front end tools and resources.  And I say it really is one heck of a list.  For me just beginning to work my way to frontend development, this is really useful.  What actually caught my attention are the list of sites that offer free tutorials, and here they are:

I am so excited now in this journey of mine to learn more about frontend development, because I consider myself to be more middle-tier/backend developer.  I think it is time I get myself into it to bring out my creativity I guess.  Wish me luck!