Homework/05/script.js

// ------------------------------3 persons----------------------------------------------

// let a = {
//     name: "Victor",
//     surname: "Basharov",
// }

// let b = {
//     name: "Dmitriy",
//     surname: "Ivanov",
// }

// let c = {
//     name: "John",
//     surname: "Doe",
// }

// ------------------------------different fields----------------------------------------------

let a = {
    name: "Victor",
    surname: "Petrov",
    age: 35
}

let b = {
    name: "Dmitriy",
    surname: "Ivanov",
    fathername: "Alexandrovich"
}

let c = {
    name: "John",
    surname: "Doe",
    sex: "Male"
}

// ------------------------------fields check----------------------------------------------

// for(let key1 in a) {
//     if(key1 === "age") {
//         alert(key1 + ': ' + a[key1]);
//     }
// }

// for(let key2 in b) {
//     if(key2 === "fathername") {
//         alert(key2 + ': ' + b[key2]);
//     }
// }

// for(let key3 in c) {
//     if(key3 === "sex") {
//         alert(key3 + ': ' + c[key3]);
//     }
// }

// ------------------------------array of persons----------------------------------------------

let persons = [a, b, c];

let newPerson = {
    name: "Alex",
    surname: "Man",
    isSportsman: true
};

persons[3] = newPerson;

// ------------------------------loop of persons----------------------------------------------

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

// ------------------------------loop of name and surname----------------------------------------------

// for(let i=0; i<persons.length; i++) {
//     for(let key in persons[i]) {
//         if(key === "name" || key === "surname") {
//             console.log(persons[i][key]);
//         }
//     }
// }

// ------------------------------loop of loop of values----------------------------------------------

// for(let i=0; i<persons.length; i++) {
//         for(let key in persons[i]) {
//                 console.log(persons[i][key]);
//         }
//     }

// ------------------------------fullName----------------------------------------------

// for (let i = 0; i < persons.length; i++) {
//     persons[i].fullName = `${persons[i].name} ${persons[i].surname}` + (persons[i].fathername && (' ' + persons[i].fathername) || '');
// }

// for (let i in persons) {
//     console.log(persons[i].fullName)
// }

// ------------------------------serialize----------------------------------------------

// let jsonPersons = JSON.stringify(persons);

// console.log(jsonPersons);

// ------------------------------deserialize----------------------------------------------

// let jsonString = JSON.parse(persons)


let jsonObject = JSON.parse(`{"name":"John","surname":"Doe","fathername":"Nathan"}`);

persons[4] = jsonObject;

console.log(persons);

// ------------------------------HTML----------------------------------------------

let str = "<table border='1'>";
for (let i = 0; i < persons.length; i++) {
    str += `<tr> <td>${i+1}</td>`;
    for (let key in persons[i]) {
        str += `<td>${persons[i][key]}</td>`;
    }
    str += `<tr>`;
}
str += "</table>"

// console.log(str);
document.write(str);

// ------------------------------HTML optional fields----------------------------------------------

let str2 = "<table border='1'>";

str2 += "<tr> <th>#</th> <th>Name</th> <th>Surname</th> <th>Aditional field</th> </tr>";
// str += `<th>#</th>`;
// str += `<th>Name</th>`;
// str += `<th>Surname</th>`;
// str += `<th>Aditional field</th>`;
// str += `</tr>`;

for (let i = 0; i < persons.length; i++) {
    str2 += `<tr> <td>${i+1}</td>`; // как оно работает без </tr>  ???
    for (let key in persons[i]) {
        str2 += `<td>${persons[i][key]}</td>`;
    }
}
str2 += "</table>"

// console.log(str2);
document.write(str2);

// ------------------------------HTML tr color----------------------------------------------

let str3 = "<table border='1'>";

str3 += "<tr> <th>#</th> <th>Name</th> <th>Surname</th> <th>Aditional field</th> </tr>";

for (let i = 0; i < persons.length; i++) {
    if (i % 2) {
        str3 += `<tr style = "background: yellow"><td>${i+1}</td>`;
    } else {
        str3 += `<tr> <td>${i+1}</td>`;
    }
    for (let key in persons[i]) {
        str3 += `<td>${persons[i][key]}</td>`;
    }
    str += `<tr>`;
}
str3 += "</table>"

// console.log(str3);
document.write(str3);

// ------------------------------HTML th optional----------------------------------------------

let str4 = "<table border='1'>";

str4 += "<tr>";

for (let i = 0; i < persons.length; i++) {
    str4 += `<th>${i+1}</th>`;
}
str4 += "</tr>";

for (let i = 0; i < persons.length; i++) {
    if (i % 2) {
        str4 += `<tr style = "background: yellow"><td>${i+1}</td>`;
    } else {
        str4 += `<tr> <td>${i+1}</td>`;
    }
    for (let key in persons[i]) {
        str4 += `<td>${persons[i][key]}</td>`;
    }
    str += `<tr>`;
}
str4 += "</table>"

// console.log(str4);
document.write(str4);

// ------------------------------BLUE task----------------------------------------------

let someTree = {
    tagName: "table", //html tag
    subTags: [ //вложенные тэги
        {
            tagName: "tr",
            subTags: [{
                    tagName: "td",
                    text: "some text",
                },
                {
                    tagName: "td",
                    text: "some text 2",
                }
            ]
        }
    ],
    attrs: {
        border: 1,
    },
}

let drawSomeTree = "";

drawSomeTree += "<" + someTree.tagName;
if ("attrs" in someTree) {
    // drawSomeTree += someTree.attrs;
    for(let aa in someTree.attrs) {
        drawSomeTree += " " + aa + '= "' + someTree.attrs[aa] + '" ';
    }
}
drawSomeTree += ">";
if ("subTags" in someTree) {
    for (let i of someTree.subTags) {
        if ("tagName" in i) {
            drawSomeTree += "<" + i.tagName;
        }
        if ("attrs" in i) {
            drawSomeTree += i.attrs;
        }
        drawSomeTree += ">";
        if ("subTags" in i) {
            for (let j of i.subTags) {
                if ("tagName" in j) {
                    drawSomeTree += "<" + j.tagName;
                }
                if ("attrs" in j) {
                    drawSomeTree += j.attrs;
                }
                drawSomeTree += ">";
                if ("text" in j) {
                    drawSomeTree += j.text;
                }
                drawSomeTree += "</" + j.tagName + ">";
            }
        }
        drawSomeTree += "</" + i.tagName + ">";
    }
}
drawSomeTree += "</" + someTree.tagName + ">";

console.log(drawSomeTree);
document.write(drawSomeTree);

// ------------------------------destruct array----------------------------------------------

let arr = [1, 2, 3, 4, 5, "a", "b", "c"]

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

console.log(odd1);
console.log(even1);
console.log(odd2);
console.log(even2);
console.log(odd3);
console.log(letters);

// ------------------------------destruct string----------------------------------------------

let arr2 = [1, "abc"]

let [number, [s1, s2, s3]] = arr2

console.log(number);
console.log(s1);
console.log(s2);
console.log(s3);

// ------------------------------destruct 2----------------------------------------------

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

let {
    children: [{
        name: name1
    }, {
        name: name2
    }]
} = obj;

console.log(name1);
console.log(name2);

// ------------------------------destruct 3----------------------------------------------

let arrDes3 = [1, 2, 3, 4, 5, 6, 7, 10]; // I used the same formatting as in the task

let {
    length: length,
    [0]: aDes3,
    [1]: bDes3
} = arrDes3;

console.log(aDes3);
console.log(bDes3);
console.log(length);