Основы javascript
Сейчас изучаю js. До этого работала 2 года java разработчиком. Это не все ресурсы, по которым я занималась, но мне просто нравится отмечать выполненные пункты на этом сервисе:)
P.S. Ресурсы будут поплняться. В идеале, еще будет про React
Критерий завершения
Все видеоуроки, книги и т.д. просмотрены/прочитаны и проработаны
-
ES6. Современный JavaScript
-
Урок 1. Современный JavaScript (ES6) - let, const
-
Урок 2. Современный JavaScript (ES6) - Деструктуризация
-
Урок 3. Современный JavaScript (ES6) - rest и spread операторы
-
Урок 4. Современный JavaScript (ES6) - String Template и интерполяция строк
-
Урок 5. Современный JavaScript (ES6) - Параметры по умолчанию
-
Урок 6. Современный JavaScript (ES6) - Стрелочные функции
-
Урок 7. Современный JavaScript (ES6) - Деструктуризация параметров
-
-
Gulp для самых маленьких - подробное руководство
-
Sass
Просмотрю вводные видео, потом
-
Sass для самых маленьких - подробное руководство https://www.youtube.com/watch?v=H4cG4tbc-xQ
-
Уроки CSS: препроцессор SASS больше не нужен https://www.youtube.com/watch?v=j3SrO9wrnlk
-
Уроки CSS: SASS не будет нужен.Наследование, вложенности. https://www.youtube.com/watch?v=jVtBiD0BsJ4
-
-
Learn js
Статьи на обучающем сайте learn.javascript.ru. Часть 2.
Документ, события, интерфейсы
-
Документ и объекты страницы. 16. Размеры и прокрутка страницы
-
Документ и объекты страницы. 17. Координаты в окне
-
Документ и объекты страницы. 18. Координаты в документе
-
Документ и объекты страницы. 19. Итого
-
Основы работы с событиями. 1. Введение в браузерные события
-
Основы работы с событиями. 2. Порядок обработки событий
-
Основы работы с событиями. 3. Объект события
-
Основы работы с событиями. 4. Всплытие и перехват
-
Основы работы с событиями. 5. Делегирование событий
-
Основы работы с событиями. 6. Приём проектирования "поведение"
-
Основы работы с событиями. 7. Действия браузера по умолчанию
-
Основы работы с событиями. 8. Генерация событий на элементах
-
События в деталях. 1. Мышь: клики, кнопка, координаты
-
События в деталях. 2. Мышь: отмена выделения, невыделяемые элементы
-
События в деталях. 3. Мышь: движение mouseover/out, mouseenter/leave
-
События в деталях. 4. Мышь: Drag'n'Drop
-
События в деталях. 5. Мышь: Drag'n'Drop более глубоко
-
События в деталях. 6. Мышь: колёсико, событие wheel
-
События в деталях. 7. Мышь: IE8-, исправление события
-
События в деталях. 8. Прокрутка: событие scroll
-
События в деталях. 9. Клавиатура: keyup, keydown, keypress
-
События в деталях. 10. Загрузка документа: DOMContentLoaded, load, beforeunload, unload
-
События в деталях. 11. Загрузка скриптов, картинок, фреймов: onload и onerror
-
Формы, элементы управления. 1. Навигация и свойства элементов формы
-
Формы, элементы управления. 2. Фокусировка: focus/blur
-
Формы, элементы управления. 3. Изменение: change, input, cut, copy, paste
-
Формы, элементы управления. 4. Формы: отправка, событие и метод submit
-
Создание графических компонентов. 1. Введение
-
Создание графических компонентов. 2. Графические компоненты
-
Создание графических компонентов. 3. Вёрстка графических компонентов
-
Создание графических компонентов. 4. Шаблонизатор LoDash
-
Создание графических компонентов. 5. Коллбэки и события на компонентах
-
Создание графических компонентов. 6. Что изучать дальше
-
-
Eloquent JS
Главы, которые мне осталось пройти в книге Eloquent JS
-
Document Object Model
-
Обработка событий
-
Проект: игра-платформер
-
Рисование на холсте
-
HTTP
-
Формы и поля форм
-
Проект: Paint
-
Node.js
-
Проект: веб-сайт по обмену опытом
-
Вывод
Дневник цели
Закончила. learn.javascript.ru - очень хороший онлайн-учебник. Вела конспект. Теперь нужно систематизировать знания и проработать eloquent.js/
Дима, спасибо за совет! Но я умею программировать:) Читайте описание: у меня 2 года опыта в java;)
Уроки CSS: препроцессор SASS больше не нужен
Математические вычисления
border{
padding: calc(1rem-5px) calc(1rem+5px);
}
Переменные в css (не поддерж. в IE, в старых брауз. андроид, опера мини и тд. см. https://caniuse.com/#search=var)
//объявление
:root {
--first-var:#eee;
}
//использование. red- значение по умолч.
body {
background-color: var(--first-var, red);
}
Миксины (поддерживаются только хромом и только в эксперемнт. режиме : chrome://flags/#enable-experimental-web-platform-features)
//объявление
:root {
--first-mix:{
background:blue;
padding: 10px;
color: red;
}
}
//использование
body {
@apply: --first-mix;
}
ES6. Современный JavaScript
Урок 7. Современный JavaScript (ES6) - Деструктуризация параметров
Если нам нужно передать свойства объекта в функцию, то мы можем применить деструктуризацию, чтобы сократить код
const user = {
firstName: "Арсен",
lastName: "Аргустамян",
id: 1
};
//ES5
function printUserInfo(user) {
const firstName = user.firstName;
const lastName= user.lastName;
const id= user.id;
console.log(id, firstName, lastName);
}
//ES6
function printUserInfo(firstName: name, lastName, id) {
console.log(id, name, lastName);
}
printUserInfo(user);
ES6. Современный JavaScript
Урок 6. Современный JavaScript (ES6) - Стрелочные функции
const sumArrowFunc = (a, b) => {
return a+b;
};
//Еще одна особенность стрелочных функций - они сохраняют контекст
var user = {
firstName: "Вася",
sayHi: function() { setTimeout(
function(){this.firstName},
1000);
}
};
ES6. Современный JavaScript
Урок 5. Современный JavaScript (ES6) - Параметры по умолчанию
Описываем поведение когда функцию с аргуметами вызвали без аргументов
//ES5
function sumES5(a, b) {
a = a || 0;
b = b || 0;
return a + b;
}
//ES6
function sumES6(a = 0, b = 0) {
return a + b;
}
const sumRes = sumES6();
//->0
const sumRes = sumES6(2, 2);
//->4
ES6. Современный JavaScript
Урок 4. Современный JavaScript (ES6) - String Template и интерполяция строк
const text = 'text span';
//Было
const html = '<div>\n<p>\n<span>' + text + '</span>\n</p>\n</div>';
//String Template + интерполяция ${text}
const html2 = `<div>
<p>
<span>${text}</span>
</p>
</div>`;
Т.е. во 2-ом случае сохраняется пользовательское редактирование(переносы, табы и тд), а переменные вставляются при помощи ${n}
ES6. Современный JavaScript
Урок 1. Современный JavaScript (ES6) - let, const
var
console.log(b);
var b = 10;
//->undefined
(явление хостинг - объявленные через var переменные создаются в начале скрипта) т.е. это тоже самое, что
var b = undefined;
console.log(b);
b = 10;
//->undefined
__________________________________
let
(явление хостинг отсутствует)
1.
console.log(b);
let b = 10;
//->is not defined (ошибка)
2. Локальная область видимости (при объявлении с var только перемен, объявленные внутри function имеют локальн. обл. видимости)
{
let a = 5;
}
console.log(a);
//->is not defined (ошибка)
3. Переопределение переменных.
var a = 5;
var a = 10;
//->all right(без ошибки, т.к. хостинг)
let b = 5;
let b = 10;
////->b is already defined(ошибка)
__________________________________
const
(обычные константы)
1.
const a = 5;
a = 10;
//->a is const (ошибка)
2. Объекты-константы
const obj = {
name: "Арсен";
};
obj = {};
//->obj is const (ошибка)
obj.name = "Иван";
//->all right(без ошибки, т.е св-ва объекта-константы мы можем менять без проблем)
Урок 2. Современный JavaScript (ES6) - Деструктуризация
Деструктуризация (destructuring assignment) – это особый синтаксис присваивания, при котором можно присвоить массив или объект сразу нескольким переменным, разбив его на части.
1. Массивы
const array = [1, 2, 3, 4];
//ES5
const one = array[0];
const two = array[1];
console.log(one, two);
//ES6
cost [ one, two, , four] = array;
console.log(one);
console.log(two);
console.log(four);
2. Объекты
const user = {
firstName: "Арсен",
lastName: "Аргустамян",
address: {
city:"Moscow",
country:"Russia"
}
};
//ES5
const firstName = user.firstName;
const lastName = user.lastName;
console.log(firstName);
console.log(lastName);
//ES6
const{firstName, lastName} = user;
console.log(firstName);
console.log(lastName);
//если сво-во тоже объект
const{address:{city, country}} = user;
console.log(city);
console.log(country);
//если хоти создать переменную с именем, отличным от имени свойства
const{firstName: name} = user;
console.log{name};
Урок 3. Современный JavaScript (ES6) - rest и spread операторы
Spread - Оператор расширения позволяет расширять выражения в тех местах, где предусмотрено использование нескольких аргументов (при вызовах функции) или ожидается несколько элементов (для массивов).
function foo(a, b, c) {
console.log(a, b, c);
}
const numbers = [1, 2, 3];
foo(...numbers);
//->1, 2, 3
__________________________________
Rest - cинтаксис оставшихся параметров функции позволяет представлять неограниченное множество аргументов в виде массива.
function foo(a, ...rest) {
console.log(rest);
}
foo(1, 2, 3);
//->2, 3
