|
|
@@ -0,0 +1,210 @@
|
|
|
+//ES6
|
|
|
+//ES6: Таблица умножения
|
|
|
+let f;
|
|
|
+let str = "<table class='table'>";
|
|
|
+
|
|
|
+str += "<tr class='horizontal-table-head'><td>0</td><td>1</td><td>2</td><td>3</td><td>4</td><td>5</td><td>6</td><td>7</td><td>8</td><td>9</td></tr>";
|
|
|
+
|
|
|
+for(let i = 1; i < 10; i++) {
|
|
|
+ str += `<tr><td>${i}</td>`; //Использование ${} внутри `` скобочек было добавлено в ES6
|
|
|
+ for(let j = 1; j < 10; j++) {
|
|
|
+ f = (i, j) => str += `<td>${i*j}</td>`; //Использование ${} внутри `` скобочек было добавлено в ES6
|
|
|
+ f(i, j);
|
|
|
+ }
|
|
|
+ str += "</tr>";
|
|
|
+}
|
|
|
+
|
|
|
+document.write(str);
|
|
|
+
|
|
|
+
|
|
|
+//ES6: Подсветить ячейку
|
|
|
+//ES6: Подсветить строку и столбец,
|
|
|
+let table = document.querySelector(".table");
|
|
|
+let tr = table.querySelectorAll("tr");
|
|
|
+
|
|
|
+let fillTdBackground = function(evt ,backgroundColor = null) { //Использование параметров по умолчанию
|
|
|
+ let evtTargetCellIndex = evt.target.cellIndex;
|
|
|
+ let evtTargetRowIndex = evt.target.parentElement.rowIndex;
|
|
|
+
|
|
|
+ if(evt.target.tagName == "TD" && evtTargetRowIndex != 0 && evtTargetCellIndex != 0) {
|
|
|
+ evt.target.style = `background-color: ${backgroundColor}`; // Использование ${} внутри `` скобочек
|
|
|
+ tr[0].children[evtTargetCellIndex].style = `background-color: ${backgroundColor}`; // Использование ${} внутри `` скобочек
|
|
|
+ tr[evtTargetRowIndex].children[0].style = `background-color: ${backgroundColor}`; // Использование ${} внутри `` скобочек
|
|
|
+ }
|
|
|
+};
|
|
|
+
|
|
|
+table.addEventListener("mouseover", function(evt) {
|
|
|
+ fillTdBackground(evt, "#ff5151")
|
|
|
+});
|
|
|
+
|
|
|
+table.addEventListener("mouseout", function(evt) {
|
|
|
+ fillTdBackground(evt)
|
|
|
+});
|
|
|
+
|
|
|
+
|
|
|
+//ES6: Calc
|
|
|
+//ES6: Calc Live
|
|
|
+let arrElements = [
|
|
|
+ document.querySelector(".first-input"),
|
|
|
+ document.querySelector(".second-input"),
|
|
|
+ document.querySelector(".select"),
|
|
|
+ document.querySelector(".result")
|
|
|
+]
|
|
|
+
|
|
|
+let [firstInput, secondInput, select, result] = arrElements; // Диструктуризация
|
|
|
+
|
|
|
+let caltResult = function() {
|
|
|
+ if(select.value == "+") {
|
|
|
+ result.value = +firstInput.value + +secondInput.value;
|
|
|
+ } else if(select.value == "-") {
|
|
|
+ result.value = +firstInput.value - +secondInput.value
|
|
|
+ } else if(select.value == "/") {
|
|
|
+ result.value = +firstInput.value / +secondInput.value;
|
|
|
+ } else {
|
|
|
+ result.value = +firstInput.value * +secondInput.value;
|
|
|
+ }
|
|
|
+}
|
|
|
+
|
|
|
+for(let element of arrElements) { // Использование for of
|
|
|
+ element.addEventListener("input", function(){
|
|
|
+ caltResult();
|
|
|
+ });
|
|
|
+};
|
|
|
+
|
|
|
+
|
|
|
+//sort
|
|
|
+var persons = [
|
|
|
+ {name: "Иван", age: 17},
|
|
|
+ {name: "Мария", age: 35},
|
|
|
+ {name: "Алексей", age: 73},
|
|
|
+ {name: "Яков", age: 12},
|
|
|
+]
|
|
|
+
|
|
|
+let mySort = function(arr, key, ascending = true) {
|
|
|
+ arr.sort(function(a, b) {
|
|
|
+ if(typeof(a[key]) == "string") {
|
|
|
+ return ascending ? a[key].length - b[key].length : b[key].length - a[key].length;
|
|
|
+ } else {
|
|
|
+ return ascending ? a[key] - b[key] : b[key] - a[key];
|
|
|
+ }
|
|
|
+ });
|
|
|
+};
|
|
|
+
|
|
|
+
|
|
|
+//array map
|
|
|
+let arr1 = ["1", {}, null, undefined, "500", 700].map(function(item){
|
|
|
+ if(typeof(item) == "string") {
|
|
|
+ item = +item;
|
|
|
+ }
|
|
|
+
|
|
|
+ return item
|
|
|
+});
|
|
|
+
|
|
|
+
|
|
|
+//array reduce
|
|
|
+let arrayReduce = ["0", 5, 3, "string", null].reduce(function(previousItem, currentItem){
|
|
|
+ if(typeof(currentItem) == "number") {
|
|
|
+ previousItem = previousItem * currentItem;
|
|
|
+ }
|
|
|
+
|
|
|
+ return previousItem;
|
|
|
+}, 1);
|
|
|
+
|
|
|
+console.log(arrayReduce);
|
|
|
+
|
|
|
+
|
|
|
+//object filter
|
|
|
+var phone = {
|
|
|
+ brand: "meizu",
|
|
|
+ model: "m2",
|
|
|
+ ram: 2,
|
|
|
+ color: "black",
|
|
|
+};
|
|
|
+
|
|
|
+let filter = function(obj, f) {
|
|
|
+ for(let key in obj) {
|
|
|
+ if(!f(key, obj[key])) {
|
|
|
+ delete obj[key];
|
|
|
+ }
|
|
|
+ }
|
|
|
+};
|
|
|
+
|
|
|
+filter(phone,(key,value) => key == "color" || value == 2);
|
|
|
+
|
|
|
+
|
|
|
+//object map
|
|
|
+let map = function(obj, f) {
|
|
|
+ let newObj = {};
|
|
|
+
|
|
|
+ for(let key in obj) {
|
|
|
+ Object.assign(newObj, f(key, obj[key]))
|
|
|
+ }
|
|
|
+
|
|
|
+ return newObj;
|
|
|
+};
|
|
|
+
|
|
|
+console.log(
|
|
|
+ map({name: "Иван", age: 17},function(key,value){
|
|
|
+ var result = {};
|
|
|
+ result[key+"_"] = value + "$";
|
|
|
+ return result;
|
|
|
+ })
|
|
|
+)
|
|
|
+
|
|
|
+
|
|
|
+//Рекурсия
|
|
|
+//Sum
|
|
|
+let sum = function(x) {
|
|
|
+ return x == 1 ? 1 : x + sum(x - 1);
|
|
|
+}
|
|
|
+
|
|
|
+console.log(sum(10));
|
|
|
+
|
|
|
+
|
|
|
+//HTML Tree
|
|
|
+{
|
|
|
+ var someTree = {
|
|
|
+ tagName: "table", //html tag
|
|
|
+ children: [ //вложенные тэги
|
|
|
+ {
|
|
|
+ tagName: "tr",
|
|
|
+ children: [
|
|
|
+ {
|
|
|
+ tagName: "td",
|
|
|
+ text: "some text",
|
|
|
+ },
|
|
|
+ {
|
|
|
+ tagName: "td",
|
|
|
+ text: "some text 2",
|
|
|
+ }
|
|
|
+ ]
|
|
|
+ }
|
|
|
+ ],
|
|
|
+ attrs:
|
|
|
+ {
|
|
|
+ border: 1,
|
|
|
+ },
|
|
|
+ }
|
|
|
+
|
|
|
+ let str = "";
|
|
|
+
|
|
|
+ let drawTreeHTML = function(obj) {
|
|
|
+ str += `<${obj.tagName}>`;
|
|
|
+
|
|
|
+ if("text" in obj) {
|
|
|
+ str += `${obj.text}`;
|
|
|
+ }
|
|
|
+
|
|
|
+ if("children" in obj) {
|
|
|
+ for(let child of obj.children) {
|
|
|
+ drawTreeHTML(child);
|
|
|
+ }
|
|
|
+ }
|
|
|
+
|
|
|
+ str += `</${obj.tagName}>`;
|
|
|
+ }
|
|
|
+
|
|
|
+ drawTreeHTML(someTree);
|
|
|
+
|
|
|
+ document.write(str);
|
|
|
+}
|
