this is o
13 | // ` 14 | 15 | // console.log(output) 16 | 17 | // const name = 'Владилен' 18 | // console.log(name.length) 19 | // console.log(name.toUpperCase()) 20 | // console.log(name.toLowerCase()) 21 | // console.log(name.charAt(2)) 22 | // console.log(name.indexOf('!')) 23 | // console.log(name.toLowerCase().startsWith('влад')) 24 | // console.log(name.startsWith('Влад')) 25 | // console.log(name.endsWith('ен!')) 26 | // console.log(name.repeat(3)) 27 | // const string = ' password ' 28 | // console.log(string.trim()) 29 | // console.log(string.trimLeft()) 30 | // console.log(string.trimRight()) 31 | 32 | function logPerson(s, name, age) { 33 | if (age < 0) { 34 | age = 'Еще не родился' 35 | } 36 | return `${s[0]}${name}${s[1]}${age}${s[2]}` 37 | } 38 | 39 | const personName = 'Владилен' 40 | const personName2 = 'Максим' 41 | const personAge = 26 42 | const personAge2 = -10 43 | 44 | const output = logPerson`Имя: ${personName}, Возраст: ${personAge}!` 45 | const output2 = logPerson`Имя: ${personName2}, Возраст: ${personAge2}!` 46 | 47 | console.log(output) 48 | console.log(output2) 49 | -------------------------------------------------------------------------------- /04_function.js: -------------------------------------------------------------------------------- 1 | // 1 Функции 2 | // Function Declaration 3 | // function greet(name) { 4 | // console.log('Привет - ', name) 5 | // } 6 | 7 | // Function Expression 8 | // const greet2 = function greet2(name) { 9 | // console.log('Привет 2 - ', name) 10 | // } 11 | 12 | // greet('Лена') 13 | // greet2('Лена') 14 | 15 | // console.log(typeof greet) 16 | // console.dir(greet) 17 | 18 | // 2 Анонимные функции 19 | // let counter = 0 20 | // const interval = setInterval(function() { 21 | // if (counter === 5) { 22 | // clearInterval(interval) // clearTimeout 23 | // } else { 24 | // console.log(++counter) 25 | // } 26 | // }, 1000) 27 | 28 | // 3 Стрелочные функции 29 | function greet() { 30 | console.log('Привет - ') 31 | } 32 | 33 | const arrow = (name, age) => { 34 | console.log('Привет - ', name, age) 35 | } 36 | 37 | const arrow2 = name => console.log('Привет - ', name) 38 | 39 | // arrow2('Vladilen') 40 | 41 | const pow2 = num => num ** 2 42 | 43 | // console.log(pow2(5)) 44 | 45 | // 4 Параметры по умолчанию 46 | const sum = (a = 40, b = a * 2) => a + b 47 | 48 | // console.log(sum(41, 4)) 49 | // console.log(sum()) 50 | 51 | function sumAll(...all) { 52 | let result = 0 53 | for (let num of all) { 54 | result += num 55 | } 56 | return result 57 | } 58 | 59 | const res = sumAll(1, 2, 3, 4, 5) 60 | // console.log(res) 61 | 62 | // 5 Замыкания 63 | function createMember(name) { 64 | return function(lastName) { 65 | console.log(name + lastName) 66 | } 67 | } 68 | 69 | const logWithLastName = createMember('Vladilen') 70 | console.log(logWithLastName('Minin')) 71 | console.log(logWithLastName('Kuznezov')) 72 | -------------------------------------------------------------------------------- /05_array.js: -------------------------------------------------------------------------------- 1 | const cars = ['Мазда', 'Форд', 'БМВ', 'Мерседс'] 2 | // const people = [ 3 | // {name: 'Vladilen', budget: 4200}, 4 | // {name: 'Elena', budget: 3500}, 5 | // {name: 'Victoria', budget: 1700} 6 | // ] 7 | const fib = [1, 1, 2, 3, 5, 8, 13] 8 | 9 | // Function 10 | function addItemToEnd() { 11 | 12 | } 13 | 14 | // Method 15 | // cars.push('Рено') 16 | // cars.unshift('Волга') 17 | // 18 | // const firstCar = cars.shift() 19 | // const lastCar = cars.pop() 20 | // console.log(firstCar) 21 | // console.log(lastCar) 22 | // console.log(cars) 23 | 24 | // console.log(cars.reverse()) 25 | // console.log(cars) 26 | 27 | // const index = cars.indexOf('БМВ') 28 | // cars[index] = 'Porsche' 29 | // console.log(cars) 30 | // let findedPerson 31 | // for (const person of people) { 32 | // if (person.budget === 3500) { 33 | // findedPerson = person 34 | // } 35 | // } 36 | 37 | // console.log(findedPerson) 38 | 39 | // const index = people.findIndex(function(person) { 40 | // return person.budget === 3500 41 | // }) 42 | // const person = people.find(function(person) { 43 | // return person.budget === 3500 44 | // }) 45 | // console.log(person) 46 | // const person = people.find(person => person.budget === 3500) 47 | // console.log(person) 48 | 49 | // console.log(cars.includes('Мазда!')) 50 | 51 | // const upperCaseCars = cars.map(car => { 52 | // return car.toUpperCase() 53 | // }) 54 | // 55 | const pow2 = num => num ** 2 56 | // const sqrt = num => Math.sqrt(num) 57 | // 58 | // const pow2Fib = fib.map(pow2).map(Math.sqrt) 59 | // console.log(pow2Fib) 60 | // const pow2Fib = fib.map(pow2) 61 | // const filteredNumbers = pow2Fib.filter(num => num > 20) 62 | // console.log(pow2Fib) 63 | // console.log(filteredNumbers) 64 | 65 | // Задача 1 66 | // const text = 'Привет, мы изучаем JavaScript' 67 | // const reverseText = text.split('').reverse().join('') 68 | // console.log(reverseText) 69 | 70 | const people = [ 71 | {name: 'Vladilen', budget: 4200}, 72 | {name: 'Elena', budget: 3500}, 73 | {name: 'Victoria', budget: 1700} 74 | ] 75 | 76 | const allBudget = people 77 | .filter(person => person.budget > 2000) 78 | .reduce((acc, person) => { 79 | acc += person.budget 80 | return acc 81 | }, 0) 82 | 83 | console.log(allBudget) 84 | 85 | // const displayItems = allItems.filter(item => item.name.indexOf('phone') !== -1) 86 | -------------------------------------------------------------------------------- /06_object.js: -------------------------------------------------------------------------------- 1 | const person = { 2 | name: 'Vladilen', 3 | age: 26, 4 | isProgrammer: true, 5 | languages: ['ru', 'en', 'de'], 6 | // 'complex key': 'Complex Value', 7 | // ['key_' + (1 + 3)]: 'Computed Key', // key_4 8 | greet() { 9 | console.log('greet from person') 10 | }, 11 | info() { 12 | // console.log('this:', this) 13 | console.info('Информация про человека по имени:', this.name) 14 | } 15 | } 16 | 17 | // console.log(person.name) 18 | // const ageKey = 'age' 19 | // console.log(person[ageKey]) 20 | // console.log(person['complex key']) 21 | // person.greet() 22 | // 23 | // person.age++ 24 | // person.languages.push('by') 25 | // // person['key_4'] = undefined 26 | // delete person['key_4'] 27 | // 28 | // console.log(person) 29 | // console.log(person['key_4']) 30 | 31 | // const name = person.name 32 | // const age = person.age 33 | // const languages = person.languages 34 | 35 | // const {name, age: personAge = 10, languages} = person 36 | // console.log(person) 37 | 38 | // for (let key in person) { 39 | // if (person.hasOwnProperty(key)) { 40 | // console.log('key:', key) 41 | // console.log('value:', person[key]) 42 | // } 43 | // } 44 | // Object.keys(person).forEach((key) => { 45 | // console.log('key:', key) 46 | // console.log('value:', person[key]) 47 | // }) 48 | 49 | // Context 50 | // person.info() 51 | 52 | const logger = { 53 | keys() { 54 | console.log('Object Keys: ', Object.keys(this)) 55 | }, 56 | 57 | keysAndValues() { 58 | // "key": value 59 | // Object.keys(this).forEach(key => { 60 | // console.log(`"${key}": ${this[key]}`) 61 | // }) 62 | // const self = this 63 | Object.keys(this).forEach(function(key) { 64 | console.log(`"${key}": ${this[key]}`) 65 | }.bind(this)) 66 | }, 67 | 68 | withParams(top = false, between = false, bottom = false) { 69 | if (top) { 70 | console.log('------- Start -------') 71 | } 72 | Object.keys(this).forEach((key, index, array) => { 73 | console.log(`"${key}": ${this[key]}`) 74 | if (between && index !== array.length - 1) { 75 | console.log('--------------') 76 | } 77 | }) 78 | 79 | if (bottom) { 80 | console.log('------- End -------') 81 | } 82 | } 83 | } 84 | 85 | // const bound = logger.keys.bind(person) 86 | // bound() 87 | // logger.keysAndValues.call(person) 88 | logger.withParams.call(person, true, true, true) 89 | logger.withParams.apply(person, [true, true, true]) 90 | -------------------------------------------------------------------------------- /07_async.js: -------------------------------------------------------------------------------- 1 | // Event Loop 2 | 3 | // const timeout = setTimeout(() => { 4 | // console.log('After timeout') 5 | // }, 2500) 6 | // 7 | // clearTimeout(timeout) 8 | // 9 | // const interval = setInterval(() => { 10 | // console.log('After timeout') 11 | // }, 1000) 12 | // 13 | // // clearInterval(interval) 14 | 15 | // const delay = (callback, wait = 1000) => { 16 | // setTimeout(callback, wait) 17 | // } 18 | // 19 | // delay(() => { 20 | // console.log('After 2 seconds') 21 | // }, 2000) 22 | 23 | 24 | const delay = (wait = 1000) => { 25 | const promise = new Promise((resolve, reject) => { 26 | setTimeout(() => { 27 | // resolve() 28 | reject('Что-то пошло не так. Повторите попытку') 29 | }, wait) 30 | }) 31 | return promise 32 | } 33 | 34 | // 35 | // delay(2500) 36 | // .then(() => { 37 | // console.log('After 2 seconds') 38 | // }) 39 | // .catch(err => console.error('Error:', err)) 40 | // .finally(() => console.log('Finally')) 41 | 42 | const getData = () => new Promise(resolve => resolve([ 43 | 1, 1, 2, 3, 5, 8, 13 44 | ])) 45 | 46 | // getData().then(data => console.log(data)) 47 | 48 | async function asyncExample() { 49 | try { 50 | await delay(3000) 51 | const data = await getData() 52 | console.log('Data', data) 53 | } catch (e) { 54 | console.log(e) 55 | } finally { 56 | console.log('Finally') 57 | } 58 | } 59 | 60 | asyncExample() 61 | -------------------------------------------------------------------------------- /app.js: -------------------------------------------------------------------------------- 1 | const heading = document.getElementById('hello') 2 | // const heading2 = document.getElementsByTagName('h2')[0] 3 | // const heading2 = document.getElementsByClassName('h2-class')[0] 4 | // const heading2 = document.querySelector('.h2-class') 5 | // const heading2 = document.querySelector('#sub-hello') // Всегда 1 элемент 6 | const heading2 = document.querySelector('h2') 7 | 8 | 9 | // const heading3 = heading2.nextElementSibling 10 | const h2List = document.querySelectorAll('h2') 11 | const heading3 = h2List[h2List.length - 1] 12 | 13 | 14 | setTimeout(() => { 15 | addStylesTo(heading, 'JavaScript') 16 | }, 1500) 17 | 18 | const link = heading3.querySelector('a') 19 | 20 | link.addEventListener('click', (event) => { 21 | event.preventDefault() 22 | console.log('Click on link', event.target.getAttribute('href')) 23 | const url = event.target.getAttribute('href') 24 | 25 | window.location = url 26 | }) 27 | 28 | 29 | setTimeout(() => { 30 | addStylesTo(link, 'Практикуйся', 'blue') 31 | }, 3000) 32 | 33 | setTimeout(() => { 34 | addStylesTo(heading2, 'И все получится!', 'yellow', '2rem') 35 | }, 4500) 36 | 37 | function addStylesTo(node, text, color = 'red', fontSize) { 38 | node.textContent = text 39 | node.style.color = color 40 | node.style.textAlign = 'center' 41 | node.style.backgroundColor = 'black' 42 | node.style.padding = '2rem' 43 | node.style.display = 'block' 44 | node.style.width = '100%' 45 | 46 | // falsy: '', undefined, null, 0, false 47 | if (fontSize) { 48 | node.style.fontSize = fontSize 49 | } 50 | } 51 | 52 | heading.onclick = () => { 53 | if (heading.style.color === 'red') { 54 | heading.style.color = '#000' 55 | heading.style.backgroundColor = '#fff' 56 | } else { 57 | heading.style.color = 'red' 58 | heading.style.backgroundColor = '#000' 59 | } 60 | } 61 | 62 | 63 | heading2.addEventListener('dblclick', () => { 64 | if (heading2.style.color === 'yellow') { 65 | heading2.style.color = '#000' 66 | heading2.style.backgroundColor = '#fff' 67 | } else { 68 | heading2.style.color = 'yellow' 69 | heading2.style.backgroundColor = '#000' 70 | } 71 | }) 72 | -------------------------------------------------------------------------------- /index.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 |