Skip to content

Navigation Menu

Sign in
Appearance settings

Search code, repositories, users, issues, pull requests...

Provide feedback

We read every piece of feedback, and take your input very seriously.

Saved searches

Use saved searches to filter your results more quickly
Sign up
Appearance settings

Commit 53de6ff

Browse files
Learn Javascript OOP
1 parent eb69d21 commit 53de6ff

14 files changed

+468
-2
lines changed

‎JavaScript-Basic/Getter-dan-Setter.html

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -18,7 +18,7 @@
1818
return `${this.firstName} ${this.lastName}`;
1919
},
2020
set fullName(value) {
21-
console.info(`Merubah `)
21+
console.info(`Merubah v `)
2222
}
2323
}
2424

‎JavaScript-OOP/Class-Field.html

Lines changed: 96 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,96 @@
1+
<!DOCTYPE html>
2+
<html lang="en">
3+
4+
<head>
5+
<meta charset="UTF-8">
6+
<meta http-equiv="X-UA-Compatible" content="IE=edge">
7+
<meta name="viewport" content="width=device-width, initial-scale=1.0">
8+
<title>Class Field</title>
9+
</head>
10+
11+
<body>
12+
<script>
13+
// Public Class Field
14+
class thisPublicField {
15+
// Create field class
16+
firstName;
17+
lastName;
18+
balance = 0;
19+
20+
constructor(firstName, lastName) {
21+
this.firstName = firstName;
22+
this.lastName = lastName;
23+
}
24+
}
25+
26+
const publicClass = new thisPublicField("Eko", "Kurniawan");
27+
console.log(publicClass);
28+
29+
// Private Class Field, can only be accessed in the class only
30+
31+
class thisPrivateField {
32+
//Create field class
33+
#counter = 0; //To create a private class must add #
34+
35+
// method
36+
increment() {
37+
this.#counter++;
38+
}
39+
40+
decrement() {
41+
this.#counter--;
42+
}
43+
44+
get() {
45+
return this.#counter;
46+
}
47+
}
48+
49+
const counter = new thisPrivateField();
50+
51+
counter.increment();
52+
counter.increment();
53+
counter.increment();
54+
counter.increment();
55+
counter.increment();
56+
57+
// counter.counter = 100; ==> error
58+
59+
console.log(counter.get());
60+
61+
// Private Method
62+
class thisPrivateMethod {
63+
say(name) {
64+
if (name) {
65+
this.#sayWithName(name);
66+
} else {
67+
this.#sayWithoutName();
68+
}
69+
}
70+
71+
#sayWithoutName() {
72+
console.log("Hello");
73+
}
74+
75+
#sayWithName(name) {
76+
console.log(`Hello ${name}`);
77+
}
78+
}
79+
80+
const adrian = new thisPrivateMethod();
81+
adrian.say("Adrian");
82+
83+
//Static Class Field, jadi field nya milik class, bukan lagi miliki object
84+
class ThisStaticField {
85+
static nameTitle = "Learn OOP";
86+
static version = 1.0;
87+
static author = "Adrian Miftahul Haq";
88+
}
89+
90+
console.info(ThisStaticField.nameTitle);
91+
console.info(ThisStaticField.version);
92+
console.info(ThisStaticField.author);
93+
</script>
94+
</body>
95+
96+
</html>

‎JavaScript-OOP/Class-Inheritance.html

Lines changed: 34 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,34 @@
1+
<!DOCTYPE html>
2+
<html lang="en">
3+
4+
<head>
5+
<meta charset="UTF-8">
6+
<meta http-equiv="X-UA-Compatible" content="IE=edge">
7+
<meta name="viewport" content="width=device-width, initial-scale=1.0">
8+
<title>Class Inheritance</title>
9+
</head>
10+
11+
<body>
12+
<script>
13+
class Employee {
14+
constructor(name) {
15+
this.name = name
16+
}
17+
sayHello(name) {
18+
console.info(`Hello ${name}, my name is Employee ${this.name}`);
19+
}
20+
}
21+
class Manager extends Employee {
22+
sayHello(name) {
23+
console.info(`Hello ${name}, my name is Manager ${this.name}`);
24+
}
25+
}
26+
27+
const faiza = new Employee()
28+
faiza.name = "Faiza";
29+
faiza.sayHello("Saskia")
30+
console.log(faiza);
31+
</script>
32+
</body>
33+
34+
</html>

‎JavaScript-OOP/Class.html

Lines changed: 22 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,22 @@
1+
<!DOCTYPE html>
2+
<html lang="en">
3+
4+
<head>
5+
<meta charset="UTF-8">
6+
<meta http-equiv="X-UA-Compatible" content="IE=edge">
7+
<meta name="viewport" content="width=device-width, initial-scale=1.0">
8+
<title>Class</title>
9+
</head>
10+
11+
<body>
12+
<script>
13+
class Person {
14+
15+
}
16+
17+
const adrian = new Person();
18+
console.log(adrian);
19+
</script>
20+
</body>
21+
22+
</html>

‎JavaScript-OOP/Construct-Class.html

Lines changed: 32 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,32 @@
1+
<!DOCTYPE html>
2+
<html lang="en">
3+
4+
<head>
5+
<meta charset="UTF-8">
6+
<meta http-equiv="X-UA-Compatible" content="IE=edge">
7+
<meta name="viewport" content="width=device-width, initial-scale=1.0">
8+
<title>Construct Class</title>
9+
</head>
10+
11+
<body>
12+
<script>
13+
class Person {
14+
constructor(name) {
15+
// Property in class
16+
this.name = name;
17+
}
18+
19+
// create a Method
20+
sayHello(name) {
21+
console.info(`Hello ${name}, my name ${this.name}`);
22+
23+
}
24+
}
25+
26+
const adrian = new Person(`Adrian`);
27+
console.log(adrian);
28+
adrian.sayHello("Faiza")
29+
</script>
30+
</body>
31+
32+
</html>

‎JavaScript-OOP/Construct-Func.html

Lines changed: 35 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,35 @@
1+
<!DOCTYPE html>
2+
<html lang="en">
3+
4+
<head>
5+
<meta charset="UTF-8">
6+
<meta http-equiv="X-UA-Compatible" content="IE=edge">
7+
<meta name="viewport" content="width=device-width, initial-scale=1.0">
8+
<title>Construct Function</title>
9+
</head>
10+
11+
<body>
12+
<script>
13+
function Person(firstName, lastName) { //Untuk memmbuat construct func, diawal nama func harus huruf besar
14+
15+
// How to create property
16+
this.firstName = firstName;
17+
this.lastName = lastName;
18+
19+
// How to Create Method
20+
this.sayHello = function (name) {
21+
console.info(`Hello ${name}, my name ${this.firstName}`);
22+
}
23+
}
24+
25+
//Memanggil Class / Construct Func
26+
const adrian = new Person("Adriana", "Monica"); //cara untuk memanggil construct function
27+
console.log(adrian);
28+
29+
//Memanggil method
30+
adrian.sayHello("Tiara");
31+
32+
</script>
33+
</body>
34+
35+
</html>
Lines changed: 31 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,31 @@
1+
<!DOCTYPE html>
2+
<html lang="en">
3+
4+
<head>
5+
<meta charset="UTF-8">
6+
<meta http-equiv="X-UA-Compatible" content="IE=edge">
7+
<meta name="viewport" content="width=device-width, initial-scale=1.0">
8+
<title>Construct Inheritance</title>
9+
</head>
10+
11+
<body>
12+
<script>
13+
// construct inheriteance adalah construct func yang dapat memanggil/menggunakan construct func lain
14+
function Employee(firstName) {
15+
this.firstName = firstName;
16+
this.sayHello = function (name) {
17+
console.info(`Hello ${name}, my name ${this.firstName}`);
18+
}
19+
}
20+
21+
function Manager(firstName, lastName) {
22+
this.lastName = lastName;
23+
Employee.call(this, firstName); // cara menggunakan construct inheritance , dengan namaFun call(dimanaObejct, parameter)
24+
}
25+
26+
const Della = new Manager("Della", "Nuramalia");
27+
console.info(Della);
28+
</script>
29+
</body>
30+
31+
</html>

‎JavaScript-OOP/Getter-dan-Setter.html

Lines changed: 37 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,37 @@
1+
<!DOCTYPE html>
2+
<html lang="en">
3+
4+
<head>
5+
<meta charset="UTF-8">
6+
<meta http-equiv="X-UA-Compatible" content="IE=edge">
7+
<meta name="viewport" content="width=device-width, initial-scale=1.0">
8+
<title>Class Getter dan Setter</title>
9+
</head>
10+
11+
<body>
12+
<script>
13+
class Person {
14+
constructor(firstName, lastName) {
15+
this.firstName = firstName
16+
this.lastName = lastName
17+
}
18+
19+
get fullName() {
20+
return `${this.firstName} ${this.lastName}`;
21+
}
22+
23+
set fullName(value) {
24+
const result = value.split('');
25+
this.firstName = result[0];
26+
this.lastName = result[1];
27+
}
28+
}
29+
30+
const Adrian = new Person("Adrian", "Miftahul");
31+
console.log(Adrian);
32+
console.log(Adrian.fullName);
33+
34+
</script>
35+
</body>
36+
37+
</html>
Lines changed: 60 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,60 @@
1+
<!DOCTYPE html>
2+
<html lang="en">
3+
4+
<head>
5+
<meta charset="UTF-8">
6+
<meta http-equiv="X-UA-Compatible" content="IE=edge">
7+
<meta name="viewport" content="width=device-width, initial-scale=1.0">
8+
<title>Prototype Inheritance</title>
9+
</head>
10+
11+
<body>
12+
<script>
13+
/**
14+
*
15+
* INI SALAH
16+
*
17+
function Employee(name) {
18+
this.name = name;
19+
}
20+
function Manager(name) {
21+
this.name = name;
22+
}
23+
24+
Manager.prototype = Employee.prototype; // kerana bukan jadi pewarisan, tapi malah nge replace prototype Manager menjadi prototype Employee
25+
26+
Manager.prototype.sayHello = function (name) {
27+
console.info(`Hello ${name}, my name is Manager ${this.name}`)
28+
}
29+
30+
Employee.prototype.sayHello = function (name) {
31+
console.info(`Hello ${name}, my name is Employee ${this.name}`)
32+
}
33+
**/
34+
35+
function Employee(name) {
36+
this.name = name;
37+
}
38+
function Manager(name) {
39+
this.name = name;
40+
}
41+
42+
Manager.prototype = Object.create(Employee.prototype); // kerana bukan jadi pewarisan, tapi malah nge replace prototype Manager menjadi prototype Employee
43+
44+
Manager.prototype.sayHello = function (name) {
45+
console.info(`Hello ${name}, my name is Manager ${this.name}`)
46+
}
47+
48+
Employee.prototype.sayHello = function (name) {
49+
console.info(`Hello ${name}, my name is Employee ${this.name}`)
50+
}
51+
52+
const employee = new Employee("Asuna")
53+
employee.sayHello("Nino")
54+
55+
const manager = new Manager("Dilla")
56+
manager.sayHello("Monica")
57+
</script>
58+
</body>
59+
60+
</html>

0 commit comments

Comments
(0)

AltStyle によって変換されたページ (->オリジナル) /