2 Commity ae5905029e ... a3fff75897

Autor SHA1 Wiadomość Data
  Oleg a3fff75897 ООП в функциональном стиле 6 lat temu
  Lantik 05052a51e3 Модуль 2 6 lat temu
4 zmienionych plików z 350 dodań i 0 usunięć
  1. 16 0
      JS_20.03.2018/index.html
  2. 74 0
      JS_20.03.2018/script.js
  3. 92 0
      module2/index.html
  4. 168 0
      module2/script.js

+ 16 - 0
JS_20.03.2018/index.html

@@ -0,0 +1,16 @@
+<!DOCTYPE html>
+<html lang="en">
+<head>
+	<meta charset="UTF-8">
+	<title>document</title>
+</head>
+<body>
+
+	<canvas id="canvasLine"></canvas>
+	<canvas id="canvasCircle"></canvas>
+	<canvas id="canvasRect"></canvas>
+
+	<script src="https://code.jquery.com/jquery-3.2.1.min.js"></script>
+	<script type="text/javascript" src="script.js"></script>
+</body>
+</html>

+ 74 - 0
JS_20.03.2018/script.js

@@ -0,0 +1,74 @@
+	function Figure(x,y,color) {
+		this.x = x;
+		this.y = y;
+		this.color = color;
+	};
+
+
+	function Circle(x,y,r,color) {
+		Figure.call(this,x,y,color);
+		this.r = r;
+	};
+
+	Circle.prototype.draw = function(par) {
+		par.fillStyle = this.color;
+		par.arc(this.x, this.y, this.r, 0, Math.PI*2, true);
+		par.fill();
+	};
+
+
+	function Rect(x,y,w,h,color) {
+		Figure.call(this,x,y,color);
+		this.w = w;
+		this.h = h;
+	};
+
+	Rect.prototype.draw = function(par) {
+		par.fillStyle = this.color;
+		par.fillRect(this.x, this.y, this.x+this.w, this.y+this.h);
+	};
+	
+
+	function Line(x1,y1,x2,y2,color) {
+		Figure.call(this,x1,y1,color);
+		this.x2 = x2;
+		this.y2 = y2;
+	};
+
+	Line.prototype.draw = function(par) {
+		par.strokeStyle = this.color;
+		par.moveTo(this.x,this.y);
+		par.lineTo(this.x2,this.y2);	
+		par.stroke();	   
+	};
+
+
+	function Canvas(id) {
+
+		this.add = function(figure) {
+
+			var canvas = document.getElementById(id),
+				ctx = canvas.getContext("2d");
+
+			figure.draw(ctx);
+		};
+	};
+
+
+
+	//------------------//
+
+	var line = new Line(25, 75, 275, 75, 'red'); // x1, y1, x2, y2, color
+	var circle = new Circle(120, 100, 50, 'green'); // x, y, r, color
+	var rect = new Rect(100, 30, 50, 100, 'blue'); // x, y, w, h, color
+
+	var drawArea = new Canvas('canvasLine');
+	drawArea.add(line);
+
+	var drawArea = new Canvas('canvasCircle');
+	drawArea.add(circle);
+
+	var drawArea = new Canvas('canvasRect');
+	drawArea.add(rect);
+
+

+ 92 - 0
module2/index.html

@@ -0,0 +1,92 @@
+<!DOCTYPE html>
+<html lang="en">
+<head>
+	<meta charset="UTF-8">
+	<title>document</title>
+	<script src="https://code.jquery.com/jquery-3.2.1.min.js"></script>
+	<script type="text/javascript" src="script.js"></script>
+</head>
+<body>
+
+	<div id="diagramma"></div>
+	<div>
+		<table>
+			<tbody>
+				<tr>
+					<td></td><td></td><td></td><td></td><td></td>
+					<td></td><td></td><td></td><td></td><td></td>
+					<td></td><td></td><td></td><td></td><td></td>
+					<td></td>
+				</tr>
+				<tr>
+					<td></td><td></td><td></td><td></td><td></td>
+					<td></td><td></td><td></td><td></td><td></td>
+					<td></td><td></td><td></td><td></td><td></td>
+					<td></td>
+				</tr>
+				<tr>
+					<td></td><td></td><td></td><td></td><td></td>
+					<td></td><td></td><td></td><td></td><td></td>
+					<td></td><td></td><td></td><td></td><td></td>
+					<td></td>
+				</tr>
+				<tr>
+					<td></td><td></td><td></td><td></td><td></td>
+					<td></td><td></td><td></td><td></td><td></td>
+					<td></td><td></td><td></td><td></td><td></td>
+					<td></td>
+				</tr>
+				<tr>
+					<td></td><td></td><td></td><td></td><td></td>
+					<td></td><td></td><td></td><td></td><td></td>
+					<td></td><td></td><td></td><td></td><td></td>
+					<td></td>
+				</tr>
+				<tr>
+					<td></td><td></td><td></td><td></td><td></td>
+					<td></td><td></td><td></td><td></td><td></td>
+					<td></td><td></td><td></td><td></td><td></td>
+					<td></td>
+				</tr>
+				<tr>
+					<td></td><td></td><td></td><td></td><td></td>
+					<td></td><td></td><td></td><td></td><td></td>
+					<td></td><td></td><td></td><td></td><td></td>
+					<td></td>
+				</tr>
+				<tr>
+					<td></td><td></td><td></td><td></td><td></td>
+					<td></td><td></td><td></td><td></td><td></td>
+					<td></td><td></td><td></td><td></td><td></td>
+					<td></td>
+				</tr>
+				<tr>
+					<td></td><td></td><td></td><td></td><td></td>
+					<td></td><td></td><td></td><td></td><td></td>
+					<td></td><td></td><td></td><td></td><td></td>
+					<td></td>
+				</tr>
+				<tr>
+					<td></td><td></td><td></td><td></td><td></td>
+					<td></td><td></td><td></td><td></td><td></td>
+					<td></td><td></td><td></td><td></td><td></td>
+					<td></td>
+				</tr>
+				<tr>
+					<td></td><td></td><td></td><td></td><td></td>
+					<td></td><td></td><td></td><td></td><td></td>
+					<td></td><td></td><td></td><td></td><td></td>
+					<td></td>
+				</tr>
+				<tr>
+					<td></td><td></td><td></td><td></td><td></td>
+					<td></td><td></td><td></td><td></td><td></td>
+					<td></td><td></td><td></td><td></td><td></td>
+					<td></td>
+				</tr>
+				
+			</tbody>
+		</table>
+	</div>
+</body>
+</html>

+ 168 - 0
module2/script.js

@@ -0,0 +1,168 @@
+
+
+// 1. Напишите функцию, которая возвращает массив, 
+// очищенный от пустых значений, не меняя исходный
+
+var arr = [0, '0', '', null, {}, [], [1, 2, 3]],
+	arr2 = [];
+
+function clean(arr) {
+
+	for(var i = 0; i < arr.length; i++) {
+
+		if (arr[i] !== "") {
+
+			if (Array.isArray(arr[i])) {
+				if (arr[i].length !== 0) {
+					arr2.push(arr[i]);
+				}
+				
+			} else if (arr[i] in arr || arr[i] == null) {
+				arr2.push(arr[i]);
+			}
+		}
+	}
+
+	return arr2;
+};
+
+clean(arr);
+
+// 2. Напишите функцию-аналог splice, 
+// не используя никакие методы массива.
+
+var arr1 = ['Привет', 'как', 'дела?'],
+	arr2 = [];
+
+function newSplice(arr, index, deleteCount, ...elements) {
+
+	if (elements.length == 0) {
+
+		for(var i = 0; i < arr.length; i++) {
+
+			if (arr.indexOf(arr[i]) < index || arr.indexOf(arr[i]) > index + deleteCount - 1) {
+
+				arr2[arr2.length] = arr[i];
+			}
+		};
+
+		return arr2;
+	} else {
+
+		var c = 0;
+		for(var i = 0; i < arr.length; i++) {
+
+			if (i >= index && i <= index+deleteCount-1) {
+
+				arr[i] = elements[c++];
+			}
+		}
+	}
+
+	return arr;
+
+};
+
+newSplice(arr1, 1, 1);
+
+// 3. Напишите функцию, которая возвращает сумму всех чисел, 
+// переданных в качестве аргументов, число которых не ограничено. 
+// Функция работает только с числами (включая строковые). 
+// Если какой-то из параметров - массив, то к сумме добавляется 
+// также сумма значений этого массива (если какое-либо из значений 
+// этого массива также является массивом, то к результату 
+// добавляется также и сумма его значений, и так далее).
+
+
+
+function sum() {
+
+    var arr = [].slice.apply(arguments);
+
+    function sumRecursion(arr) {
+
+        return arr.reduce(function (sum, elem) {
+         
+            if ( isNumber(elem) ) sum += +elem;
+            else if ( Array.isArray(elem) ) sum += sumRecursion(elem);
+            return sum;
+        }, 0); 
+    }
+    return sumRecursion(arr);
+}
+function isNumber(val) {
+    return !isNaN(parseFloat(val)) && isFinite(val);
+}
+var sum = sum(1, '1', 'one', [2, '2', 'two']);
+console.log( sum );
+
+
+// 4. Напишите функцию, которая рисует в указанном HTML-контейнере 
+// диаграмму из данных, представляющих из себя массив объектов: 
+// каждый объект имеет свойства color и value, означающих соответственно 
+// цвет столбца и его высоту.
+
+function buildDiagram(obj, diag) {
+
+
+};
+
+
+var data1 = [ {color: '#DE9797', value: 70}];
+buildDiagram(data1, '#diagram1');
+var data2 = [ {color: '#97DEDA', value: 20}];
+buildDiagram(data2, '#diagram2');
+
+
+// 5. Напишите функцию, которая изображает в теге HTML картинку 
+// по данным, представляющим из себя двумерный массив 
+// закрашенных точек.
+
+$(document).ready(function() {
+	$("td").css({
+		"width": "10px",
+		"height": "10px",
+		"border": "1px solid #555"
+	});
+
+	$("table").css({         
+		"border-spacing": "0px"
+	});
+
+	var points = [
+		[3, 4, 5],
+		[2, 3, 9, 16],
+		[1, 2, 9, 10, 15, 16],
+		[1, 2, 5, 6, 9, 10, 11, 12, 13, 14, 15, 16],
+		[1, 2, 4, 5, 6, 7, 9, 12, 13, 16],
+		[1, 2, 3, 4, 5, 6, 7, 8, 9, 12, 13, 16],
+		[2, 3, 4, 5, 6, 7, 8, 9, 10, 11, 14, 15, 16],
+		[2, 3, 4, 5, 6, 7, 8, 10, 11, 12, 13, 14, 15],
+		[2, 3, 4, 7, 8, 12, 13],
+		[2, 3, 7, 8],
+		[2, 3, 4, 5, 7, 8, 9],
+		[2, 3, 4, 5, 7, 8, 9],
+	];
+
+	function draw(arr) {
+
+		// arr = [][];
+
+		for(var i = 0; i < arr.length; i++) {
+		
+			// var tr = document.querySelector("tr:nth-child("+i+")");
+
+			arr[i].forEach(function(item) {
+				
+				$("tr:nth-child("+ +(i+1)+") > td:nth-child("+item+")").css({
+					"background": "black"
+				});
+				
+			});		
+		}
+	};
+
+	draw(points);
+});
+
+