Home Explore Help
Sign In
GennadySht
/
HomeWork
Watch 1
Star 0
Fork 0
Files Issues 4 Pull Requests 0 Wiki
Browse Source

HW<22>done

Gennadysht 2 years ago
parent
751c79a9dc
commit
b548eca84b
2 changed files with 200 additions and 29 deletions
Split View Show Diff Stats
  1. 44 29
      js/22/hw_22_04_rgb.html
  2. 156 0
      js/22/hw_22_05_rgbA.html

+ 44 - 29
js/22/hw_22_04_rgb.html
View File 

@@ -1,4 +1,4 @@
 
-<header></header>
 
+<header>RGB</header>
 
 
 <body>
 
     <script>
 
@@ -6,12 +6,19 @@
 
             #r = 0
 
             #g = 0
 
             #b = 0
 
+            onError(message){
 
+                //throw new Error(message);
 
+                console.log(`ERROR: ${message}`);
 
+            }
 
             checkChannelValue(val) {
 
                 val = +val
 
                 if (typeof val !== "number" || val < 0 || val > 255) {
 
-                    throw new Error(`invalid channel value: ${val}`)
 
+                    this.onError(`invalid channel value: ${val}`)
 
                 }
 
             }
 
+            toHex(val){
 
+                    return val.toString(16).padStart(2, '0').toUpperCase();
 
+            }
 
             get r() {
 
                 return this.#r;
 
             }
 
@@ -42,36 +49,34 @@
 
                     this.b = parseInt(`${match[3]}`, 16);
 
                     return;
 
                 }
 
-                throw new Error(`incorrect hex color parameter: ${val}`);
 
+                this.onError(`incorrect hex color parameter: ${val}`);
 
             }
 
             get hex() {
 
-                return `#${this.r.toString(16).toUpperCase()}${this.g.toString(16).toUpperCase()}${this.b.toString(16).toUpperCase()}`;
 
+                return `#${this.toHex(this.r)}${this.toHex(this.g)}${this.toHex(this.b)}`;
 
             }
 
             set rgb(val) {
 
                 let matchColors = /^rgb\((\d{1,3}), (\d{1,3}), (\d{1,3})\)$/;
 
                 let match = matchColors.exec(val);
 
-                if (match !== null && match.length == 3) {
 
+                if (match !== null && match.length == 4) {
 
                     this.r = match[1];
 
                     this.g = match[2];
 
                     this.b = match[3];
 
                     return;
 
                 }
 
-                throw new Error(`incorrect rgb color parameter: ${val}`);
 
+                this.onError(`incorrect rgb color parameter: ${val}`);
 
             }
 
             get rgb() {
 
                 return `rgb(${this.r}, ${this.g}, ${this.b})`;
 
             }
 
 
-           /* constructor(r, g, b) {
 
-                this.r = r;
 
-                this.g = g;
 
-                this.b = b;
 
-            }*/
 
+          
             constructor(colorString) {
 
-                if (colorString.startsWith("#"))
 
-                    this.hex = colorString;
 
-                else
 
-                    this.rgb = colorString;
 
+                if (colorString) {
 
+                    if (colorString.startsWith(`#`))
 
+                        this.hex = colorString;
 
+                    else
 
+                        this.rgb = colorString;
 
+                }
 
             }
 
 
         }
 
@@ -79,19 +84,29 @@
 
             if (actual != expected)
 
                 throw new Error(`not expected value. actual: ${actual}, expected: ${expected}`);
 
         }
 
-        //let color = new RGB('#AABBFF');
 
-        //assertAreEqual(color.hex, '#AABBFF');
 
-        let color = new RGB ('rgb(55, 49, 121)');
 
-        assertAreEqual(color.rgb, ('55, 49, 121'));
 
+        let color = new RGB('#AABBFF');
 
+        assertAreEqual(color.hex, '#AABBFF');
 
+        color = new RGB('rgb(55, 49, 121)');
 
+        assertAreEqual(color.rgb, `rgb(55, 49, 121)`);
 
         assertAreEqual(color.hex, `#373179`);
 
-        //*color.rgb = `rgb(55, 49, 121)`;
 
-        //assertAreEqual(color.r, 55);
 
-        //assertAreEqual(color.g, 49);
 
-       // assertAreEqual(color.b, 121);
 
-        //assertAreEqual(color.rgb, `rgb(55, 49, 121)`);
 
-        //assertAreEqual(color.hex, `#373179`);
 
-    </script>
 
-</body>
 
-
 
-
 
+        color.rgb = `rgb(55, 49, 121)`;
 
+        assertAreEqual(color.r, 55);
 
+        assertAreEqual(color.g, 49);
 
+        assertAreEqual(color.b, 121);
 
+        assertAreEqual(color.rgb, `rgb(55, 49, 121)`);
 
+        assertAreEqual(color.hex, `#373179`);
 
+        const rgb = new RGB()
 
+        rgb.r = 15
 
+        rgb.g = 128
 
+        rgb.b = 192
 
+        console.log(rgb.hex) //#0F80C0
 
+        console.log(rgb.rgb) //rgb(15,128,192)
 
+        rgb.hex = '#203040'
 
+        console.log(rgb.rgb) //rgb(32, 48, 64)
 
+        rgb.rgb = 'rgb(100, 90, 50)'
 
+        console.log(rgb.r, rgb.g, rgb.b) //100, 90, 50
 
 
+        rgb.r = 1000   //RangeError
 
+        rgb.hex = 'дичь' //SyntaxError
 
+    </script>
 
+</body>

+ 156 - 0
js/22/hw_22_05_rgbA.html
View File 

@@ -0,0 +1,156 @@
 
+<header>RGBA</header>
 
+
 
+<body>
 
+    <script>
 
+        class RGB {
 
+            #r = 0
 
+            #g = 0
 
+            #b = 0
 
+            onError(message) {
 
+                //throw new Error(message);
 
+                console.log(`ERROR: ${message}`);
 
+            }
 
+            toHex(val) {
 
+                return val.toString(16).padStart(2, '0').toUpperCase();
 
+            }
 
+            checkChannelValue(val) {
 
+                val = +val
 
+                if (typeof val !== "number" || val < 0 || val > 255) {
 
+                    this.onError(`invalid channel value: ${val}`)
 
+                }
 
+            }
 
+            get r() {
 
+                return this.#r;
 
+            }
 
+            set r(val) {
 
+                this.checkChannelValue(val);
 
+                this.#r = +val;
 
+            }
 
+            get g() {
 
+                return this.#g;
 
+            }
 
+            set g(val) {
 
+                this.checkChannelValue(val);
 
+                this.#g = +val;
 
+            }
 
+            get b() {
 
+                return this.#b;
 
+            }
 
+            set b(val) {
 
+                this.checkChannelValue(val);
 
+                this.#b = +val;
 
+            }
 
+            set hex(val) {
 
+                let matchColors = /^#([0-9A-Fa-f]{2})([0-9A-Fa-f]{2})([0-9A-Fa-f]{2})$/;
 
+                let match = matchColors.exec(val);
 
+                if (match !== null && match.length == 4) {
 
+                    this.r = parseInt(`${match[1]}`, 16);
 
+                    this.g = parseInt(`${match[2]}`, 16);
 
+                    this.b = parseInt(`${match[3]}`, 16);
 
+                    return;
 
+                }
 
+                this.onError(`incorrect hex color parameter: ${val}`);
 
+            }
 
+            get hex() {
 
+                return `#${this.toHex(this.r)}${this.toHex(this.g)}${this.toHex(this.b)}`;
 
+            }
 
+            set color(val) {
 
+                let matchColors = /^rgb\((\d{1,3}), (\d{1,3}), (\d{1,3})\)$/;
 
+                let match = matchColors.exec(val);
 
+                if (match !== null && match.length == 4) {
 
+                    this.r = match[1];
 
+                    this.g = match[2];
 
+                    this.b = match[3];
 
+                    return;
 
+                }
 
+                this.onError(`incorrect rgb color parameter: ${val}`);
 
+            }
 
+            get color() {
 
+                return `rgb(${this.r}, ${this.g}, ${this.b})`;
 
+            }
 
+
 
+
 
+            constructor(colorString) {
 
+                if (colorString) {
 
+                    if (colorString.startsWith(`#`))
 
+                        this.hex = colorString;
 
+                    else
 
+                        this.color = colorString;
 
+                }
 
+            }
 
+
 
+        }
 
+        function assertAreEqual(actual, expected) {
 
+            if (actual != expected)
 
+                throw new Error(`not expected value. actual: ${actual}, expected: ${expected}`);
 
+        }
 
+        //////////////////////////////////////////////////////////////////////
 
+
 
+        class RGBA extends RGB {
 
+            #a = 0;
 
+
 
+            get a() {
 
+                return this.#a;
 
+            }
 
+            set a(val) {
 
+                this.checkChannelValue(val * 255);
 
+                this.#a = +val;
 
+            }
 
+            set color(val) {
 
+                if (val.startsWith('rgb(')) {
 
+                    super.color = val;
 
+                    this.#a = 0;
 
+                    return;
 
+                }
 
+                else {
 
+                    let matchColors = /^rgba\((\d{1,3}), *(\d{1,3}), *(\d{1,3})(?:, *(\d*\.?\d+))?\)$/;
 
+                    let match = matchColors.exec(val);
 
+                    if (match !== null && match.length == 5) {
 
+                        this.r = match[1];
 
+                        this.g = match[2];
 
+                        this.b = match[3];
 
+                        this.a = match[4];
 
+                        return;
 
+                    }
 
+                }
 
+                this.onError(`incorrect rgba color parameter: ${val}`);
 
+            }
 
+            get color() {
 
+                return `rgba(${this.r}, ${this.g}, ${this.b}, ${this.a.toFixed(3)})`;
 
+            }
 
+            set hex(val) {
 
+                let matchColors = /^#([0-9A-Fa-f]{2})([0-9A-Fa-f]{2})([0-9A-Fa-f]{2})([0-9A-Fa-f]{2})?$/;
 
+                let match = matchColors.exec(val);
 
+                if (match !== null && match.length == 5) {
 
+                    if (!match[4]) {
 
+                        super.hex = val;
 
+                        this.#a = 0;
 
+                    }
 
+                    else {
 
+                        super.hex = `#${match[1]}${match[2]}${match[3]}`;
 
+                        this.a = parseInt(`${match[4]}`, 16) / 255;
 
+                    }
 
+                    return;
 
+                }
 
+                this.onError(`incorrect hex color parameter: ${val}`);
 
+            }
 
+            get hex() {
 
+                return `${super.hex}${this.toHex(Math.round(this.a * 255))}`;
 
+            }
 
+        }
 
+        const rgba = new RGBA
 
+        rgba.hex = '#80808080'
 
+        console.log(rgba.a) //0.5
 
+        console.log(rgba.color) //rgba(128,128,128,0.5)
 
+        rgba.hex = '#808080'
 
+        console.log(rgba.color) //rgba(128,128,128,0.000)
 
+        rgba.r = 192
 
+        rgba.a = 0.25
 
+        console.log(rgba.hex)  //#C0808040
 
+        rgba.color = 'rgba(1, 2, 3, 0.70)'
 
+        rgba.b *= 10
 
+        console.log(rgba.hex)  //#01021EB3
 
+        rgba.color = 'rgb(1, 2, 3)'
 
+        console.log(rgba.hex)  
+    </script>
 
+</body>