HTML Diff
0 added 0 removed
Original 2026-01-01
Modified 2026-02-26
1 <h2>Транскрипт урока</h2>
1 <h2>Транскрипт урока</h2>
2 <p>У вас вечеринка, а закуска кончилась, вы просите подругу что-нибудь купить.</p>
2 <p>У вас вечеринка, а закуска кончилась, вы просите подругу что-нибудь купить.</p>
3 <p>- Эй, можешь сходить в магазин и купить какой-нибудь еды?</p>
3 <p>- Эй, можешь сходить в магазин и купить какой-нибудь еды?</p>
4 <p>Она отвечает:</p>
4 <p>Она отвечает:</p>
5 <p>- Что именно?</p>
5 <p>- Что именно?</p>
6 <p>Вы говорите:</p>
6 <p>Вы говорите:</p>
7 <p>- Ну, типа чипсы или что-нибудь такое. У нас всё закончилось.</p>
7 <p>- Ну, типа чипсы или что-нибудь такое. У нас всё закончилось.</p>
8 <p>Она отвечает:</p>
8 <p>Она отвечает:</p>
9 <p>- Сколько упаковок чипсов взять?</p>
9 <p>- Сколько упаковок чипсов взять?</p>
10 <p>И у вас уже начинает немного вскипать мозг:</p>
10 <p>И у вас уже начинает немного вскипать мозг:</p>
11 <p>- Да, я не знаю, штук 5.</p>
11 <p>- Да, я не знаю, штук 5.</p>
12 <p>- А какие чипсы?</p>
12 <p>- А какие чипсы?</p>
13 <p>И вы так глазами делаете и отвечаете "ааа… забудь", или решаете идти до конца и объясняете подробно задачу: "Возьми 5 средних пакетов картофельных чипсов со вкусом бекона".</p>
13 <p>И вы так глазами делаете и отвечаете "ааа… забудь", или решаете идти до конца и объясняете подробно задачу: "Возьми 5 средних пакетов картофельных чипсов со вкусом бекона".</p>
14 <p>Десять минут спустя она возвращается с пустыми руками и говорит "у них не было таких чипсов в пакетах среднего размера".</p>
14 <p>Десять минут спустя она возвращается с пустыми руками и говорит "у них не было таких чипсов в пакетах среднего размера".</p>
15 <p>О "программистах" есть определённые стереотипы и то, что они могут быть слишком конкретными и чересчур дотошными - один из них. Многие думают, что такие люди хорошо разбираются в математике или что-то подобное.</p>
15 <p>О "программистах" есть определённые стереотипы и то, что они могут быть слишком конкретными и чересчур дотошными - один из них. Многие думают, что такие люди хорошо разбираются в математике или что-то подобное.</p>
16 <p>В реальности всё намного сложнее. Не существует всего двух типов людей, спектр типов личности буквально бесконечен. И для некоторых людей программирование немного более органично, потому что компьютеры абсолютно конкретные и абсурдно однозначные. Это совершенно не значит, что если вы считаете, что у вас "нематематический склад ума", вы не сможете стать хорошим разработчиком. Это значит только, что вам нужно научиться лучше распознавать и понимать, как именно работают компьютеры.</p>
16 <p>В реальности всё намного сложнее. Не существует всего двух типов людей, спектр типов личности буквально бесконечен. И для некоторых людей программирование немного более органично, потому что компьютеры абсолютно конкретные и абсурдно однозначные. Это совершенно не значит, что если вы считаете, что у вас "нематематический склад ума", вы не сможете стать хорошим разработчиком. Это значит только, что вам нужно научиться лучше распознавать и понимать, как именно работают компьютеры.</p>
17 <p>Такой способ поведения компьютеров ведёт ко множеству ошибок. Если вы наберёте console,log - console запятая log, вместо console точка log, JavaScript скажет "Понятия не имею, что ты имел в виду".</p>
17 <p>Такой способ поведения компьютеров ведёт ко множеству ошибок. Если вы наберёте console,log - console запятая log, вместо console точка log, JavaScript скажет "Понятия не имею, что ты имел в виду".</p>
18 <p>Вы будете делать ошибки и ваши программы будут содержать ошибки. Жизнь - она такая. Любой программист делает ошибки и это не имеет особого значения. Значение имеет только то, как вы потом с ними справляетесь. Исправление ошибок - важный навык. Это делает программирование непохожим на другие типы работ: ошибки неизбежны, вы не можете от них полностью застраховаться, а исправление ошибок - часть вашей работы.</p>
18 <p>Вы будете делать ошибки и ваши программы будут содержать ошибки. Жизнь - она такая. Любой программист делает ошибки и это не имеет особого значения. Значение имеет только то, как вы потом с ними справляетесь. Исправление ошибок - важный навык. Это делает программирование непохожим на другие типы работ: ошибки неизбежны, вы не можете от них полностью застраховаться, а исправление ошибок - часть вашей работы.</p>
19 <p>Ошибка вроде "запятая вместо точки" это тип, который проще всего заметить и исправить. Это "синтаксическая ошибка", потому что неверный символ, как запятая в этом случае, нарушает синтаксические правила языка.</p>
19 <p>Ошибка вроде "запятая вместо точки" это тип, который проще всего заметить и исправить. Это "синтаксическая ошибка", потому что неверный символ, как запятая в этом случае, нарушает синтаксические правила языка.</p>
20 <p>Когда вы запускаете код с такой ошибкой, интерпретатор JavaScript - та штука, которая исполняет JavaScript-программы - пожалуется: SyntaxError и укажет вам на то место, где по его мнению есть проблема.</p>
20 <p>Когда вы запускаете код с такой ошибкой, интерпретатор JavaScript - та штука, которая исполняет JavaScript-программы - пожалуется: SyntaxError и укажет вам на то место, где по его мнению есть проблема.</p>
21 <p>Вот, например, это определение функции и в конце - лишняя скобка. Её там быть не должно и это ломает всю программу, поэтому JavaScript жалуется: "SyntaxError:" Unexpected token (символ))". Эта скобка unexpected - неожиданная.</p>
21 <p>Вот, например, это определение функции и в конце - лишняя скобка. Её там быть не должно и это ломает всю программу, поэтому JavaScript жалуется: "SyntaxError:" Unexpected token (символ))". Эта скобка unexpected - неожиданная.</p>
22 <blockquote><p>Синтаксическая ошибка - это как если кто-то бредит вслух. Никто вокруг ничего не понимает.</p>
22 <blockquote><p>Синтаксическая ошибка - это как если кто-то бредит вслух. Никто вокруг ничего не понимает.</p>
23 </blockquote><p>Следующий тип ошибки подобен синтаксической, но в этом случае вы нарушаете не законы синтаксиса языка, а как бы законы синтаксиса<strong>собственного кода</strong>. В прошлый раз мы создали функцию abs, которая возвращала абсолютное значение числа.</p>
23 </blockquote><p>Следующий тип ошибки подобен синтаксической, но в этом случае вы нарушаете не законы синтаксиса языка, а как бы законы синтаксиса<strong>собственного кода</strong>. В прошлый раз мы создали функцию abs, которая возвращала абсолютное значение числа.</p>
24 <p>Если вы вызовете ads вместо abs, интерпретатор JavaScript пожалуется: ReferenceError: ads is not defined. Вы использовали, как вам кажется, существующее название, но на самом деле такого названия нет.</p>
24 <p>Если вы вызовете ads вместо abs, интерпретатор JavaScript пожалуется: ReferenceError: ads is not defined. Вы использовали, как вам кажется, существующее название, но на самом деле такого названия нет.</p>
25 <p>Несколько строк, которые следуют после указания ошибки, могут смутить и оттолкнуть вас, но они тут только для пользы. Это stack trace - последовательность вызовов функций, которая привела к ошибке. Когда вы запускаете свою программу, даже крошечную, она становится частью чего-то более крупного - сложной системой JavaScript-кода, который приводится в действие, чтобы оживить вашу программу. Тут видно, что проблема была в моём файле. Следующая строка - это место, откуда был вызван мой код, третья строка - откуда была вызвана вторая и в таком духе можно продолжать дальше. Это как отслеживать шаги в обратном направлении - проблема есть, и мы можем возвращаться по одному шагу назад и смотреть, не нашлась ли ошибка.</p>
25 <p>Несколько строк, которые следуют после указания ошибки, могут смутить и оттолкнуть вас, но они тут только для пользы. Это stack trace - последовательность вызовов функций, которая привела к ошибке. Когда вы запускаете свою программу, даже крошечную, она становится частью чего-то более крупного - сложной системой JavaScript-кода, который приводится в действие, чтобы оживить вашу программу. Тут видно, что проблема была в моём файле. Следующая строка - это место, откуда был вызван мой код, третья строка - откуда была вызвана вторая и в таком духе можно продолжать дальше. Это как отслеживать шаги в обратном направлении - проблема есть, и мы можем возвращаться по одному шагу назад и смотреть, не нашлась ли ошибка.</p>
26 <p>Мы допускаем, что вся внутренняя система исправно работает, поэтому ошибка в нашем коде. Когда одна из ваших функций вызывает другую, вы увидите эту последовательность вызовов в стектрейсе.</p>
26 <p>Мы допускаем, что вся внутренняя система исправно работает, поэтому ошибка в нашем коде. Когда одна из ваших функций вызывает другую, вы увидите эту последовательность вызовов в стектрейсе.</p>
27 <p>ReferenceError может случиться с другими константами: например, если ваш код содержит 10 * pi, а pi не существует, потому что вы не создавали константу с точно таким названием, вы получите ReferenceError.</p>
27 <p>ReferenceError может случиться с другими константами: например, если ваш код содержит 10 * pi, а pi не существует, потому что вы не создавали константу с точно таким названием, вы получите ReferenceError.</p>
28 <blockquote><p>ReferenceError - это как называть кого-то чужим именем.</p>
28 <blockquote><p>ReferenceError - это как называть кого-то чужим именем.</p>
29 </blockquote><p>Следующий тип ошибки - когда вы путаете одну вещь с другой. Взгляните на этот код:</p>
29 </blockquote><p>Следующий тип ошибки - когда вы путаете одну вещь с другой. Взгляните на этот код:</p>
30 <p>Сначала мы создали константу. Помните, что это как давать чему-то название: в нашем случае - числу 12 даётся название length. В следующей строке мы вызываем функцию length и передаём ей аргумент - число 54. Но подождите! length - это не функция! Это всего лишь число. Числа - это не функции, не ящики, которые производят какие-то действия. И JavaScript пожалуется именно на это:</p>
30 <p>Сначала мы создали константу. Помните, что это как давать чему-то название: в нашем случае - числу 12 даётся название length. В следующей строке мы вызываем функцию length и передаём ей аргумент - число 54. Но подождите! length - это не функция! Это всего лишь число. Числа - это не функции, не ящики, которые производят какие-то действия. И JavaScript пожалуется именно на это:</p>
31 <p>Это<strong>Ошибка типизации</strong>: тип объекта, который вы использовали, неверный. Интерпретатор JavaScript не скажет<strong>чем что-то является</strong>, но точно скажет<strong>чем оно не является</strong>. length - это не функция.</p>
31 <p>Это<strong>Ошибка типизации</strong>: тип объекта, который вы использовали, неверный. Интерпретатор JavaScript не скажет<strong>чем что-то является</strong>, но точно скажет<strong>чем оно не является</strong>. length - это не функция.</p>
32 <blockquote><p>Ошибка типизации - это как просить кошку постирать бельё. Возможно, вы хотели попросить об этом вашего друга.</p>
32 <blockquote><p>Ошибка типизации - это как просить кошку постирать бельё. Возможно, вы хотели попросить об этом вашего друга.</p>
33 </blockquote><p>Все эти ошибки - syntax error, reference error и type error - возникают из-за использования неправильных слов. И все они предельно очевидные: вы видите сообщение об ошибке и достаточно хорошо понимаете в чём проблема. Обычно сразу понятно, как их исправить:</p>
33 </blockquote><p>Все эти ошибки - syntax error, reference error и type error - возникают из-за использования неправильных слов. И все они предельно очевидные: вы видите сообщение об ошибке и достаточно хорошо понимаете в чём проблема. Обычно сразу понятно, как их исправить:</p>
34 <ol><li><strong>Синтаксическая ошибка</strong>? Заменить, удалить или добавить символы. Часто проблема в скобках и кавычках: открытые скобки и открытые кавычки должны быть закрыты.</li>
34 <ol><li><strong>Синтаксическая ошибка</strong>? Заменить, удалить или добавить символы. Часто проблема в скобках и кавычках: открытые скобки и открытые кавычки должны быть закрыты.</li>
35 <li><strong>Reference error</strong>? Проверить, существует ли тот объект, на который вы ссылаетесь. Возможно, вы использовали неправильное название или забыли создать его.</li>
35 <li><strong>Reference error</strong>? Проверить, существует ли тот объект, на который вы ссылаетесь. Возможно, вы использовали неправильное название или забыли создать его.</li>
36 <li><strong>Ошибка типизации</strong>? Убедиться, что вы используете объекты верно. Часто проблема - простая путаница: вы создали и числовую константу и функцию, а потом пытаетесь вызвать число. Наверное, вы хотели вызвать функцию.</li>
36 <li><strong>Ошибка типизации</strong>? Убедиться, что вы используете объекты верно. Часто проблема - простая путаница: вы создали и числовую константу и функцию, а потом пытаетесь вызвать число. Наверное, вы хотели вызвать функцию.</li>
37 </ol><p>Последний тип ошибки, о котором мы сегодня поговорим - самый злой:<strong>Логическая ошибка</strong>. Допустим, мы пишем функцию, которая конвертирует градусы по фаренгейту (F) в градусы по цельсию (C). Чтобы сконвертировать температуру по одной шкале в другую, нужно вычесть 32 и умножить на 5/9. Например (50°F - 32) x 5/9 = 10°C.</p>
37 </ol><p>Последний тип ошибки, о котором мы сегодня поговорим - самый злой:<strong>Логическая ошибка</strong>. Допустим, мы пишем функцию, которая конвертирует градусы по фаренгейту (F) в градусы по цельсию (C). Чтобы сконвертировать температуру по одной шкале в другую, нужно вычесть 32 и умножить на 5/9. Например (50°F - 32) x 5/9 = 10°C.</p>
38 <p>Выглядит нормально? Давайте запустим эту функцию, сконвертируем 50 градусов и выведем на экран:</p>
38 <p>Выглядит нормально? Давайте запустим эту функцию, сконвертируем 50 градусов и выведем на экран:</p>
39 <p>И у нас получилось 32.22222222222222. Не 10. Что произошло? JavaScript не пожаловался, когда код запустился, никаких ошибок не выскакивало. Компьютер не знает, что нам нужно, поэтому он производит вычисление, как мы его и просили. Но такое вычисление ошибочно - допустили ошибку мы. Нам нужно вначале вычесть 32, а потом умножить это на 5/9. Но мы не использовали скобки, поэтому 32 вначале умножилось на 5/9, а затем результат был отнят от температуры в фаренгейтах.</p>
39 <p>И у нас получилось 32.22222222222222. Не 10. Что произошло? JavaScript не пожаловался, когда код запустился, никаких ошибок не выскакивало. Компьютер не знает, что нам нужно, поэтому он производит вычисление, как мы его и просили. Но такое вычисление ошибочно - допустили ошибку мы. Нам нужно вначале вычесть 32, а потом умножить это на 5/9. Но мы не использовали скобки, поэтому 32 вначале умножилось на 5/9, а затем результат был отнят от температуры в фаренгейтах.</p>
40 <p>Это<strong>Логическая ошибка</strong>. Мы не нарушили никаких правил, мы просто сделали что-то не то. Наш пример был простым: мы написали функцию, запустили её и увидели неверный результат. Но представьте, что функция - это только маленькая частица крупной системы. Приложение для формирования бюджета в огромной организации отправляет отчёт в главную бухгалтерию, что в следующем месяце для оплаты счёта за электричество требуются дополнительные $300 000. Организуется экстренное собрание, увольняют людей, генеральный директор снова уходит в запой. Что случилось?</p>
40 <p>Это<strong>Логическая ошибка</strong>. Мы не нарушили никаких правил, мы просто сделали что-то не то. Наш пример был простым: мы написали функцию, запустили её и увидели неверный результат. Но представьте, что функция - это только маленькая частица крупной системы. Приложение для формирования бюджета в огромной организации отправляет отчёт в главную бухгалтерию, что в следующем месяце для оплаты счёта за электричество требуются дополнительные $300 000. Организуется экстренное собрание, увольняют людей, генеральный директор снова уходит в запой. Что случилось?</p>
41 <p>Иногда обнаружить проблему может оказаться трудной задачей: система кондиционирования ожидает, что январская температура будет 32 градуса по цельсию, вместо 10, потому что кто-то забыл использовать скобки в функции.</p>
41 <p>Иногда обнаружить проблему может оказаться трудной задачей: система кондиционирования ожидает, что январская температура будет 32 градуса по цельсию, вместо 10, потому что кто-то забыл использовать скобки в функции.</p>
42 <p>Борьба с логическими ошибками - это целиком ваша ответственность. И временами - тяжёлая работа, но в конце приходит сильное облегчение и удовлетворение: а-ааа, так вот в чём была проблема!</p>
42 <p>Борьба с логическими ошибками - это целиком ваша ответственность. И временами - тяжёлая работа, но в конце приходит сильное облегчение и удовлетворение: а-ааа, так вот в чём была проблема!</p>
43 <p>Теперь ваша очередь делать ошибки! Выполните тест и упражнение, чтобы ощутить боль.</p>
43 <p>Теперь ваша очередь делать ошибки! Выполните тест и упражнение, чтобы ощутить боль.</p>
44 <h2>Дополнение к уроку</h2>
44 <h2>Дополнение к уроку</h2>
45 <h3>Листочек</h3>
45 <h3>Листочек</h3>
46 <p>Самый действенный способ понять, как работает участок кода - это расписать его выполнение на бумажке, как если бы вы были компьютером (медленным и немного голодным).</p>
46 <p>Самый действенный способ понять, как работает участок кода - это расписать его выполнение на бумажке, как если бы вы были компьютером (медленным и немного голодным).</p>
47 <h3>Метод утенка</h3>
47 <h3>Метод утенка</h3>
48 <p>Метод утёнка - психологический метод решения задачи, делегирующий её мысленному помощнику. Метод описан в книге "Программист-прагматик".</p>
48 <p>Метод утёнка - психологический метод решения задачи, делегирующий её мысленному помощнику. Метод описан в книге "Программист-прагматик".</p>
49 <p>Тестируемый ставит на рабочем столе игрушечного утёнка (или представляет его мысленно; на самом деле уточка - это условно, предмет может быть любым), и когда у него возникает вопрос, на который трудно ответить, то он задаёт его игрушке, как живому человеку, словно она действительно может ответить.</p>
49 <p>Тестируемый ставит на рабочем столе игрушечного утёнка (или представляет его мысленно; на самом деле уточка - это условно, предмет может быть любым), и когда у него возникает вопрос, на который трудно ответить, то он задаёт его игрушке, как живому человеку, словно она действительно может ответить.</p>
50 <p>Считается, что правильная формулировка вопроса содержит как минимум половину ответа, а также это дает толчок мыслям, направляя их в нужное русло.</p>
50 <p>Считается, что правильная формулировка вопроса содержит как минимум половину ответа, а также это дает толчок мыслям, направляя их в нужное русло.</p>
51 <p>Метод также используется при отладке. Если определённая часть программы не работает, программист пытается объяснить утёнку, что делает каждая строка программы, и в процессе этого сам находит ошибку.</p>
51 <p>Метод также используется при отладке. Если определённая часть программы не работает, программист пытается объяснить утёнку, что делает каждая строка программы, и в процессе этого сам находит ошибку.</p>
52 <h2>Выводы</h2>
52 <h2>Выводы</h2>
53 <p>4 типа ошибок:</p>
53 <p>4 типа ошибок:</p>
54 <ol><li><strong>Syntax error</strong>. Неверное использование языка. Часто лишние или недостающие скобки или кавычки.<strong>Что делать?</strong>Заменить, удалить или добавить символы. Часто проблема в скобках или кавычках: открытые скобки должны быть закрыты, открытые кавычки должны быть закрыты.</li>
54 <ol><li><strong>Syntax error</strong>. Неверное использование языка. Часто лишние или недостающие скобки или кавычки.<strong>Что делать?</strong>Заменить, удалить или добавить символы. Часто проблема в скобках или кавычках: открытые скобки должны быть закрыты, открытые кавычки должны быть закрыты.</li>
55 <li><strong>Reference error</strong>. Использование несуществующего названия.<strong>Что делать?</strong>Проверить, существует ли то, на что вы ссылаетесь. Возможно вы использовали ошибочное название или забыли его создать.</li>
55 <li><strong>Reference error</strong>. Использование несуществующего названия.<strong>Что делать?</strong>Проверить, существует ли то, на что вы ссылаетесь. Возможно вы использовали ошибочное название или забыли его создать.</li>
56 <li><strong>Type error</strong>. Использование неверного типа, например попытка вызвать константу числа, как функцию.<strong>Что делать?</strong>Убедиться, что всё используется верно. Часто проблема в простой путанице: вы создали численную константу и функциональную константу, а потом пытаетесь вызвать число. Вероятно вы собирались вызвать функцию.</li>
56 <li><strong>Type error</strong>. Использование неверного типа, например попытка вызвать константу числа, как функцию.<strong>Что делать?</strong>Убедиться, что всё используется верно. Часто проблема в простой путанице: вы создали численную константу и функциональную константу, а потом пытаетесь вызвать число. Вероятно вы собирались вызвать функцию.</li>
57 <li><strong>Logic error</strong>. (Логическая ошибка) Ваш код выполняет не то, что требуется, но программа запускается и не выдаёт ошибок трёх перечисленных выше типов. Сломана логика.<strong>Что делать?</strong>Проверить свой код, убедиться, что он выполняет то, что должен.</li>
57 <li><strong>Logic error</strong>. (Логическая ошибка) Ваш код выполняет не то, что требуется, но программа запускается и не выдаёт ошибок трёх перечисленных выше типов. Сломана логика.<strong>Что делать?</strong>Проверить свой код, убедиться, что он выполняет то, что должен.</li>
58 </ol>
58 </ol>