PEMROGRAMAN BERORIENTASI OBJECT. Indra Gunawan, ST., M.Kom., CEH., CHFI

Size: px

Start display at page:

Download "PEMROGRAMAN BERORIENTASI OBJECT. Indra Gunawan, ST., M.Kom., CEH., CHFI"

Amberlynn Sullivan
6 years ago
Views:

1 PEMROGRAMAN BERORIENTASI OBJECT Indra Gunawan, ST., M.Kom., CEH., CHFI

2 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.

3 REFERENSI 1. Prof Cesare Tautasso, Object-Oriented JavaScript Dynamic HTML, Department of Computer & Information Science, Introducing Object- Oriented Programming (OOP), JavaScript, Third Edition. 4. Stoyan Stefanov, Object-Oriented JavaScript, 2008, Yahoo! Inc, 5. Noname, Object Oriented Javascript Referensi dapat didownload di blog saya :

4 JAVASCRIPT CLOSURES

5 GLOBAL VARIABLE

6 GLOBAL VARIABLE - EXAMPLE <!DOCTYPE html> <html> <body> <p>a function can access variables defined inside the function:</p> <button type="button" onclick="myfunction()">click Me!</button> <p id="demo"></p> <script> function myfunction() { a; } var a = 4; document.getelementbyid("demo").innerhtml = a * </script> </body> </html>

7 GLOBAL VARIABLE - 2

8 GLOBAL VARIABLE - EXAMPLE <!DOCTYPE html> <html> <body> <p>a function can access variables defined outside the function:</p> <button type="button" onclick="myfunction()">click Me!</button> <p id="demo"></p> <script> var a = 4; function myfunction() { document.getelementbyid("demo").innerhtml = a * a; } </script> </body> </html>

9 PROTOTYPE is a property of the function objects Property of the function objects It s an object Useful with Constructor functions

10 PROTOTYPE - EXAMPLE >>> var boo = function(){}; >>> typeof boo.prototype "object"

11 Augmenting prototype >>> boo.prototype.a = 1; >>> boo.prototype.sayah = function(){};

12 Overwriting the prototype >>> boo.prototype = {a: 1, b: 2};

13 Use of the prototype The prototype is used when a function is called as a constructor

14 Prototype usage var Person = function(name) { this.name = name; }; Person.prototype.say = function(){ return this.name; };

15 Prototype usage - 2 >>> var dude = new Person('dude'); >>> dude.name; "dude" >>> dude.say(); "dude"

16 Prototype usage - 3 say() is a property of the prototype object but it behaves as if it's a property of the dude object can we tell the difference?

17 Own properties vs. prototype s >>> dude.hasownproperty('name'); true >>> dude.hasownproperty('say'); false

18 isprototypeof() >>> Person.prototype.isPrototypeOf(dude); true >>> Object.prototype.isPrototypeOf(dude); true

19 JAVASCRIPT PROTOTYPE

20 CREATING PROTOTYPE

21 PROTOTYPE - 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>

22 ADDING PROPERTIES & METHOD TO OBJECTS

23 ADDING PROPERTIES - 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"); myfather.nationality = "English"; document.getelementbyid("demo").innerhtml = "My father is " + myfather.nationality; </script> </body> </html>

24 ADDING METHOD TO OBJECT

25 ADDING METHOD - 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"); myfather.name = function() { return this.firstname + " " + this.lastname; }; document.getelementbyid("demo").innerhtml = "My father is " + myfather.name(); </script> </body> </html>

26 ADDING PROPERTIES TO PROTOTYPE

27 ADDING PROPERTIES TO PROTOTYPE - 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; this.nationality = "English"; } var myfather = new Person("John", "Doe", 50, "blue"); var mymother = new Person("Sally", "Rally", 48, "green"); document.getelementbyid("demo").innerhtml = "My father is " + myfather.nationality + ". My mother is " + mymother.nationality; </script> </body> </html>

28 ADDING METHOD TO PROTOTYPE

29 ADDING METHOD TO PROTOTYPE - 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; this.name = function() { return this.firstname + " " + this.lastname }; } var myfather = new Person("John", "Doe", 50, "blue"); document.getelementbyid("demo").innerhtml = "My father is " + myfather.name(); </script> </body> </html>

30 USING THE PROTOTYPE PROPERTIES

31 USING PROTOTYPE PROPERTY - 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; } Person.prototype.nationality = "English"; var myfather = new Person("John", "Doe", 50, "blue"); document.getelementbyid("demo").innerhtml = "My father is " + myfather.nationality; </script> </body> </html>

32 USING PROTOTYPE METHOD

33 USING PROTOTYPE METHOD - 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; } Person.prototype.name = function() { return this.firstname + " " + this.lastname }; var myfather = new Person("John", "Doe", 50, "blue") document.getelementbyid("demo").innerhtml = "My father is " + myfather.name(); </script> </body> </html>

PEMROGRAMAN BERORIENTASI OBJECT. Indra Gunawan, ST., M.Kom., CEH., CHFI

PEMROGRAMAN BERORIENTASI OBJECT Indra Gunawan, ST., M.Kom., CEH., CHFI RANGE NILAI 95.00-100.00 A 90.00-94.99 A- 85.00-89.99 A/B 80.00-84.99 B+ 75.00-79.99 B 70.00-74.99 B- 65.00-69.99 B/C 60.00-64.99