|
|
@@ -0,0 +1,333 @@
|
|
|
+
|
|
|
+function App() {
|
|
|
+
|
|
|
+ // Сформируйте объект с массивами и массив с объектами с осмысленными данными.
|
|
|
+
|
|
|
+ var MarketShelf = {
|
|
|
+ Candies: ['red', 'green', 'blue'],
|
|
|
+ Cookies: ['chocolate', 'raisin', 'cream'],
|
|
|
+ Soda: ['Pepsi', 'Fanta', 'Sprite']
|
|
|
+ }
|
|
|
+
|
|
|
+ var Collegues = [
|
|
|
+ { name: 'Sasha', age: '35', occupation: 'PM' },
|
|
|
+ { name: 'Slava', age: '20', occupation: 'Front End Developer' },
|
|
|
+ { name: 'Bohdan', age: '40', occupation: 'Back End Developer' }
|
|
|
+ ]
|
|
|
+
|
|
|
+ // Добавьте условие отрицательного возраста в пример выше.
|
|
|
+ // Расставьте недостающие(но синтаксически необязательные) фигурные скобки.
|
|
|
+
|
|
|
+
|
|
|
+ var age = +prompt("Сколько вам лет?", "");
|
|
|
+
|
|
|
+ if (age < 0) {
|
|
|
+ alert("ты вообще жив?");
|
|
|
+ }
|
|
|
+ else {
|
|
|
+ if (age < 18) {
|
|
|
+ alert("школьник");
|
|
|
+ }
|
|
|
+ else {
|
|
|
+ if (age > 18 && age < 30) {
|
|
|
+ alert("молодежь");
|
|
|
+ }
|
|
|
+ else {
|
|
|
+ if (age > 30 && age < 45) {
|
|
|
+ alert("зрелость");
|
|
|
+ }
|
|
|
+ else {
|
|
|
+ if (age > 45 && age < 60) {
|
|
|
+ alert("закат");
|
|
|
+ }
|
|
|
+ else {
|
|
|
+ if (age > 60) {
|
|
|
+ alert("как пенсия?");
|
|
|
+ }
|
|
|
+ else {
|
|
|
+ alert("то ли киборг, то ли ошибка");
|
|
|
+ }
|
|
|
+ }
|
|
|
+ }
|
|
|
+ }
|
|
|
+ }
|
|
|
+ }
|
|
|
+
|
|
|
+ // Перепишите пример выше, используя if-else
|
|
|
+
|
|
|
+ var color = prompt("Введите цвет", "");
|
|
|
+
|
|
|
+ if (color == 'red') {
|
|
|
+ document.write("<div style='background-color: red;'>красный</div>");
|
|
|
+ }
|
|
|
+ else if (color == "black") {
|
|
|
+ document.write("<div style='background-color: black; color: white;'>черный</div>");
|
|
|
+ }
|
|
|
+ else if (color == "blue") {
|
|
|
+ document.write("<div style='background-color: blue;'>синий</div>");
|
|
|
+ }
|
|
|
+ else if (color == "green") {
|
|
|
+ document.write("<div style='background-color: green;'>зеленый</div>");
|
|
|
+ }
|
|
|
+ else {
|
|
|
+ document.write("<div style='background-color: gray;'>Я не понял</div>");
|
|
|
+ }
|
|
|
+
|
|
|
+ // Напишите бессмысленное выражение, используя максимум усвоенных на текущий момент знаний.
|
|
|
+
|
|
|
+ /*
|
|
|
+ do {
|
|
|
+ var a = [a, b, c, d, e];
|
|
|
+ if (someVariable != 1 || otherVariable === 12) {
|
|
|
+ alert('alert1');
|
|
|
+ }
|
|
|
+ else if ([a] != 5) {
|
|
|
+ var j = 7 ? seven : notSeven;
|
|
|
+ }
|
|
|
+ else {
|
|
|
+ switch (nthVariable) {
|
|
|
+ case 1: alert('Glory to Ukraine');
|
|
|
+ break;
|
|
|
+ case 2: alert('Glory to Heroes!');
|
|
|
+ break;
|
|
|
+ default: alert('Death to Enemies!');
|
|
|
+ }
|
|
|
+ }
|
|
|
+ }
|
|
|
+ while (a <= 7 && b !== 3, 14)
|
|
|
+ */
|
|
|
+
|
|
|
+ // assign: evaluation
|
|
|
+
|
|
|
+ // Исследуйте код, найдите выражения в нём.
|
|
|
+ // Расставьте скобки так, что бы код не изменил своего поведения (работал так же как и сейчас).
|
|
|
+ // Объясните как и в каком порядке вычисляются выражения и подвыражения.
|
|
|
+
|
|
|
+ var a = (5); //5 - выражение
|
|
|
+ var b, c;
|
|
|
+ b = ((a) * 5); // выражение
|
|
|
+ b = (c = (b / 2)); // выражение
|
|
|
+
|
|
|
+ // 1. Сначала объявляется переменная а, ей присваевается значение 5.
|
|
|
+ // 2. Затем объявляются переменные b и c.
|
|
|
+ // 3. Переменная b высчитывается на третьей строчке кода и ей присваевавается вычисленное значение.
|
|
|
+ // 4. На четвёртой строчке кода в переменной b вычисляется переменная c, исполльзуя значение раннее вычесленной переменной b.
|
|
|
+ // 5. В переменную b присваевается значение переменной c и выводится в консоли.
|
|
|
+
|
|
|
+ // semicolon: error
|
|
|
+
|
|
|
+ // Сделайте несколько примеров кода, отсутствие ; в которых приводит к синтаксической ошибке
|
|
|
+
|
|
|
+ /*
|
|
|
+ var a = 6 var b = 14;
|
|
|
+ prompt('message') alert('warning');
|
|
|
+ */
|
|
|
+
|
|
|
+ // semicolon: mistake
|
|
|
+
|
|
|
+ // Сделайте несколько примеров кода, наличиe или отсутствие ; в которых приводит к логической ошибке
|
|
|
+ // (т. е. код выполняется без синтаксических ошибок, но делает не то, что задумано)
|
|
|
+
|
|
|
+
|
|
|
+
|
|
|
+ // Number: age
|
|
|
+
|
|
|
+ // С помощью prompt спросить у пользователя его возраст и подсчитать год рождения. Год рождения вывести с помощью alert.
|
|
|
+
|
|
|
+ var age = +prompt('Сколько вам сейчас лет?');
|
|
|
+ var YearOfBirth = 2022 - age;
|
|
|
+ alert('Ваш год рождения: ' + YearOfBirth);
|
|
|
+
|
|
|
+ // Number: temperature
|
|
|
+
|
|
|
+ // С помощью prompt спросить у пользователя температуру в градусах Цельсия и перевести их в Фаренгейты и/или наоборот.
|
|
|
+
|
|
|
+ var DegCelcium = prompt('Введите температуру по шкале Цельсия:');
|
|
|
+ var DegFahrenheit = (DegCelcium * 1.8) + 32;
|
|
|
+ alert('Температура по шкале Фаренгейта равна: ' + DegFahrenheit);
|
|
|
+
|
|
|
+ // Number: divide
|
|
|
+
|
|
|
+ // Сделайте калькулятор для расчета деления нацело двух чисел. Используйте Math.floor или альтернативы.
|
|
|
+
|
|
|
+ var a = prompt('Enter the first number: ');
|
|
|
+ var b = prompt('Enter the second number: ');
|
|
|
+ alert('Result:' + Math.floor(a / b));
|
|
|
+
|
|
|
+ // Number: odd
|
|
|
+
|
|
|
+ // С помощью prompt узнайте число, введенное пользователем. С помощью if проверьте что число корректно преобразовано из строки.
|
|
|
+ // В случае ошибки выведите сообщение. Выведите четное число или нет, используя if.
|
|
|
+
|
|
|
+ var Number = +prompt('Введите число: ');
|
|
|
+ if (isNaN(Number)) {
|
|
|
+ alert('Введенное значение не является числом!');
|
|
|
+ }
|
|
|
+ else {
|
|
|
+ if (Number % 2 === 0) {
|
|
|
+ alert('Число чётное.');
|
|
|
+ }
|
|
|
+ else {
|
|
|
+ alert('Число нечётное.');
|
|
|
+ }
|
|
|
+ }
|
|
|
+
|
|
|
+ // String: greeting
|
|
|
+
|
|
|
+ // Спросите у пользователя имя, и поприветствуйте его с помощью alert.
|
|
|
+
|
|
|
+ var Name = prompt('What is your name, stranger?');
|
|
|
+ alert('May the Force be with you, ' + Name + '!');
|
|
|
+
|
|
|
+ // String: lexics
|
|
|
+
|
|
|
+ // Спросите у пользователя текст, и проверьте его на наличие некорректного слова или нескольких некорректных слов.
|
|
|
+ // Используйте метод indexOf (или includes) строки.
|
|
|
+
|
|
|
+ var SampleText = prompt('Enter some text...');
|
|
|
+ if (SampleText.includes('fuck')) {
|
|
|
+ alert('Hey, that is way too rude!');
|
|
|
+ }
|
|
|
+ else {
|
|
|
+ alert('Okay, that is kinda interesting.')
|
|
|
+ }
|
|
|
+
|
|
|
+ // confirm
|
|
|
+
|
|
|
+ // Поэкспериментируйте с confirm, определите тип данных, который он возвращает, и конкретные значения этого типа данных.
|
|
|
+
|
|
|
+ console.log(typeof window.confirm()) // 'funciton', возвращает true или false
|
|
|
+
|
|
|
+ // Boolean
|
|
|
+
|
|
|
+ // Напишите код, который спрашивает те или иные вопросы с ответом "да"/"нет" с помощью confirm, и сохраняет ответы в переменных.
|
|
|
+
|
|
|
+ var question = window.confirm('Are you a human?')
|
|
|
+ console.log(question);
|
|
|
+
|
|
|
+ // Boolean: if
|
|
|
+
|
|
|
+ // Расширьте предыдущее задание условиями по полученным переменным условиями (if else).
|
|
|
+ // Например, если вы спрашиваете пол пользователя с помощью confirm, то по условию сделайте alert("Вы женщина") и alert("Вы мужчина").
|
|
|
+
|
|
|
+ var sex = window.confirm('Are you a dishwasher?')
|
|
|
+ if (sex == true) {
|
|
|
+ alert("Вы женщина");
|
|
|
+ }
|
|
|
+ else {
|
|
|
+ alert("Вы мужчина");
|
|
|
+ }
|
|
|
+
|
|
|
+ // Array: real
|
|
|
+
|
|
|
+ // Понаходите в вашей жизни вещи, которые похожи на массивы, и другие вещи, которые можно смоделировать с помощью массивов.
|
|
|
+
|
|
|
+ var documents = ['ID card', 'Driver license', 'Military ID'];
|
|
|
+ var classMates = ['Vasya', 'Danya', 'Kostya'];
|
|
|
+ var pencilBox = ['red', 'green', 'blue', 'cyan', 'magnetta', 'yellow', 'black'];
|
|
|
+
|
|
|
+ // Array: booleans
|
|
|
+
|
|
|
+ // Создайте массив с переменными из заданий Boolean и Boolean if.
|
|
|
+
|
|
|
+ var Boolean = [question];
|
|
|
+ var BooleanIf = [sex];
|
|
|
+
|
|
|
+ // Array: plus
|
|
|
+
|
|
|
+ // Напишите код, который складывает первые два элемента массива и заносит это в элемент с индексом 2. Исследуйте полученный массив.
|
|
|
+
|
|
|
+ var arr = [1, 2];
|
|
|
+ arr[2] = arr[0] + arr[1];
|
|
|
+ console.log(arr);
|
|
|
+
|
|
|
+ // Array: plus string
|
|
|
+
|
|
|
+ // Что будет, если в предыдущий примере использовать строки вместо чисел?
|
|
|
+ // Сделайте версию для сложения 3х значений. Подумайте, зачем нужна эта возможность в наших примерах.
|
|
|
+
|
|
|
+ var arr = ['hi ', 'hello ', 'how do you do'];
|
|
|
+ arr[3] = arr[0] + arr[1] + arr[2];
|
|
|
+ console.log(arr);
|
|
|
+
|
|
|
+ // Object: real
|
|
|
+
|
|
|
+ // Найдите те или иные реальные объекты и найдите их свойства.
|
|
|
+ // Например у маркера это цвет, толщина, уровень зарядки (количество краски),
|
|
|
+ // у автомобиля - бренд, модель, мощность двигателя, цвет и так далее. Создайте объекты с помощью {}.
|
|
|
+ // В качестве образца посмотрите объект персоны из материала предыдущего занятия
|
|
|
+
|
|
|
+ var Mercedes = {
|
|
|
+ model: 'AMG GT Coupe',
|
|
|
+ color: 'gray',
|
|
|
+ year: '2022',
|
|
|
+ volume: '4,0 l',
|
|
|
+ power: '522 HP',
|
|
|
+ }
|
|
|
+
|
|
|
+ // Object: change
|
|
|
+
|
|
|
+ // Поменяйте значения свойств в ваших объектах, используя [] и . и присвоения.
|
|
|
+
|
|
|
+ Mercedes['model'] = 'G63';
|
|
|
+ Mercedes.power = '577 HP';
|
|
|
+
|
|
|
+ // Comparison: sizes
|
|
|
+
|
|
|
+ // Сделайте перевод перевод из нашей системы размеров в американскую или любую на выбор.
|
|
|
+ // Используйте prompt, условия сравнения и alert.
|
|
|
+
|
|
|
+ var clothesSize = +prompt('Введите размер одежды по украинским меркам:');
|
|
|
+ if (clothesSize >= 40 && clothesSize < 42) {
|
|
|
+ alert('S');
|
|
|
+ }
|
|
|
+ else if (clothesSize >= 42 && clothesSize < 46) {
|
|
|
+ alert('M');
|
|
|
+ }
|
|
|
+ else if (clothesSize >= 46 && clothesSize < 50) {
|
|
|
+ alert('L');
|
|
|
+ }
|
|
|
+ else if (clothesSize >= 50 && clothesSize < 54) {
|
|
|
+ alert('XL');
|
|
|
+ }
|
|
|
+ else if (clothesSize == 54) {
|
|
|
+ alert('XXL');
|
|
|
+ }
|
|
|
+ else {
|
|
|
+ alert('Тут что-то не так...')
|
|
|
+ }
|
|
|
+
|
|
|
+ // Comparison: object
|
|
|
+
|
|
|
+ // Подумайте о том, как можно применить объекты к предыдущем заданию.
|
|
|
+
|
|
|
+ var Size = {
|
|
|
+ S: [40, 41],
|
|
|
+ M: [42, 43, 44, 45],
|
|
|
+ L: [46, 47, 48, 49],
|
|
|
+ XL: [50, 51, 52, 53],
|
|
|
+ XXL: [54],
|
|
|
+ }
|
|
|
+
|
|
|
+ // Ternary
|
|
|
+
|
|
|
+ // Спросите у пользователя пол (confirm). Выведите с помощью alert "Вы мужчина" или "Вы женщина".
|
|
|
+ // Сделайте это оператором alert. Используйте тернарный оператор.
|
|
|
+
|
|
|
+ var sex = window.confirm('Are you a dishwasher?') ? alert("Вы женщина") : alert("Вы мужчина");
|
|
|
+
|
|
|
+ // Синий пояс Number: flats
|
|
|
+
|
|
|
+ // Сделайте калькулятор, который позволит вам исходя из информации о количества
|
|
|
+ // этажей в доме и количества квартир на этаже находить подъезд и этаж определенной квартиры по её номеру.
|
|
|
+ // Например для 9-этажного дома по 4 квартиры на этаж 81 квартира находится на 3м этаже третьего подъезда.
|
|
|
+
|
|
|
+ var FloorNumber = prompt('Enter the number of floors:');
|
|
|
+ var FlatsPerFloor = prompt('How many flats are on the one floor?');
|
|
|
+ var FlatNumber = prompt('Enter the flat number:');
|
|
|
+ var Section = Math.floor((FlatNumber - 1) / (FloorNumber * FlatsPerFloor) + 1);
|
|
|
+ var Floor = Math.floor(((FlatNumber - (Section - 1) * FloorNumber * FlatsPerFloor) - 1) / FlatsPerFloor + 1);
|
|
|
+ alert('Your flat is on the ' + (Section) + ' section on the ' + (Floor) + ' floor.');
|
|
|
+}
|
|
|
+
|
|
|
+export default App;
|
