JavaScript

OlgaRedozubova · Mar 14, 2018 · c5bf534 · c5bf534
commit c5bf534
Show file tree

Hide file tree

Showing 46 changed files with 1,292 additions and 0 deletions.
diff --git a/HomeWork2/HomeWork2.js b/HomeWork2/HomeWork2.js
@@ -0,0 +1,51 @@
+/*Задача 1.
+Необходимо вывести на экран числа от 5 до 1.*/
+document.write('Задача 1.</br>');
+var i = 5;
+while (i > 0) {
+  document.write(i);
+  i--;
+}
+document.write('</br>');
+/*Задача 2.
+Вывести на экран таблицу умножения на 3:
+  3*1=3
+  3*2=6
+  3*3=9
+  3*4=12
+  3*5=15
+  3*6=18
+  3*7=21
+  3*8=24
+  3*9=27
+  3*10=30*/
+  document.write('Задача 2.</br>');
+  var sum = 0;
+  for (i = 1; i <= 10; i++){
+    sum = 3 * i;
+    document.write('3*' + i + '=' + sum + '</br>');
+  }
+/* Задача 3.
+  Написать код при котором юзер вводит любое целое положительное число. А программа суммирует все числа от 1 до введенного пользователем числа.
+  То есть если пользователь введет число 3. Ваш код  должен посчитать сумму чисел от 1 до 3, то есть 1+2+3 и выдать
+  ответ 6
+*/  
+document.write('Задача 3.</br>');
+var a = prompt ('Введите любое целое положительное число.');
+sum = 0;
+for (i = 1; i <= a; i++) {
+  sum = sum + i;
+}
+document.write('Сумма чисел от 1 до ' + a + ' равна ' + sum + '</br>');
+/* Задача 4.
+Напишите функцию  которая будет последовательно выводить числа от 1 до 10, с интервалом между числами 300 мс.*/
+document.write('Задача 4.</br> Результат в консоле.');
+i = 1;
+function number () {
+  var intervalID = setInterval (function () {
+    console.log(i);
+    if (i == 10) {clearInterval(intervalID )};
+    i++;
+  }, 300);
+};
+number ();
diff --git a/HomeWork2/index.html b/HomeWork2/index.html
@@ -0,0 +1,12 @@
+<!DOCTYPE html>
+<html lang="en">
+<head>
+  <meta charset="UTF-8">
+  <meta name="viewport" content="width=device-width, initial-scale=1.0">
+  <meta http-equiv="X-UA-Compatible" content="ie=edge">
+  <title>Document</title>
+</head>
+<body>
+  <script src="HomeWork2.js"> </script>
+</body>
+</html>
diff --git a/HomeWork3/HomeWork3.js b/HomeWork3/HomeWork3.js
@@ -0,0 +1,102 @@
+/*Задача 1
+	Даны два массива: ['a', 'b', 'c'] и [1, 2, 3]. Объедините их вместе.
+ */
+
+document.write('Задача 1' + '</br>');
+var arr1 = ['a', 'b', 'c'];
+var arr2 = [1, 2, 3];
+document.write('Объединеный массив [' + arr1.concat(arr2) + '] </br>');
+
+/* Задача 2*/
+document.write('Задача 2' + '</br>');
+var a = ['admin', 'admin', 'admin'];
+var b = ['1', '2', '3'];
+var c = a.push(b);
+document.write(c + '</br>')
+
+/*
+Задача 3
+ - Напишите код который  запрашивает по очереди значения при помощи prompt и сохраняет их в массиве.
+Заканчивает ввод, как только посетитель введёт пустую строку, не число или нажмёт «Отмена».
+0 не должен заканчивать ввод, это разрешённое число.
+Выводит сумму всех значений массива;
+*/
+document.write('Задача 3' + '</br>');
+var arr = [];
+var sum = 0;
+while (true) {
+  let a = prompt ('Введите число');
+  if (a == null || a == '' || isNaN(a)) {
+    break;
+  } else {
+    arr.push(a);
+    sum = sum + +a;
+  }
+};
+document.write('Массив = [' + arr + ']</br>');
+document.write('Сумма = ' + sum + '</br>');
+
+/*
+Задача 4
+  Cоздать массив с данными;  
+  Написать функцию которая ищет значение Value в массиве и возвращает его index, 
+  есть он есть, если нету то -1;
+	Например arr = [«user», 3, 4, «b»];
+	find(arr, «user»); Должен вернуть 0.
+*/
+document.write('Задача 4' + '</br>');
+var mas = ["user", 3, 4, "b"];
+function find (mas, val) {
+  return mas.indexOf(val);
+}
+document.write('Массив = ' + mas + '</br>');
+document.write('Value = ' + 'user' + '</br>');
+document.write('Index = ' + find(mas, 'user') + '</br>');
+
+
+var mas1 = ["user", 3, 4, "b"];
+function find (mas1, val) {
+  if(mas1.indexOf){return mas.indexOf(val);}
+  return -1;
+}
+var result = find(mas1, 'b');
+console.log(result);
+
+/* */
+var arr3 = ["user", 3, 4, "b"];
+for (var a3 = 0; a3 < arr3.length; a3++){
+  document.write(arr3[a3] + ' ' + arr3.indexOf(arr3[a3]) + '</br>');
+}
+
+var arr4 = ["user", 3, 4, "b"];
+var arr5 = [];
+arr4.filter(item => {
+  if(item.length === 4) {
+    arr5.push(item);
+  }
+});
+console.log(arr5);
+
+/*Данн массив из 7 элементов. В каждом массиве посчитать кол-во не четных эл. на не четных индексах */
+var arr6 = [1, 3, 4, 5, 6];
+/*for (var i6 = 0; i6 < arr6.length; i6++) {
+  if (arr6[i6] % 2) {
+    if (i6 % 2) {
+
+    }
+  }
+}*/
+arr6.filter((item, index) => {
+  if(index % 2) {
+    if (item % 2) {
+      console.log(index, item);  
+    }
+  }
+});
+/*Отфильтровать элементвы массива, которые строки */
+var arr7 = ['aaaa', 3, 4, 5, 6, 7];
+arr7.filter((item) => {
+  if (typeof item  === 'string') {
+    console.log(item);
+  }
+});
diff --git a/HomeWork3/index.html b/HomeWork3/index.html
@@ -0,0 +1,12 @@
+<!DOCTYPE html>
+<html lang="en">
+<head>
+  <meta charset="UTF-8">
+  <meta name="viewport" content="width=device-width, initial-scale=1.0">
+  <meta http-equiv="X-UA-Compatible" content="ie=edge">
+  <title>Document</title>
+</head>
+<body>
+  <script src="HomeWork3.js"> </script>
+</body>
+</html>
diff --git a/HomeWork4/HomeWork4.js b/HomeWork4/HomeWork4.js
@@ -0,0 +1,55 @@
+/*Объекты*/
+/* 1. Создайте объект в котором будут храниться суммы денег  пользователей;
+	Напишите код, который выведет сумму всех денег у пользователей;*/
+var bank = {
+  'Вася': 6000,
+  'Петя': 2000,
+  'Лена': 11000,
+  'Коля': 5000,
+  'Настя': 3000    
+};
+
+function getSum(obj) {
+  let total = 0;
+  for (var key in obj) {
+    total += obj[key];
+  }
+  return total;
+} 
+/*2. Берем этот же объект. Нужно вывести имя пользователя у которого больше всех денег.*/
+function getUserMaxMoney(obj) {
+  var max = 0;
+  var money = 0;
+  var user = '';
+  for (var key in obj) {
+    money = obj[key];
+    if (max < money) {
+      max = money;
+      user = key;
+    }
+  }
+  return user;
+} 
+
+document.write('Сумма всех денег у пользователей - ' + getSum(bank) + '</br>');
+document.write('Пользователь у которого больше всех денег - ' + getUserMaxMoney(bank) + '</br>');
+
+/*
+3. Создайте функцию , которая получает  объект и умножает все численные свойства на 2. 
+	Например:
+	var menu = {   width: 300,   height: 400,   title: "My title" };
+*/
+var menu = {   
+  width: 300,   
+  height: 400,   
+  title: "My title" 
+};
+function multiply(obj) {
+  for (var key in obj) {
+    if (!isNaN(obj[key])) {
+      obj[key] *= 2;
+    }
+  }
+  return obj;
+}
+console.log(multiply(menu));
diff --git a/HomeWork4/index.html b/HomeWork4/index.html
@@ -0,0 +1,12 @@
+<!DOCTYPE html>
+<html lang="en">
+<head>
+  <meta charset="UTF-8">
+  <meta name="viewport" content="width=device-width, initial-scale=1.0">
+  <meta http-equiv="X-UA-Compatible" content="ie=edge">
+  <title>Document</title>
+</head>
+<body>
+  <script src="HomeWork4.js"></script>
+</body>
+</html>
diff --git a/JS_Home_leson/img/1.png b/JS_Home_leson/img/1.png
diff --git a/JS_Home_leson/img/10.png b/JS_Home_leson/img/10.png
diff --git a/JS_Home_leson/img/2.png b/JS_Home_leson/img/2.png
diff --git a/JS_Home_leson/img/3.png b/JS_Home_leson/img/3.png
diff --git a/JS_Home_leson/img/4.jpg b/JS_Home_leson/img/4.jpg
diff --git a/JS_Home_leson/img/4.png b/JS_Home_leson/img/4.png
diff --git a/JS_Home_leson/img/5.jpg b/JS_Home_leson/img/5.jpg
diff --git a/JS_Home_leson/img/5.png b/JS_Home_leson/img/5.png
diff --git a/JS_Home_leson/img/6.png b/JS_Home_leson/img/6.png
diff --git a/JS_Home_leson/img/7.jpg b/JS_Home_leson/img/7.jpg
diff --git a/JS_Home_leson/img/7.png b/JS_Home_leson/img/7.png
diff --git a/JS_Home_leson/img/8.png b/JS_Home_leson/img/8.png
diff --git a/JS_Home_leson/img/9.png b/JS_Home_leson/img/9.png
diff --git a/JS_Home_leson/index.html b/JS_Home_leson/index.html
@@ -0,0 +1,140 @@
+<!DOCTYPE html>
+<html lang="en">
+<head>
+  <meta charset="UTF-8">
+  <meta name="viewport" content="width=device-width, initial-scale=1.0">
+  <meta http-equiv="X-UA-Compatible" content="ie=edge">
+  <title>Document</title>
+  <style>
+    .menu ul {
+      margin: 0;
+      list-style: none;
+      padding-left: 20px;
+      display: none;
+    }
+
+    .menu .title {
+      font-size: 18px;
+      cursor: pointer;
+    }
+
+    .menu .title::before {
+      content: '▶ ';
+      font-size: 80%;
+      color: green;
+    }
+
+    .menu.open .title::before {
+      content: '▼ ';
+    }
+
+    .menu.open ul {
+      display: block;
+    }    
+
+    .container {
+      display: flex;
+      flex-direction: column;
+      width: 500px;
+      margin: 0 auto;
+    }
+    .container .item {
+      background-color: rgb(179, 173, 173);
+      border-top: 2px solid rgb(51, 99, 51);
+      padding: 15px;
+    }
+    .itemTitle {
+      display: flex;
+      justify-content: space-between;
+      align-items: center;
+      font-size: 18px;
+      font-weight: bold;
+    }
+    .itemTitle span {
+      color: rgb(53, 14, 14);
+      cursor: pointer;
+    }
+    .container p {
+      margin: 0;
+    }
+  </style>
+</head>
+<body>
+  <p>Используя JavaScript, сделайте так, чтобы при клике на кнопку исчезал элемент с id="text"</p>
+  <button>Нажмите, чтобы спрятать текст</button>
+  <p id="text">Текст</p>
+  <script>
+    //Используя JavaScript, сделайте так, чтобы при клике на кнопку исчезал элемент с id="text".
+    var button = document.getElementsByTagName("button")[0];
+    button.addEventListener('click', () => {document.getElementById("text").style.display = 'none'});
+  </script>
+  <p>Создайте кнопку, при клике на которую, она будет скрывать сама себя</p>
+  <button class="button2">Нажми, чтобы меня скрыть</button>
+  <script>
+    //Создайте кнопку, при клике на которую, она будет скрывать сама себя.
+    var button2 = document.getElementsByClassName('button2')[0];
+    button2.addEventListener('click', () => {button2.style.display='none'})    
+  </script>
+  <p>Создайте меню, которое раскрывается/сворачивается при клике:</p>
+  <div id="sweeties" class="menu">
+    <span class="title">Сладости (нажми меня)!</span>
+    <ul>
+      <li>Торт</li>
+      <li>Пончик</li>
+      <li>Пирожное</li>
+    </ul>
+  </div>
+  <script>
+    //Создайте меню, которое раскрывается/сворачивается при клике:
+    var menuElem = document.getElementById('sweeties');
+    var titleElem = menuElem.querySelector('.title');
+
+    titleElem.onclick = function() {
+      console.log(menuElem.classList);
+      menuElem.classList.toggle('open');
+    }    
+  </script>
+  <p>Есть список сообщений. Добавьте каждому сообщению по кнопке для его скрытия.</p>
+  <div class="container">
+    <div class="item">
+      <div class="itemTitle">
+        <p>Лошадь</p>
+        <span class="close">[x]</span>
+      </div>
+      <p class="itemText">
+          Домашняя лошадь — животное семейства непарнокопытных, одомашненный и единственный сохранившийся подвид дикой лошади, вымершей в дикой природе, за исключением небольшой популяции лошади Пржевальского.
+      </p>
+    </div>
+    <div class="item">
+      <div class="itemTitle">
+        <p>Осёл</p>
+        <span class="close">[x]</span>
+      </div>
+      <p class="itemText">
+          Домашний осёл или ишак — одомашненный подвид дикого осла, сыгравший важную историческую роль в развитии хозяйства и культуры человека. Все одомашненные ослы относятся к африканским ослам.
+      </p>
+    </div>
+    <div class="item">
+      <div class="itemTitle">
+        <p>Корова, а также пара слов о диком быке, о волах и о тёлках.</p>
+        <span class="close">[x]</span>
+      </div>
+      <p class="itemText">
+          Коро́ва — самка домашнего быка, одомашненного подвида дикого быка, парнокопытного жвачного животного семейства полорогих. Самцы вида называются быками, молодняк — телятами, кастрированные самцы — волами. Молодых (до первой стельности) самок называют тёлками.
+      </p>
+    </div>          
+  </div>
+  <script>
+    //Есть список сообщений. Добавьте каждому сообщению по кнопке для его скрытия.
+    var closeBtns = document.getElementsByClassName('close');
+    for (var i = 0; i < closeBtns.length; i++) {
+      //var button = buttons[i];
+      closeBtns[i].onclick =function(){
+        var el = this.parentNode.parentNode;
+        el.parentNode.removeChild(el);
+      }
+    }
+  </script> 
+
+</body>
+</html>