hw_22_04_rgb.html 3.7 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112
  1. <header>RGB</header>
  2. <body>
  3. <script>
  4. class RGB {
  5. #r = 0
  6. #g = 0
  7. #b = 0
  8. onError(message){
  9. //throw new Error(message);
  10. console.log(`ERROR: ${message}`);
  11. }
  12. checkChannelValue(val) {
  13. val = +val
  14. if (typeof val !== "number" || val < 0 || val > 255) {
  15. this.onError(`invalid channel value: ${val}`)
  16. }
  17. }
  18. toHex(val){
  19. return val.toString(16).padStart(2, '0').toUpperCase();
  20. }
  21. get r() {
  22. return this.#r;
  23. }
  24. set r(val) {
  25. this.checkChannelValue(val);
  26. this.#r = +val;
  27. }
  28. get g() {
  29. return this.#g;
  30. }
  31. set g(val) {
  32. this.checkChannelValue(val);
  33. this.#g = +val;
  34. }
  35. get b() {
  36. return this.#b;
  37. }
  38. set b(val) {
  39. this.checkChannelValue(val);
  40. this.#b = +val;
  41. }
  42. set hex(val) {
  43. let matchColors = /^#([0-9A-Fa-f]{2})([0-9A-Fa-f]{2})([0-9A-Fa-f]{2})$/;
  44. let match = matchColors.exec(val);
  45. if (match !== null && match.length == 4) {
  46. this.r = parseInt(`${match[1]}`, 16);
  47. this.g = parseInt(`${match[2]}`, 16);
  48. this.b = parseInt(`${match[3]}`, 16);
  49. return;
  50. }
  51. this.onError(`incorrect hex color parameter: ${val}`);
  52. }
  53. get hex() {
  54. return `#${this.toHex(this.r)}${this.toHex(this.g)}${this.toHex(this.b)}`;
  55. }
  56. set rgb(val) {
  57. let matchColors = /^rgb\((\d{1,3}), (\d{1,3}), (\d{1,3})\)$/;
  58. let match = matchColors.exec(val);
  59. if (match !== null && match.length == 4) {
  60. this.r = match[1];
  61. this.g = match[2];
  62. this.b = match[3];
  63. return;
  64. }
  65. this.onError(`incorrect rgb color parameter: ${val}`);
  66. }
  67. get rgb() {
  68. return `rgb(${this.r}, ${this.g}, ${this.b})`;
  69. }
  70. constructor(colorString) {
  71. if (colorString) {
  72. if (colorString.startsWith(`#`))
  73. this.hex = colorString;
  74. else
  75. this.rgb = colorString;
  76. }
  77. }
  78. }
  79. function assertAreEqual(actual, expected) {
  80. if (actual != expected)
  81. throw new Error(`not expected value. actual: ${actual}, expected: ${expected}`);
  82. }
  83. let color = new RGB('#AABBFF');
  84. assertAreEqual(color.hex, '#AABBFF');
  85. color = new RGB('rgb(55, 49, 121)');
  86. assertAreEqual(color.rgb, `rgb(55, 49, 121)`);
  87. assertAreEqual(color.hex, `#373179`);
  88. color.rgb = `rgb(55, 49, 121)`;
  89. assertAreEqual(color.r, 55);
  90. assertAreEqual(color.g, 49);
  91. assertAreEqual(color.b, 121);
  92. assertAreEqual(color.rgb, `rgb(55, 49, 121)`);
  93. assertAreEqual(color.hex, `#373179`);
  94. const rgb = new RGB()
  95. rgb.r = 15
  96. rgb.g = 128
  97. rgb.b = 192
  98. console.log(rgb.hex) //#0F80C0
  99. console.log(rgb.rgb) //rgb(15,128,192)
  100. rgb.hex = '#203040'
  101. console.log(rgb.rgb) //rgb(32, 48, 64)
  102. rgb.rgb = 'rgb(100, 90, 50)'
  103. console.log(rgb.r, rgb.g, rgb.b) //100, 90, 50
  104. rgb.r = 1000 //RangeError
  105. rgb.hex = 'дичь' //SyntaxError
  106. </script>
  107. </body>