Alex-Smil · Alex-Smil · Dec 24, 2018 · Dec 24, 2018 · Dec 27, 2018 · Dec 27, 2018
diff --git a/les01ex01RemoveMenu/menuES5/Menu.js b/les01ex01RemoveMenu/menuES5/Menu.js
@@ -0,0 +1,27 @@
+function Menu(myId, myClass, myItems) {
+    this.id = myId;
+    this.className = myClass;
+    this.items = myItems;
+}
+
+Menu.prototype.render = function () {
+    var result = `<ul class="${this.className}" id="${this.id}">`;
+
+    //Сами пункты меню
+    for (var i = 0; i < this.items.length; i++){
+        result += this.items[i].renderItem();
+    }
+
+    result += '</ul>';
+    return result;
+};
+
+//TODO: удаление меню
+Menu.prototype.remove = function () {
+    //document
+    let parent = document.getElementById(`${this.id}`).parentNode;
+    parent.removeChild(document.getElementById(`${this.id}`));
+
+    // Можно и так
+    // document.getElementById(`${this.id}`).parentNode.removeChild(document.getElementById(`${this.id}`));
+};
diff --git a/les01ex01RemoveMenu/menuES5/MenuItem.js b/les01ex01RemoveMenu/menuES5/MenuItem.js
@@ -0,0 +1,11 @@
+//Класс для пункта меню
+function MenuItem(href, title) {
+    this.href = href;
+    this.title = title;
+}
+
+//Метод возвращает html код для конкретного пункта
+MenuItem.prototype.renderItem = function () {
+    //return '<li><a href="' + this.href + '">' + this.title + '</a></li>'; //ES5
+    return `<li><a href="${this.href}">${this.title}</a></li>`; //ES6
+};
diff --git a/les01ex01RemoveMenu/menuES5/menu.html b/les01ex01RemoveMenu/menuES5/menu.html
@@ -0,0 +1,42 @@
+<!DOCTYPE html>
+<html lang="en">
+<head>
+    <meta charset="UTF-8">
+    <title>Menu</title>
+    <script src="Menu.js"></script>
+    <script src="MenuItem.js"></script>
+    <script>
+        window.onload = function () {
+          //Пункты меню
+            var items = [
+                new MenuItem('/', 'Главная'),
+                new MenuItem('/about', 'О нас'),
+                new MenuItem('/service', 'Услуги'),
+                new MenuItem('/contacts', 'Контакты'),
+            ];
+
+            //Само меню
+            var menu = new Menu('my', 'my', items);
+
+            //Выбираем контейнер меню
+            var menuContainer = document.getElementById('menu1');
+
+            //Отображаем на странице html код, который вернул render
+            menuContainer.innerHTML = menu.render();
+
+            // ******************  ex 1 *************************
+            var menuContainer2 = document.getElementById('menu2');
+            var menu2 = new Menu('menu2', 'menu2', items);
+            menuContainer2.innerHTML = menu2.render(items);
+
+            // Удаление страницы
+            menu2.remove();
+            // menu.remove();
+        };
+    </script>
+</head>
+    <body>
+        <div id="menu1"></div>
+        <div id="menu2"></div>
+    </body>
+</html>
diff --git a/les01ex01RemoveMenu/menuES6/Menu.js b/les01ex01RemoveMenu/menuES6/Menu.js
@@ -0,0 +1,31 @@
+class Menu {
+    constructor(myId, myClass, myItems)
+    {
+        this.id = myId;
+        this.className = myClass;
+        this.items = myItems;
+    }
+
+    render () {
+        var result = `<ul class="${this.className}" id="${this.id}">`;
+
+        //Сами пункты меню
+        for (var i = 0; i < this.items.length; i++){
+            result += this.items[i].renderItem();
+        }
+
+        result += '</ul>';
+        return result;
+    }
+
+    //TODO: удаление меню
+    remove()
+    {
+        //document
+        let parent = document.getElementById(`${this.id}`).parentNode;
+        parent.removeChild(document.getElementById(`${this.id}`));
+
+        // Можно и так
+        // document.getElementById(`${this.id}`).parentNode.removeChild(document.getElementById(`${this.id}`));
+    }
+}
diff --git a/les01ex01RemoveMenu/menuES6/MenuItem.js b/les01ex01RemoveMenu/menuES6/MenuItem.js
@@ -0,0 +1,14 @@
+ //Класс для пункта меню
+class MenuItem {
+    constructor(href, title)
+    {
+        this.href = href;
+        this.title = title;
+    }
+
+    //Метод возвращает html код для конкретного пункта
+    renderItem () {
+        //return '<li><a href="' + this.href + '">' + this.title + '</a></li>'; //ES5
+        return `<li><a href="${this.href}">${this.title}</a></li>`; //ES6
+    }
+}
diff --git a/les01ex01RemoveMenu/menuES6/menu.html b/les01ex01RemoveMenu/menuES6/menu.html
@@ -0,0 +1,34 @@
+<!DOCTYPE html>
+<html lang="en">
+<head>
+    <meta charset="UTF-8">
+    <title>Menu</title>
+    <script src="Menu.js"></script>
+    <script src="MenuItem.js"></script>
+    <script>
+        window.onload = function () {
+          //Пункты меню
+            var items = [
+                new MenuItem('/', 'Главная'),
+                new MenuItem('/about', 'О нас'),
+                new MenuItem('/service', 'Услуги'),
+                new MenuItem('/contacts', 'Контакты'),
+
+                new MenuItem(new Menu("vf", "cd", newItems))
+            ];
+
+            //Само меню
+            var menu = new Menu('my', 'my', items);
+
+            //Выбираем контейнер меню
+            var menuContainer = document.getElementById('menu1');
+
+            //Отображаем на странице html код, который вернул render
+            menuContainer.innerHTML = menu.render();
+        };
+    </script>
+</head>
+<body>
+<div id="menu1"></div>
+</body>
+</html>
diff --git a/les01ex01RemoveMenu/project.txt b/les01ex01RemoveMenu/project.txt
@@ -0,0 +1,12 @@
+����������� �������� <ul> �� Dom - 01:36:35
+
+�������� ��������
+��� �������� �������� ���������� ����� removeChild() ������� Node. ���� ����� ������� ���� �� �������� �����:
+
+var articleDiv = document.querySelector("div.article");
+// ������� ����, ������� ����� ������� - ������ ��������
+var removableNode = document.querySelectorAll("div.article p")[0];
+// ������� ����
+articleDiv.removeChild(removableNode);
+
+src: https://metanit.com/web/javascript/8.5.php
diff --git a/les01ex02SubMenu/Menu.js b/les01ex02SubMenu/Menu.js
@@ -0,0 +1,31 @@
+function MenuWithSubMenus(myId, myClass, myItems) {
+    this.id = myId;
+    this.className = myClass;
+    this.items = myItems;
+}
+
+MenuWithSubMenus.prototype.render = function () {
+    var result = `<ul class="${this.className}" id="${this.id}">`;
+
+    //Сами пункты меню
+    for (var i = 0; i < this.items.length; i++){
+        if(this.items[i] instanceof MenuItem) {
+            result += this.items[i].renderItem();
+        } else {
+            result += this.items[i].render();
+        }
+    }
+
+    result += '</ul>';
+    return result;
+};
+
+//TODO: удаление меню
+MenuWithSubMenus.prototype.remove = function () {
+    //document
+    let parent = document.getElementById(`${this.id}`).parentNode;
+    parent.removeChild(document.getElementById(`${this.id}`));
+
+    // Можно и так
+    // document.getElementById(`${this.id}`).parentNode.removeChild(document.getElementById(`${this.id}`));
+};
diff --git a/les01ex02SubMenu/MenuItem.js b/les01ex02SubMenu/MenuItem.js
@@ -0,0 +1,11 @@
+//Класс для пункта меню
+function MenuItem(href, title) {
+    this.href = href;
+    this.title = title;
+}
+
+//Метод возвращает html код для конкретного пункта
+MenuItem.prototype.renderItem = function () {
+    //return '<li><a href="' + this.href + '">' + this.title + '</a></li>'; //ES5
+    return `<li><a href="${this.href}">${this.title}</a></li>`; //ES6
+};
diff --git a/les01ex02SubMenu/menu.html b/les01ex02SubMenu/menu.html
@@ -0,0 +1,61 @@
+<!DOCTYPE html>
+<html lang="en">
+<head>
+    <meta charset="UTF-8">
+    <title>Menu</title>
+    <script src="Menu.js" defer></script>
+    <script src="MenuItem.js" defer></script>
+    <script>
+        window.onload = function () {
+          //Пункты меню
+            let items3 = [
+                new MenuItem('/', 'Main'),
+                new MenuItem('/Catalog', 'Catalog'),
+                new MenuItem('/Sale', 'Sale'),
+                new MenuItem('/something', 'something'), 
+            ];
+
+            let items2 = [
+                new MenuItem('/', 'Main'),
+                new MenuWithSubMenus('subSubMenu', 'subSubMenu', items3),
+                new MenuItem('/about', 'About us'),
+                new MenuItem('/service', 'service'),
+                new MenuWithSubMenus('subSubMenu', 'subSubMenu', items3),
+                new MenuItem('/contacts', 'contacts'),
+            ];
+
+
+            var items = [
+                new MenuItem('/', 'Главная'),
+                new MenuItem('/about', 'О нас'),
+                new MenuWithSubMenus('subMenu', 'subMenu', items2),
+                new MenuItem('/service', 'Услуги'),
+                new MenuItem('/contacts', 'Контакты')
+            ];
+
+            //Само меню
+            var menu = new MenuWithSubMenus('my', 'my', items2);
+
+            //Выбираем контейнер меню
+            var menuContainer = document.getElementById('menu1');
+
+            //Отображаем на странице html код, который вернул render
+            menuContainer.innerHTML = menu.render();
+
+            // ******************  ex 2 *************************
+            var menuContainer2 = document.getElementById('menu2');
+            var menu2 = new MenuWithSubMenus('menu2', 'menu2', items);
+            menuContainer2.innerHTML = menu2.render();
+
+            let menuWithSubMenus = new MenuWithSubMenus('main', 'main', items);
+            menuContainer2.innerHTML = menuWithSubMenus.render();
+
+            menu.remove();
+        };
+    </script>
+</head>
+    <body>
+        <div id="menu1"></div>
+        <div id="menu2"></div>
+    </body>
+</html>