|
|
@@ -0,0 +1,227 @@
|
|
|
+<!DOCTYPE html>
|
|
|
+<html lang="en">
|
|
|
+
|
|
|
+<head>
|
|
|
+ <meta charset="UTF-8">
|
|
|
+ <meta http-equiv="X-UA-Compatible" content="IE=edge">
|
|
|
+ <meta name="viewport" content="width=device-width, initial-scale=1.0">
|
|
|
+ <title>HW-5</title>
|
|
|
+</head>
|
|
|
+
|
|
|
+<body>
|
|
|
+ <script>
|
|
|
+ //3 persons + different fields
|
|
|
+
|
|
|
+
|
|
|
+ // let a = {
|
|
|
+ // name: "Polina",
|
|
|
+ // surname: "Kobtseva",
|
|
|
+ // fathername: "Vladislavovna",
|
|
|
+ // age: 23,
|
|
|
+ // sex: "female",
|
|
|
+ // }
|
|
|
+
|
|
|
+ // let b = {
|
|
|
+ // name: "Ivan",
|
|
|
+ // surname: "Ivanovv",
|
|
|
+ // }
|
|
|
+
|
|
|
+ // let c = {
|
|
|
+ // name: "Petr",
|
|
|
+ // surname: "Petrov",
|
|
|
+ // city: "Kharkiv",
|
|
|
+ // }
|
|
|
+
|
|
|
+ // b.country = "Ukraine"
|
|
|
+ // b.studies = "University"
|
|
|
+ // c.children = "no"
|
|
|
+
|
|
|
+
|
|
|
+ //fields check
|
|
|
+ //a
|
|
|
+ typeof a.age
|
|
|
+ if (a == true) {
|
|
|
+ alert(a.age)
|
|
|
+ }
|
|
|
+ if ("sex" in a) {
|
|
|
+ alert(a.sex)
|
|
|
+ }
|
|
|
+ //b
|
|
|
+ typeof b.age
|
|
|
+ if (b == true) {
|
|
|
+ alert(b.age)
|
|
|
+ }
|
|
|
+ if ("country" in b) {
|
|
|
+ alert(b.country)
|
|
|
+ }
|
|
|
+ //c
|
|
|
+ typeof c.fathername
|
|
|
+ if (c == true) {
|
|
|
+ alert(c.fathername)
|
|
|
+ }
|
|
|
+ if ("city" in c) {
|
|
|
+ alert(c.city)
|
|
|
+ }
|
|
|
+
|
|
|
+ //array of persons
|
|
|
+
|
|
|
+ let person = [a, b, c, {
|
|
|
+ surname: "Pupkin",
|
|
|
+ name: "Vasya",
|
|
|
+ fathername: "Ivanovich",
|
|
|
+ age: "14",
|
|
|
+ city: "Kyiv"
|
|
|
+ }];
|
|
|
+
|
|
|
+ //loop of persons
|
|
|
+
|
|
|
+ for (let key in person) {
|
|
|
+ console.log(key, person[key])
|
|
|
+ }
|
|
|
+
|
|
|
+ //loop of name and surname
|
|
|
+
|
|
|
+ for (let key of person) {
|
|
|
+ console.log(key.surname + ' ' + key.name)
|
|
|
+ }
|
|
|
+
|
|
|
+ //loop of loop of values
|
|
|
+
|
|
|
+ for (let i = 0; i < person.length; i++) {
|
|
|
+ for (let key in person[i]) {
|
|
|
+ console.log(person[i][key])
|
|
|
+ }
|
|
|
+ }
|
|
|
+
|
|
|
+ //fullName
|
|
|
+
|
|
|
+ for (let newObject of person) {
|
|
|
+ if (newObject.name && newObject.surname) {
|
|
|
+ newObject.fullname = newObject.name + " " + newObject.surname;
|
|
|
+ }
|
|
|
+ console.log(person)
|
|
|
+ }
|
|
|
+
|
|
|
+ //serialize
|
|
|
+
|
|
|
+ JSON.stringify(person);
|
|
|
+
|
|
|
+ //deserialize
|
|
|
+
|
|
|
+ let newPerson = '{"name": "Galina", "surname": "Bulka", "fathername": "Antonavna", "age": "50"}'
|
|
|
+ JSON.parse(newPerson)
|
|
|
+ person[4] = JSON.parse(newPerson)
|
|
|
+
|
|
|
+ //HTML
|
|
|
+
|
|
|
+ let a = {
|
|
|
+ name: "Polina",
|
|
|
+ surname: "Kobtseva",
|
|
|
+ fathername: "Vladislavovna",
|
|
|
+ age: 23,
|
|
|
+ sex: "female",
|
|
|
+ }
|
|
|
+
|
|
|
+ let b = {
|
|
|
+ name: "Ivan",
|
|
|
+ surname: "Ivanovv",
|
|
|
+ country: "Ukraine",
|
|
|
+ studies: "University",
|
|
|
+ }
|
|
|
+
|
|
|
+ let c = {
|
|
|
+ name: "Petr",
|
|
|
+ surname: "Petrov",
|
|
|
+ city: "Kharkiv",
|
|
|
+
|
|
|
+ }
|
|
|
+
|
|
|
+ let d = {
|
|
|
+ name: "Vasya",
|
|
|
+ surname: "Pupkin",
|
|
|
+ fathername: "Ivanovich",
|
|
|
+ age: "14",
|
|
|
+ city: "Kyiv",
|
|
|
+ }
|
|
|
+
|
|
|
+ let e = {
|
|
|
+ name: "Galina",
|
|
|
+ surname: "Bulka",
|
|
|
+ fathername: "Antonavna",
|
|
|
+ age: "50",
|
|
|
+ }
|
|
|
+ //
|
|
|
+ let person = [a, b, c, d, e];
|
|
|
+ for (var key in person) {
|
|
|
+ console.log(key, person[key]);
|
|
|
+ }
|
|
|
+ //
|
|
|
+ let str = '<table border = "1">'
|
|
|
+ for (let key in person) {
|
|
|
+ str +=
|
|
|
+ `<tr> <td> name </td> <td> ${person[key].name} </td> <td> surname </td> <td> ${person[key].surname} </td> </tr> \n`;
|
|
|
+ }
|
|
|
+ str += "</table>"
|
|
|
+
|
|
|
+ console.log(str)
|
|
|
+ document.write(str)
|
|
|
+
|
|
|
+ //HTML optional fields
|
|
|
+ let str2 = '<table border = "1">'
|
|
|
+ for (g = 0; g < 5; g++) {
|
|
|
+ for (let key in person[g]) {
|
|
|
+ str2 += `<tr> <td> ${key} </td> <td> ${person[g][key]} </td> </tr> \n`;
|
|
|
+ }
|
|
|
+ }
|
|
|
+ str2 += "</table>"
|
|
|
+
|
|
|
+ console.log(str2)
|
|
|
+ document.write(str2)
|
|
|
+
|
|
|
+ //HTML tr color
|
|
|
+ let str3 = '<table border = "1">'
|
|
|
+ for (g = 0; g < 5; g++) {
|
|
|
+ for (let key in person[g]) {
|
|
|
+ str3 +=
|
|
|
+ `<tr style = "background-color: violet; "> <td style = "color: black";> ${key} </td> <td> ${person[g][key]} </td> </tr> \n`;
|
|
|
+ }
|
|
|
+ }
|
|
|
+ str3 += "</table>"
|
|
|
+
|
|
|
+ console.log(str3)
|
|
|
+ document.write(str3)
|
|
|
+
|
|
|
+
|
|
|
+ //HTML th optional
|
|
|
+
|
|
|
+ //destruct array
|
|
|
+
|
|
|
+ let [odd1, even1, odd2, even2, odd3, ...box] = [1, 2, 3, 4, 5, "a", "b", "c"]
|
|
|
+
|
|
|
+ //destruct string
|
|
|
+ let arr = [1, "abc"]
|
|
|
+ let [number, [s1, s2, s3]] = arr
|
|
|
+
|
|
|
+ //destruct 2
|
|
|
+
|
|
|
+ let obj = {
|
|
|
+ name: 'Ivan',
|
|
|
+ surname: 'Petrov',
|
|
|
+ children: [{
|
|
|
+ name: 'Maria'
|
|
|
+ }, {
|
|
|
+ name: 'Nikolay'
|
|
|
+ }]
|
|
|
+ }
|
|
|
+ let { children: [{name: name1}, {name: name2}]} = obj
|
|
|
+
|
|
|
+ //destruct 3
|
|
|
+
|
|
|
+ let arr2 = [1,2,3,4, 5,6,7,10]
|
|
|
+ let [a1, b1, { length = arr2.length }] = arr2
|
|
|
+
|
|
|
+ </script>
|
|
|
+
|
|
|
+</body>
|
|
|
+
|
|
|
+</html>
|
