|
|
@@ -0,0 +1,344 @@
|
|
|
+// blocks
|
|
|
+{
|
|
|
+ let a = 10
|
|
|
+ {
|
|
|
+ let b = 20
|
|
|
+ {
|
|
|
+ let c = 30
|
|
|
+ //a === 10, b === 20, c === 30
|
|
|
+
|
|
|
+ b++
|
|
|
+ a *= 10
|
|
|
+ }
|
|
|
+ {
|
|
|
+ let c = 50
|
|
|
+ //a === 100, b === 21, c === 50
|
|
|
+ b += 500
|
|
|
+ }
|
|
|
+ {
|
|
|
+ const a = 100500
|
|
|
+ const d = "value"
|
|
|
+ //a === 100500, b === 521, c === нет переменной, d === value
|
|
|
+ {
|
|
|
+ let a = -50
|
|
|
+ b = 1000
|
|
|
+ debugger;//a === -50, b === 1000, c === нет переменной, d === value
|
|
|
+ }
|
|
|
+ debugger;//a === 100500, b === 1000, c === нет переменной, d === value
|
|
|
+ }
|
|
|
+ debugger;//a === 100, b === 1000
|
|
|
+ }
|
|
|
+ debugger;//a === 100
|
|
|
+}
|
|
|
+//Ответьте на вопросы в комментариях и сверьтесь с отладчиком. console.log специально не писал */
|
|
|
+
|
|
|
+/* comparison if*/
|
|
|
+{
|
|
|
+ var age = +prompt("Сколько вам лет?", "");
|
|
|
+ if (age < 0) {
|
|
|
+ alert("ещё не родился");
|
|
|
+ }
|
|
|
+ else {
|
|
|
+ if (age < 18) {
|
|
|
+ alert("школьник");
|
|
|
+ }
|
|
|
+ else {
|
|
|
+ if (age < 30) {
|
|
|
+ alert("молодеж");
|
|
|
+ }
|
|
|
+ else {
|
|
|
+ if (age < 45) {
|
|
|
+ alert("зрелость");
|
|
|
+ }
|
|
|
+ else {
|
|
|
+ if (age < 60) {
|
|
|
+ alert("закат");
|
|
|
+ }
|
|
|
+ else {
|
|
|
+ if (age >= 60) {
|
|
|
+ alert("как пенсия?");
|
|
|
+ }
|
|
|
+ else {
|
|
|
+ alert("то ли киборг, то ли KERNESS");
|
|
|
+ }
|
|
|
+ }
|
|
|
+ }
|
|
|
+ }
|
|
|
+ }
|
|
|
+ }
|
|
|
+}
|
|
|
+//Добавьте условие отрицательного возраста в пример выше. Расставьте недостающие (но синтаксически необязательные) фигурные скобки. Выкиньте лишнее из текущего кода
|
|
|
+
|
|
|
+/*switch: sizes
|
|
|
+Сделайте задание Comparison: sizes используя switch*/
|
|
|
+
|
|
|
+//Comparison: sizes
|
|
|
+//Сделайте перевод перевод из нашей системы размеров в американскую или любую на выбор. Используйте prompt, условия сравнения и alert.
|
|
|
+
|
|
|
+
|
|
|
+{
|
|
|
+ const sizeUA = prompt('введи размер верхней одежды, платья, брюк в системе UA (40, 42, 44, .., 54), а я перевду в буквенную USA');
|
|
|
+ let result;
|
|
|
+ switch (sizeUA) {
|
|
|
+ case "37":
|
|
|
+ case "38":
|
|
|
+ case "39":
|
|
|
+ result = "Детский размер"
|
|
|
+ break;
|
|
|
+ case "40":
|
|
|
+ case "41":
|
|
|
+ result = "S"
|
|
|
+ break;
|
|
|
+ case "42":
|
|
|
+ case "43":
|
|
|
+ result = "M"
|
|
|
+ break;
|
|
|
+ case "44":
|
|
|
+ case "45":
|
|
|
+ case "46":
|
|
|
+ result = "L"
|
|
|
+ break;
|
|
|
+ case "47":
|
|
|
+ case "48":
|
|
|
+ case "49":
|
|
|
+ case "50":
|
|
|
+ result = "XL"
|
|
|
+ break;
|
|
|
+ case "51":
|
|
|
+ case "52":
|
|
|
+ case "53":
|
|
|
+ case "54":
|
|
|
+ result = "XXL"
|
|
|
+ break;
|
|
|
+ }
|
|
|
+ alert(`ваш размер "${result}" в системе USA`)
|
|
|
+}
|
|
|
+
|
|
|
+/*switch: if
|
|
|
+Перепишите пример ниже, используя if.*/
|
|
|
+let color = prompt("Введите цвет","");
|
|
|
+switch (color){
|
|
|
+ case "red": document.write("<div style='background-color: red;'>красный</div>");
|
|
|
+ case "black": document.write("<div style='background-color: black; color: white;'>черный</div>");
|
|
|
+ break;
|
|
|
+ case "blue": document.write("<div style='background-color: blue;'>синий</div>");
|
|
|
+ case "green": document.write("<div style='background-color: green;'>зеленый</div>");
|
|
|
+ break;
|
|
|
+ default: document.write("<div style='background-color: gray;'>Я не понял</div>");
|
|
|
+}
|
|
|
+
|
|
|
+{
|
|
|
+ let color = prompt("Введите цвет","");
|
|
|
+
|
|
|
+ if (color === "red"){
|
|
|
+ document.write("<div style='background-color: red;'>красный</div>");
|
|
|
+ document.write("<div style='background-color: black; color: white;'>черный</div>")
|
|
|
+ }
|
|
|
+ if (color === "black"){
|
|
|
+ document.write("<div style='background-color: black; color: white;'>черный</div>")
|
|
|
+ }
|
|
|
+
|
|
|
+
|
|
|
+ if (color === "blue"){
|
|
|
+ document.write("<div style='background-color: blue;'>синий</div>");
|
|
|
+ document.write("<div style='background-color: green;'>зеленый</div>");
|
|
|
+ }
|
|
|
+ if (color === "green"){
|
|
|
+ document.write("<div style='background-color: green;'>зеленый</div>");
|
|
|
+ }
|
|
|
+
|
|
|
+ if ( !(color == "red" || color === "black" || color === "blue" || color === "green") ){
|
|
|
+ document.write("<div style='background-color: gray;'>Я не понял</div>")
|
|
|
+ }
|
|
|
+}
|
|
|
+
|
|
|
+/*noswitch
|
|
|
+Напишите функцию noSwitch, которая принимает объект со значениями-функциями, ключ для объекта и запускает одну из функций из объекта если ключ найден, иначе - запускает default:
|
|
|
+const noSwitch = (key, cases, defaultKey='default') => {
|
|
|
+ //проверка наличия key в cases
|
|
|
+ //если есть - достать значение по ключу. это будет функция. Запустить ее
|
|
|
+ //если нет - извлечь из объекта cases значение по ключу, имя которого лежит в переменной defaultKey. Запустить
|
|
|
+ //пущай функция noSWitch возвращает то, что возвращает одна из функций из объекта
|
|
|
+}
|
|
|
+
|
|
|
+*/
|
|
|
+{
|
|
|
+ const noSwitch = (key, cases, defaultKey='default') => {
|
|
|
+ if (key in cases){
|
|
|
+ return cases[key]()
|
|
|
+ }else{
|
|
|
+ return cases[defaultKey]()
|
|
|
+ }
|
|
|
+ }
|
|
|
+
|
|
|
+
|
|
|
+ const drink = prompt("Что вы любите пить")
|
|
|
+ noSwitch(drink, {
|
|
|
+ воду: () => console.log('Самый здоровый выбор!'),
|
|
|
+ чай(){
|
|
|
+ console.log('Вкусная и полезная штука. Не переусердствуйте с сахаром')
|
|
|
+ },
|
|
|
+ "пиво": () => console.log('Хорошо летом, да в меру'),
|
|
|
+ виски: function(){
|
|
|
+ console.log('Да вы, батенька, эстет! Не забудьте лед и сигару')
|
|
|
+ },
|
|
|
+ default(){
|
|
|
+ console.log('шото я не понял')
|
|
|
+ }
|
|
|
+ })
|
|
|
+}
|
|
|
+
|
|
|
+/*closure calc
|
|
|
+fetch('https://open.er-api.com/v6/latest/USD').then(res => res.json())
|
|
|
+ .then(data => {
|
|
|
+ //эта функция запускается когда данные скачиваются.
|
|
|
+ //остальной код работает РАНЬШЕ.
|
|
|
+ //только ТУТ есть переменная data со скачанными данными
|
|
|
+ console.log(data) //изучите структуру, получаемую с сервера в консоли
|
|
|
+ })
|
|
|
+Напишите внутри анонимной функции, переданной в then (data =>):
|
|
|
+цикл, который перебирает курсы;
|
|
|
+на каждой итерации создается кнопка (document.createElement)
|
|
|
+текст кнопки - название валюты (innerHTML или innerText)
|
|
|
+Назначьте обработчик события на этой кнопке (onclick = () => {.....}). Функция-обработчик должна быть написана прямо в теле цикла
|
|
|
+Обработчик должен спрашивать сумму используя prompt и переводить эту суммы из валюты, написанной на кнопке в USD
|
|
|
+Найдите замыкания. Для доступа к валютам из data.rates используйте [], . тут не поможет. Кнопки добавляйте в специальный контейнер (div например), созданный в HTML, или, на худой конец, в body*/
|
|
|
+
|
|
|
+{
|
|
|
+ fetch('https://open.er-api.com/v6/latest/USD').then(res => res.json())
|
|
|
+ .then(data => {
|
|
|
+ //эта функция запускается когда данные скачиваются.
|
|
|
+ //остальной код работает РАНЬШЕ.
|
|
|
+ //только ТУТ есть переменная data со скачанными данными
|
|
|
+ console.log(data) //изучите структуру, получаемую с сервера в консоли
|
|
|
+
|
|
|
+ for (rate in data.rates) {
|
|
|
+ console.log(rate)
|
|
|
+ const cource = data.rates[rate]
|
|
|
+ const div = document.createElement('div')
|
|
|
+ const button = document.createElement('button')
|
|
|
+ button.innerText = rate
|
|
|
+ button.classList.add('button')
|
|
|
+ div.append(button)
|
|
|
+ document.body.append(div)
|
|
|
+ button.onclick = () => {
|
|
|
+ alert(cource)
|
|
|
+ const value = +prompt('какую сумму будем менять?')
|
|
|
+ const result = value / cource
|
|
|
+ alert(result)
|
|
|
+ }
|
|
|
+
|
|
|
+
|
|
|
+ }
|
|
|
+ })
|
|
|
+}
|
|
|
+
|
|
|
+/* closure calc 2
|
|
|
+Создайте HTML файл с :
|
|
|
+<select id='from'> - исходная валюта
|
|
|
+<select id='to'> - валюта в которую происходит обмен
|
|
|
+<div id='rate'> - кросскурс между валютами
|
|
|
+<input type='number' id='amount' /> - сумма в исходной валюте
|
|
|
+<div id='result'> - сумма в валюте, в которую хотим поменять
|
|
|
+Используя заготовку из предыдущего задания, наполните select-ы тэгами option с названиями валют, используя цикл
|
|
|
+document.createElement
|
|
|
+innerText для option
|
|
|
+from.append или to.append
|
|
|
+За пределами цикла назначьте обработчики onchange для элементов select и oninput для элемента input, используя их id. По этим событиям обновляйте текст в div#rate и div#result
|
|
|
+Для чтения текущего значения select используйте свойство value: from.value или to.value*/
|
|
|
+
|
|
|
+{
|
|
|
+ fetch('https://open.er-api.com/v6/latest/USD').then(res => res.json())
|
|
|
+ .then(data => {
|
|
|
+ //эта функция запускается когда данные скачиваются.
|
|
|
+ //остальной код работает РАНЬШЕ.
|
|
|
+ //только ТУТ есть переменная data со скачанными данными
|
|
|
+ console.log(data) //изучите структуру, получаемую с сервера в консоли
|
|
|
+ const from = document.createElement('select')
|
|
|
+ from.id = "from"
|
|
|
+ const to = document.createElement('select')
|
|
|
+ to.id = "to"
|
|
|
+ document.body.append(from)
|
|
|
+ document.body.append(to)
|
|
|
+ const rateNow = document.createElement('div')
|
|
|
+ rateNow.id = 'rateNow'
|
|
|
+ document.body.append(rateNow)
|
|
|
+ const amount = document.createElement('input')
|
|
|
+ amount.id = 'amount'
|
|
|
+ amount.type = 'number'
|
|
|
+ document.body.append(amount)
|
|
|
+ const result = document.createElement('div')
|
|
|
+ result.id = 'result'
|
|
|
+ document.body.append(result)
|
|
|
+
|
|
|
+ for (rate in data.rates) {
|
|
|
+ console.log(rate)
|
|
|
+ const cource = data.rates[rate]
|
|
|
+ const option = document.createElement('option')
|
|
|
+ option.innerText = rate
|
|
|
+ option.classList.add('option')
|
|
|
+ option.value = rate
|
|
|
+ const option2 = document.createElement('option')
|
|
|
+ option2.innerText = rate
|
|
|
+ option2.classList.add('option')
|
|
|
+ option2.value = rate
|
|
|
+ from.append(option);
|
|
|
+ to.append(option2);
|
|
|
+ }
|
|
|
+ from.onchange = to.onchange = amount.oninput = () => {
|
|
|
+ rateNow.innerText = (data.rates[to.value] / data.rates[from.value]).toFixed(4)
|
|
|
+ result.innerText = (data.rates[to.value] / data.rates[from.value] * amount.value).toFixed(2)
|
|
|
+ }
|
|
|
+
|
|
|
+ })
|
|
|
+}
|
|
|
+
|
|
|
+/*countries and cities
|
|
|
+fetch('https://raw.githubusercontent.com/russ666/all-countries-and-cities-json/master/countries.min.json').then(res => res.json())
|
|
|
+ .then(data => {
|
|
|
+ //эта функция запускается когда данные скачиваются.
|
|
|
+ //остальной код работает РАНЬШЕ.
|
|
|
+ //только ТУТ есть переменная data со скачанными данными
|
|
|
+ console.log(data) //изучите структуру, получаемую с сервера в консоли
|
|
|
+ })
|
|
|
+По аналогии с предыдущем заданием, реализуйте интерфейс выбора страны и города:
|
|
|
+по закрузке данных наполняйте select#countries элементами option с названиями стран;
|
|
|
+так же назначьте обработчик события onchange в select#countries, который:
|
|
|
+удаляет старый контент select#cities (достаточно занести в innerHTML или innerText пустую строку)
|
|
|
+добавляет в select#cities элементы option с городами из выбранной только что страны.
|
|
|
+Таким образом, при изменении страны будет меняться список городов в select#cities*/
|
|
|
+
|
|
|
+{
|
|
|
+ fetch('https://raw.githubusercontent.com/russ666/all-countries-and-cities-json/master/countries.min.json').then(res => res.json())
|
|
|
+ .then(data => {
|
|
|
+ //эта функция запускается когда данные скачиваются.
|
|
|
+ //остальной код работает РАНЬШЕ.
|
|
|
+ //только ТУТ есть переменная data со скачанными данными
|
|
|
+ console.log(data) //изучите структуру, получаемую с сервера в консоли
|
|
|
+
|
|
|
+ const countries = document.createElement('select')
|
|
|
+ const cities = document.createElement('select')
|
|
|
+
|
|
|
+ for (country in data){
|
|
|
+ const optionCounty = document.createElement('option')
|
|
|
+ optionCounty.innerText = optionCounty.value = country
|
|
|
+ countries.append(optionCounty)
|
|
|
+ }
|
|
|
+
|
|
|
+ countries.onchange = () => {
|
|
|
+ cities.innerText = ''
|
|
|
+ for (city of data[countries.value]){
|
|
|
+ const optionCity = document.createElement('option')
|
|
|
+ optionCity.innerText = optionCity.value = city
|
|
|
+ cities.append(optionCity)
|
|
|
+
|
|
|
+ }
|
|
|
+ }
|
|
|
+
|
|
|
+ document.body.append(countries)
|
|
|
+ document.body.append(cities)
|
|
|
+
|
|
|
+ })
|
|
|
+
|
|
|
+}
|
|
|
+
|
