Skip to content

Commit def4407

Browse files
elfgoddelfgodd
committed
Section 19: JS Classes - Syntactical Sugar
1 parent 99087f7 commit def4407

4 files changed

Lines changed: 118 additions & 10 deletions

File tree

‎19-Prototypes-Classes-And-The-New-Operator/04/app.js‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -58,7 +58,7 @@ Color.prototype.hex = function () {
5858
return '#' + ((1 << 24) + (r << 16) + (g << 8) + b).toString(16).slice(1)
5959
}
6060

61-
Color.protoype.rgba = function (a = 1.0) {
61+
Color.prototype.rgba = function (a = 1.0) {
6262
const { r, g, b } = this
6363
return `rgba(${r}, ${g}, ${b}, ${a})`
6464
}

‎19-Prototypes-Classes-And-The-New-Operator/05/app.js‎

Lines changed: 56 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,56 @@
1+
// ******************************
2+
// JS Classes - Syntactical Sugar ******************************
3+
4+
console.log('JS Classes - Syntactical Sugar')
5+
console.log('\n')
6+
7+
// Example 1
8+
9+
class Color {
10+
// A constructor is a function that will execute immediately
11+
// whenever a new color is created
12+
constructor(r, g, b, name) {
13+
console.log('INSIDE CONSTRUCTOR!')
14+
console.log(r, g, b)
15+
16+
this.r = r
17+
this.b = b
18+
this.g = g
19+
this.name = name
20+
}
21+
22+
greet() {
23+
return `HELLO FROM ${this.name}`
24+
}
25+
innerRGB() {
26+
const {r, g, b} = this
27+
return `${r}, ${g}, ${b}`
28+
}
29+
rgb() {
30+
return `rgb(${this.innerRGB()})`
31+
}
32+
rgba(a = 1.0) {
33+
return `rgba(${this.innerRGB()}, ${a})`
34+
}
35+
hex() {
36+
const { r, g, b } = this
37+
return '#' + ((1 << 24) + (r << 16) + (g << 8) + b).toString(16).slice(1)
38+
}
39+
}
40+
41+
const red = new Color(255, 67, 89, 'tomato')
42+
console.log(red)
43+
console.log(red.greet())
44+
console.log(red.rgb())
45+
console.log(red.rgba());
46+
console.log(red.hex())
47+
48+
console.log('\n')
49+
const white = new Color(255, 255, 255, 'white')
50+
console.log(white)
51+
console.log(white.hex())
52+
console.log(white.hex === red.hex)
53+
54+
// Run in the browser console
55+
document.body.style.backgroundColor = red.rgba(0.5)
56+
// document.body.style.backgroundColor = red.rgba(0.1)

‎19-Prototypes-Classes-And-The-New-Operator/05/index.html‎

Lines changed: 14 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,14 @@
1+
<!DOCTYPE html>
2+
<html lang="en">
3+
<head>
4+
<meta charset="UTF-8" />
5+
<meta http-equiv="X-UA-Compatible" content="IE=edge" />
6+
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
7+
<meta http-equiv="Permissions-Policy" content="interest-cohort=()">
8+
9+
<title>JavaScript</title>
10+
</head>
11+
<body>
12+
<script src="app.js"></script>
13+
</body>
14+
</html>

‎19-Prototypes-Classes-And-The-New-Operator/README.md‎

Lines changed: 47 additions & 9 deletions
Original file line numberDiff line numberDiff line change
@@ -4,7 +4,7 @@
44

55
https://developer.mozilla.org/en-US/docs/Learn/JavaScript/Objects/Object_prototypes
66

7-
**__proto__**, So rather than having a separate method on every single array called push, there is one prototype and each array has a reference to that prototype with this special property **__proto__**. And we actually can see this in other types of objects in JavaScript.
7+
\***\*proto\*\***, So rather than having a separate method on every single array called push, there is one prototype and each array has a reference to that prototype with this special property \***\*proto\*\***. And we actually can see this in other types of objects in JavaScript.
88

99
```javascript
1010
console.log(Array.prototype)
@@ -25,18 +25,18 @@ But it all has to do with this one central idea, which is organizing our code, d
2525
## 3. Factory Functions
2626

2727
```javascript
28-
function makeColor(r,g,b) {
28+
function makeColor(r, g, b) {
2929
const color = {}
3030
color.r = r
3131
color.g = g
3232
color.b = b
33-
color.rgb = function() {
34-
const {r, g, b} = this
33+
color.rgb = function () {
34+
const { r, g, b } = this
3535
return `rgb(${r}, ${g}, ${b})`
3636
}
3737
color.hex = function () {
38-
const {r, g, b} = this
39-
return '#' + ((1 << 24) + (r << 16) + (g << 8) + b).toString(16).slice(1)
38+
const { r, g, b } = this
39+
return '#' + ((1 << 24) + (r << 16) + (g << 8) + b).toString(16).slice(1)
4040
}
4141
return color
4242
}
@@ -54,8 +54,46 @@ function Color(r, g, b) {
5454
this.r = r
5555
this.g = g
5656
this.b = b
57-
console.log(this);
57+
console.log(this)
5858
}
5959

60-
const color1 = new Color(255,0,0)
61-
```
60+
const color1 = new Color(255, 0, 0)
61+
```
62+
63+
## 5. JS Classes - Syntactical Sugar
64+
65+
```javascript
66+
class Color {
67+
// A constructor is a function that will execute immediately
68+
// whenever a new color is created
69+
constructor(r, g, b, name) {
70+
console.log('INSIDE CONSTRUCTOR!')
71+
console.log(r, g, b)
72+
73+
this.r = r
74+
this.b = b
75+
this.g = g
76+
this.name = name
77+
}
78+
79+
greet() {
80+
return `HELLO FROM ${this.name}`
81+
}
82+
innerRGB() {
83+
const { r, g, b } = this
84+
return `${r}, ${g}, ${b}`
85+
}
86+
rgb() {
87+
return `rgb(${this.innerRGB()})`
88+
}
89+
rgba(a = 1.0) {
90+
return `rgba(${this.innerRGB()}, ${a})`
91+
}
92+
hex() {
93+
const { r, g, b } = this
94+
return '#' + ((1 << 24) + (r << 16) + (g << 8) + b).toString(16).slice(1)
95+
}
96+
}
97+
98+
const red = new Color(255, 67, 89, 'tomato')
99+
```

0 commit comments

Comments
 (0)