|
|
@@ -1,13 +1,12 @@
|
|
|
// 1. Literals +
|
|
|
// Найдите несколько окружающих объектов реального мира и создайте соответственные объекты Javascript. Например:
|
|
|
/*{
|
|
|
- const dog = {
|
|
|
- name : "leo",
|
|
|
+ const dog = {
|
|
|
+ name : "leo",
|
|
|
color : "orange",
|
|
|
breed : "spitz",
|
|
|
}
|
|
|
}*/
|
|
|
-
|
|
|
// 2. Literals expand +
|
|
|
// Дайте возможность пользователю добавить любые два свойства в эти объекты с любыми значениями. Обеспечьте ввод названия
|
|
|
// ключа и значения через prompt прямо в литерале объекта {}
|
|
|
@@ -34,37 +33,243 @@
|
|
|
console.log(newCar)
|
|
|
}*/
|
|
|
|
|
|
-//4. Html tree продолжение в конспекте
|
|
|
-//
|
|
|
-// <body>
|
|
|
-// <div>
|
|
|
-// <span>Enter a data please:</span><br/>
|
|
|
-// <input type='text' id='name'>
|
|
|
-// <input type='text' id='surname'>
|
|
|
-// </div>
|
|
|
-// <div>
|
|
|
-// <button id='ok'>OK</button>
|
|
|
-// <button id='cancel'>Cancel</button>
|
|
|
-// </div>
|
|
|
-// </body>
|
|
|
-//
|
|
|
+//4. Html tree продолжение в конспекте +
|
|
|
+/*{
|
|
|
+ let form = {
|
|
|
+ tagName : 'form',
|
|
|
+ children : [
|
|
|
+ {
|
|
|
+ tagName: 'div',
|
|
|
+ children: [
|
|
|
+ {
|
|
|
+ tagName: "span",
|
|
|
+ children: ["Enter a data please:"],
|
|
|
+ },
|
|
|
+ {
|
|
|
+ tagName: 'input',
|
|
|
+ attrs: {
|
|
|
+ type: 'text',
|
|
|
+ id: 'name'
|
|
|
+ },
|
|
|
+ },
|
|
|
+ {
|
|
|
+ tagName: 'input',
|
|
|
+ attrs: {
|
|
|
+ type: 'text',
|
|
|
+ id: 'surname'
|
|
|
+ }
|
|
|
+ }
|
|
|
+ ],
|
|
|
+ },
|
|
|
+ {
|
|
|
+ tagName: 'div',
|
|
|
+ children: [
|
|
|
+ {
|
|
|
+ tagName: 'button',
|
|
|
+ attrs: {
|
|
|
+ id: 'ok'
|
|
|
+ },
|
|
|
+ children: ["OK"]
|
|
|
+ },
|
|
|
+ {
|
|
|
+ tagName: 'button',
|
|
|
+ attrs: {
|
|
|
+ type: 'text',
|
|
|
+ id: 'cancel'
|
|
|
+ },
|
|
|
+ children: ["Cancel"]
|
|
|
+ }
|
|
|
+ ]
|
|
|
+ }
|
|
|
+ ]
|
|
|
+ }
|
|
|
+ console.log(form.children[1].children[1].children);
|
|
|
+ console.log(form.children[0].children[2].attrs.id)
|
|
|
+} */
|
|
|
|
|
|
|
|
|
+// 5. Parent +-
|
|
|
+// Добавьте каждому объекту тэга из предыдущего задания связь с родителем, используя свойство parent и присвоение
|
|
|
+/*{
|
|
|
+ let form = {
|
|
|
+ tagName : 'form',
|
|
|
+ children : [
|
|
|
+ {
|
|
|
+ tagName: 'div',
|
|
|
+ children: [
|
|
|
+ {
|
|
|
+ tagName: "span",
|
|
|
+ children: ["Enter a data please:"],
|
|
|
+ },
|
|
|
+ {
|
|
|
+ tagName: 'input',
|
|
|
+ attrs: {
|
|
|
+ type: 'text',
|
|
|
+ id: 'name'
|
|
|
+ },
|
|
|
+ },
|
|
|
+ {
|
|
|
+ tagName: 'input',
|
|
|
+ attrs: {
|
|
|
+ type: 'text',
|
|
|
+ id: 'surname'
|
|
|
+ }
|
|
|
+ }
|
|
|
+ ],
|
|
|
+ },
|
|
|
+ {
|
|
|
+ tagName: 'div',
|
|
|
+ children: [
|
|
|
+ {
|
|
|
+ tagName: 'button',
|
|
|
+ attrs: {
|
|
|
+ id: 'ok'
|
|
|
+ },
|
|
|
+ children: ["OK"]
|
|
|
+ },
|
|
|
+ {
|
|
|
+ tagName: 'button',
|
|
|
+ attrs: {
|
|
|
+ type: 'text',
|
|
|
+ id: 'cancel'
|
|
|
+ },
|
|
|
+ children: ["Cancel"]
|
|
|
+ }
|
|
|
+ ]
|
|
|
+ }
|
|
|
+ ]
|
|
|
+ }
|
|
|
+}
|
|
|
+{
|
|
|
+ let form = {
|
|
|
+ tagName : 'form',
|
|
|
+ children : form.children,
|
|
|
+ }
|
|
|
+} */
|
|
|
|
|
|
|
|
|
-// 5. Parent
|
|
|
-// Добавьте каждому объекту тэга из предыдущего задания связь с родителем, используя свойство parent и присвоение
|
|
|
+// 6. Change OK +
|
|
|
+// Добавьте(или измените) любой введенный пользователем атрибут тэга <button id='ok'> из задания HTML Tree.
|
|
|
+// Пользователь также вводит значение этого атрибута
|
|
|
+/*{
|
|
|
+ let form = {
|
|
|
+ tagName : 'form',
|
|
|
+ children : [
|
|
|
+ {
|
|
|
+ tagName: 'div',
|
|
|
+ children: [
|
|
|
+ {
|
|
|
+ tagName: "span",
|
|
|
+ children: ["Enter a data please:"],
|
|
|
+ },
|
|
|
+ {
|
|
|
+ tagName: 'input',
|
|
|
+ attrs: {
|
|
|
+ type: 'text',
|
|
|
+ id: 'name',
|
|
|
|
|
|
-// 6. Change OK
|
|
|
-// Добавьте(или измените) любой введенный пользователем атрибут тэга <button id='ok'> из задания HTML Tree. Пользователь также вводит значение этого атрибута.
|
|
|
+ },
|
|
|
+ },
|
|
|
+ {
|
|
|
+ tagName: 'input',
|
|
|
+ attrs: {
|
|
|
+ type: 'text',
|
|
|
+ id: 'surname'
|
|
|
+ }
|
|
|
+ }
|
|
|
+ ],
|
|
|
+ },
|
|
|
+ {
|
|
|
+ tagName: 'div',
|
|
|
+ children: [
|
|
|
+ {
|
|
|
+ tagName: 'button',
|
|
|
+ attrs: {
|
|
|
+ id: 'ok'
|
|
|
+ },
|
|
|
+ children: ["OK"]
|
|
|
+ },
|
|
|
+ {
|
|
|
+ tagName: 'button',
|
|
|
+ attrs: {
|
|
|
+ type: 'text',
|
|
|
+ id: 'cancel'
|
|
|
+ },
|
|
|
+ children: ["Cancel"]
|
|
|
+ }
|
|
|
+ ]
|
|
|
+ }
|
|
|
+ ]
|
|
|
+ }
|
|
|
+ form.children[1].children[0].attrs['maxLength'] = prompt('Введите значение maxLength');
|
|
|
+ console.log(form.children[1].children[0].attrs)
|
|
|
+}*/
|
|
|
|
|
|
-//7. Destructure
|
|
|
+//7. Destructure +
|
|
|
// Используя деструктуризацию структуры из задания HTML Tree, Выведите значения текста в тэге span,
|
|
|
// Выведите значения текста во второй кнопке и Выведите значение атрибута id во втором input.
|
|
|
+/*{
|
|
|
+ let form = {
|
|
|
+ tagName : 'form',
|
|
|
+ children : [
|
|
|
+ {
|
|
|
+ tagName: 'div',
|
|
|
+ children: [
|
|
|
+ {
|
|
|
+ tagName: "span",
|
|
|
+ children: ["Enter a data please:"],
|
|
|
+ },
|
|
|
+ {
|
|
|
+ tagName: 'input',
|
|
|
+ attrs: {
|
|
|
+ type: 'text',
|
|
|
+ id: 'name',
|
|
|
+
|
|
|
+ },
|
|
|
+ },
|
|
|
+ {
|
|
|
+ tagName: 'input',
|
|
|
+ attrs: {
|
|
|
+ type: 'text',
|
|
|
+ id: 'surname'
|
|
|
+ }
|
|
|
+ }
|
|
|
+ ],
|
|
|
+ },
|
|
|
+ {
|
|
|
+ tagName: 'div',
|
|
|
+ children: [
|
|
|
+ {
|
|
|
+ tagName: 'button',
|
|
|
+ attrs: {
|
|
|
+ id: 'ok'
|
|
|
+ },
|
|
|
+ children: ["OK"]
|
|
|
+ },
|
|
|
+ {
|
|
|
+ tagName: 'button',
|
|
|
+ attrs: {
|
|
|
+ type: 'text',
|
|
|
+ id: 'cancel'
|
|
|
+ },
|
|
|
+ children: ["Cancel"]
|
|
|
+ }
|
|
|
+ ]
|
|
|
+ }
|
|
|
+ ]
|
|
|
+ }
|
|
|
+const textSpan = form.children[0].children[0].children;
|
|
|
+console.log(textSpan);
|
|
|
+const textButton = form.children[1].children[1].children;
|
|
|
+console.log(textButton);
|
|
|
+const id = form.children[0].children[2].attrs.id;
|
|
|
+console.log(id)
|
|
|
+} */
|
|
|
|
|
|
// 8. Destruct array +
|
|
|
// напишите код, который используя деструктуризацию положит:
|
|
|
// четные числа в переменные even1, even2; нечетные в odd1, odd2, odd3; буквы в отдельный массив
|
|
|
+
|
|
|
/*{
|
|
|
let arr = [1,2,3,4,5,"a","b","c"];
|
|
|
[odd1, even1, odd2, even2, odd3, ...letters] = arr;
|
|
|
@@ -73,6 +278,7 @@
|
|
|
// 9. Destruct string +
|
|
|
//// напишите код, который используя деструктуризацию положит: число в переменную number; букву a в переменную s1;
|
|
|
// букву b в переменную s2; букву c в переменную s3
|
|
|
+
|
|
|
/*{
|
|
|
let arr = [1, "abc"];
|
|
|
[number, [s1, s2, s3]] = arr;
|
|
|
@@ -98,45 +304,148 @@
|
|
|
const {0:a, 1:b, length} = arr;
|
|
|
}*/
|
|
|
|
|
|
-// 12. Copy delete
|
|
|
+// 12. Copy delete +
|
|
|
// Сделайте копию одного из объектов из задания Literals без ключа, который введет пользователь.
|
|
|
-{
|
|
|
+/*{
|
|
|
const dog = {
|
|
|
- name: "leo",
|
|
|
- color: "orange",
|
|
|
- breed: "spitz",
|
|
|
+ name: "leo",
|
|
|
+ color: "orange",
|
|
|
+ breed: "spitz",
|
|
|
}
|
|
|
+
|
|
|
+ const dog2 = {...dog};
|
|
|
+
|
|
|
+ dog2[prompt('Добавьте одно из свойств собаки')] = prompt('Введите значение');
|
|
|
+ console.log(dog2)
|
|
|
+} */
|
|
|
+
|
|
|
+// 13.Currency real rate +
|
|
|
+// Ниже приведен код, который скачивает актуальную информацию о курсах валют. Скопируйте ссылку из него вставьте в
|
|
|
+// браузер интереса ради. Реализуйте калькулятор обмена валют следующим образом:
|
|
|
+/*{
|
|
|
+ let sum = prompt("Введите сумму в исходной валюте")
|
|
|
+
|
|
|
+ fetch('https://open.er-api.com/v6/latest/USD').then(res => res.json())
|
|
|
+ .then(data => {
|
|
|
+ const {[prompt("Введите исходную валюту").toUpperCase()]:baseCurrency} = data.rates;
|
|
|
+ const {[prompt("Введите валюту в которую просходит конверция").toUpperCase()]:quoteCurrency} = data.rates;
|
|
|
+ let result = baseCurrency/quoteCurrency*sum;
|
|
|
+ console.log(result)
|
|
|
+ })
|
|
|
}
|
|
|
+*/
|
|
|
+
|
|
|
+// 14. Currency drop down +
|
|
|
+// Сделайте выпадающий список с названиями всех валют, используя код из прошлого задания и накопление HTML-тэгов
|
|
|
+// в строковой переменной. Для выпадающих списков в HTML предусмотрены тэги <select> и <option>
|
|
|
+
|
|
|
+/* { fetch('https://open.er-api.com/v6/latest/USD').then(res => res.json())
|
|
|
+ .then(data => {
|
|
|
+ console.log(data);
|
|
|
+ let rates = Object.keys(data.rates);
|
|
|
+ console.log(rates);
|
|
|
+ let str = "<select>";
|
|
|
+ for (let currency of rates){
|
|
|
+ str += "<option>"+ currency + "</option>";
|
|
|
+ }
|
|
|
+ str += "</select>"
|
|
|
+ document.write(str);
|
|
|
+ })
|
|
|
+} */
|
|
|
+
|
|
|
+// 15. Currency table +-
|
|
|
+// Сделайте двумерную таблицу с курсами между всеми возможными парами валют по типу таблицы Пифагора, используя
|
|
|
+// заготовку из задания Currency real rate:
|
|
|
+/* fetch('https://open.er-api.com/v6/latest/USD').then(res => res.json())
|
|
|
+ .then(data => {
|
|
|
+ //console.log(data);
|
|
|
+ const rates = Object.keys(data.rates);
|
|
|
+ const values = Object.values(data.rates);
|
|
|
+ console.log(rates);
|
|
|
+ console.log(values);
|
|
|
|
|
|
-// 13.Currency real rate
|
|
|
-// Ниже приведен код, который скачивает актуальную информацию о курсах валют. Скопируйте ссылку из него вставьте в браузер интереса ради. Реализуйте калькулятор обмена валют следующим образом:
|
|
|
-//
|
|
|
-// Пользователь вводит исходную валюту
|
|
|
-// Пользователь вводит валюту, в которую происходит конвертация
|
|
|
-// Пользователь вводит сумму в исходной валюте
|
|
|
-// Пользовател видит результат конвертации
|
|
|
-//
|
|
|
-// fetch('https://open.er-api.com/v6/latest/USD').then(res => res.json())
|
|
|
-// .then(data => {
|
|
|
-// //эта функция запускается когда данные скачиваются.
|
|
|
-// //остальной код работает РАНЬШЕ.
|
|
|
-// //только ТУТ есть переменная data со скачанными данными
|
|
|
-// console.log(data) //изучите структуру, получаемую с сервера в консоли
|
|
|
-// })
|
|
|
-//
|
|
|
-// Учтите, что пользователь может ввести какую-то дичь или название валют в неверном регистре
|
|
|
-
|
|
|
-// 14. Currency drop down
|
|
|
-// Сделайте выпадающий список с названиями всех валют, используя код из прошлого задания и накопление HTML-тэгов в строковой переменной. Для выпадающих списков в HTML предусмотрены тэги <select> и <option>
|
|
|
-
|
|
|
-// 15. Currency table (таблица в конспекте
|
|
|
-// Сделайте двумерную таблицу с курсами между всеми возможными парами валют по типу таблицы Пифагора, используя заготовку из задания Currency real rate:
|
|
|
-
|
|
|
-//16. Form в конспекте
|
|
|
+ document.write('<table border=1, cellpadding=0, cellspacing=0, width="100%">');
|
|
|
+ for (let i = 0; i < values.length; i++) {
|
|
|
+ document.write("<tr>" + values[i].toFixed(3) + "</tr>");
|
|
|
+
|
|
|
+ for (let k = 0; k < values.length; k++) {
|
|
|
+ document.write("<td>" + (values[i]/values[k]).toFixed(3) + "</td>");
|
|
|
+ }
|
|
|
+ document.write("</tr>");
|
|
|
+ }
|
|
|
+ document.write('</table>');
|
|
|
+ })
|
|
|
+*/
|
|
|
+
|
|
|
+//16. Form +
|
|
|
// Напишите код, который их любого объекта создает форму HTML. Например для такого объекта
|
|
|
+/*{
|
|
|
+ const car = {
|
|
|
+ "Name":"chevrolet chevelle malibu",
|
|
|
+ "Cylinders":8,
|
|
|
+ "Displacement":307,
|
|
|
+ "Horsepower":130,
|
|
|
+ "Weight_in_lbs":3504,
|
|
|
+ "Origin":"USA",
|
|
|
+ "in_production": false
|
|
|
+ }
|
|
|
+ for (const [key, values] of Object.entries(car)) {
|
|
|
+ console.log(key, values)
|
|
|
+ let str = "<form>";
|
|
|
+ if (typeof values === 'string') {
|
|
|
+ str += "<label>" + key + "<input type='text' value='" + values + "'/>" + "</label>";
|
|
|
+ } else if (typeof values === 'number') {
|
|
|
+ str += "<label>" + key + "<input type='number' value='" + values + "'/>" + "</label>";
|
|
|
+ } else if (typeof values === 'boolean') {
|
|
|
+ str += "<label>" + key + "<input type='checkbox' value='" + values + "'/>" + "</label>";
|
|
|
+ }
|
|
|
+ str += "</form>"
|
|
|
+ document.write(str);
|
|
|
+ }
|
|
|
+} */
|
|
|
|
|
|
-//17. Соответствие типов в конспекте
|
|
|
|
|
|
-//18. Table в конспекте
|
|
|
+//17. Table в конспекте
|
|
|
// Даден любой массив с объектами
|
|
|
|
|
|
+const persons = [
|
|
|
+ {
|
|
|
+ name: 'Мария',
|
|
|
+ fatherName: 'Ивановна',
|
|
|
+ surname: 'Иванова',
|
|
|
+ sex: 'female'
|
|
|
+ },
|
|
|
+ {
|
|
|
+ name: 'Николай',
|
|
|
+ fatherName: 'Иванович',
|
|
|
+ surname: 'Иванов',
|
|
|
+ age: 15
|
|
|
+ },
|
|
|
+ {
|
|
|
+ name: 'Петр',
|
|
|
+ fatherName: 'Иванович',
|
|
|
+ surname: 'Иванов',
|
|
|
+ married: true
|
|
|
+ },
|
|
|
+]
|
|
|
+
|
|
|
+const joinObj = {
|
|
|
+ ...persons[0],
|
|
|
+ ...persons[1],
|
|
|
+ ...persons[2]
|
|
|
+}
|
|
|
+
|
|
|
+{
|
|
|
+ const keyS = Object.keys(joinObj);
|
|
|
+ const lineArr = Object.values(joinObj);
|
|
|
+
|
|
|
+ let str = "<table width='80%' border='1' bgcolor='#add8e6'>"
|
|
|
+ for (let name of keyS) {
|
|
|
+ str +="<th>"+ name +"</th>";
|
|
|
+ }
|
|
|
+ for (let line of lineArr) {
|
|
|
+ str += "<tr>"+ line +"</tr>";
|
|
|
+ }
|
|
|
+ str+= "</table>";
|
|
|
+ document.write(str)
|
|
|
+}
|
