Andrii Kozhyn 2 years ago
parent
commit
fc0ba7fa9c
4 changed files with 560 additions and 0 deletions
  1. 26 0
      HW_js_4/index.html
  2. 282 0
      HW_js_4/scriptDz3.js
  3. 26 0
      HW_js_5/index.html
  4. 226 0
      HW_js_5/scriptDz4(objectsInJson).js

+ 26 - 0
HW_js_4/index.html

@@ -0,0 +1,26 @@
+<!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>Document</title>
+    <link rel="stylesheet" href="style.css">
+</head>
+<body>
+  
+     <h3>Обменка $ к UAH</h3>
+     <div class="menu">
+         Отдаете $: <input class="inp" type="number" placeholder="Количество Долларов" onchange="convert(this.value)">
+
+         <button id="cash"> w </button>
+         <p class="get">
+         Получаете:  <span id="out" ></span> uah
+            
+         </p>
+     </div>
+    
+
+    <script src="scriptDz3.js"></script>
+</body>
+</html>

+ 282 - 0
HW_js_4/scriptDz3.js

@@ -0,0 +1,282 @@
+// html tree____________________
+
+
+// let body =  {
+//     tagName: 'body',
+//         subTags: [
+//             {
+//                 tagName: 'div',
+//                 subTags: [
+//                     {
+//                     tagName: 'span',
+//                     text:'Enter a data please:'
+                
+//                     },
+//                     {
+//                         tagName: 'br',
+//                     },
+//                     {
+//                         tagName: 'input',
+//                         attrs: {
+//                             type: 'text',
+//                             id: 'name'
+//                         }
+//                     },
+//                     {   tagName: 'input',
+//                         attrs: {
+//                         id: 'surname',
+//                         type: 'text'
+                        
+//                         }
+//                     }
+//                 ]
+//             },
+//             {
+//                 tagName: 'div',
+//                 subTags: [
+//                     {
+//                         tagName:'button',
+//                         text: 'OK',
+//                         attrs: {
+//                             id: 'ok'
+//                         }
+//                     },
+//                     {
+//                         tagName:'button',
+//                         text: 'Cancel',
+//                         attrs: {
+//                             id:'cancel'
+//                         }
+//                     }
+//                 ]
+//             }
+                
+//         ] 
+// }
+// console.log(body.subTags[1].subTags[1].text)
+// console.log(body.subTags[0].subTags[3].attrs.id)
+
+// declarative fields____________________________
+
+// var notebook = {
+//     brand: prompt('Enter brand: ', '') || "HP",
+//     type:  prompt('Enter type: ', '') || "440 G4",
+//     model: prompt('Enter model: ', '') || "Y7Z75EA",
+//     ram: +prompt('enter ram value') || 4,
+//     size: +prompt('enter size value') || "14",
+//     weight: +prompt('enter weight value') || 1.8,
+//     resolution: {
+//         width: +prompt('enter width value') || 1920,
+//         height: +prompt('enter height value') || 1080,
+//     },
+// };
+
+// console.log(notebook)
+
+// var phone = {
+//     brand: prompt('Phone brand:','') || "meizu",
+//     model: prompt('Phone model:','') || "m2",
+//     ram: +prompt('Phone amount of ram:','') || 2,
+//     color: prompt('Phone color','') ||  "black",
+// };
+
+// console.log (phone)
+
+// var person = {
+//     name: prompt('Person name:','') || "Donald",
+//     surname:prompt('Person surname:','') || "Trump",
+//     married: confirm('Are you married?'),
+// }
+
+// console.log(person)
+
+// // object links________________________
+
+// person.smartphone = phone;
+// person.laptop = notebook;
+// notebook.owner= person;
+// phone.owner = person;
+
+// console.log(person.smartphone.owner.laptop.owner.smartphone == person.smartphone)
+
+// imperative array fill 3_________________________
+
+// let arr = [];
+// arr[0] = prompt('Введите значение 1');
+// arr[1] = prompt('Введите занчение 2');
+// arr[2] = prompt('Введите значение 3');
+// alert(arr);
+
+
+// while confirm___________________________
+
+// while(!confirm());
+// break;
+
+
+// array fill_______________________________
+
+// let arr = [];
+// let value;
+
+// do {
+//     value = prompt('Ввыедите данные');
+//     if (value) {
+//         arr.push(value);
+//     }   
+// }
+// while(value)
+
+// console.log(arr)
+
+
+// array fill nopush___________________________
+
+// let arr = [];
+// for(let a = 0; ; a++) {
+//     let item = prompt("Введите данные:");
+//     arr[a] = item;
+//     if(!item) break;
+// }
+// console.log(arr)
+
+// infinite probability________________________
+
+// let value = 0;
+// for(let value = 0; true; value++)
+//     if(Math.random() > 0.9) {
+//        alert(value++);
+//        break;
+//     }
+
+
+
+// empty loop________________________
+
+// while (prompt("Чтоб закрыть всплывающее окно нажмите ок") === null) {
+//     };
+
+// progression sum___________________
+
+
+// let n = 33;
+// let summ = 0;
+// for(let i =1; i < n; i= i+1){
+//     console.log(summ);
+//     summ+= i;
+// }
+// console.log(summ);
+
+// chess one line___________________
+
+// let strLenght = 33;
+// let str = "";
+
+// for(let i=0; i< strLenght; i++) {
+//     str += " #"
+//         document.write(str);
+// }
+// console.log(str)
+
+
+// numbers__________________________
+ 
+// let value = "";
+
+// for (let i = 0 ; i < 10 ; i++) {
+//     for (let a = 0; a < 10; a++){
+//         value += `${a}`;
+//     }
+//     value += "\n";
+// }
+// console.log(value);
+
+// chess_____________________________
+
+
+
+// let str = "";
+// let valueX = 6;
+// let valueY = 10;
+// for(let m = 0; m < valueY; m++){
+//     for (let i = 0; i < valueX; i++) {
+//         if (m % 2 == 0){
+//         str += ".";
+//         str += "#";
+//         }else{
+//         str += "#";
+//         str += ".";
+        
+//     }
+//     }
+//     str += "\n"
+// }
+//     console.log(str);
+
+// cubes___________________________________
+
+// const arr = [];
+
+// for(let i = 0; i < 10; i++) {
+//     arr.push(i**3);
+// }
+
+// console.log(arr);
+
+
+// multiply table
+
+
+// let arr = [];
+// for(let i = 0; i < 10; i++) {
+//     arr[i] = [];
+//     for(let j = 0; j < 10; j++) {
+//         arr[i].push(i * j);
+//     }
+// }
+// console.log(arr[5][6]);
+
+
+
+// matrix to html table___________________
+
+// let value = "<table>";
+// for (let i = 1; i < 8; i++) {
+//     value += "<tr>";
+//     for(let h = 1; h < 10; h++) {
+//         value += `<td>${i * h}</td>`;
+//     }
+//     value += "</tr>";
+// }
+// value +="</table>";
+
+// document.write(value);
+
+// Задание на синий пояс: Треугольник
+// Сформировать следующую строку - треугольник:
+// .....#.....
+// ....###....
+// ...#####...
+// ..#######..
+// .#########.
+// ###########
+// // 
+// ________________________________________________________
+
+
+// let i=0;
+// let j=0;
+// while ( i< 8) {
+//    let space = "";
+//    let star = "";
+//     for (j = 0; j < 8 - i; j++){ 
+//         space += ".";
+//     }    
+//     for (j = 0; j < 2 * i + 1; j++) star += "*";
+//     console.log(space + star + space);
+//     i++;
+// }
+
+// Задание на черный пояс: Электронная гадалка
+// +++++++++++++++++++++
+

+ 26 - 0
HW_js_5/index.html

@@ -0,0 +1,26 @@
+<!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>Document</title>
+    <link rel="stylesheet" href="style.css">
+</head>
+<body>
+  
+     <h3>Обменка $ к UAH</h3>
+     <div class="menu">
+         Отдаете $: <input class="inp" type="number" placeholder="Количество Долларов" onchange="convert(this.value)">
+
+         <button id="cash"> w </button>
+         <p class="get">
+         Получаете:  <span id="out" ></span> uah
+            
+         </p>
+     </div>
+    
+
+    <script src="scriptDz4(objectsInJson).js"></script>
+</body>
+</html>

+ 226 - 0
HW_js_5/scriptDz4(objectsInJson).js

@@ -0,0 +1,226 @@
+// 3 persons
+// Сделать три ассоциативных массива a, b, c, в каждом из которых должны быть поля name и surname.
+// // +
+// // different fields
+
+let first = {
+    name: "Lotos",
+    surname: "White",
+    age: 39,
+}
+
+
+let second = {
+    name: "Viktorov",
+    surname: "Viktorov",
+    sex: 'male',
+
+}
+
+let third = {
+    name: "Alla",
+    surname: "Petrofanova",
+    patronymic: "Viktorovna",
+   
+}
+
+
+
+// // fields check
+
+// // Проверьте наличие необязательных полей у каждого из этих массивов. Если поле найдено, выведите его с помощью alert. Проверку делайте по typeof или in в if.
+
+if ("age" in first){
+    alert(first.age)
+}
+
+if ("patronymic" in third){
+    alert(third.patronymic)
+}
+
+if ("sex" in second){
+    alert(second.sex)
+}
+
+// // array of persons
+
+
+let personsFirst = [first, second, third, {name: 'Michael', surname: 'Phelps'}];
+
+// console.log(persons);
+
+// loop of persons
+
+
+for(let persons of personsFirst) {
+    // console.log(persons)
+}
+
+// // loop of name and surname
+// // Сделайте цикл, который выводит весь массив persons, но только Имя и Фамилию каждой персоны.
+
+// for(let person of personsFirst) {
+//     console.log(person.name, person.surname);
+// }
+
+
+// loop of loop of values
+
+
+// for (let person of personsFirst) {
+
+//     for (let value in person) {
+//        console.log(person[value]);
+//     }
+// }
+
+// fullName--------------------
+
+// for (let person of personsFirst) {
+//     someResult = person.name + ' ' + person.surname;
+
+//     if("fathername" in person) {
+//         someResult += ' ' + person.fathername;
+//     }
+
+// };
+// console.log(personsFirst)
+
+
+
+// serialize
+// Создайте JSON-строку из persons
+
+// let personChange = JSON.stringify(personsFirst);
+
+// console.log(personChange);
+// console.log(typeof personChange);
+
+
+// deserialize
+// Создайте ассоциативный массив с одной персоной из JSON-строки. Добавьте её в persons
+
+// let personDeserialize = JSON.parse(personChange)[0];
+// personsFirst.push(personDeserialize);
+// console.log(personsFirst);
+
+
+
+
+// HTML
+
+// let str = "<table border='1'>"
+// for (let persons of personsFirst){
+//     str += `<tr><td>${persons.name}</td><td>${persons.surname}</td></tr> \n`
+// }
+// str += "</table>"
+
+// console.log(str)
+// document.write(str)
+
+// HTML optional fields + tr color + th optional
+
+// Сделайте цикл, который выводит весь массив persons, в форме HTML-таблицы. Имя и Фамилия, а так же другие поля при наличии. Колонки: поля, строки таблицы - персоны.
+
+
+// let  str = "<table style='border: 1px solid black'><tr>"
+// let index = 0;
+// let newArr = [];
+
+// for (let person of personsFirst ) {
+//     index += 1;
+
+//     for (let value1 in Object.keys(person)) {
+//         if (!newArr.includes(Object.keys(person)[value1])){
+//             newArr.push(Object.keys(person)[value1]);
+//         };
+//     };
+// };
+
+// for (let i = 0; i < newArr.length; i++) {
+//     str += `<tr><th style="border: 1px solid black">${newArr[i].toLowerCase()}</tr>`
+
+//     for (let k = 0; k < personsFirst.length; k++) {
+//         for(let value1 in personsFirst[k]) {
+//             if(value1 === newArr[i]){
+//                 str += `<td style='border: 1px solid black'>${personsFirst[k][value1]}</td>`;
+//             }
+//         }
+//     }
+// }
+
+
+
+// let str = "<table style='border: 4mm ridge rgba(56, 255, 109, .6);background-color: #FF8F1B;background-image: linear-gradient(334deg, #2ab3ff,#ff2d00);' ><tr>"
+// let index = 0;
+// const newArr = [];
+
+// for (const person of personsFirst) {
+
+//     index += 1;
+    
+//     for (const key in Object.keys(person)) {
+
+//         if (!newArr.includes(Object.keys(person)[key])) {
+//             newArr.push(Object.keys(person)[key]);
+//         };
+//     };
+
+// };
+
+// for (let i = 0; i < newArr.length; i++) {
+
+//     str += `<tr><th style="border: 2px solid black; background-color: rgba(255, 143, 27, 0.6);;
+//     background-image: linear-gradient(to left, #2ab3ff,#F7F7F7, #ff2d00);">${newArr[i].toUpperCase()}</th>`
+
+//     for (let k = 0; k < personsFirst.length; k++) {
+    
+//         for (const key in personsFirst[k]) {
+        
+//             if (key === newArr[i]) {
+
+//                 str += `<td style='border: 3px solid black; background-color: #F7F7F7;background-image: linear-gradient(to left, #2ab3ff,white,#F7F7F7, #ff100099);'>${personsFirst[k][key]}</td>`;
+                
+//             };
+//         };
+//     };
+// };
+
+// str += "</table>"
+// document.write(str)
+
+
+// destruct array---------
+
+
+// let arr = [1,2,3,4,5, "a", "b", "c"];
+
+// let [odd1,even1,odd2,even2,odd3, ...letters] = arr;
+
+// alert(letters);
+
+// destruct string-------------
+
+// let arr = [1, "abc"];
+
+// let [number, [s1,s2,s3]] = arr;
+
+// alert(s1+" "+s2+" "+s3);
+
+
+// destruct 2---------------
+
+// let obj = {nameA: 'Ivan',
+//            surname: 'Petrov',
+//            children: [{name: 'Maria'}, {name: 'Nikolay'}]}
+
+// let = {nameA,surname,children:[{name :name1}, {name: name2}]} = obj;
+
+// alert(name2);
+
+// destruct 3------------------
+
+// let arrDe3 = [1,2,3,4, 5,6,7,10]
+
+// let {0:n1, 1:n2, length} = arrDe3
+// alert("n1 = " +n1 + " n2 = " + n2 + " length = " + length)