Изучение javascript

[madeas]

Всем привет!
Я часто сталкиваюсь в работе с js, могу решить задачи различной сложности => найти код и отредактировать под свои нужды. Хотя, на данном этапе, это времязатратный процесс, поскольку нет полноценного понимания языка. Поэтому я решил начать изучать js основательно, так сказать, научиться программировать самому, а не говнокодить), с применением современных стандартов. С теорией у меня туго, поэтому предпочитаю изучать в ходе работы, на практике, по необходимости заглядывая в доки.
Сделал небольшую подборку простеньких скриптов, возможно они кому-нибудь тоже пригодятся. http://jsfiddle.net/madeas/07vqk1ms/12/

В скрипте уже заменил все var на const и подвел скрипты к более современному виду. Возможно, кто-то подскажет, как можно сделать еще лучше...
Придумывать задачи из головы не получается, поскольку не совсем понимаю куда двигаться. Можете накидать несколько интересных, но не слишком сложных задач, отталкиваясь от примера выше, для повышения уровня работы с js, но так, чтобы не перескакивать через этапы и не пропустить важные вещи?
Или посоветуйте канал/видео уроки, с качественным содержанием. Искал в сети видео, но почти везде пишут, что авторы не правильно рассказывают, начинают не с того или говорят совсем не то, перескакивая через "шаги".

Грубо говоря, ищу наставника и друга, который поможет в изучении языка). В дальнейшем планирую работу с node.js, gulp и angular. Буду рад совместной работе, в ходе обучения, над каким-нибудь проектом.

[рони]

Можете накидать несколько интересных, но не слишком сложных задач, отталкиваясь от примера выше,

// 1 задаем стили рабочей области через js
document.querySelector('.container').style = 'display:flex; flex-direction: column;align-items: center;border: 1px dotted lightgray;padding:25px';

сделайте тоже самое, но используя метод обьекта.

[Nexus]

У вас в коде для выборки DOM-элементов используется как jq, так и нативный js. Если используете jq, то используйте его по максимуму.
Также в коде часто из dom дергаются одни и те же элементы, не лучше ли сохранить на них ссылку?

Ниже что-то нелепое.
В первой строке вы уже изменили контент блока, во второй вы снова достаете из dom этот же блок и снова изменяете его контент на тот, что у него уже установлен.

const cont = document.getElementById('cont').innerHTML = 'Please wait...';
document.getElementById('cont').innerHTML = cont;

[madeas]

рони,
Что-то сложновато) Сделал иначе, но это явно не оно...
Пока не совсем понял принцип работы с объектами.

Пример из учебника:

var user = {
  name: 'Василий'
};

user.sayHi = function() {
  alert('Привет!');
};

user.sayHi();

Мы создаем переменную, в ней задаем объект, затем обращаемся к этой переменной, чтобы создать функцию и затем присваиваем метод, который выводим в конце. Вроде бы, ничего не упустил.
Вопросы:
1. Какой смысл этого обращения, если в алерте все равно только "привет"?
2. Наверное глупый вопрос. Если я пишу console.log - я знаю, что она выводится в консоль, с alert тоже все ясно. Куда выводится этот метод? Или как он работает...

[madeas]

У вас в коде для выборки DOM-элементов используется как jq, так и нативный js. Если используете jq, то используйте его по максимуму.

Я не сторонник лишнего кода и источников. Тем более, что владею jq не в полном объеме. JQ использовал в примере только для кружочка-курсора)) Просто пока не знаю как реализовать на чистом js. Сделал бы иначе.

Также в коде часто из dom дергаются одни и те же элементы, не лучше ли сохранить на них ссылку?

Это как? Обращение идет постепенно, при создании новых действий с элементами. Если я пропишу все сразу, могу запутаться)

const cont = document.getElementById('cont').innerHTML = 'Please wait...';
document.getElementById('cont').innerHTML = cont;

Согласен, проглядел) Просто, в ходе работы над 4 и 6 этапом, изначально функция была записана в html в самой кнопке. Когда решил переписать все в js, при переносе пропустил.

И еще, подскажите. При создании всплывающего окна, хотел сделать несколько вариантов ответа, например: hello == 'нет' || 'Нет' || 'ytn' и для других тоже, но когда прописываю несколько, работа окна сбивается.

[Nexus]

Просто пока не знаю как реализовать на чистом js. Сделал бы иначе.

http://jsfiddle.net/07vqk1ms/46/

хотел сделать несколько вариантов ответа, например: hello == 'нет' || 'Нет' || 'ytn'

hello=hello.toString().toLowerCase().trim();
if(['нет','ytn','no','etc.'].indexOf(hello)>=0)
  alert('Выбран один из вариантов ответа');

[Dilettante_Pro]

рони,

сделайте тоже самое, но используя метод обьекта

JS или jQuery?

[madeas]

Nexus,
переделал под js все что было на jq, а вот на счет сохранения ссылок и нескольких вариантов для ответа нет. Подскажите, где об этом можно почитать.
Dilettante_Pro,
лучше на js конечно, не хочется лишний раз прибегать к jq

[Nexus]

а вот на счет сохранения ссылок и нескольких вариантов для ответа нет.

Вы уже используете ссылки на элементы dom, см. свои строки 6,19,24.
Чтобы каждый раз не искать элементы в дереве их можно сохранить в переменную и работать с ней.

По поводу нескольких вариантов ответа см. комментарий №6.

[Dilettante_Pro]

лучше на js конечно, не хочется лишний раз прибегать к jq

Если на jQuery - то в вашем примере есть пример (извините за тавтологию) использования метода объекта для назначения стилей