💻 Базовый синтаксис JavaScript

[@YaniaRZ]

Большое спасибо за такой качественный контент! Действительно складывается общая картина языка, когда есть сразу обзор всего, а не по кусочкам все узнаешь.

[@anatolykobzisty9827]

00:00:00 Введение ------------------------------------- Многоразовые абстракции (Reusable abstractions) ----------------------------- 00:03:02 Идентификаторы (identifiers: const, let, arguments, object property) 00:14:41 Циклы (loops) 00:22:10 Функции (functions) 00:30:35 Объекты (objects) ------------------------------------------------------------------------------------------------------------------------------------------------------------ 00:33:34 Итерирование по массиву ( for ( ... of ... { } ) 00:39:01 Итерирование по объекту ( for ( ... in ... { } ) 00:42:28 Синтаксис простого кода 00:55:21 Синтаксис функции 01:05:38 Синтаксис класса 01:09:10 Синтаксис расширения класса с помощью функции 01:14:59 Идентификаторы в виде символов unicode 01:17:15 Синтаксис комментариев 01:18:13 Способы объявления переменных 01:18:24 Скалярные типы переменных (string, number, boolean) 01:19:12 Структурные/ссылочные типы переменных (function, array, object)

[@sergeyvin1]

Если бы к каждой лекции, это было бы нереально круто

[@ВладимирЗахаров-х3ы]

Спасибо тебе большое, мир тебя не забудет)

[@ДинаИсаева-м1я]

Я даже не могу описать, как благодарна Вам за такой качественный материал! Спасибо, спасибо огромное! Пол-года мучилась, изучая по различным учебникам. Что-то было понятно, что-то совсем нет, в голове неразбериха, а здесь всё по полочкам, да ещё и доходчиво, для начинающих. СПАСИБО!

[@TimurShemsedinov]

Еще есть отдельный канал для начинающих kzbin.info и на нем я записал 14 из 20 коротких видео

[@ДинаИсаева-м1я]

@@TimurShemsedinov спасибо Вам!

[@АндрейФилиппов-з3и]

вы лишили меня сна, хочу все знать) Спасибо! мы с мозгом довольны)

[@antonparhom1251]

Спасибо Тимур Гафарович за интересную лекцию!

[@Seughton]

Если будут записи на каждый урок, это будет просто супер

[@TimurShemsedinov]

Будут, разве только сбой может быть, но тогда перепишу еще раз позже

[@Seughton]

@@TimurShemsedinov вообще супер, спасибо за Ваш труд

[@TimurShemsedinov]

Похоже к концу 2020 года будет 200 лекций

[@ЛасковыйПараллелограмм]

@@TimurShemsedinov сейчас 2022 год, лекций только 99, ждать ли остальные?

[@TimurShemsedinov]

@@ЛасковыйПараллелограмм сейчас 2022 год, на канале 228 видео, ну может не все лекции, но 200 точно есть, откуда 99?

[@stephaninabox]

Мне как человеку без технического образования очень помогают ваши лекции! Спасибо.

[@TimaGixe]

Чудова леція, дякую!

[@cassinid8843]

Спасибо большое за Ваш труд!

[@dm.hol.3624]

Огромное спасибо за альтруизм и качественный материал. Всё просто и понятно.

[@romakirilenko4263]

Тимур, спасибо Вам за труды. Наблюдение: после часа тема достаточно резко усложнилась, где речь пошла про this и про функции конструкторы, которые в ES6 уже назвали классами:) Надеюсь дальше Вы подробнее про все это расскажете и более плавно преподнесете. Ещё раз спасибо!

[@rokoss]

Спасибо, закрепил начальные знания, очень доступно объясняешь

[@ЕгорАндрианов-ш8в]

Спасибо вам за труды!

[@kamsamolets]

спасибо за труд !колосальная работа!

[@sengokusky1515]

Спасибо за лекцию.

[@dmitrijponkin]

Круто! Спасибо Вам)

[@fzbzr7489]

Здравствуйте. Спасибо за лекцию. На 1:02:26 оговорка: присвоение не "деструктивное", а "деструктурирующее" :)

[@HowManyShrimps-g7z]

спасибо за Ваш труд!

[@artem_travlo]

Все понятно !😁

[@vl6739]

Спасибо добрый человек

[@ИванМусинский-б8ш]

Escape-код ANSI - ANSI escape code Цвета 3/4 бита В исходной спецификации было только 8 цветов, и им просто давались названия. Параметры 30-37 SGR выбирают цвет переднего плана, а параметры 40-47 выбирают цвет фона. Довольно много терминалов реализовано «полужирным» (код SGR 1) как более яркий цвет, а не как другой шрифт, что обеспечивает 8 дополнительных цветов переднего плана. Обычно вы не могли получить их в качестве цветов фона, хотя иногда обратное видео (код SGR 7) позволяло это. Примеры: чтобы получить черные буквы на белом фоне, используйте ESC [30; 47m, чтобы получить красный цвет, используйте ESC [31m, чтобы получить ярко-красный цвет, используйте ESC [1; 31m. Чтобы сбросить цвета до значений по умолчанию, используйте ESC [39; 49m(не поддерживается на некоторых терминалах) или сбросьте все атрибуты с помощью ESC [0m. Позже терминалы добавили возможность напрямую указывать «яркие» цвета с 90-97 и 100-107.

[@АндрейФилиппов-з3и]

на 2 раз пересматриваю с разбором кода, в примере basics (colorize) 54:50 все не так очевидно, и кажется слова с кодом немного расходятся) ведь из объяснения может показаться, что мы итерируем массив с цветами COLORS [], но это совсем не так, мы его используем только для визуализации его длины COLORS.lenght === 8, цифры-комментарии в COLORS по сути только подсказывают какое общее количество элементов в массиве COLORS, это мы видим по последнему элементу, НО мы же оказывается перебираем только числа! color из ESCAPE-последовательности отдельно от массива COLORS, и вообще то там последовательность начинается с 0 (black) и заканчивается 7 (white)!!! и когда в конце 54:50 мы говорим, что начинаем с color = 1, как бы не с нулевого элемента массива, тем самым исключая черный, то это не так, мы не элементы массива начинаем с 1, а именно с кода цвета 1 (red) из ESC, и запись условия if (color > COLORS.length) color = 1; явно не совсем та, что задумывалась, так как в данном случае color явно в какой то момент будет присвоено число 8!!!, а оно соответствует по ESCAPE-последовательности Цвету по умолчанию, которого в массиве COLORS явно не указано, так оно у вас и получается, второе слово Aurelius начинается с зеленого!!! цвета по умолчанию, да и для тех кто будет разбираться, пробел между словами также считается символом, и в примере из видео 1 пробел после 1 слова Marcus принимает белый цвет, это важно учитывать при расчете) поэтому я бы условие для "рестарта" значения color сделал бы так: if (color === COLORS.length) color = 1; комментарии в массиве COLORS привязал к реальным значениям цветов в ESC, а длину массива бы просто проговорил словами) за материал СПАСИБО! я только учусь) PS. ниже в комментариях увидел, что рефакторили нумерацию, но от Магического Цвета по умолчанию под кодом 38 не ушли, ну и на черном экране у вас цвет букв сольётся, лучше с 1 для привязки к видео)

[@АндрейФилиппов-з3и]

"... эта функция, которая расширяет класс, который передан в эту функцию в качестве аргумента" ) уфф... на предпоследнем примере мозг чуть не взорвался, но все уже норм, разобрался) вообще очень крутой подход, легко быть и не должно, только через нагрев мозга может быть прогресс, это понятно) я весь день разбирал эту лекцию с записью кода в редактор, в принципе все разобрал по частям и все понял, НО я только только освоил базу по HTML и CSS, это никакого отношения к языкам не имеет, это только значит, что мне уже кое где встречался JS, кроме того я совсем немного вникал в синтаксис по электронному учебнику Кантора, плюс какие то примитивные задачки уже порешал на разных интерактивных курсах на циклы и условия for, while, if, также немного решал задачки типа "FizzBuzz") , просто для совсем новичков я думаю нужно что то еще типа подготовительных лекций) иначе эти примеры покажутся недоступной магией, но и понимаю, что лично вам не найти мотивацию на это, это как мудрецу преподавать алфавит школьникам, мне же такой подход зашел, я слышал про классы и стрелки, знал уже как объекты записываются и массивы, где то читал что стрелки очень популярны, и из примеров это видно, в чем их особенность конечно пойму позже, также полным новичкам наверное всегда будет непонятно, зачем такие сложные конструкции, когда в самом низу вызывается что то с 2 числами и они преобразуются тоже в 2 числа после элементарных каких то математических операций, но это я пишу для новичков, потерпите) это важно для понимания конструкций на простых примерах, я пока не понял зачем нужны классы, и зачем отделили от объектов, но интуитивно доходит, что на единожды созданный объект идет ссылка и чтобы его не менять, мы делаем каждый раз условно новый объект по шаблону, называемый классом, очень предположительно) вообще скорее это лекция звучит как Базовый синтаксис основных конструкций языка JS или Особенности синтаксиса языка JS. Спасибо за лекцию, вас было не просто найти, но опять же, может таким образом сюда и будут заходить только те, кому это действительно нужно.

[@Tormin_run]

Благодарочка)

[@feeler.2k]

Если кто-то не понял сразу какой-то из примеров, советую прослушать ещё раз. Мне помогло. :) Может быть пару раз и не сразу, если совсем ничего не понятно. Или попробуйте написать в гугл тот объект (слово/фразу), которое не понятно в коде.

[@realmanproject7529]

Это база

[@odarych]

Красавчик :)

[@vasyapupkin997]

44:37 ошибка в индексах цветов, black - это ноль, red - один, ..., white - 7 соответственно в условии должно быть if (color >= COLORS.length)

[@feeler.2k]

Добавьте пожалуйста в описание ссылку на репозиторий Reusable.

[@cobwowcobwow6331]

Спасибо!

[@mrpllaser9645]

12:54 Почему при counter 0-1 разница в показаниях 500, counter 1-2, 2-3, 3-4 разница в показаниях 501 , а далее опять 500?? Если этот код запускать на более мощной машине разница вычислениях значения времени будет другой ??

[@Doox911]

Я уже год пишу на js, и мне всё понятно. Но новичку очень тяжело понять вторую часть видео.

[@TimurShemsedinov]

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

[@MisaNia25]

Timur Shemsedinov я новичок ,но очень хочу научиться именно на этом языке

[@ОлександрКовальчук-й9е]

@@TimurShemsedinov я уже смотрел курсы другого человека ( уделил JS примерно 20 часов), но это всё понятно, разве что нужно запомнить и освоить некоторые нюансы (как работает некоторые методы). Спасибо. Буду углубляться с ноля! Может когда нибудь сменю работу) а то инженеры (работаю в газовой сфере) в нашей стране не зарабатывают нормально(

[@vip51000]

@@ОлександрКовальчук-й9е не откладывай

[@ms_freddy6142]

@@ОлександрКовальчук-й9е Как успехи ?)

[@shramko-dev]

incrementExpression выполняется после выполнения тела цикла, а вы сказали, что до. 20:57

[@ihorkazmin2989]

1:19:20 Не совсем понимаю каким образом изменяется значение object1 если это константа? P.S. Спасибо за уроки!

[@TimurShemsedinov]

Константная только ссылка на объект, а все его поля не константные

[@ihorkazmin2989]

@@TimurShemsedinov Понял, спасибо

[@Igor_UA]

Класс

[@СлавикЗаворотний]

Спасибо, что делаете такой огромный труд, да и с другими делитесь. Вот мне начинающему (может и не только мне) совсем не понятна последовательность. Как посоветуете смотреть?

[@TimurShemsedinov]

Под каждым видео ссылка на статью, в которой описана последовательность, а в моем канале есть плейлисты, начинать лучше с плейлиста HowProgrammingWorks: kzbin.info/aero/PLHhi8ymDMrQZad6JDh6HRzY1Wz5WB34w0

[@TimurShemsedinov]

После этого плейлист по асинхронному программированию, паттернам, функциональному программированию и по ноде.

[@sergeystarostin179]

23:55 const add = (a, b) => … a и b параметры, add(5, 2) 5 и 2 аргументы. Не большое уточнение и это важно не путать.

[@TimurShemsedinov]

Да, я и сам в лекциях на этом делал ударение. Хотя в js когда-то использовали псевдо-массив `arguments`, который по сути заменяет параметры, но из него читаются аргументы, и вообще его было бы правильнее назвать `parameters`, хотя сейчас это уже дела давно минувших дней...

[@luislucky6264]

Здравствуйте,у Вас есть видео лекции в текстовом формате ?

[@TimurShemsedinov]

Нет, но есть примеры кода от всех лекций тут: github.com/HowProgrammingWorks/

[@vovik815]

Лекции отличные. Можно попросить ссылку на код в описании видео?

[@TimurShemsedinov]

github.com/HowProgrammingWorks/Reusable

[@TimurShemsedinov]

github.com/HowProgrammingWorks/Cheatsheet

[@TimurShemsedinov]

github.com/HowProgrammingWorks/DataTypes

[@ВладиславСиденко-з5щ]

Только этот 1 урок у меня занял около 3 часов, вроде всё понятно, читаю, понимаю, что происходит. Но сам пока не могу написать/придумать что либо адекватное, это нормальное? Или это потому, что гуманитарий ?)

[@TimurShemsedinov]

Это норм, постепенно быстрее пойдет.

[@nexgenua]

в чем преимущество объявление класса const MyClass = class {} против class MyClass {}?

[@TimurShemsedinov]

Это равноценные способы, но у них есть особенности и их лучше применять в разных местах. const MyClass = class {}; можно делать внутри функций, когда нужно создавать новые классы каждый раз, когда вызывается функция. Особенности такого подхода: до присвоения класса не видно (нет всплывания идентификаторов), а если использовать let, то один идентификатор можно связывать с разными классами (подменять их при необходимости). А class MyClass {} виден сразу во всем файле или внутри функции, если объявлен в ней (всплывает). Применять этот метод можно когда мы создаем статический набор классов, не изменяемый во время работы. Если нам не принципиальны эти отличия, то методы в большей части случаем могут взаимозаменяться (на ваш выбор).

[@randomesischannel926]

Здравствуйте, Тимур. Просмотрев теорию про функции, я приступил к заданию из вашего репозитория. В нем сказано: создайте функцию, которая печатает приветствие и имеет один аргумент - name. Насколько я понял, то аргументом функции является значение передаваемого идентификатора после вызова функции, т.е. фактическое значение. Параметром же является формальное значение передаваемого идентификатора при создании функции. Увидев решение, я окончательно запутался. Хотелось бы прояснить данный момент.

[@randomesischannel926]

​@Андрей Сукач Разобрался. Оказалось, hello - функция, name - параметр, но никак не аргумент, т.к. функция не вызывалась. Проблема была в терминах задания, надеюсь. Update: ${name} - аргумент объекта. И так как функция - это объект, то в этом контексте можно использовать определение name как аргумента объекта, но не функции. Уж слишком двусмысленно это.

[@sevgenberg585]

В чате можно технические вопросы задавать?

[@TimurShemsedinov]

Там ссылка на телеграм группу, в ней задавайте вопросы

[@alexanderkabolov6145]

Подскажите, какой редактор используете?

[@TimurShemsedinov]

Редактор не важен, но это mcedit из файлового менеджера mc, он есть почти для всех ОС, например, в Федоре ставим: dnf install mc

[@rvolik]

Дякую!

[@АндрейДемаков-я1л]

IEEE часто читается как ай трипл и. Символ ` это машинопи́сный обра́тный апостро́ф (гравис). К кавычкам не относится, но используется похожим образом т.к. было принято такое соглашение в js.

[@sevgenberg585]

Да лекции действительно классные, единственный недостаток, который был, это то что на них тяжело попасть.

[@TimurShemsedinov]

Почему же? Специально на 5 пару перенес, а сложные лекции вообще на 7 вечера, чтоб люди с работы доехали. Вот записывать вроде выходит, буду все писать.

[@AlessandroLevis]

Спасибо за запись, в офлайне не выходит попасть

[@vitalaskompulat5053]

те, кто мало что понял не злитесь и не ставьте дизы, а лучше возьмите учебник по информатике 11 класс а.г. гейн и прочитайте, сразу многое поймете. Весь читать не обязательно: возьмите главы по алгебре логике, по системам счисления, кодированию информации, графам, память компьютера (если есть там не помню).

[@uaplatformacomua]

🔥🔥🔥

[@myroslavtkachenko3289]

Извините, но Вы ранее говорили о важности терминологии, а тут сами уравниваете значения терминов "параметр" и "аргумент", что на самом деле не совсем одно и то же. А так вообще все круто, конечно. Это уже похоже на то, как основы программирования для CS фрешменов и преподаются в "больших" университетах

[@TimurShemsedinov]

Аргументы - это значения, пепедаваемые параметрам при вызове. Но для джаваскрипта эти понятия почти неразличимы, в старой версии языка (и долго еще будет поддерживается) у функций псевдо-массив arguments со значениями параметров, хоть и сами параметры будут содержать те же значения и при помощи rest оператора можно все или часть аргументов в один параметр забрать. Различение этих слов ничего нам в js не добавляет.

[@konstantinkudelko7545]

Спасибо большое за ваш труд! Я вот думаю, что скорее всего сегодня наименование констант не обязательно CAPITAL_CASE, так как этот паттер был добавлен при старом VAR, чтобы разработчики понимали, что эту переменную перезаписывать нельзя, сегодня же есть очевидное разграничение const | let => константу можно называть без CAPITAL_CASE. Как вы думаете?

[@TimurShemsedinov]

Смотря что за константа, если это значение, которое мы кладем в глобальный контекст, необходимое в разных частях кода и объявленное один раз, например DEFAULT_TIMEOUT, FILE_NOT_FOUND или SERVER_PORT, то CAPITAL_CASE дает возможность визуально отделить такие вещи. Но если это локальный идентификатор, объявленный при помощи const, то он может быть и lowerCamelCase, например: const openDatabase = (database, callback) => { /* code */ };

[@jamjam3337]

👏

[@redlse]

Так жалко, что плохой звук

[@cosmic_snot]

а в каком редакторе пишет автор?

[@TimurShemsedinov]

Midnight

[@cosmic_snot]

@@TimurShemsedinov спасибо

[@АндрейКотомкин-о9ю]

Может быть, стоит в этом массиве github.com/HowProgrammingWorks/Cheatsheet/blob/master/JavaScript/1-basics.js#L7 нумерацию в комментариях начать с нуля? Тогда она будет совпадать и с нумерацией элементов в массиве, и с ansi-кодами. Код чёрного цвета, например, это 30, а не 31, как можно подумать, глядя на код.

[@TimurShemsedinov]

Да, спасибо! Исправил github.com/HowProgrammingWorks/Cheatsheet/commit/fb445b430672f1687343a91f6d26e272fe7b980c

[@vitaliy.artyukh]

было бы здорово иметь один цикл и в первом блоке через запятую или в деструкторе указывать итерируемый объект и индекс и не запоминать когда in, а когда of, но нет, мы должны страдать))

[@YouMeNow88]

ахахахахахахахахахха дети 12-13 лет с первого раза осваивают код в котором: стрелочные функции,обьекты,таймеры и интервалы,циклы и условные операторы))) Чей ребенок это понял с первого раза дайте знать))))

[@TimurShemsedinov]

А они не привыкли еще к ключевому слову function, синтаксис => ни чем не сложнее, это только привычка

[@AleksSergeevich]

Я конечно дико извиняюсь. Но для человека начинающего изучать программирование, ваша лекция - это жесть!! Вы с ходу начинаете грузить константами блоками циклами функциями и еще упоминаете область видимости, совершенно не утруждаясь объяснять что это, для чего и какой имеет синтаксис. Мне жаль ваших студентов. Для начинающих программировать, для начинающих изучать JavaScript - я бы не советовал слушать эту лекцию. А для продолжающих - скучно.

[@TimurShemsedinov]

Синтаксис не важен, его можно за час освоить из любого учебника или справочника, как, например из MDN. Это может и должно быть самостоятельно освоено. Я рассказываю то, чего в справочнике не найдешь - как правильно думать об этом синтаксисе.

[@AleksSergeevich]

@@TimurShemsedinov Благодарю за ответ. Но, видео называется "Базовый синтаксис JavaScript" и рассказываете вы так же и про синтаксис тоже. Но очень разорвано. Ожидаемое не совпадает с полученным. Если подразумевается уже наличие знаний синтаксиса js, то и всю лекцию можно было бы построить совершенно по другому. Однако, судя по лекции вы пытаетесь это совместить. На мой взгляд, получилось совсем не очень. Я бы ничего не понял. Но это мое ИМХО.

[@TimurShemsedinov]

Согласен, первые 2 лекции нужно переделать, способ донесния мне и самому не нравится. Сложные темы у меня выходят гораздо лучше, я об этом уже писал на хабре.

[@totsamiyparen123]

Если Вы хотите результата-выходите из зоны комфорта.Ведь в любой момент можно остановить и загуглить о том,чего не понимаешь,и получить краткую информацию. Да,согласен,тут разбираются достаточно сложные вещи для уровня новичка,но там ведь сказано,что по ходу курса все станет ясно и будут даны все ответы. Тут,на ютубе, полно видео,рассказывающих про синтаксис и как буквачки обзывать,но от них нет никакого толка по своей сути. Это хороший курс для желающих думать с первого занятия

[@AleksSergeevich]

@@totsamiyparen123 Разумеется, уровень восприятия у всех разных. Я лишь выразил свое мнение, тем более что лектор оставил ссылки на хабре. Теперь по вашему комментарию. 1) Видео называется "Базовый синтаксис JavaScript". Человек ожидает услышать именно то, что написано в заголовке. Однако получает ... не понятно что получает. 2) "Да,согласен,тут разбираются достаточно сложные вещи" - не согласен. Ничего сложного не разбирается. Я говорил о сложности восприятия лекции человеком который хочет понять базовый синтаксис js. И по ходу курса не даны все ответы, а откладывания на потом(в будущих сериях), не понятно тогда зачем они были введены сейчас. Куда делась последовательность. 3) "Тут,на ютубе, полно видео,рассказывающих про синтаксис и как буквачки обзывать" безусловно! Но вот например в 6:10 лектор рассказывает "вот так выглядит функция ... " - то есть подразумевается, что слушающий не знает как выглядит функция, а если не знает, то все будущее ему не понятно. Если подразумевается что слушащий знает о функциях, то этот пример ему не нужен и он слишком примитивен для него, а если не знает, то о синтаксисе он так и не узнает из лекции. Из чего мне не понятна целевая аудитория слушающих. 4) "Это хороший курс для желающих думать с первого занятия" - вот это мне и не понятно. Какая главная мысль была в этой лекции. Конечно я понимаю, что критиковать ума много не надо. Возможно это связано с моим личным восприятием. Но я искренне не понимаю ценности этой лекции.

[@ДмитрийСорока-х5ц]

Смешались в кучу кони, люди,скрипты..........Зачем лепить горбатого?......

[@КонстантинШкилёв]

Зачем вообще с самого начала, показывать эти стрелочные функции...

[@TimurShemsedinov]

Потому, что это основной вид функций, а ключевое слово function можно как раз не с начала учить, а уже когда до прототипов дойдут.

[@Antonio-fm1sq]

Спасибо!