Embed Size (px)
Citation preview
PEMROGRAMAN BERORIENTASI OBJECT
Indra Gunawan, ST., M.Kom., CEH., CHFI
OUTLINE MATERI
1. Object Oriented Programming Introduction.
2. Javascript Introduction.
3. Javascript Object and Class/Function.
4. Javascript Data Type.
5. Javascript Array.
6. Javascript Conditional Statement.
7. Javascript Looping.
8. Javascript Closures and Prototype.
9. Javascript Inheritance using Closure and Prototype.
10.Javascript Encapsulation using Document Object Model (DOM) .
11.Javascript Polymorhpism.
12.Javascript and JSON.
13.Case Study.
REFERENSI
1. Prof Cesare Tautasso, “Object-Oriented JavaScript Dynamic HTML”, 2007.2. Department of Computer & Information Science, “Introducing Object-
Oriented Programming (OOP)” , 2005.3. JavaScript, Third Edition.4. Stoyan Stefanov ,“Object-Oriented JavaScript”, 2008, Yahoo! Inc, 5. Noname, “Object Oriented Javascript”. 6. http://w3schools.com
Referensi dapat didownload di blog saya :http://digital4rainsick.wordpress.com
Functions
� Functions are objects
� They have properties
� They have methods
� Can be copied, deleted, augmented...
� Special feature: invokable
� All functions always return a value
� If a function doesn’t return a value explicitly, it returns undefined
� Functions can return objects, including other functions
FUNCTION
� Functions are objects
� Only invokable
� Methods: call(), apply()
� Properties: length, name, prototype
FUNCTION - EXAMPLEExample 1 :
function say(what) {
return what;
}
Example 2 :var say = function(what) {
return what;
};
Example 3 :var say = function say(what) {
return what;
};
EXAMPLE 1 :
>>> say.length
1
>>> say.name
"boo"
EXAMPLE 2 :
>>> var tell = say;
>>> tell("doodles")
"doodles"
>>> tell.call(null, "moo!");
"moo!"
Functions are objects
JAVASCRIPT OBJECT
var obj = {};
obj.name = 'my object';
obj.shiny = true;
A SIMPLE OBJECT - EXAMPLE
var obj = {
shiny: true,
isShiny: function() {
return this.shiny;
}
};
obj.isShiny(); // true
JAVASCRIPT OBJECT
JAVASCRIPT OBJECT IS VARIABLE
EXAMPLE <!DOCTYPE html><html><body>
<p>Creating a JavaScript Object.</p>
<p id="demo"></p>
<script>var person = {
firstName : "John",lastName : "Doe",age : 50,eyeColor : "blue"
};
document.getElementById("demo").innerHTML =person.firstName + " " + person.lastName;</script>
</body></html>
OBJECT PROPERTIES
METHOD
�When a property is a functionwe can call it a method
�An object method is a function that is attached to an object.
� Typically a method performs some action relating to its object. Like private properties, private methods may be used only by code internal to the object and are inaccessible elsewhere, whereas public methods are for outside use, and form part of the interface of the object with other code.
OBJECT METHOD
CREATING OBJECT
EXAMPLE<!DOCTYPE html><html><body>
<p>Creating a JavaScript Object.</p>
<p id="demo"></p>
<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>
USING AN OBJECT LITERAL
JAVASCRIPT KEYWORD
KEYWORD - EXAMPLE<!DOCTYPE html><html><body>
<p id="demo"></p>
<script>var person = new Object();person.firstName = "John";person.lastName = "Doe";person.age = 50;person.eyeColor = "blue";
document.getElementById("demo").innerHTML =person.firstName + " is " + person.age + " years old.";</script>
</body></html>
Constructor functions
� When invoked with new, functions return an object known as this
� You can modify this before it’s returned
� A function meant to be called with new
� Returns an object
Constructor functions - EXAMPLE
var Person = function(name) {
this.name = name;
this.getName = function() {
return this.name;
};
};
var me = new Person("Stoyan");
me.getName(); // "Stoyan"
Using the constructor
Built-in constructors
� Object
� Array
� Function
� RegExp
� Number
� String
� Boolean
� Date
� Error, SyntaxError, ReferenceError…
constructor property
EXAMPLE 1 :
>>> function Person(){};
>>> var jo = new Person();
>>> jo.constructor === Person
True
EXAMPLE 2 :
>>> var o = {};
>>> o.constructor === Object
true
>>> [1,2].constructor === Array
true
CONSTRUCTOR
OBJECT CONSTRUCTOR
OBJECT CONSTRUCTOR - EXAMPLE<!DOCTYPE html><html><body>
<p id="demo"></p>
<script>function person(first, last, age, eye) {
this.firstName = first;this.lastName = last;this.age = age;this.eyeColor = eye;
}
var myFather = new person("John", "Doe", 50, "blue");var myMother = new person("Sally", "Rally", 48, "green");
document.getElementById("demo").innerHTML ="My father is " + myFather.age + ". My mother is " + myMother.age; </script>
</body></html>
KEYWORD - THIS
BUILT IN CONSTRUCTOR
JAVASCRIPT OBJECTS ARE MUTABLE
EXAMPLE<!DOCTYPE html><html><body>
<p>JavaScript objects are mutable.</p><p>Any changes to a copy of an object will also change the original.</p>
<p id="demo"></p>
<script>var person = {firstName:"John", lastName:"Doe", age:50, eyeColor:"blue"}
var x = person;x.age = 10;
document.getElementById("demo").innerHTML =person.firstName + " is " + person.age + " years old.";</script>
</body></html>
�����������������������������������������������������������������������������������������������������������������������������������������������������������������������������������������������������������������
