├── LICENSE.md ├── README.md └── src ├── 0 └── index.js ├── 1 └── index.js ├── 2 └── index.js ├── 3 └── index.js ├── 4 └── index.js ├── 5 ├── index.css └── index.js ├── 6 ├── index.html └── index.js ├── 7 └── index.js └── index.html /LICENSE.md: -------------------------------------------------------------------------------- 1 | # License 2 | 3 | This material is licensed under the [Creative Commons Attribution-NonCommercial-ShareAlike 4.0 International License](http://creativecommons.org/licenses/by-nc-sa/4.0/). 4 | 5 | It basically means you can do whatever you want with the material as long as it's for non-commercial use but you've got to attribute the original author ([Vladislav Skurishin](https://github.com/vladthelittleone)) and share any derivative works under the same license. 6 | 7 | If you're interested in using the material for commercial purposes or otherwise licensing material, feel free to get in touch at [support@vectree.ru](mailto:support@vectree.ru). 8 | -------------------------------------------------------------------------------- /README.md: -------------------------------------------------------------------------------- 1 | # Веб-Разработка 2 | 3 | [![license][license-badge]][LICENSE] 4 | [![Join the chat](https://img.shields.io/discord/436599210427547658?color=%23eb4e4e&label=discord&logo=discord&logoColor=white)](https://discord.gg/Qb2fBdR) 5 | 6 | ![alt text](https://sun9-7.userapi.com/c841624/v841624284/28b96/aJT1-hf8yts.jpg) 7 | 8 | Данный курс - перевод малой части супер крутого и популярного открытого курса [TheOdinProject](https://www.theodinproject.com). Кроме того, по курсу я нудно и долго делаю [видео на youtube](https://www.youtube.com/channel/UCIdJPWbEsoJr5Xz_sHqI9oQ). Нудно и долго, но делаю :) 9 | 10 | Остальные переводы TheOdinProject и не только вы можете найти [тут](https://github.com/vectree/resources). 11 | 12 | ## Начнем 13 | 14 | Вот где все начинается! Практическое введение во все инструменты, необходимые для создания рабочих веб-сайтов. Вы узнаете, что на самом деле делают веб-разработчики - те основы, которые вам понадобятся для последующих курсов. 15 | 16 | ### Основы 17 | 18 | Рассмотрим основы, необходимые для углубления в веб-разработку. 19 | 20 | 1. Добро пожаловать на Vectree: [конспект](https://github.com/vectree/resources/blob/master/text/00012.md) | [видео](https://www.youtube.com/watch?v=x4IyAeSQ0lE) 21 | 2. Так чем же занимаются веб-разработчики: [конспект](https://github.com/vectree/resources/blob/master/text/00013.md) | [видео](https://www.youtube.com/watch?v=Q5wcXPuufXQ) 22 | 3. Мотивация: [конспект](https://github.com/vectree/resources/blob/master/text/00014.md) | [видео](https://www.youtube.com/watch?v=MmoVDbSyx14) 23 | 4. Присоединяйтесь к сообществу Vectree: [конспект](https://github.com/vectree/resources/blob/master/text/00015.md) | [видео](https://www.youtube.com/watch?v=t05Hkrb98e0) 24 | 5. Как работает Интернет: [конспект](https://github.com/vectree/resources/blob/master/text/00016.md) | [видео](https://www.youtube.com/watch?v=gYLhDJq0EFM) 25 | 26 | ### Подготовка 27 | 28 | В данном векторе мы подготовим ваше окружение разработчика, установим Ruby и Rails и запустим ваше первое веб-приложение. 29 | 30 | 1. Настройка окружения: [конспект](https://github.com/vectree/resources/blob/master/text/00019.md) | [видео](https://www.youtube.com/watch?v=2kGPtnHCUtY) 31 | 2. Подготовка: [конспект](https://github.com/vectree/resources/blob/master/text/00020.md) | [видео](https://www.youtube.com/watch?v=2kGPtnHCUtY) 32 | 3. Редактор кода: [конспект](https://github.com/vectree/resources/blob/master/text/00024.md) | [видео](https://www.youtube.com/watch?v=OmGX3zZZD78) 33 | 4. Основы работы с терминалом: [конспект](https://github.com/vectree/resources/blob/master/text/00017.md) | [видео](https://www.youtube.com/watch?v=cS8Omz1TIU0) 34 | 5. Установка Ruby: [конспект](https://github.com/vectree/resources/blob/master/text/00025.md) 35 | 6. Ваше первое Rails-приложение: [проект](https://github.com/vectree/resources/blob/master/tasks/00113.md) 36 | 37 | ### Основы Git 38 | 39 | В данном векторе вы изучите основы Git и то, каким образом вы можете загрузить ваши проекты на Github. В результате вы сможете поделиться своими проектами и кодом со всем миром! 40 | 41 | 1. Введение в Git: [конспект](https://github.com/vectree/resources/blob/master/text/00026.md) | [видео](https://www.youtube.com/watch?v=EW5pfDLP9b4) 42 | 2. Основы Git: [конспект](https://github.com/vectree/resources/blob/master/text/00027.md) | [видео](https://www.youtube.com/watch?v=_A1NIRcHW9Q) 43 | 3. Основы Git на практике: [проект](https://github.com/vectree/resources/blob/master/tasks/00114.md) 44 | 45 | ### Фронтенд 46 | 47 | В этом разделе вы потратите время на знакомство с основными клиентскими (используемыми в браузерах) технолониями, такими как HTML, CSS и Javascript. Вы сможете создать веб-страницу с использованием HTML / CSS и изучить основы программирования с помощью Javascript. 48 | 49 | 1. Введение в Frontend: [конспект](https://github.com/vectree/resources/blob/master/text/00028.md) | [видео](https://www.youtube.com/watch?v=QC6nsNpJVOg) 50 | 2. Основы HTML и CSS: [конспект](https://github.com/vectree/resources/blob/master/text/00029.md) 51 | 3. Консоль разработчика: [конспект](https://github.com/vectree/resources/blob/master/text/00030.md) 52 | 4. Поисковая страница: [проект](https://github.com/vectree/resources/blob/master/tasks/00115.md) 53 | 54 | ### JavaScript 55 | 56 | В данном векторе мы наконец-то изучим JavaScript и узнаем, как сделать страницу динамичной. 57 | 58 | 1. Введение: [конспект](https://github.com/vectree/resources/blob/master/text/00031.md) | [видео](https://www.youtube.com/watch?v=XaB-y6Wmow8) 59 | 2. Основы: [конспект](https://github.com/vectree/resources/blob/master/text/00032.md) | [задачи](https://vectree.ru/text/46/1/0) | [видео](https://www.youtube.com/watch?v=1hFsJJvGjb8) 60 | 3. Консоль разработчика: [конспект](https://github.com/vectree/resources/blob/master/text/00033.md) | [видео](https://www.youtube.com/watch?v=zaNtb4AqZDY) 61 | 4. Функции: [конспект](https://github.com/vectree/resources/blob/master/text/00034.md) | [видео](https://www.youtube.com/watch?v=aAQ3FnZIaoY) 62 | 5. Камень, ножницы, бумага: [проект](https://github.com/vectree/resources/blob/master/tasks/00116.md) 63 | 6. Чистый код: [конспект](https://github.com/vectree/resources/blob/master/text/00035.md) 64 | 7. Массивы: [конспект](https://github.com/vectree/resources/blob/master/text/00036.md) 65 | 8. Манипуляции с DOM: [конспект](https://github.com/vectree/resources/blob/master/text/00037.md) 66 | 9. Волшебный экран: [проект](https://github.com/vectree/resources/blob/master/tasks/00117.md) 67 | 10. Объекты: [конспект](https://github.com/vectree/resources/blob/master/text/00038.md) 68 | 11. Калькулятор: [проект](https://github.com/vectree/resources/blob/master/tasks/00118.md) 69 | 70 | ### Бэкенд 71 | 72 | В данном векторе вы узнаете о серверной части, где мы расскажем, что происходит за кулисами на веб-сервере. Вы сможете попробовать Ruby, великолепный язык, который тесно связан с Ruby on Rails. 73 | 74 | 1. Введение в бэкенд: [конспект](https://github.com/vectree/resources/blob/master/text/00039.md) 75 | 2. Основы Ruby: [конспект](https://github.com/vectree/resources/blob/master/text/00040.md) 76 | 3. Ruby: [проект](https://github.com/vectree/resources/blob/master/tasks/00119.md) 77 | 78 | ### Фреймворки 79 | 80 | Вы, наверное, слышали о "Ruby on Rails", "React" или других фреймворках. В этом векторе вы узнаете, что такое фреймворк, почему мы его используем, и познакомимся с тем, который мы подробно рассмотрим в будущих курсах. 81 | 82 | 1. Введение в фреймворки: [конспект](https://github.com/vectree/resources/blob/master/text/00041.md) 83 | 2. Основы Ruby on Rails: [конспект](https://github.com/vectree/resources/blob/master/text/00042.md) 84 | 3. Rails: [проект](https://github.com/vectree/resources/blob/master/tasks/00120.md) 85 | 86 | ### В паре 87 | 88 | До сих пор вы, вероятно, работали самостоятельно. Теперь пришло время объединиться с другим человеком из любой точки мира. 89 | 90 | 1. Введение в парное программирование: [конспект](https://github.com/vectree/resources/blob/master/text/00057.md) 91 | 2. Подготовка к взаимодействию: [конспект](https://github.com/vectree/resources/blob/master/text/00058.md) 92 | 3. Таймер - Помидор: [проект](https://github.com/vectree/resources/blob/master/tasks/00131.md) 93 | 94 | ### Заключение 95 | 96 | Теперь, когда вы попробовали на вкус все основные строительные блоки веб-приложений, мы вернемся назад и вспомним, как они все вписываются в общую картину. 97 | 98 | 1. Соединим все: [конспект](https://github.com/vectree/resources/blob/master/text/00059.md) 99 | 100 | ## Помощь и поддержка проекта 101 | 102 | Любой может помочь нам с развитием данного проекта. На текущий момент мы усердно работаем над контентом по JavaScript, Java, Python, Java и это занимает достаточно много времени, тем более, что делается это на бесплатной основе. Если вам хочется помочь нам, напишите на почту support@vectree.ru или в telegram **@vladthelittleone**, наша команда введет вас в курс дела. 103 | 104 | Чем вы можете помочь: 105 | - исправить ошибки, 106 | - проверить ссылки на ресурсы или добавить новые, 107 | - добавить найденный в интернете полезный контент, открытый курс, 108 | - добавить новые уроки, практические задания, тесты, 109 | - перевести статью, курс, 110 | - добавить конспект университетских лекций 111 | 112 | ## License 113 | 114 | Данный материал основан на [TheOdinProject](https://github.com/TheOdinProject), созданном [Erik Trautman](https://github.com/eriktrautman). 115 | 116 | Материал распространяется под [Attribution-NonCommercial-ShareAlike 4.0 International](LICENSE.md). 117 | 118 | [LICENSE]: ./LICENSE.md 119 | [license-badge]: https://img.shields.io/badge/License-CC%20BY--NC--SA%204.0-lightgrey.svg 120 | -------------------------------------------------------------------------------- /src/0/index.js: -------------------------------------------------------------------------------- 1 | console.log("Привет мир!"); 2 | console.log(5); 3 | console.log(5 + 3); 4 | console.log(5 + 3 - 2 * 10 / 2); 5 | console.log(5 > 4); // true 6 | console.log(6 < 5); // false 7 | console.log('4' < 5); // true 8 | console.log(5 == 5); // true 9 | console.log(4 == 5); // false 10 | console.log('5' == 5); // true 11 | console.log(false == 0); // true 12 | console.log(false === 0); // false 13 | console.log("Привет " + "мир!"); 14 | console.log("Привет " + 10 + 30); // Привет 1030 15 | let a; 16 | var b; 17 | const c = 5; 18 | let z = 5; 19 | console.log(z); // 5 20 | z = 2; 21 | console.log(z); // 2 22 | console.log(z + 1); // 3 23 | console.log(z < 5); // true 24 | -------------------------------------------------------------------------------- /src/1/index.js: -------------------------------------------------------------------------------- 1 | let z; 2 | console.log(z); 3 | let g = null; 4 | console.log(g); 5 | const str1 = "Привет мир!"; 6 | const str2 = 'Привет мир 2!'; 7 | console.log(str1, str2); 8 | const str3 = `Привет ${str1}, ${str2}`; 9 | console.log(str3); 10 | const str4 = `Привет 11 | Привет 2 12 | Привет 3`; 13 | console.log(str4); 14 | console.log('Привет\nМир!'); 15 | const l = str1.length; 16 | console.log(l); 17 | const l1 = str1.slice(1, 3); // Привет мир! => ри 18 | const l2 = str1.slice(-4, -1); // Привет мир! => мир 19 | const l3 = str1.substring(1, 3); // Привет мир! => ри 20 | const l4 = str1.substr(1, 2); // Привет мир! => ри 21 | console.log(l1, l2, l3, l4); 22 | 23 | const i = 5; 24 | console.log(i > 5 && i < 10); // false 25 | console.log(i > 4 && i < 6); // true 26 | console.log(i > 5 || i < 10); // true 27 | console.log(i > 5 || i > 10); // false 28 | console.log(!(i > 5)); // true 29 | console.log(!true); // false 30 | 31 | let isBoxOpen = false; // Закрыта 32 | let isKeyTaken = true; // Ключ взят 33 | 34 | if (!isKeyTaken) { 35 | console.log('Ищем ключ'); 36 | } else if (!isBoxOpen) { 37 | console.log('Открыть коробку, ключ уже есть'); 38 | isBoxOpen = true; 39 | } else { 40 | console.log('Коробка уже открыта и ключ взят'); 41 | } 42 | 43 | if (isBoxOpen) { 44 | console.log('Взять из коробки вещи'); 45 | } else { 46 | console.log('Мы не можем взять вещи. Коробка закрыта.') 47 | } 48 | 49 | -------------------------------------------------------------------------------- /src/2/index.js: -------------------------------------------------------------------------------- 1 | function helloWorld() { 2 | console.log("Привет мир!"); 3 | } 4 | 5 | helloWorld(); 6 | helloWorld(); 7 | helloWorld(); 8 | 9 | const hello = function () { 10 | console.log("Привет мир!"); 11 | }; 12 | const hello1 = hello; 13 | hello(); 14 | hello1(); 15 | 16 | function sum(a, b) { 17 | return a + b; 18 | } 19 | 20 | const s = sum(10, 5); 21 | console.log(s); 22 | 23 | function a1() { 24 | const a = 'a'; 25 | } 26 | 27 | function a2() { 28 | const a = 'a'; 29 | } 30 | -------------------------------------------------------------------------------- /src/3/index.js: -------------------------------------------------------------------------------- 1 | const array = []; 2 | const array1 = ['Влад', 'Андрей', 'Наталья']; 3 | const array2 = ['Яблоко', 'Апельсин', 'Мандарин']; 4 | const b = array2[0]; 5 | console.log(b); 6 | const c = array2[2]; 7 | console.log(c); 8 | const f = array2[3]; 9 | console.log(f); 10 | const length = array2.length; 11 | console.log(length); 12 | array2[0] = 'Мандарин'; 13 | console.log(array2[0]); 14 | array2.push('Яблоко'); 15 | console.log(array2[3]); 16 | array2.pop(); 17 | console.log(array2[3]); 18 | array2.splice(1, 1); 19 | console.log(array2[1]); 20 | console.log(array2.length); 21 | array2.splice(-1, 1, 'Яблоко', 'Яблоко'); 22 | console.log(array2[1]); 23 | console.log(array2[2]); 24 | const newArray = array2.slice(1, 3); 25 | console.log(newArray); 26 | -------------------------------------------------------------------------------- /src/4/index.js: -------------------------------------------------------------------------------- 1 | for (let i = 1; i <= 100; i++) { 2 | console.log("Была совершена поставка №: " + i); 3 | } 4 | 5 | const classroom = ['Паша', 'Саша', 'Коля', 'Денис', 'Коля']; 6 | let counter = 0; 7 | for (let i = 0; i < classroom.length; i++) { 8 | if (classroom[i] !== 'Коля') { 9 | continue; 10 | } 11 | counter++; 12 | } 13 | console.log(counter); 14 | 15 | let counter1 = 0; 16 | 17 | while(counter1 < 101) { 18 | console.log(counter1); 19 | counter1++; 20 | } 21 | 22 | counter1 = 101; 23 | 24 | do { 25 | console.log(counter1); 26 | counter1++; 27 | } while(counter1 < 101); 28 | -------------------------------------------------------------------------------- /src/5/index.css: -------------------------------------------------------------------------------- 1 | .blue { 2 | background-color: blue; 3 | width: 10px; 4 | height: 10px; 5 | } 6 | -------------------------------------------------------------------------------- /src/5/index.js: -------------------------------------------------------------------------------- 1 | const container = document.querySelector('#container'); 2 | 3 | console.dir(container.firstElementChild); 4 | 5 | const controls = document.querySelector('.controls'); 6 | 7 | console.dir(controls.previousElementSibling); 8 | 9 | const divs = document.querySelectorAll('div'); 10 | 11 | console.dir(divs); 12 | 13 | const div = document.createElement('div'); 14 | 15 | container.appendChild(div); 16 | 17 | const old = container.removeChild(div); 18 | 19 | container.style.background = 'black'; 20 | container.style.height = '100px'; 21 | container.style.width = '100px'; 22 | 23 | container.style.cssText = 'background: yellow; width: 100px; height: 100px;'; 24 | 25 | container.setAttribute('style', 'background: red; width: 200px; height: 100px;'); 26 | 27 | container.style.textAlign = 'center'; 28 | container.style.backgroundColor = 'aliceblue'; 29 | 30 | const div1 = document.createElement('div'); 31 | div1.setAttribute('id', 'test'); 32 | container.appendChild(div1); 33 | const id = div1.getAttribute('id'); 34 | console.log(id); 35 | div1.removeAttribute('id'); 36 | 37 | controls.classList.add('blue'); 38 | controls.classList.remove('blue'); 39 | controls.classList.toggle('blue'); 40 | controls.classList.toggle('blue'); 41 | 42 | container.textContent = 'Привет, мир!'; 43 | container.innerHTML = 'Привет, мир!'; 44 | -------------------------------------------------------------------------------- /src/6/index.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | Урок JavaScript 5 | 6 | 7 | 8 | 9 | 10 | 11 | 12 | 13 | 14 | -------------------------------------------------------------------------------- /src/6/index.js: -------------------------------------------------------------------------------- 1 | const btn2 = document.querySelector('#btn-2'); 2 | btn2.onclick = helloWorld; 3 | 4 | const btn3 = document.querySelector('#btn-3'); 5 | btn3.addEventListener('click', helloWorld) 6 | 7 | btn3.addEventListener('click', function () { 8 | alert('Другой обработчик!'); 9 | }) 10 | 11 | function helloWorld(e) { 12 | alert('Привет, мир!'); 13 | console.log(e); 14 | e.target.style.background = '#000'; 15 | e.target.style.color = '#fff'; 16 | } 17 | 18 | const buttons = document.querySelectorAll('button'); 19 | 20 | buttons.forEach(function (button) { 21 | button.addEventListener('click', function () { 22 | console.log("Мультиобработчик"); 23 | }); 24 | }) 25 | -------------------------------------------------------------------------------- /src/7/index.js: -------------------------------------------------------------------------------- 1 | const tank = { 2 | x: 10, 3 | y: 10, 4 | speed: 10, 5 | damage: 5, 6 | hp: 5, 7 | true: 3, 8 | 'Shoot at Vasya': true, 9 | moveForwardX: function() { 10 | this.x = this.x + 10; 11 | } 12 | }; 13 | console.log(tank.x); 14 | console.log(tank.y); 15 | tank.isAlly = true; 16 | console.log(tank.isAlly); 17 | delete tank.isAlly; 18 | console.log(tank.isAlly); 19 | console.log(tank['damage']); 20 | console.log(tank['Shoot at Vasya']); 21 | console.log(tank.x); 22 | tank.moveForwardX(); 23 | console.log('Измененный x:'); 24 | console.log(tank.x); 25 | const keyName = 'check'; 26 | const obj = { 27 | [keyName]: true, 28 | }; 29 | console.log(obj.check); 30 | const name = 'Влад'; 31 | const surname = 'Иванов'; 32 | const person = { 33 | name, 34 | surname, 35 | }; 36 | console.log(person.name); 37 | console.log(person.surname); 38 | const n = "Проверка"; 39 | const b = n; 40 | const a = { 41 | name: 'Влад', 42 | }; 43 | const a1 = { 44 | name: 'Влад', 45 | }; 46 | const c = a; 47 | c.name = 'Олег'; 48 | console.log(c.name); 49 | console.log(a.name); 50 | console.log(a1 === a); 51 | console.log(a === c); 52 | -------------------------------------------------------------------------------- /src/index.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | Урок JavaScript 5 | 6 | 7 | 8 | 9 | 10 | 11 | --------------------------------------------------------------------------------