Javascript-форум (https://javascript.ru/forum/)
-   Элементы интерфейса (https://javascript.ru/forum/dom-window/)
-   -   Изучение javascript (https://javascript.ru/forum/dom-window/75126-izuchenie-javascript.html)

madeas 04.09.2018 17:51

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

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

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

рони 04.09.2018 18:23

Цитата:

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

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


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

Nexus 05.09.2018 10:12

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

Ниже что-то нелепое.
В первой строке вы уже изменили контент блока, во второй вы снова достаете из dom этот же блок и снова изменяете его контент на тот, что у него уже установлен.
const cont = document.getElementById('cont').innerHTML = 'Please wait...';
document.getElementById('cont').innerHTML = cont;

madeas 05.09.2018 11:33

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

Пример из учебника:
var user = {
  name: 'Василий'
};

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

user.sayHi();


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

madeas 05.09.2018 11:44

Цитата:

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

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

Цитата:

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

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

Цитата:

Сообщение от Nexus (Сообщение 493980)
Ниже что-то нелепое.
В первой строке вы уже изменили контент блока, во второй вы снова достаете из dom этот же блок и снова изменяете его контент на тот, что у него уже установлен.
const cont = document.getElementById('cont').innerHTML = 'Please wait...';
document.getElementById('cont').innerHTML = cont;

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

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

Nexus 05.09.2018 11:58

Цитата:

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

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

Цитата:

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

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

Dilettante_Pro 05.09.2018 12:04

рони,
Цитата:

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

JS или jQuery?

madeas 05.09.2018 13:12

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

Nexus 05.09.2018 13:22

Цитата:

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

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

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

Dilettante_Pro 05.09.2018 13:36

Цитата:

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

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


Часовой пояс GMT +3, время: 12:58.