С чего правильно начинать изучение JavaScript?

Question

[Fandarik]

Примерно 2 недели назад я начал учить JavaScript . Стартом для меня стал учебник learn.javascript.ru (Прочитал до 5 главы), после чего 5 дней назад приобрёл книгу Дэвида Флэнагана "JavaScript Подробное руководство". На данный момент уже пятый день читаю книгу и практикуюсь (и наслаждаюсь).

Правильный ли я сделал выбор , что начал изучение с книги "JavaScript Подробное руководство" , или лучше сначала полностью закончить книгу learn.javascript.ru , и уже потом начинать "JavaScript Подробное руководство" ?

Comments

[Brad9aga]

с азов программирования надо начинать,как все устроено.

Answer 1

[Stanislav Yaroslavtsev]

Сначала лучше learn.javascript.ru, чтобы изучить азы. Но самое главное - практикуйтесь! Придумайте себе задание или проект и делайте его! Так будет полезней и эффективнее всяких книг.

Comments

[Leo]

Только с английской версии

Answer 2

[reaget]

Мне в свое время эта книга помогла и понравилась)
https://eloquentjavascript.net/
А так, я тоже начинал с learn.javascript.ru

Answer 3

[Дмитрий Беляев]

learn.javascript.ru - конечно отвратительный учебник, написанный хорошим методистом, но отвратительным программистом. Научится, то Вы по нему научитесь, но плохим практикам...
Флэнаган - с точностью до наоборот, книга от хорошего программиста, но вот с методологией обучения... вообщем научится будет сложно, но если научитесь, то научитесь правильным вещам

ну и соглашусь с комментарием Brad9aga под вопросом, нужно сначала азы изучить, как вообще компьютер работает, как процессор считает, как память хранит данные, и лишь после браться за какой либо язык программирования

Comments

[lloydbanks]

learn.javascript.ru - конечно отвратительный учебник
Научится, то Вы по нему научитесь, но плохим практикам...

Довольно громкое заявление. Подкрепить его конкретными обоснованными аргументами можете?

[Дмитрий Беляев]

lloydbanks, смотрите, вот достается Вам в руки старый легаси проект и в дебрях лапшекода Вы находите

вот такое чудо

/**
 * Crossbrowser event adding
 *
 * http://javascript.ru/tutorial/events/crossbrowser
 */

define([], function () {
  var uid = 0;

  function fixEvent (event) {
    event = event || window.event;

    if (event.isFixed) {
      return event;
    }

    event.isFixed = true; 

    event.preventDefault = event.preventDefault || function () {
      this.returnValue = false;
    };

    event.stopPropagation = event.stopPropagaton || function () {
      this.cancelBubble = true;
    };

    if (!event.target) {
      event.target = event.srcElement;
    }

    if (!event.relatedTarget && event.fromElement) {
      event.relatedTarget = event.fromElement === event.target ? event.toElement : event.fromElement;
    }

    if (event.pageX == null && event.clientX != null) {
      var html = document.documentElement,
        body = document.body;

      event.pageX = event.clientX + (html && html.scrollLeft || body && body.scrollLeft || 0) - (html.clientLeft || 0);
      event.pageY = event.clientY + (html && html.scrollTop || body && body.scrollTop || 0) - (html.clientTop || 0);
    }

    if (!event.which && event.button) {
      event.which = (event.button & 1 ? 1 : (event.button & 2 ? 3 : (event.button & 4 ? 2 : 0)));
    }

    return event;
  }  

  /* this = element */
  function commonHandle (event) {
    event = fixEvent(event);

    var handlers = this.events[event.type];

    for (var g in handlers) {
      var handler = handlers[g],
        ret = handler.call(this, event);

      if (ret === false) {
        event.preventDefault();
        event.stopPropagation();
      }
    }
  }

  var exports = {
    /**
     * custom event polyfill
     * @param {String} name Event name
     * @param {Object} options {bubles: Boolean, cancelable: Boolean, detail: {}}
     *
     * @return {EventObject} event instance
     */
    create: function (name, options) {
      try {
        new CustomEvent('IE has CustomEvent, but doesn\'t support constructor');
      } catch (e) {
        var CustomEvent = function(event, params) {
          var evt;
          params = params || {
            bubbles: false,
            cancelable: false,
            detail: undefined
          };
          evt = document.createEvent('CustomEvent');
          evt.initCustomEvent(event, params.bubbles, params.cancelable, params.detail);
          return evt;
        };
      }

      return new CustomEvent(name, options);
    },
    
    /**
     * Call handler only once by event type
     */
    addOnce: function (elem, type, handler) {
      var fn = function () {
        handler.apply(this, arguments);
        exports.remove(elem, type, fn);
      };

      this.add(elem, type, fn);
    },
    
    /**
     * Add handler to element by event type
     */
    add: function (elem, type, handler) {
      if (elem.setInterval && (elem != window && !elem.frameElement)) {
        elem = window;
      }

      if (!handler.uid) {
        handler.uid = ++uid;
      }

      if (!elem.events) {
        elem.events = {};
        elem.handle = function (event) {
          return commonHandle.call(elem, event);
        }
      }

      if (!elem.events[type]) {
        elem.events[type] = {};    
          
        if (elem.addEventListener) {
          elem.addEventListener(type, elem.handle, false);
        } else if (elem.attachEvent) {
          elem.attachEvent('on' + type, elem.handle);
        }
      }

      elem.events[type][handler.uid] = handler;
      return handler;
    },

    /**
     * Add handler to element by list of events
     */
    addAll: function (element, events, handler) {
      for (var i = 0; i < events.length; i++) {
        this.add(element, events[i], handler);
      }
    },
    
    /**
     * Remove handler from element by event type
     */
    remove: function (elem, type, handler) {
      var handlers = elem.events && elem.events[type];

      if (!handlers) {
        return;
      }

      delete handlers[handler.uid];

      for (var any in handlers) {
        return;
      }

      if (elem.removeEventListener) {
        elem.removeEventListener(type, elem.handle, false);
      } else if (elem.detachEvent) {
        elem.detachEvent('on' + type, elem.handle);
      }

      delete elem.events[type];

      for (var any in elem.events) {
        return;
      }

      try {
        delete elem.handle;
        delete elem.events;
      } catch (e) {
        elem.removeAttribute('handle');
        elem.removeAttribute('events');
      }
    },

    /**
     * Remove handler from element by list of events
     */
    removeAll: function (element, events, handler) {
      for (var i = 0; i < events.length; i++) {
        this.remove(element, events[i], handler);
      }
    }
  };

  return exports;
});

И ты думаешь, может при рефакторинге этой гадости добавилось? Но нет, 1 в 1 из статьи с этого так сказать учебника скопировано, сравните сами javascript.ru/files/event/event.js
И ладно еще продублировали функционал браузерного апи, сохраняя хандлеры в объект, чтоб потом вызывать их бегая по ним циклом... это еще пол беды
Беда в том, что данный код пропатчил и переданный ему DOM элемент и хандлер... притом криво пропатчил... а потом этот код бездумно скопировала какая нибудь обезьяна и он вызвал баги вылившиеся владельцу продукта в бабло... (но это уже другая история, про скупой платит дважды, и что 10 джунами не заменишь одного мидла)

Ок, сейчас эта статья помечена как устаревшая и рекомендован новый шлак:
https://learn.javascript.ru/introduction-browser-events
Читая который, мы раньше позже придем к этому:
learn.javascript.ru/event-loop
где учебник предлагает

совершенно неправильную картинку

Я недавно тут "сеньера" собеседовал, который сказал, что знает как работает event-loop и пересказал мне 1 в 1 чушь из этого раздела...

P.S. я не читал данный учебник "от корки до корки", но могу придраться практически к любой статье, что видел... И матерьял в общем не плох, чтоб быть вставленным в школьный учебник по информатике (уж получше многих авторов этих учебников будет, хотя вроде авторы учебников взяли вполне себе академичный и простой паскаль, а не сложный JS), но вот для реальной работы придется сначала выбить из человека всю дурь привнесенную данным учебником, иначе он наработает на потерю миллионов денег...

[Илья Кантор]

Большое спасибо за вашу критику учебника. Очень интересно было бы узнать детали. Придирки, если по делу - это хорошо, они помогают стать лучше. Но это если по делу =)

Что касается старого кода из event.js, который вы процитировали - когда-то во времена IE6 он был вполне хорош, но лет 10 назад и программирование на JS было другим. Как и много библиотек, есть trade-off между плюсами и минусами. Сейчас он устарел, полагаю что много кода такой давности может вызвать сейчас критику, эта критика неактуальна. Можно критиковать каменные топоры, но в каменном веке они были вполне себе хороши.

Скажите пожалуйста, что именно совершенно неправильно в картинке из статьи learn.javascript.ru/event-loop в современной редакции учебника, о которой вы выразились словами "чушь" и "шлак"?

Там она немного обновлена была, кстати, но это несущественно.

Жду конкретики.

[Дмитрий Беляев]

Илья Кантор, посмотрите на досуге:
https://www.youtube.com/watch?v=cCOL7MC4Pl0
https://www.youtube.com/watch?v=8aGhZQkoFbQ
https://developer.mozilla.org/ru/docs/Web/JavaScri...

У Вас в учебнике же материал не соответствует действительности, вводит в заблуждение

[Илья Кантор]

Дмитрий Беляев, Я просил конкретику, а вы ссылку на учебные материалы. С тем же успехом я могу дать вам ссылку на спецификацию, поскольку она важнее, чем всё, что вы перечислили.

Допускаю наличие ошибок в учебнике. Ошибки есть везде, их можно и нужно исправлять. Но в чём же ошибки?

Answer 4

[tundramani]

сначала learn.javascript.ru
потом Дэвида Флэнагана "JavaScript Подробное руководство"
и опять learn.javascript.ru

learn.javascript.ru - это удобный электронный справочник

Comments

[Denioo]

Погоди, ты же тот чувак который js фреймворки не может выучить.
Сори за рофл, но я просто помню твой вопрос"Как найти работу если не хочешь учить js фреймворк" или как то так.