homework-js/js05/js/main.js

// 3 persons
// array 1
var a = {
    name: "Ivan",
    surname: "Ivanov",
}

// array 2
var b = {
    name: "Taras",
    surname: "Tarasov",
}

// array 3
var c = {
    name: "Petro",
    surname: "Petrov",
}

// different fields
a.age = 33,
b.sex = "male",
c.fathername = "Petrovi4"

// fields check
// option 1
let optionalField = ["age", "sex", "fathername"];
let choiceArray = prompt("Выберите массив a, b, c: ");

if (choiceArray === "a") {
    for (let i of optionalField) {
        if(i in a) {
            alert("Необязательное после для массива а: " + i);
        }
    } 
} 
else if (choiceArray === "b") {
    for (let i of optionalField) {
        if(i in b) {
            alert("Необязательное после для массива b: " + i);
        }
    } 
} else if (choiceArray === "c") {
    for (let i of optionalField) {
        if(i in c) {
            alert("Необязательное после для массива c: " + i);
        }
    } 
} else {
    alert("Ошибка!");
}

// option 2
let choiceArray = prompt("Выберите массив a, b, c: ");
let choiceArray1 = 'a';
let choiceArray2 = 'b';
let choiceArray3 = 'c';

if(choiceArray === choiceArray1) {
    alert("Необязательное после для массива а: age");
} else if(choiceArray === choiceArray2) {
    alert("Необязательное после для массива b: sex");
} else if(choiceArray === choiceArray3) {
    alert("Необязательное после для массива c: fathername");
} else {
    alert("Ошибка!");
}

// array of persons
let persons = ['a', 'b', 'c'];

let a = { 
    name: "Ivan", 
    surname: "Ivanov" 
}
let b = { 
    name: "Taras", 
    surname: "Tarasov" 
}
let c = { 
    name: "Petro", 
    surname: "Petrov" 
}

persons.a = { name: "Ivan", surname: "Ivanov"};
persons.b = { name: "Taras", surname: "Tarasov"};
persons.c = { name: "Petro", surname: "Petrov"};

// loop of persons
for (let i in persons) {
    console.log(persons[i]);
}

// loop of name and surname
for (var key in persons) {
    console.log(persons[key]);
}
// or
for (let i in persons) {
    console.log(persons[i]["name"], persons[i]["surname"]);
}

// loop of loop of values
for (let i in persons) {
    for (let j in persons[i]) {
        console.log(persons[i][j]);
    }
}

// fullName
for (let i in persons) {
    if (persons[i]["fathername"]) {
        persons[i].fullName = persons[i]["name"] + persons[i]["fathername"] + persons[i]["surname"];
    } else {
        persons[i].fullName = persons[i]["name"] + persons[i]["surname"];
    }
}

// serialize
let changeLine = JSON.strigify(persons);
console.log(changeLine);

// deserialize
let changeArray = JSON.parse("[{\"name\":\"Ivan\",\"surname\":\"Ivanov\",\"age\":33,\"fullName\":\"IvanIvanov\"]");
changeArray.push(persons);
console.log(changeArray);

// HTML
//
let persons = ['a', 'b', 'c'];

let a = { 
    name: "Ivan", 
    surname: "Ivanov",
}
let b = { 
    name: "Taras", 
    surname: "Tarasov",
}
let c = { 
    name: "Petro", 
    surname: "Petrov",
}

persons = [a, b, c];

//
var str = "<table border='1'>"
str += "<tr><th>Persons</th><th>name</th><th>surname</th></tr>"
for(let i = 0; i < persons.length; i++) {
    if(i % 2 == 1) {
        str += `<tr><td>${i}</td>
        <td>${persons[i]["name"]}</td>
        <td>${persons[i]["surname"]}</td>`
    }
    else {
        str += `<tr><td>${i}</td>
        <td>${persons[i]["name"]}</td>
        <td>${persons[i]["surname"]}</td>`
    }
}

str += "</table>"
document.write(str)

// HTML optional fields
//
let persons = ['a', 'b', 'c'];

let a = { 
    name: "Ivan", 
    surname: "Ivanov",
    age: 33,
}
let b = { 
    name: "Taras", 
    surname: "Tarasov",
    sex: "male",
}
let c = { 
    name: "Petro", 
    surname: "Petrov",
    fathername: "Petrovi4",
}

persons = [a, b, c];

//
let str = "<table border='1'>"
str += "<tr><th>Persons</th><th>name</th><th>surname</th><th>age</th><th>fathername</th><th>sex</th></tr>"
for(let i = 0; i < persons.length; i++) {
    if(i % 2 == 1) {
        str += `<tr><td>${i}</td>
        <td>${persons[i]["name"]}</td>
        <td>${persons[i]["surname"]}</td>
        <td>${persons[i]["age"]}</td>
        <td>${persons[i]["fathername"]}</td>
        <td>${persons[i]["sex"]}</td></tr>`
    }
    else {
        str += `<tr><td>${i}</td>
        <td>${persons[i]["name"]}</td>
        <td>${persons[i]["surname"]}</td>
        <td>${persons[i]["age"]}</td>
        <td>${persons[i]["fathername"]}</td>
        <td>${persons[i]["sex"]}</td></tr>`
    }
}

str += "</table>"
document.write(str)

// HTML tr color
let str = "<table border='1'>"
str += "<tr><th>Persons</th><th>name</th><th>surname</th><th>age</th><th>fathername</th><th>sex</th></tr>"
for(let i = 0; i < persons.length; i++) {
    if(i % 2 == 1) {
        str += `<tr style='background: cyan'><td>${i}</td>
        <td>${persons[i]["name"]}</td>
        <td>${persons[i]["surname"]}</td>
        <td>${persons[i]["age"]}</td>
        <td>${persons[i]["fathername"]}</td>
        <td>${persons[i]["sex"]}</td></tr>`
    }
    else {
        str += `<tr style='background: yellow'><td>${i}</td>
        <td>${persons[i]["name"]}</td>
        <td>${persons[i]["surname"]}</td>
        <td>${persons[i]["age"]}</td>
        <td>${persons[i]["fathername"]}</td>
        <td>${persons[i]["sex"]}</td></tr>`
    }
}

str += "</table>"
document.write(str)

// Задание на синий пояс.
var someTree = {
    tagName: "table",
    subTags: [{
        tagName: "tr",
        subTags: [{
            tagName: "td",
            text: "some text"
        }, {
            tagName: "td",
            text: "some text 2"
        }]
    }],
    attrs: {
        border: 1
    }
}
    
function createElem(tagName, attrs, text) {
    var elem = document.createElement(tagName);
    if (attrs)
        for (var name in attrs) elem.setAttribute(name, attrs[name]);
    if (text) elem.textContent = text;
    return elem
}
    
function walker(tree) {
    var tagName = tree.tagName,
        attrs = tree.attrs,
        text = tree.text,
        elem = createElem(tagName, attrs, text);
    if (tree.subTags) tree.subTags.forEach(function(el) {
        el = walker(el);
        elem.appendChild(el)
    });
    return elem
}

var table = walker(someTree);
document.body.appendChild(table);

// destruct array
let arr = [1,2,3,4,5, "a", "b", "c"];
let [odd1, odd2, odd3] = arr.filter(item => item%2);
let [even1, even2] = arr.filter(item => !(item%2));
let other = ["a", "b", "c"];

// or
let arr = [1,2,3,4,5, "a", "b", "c"];
let [odd1, even1, odd2, even2, odd3, ...other] = arr;

// or
let [odd1, even1, odd2, even2, odd3, ...other] = new Set([1,2,3,4,5, "a", "b", "c"]);

// destruct string
let arr = [1, "abc"];
let [number, [s1, s2, s3]] = arr;
console.log(number, s1, s2,s3);

// destruct 2
let obj = {name: 'Ivan',
           surname: 'Petrov',
           children: [{name: 'Maria'}, {name: 'Nikolay'}]}

let name1 = obj.children[0];
let name2 = obj.children[1];

// destruct 3
let arr = [1,2,3,4, 5,6,7,10];
let a = arr[0];
let b = arr[1];
let length = arr.length;