Speaker A
Всех приветствую. Это вводный урок по JavaScript, к которому мы сможем возвращаться в будущем, чтобы напомнить себе, как работает та или иная сущность.
Вводный урок по основным сущностям JavaScript: переменные, функции, комментарии и работа браузера с кодом.
Ask about this video. Answers come from its transcript only — with the timestamp, so you can check them.
Generated from the transcript and can be wrong — check the timestamp.
Key Takeaways
- JavaScript отвечает за поведение и интерактивность веб-страниц.
- Браузер выполняет JavaScript построчно, сверху вниз, используя встроенный движок.
- Комментарии помогают разработчикам понимать и документировать код, а также временно отключать его.
- Для работы с сервером и динамическими данными JavaScript незаменим на фронтенде.
- Подключение внешних скриптов и использование Dev Tools — важные навыки для веб-разработчика.
What the video covers
- Обзор роли JavaScript в веб-разработке: оживление страниц, взаимодействие с пользователем и работа с сервером.
- Принцип работы браузера с HTML и JavaScript, включая загрузку файлов и выполнение кода построчно.
- Использование console.log и функций с задержкой для демонстрации порядка выполнения кода.
- Объяснение комментариев в JavaScript: однострочные и многострочные, их назначение и применение.
- Пояснение важности JavaScript-движка в браузере и необходимости компиляции других языков в JavaScript.
- Примеры создания и подключения скриптов в HTML, работа с Dev Tools для отладки.
- Рассмотрение комментариев как инструмента для документации, временного отключения кода и пояснения логики.
- Подчёркивание, что без JavaScript страницы были бы статичными и неинтерактивными.
- Обещание дальнейшего изучения более сложных тем и практических примеров в следующих уроках.
Chapters
- 00:00Введение и роль JavaScript в веб-разработке
- 06:05Порядок выполнения кода и работа с console.log и alert
- 12:46Комментарии в JavaScript: виды и применение
- 18:09Работа браузера с HTML и JavaScript, подключение скриптов
- 23:57Использование Dev Tools для отладки и анализа
- 27:14Значение JavaScript-движка и компиляция других языков
- 31:37Заключение и анонс следующих тем
Full Transcript — Download SRT & Markdown
Speaker A
Сегодня мы разберём довольно-таки примитивные темы, такие как переменные, функции и прочее. То, что, в общем, нам надо для старта. А дальнейшие более сложные темы мы уже будем разбирать по ходу обучения.
Speaker A
Мы уже знаем с вами, что JavaScript — это язык программирования, который делает нашу веб-страницу живой. То есть, если HTML отвечает за структуру, это наш скелет страницы, CSS отвечает за внешний вид, то JavaScript отвечает за поведение. Например, HTML создаёт
Speaker A
кнопку. Вот у нас есть там кнопочка, а CSS добавляет ей какие-то тенюшки, красит задний фон. А JavaScript делает так, чтобы при нажатии на эту кнопку у нас что-то происходило, например, какое-то действие. Вот. А по итогу JavaScript нам нужен для того,
Speaker A
чтобы реагировать на действия пользователя, такие как клик, там вот текста, когда что-то пишу в input для заполнения, например, регистрация, прокрутка страницы вверх-вниз, вот как здесь.
Speaker A
Там, ну или же просто когда я ввожу мышкой или что-то перетаскиваю, чтобы менять содержимое страницы, например, а мы откуда-то получаем данные и загружаем их и отображаем для пользователя. Там, например, когда вы заходите на страницу с погодой, там у вас очень-очень
Speaker A
много разных данных о погоде. Мы можем создавать также какие-то анимации, какие-то миниигры и так далее, и так далее. Вот. Ну и в целом, чтобы общаться с сервером. То есть важно понимать, что все данные приходят к нам с бэкэнда. То есть
Speaker A
база данных — это наш сервер, а фронтенд — его задача, то есть получить эти данные и как-то использовать.
Speaker A
Например, даже возьмём тот же сайт с погодой. Вот эти все данные о погоде хранятся в базе данных.
Speaker A
Цель фронтенд-разработчика — из какого-то списка, набора цифр и строк превратить это в какую-то красивую картинку. Вот как мы делали с вами с продуктовыми карточками. Вы же не будете там 1000 карточек переписывать вручную.
Speaker A
Нет, мы один раз создали шаблон. Вот. И дальше он будет уже автоматически заполняться. Вот. Ну, об этом тоже уже на следующих уроках.
Speaker A
А так, мы с вами разобрались, зачем нужен JavaScript. Теперь нужно понять, как браузер обрабатывает JavaScript.
Speaker A
Вот что он делает. Браузер получает HTML-файл. Вот мы с вами создавали index.html. Браузер отправляет запрос на сервер и в ответ получает вот этот HTML-файлик, который мы написали, и начинает читать его сверху вниз построчно.
Speaker A
Вот когда вы открываете сайт, браузер получает HTML-файл. В HTML-файле встречается тег script. Давайте мы сейчас с вами будем это делать. Одну секунду.
Speaker A
Так, вот наш index.html. Мы с вами добавляем такую небольшую структуру. Так, продублируем наши строки и добавляем к script.
Speaker A
Всё, в принципе, то, что мы делали. Добавляем файлик script.js и подключаем его. Так. И давайте запустим наш сервер.
Speaker A
Так, вот наш index.html, то есть всё, что я написал в нём, вы вывелось. А как оно вывелось? Вывелось оно, сейчас покажу. А вот я зашёл в Dev Tools. Dev Tools — это консоль разработчика. Здесь мы можем видеть консоль, какое-то DOM-дерево и сеть, то есть запросы, которые выполняет браузер. Вот здесь мы видим, что сервер, точнее наша веб-страница, была загружена, то есть браузер загрузил index.html-файл. Вот URL запроса какой? То есть он взял IP-адрес, взял
Speaker A
файлик, сделал запрос GET, то есть получить. Вот. И в ответ получил вот такой HTML-файл. Всё, что мы писали внутри VS Code.
Speaker A
Вот. То есть здесь мои span и script.js вот. То есть браузер загрузил HTML, увидел script и загрузил вот этот script.js. В моём случае это какой файлик? Это main.js, да, script.js. Вот. Всё правильно. Итак, по итогу выполнение кода
Speaker A
происходит построчно, сверху вниз. Давайте мы с вами напишем какую-то команду. Например, я напишу console.log какой-то тест и сообщение.
Speaker A
А так как у нас выполнение кода происходит сверху вниз, значит, сначала у меня выводится console.log, а потом выводится сообщение. Давайте проверим.
Speaker A
Так, всё, обновляем страничку, смотрим. Ну, так как они просто выполнились очень быстро, они практически выполнились мгновенно, но всё-таки console.log был первым. Можно добавить такую функцию, которая чуть-чуть позже, на одну секунду, выведет нам alert.
Speaker A
Вот смотрим. Вывелась консоль. Через секунду вывелось наше окошечко. Вот так. По итогу что мы имеем?
Speaker A
Браузер имеет такой, грубо говоря, встроенный мозг — мозг, то есть JavaScript-движок. Браузер понимает только этот язык. Это стандарт нынешних браузеров.
Speaker A
Можно использовать и другие языки программирования, но всё равно всё сводится к тому, что если вы будете программировать сайты, например, на каком-то другом языке, то вам придётся его компилировать, то есть переводить в JavaScript, потому что браузер понимает только JavaScript,
Speaker A
больше никаких других языков. Итого, если бы наш сайт был без JavaScript, наши сайты были бы просто статическими картинками без реакции, никаких действий бы не происходило. Вот так.
Speaker A
Следующая тема, которую мы с вами разберём, — это комментарии. Что такое комментарии в JavaScript и зачем они нам нужны? Комментарии — это кусок текста в коде, который не выполняется браузером. То есть браузер игнорирует комментарии. Они нужны нам только для
Speaker A
того, чтобы понимать, что делает код. То есть, грубо говоря, это подсказки для других разработчиков, для людей и так далее. Например, давайте мы с вами напишем какой-то комментарий, сделаем console.log, там "Hello World", и напишем комментарии. Вот
Speaker A
записывается он таким образом. Ставим два слэша, и дальше вся строка является комментарием. Мы можем здесь писать неограниченное количество символов. Вот, например, данная строка нужна для того, чтобы вывести console.log. Вот. То есть браузер наш
Speaker A
комментарий игнорирует и выполняет только console.log. Вот это один из вариантов, как писать комментарии. То есть это называется однострочный комментарий и используется чаще всего.
Speaker A
Есть у нас возможность создавать многострочный комментарий. Пишется он таким образом: вот так и вот так закрывается. То есть очень-очень похож на комментарии в HTML. Здесь они выглядят таким образом.
Speaker A
Вот в JavaScript вот таким. Ну, в основном используются однострочные, потому что комментарии никто не пишет.
Speaker A
Вот здесь мы можем писать уже на несколько строк комментарии. Например, строка один, строка два и строка три. То есть всё, что находится между этих скобочек, между этими, как это называть, слэш-звёздочка. Вот это тело нашего комментария, и оно может растягиваться на много-много строк. И, соответственно, то же самое. Могу написать какой-то console.log, и это всё будет работать и выводиться. Всё по порядку, а комментарии игнорируются.
Speaker A
Если мы попробуем закомментировать несколько строк, как это делается, нам нужно их выделить, зажать Ctrl и нажать слэш. Слэш находится возле правого шифта на клавиатуре. Зажали. Вот. Ну, он комментирует это как однострочные в виде одной строки, вот как однострочные
Speaker A
комментарии. Поэтому чаще всего вы будете использовать именно их. Вот такой формат используется для документации. То есть когда вы будете устанавливать библиотеки, это код, который был написан другими разработчиками, и они хотят описать этот функционал, они его
Speaker A
записывают, соответственно, вот в таких блоках. Вот. Итого, что мы имеем? Комментарии нам нужны для пояснения логики. Мы можем использовать их для описания документации. Мы можем использовать их для временного отключения кода. То есть, если я сейчас оставлю вот такой закомментированный
Speaker A
код, он у меня не выполнится. То есть мы таким образом можем проверять сами, работает ли, отключить, посмотреть и так далее. Что мы ещё можем? Мы можем оставлять комментарии для других разработчиков, что, в принципе, делается очень редко. Вот. И, наверное, э...
Speaker A
записывают, соответственно, вот в таких блоках. Вот. Итого, что мы имеем? Э комментарии нам нужны для пояснения логики. Мы можем использовать их для описания документации. Мы можем использовать их для временного отключения кода. То есть, если я сейчас оставлю вот такой закомментированный
Speaker A
код, он у меня не выполнится. То есть мы таким образом можем проверять сами, работает там, отключить, посмотреть, вот, и так далее. Что мы ещё можем? Мы можем оставлять комментарии для других разработчиков, что, в принципе, делается очень редко. Вот. И, наверное, э чаще
Speaker A
всего комментарии используются для подсказки, подсказки для будущего. То есть, а мы можем, например, забыть, что там написано, вот или мы забыли что-то сделать, или как вообще самый самый частый вариант использования комментариев. Например, вам по работе нужно очень-очень быстро
Speaker A
написать какой-то функционал, но э если вы делаете это быстро, соответственно, сделать качественно вы это не можете.
Speaker A
Поэтому вы можете писать вот такие записи, например, to do там remove, там в основном пишется вот такие комментарии однострочные, то есть toду - это задача remove убрать. То есть, например, на данный момент у нас нет времени там этим
Speaker A
заниматься. Мы себе оставили комментарии и на будущее пометили, что это нужно будет удалить или там, например, туду фикс там пофиксить. логику какую-то и так далее, и так далее.
Speaker A
А вот и по итогу какое у нас заключение? Э очень важно понимать, что э нельзя оставлять закомментированный код.
Speaker A
Пулреквест должен быть всегда без комментариев. исключение. Только вот это вот. Это единственный вариант, когда вы можете оставить ко комментарии аэ внутри пулреквеста. Ни э в шаблонах, то есть индекс, ни в HTML-файлах, ни в CSS-файлах, ни в jazz-файлах, вы не
Speaker A
должны оставлять комментарии. Вот это вы уже будете юзать на работе, на менторинге. Сейчас это не юзается.
Speaker A
Давайте сразу обозначим, что в дальнейшем, так как вы на этапе обучения, вы опять-таки можете себе оставлять какие-то подсказки в коде, и я вам разрешаю их оставлять.
Speaker A
Вот. Но именно подсказки, не просто комментировать код, а вы можете написать себе там взяли и написали там этот код выполняет то-то, то-то или какое-то объяснение.
Speaker A
Вот и всё. Других вариантов не дано, пожалуйста, комментарии - это табу. Мы их вообще не оставляем.
Speaker A
Исключение - это, соответственно, наш менторинг, там, где у вас будет просто какие-то подсказки. На работе этого делать нельзя. Вот.
Speaker A
Вот так. Следующая тема, которую мы с вами разберём - это типы данных. Что такое тип данных? Это то, какую информацию хранит переменная. Например, мы можем хранить число, это возраст, цена, какое-то количество.
Speaker A
Можем хранить текст, это имя, сообщение какое-то и так далее. Можем хранить логическое значение, да или нет, и так далее, и так далее. Можем хранить вообще всё. А давайте перейдём сейчас, создадим с вами textфайл, будем записывать наши типы данных.
Speaker A
Первый тип данных - это number, то есть это наше число. Вот выведем с вами число там 10, например. Что будет? Вывелось число 10. Как оно помечается? Оно помечается фиолетовым цветом. То есть в консоли мы видим, что это именно число,
Speaker A
а не строка. Вот если я попробую это написать строкой, здесь цвет изменился. Соответственно, таким образом мы можем с вами различать строка перед нами или число.
Speaker A
Вот, в целом мало что можно рассказать про данный тип данных. То есть всё максимально примитивно, просто храним числа. Вот и всё. А есть у него спецзначение, называется оно NAN. Что такое Nн? Nн - это результат математической операции, которую мы не можем посчитать. Пример.
Speaker A
Если мы с вами попробуем 0 поделить на 0, данная математическая операция невозможна соответственно JavaScript возвращает нам N. То есть это посчитать нельзя.
Speaker A
Вот. То же самое будет, если мы с вами попробуем, например, строку поделить на число, мы тоже с вами получим nн. То есть такое не считается. JavaScript выдаёт нам данный тип, данное значение, точнее, это всё-таки number число.
Speaker A
Следующий тип - это строка. Здесь всё также примитивно, просто какая-то строка, которую мы сюда записали, и она выводится к нам в консоль. Даже если я возьму число и запишу в кавычке, а это ключевой момент, то есть строка, что что делает, например, из
Speaker A
числа строку? Это кавычки одинарные или двойные, вообще без разницы. То есть всё, что написано внутри таких кавычек, является строкой. Вот эта строка, она вот помечается таким, ну, самым обычным белым цветом. Вот опять-таки здесь тоже мало что скажешь, примитивный тип. Можем
Speaker A
выводить здесь какие-то сообщения, там Hello World и ничего такого. Вот. Следующий тип - это булин.
Speaker A
Это логический тип, то есть это какое-то утверждение или вопрос. Я думаю, вы все слышали про true и false. Вот. То есть правда или ложь, истина или ложь. Все это слышали. Вот. То есть мы с вами можем создавать какие-то утверждения,
Speaker A
вот, и на основе этого работать с ними. Вот дальше мы с вами с ним поработаем.
Speaker A
Пока вот просто запомнили. Это логический тип. Следующий тип - это undefined. Что такое undefined?
Speaker A
Undefined - это неопределённое значение. То есть, например, я знаю, что переменная есть, но я не знаю, чему она равна. Это и есть undefined. Например, приведу вам аналогию из жизни. Там у вас день рождения, вам принесли подарок.
Speaker A
Вот. И вот вы как бы видите, что подарок перед вами, но вы не знаете, что внутри.
Speaker A
Это и есть наш undefined. Вот и всё. То есть это значение, которого мы не знаем.
Speaker A
Следующий тип - это нал. Нал - это пустое значение. Наме намерено пустое значение. То есть мы говорим явно здесь ничего нет. Например, я с вами Давайте мы с вами создадим переменную.
Speaker A
Одна будет undefine, другая n, соответственно. И давайте так просто выведем их в консоль. То есть здесь я просто-напросто не знаю, какое хранится значение. А здесь я намеренно указываю, что здесь просто пусто. Здесь ничего нет. Вот и всё. С
Speaker A
вами смотрим. Ну, оно помечается вот таким тёмно тёмно-серым цветом. Вот. Запоминаем. То есть здесь а не знаем.
Speaker A
Вот будем такой краткий конспектик писать. Не знаем, здесь пусто. Число, строка, логический тип. Так, следующее, что мы с вами разберём - это символ.
Speaker A
Это у нас уникальный идентификатор. Он используется редко. Я даже не уверен, что вы все за свою карьеру хоть раз будете использовать данный тип данных.
Speaker A
Вот. Аа давайте мы с вами попробуем что сделать. Вот мы создадим уникальный идентификатор и засунем туда единичку. И сделаем то же самое со второй нашей константой.
Speaker A
И попробую сравнить их между собой. Вот. То есть 3 равно означает сравни переменную и эту переменную. О, я тут двоечку написал. Должна быть единичка.
Speaker A
То есть они у нас как будто бы вот мы смотрим, они у нас одинаковые, но при этом при сравнении мы с вами получим false. Fse то есть ложь. Я я сравнил, спрашиваю, а является ли тест один? Он равен тест два. И вот он не является.
Speaker A
Хотя, казалось бы, они абсолютно одинаковые, но при этом они разные, потому что символ он уникален. Вот. Даже если там хранится одинаковое значение, вот можно вообще на него внимания не уделять, ээ потому что вряд ли вы, опять-таки будете его использовать. Его
Speaker A
можно просто знать, что он существует и и всё. Вот следующий тип данных - это Big INT. Это очень большое число. То есть обычный тип number, он может хранить число до вот такого значения.
Speaker A
Вот. Если нужно больше, мы используем big in. Давайте мы с вами даже в интернете посмотрим, что это за такое число. Вот оно. Ну, то есть оченьоченьочень много знаков вот чисел.
Speaker A
Вот. Ну, допустим, мне нужно больше. Для этого что мы делаем? Мм, допустим, я создам переменную и помещу туда наше число вот какое-то такое и выведу его в консоль.
Speaker A
Вот мы видим, что оно помечено как число. Но вдруг мне надо больше. Вот если я с вами напишу очень-очень много, что будет? Вот получится что-то такое, что-то непонятное. Но это неправильно.
Speaker A
Мы должны пометить это как big in, то есть это отдельный тип. Помечается он с помощью буквы N на конце нашего числа.
Speaker A
Вот. То есть мы его сейчас превратили в большое число. Вот. И, соответственно, оно здесь меняет цвет.
Speaker A
Вот. Вот это правильный вариант записи больших чисел. Опять-таки очень-очень редко используемое. Не факт, что вы даже его будете использовать. Вот это примитивные типы данных. Их всего семь.
Speaker A
Восьмой. И самый последний тип данных - это объект object. Сейчас опять-таки запишем здесь шпаргалку.
Speaker A
Уникальный идентификатор, то есть, можно сказать, ID и big in. Очень большое число. Объект - это у нас уже не примитивный тип данных, как предыдущие сем.
Speaker A
Это объект, и он имеет свои подвиды. Этих подвидов настолько много, что я их сейчас даже перечислить себе не смогу.
Speaker A
То есть это массив, array называется, объект, сам object, а функция и так далее, и так далее. То есть их действительно очень-очень много. Вот. То есть основных тип типов данных в Джаваскрипте у нас восемь. Вот опять-таки эти два практически никогда
Speaker A
не используются, поэтому вы будете работать с шестью вот вот этими, которые я сейчас пытаюсь выделить. Вот. Ну, в общем, вот они вот вот эти опять-таки не используются.
Speaker A
А если используются, очень-очень редко. А дальше, дальше, э, про что я вам скажу, это про динамическую типизацию. Что такое динамическая типизация? Это означает, что тип переменной определяется во время выполнения программы, а не заранее, когда мы пишем код. То есть JavaScript,
Speaker A
он не требует, чтобы мы указывали тип перемены при создании. Вот переменная, она может менять свой тип в процессе выполнения. Ну вот здесь я сейчас вижу, что здесь хранится, например, число, да, вот это bigint. Давайте что-то попроще напишем. 1 2 3. Вот JavaScript, он у нас
Speaker A
язык с динамической типизацией, то есть или как называют со слабой типизацией. Что это значит? Что пере переменные они не привязаны к типу. Тип определяется вот этим значением, которое ээ хранится в этой переменной. Вот.
Speaker A
Когда мы с вами будем работать с тайпскриптом это соответственно уже надстройка над Javaтом. Вот. То есть это, грубо говоря, тот же JavaScript, только со строгой типизацией. Мы с вами будем строго типизировать перемены. Например, писать вот такой код. Вот видите, заметки с
Speaker A
типа можно использовать только в тес-файлах. Ну, сейчас, в принципе, не об этом. Сейчас мы с вами разбираемся с Джаваскриптом. Давайте посмотрим на Яву.
Speaker A
А я создам переменную там value, например, и запишу сюда число 123 и попробую узнать его тип. Я напишу typeof - это ключевое слово, которое позволяет узнать тип переменной. Вот. И потом возьму и перезапишу это значение на строку. И опять так же
Speaker A
само выведу его в консоль. Что мы с вами увидим? Number и string. То есть в момент, когда вы выполнился консоль log, value был числом. Когда выполнился второй консоль log, он выполнился после того, как я перезаписал значение, оно стало строкой. Вот это означает итог.
Speaker A
Подводим с вами итог. Это у нас динамическая типизация, то есть слабая, и это минус. Вот поэтому мы с вами поэтому мы с вами будем писать на тайпскрипте.
Speaker A
Вот. Дальше тема, про которую хочу вам рассказать - это преобразование типов. Это такой процесс, когда JavaScript меняет тип данных значения с одного на другой. То есть наша строка пять, она может стать числом пять.
Speaker A
Вот. или наоборот. Вот. А давайте с вами напишем, например, да, существует у нас вообще два вида преобразования: явная и неявное.
Speaker A
А явное - это когда мы, разработчики, сами преобразовываем тип. Например, у меня есть сейчас строка пять. Вот вывелась пятёрка. Я хочу, чтобы моя пятёрка стала числом. Для этого у меня есть два варианта. Либо я пишу вот такую запись, то есть number. И, э, вот это
Speaker A
number, она принимает себя значение. Вот я передал пятёрочку, и она из строки пять сделает мне число. Вот вывелось пять. Или же могу записать вот такую кратенькую конструкцию. Просто перед строкой поставить плюсик.
Speaker A
Вот вывелось пять. А возникает вопрос: а что, если передать сюда, допустим, текст, а не какое-то число? Появляется Nн, который мы с вами разобрали.
Speaker A
Вот. Потому что данная математическая операция у нас невозможна. Мы не можем привести а строку от данную или вообще любую к числу.
Speaker A
Вот это было явно. А что, что мы ещё с вами можем сделать? это взять число, преобразовать в строку. Для этого пишемстрин. Вот. И при и внутри круглых скобочек указываем число. И, соответственно, получаем строку.
Speaker A
Вот и всё. Это было явное преобразование. Что такое неявное? Это когда JavaScript сам определяет тип, он делает это автоматически.
Speaker A
Вот например а здесь в целом всё просто. А если у нас есть плюс, JavaScript старается привести всё к строке. То есть пишем плюс, приводится всё к строке. любые другие математические какие-то операции, например минус э-э умножение деление, больше, меньше, сравнение, вот это всё
Speaker A
приводится к числу. Э как это выглядит на деле? То есть, если я попробую пятёрку умножить на двойку, что я сейчас получу в консоль log? Вот давайте мы с вами сделаем так и сделаем так.
Speaker A
Поставьте видео на паузу, попробуйте подумать и понять, что у нас выведется в консоль логи.
Speaker A
Вот ставьте на паузу, думайте, а я уже показываю результат. Вот мы получили вот такие записи. 10 как число и 52 как строку. То есть опять-таки руководствуясь данной э подсказкой, если у нас есть плюс, то JavaScript выполняет неявное преобразование, преобразуя а двоечку к
Speaker A
строке. Но если у нас другая какая-то математическая операция, то есть оператор, вот это называется оператор, у нас оператор - это не плюс, тогда он наоборот попытается пятёрку привести к числу. Ну и, соответственно, умножает эти два числа. Вот и всё. Э также в
Speaker A
целом мы можем использовать преобразование в логический тип не только вот строка, число, но есть ещё и логическое преобразование. наш булин.
Speaker A
Соответственно, как это будет выглядеть? А если мы с вами попробуем привести к булину, вот таким образом мы пишем. То есть есть у нас ой, есть у нас number, есть у нас string и есть у нас buan. Мы уже знаем, что для
Speaker A
короткой записи number можно использовать просто плюс. Для булина можно использовать вот такую запись. Два восклицания, то есть она приводит значение к булиану. Как это будет выглядеть?
Speaker A
Я с вами на сейчас попробую. Давайте ноль. Давайте поместим ноль и попробуем привести это к логическому типу. Что мы с вами получаем? Мы получаем false. Почему? Потому что так работает JavaScript. То есть такие значения как ноль, аэ, пустая строка,
Speaker A
null undefined n false. Это всё пустые значения. Вот, можно сказать, ну, пустые, нулевые, называйте, как хотите. И она равнофSE, если это всё приводить к к логическому нашему типу. Все остальные значения у нас являются true. И это вот желательно
Speaker A
запомнить. То есть, если я попробую не ноль, а единичку написать, у меня будет true. Или если я помещу пустую строку, будет fфse. Но если я поставлю пробел, то есть всё, у меня здесь есть символ, строка уже не пустая, там хранится
Speaker A
пробел, я получу true. Вот. То есть это наши пустые значения, мы их запомнили, и мы будем знать. это нам пригодится.
Speaker A
Вот. Ну и та то же самое, если вот вместо булина напишу два восклицательных знака, оно всё работает. Всё работает.
Speaker A
Так же само всё работает. Всё хорошо. Так. Дальше как следующую такую подтему типов данных, которые мы с вами разберём, это операторы сравнения. У нас существует два вида сравнения.
Speaker A
Нестрогая это 2 равно и строгое 3 равно. А не путать с одним равно. Один равно - это присвоить значение.
Speaker A
2 и 3 равно - это уже сравнение. Вот. А при нестрогом сравнении вот этом JavaScript он автоматически приводит типы перед сравнением. То есть, если мы с вами попробуем сравнить пть и пть, вот мы с вами сравниваем число и строку, что мы с
Speaker A
вами получим? Мы получаем true, потому что он сравнивает только значение. Здесь пятёрка и здесь пятёрка. Ага, всё хорошо.
Speaker A
То же самое, если мы с вами сравним, например, тот же самый один и true, например, тоже или ноль и false.
Speaker A
Так как мы помним по данной вот подсказке это пустое значение, и, соответственно, мы не строго их сравниваем. То есть тоже true, правда, это одинаковые вещи нам JavaScript говорит. И в чём, соответственно, здесь проблема? Из-за вот этого неявного приведения типов,
Speaker A
которые делает JavaScript, у нас возникает очень-очень много неожиданных проблем. Поэтому, в реальном коде два равно никто не использует. Все используют три равно. То есть строгое сравнение, мы всегда строго сравниваем значение. И теперь, если я попытаюсь сравнить пятёрку число и пятёрку строку, я получу флse.
Speaker A
То есть что у нас делает строгое сравнение? У нас сравниваются и значения, и тип данных, которые мы сравниваем. Вот, например, то же самое, если мы, э, там ноль, давайте ноль и фл сравним.
Speaker A
Опять-таки, он уже сравнивает не только значения, но и типы данных. И и при этом он вот это неявное привидение типов не использует. Вот и всё. С этим тоже разобрались, да, кстати, а сравнение чисел. Здесь всё работает как в математике. Вот. То есть
Speaker A
это у нас true. Давайте сейчас запишем пару парочку вариантов. То есть 10 > 5 - это правда. Там 5 меньше или равно пяти тоже будет true.
Speaker A
Или, например, а 2 больше единички. То есть помним, что у нас единичка, так как здесь другу не плюсик, а JavaScript вот эту строку он приведёт к числу. И, соответственно, два больше единички. И сейчас, по идее, у нас вылезет три true.
Speaker A
Вот то, что мы, соответственно, с вами и видим. Давайте немножко приблизим. Вот это у нас сравнение чисел. Работает оно так же само, как и в математике.
Speaker A
Также мы с вами можем сравнивать строки. Строки у нас сравниваются по алфавиту. То есть мы можем сравнить А и B и B. B у нас идёт, получается, дальше, чем А. Ну, по алфавиту, соответственно, мы тоже получаем true.
Speaker A
Вот. Или, например, сравниваем чуть дальше. ABC больше ABB, потому что де здесь у нас какой получается? Это А1, B2 и C3. Ну, например, в английском алфавите. Здесь у нас 1 2 соответственно ABC оно больше, получаем true. Вот. Ну
Speaker A
так у нас равниваются строки. Вот. Давайте, если мы с вами сравним 2 и 12, опять-таки поставьте на паузу и скажите, что мы здесь получим.
Speaker A
Попробуйте догадаться, вспоминая вот те правила, про которые я только что рассказывал. То есть здесь оно к чему приведётся и что мы получим.
Speaker A
Оп, мы получаем с вами true. Почему? Потому что они сравниваются как строки. Ну, потому что это строки.
Speaker A
Вот. Поэтому подытожим всегда для каких-то сравнений. Вот мы с вами используем три равно. Мы не используем два равно никогда.
Speaker A
Вот, чтобы избирать вот этих автоматическо автоматических привидений типов. А опять-таки насчёт преобразования значения в логическое, то, что мы с вами вот это делали.
Speaker A
Если мы с вами вот это приравниваем значение к логическому и оно становится fse, оно называется falsy.
Speaker A
Вот так напишем. Все - это у нас ложное значение, и у нас их получается даже чуть-чуть больше, чем я здесь написал. То есть по итогу это у нас 0 - 0 0.
Speaker A
То есть это всё тоже считается как число, как big in. Пустая строка. Null, undefined, none и false.
Speaker A
Null undefined none и false. То есть, сколько у нас их получается? 1 2 3 4 5 6 7 8. Здесь у меня было 3ше, да? То есть вот это у нас тоже является пустым значением.
Speaker A
Точнее, не это даже не пустое значение, а по факту это а вот это значение фолсе.
Speaker A
То есть, если мы вот эти значения все приведём к, э, логическому, используя два восклицательных знака или булин, а, это будет равно false.
Speaker A
Все остальные значения, которые не указаны в этом списке, они вернут нам true. Что бы мы не написали, опять-таки, если я напишу здесь, э, hello, чтобы я не написал, ой, вот так. Чтобы я сюда не написал, чтобы я сюда не передал, оно у
Speaker A
нас будет true. Вот так надо писать. Я забыл true. А так true. То есть всё будет true. Вот можете сами проверить.
Speaker A
Вот. То есть типами данных всё просто. Разобрались. Следующая тема, которую мы с вами разберём - это переменные.
Speaker A
Что такое переменная? Переменная - это наше имя или ярлык, под которым хранится значение в компьютере. Ну, в коде, давайте будем называть в коде. Вот. Можно это приставить как коробку с подписью. То есть у коробки есть имя, и это это является
Speaker A
именем переменной, а внутри неё лежат значения, это данные. Например, вот я создам переменную name и запишу туда Влад. То есть, а Влад - это значение, которое хранится в этой переменной. Name - это название переменной, а LED - это ключевое слово,
Speaker A
которое создаёт эту переменную. То есть мы её, грубо говоря, разделили на три части. Можно разделить на четыре части.
Speaker A
Ключевое слово, название переменной. Э здесь присвоить значение. Это оператор, который присваивает значение. и ээ сами данные. Вот это само значение, которое мы присвоили.
Speaker A
То есть мы как бы говорим: "Создай коробку с надписью name и положи туда текст Влад". Вот мы что-то такое примерно сделали с вами.
Speaker A
Есть три способа объявить переменную. War LED, const. Какая между ними разница? LED - это современный способ, который используется вместо var. Она является изменяемой, и её можно переназначить.
Speaker A
Что это означает? Допустим, опять-таки выводим в consol log эту переменную. Вот name я вывел. Посмотрим, что у нас получится.
Speaker A
У меня вывелось имя Влад, но потом я, допустим, в каком-то другом кусочке кода, например, позже захотел это имя изменить на там, я не знаю, пусть будет Евгений.
Speaker A
И если я его выведу, что я получу? Я получаю Евгений потом. То есть я его смог изменить.
Speaker A
А дальше давайте разберём константу. То есть, ну, здесь всё просто. Это переменна, мы её создали, и мы можем её переназначить.
Speaker A
Вот, потому что это LED. А const это наша, что такое константа? Это постоянное значение. То есть она используется для тех переменных, которые не должны меняться. Например, у нас есть пи, это у нас 3/14.
Speaker A
А выводим в консоль, смотрим 314, да? А что это гласит нам? Константа, она неизменяемая. Это значит, что переназначить мы её не сможем. Я пишу всё тот же код, что и был сADТ. Вот, например, там захочу не 314, а 313. Если
Speaker A
я выведу это в консоль log, что мы с вами увидим? Всё, видите, код сломался.
Speaker A
Всё, не работает. Он не остановил код на этом моменте. Почему? Потому что константа, она у нас неизменяемая, и сменить ей значение мы не можем. Нельзя.
Speaker A
Вот так вот. Ну и там можем создать ещё какие-то константы. Например, у нас, э, есть скорость света Light Speed сколько там, почти 300.000 км. Э, вот такое значение, если не ошибаюсь, почти 300.000. И опять-таки мы его выведем. И
Speaker A
изменять мы его не можем. Это наши константы. Вот. И вар. Вар - это устаревший способ.
Speaker A
Сейчас его почти никто не использует. Вот. И особо пользоваться им не нужно. То есть это то же самое, что и LED. Более детальную разницу между и LED мы с вами разберём сейчас по ходу дела.
Speaker A
Вот. То есть основные наши переменные - это LED и, которым мы будем пользоваться постоянно.
Speaker A
А идём дальше. Перемены, они могут хранить любые типы данных, абсолютно любые. Это по факту контейнер просто для их хранения. Вот и всё.
Speaker A
В JZ у нас перемены имеют динамический тип. Опять-таки, как я и говорил, когда мы с вами разбирались типами данных, вот ээ они соответственно определяют тип переменной по тому, что находится внутри неё. То есть мы записали сюда текст. Соответственно, вот эта
Speaker A
переменная, она хранит текст. Вот мы видим тест равно string. Здесь хранится строчный тип данных. Вот что мы можем и не можем опять-таки хранить в переменах. Мы можем хранить абсолютно всё за исключением.
Speaker A
Первое - это комментарии. Вот, допустим, я не могу хранить комментарии внутри. Всё, там что-то я напишу, оно мне не даст, соответственно, выполнить код.
Speaker A
Опять-таки будет ошибка. А дальше, что нельзя хранить в переменных? Это какие-то конструкции, то есть блок if.
Speaker A
Там, если что-то напишу, я просто не смогу это выполнить. Там всё, опять-таки, у нас логическая, ну, как логическая ошибка, синтаксическая ошибка. Мы не можем хранить выражение внутри перемен. Есть исключение, как хранить выражение, но об этом не сейчас.
Speaker A
Мы потом с вами разберём это. Необъявленные переменные мы с вами не можем также хранить. Например, а + 2, то есть а у меня такой переменной нет. Соответственно, давайте я закомментирую.
Speaker A
Такой переменной А у меня нет. И опять-таки у меня возникнет ошибка и пустой код. То есть, если мы сделаем какую-то вот такую запись, то, соответственно, я не смогу выполнять код дальше, пото что это ошибка. Итого в переменных мы не можем
Speaker A
хранить комментарии, а там какие-то конструкции по типу if if else. Есть ещё другие у нас конструкции, но не будем усложнять сейчас. Просто всякие конструкции, необъявленные переменные и пустой код.
Speaker A
Вот всё остальное внутри переменных может храниться. Вот прямо абсолютно всё. О'кей разобрались. То есть опять-таки подытожим переменные - это контейнер для хранения данных, у которого есть название. Вот. И в зависимости от того, какого типа наша переменная, мы можем её либо
Speaker A
переназначить, или не можем, и так далее. А у переменных есть область видимости. Что такое область видимости? Это часть программы, где переменная доступна для использования.
Speaker A
А можно это представить так, что у каждой переменной есть зона видимости, то есть такое место, где она существует.
Speaker A
Какие у нас есть виды областей? А первое, сейчас чуть-чуть подальше. Первое - это глобальная область видимости.
Speaker A
То есть, если мы создаём, а, переменную снаружи функций, блоков и так далее, она доступна везде.
Speaker A
Второе - это функциональная от слова функция. То есть, если подумать, то можно понять, что доступ к переменной у нас появляется только внутри ээ функции, где она объявлена. Ну, наша переменная и блочная.
Speaker A
Это внутри вот таких вот фигурных скобочек, то есть внутри вот таких блоков. Вот. Давайте с вами попробуем. Давайте с вами посмотрим на примере.
Speaker A
Я создам, например, функцию function test и запишу здесь какой-то блок. Например, э, если 10, ээ, тогда я создам там переменную, например LED ээ э, ну, там x, ладно, просто любую переменную, неважно, что там будет храниться, и попробую её вывести в
Speaker A
консоль log. Что мы с вами увидим? Ну, и, соответственно, эту функцию надо вызвать. Мы с вами увидим консоль log. Ну, то есть всё сработало, всё хорошо.
Speaker A
Что будет, если я консоль LК, вот, то есть мой блок, вот он начинается, вот он заканчивается. Переменная создана внутри моего блока if. Что будет, если я попробую вывести консоль вне этого блока?
Speaker A
Что мы с вами увидим? Вот у меня сломался код. Почему? Потому что вот эта переменная X, она существует только внутри этого блока. Если я захочу обратиться к ней вне этого блока, я получу соответственно ошибку которую я только что получил.
Speaker A
Грубо говоря, JavaScript не видит эту переменную. Вот так. Как вообще JavaScript ищет переменную? Он её ищет снизу вверх.
Speaker A
То есть сначала он ищет внутри текущего блока. Вот он её ищет в блоке. Потом он ищет это внутри функции, где находится этот блок, а потом в глобальной области. Что такое глобальная область? Это по факту просто прямо внутри файла. Например, здесь.
Speaker A
Если я создам переменную X и попытаюсь её получить здесь, тогда я её получу. Я получу 50. Ну давайте что-то запишем другое, например, 10.
Speaker A
Вот я получил десятку. То есть смотрите, если я здесь попробую получить x, я получу 50. То есть JavaScript сначала ищет переменную внутри блока. Вот я консоль log прописал внутри этого блока я нашёл свою переменную.
Speaker A
Если я консоль log вынесу вне блока, он ищет внутри функции. Ну, то есть так как у меня сейчас consol log находится внутри функции, он ищет её внутри функции, не нашёл, значит, поднимается дальше. Он поднимается на глобальную видимость. Здесь видит, что внутри файла
Speaker A
такая переменная существует. Вот выявилась десятка. То есть я Давайте допишем, например, вот здесь консоль log ещё выведем и здесь напишем внутри блока X равен.
Speaker A
И здесь напишем внутри функции x = Что мы с вами увидим? Внутри блока x = 50, внутри функции x = 10. Вот почему, я думаю, понятно. Только что в целом объяснил.
Speaker A
А можно ещё вот такой пример написать. Давайте там создадим константу тест. Пусть будет здесь храниться наш тест. А создадим с вами функцию, ну, какой-то function.
Speaker A
А, поместим в неё такую же перемену с таким же названием, там, например, 2, и попробуем вывести его в консоль log.
Speaker A
Дальше напишем с вами блок, например, if true. А сейчас не будем задумываться, почему true написали, без разницы.
Speaker A
Просто знаем, что этот блок выполнится. И опять-таки создаём и здесь переменную с таким же названием, там тест 3, и выведем консоль log сюда и сюда.
Speaker A
Так, давайте думать. Давайте поставим на паузу и опять-таки подумаем, а, учитывая области видимости, а что выводи выведет каждый из консоль логов? Я его помечу как единичку, двойку и тройку. Вот посмотрим на данный код и попробуем подумать, что выведется. То
Speaker A
есть есть у нас глобальная э область видимости. Здесь находится константа тест. есть функциональная, то есть вот вот моя функция начинается, вот она заканчивается, внутри неё находится код.
Speaker A
Это функциональная область видимости. Здесь находится такая же а константа тест. И в блоке, то есть вот мой блок, здесь находится ещё одна константа. Ставим на паузу и пытаемся понять, что вы выведет каждый из консоль логов. 1 2 3. Думаем.
Speaker A
А я показываю результат. Смотрим, у нас выявилось три теста. Почему? А потому что мы функцию с вами не вызвали.
Speaker A
Вызываем функцию. Вот. И что мы с вами видим? 1 тест 2 2 тест 2 и три тест. Почему?
Speaker A
Смотрим. Э возьмём в константу внутри функции. У нас здесь сразу под ней находится consль log. Я думаю, здесь всё понятно. То есть consль log пытается найти переменную. Нашёл её здесь сразу её нашёл. Всё о'кей. Дальше у нас идёт следующий consol log ниже
Speaker A
внутри функции. То есть у нас здесь есть блок. А вот мой блок. Внутри неё находится константа, но и здесь, соответственно, после неё идёт консоль log и JavaScript пытается найти эту переменную. Он не может найти переменную внутри этого блока.
Speaker A
Соответственно, он поднимается выше. Он ищет внутри функции. Он находит её внутри функции. Вот мой тест. Получается, единичка выводит тест два. Двойка выводит тест 2.
Speaker A
То, что мы с вами видим. Почему консоль log 3 вывел нам тест, а не тест 2?
Speaker A
Потому что данные данная константа, она находится внутри функции, и здесь мы доступа к ней не имеем.
Speaker A
Consль log просто-напросто не знает, что вот такая константа существует внутри функции, и он её не видит. Вот в целом так работает область видимости.
Speaker A
То есть она у нас есть у нас есть три основных области видимости в джаваскрипте. Вот. И таким образом мы можем определять вот доступ к переменнам и так далее, и так далее. И как раз-таки из-за этой области видимости мы с вами создали переменный с
Speaker A
одинаковых с с одинаковым названием. и они между собой не конфликтуют, потому что они находятся в разных областях.
Speaker A
Вот. Э дальше, дальше, с чем мы с вами ещё познакомимся, это у нас, э, как создаются переменные. У нас есть по факту а три этапа создания переменных. Первое - это объявление.
Speaker A
Второе - это инициализация и третье - это присваивание. То есть объявление - это мы, например, сообщаем джаваскрипту, что переменная существует.
Speaker A
Инициализация - это когда мы с вами присваиваем переменное значение при создании. И присваивание - это когда мы меняем значение после объявления.
Speaker A
Что это значит на практике? Например, я создам переменную там X. Я её объявил. То есть я я никакие данные в неё не засунул, но я её объявил. И JavaScript знает, что такая переменная существует.
Speaker A
Дальше что? просходит здесь. Это у нас, ой, это у нас присваивание. Присваивание. То есть мы, э, мы уже изменили значение переменной после её объявления. Вот смотрим на данную шпаргалочку. Мы понимаем, что здесь она была присвое присвоена. Если мы напишем вот такую
Speaker A
конструкцию, например, LED y = 10, что происходит у нас здесь? То есть, а, опираясь на вот это, мы можем с вами понять, что мы объявили переменную и инициализировали её. То есть мы присвоили ээ значение переменной сразу при создании. Это у нас
Speaker A
энициализация. Вот объявление плюс инициализация. Вот, чтобы это у нас, соответственно, просто термины и чтобы мы между ними не путались.
Speaker A
Вот что важно знать между видами переменных и то, как они, соответственно объявляются. Вар. Вот наш вар, который, в принципе, неиспользуемый.
Speaker A
Он инициализируется с undefined и он изменяемый. Ну, сейчас я напишу там тест. Вот. То есть я могу его объявить.
Speaker A
Вот. И он инициализируется с undefined сразу при объявлении. LED он также изменяемый, то есть я могу его потом изменить, и он инициализируется без значения.
Speaker A
Константа наша, она должна быть и инициализирована сразу. Вот константы должны быть инициализированы и и потом её изменить, соответственно, нельзя.
Speaker A
Вот поэтому такая запись, она не сработает. Я получу ошибку. Но если ей что-то присвою, ошибка уйдёт. А давайте попробуем вывести консоль log, чтобы понять, что это вообще всё значит. То есть, если я выведу consль log cons log test 2 и cons log test 3, что
Speaker A
мы с вами увидим? undefined undefined test. Что будет, если мы перенесём консоль log объявленными переменными?
Speaker A
Что мы с вами видим? Мы видим ошибку. Мы видим undefined и видим ошибку. Что, как это вообще называется? Что, что вообще произошло? А здесь у нас срабатывает такой механизм в джаваскрипте под названием хостинг, всплытие. Что это означает?
Speaker A
Это такой механизм, при котором объявление переменных и функций поднимаются, то есть, а, до вверх, то есть по области видимости, до выполнения кода. То есть JavaScript как бы сначала идёт сверху вниз. читает все объявления переменных, а потом начинает выполнять
Speaker A
код построчно. Давайте мы с вами пропишем вот создадим war а там равно 5 и попробуем вывести консоль log. Здесь мы видим с вами пятёрку. Что будет, если я подниму consol log над war?
Speaker A
мы с вами увидим undefined. Почему? Потому что JavaScript этот код, он по факту выполняет таким образом. Он сначала прочитал файл, увидел все перемены, то есть он, а, записал, то есть такую переменную указал, что она существует, но при этом ещё не указал ей
Speaker A
значение. Вот. То есть объявление поднято вверх. Вот. Дальше, когда мы вызываем консоль log, мы ещё не дошли до кода, где мы присваиваем ей значение. Соответственно, здесь undefined. Возвращаясь к типам данных, undefined - это значение, которого мы не знаем. То есть JavaScript
Speaker A
ещё не знает, какое здесь значение находится. Вот. И, соответственно, если мы выведем консоль log после, когда JavaScript уже дошёл до этой строки, прочитал, что а = 5, то он уже выводит нашу пятёрочку.
Speaker A
Вот. Ээ, что будет, если сделать всё то же самое с LED и const? А по факту ничего не сработает. Почему?
Speaker A
Потому что вот этого механизма всплытия не произойдёт. Для LED и конст он банально не работает.
Speaker A
То есть у нас будет ошибка, постоянная ошибка. То есть всплытие работает только для вар.
Speaker A
Ээ очень-очень много терминов рассказал и на по факту на деле непонятно, что это значит.
Speaker A
Что это значит на деле? А мы не можем работать с нашей переменной, то есть что-то с ней делать до момента её объявления. То есть если мы сначала пытаемся с ней как-то взаимодействовать, а потом её объявляем, мы будем получать ошибку. исключением
Speaker A
является war, переменная war, потому что, а, jaп он помечает её, то есть как уже созданную, но при этом не добавляет ей вот это значение. Ну, он записывает туда undefined.
Speaker A
Вот он записал сюда undefined. Вот и всё. Вот так работает вот этот механизм. То есть вот эта область называется временная мёртвая зона. То есть наша переменная, она недоступна, пока строка не выполнится. Вот, например LED.
Speaker A
Вот. То есть, э, соответственно, мы получаем ошибку. Можно сказать, что переменная, да, она всплывает так же, как и вар, вот этот хостинг механизм, он работает, но она недоступна. Вот и конст получается, они недоступны, они находятся в этой мёртвой
Speaker A
зоне. Вот. Ну, в целом, да, это такой механизм, и особо больше про него ничего не расскажешь. Просто единственное важно знать, что сначала объявляем переменные, потом к ним обращаемся, и никаких ошибок мы с вами не получим.
Speaker A
Вот. И насчёт переменных, наверное, одни из последних тем, которые я затрону - это именование. Как? Что такое имя перемены?
Speaker A
Это её идентификатор, по которому JavaScript знает, к какому значению ты обращаешься. И что важно знать, что имя, оно должно объяснять, что именно хранится в переменной, а не просто там какое-то вот значение.
Speaker A
То есть опять-таки объявляем с вами переменную, там number 10. Вот слово number - это её имя.
Speaker A
Вот какие у нас правила именования переменных. А имя должно начинаться с буквы, с нижнего регистра, а может и с верхнего.
Speaker A
С точки зрения работы джавоскрипта, оно может начинаться как и с маленькой, так и с большой буквы.
Speaker A
Оно может начинаться с нижнего подчёркивания и может начинаться с доллара. Вот. А все остальные записи, они будут недоступны. То есть, если я попробую написать, например, один number, я не смогу так написать. То есть числа, они не могут идти начальным, а,
Speaker A
начальной вот этой буквой или как это назвать, наше нашего названия переменной. Но при этом я могу её засунуть в любое другое место. Вот могу в конце, могу второй буквой и так далее, и так далее. И это будет работать.
Speaker A
Вот. Аэ также важно знать, что JavaScript у нас регистрочувствительный язык. То есть, что это значит? Если я создам три переменных my name, там напишу, давайте, Влад, продублирую и при этом напишу её тремя разными способами. Вот. My name, my name.
Speaker A
А, и вот так вот. И попробую вывести их в консоль LК. В целом, ну, ничего как бы непредвиденного не случится. JavaScript считает, что это разные переменные, и, соответственно, выведет три раза моё имя. Вот это всё работает, потому что вот регистр, он к
Speaker A
нему чувствителен, и если, э, мы меняем регистр, соответственно, имя перемены становится другой. Вот. Что ещё нельзя использовать в названии переменных? Нельзя использовать сами ключевые слова. То есть я не могу объявить вот такую переменную.
Speaker A
Вот не допускается использование. Я не могу объявить вот такую переменную. Я не могу там объявить такую переменную.
Speaker A
Такую могу ли я такую объявить? Такую я тоже не могу объявить. Вот поэтому такие ключевые слова нашего JavaScript языка в качестве названия переменных использовать мы не можем.
Speaker A
Вот, может, вы задались вопросом, пока меня слушали. А почему можно использовать верхний регистр в именовании переменных? То есть то, что я писал, вот, ээ, оно работает, никаких проблем нет, всё выводится, всё хорошо. И тут мы подходим к важному правилу. Это стиль
Speaker A
написания, стиль именования переменных. То есть, а, правило синтаксиса Джаваскрипта, оно позволяет нам писать название констант с большой буквы, но среди разработчиков есть, ну, скажем так, принятые соглашения о стиле, как у нас именуются переменные. Это делается для того, чтобы наш код был читаемым. И
Speaker A
что вот эти правила, что вот эти соглашения нам гласят? У нас есть стандарт для джаваскрипта, и он гласит нам о том, что перемены должны именоваться с помощью ээ кейса. То есть это значит то, что первое слово должно писаться с маленькой
Speaker A
буквы. Вот. А каждая следующая пишется за главной. Вот. То есть вот это наше соглашение, которого придерживаются все а разработчики.
Speaker A
Есть у нас ещё другой стиль- это upase. Он используется для констант, значение которых никогда не меняется. Что это значит? что все константы должны писаться вот таким образом, то есть вот так вот.
Speaker A
А на самом деле нет. Почему? У нас есть два смысла слова константа в джаваскрипте.
Speaker A
Техническая константа. То есть, что такое техническая константа? Это переменная, объявленная через вот это ключевое слово constст. Есть логическая константа, то есть это значение, которое никогда не меняется вообще. Ну, то есть нормальная температура тела человека 30 6,6, скорость света, который я записывал
Speaker A
там и так далее, и так далее. Э, что ещё? Э, мм, ну, вы в целом поняли, то есть температура, тело, ээ, вот вся вот такая а математическая логические вот эти законы и всё прочее. Вот то, что у нас по факту в жизни является
Speaker A
постоянной константой, и оно не меняется. Вот пи тот же самый 314, он никогда не меняется. Вот это наша логическая константа. И вот такие константы, они должны писаться в данном стилей, то есть const. Вот, вот это правильный вариант будет 314 или там, а, скорость света.
Speaker A
Давайте тоже создадим для неё константу. Вот const light speed и записали там какое-то значение. Вот. Вот это наши логические константы. Пишутся они в данном стиле.
Speaker A
То есть исключительно для логических мате математических констант. Вот всё. Во всех остальных случаях для наименования переменных мы используем Kmal Case.
Speaker A
Вот и всё. И какие практики я вам посоветую? Опять-таки подытожим. В целом тему переменных мы разобрали. То есть какие мы темы разобрали? Мы разобрали с вами, а в целом, что такое переменная, для чего она используется.
Speaker A
Области видимости. Мы разобрали глобальная функциональная блочная. Мы с вами разобрали объявление э переменных, то есть объявление, присваивание, инициализация.
Speaker A
Мы с вами разобрали виды переменных. Это war, LED и constти мы с вами разобрали, то есть вот этот механизм джаваскрипта.
Speaker A
И в принципе разобрали, как правильно именовать перемены. Ну и какие-то вот лучшие практики, которые вам посоветую.
Speaker A
Это первое использовать только LED и constст. Вар мы игнорируем, потому что, э, war у нас является, смотрите, а если LED и const - это блочная видимость, то есть они, а, имеют ту видимость, они видят только то, что находится по
Speaker A
факту внутри блока, ну, точнее доступ к ним. Вот то вар вар - это у нас глобальная область видимости.
Speaker A
Вот. Но она также не только глобальная, но по факту и функциональная. То есть, что это значит на деле? Если я вар объявляю просто внутри файла, она имеет глобальную область видимости. Если я объявляю внутри function функции, тогда она имеет функциональную
Speaker A
область видимости. Опять-таки попробуем. Давайте протестируем с вами Col log 5. Смотрим. Ага, функцию надо вызвать.
Speaker A
Вот. Да, у нас пошла ошибочка. Пошла ошибка. Почему X - это не функция? Ага, да, я забыл.
Speaker A
Что я забыл? Вот. Да, всё нормально. Вот вывелась пятёрочка. Давайте тут чуть-чуть изменим вот на десятку.
Speaker A
Вот выводится наша пятёрочка. Ну, соответственно, да, наша вот эта функциональную область видимости. Нашли данную переменную. Вот. Но, но, но что, если соответственно закомментировать то А я вывел просто пять. А, надо вывести X.
Speaker A
Вот получи получилась наша пятёрочка. Если закомментировать код, мы получим десяточку. А, да, ну, в целом работает всё как обычно.
Speaker A
Так, по итогу мы стараемся ВАр игнорировать, потому что вот из-за её области видимости у нас могут возникать какие-то проблемы.
Speaker A
Поэтому используем let и const. А второе - это давать какое-то конкретное и понятное имя для переменной. То есть мы мы именем должны объяснять, что хранится внутри переменной. То есть не просто какой-то набор текста, например, там константа. Вот я могу
Speaker A
написать что-то такое, написать здесь 10, а потом сиди гадай, что это значит. Но здесь я могу, ну, или дайте что-то прям ультралогическое, например, username или давайте, ну, my name опять-таки тот же, но чтобы не повторяться, давайте запишем что-то другое.
Speaker A
Например, my age 20. Вот. Ну, ну или так вот. То есть, исходя из названия константы, я понимаю, что внутри неё хранится мой возраст. Но если бы я здесь записал вот что-то такое, я бы потом сидел бы и догадывался, а что
Speaker A
это значит, для чего вообще эта переменная нужна, как её использовать. Вот поэтому мы с вами именуем их, понятно?
Speaker A
даём переменной понятное и конкретное имя. И третье - это важно следовать нашему единому стилю написания, то есть нашему л кейсу.
Speaker A
Вот. То есть это наш стандарт. Если мы именуем их так, у нас никаких проблем не будет. Вот по теме переменных в целом мы всё разобрали.
Speaker A
Вот. Потом дам вам другие, дам вам тесты и дам возможность посоздавать свои переменные. О'кей, с переменными разобрались.
Speaker A
Следующая тема, которую мы с вами разбираем - это конкатенация. Что такое конкатенация? Это по факту склеивание строк.
Speaker A
То есть, когда мы берём две строки и складываем, мы получаем одну большую. Например, создаём перемену там name Влад и last name, например, бабенка. Что мы с вами видим?
Speaker A
Мы можем склеить это всё в одну большую строку. Вот таким образом там LED full name получается у нас это будет name плюс last name и попробуем вывести это в консоль log.
Speaker A
То есть да, мы внутри переменных можем хранить другие переменные. Тоже важно это учитывать. Что мы с вами получаем?
Speaker A
Влад Бабенк. Почему? Потому что мы взяли две строки и склеили. Но, видите, у нас нет пробела. Давайте мы его с вами добавим. То есть мы можем вот так сделать.
Speaker A
Мы взяли а имя Влад, добавили к нему пробел и добавили к нему с помощью плюсика Бобенка.
Speaker A
Получилось, да? Моя имя. Моё имя и фамилия. Это конкатенация. То есть как работает оператор плюс?
Speaker A
Если хотя бы одно из значений у нас строка, джез преобразует вот это всё выражение к строке и склеивает. Например, опять-таки, мы уже это писали, но если мы с вами напишем там 5 + 10, мы с вами получим не 15, ни числом, ни строкой, а
Speaker A
мы получим с вами 510, потому что он берёт десятку, приводит к строке и склеивает.
Speaker A
Вот. Поставим сюда пробел, будет 5 и 10. Вот таким образом. Но это всё равно строка.
Speaker A
Вот. Вот это и есть наша конкатенация, когда мы берём и склеиваем наши строки. Можно и вот такую запись написать. Например, взять строку Hello, добавить к ней опять-таки наш пробел и добавить слово World. И получим Hello World с пробелом.
Speaker A
То есть мы взяли не одну строку, как мы с вами писали, вот так, а взяли, склеили из двух, ну, и пробела, соответственно.
Speaker A
Но это, на самом деле, старый способ склеивания строк. Есть современный, называется он шаблонная строка. Вот это более удобная форма конкатенации.
Speaker A
Вот. И пока мы сейчас будем разбирать вот эту, э, вот этот современный способ, мы здесь с вами познакомимся с интерполяции. Что такое интерполяция?
Speaker A
Это, э, возможность вставлять переменные прямо внутрь строки без использования вот этих плюсиков и конкатенаций. Как это выглядит? Давайте мы с вами что напишем. Опять-таки создаём а переменную дати константу name Влад.
Speaker A
А возьмём My и создадим сообщение. Ну, можем взять переменную или можем сразу делать это в консоль логи. Давайте через переменну там message. А как у нас вот этот новый способ конкатенации работает?
Speaker A
Интерполяции тиря конкатенации. Он пишется с помощью фигу вот этих, как это называется? А в обратных кавычках. Вот они. Обратные кавычки у нас находятся под тильдой, под эйпом. Вот поставили. И теперь мы можем написать какое-то сообщение, например, привет, меня зовут,
Speaker A
и нам надо вставить first name. Как мне вставить? Я вот пишу название, у меня это строка. Вот что мне тут написать?
Speaker A
Как-то обернуть? Да нет, нет, ничего не работает. Мне для этого нужно использовать вот такой синтаксис. Ставим значок доллара, фигурную скобку и ещё одну фигурную скобку. То есть теперь я внутрь строки вставил переменную. И так же самое делаем с с
Speaker A
возрастом. Там мне вставляем my age и слово let. И теперь давайте возьмём и consль log выведем наш message. Что мы с вами получаем? Привет, меня зовут Влад, мне 20 лет.
Speaker A
И давайте, наверное, знаете, что мы с вами сделаем? Чтобы нам было удобней, мы сделаем вот такое.
Speaker A
И это приблизим, чтобы я не прыгал между э вкладками. Есть. О'кей. Это наш новый современный способ для того, чтобы вставлять а переменные в строки и вот делать вот это. вот эту конкатенацию. Хотя по факту это замена конкатенации вот этого склеивания.
Speaker A
Вот в чём преимущество между этим вариантом и конкатенацией. Вообще, по идее, мы с вами можем написать его так вот. То есть мы можем сделать ээ вот такую запись.
Speaker A
Вот это будет наш старый, ну, новый вариант. Давайте запишем старый. Message old. Ладно, придётся всё-таки открыть.
Speaker A
Мне придётся написать вот так. Привет, меня зовут пробел можно поставить сразу так, чтобы не писать вот вот это. Привет, меня зовут First Name, запятая. Ээ, потом ставим плюсик снова, потом запятую здесь мне, потом снова пробел, потом плюсик, потом
Speaker A
my, потом плюсик, потом снова строку, потом нам на нужен пробел LED. Ну, то есть как будто бы это выглядит в разы легче. Нам понимать это банально проще, чем вот такую запись. Здесь очень-очень много плюсиков, и надо вот этими
Speaker A
пробелами руководствоваться. И давайте выведем и одну константу, и вторую. И что мы с вами получаем? Мы с вами получаем абсолютно одинаковый текст, но при этом первый он выглядит в разы легче, он читабельней, он понятней. Вот это наш современный
Speaker A
способ. Называется он, ну, шаблонная строка интерполяция. Вот в целом по этой теме всё. То есть у нас есть возможность таким образом склеивать строки.
Speaker A
Использовать это можно в разну вот, соответственно, в разных ситуациях. Сейчас, что можно ещё в целом придумать?
Speaker A
А можно что-то ещё, например, добавить. Там константа катри там. США. Мне там столько-то лет. Я из и вставить нашу перемену ещё одну кантри.
Speaker A
Соответственно, что мы получаем? Мне 20 лет, я из США. Вот. Вот таким образом склеиваем с вами строки. И это будет, на самом деле, очень полезно. И дальше мы будем часто это использовать и работать. Поэтому учимся и запоминаем.
Speaker A
Вот по этой теме всё. Следующая тема, которую мы с вами разбираем - это функции.
Speaker A
Функции. Что такое функции? Это набор инструкций, ну, то есть команд каких-то, собранных под одним именем, чтобы можно их было выполнять очень-очень много раз, сколько угодно.
Speaker A
Если простыми словами, без вот этих усложнений, то функция - это просто код для выполнение.
Speaker A
Пример. Давайте напишем с вами пример. Функция say hello. И она будет выводить нам в консоль log.
Speaker A
Привет, мир. Hello world наш. Смотрим. А вот да, здесь мы возвращаемся к важному уточнению.
Speaker A
Функцию надо вызвать. Say hello. Смотрим. Да, вызвалось, всё работает. То есть function - это ключевое слово для создания функции. Say hello - это название функции, имя.
Speaker A
Фигурные скобки. Вот раз фигурные открывающиеся и вот закрывающиеся два. Это тело функции. И всё, что пишется внутри тела, ээ это код для выполнения, то есть то, что делает наша функция. Вот это это вызов функции. Без вызова функция не
Speaker A
сработает. Вот. То есть опять-таки я вот это закомментирую. Смотрим, у меня никаких консоль логов не появляется. Я функцию создал, но я её нигде не вызываю. Без вызова функция работать не будет. И это важно помнить. Зачем нам нужны функции?
Speaker A
Э, ну, банально для того, чтобы, например, не повторять код. Возьмём вот такой пример. Консоль.
Speaker A
Привет, Влад. Там привет. Евгений, Александр и так далее. То есть мы всё это пишем ручками. Смотрим, вывелись наши наша три лога.
Speaker A
Вот они у нас вывелись. Ээ мы можем просто создать банально функцию, которая облегчит нам вот эту вот всю задачу. То есть, что мы с вами можем написать?
Speaker A
Берём нашу функцию say hello и передаём сюда name. Дальше объясню, что это такое и зачем оно используется. И здесь теперь я могу вставить, давайте с помощью и интерполяции, которую мы с вами вот-вот изучили, ставим наш.
Speaker A
Что по итогу у нас получается? Нам теперь нужно вот это передать. То есть теперь я могу написать здесь: "Привет, Влад, там Александр и Евгений.
Speaker A
И все наши те же логились. Вот всё то же самое, всё работает". То есть как это, грубо говоря, как это работает? А у нас есть функция, которая в которую мы можем что-то передать, имя.
Speaker A
name. И она берёт вот этот name и вставляет в нашу строку. Сейчас опять-таки дальше разберёмся. Это называется параметры и аргументы.
Speaker A
А, итак, для чего функции нам нужны? Для того, чтобы не повторять код, для того, чтобы структурировать программу. То есть, ну, мы можем делить код на какие-то логические блоки, на какие-то логические части и так далее. Вот. Ну и, соответственно, вот, чтобы передавать в
Speaker A
неё какие-то данные, вот параметры и аргументы, например, создадим с вами функцию, которая будет суммировать а и b, но при этом я пока что не знаю, что за а и b это будут. Вот. И, допустим, хочу, чтобы она выводила в консоль log их сумму. А
Speaker A
п. И теперь я её вызываю, передаю 10 20. Вот. То есть наша функция взяла десятку, подставила под А, взяла двадцатку, подставила под B и в иполнила код внутри себя. То есть функция внутри себя берёт вот эти две два числа и
Speaker A
суммирует, выводя влог. Всё, как обычно. А это получается функция, которая выполняет какой-то код. Давайте мы с вами разберёмся с ключевым словом return. Вот наше слово return. Что оно делает? Return - это оператор, который завершает выполнение функции и возвращает значение в то место, где
Speaker A
функция была вызвана. Как это выглядит на практике? Создадим функцию, которая возвращает нам число. Get number, то есть переводя с английского, вернуть число. И хочу, чтобы функция выполняла мне точнее, возвращала мне 15. Ну, число 15. И теперь я могу
Speaker A
вот это, то есть функция, она возвращает просто число 15. Теперь я вот вот это значение сохраню.
Speaker A
в константу, то есть const result, например, get number. То есть, да, я могу вызов функции сохранить в переменную результат вызова. И теперь залогирую этот результат.
Speaker A
Смотрим. Я получил в консольге 15. То есть не сама функция вывела consol log. Функция она просто вернула число 15. Это число 15 я сохранил в переменную. И эту переменную уже отобразил в консоли.
Speaker A
Можно записать, конечно, покороче. Вот так вот. Вот. То есть, да, вывелось те же 15.
Speaker A
Грубо говоря, я взял и в внутри консоль лого вызвал функцию. Вот. То есть, э, мы понимаем что э, return он просто возвращает нам то, что мы сюда укажем, и прекращает выполнение функции. Что это значит? Что любой код, написанный после слова
Speaker A
return, работать не будет. Вот он даже помечается, недостижимый код. То есть, когда JavaScript внутри функции находит слово Return, выполнение кода прекращается.
Speaker A
Но если я напишу консоль log передном, он выведется. Всё работает. Вот так вот. То есть нашёл слово return, остановил выполнение функции, и вот это указанное моё значение отдаёт. После ретрна код не выполняется.
Speaker A
Если слово return нет, вот, то наша функция всегда будет возвращать undefined. Смотрим на примере.
Speaker A
Давайте, чтобы не переписывать там say. Вот. И эта функция будет вот без ретёрна. Она вот мой тест выводит. И теперь я что сделаю? Я попробую вызвать её. Напишу say high. В прошлом примере у меня выводилось 15. Что будет здесь?
Speaker A
Так, я получил тест и получил undefined. То есть что случилось? Я вызвал а функцию, код внутри неё сработал, вызвался consol logте test. Дальше я попытался залогировать э ну, то есть значение, которое возвращает функция. Но так как слово return нет, она возвращает
Speaker A
undefined. Если я напишу слово return, просто будет всё то же самое. То есть, если мы ничего не указываем, возвращается undefined. А undefined у нас типа неизвестная неизвестность.
Speaker A
Смотрим, выявилось всё то же самое. Если я что-то укажу конкретное, например, пустую строку, вот он мне вывел пустую строку или вот повторно вывел тест и так далее, и так далее. То есть, а, важно понимать, что функция не только
Speaker A
выполняет код, но и что-то возвращает нам. Вот как бы Return - это такая дверь выхода, что ли, из функцию, вот через которую она свой результат нам отдаёт и завершает работу. Вот так работает оператор Return внутри функции. Теперь давайте мы с вами вот разберёмся с
Speaker A
нашими параметрами и аргументами, с которыми которые мы использовали уже. А что такое параметр? Параметр - это переменная внутри функции. Они получают значение, когда ты эту функцию вызываешь. А аргумент - это само фактическое значение, которое ты передаёшь при вызове функции. Смотрим на
Speaker A
примере. Я создаю функцию, например, грид, то есть, по-моему, поздороваться с английского. Данная функция может принимать имя name, то есть вот эти круглые скобочки, это а в них мы помещаем вот эти переменные наши параметры. И теперь я захочу написать вот такую запись. Consль
Speaker A
log. М. Опять-таки используем интерполяцию, чтобы долго не мучиться с плюсиками нашими. Привет, name. Вот теперь мы её можем вызвать и передать туда какое-то значение. Пишем грид и, допустим Влад.
Speaker A
Мы видим. Привет, Влад. То есть, а вот это у нас параметр функции - это аргумент. Параметр - это переменная внутри функции. аргумент - это вот это конкретное значение, которое подставляется вместо параметра. И теперь вместо слова name у нас подставляется
Speaker A
Влад. Я вот могу ещё там log создать, например привет пока здравствуй, и так далее, и так далее. И в каждом логе у меня будет использоваться данное имя. Можно использовать другое имя, там Евгений.
Speaker A
Выявится у меня ещё и с Евгением это всё. Вот так это и работает. А идём дальше.
Speaker A
Функция может у нас принимать несколько параметров. То есть я сейчас здесь написал один параметр. Может она принимать больше. Например, давайте, а что мы сюда передадим? Давайте страну.
Speaker A
Привет. Какое-то имя, которое мы ещё не знаем на момент написания функции. Э, и здесь напишем дальше текст. Привет, то-то, то-то из и указываем здесь переменную countтри. То есть вот наша переменная. И теперь я должен передать сюда уже два параметра. Первое, Влад,
Speaker A
оно подставляется для имени. Второе для страны, например, дайте тоже США. Ладно, не будем выдумывать.
Speaker A
Вот получается, всё, оно подставляется. Смотрим. Привет, Влад, из США. Всё сработало. Вот здесь по неймингу всё то же самое, как и с переменнами. То есть мы их должны называть э понятным образом. Ну, то есть можно написать здесь любое вот слово, там
Speaker A
какую-то аброкадабру непонятную. То есть оно всё и так и так, и так будет работать. Просто теперь непонятно, что это вот всё значит и зачем оно используется. Мы должны именовать по существу ээ для того, для чего эта переменная внутри функции используется, так как и с
Speaker A
обычными функциями. Возникает вопрос, что будет, если передать, например, больше аргументов, чем параметров? Что будет? Давайте посмотрим.
Speaker A
Вот я передам сюда какое-то имя или что это. Давайте там тест посмотрим, что получится.
Speaker A
Ничего не изменилось. Абсолютно ничего не изменилось. То есть можно сказать, что он просто игнорируется.
Speaker A
Вот передали больше аргументов, JavaScript это увидел, проигнорировал. Вот что будет, если наоборот мы напишем всего лишь один из двух? То есть функция должна принимать два, а мы передали всего лишь один. Смотрим.
Speaker A
Соответственно, мы получаем undefined. Почему? Потому что функция не получила второй параметр. Она не знает, какой он.
Speaker A
Возвращаемся к типу данных. Undefined, неизвестно, поэтому мы получаем здесь текст undefined. Всё логично. То есть не передали. JavaScript заменяет это другим вот типом данных undefined.
Speaker A
Вот. Ээ, то есть такой крат краткую подсказочку мы с вами запишем. Передали больше. JZ игнорирует.
Speaker A
Передали меньше. JS заменяет на undefined. Это, конечно, при условии, что вы вот эту переменную используете.
Speaker A
То есть, если я просто отсюда уберу, вот она указывается, что вот эта переменная countтри, она была объявлена, но она не используется внутри функции.
Speaker A
Соответственно, вот всё выведется. Если я напишу тут даже второй logry, то получу undefined, потому что country не передал соответственно undefined.
Speaker A
Давайте напишем здесь что-то. Регион SNG. СНГ. Всё вывелось, всё о'кей. Вот также мы можем с вами задать значение по умолчанию, если аргумент не передан. Что это значит? Вот, например, а если я ничего не передам, что мы видим? Undefined, но я могу
Speaker A
написать вот такую запись. Пишется, то есть, а, countтри равно и дефолтное значение например Парагвай.
Speaker A
Вот это значение по умолчанию, оно используется в том случае, если мы ничего не передали. При этом, если я вот сюда передам, у нас вывелось США. Всё правильно. Вот тоже в целом всё просто, ничего тяжёлого. То есть ничего не передали,
Speaker A
используем значение по умолчанию. Передали, используем данное значение. Вот это базовый пример работы функции. Это что мы дальше разберём?
Speaker A
Давайте разберёмся со стрелочными функциями. Стрелочная функция - это короткий способ записывать функции. Она записывается с помощью стрелки. Отсюда у нас происходит наше название. Мы их с вами, кстати, использовали в ДЗ номерче, когда вот при клике мы с вами вот выполняли какой-то код со
Speaker A
слушателем событий. Вот, по-моему, что-то такое было. Там, например, button. Там добавляли lister, передавали сюда там клик. И дальше мы с вами создавали стрелочную функцию вот такую вот. То есть это мы использовали стрелочную функцию. Давайте её напишем.
Speaker A
Давайте напишем сначала обычную функцию и рядом с ней напишем стрелочную, чтобы видеть разницу. Вот так вот. и пишем стрелочную.
Speaker A
Стрелочная функция у нас создаётся с помощью там константы, например, ну или переменной в целом. То есть мы должны записать её в переменную.
Speaker A
Например, say high равно вот у неё та такая такой синтаксис. Вот. И пишем то же самое. Привет.
Speaker A
Есть. А, ну функции у нас не должны называться одинаково. Назовём say 2. Вот. Всё работает.
Speaker A
То есть это один способ создать функцию. Это другой. Вот это у нас более короткий, более современный. Вот. И чаще всего используется вот это, наверное, в 90% случаев. Вот. Вот это у оченьочень устарело.
Speaker A
Так. Что? Что? Что? Давайте мы с вами их вызовем. В принципе, надо же видеть, как они работают. Вызвали. Всё работает, всё хорошо. Можем передать в них так же само параметры. То есть здесь будет name, здесь будет name. Вставляем это name
Speaker A
опять-таки что не работает. А помним про кавычки. Здесь мы используем, если мы хотим вставить внутри строки переменную, мы должны использовать обратные кавычки.
Speaker A
Такой синтаксис у джаваскрипта. И теперь я могу передать сюда вот имена. Влад и Евгений.
Speaker A
Всё выводится ровно так же. Всё работает точно так же. Никаких проблем. Кстати, если у нас по факту один параметр, вот он один, мы можем здесь скобочки убрать. Всё будет работать точно так же.
Speaker A
Синтаксис нам позволяет такое дело. Здесь такое сделать нельзя. Вот. Ну и также, если мы ээ не хотим никаких параметров передавать, тогда мы всё равно обязаны поставить круглые скобки. Вот единственное исключение - это когда он у нас один. То
Speaker A
есть, если напишем здесь два, он потребует вот эти наши круглые скобочки. Вот запоминаем. Вот разобрались, то всё работает точно так же.
Speaker A
Ну, давайте нам создадим какую-то ещё стрелочную функцию, например, которая будет суммировать нам два числа или давайте умножать А и B. Или можем можно записать там number 1, number 2.
Speaker A
Вот. То есть здесь это у нас ключевое слово для создания переменной. Это название функции, это, э, параметры функции, это тело функции. Вот просто запоминаем. Синтаксис надо создавать с помощью стрелочки.
Speaker A
Вот. И здесь будем умножать число один на число два. То есть мы будем не выводить log, а просто при вызове функции мы передаём два числа, а функция нам возвращает результат. Давайте смотреть, как это выглядит. То есть сум есть. Есть. И
Speaker A
теперь мы с вами пишем вот так вот cons log. То есть я хочу в consль log вывести.
Speaker A
Вот я вызываю сум. Смотрим, что с вами, что будет. Nan nan. Почему? Потому что а я ничего не передал. Соответственно, JavaScript заменил на undefined, а когда умножается, получается undefined на undefined, да? И в принципе мы не можем умножать на undefined. У нас получается,
Speaker A
ну, мы не можем создать математическую операцию. Вот даже если вот передам один, всё равно будет на один один умножаем на undefine, получается на. Но если передам второе число, смотрим. Давайте 5 и 6, получаем 30. То есть данная функция, она умножила нам числа и
Speaker A
вернула результат. А я уже это залогировал. Можно написать вот так вот там const result равно сум 5 и 30. И вот вывести теперь ещё один cons log result.
Speaker A
То есть данный данная переменная хранит результат вызова функции с данными аргументами. Получается 150. Всё работает. Всё прекрасно, ребят.
Speaker A
А также у нас существует короткая запись, то есть без слова return и вот этих фигурных скобочек, чего мы не можем делать с обычной функцией. Для этого мы можем написать вот такую строку, например. Вот это я пока закомментирую, давайте. И пишем
Speaker A
constст там сум равно а и b стрелочная функция а x b. То есть, если функция возвращает нам какое-то одно выражение, вот она, это одно выражение, то мы можем писать, короче, без фигурных скобок и без ретёрна, как было здесь. То есть,
Speaker A
видите, вместо трёх строк используем одну. И теперь делаем то же самое. Consль log сумте 10 и 20.
Speaker A
Получили мы с вами 200. Всё работает, всё о'кей. Вот. Но при этом, если мы хотим не только умножить, ну, например, мы хотим с вами сделать constст, то есть давайте мы будем добавлять, то есть сумма а + b.
Speaker A
Мы внутри функции создали переменную, которая хранит сумму этих двух чисел. И потом я хочу взять и вернуть а сумму, умноженную на сумму. Вот можно что-то такое сделать. То есть, видите, здесь уже не одно выражение, а несколько. Вот. То
Speaker A
есть раз выражение, вот раз моё выражение, два выражения, то тогда теперь мы с вами получаем 900.
Speaker A
Почему? Понятно? Я думаю, понятно. То есть мы суммировали, суммировали 10 и 20 и взяли потом получили 30. В этой константе у нас 30 хранится. И взяли 30, умножили на 30. То же самое с другими любыми любыми числами. Вот.
Speaker A
Поэтому запоминаем, тренируемся и учимся. Вот в основном будем использовать в дальнейшем с вами стрелочные функции, но пока можно обойтись и вот такими обычными декларативными.
Speaker A
Насчёт именований функции. Имя функции, оно в целом принцип такой же, как и с переменными. Имя функции должно описывать действия, которые она выполняет. В нашем случае, например, что мы видим? Аэ, моя функция, она суммирует, ну, в данном случае уже не
Speaker A
суммирует, то есть она выполняет какие-то математические действия. Можно написать, например, типа кальк, ну, калькулятор посчитать. Вот. То есть это глагол можно написать сум. Но тогда нам нужно, чтобы по факту у нас результат вот этот суммировался.
Speaker A
а и b. Вот тогда наша функция действительно суммирует. Можно вот смотрим здесь на примере функция а говорит говорит нам привет вот в консоль логи. Соответственно, из из названия понятно, что она делает. Вот. И таким образом мы с вами именуем функции. Вот
Speaker A
какие советы можно дать? А первое - это имя функции должно начинаться в основном с глагола. То есть там get, например, получить set, установить show, показать там чек, проверить, сохранить, загрузить и так далее, и так далее. Там вот как у нас say - это
Speaker A
сказать, сум суммировать. То есть это глаголы наши. Первое слово всегда глагол. Второе - это можно добавить существительное, то есть say сказать, что именно. Ну вот привет существительно. Соответственно здесь там можно сум numers дописать. Вот таким образом мы их суммируем с вами.
Speaker A
Вот по функциям тоже всё. То есть всё банально просто. Пока что, так как это вводная лекция, мы с вами не усложняем, потому что дальше у нас есть большие различия между стрелочными и обычными функциями, но для первого урака это будет сложновато пока,
Speaker A
поэтому пока обойдёмся. Так вот ещё про что хочется рассказать - это про консольги. Почему мы их пишем и для чего их вообще использовать. По факту consol log - это команда. То есть метод, который вводит э информацию в консоль
Speaker A
браузера или терминала. Он используется для того, чтобы проверять значение переменных, э, делать отладку кода, то есть проверять его работоспособность, вот, и вывода каких-то сообщений. Ну, например, как мы сами всё и делали до этого всю нашу лекцию, мы выводили результат в
Speaker A
консоль log и проверяли, как он работает. Вот имя и прочее, и прочее. Вот мы можем выводить несколько переменных, например, через запятую.
Speaker A
Всё, что угодно, мы можем выводить и проверять. Вот оно всё работает, всё хорошо, никаких проблем нет. Можно добавлять какие-то записи, чтобы нагляднее было.
Speaker A
То есть name через запятую. Вот это наш первый, скажем так, блок. И второй блок, например, э name 2 и через запятую. Вот вла 2 Влад 2. Ну то есть вот таким образом. По итогу кон log - это глаза программиста. Вот через него
Speaker A
мы видим, что происходит внутри нашего кода. И в дальнейшем мы будем очень-очень часто проверять какие-то перемены, работу методов и так далее, и так далее. Это один из самых важных и часто используемых инструментов у программиста, конкретно у фронтендера, потому что доступ к логам
Speaker A
вот подобным есть только у фронтендеров. Там в других языках программирования это делается по-другому. Вот. Но в целом, я думаю, идею вы поняли. Мы будем использовать их очень часто.
Speaker A
И последняя тема, про которую мы сегодня поговорим, - это блок if else. В джаваскрипте любое выражение мы можем проверять как true или false. То есть мы можем привести значение к булину или так, или вот так. Вот. Но сейчас будем
Speaker A
делать это немножко по-другому. То есть для чего используется блок if else? Он используется, чтобы выполнять разные действия в зависимости от условия, потому что у нас, соответственно, вот это ввитвление событий, оно должно быть.
Speaker A
А давайте с вами сделаем там максимально простое условие. Например, создадим с вами переменную, которая будет хранить возраст 18 лет.
Speaker A
И вот имитируя там, например, покупку алкоголя в магазине или что-то такое, вот мы с вами создадим условия.
Speaker A
Например, если возраст больше или равен 18 годам, вот такая запись - это больше или равно, а это меньше или равно, потому что если мы с вами напишем так, это будет стрелочная функция, поэтому меняем местами. больше или равно восемнадцати года. Мы выводим консоль
Speaker A
log доступ разрешён, то есть if сейчас я допишу до конца и покажу, как это работает. В другом случае мы доступ запрещаем.
Speaker A
Здесь написано, то есть, если if - это наше тело, скажем так, наше условие в круглых скобочках, если H больше или равен 18, это тело блока if. Запомните, тело - это фигурные скобочки. Вот.
Speaker A
И внутри него выполняется код. Соответственно, если возраст там больше или равен 18, мы выводим consol log.
Speaker A
Доступ разрешён и else иначе мы выводим consol log доступ запрещён. Если я вот создам переменную, например, LED, давайте LED 18, JavaScript у нас читает код сверху вниз, соответственно.
Speaker A
А если я здесь его заменю на 15, то есть сначала изначально он является 18, потом я меняю на 15, а потом проходит проверка. Соответственно, проверку я не прошёл, и выполняется код else. Доступ запрещён. Я могу его вообще убрать, тогда ничего не произойдёт.
Speaker A
Вот. Вот так, например. Но в основном пишут для того, чтобы вот обработать какие-то события. То есть вот такая краткая инструкция.
Speaker A
If условия, а код для условия, точнее код, если условие true, то есть правда. Код, если условие false.
Speaker A
Вот мы с вами таким образом проверяем, то есть круглые скобочки условия. Фигурные - это действие наши, которые мы выполняем. Давайте разберём ещё какой-то пример. Создадим с вами температуру, например, ээ температура там 15, давайте 20°.
Speaker A
Создаём условия. Если температура больше э двадцати, мы выводим консоль logo. В другом случае мы выводим consolло log холодно.
Speaker A
Соответственно, почему вывелось холодно? Потому что здесь в условии мы проверяем, что температура должна быть обязательно больше двадцати.
Speaker A
Соответственно, условие у нас фолс, потому что температура не больше двадцати, она равна двадцати. Соответственно, у нас выполнился данный блок. А как тогда обработать? Допустим, э больше двадцати жарко, меньше двадцати холодно, а как тогда будет 20? Для этого мы можем создавать ещё дополнительные
Speaker A
блоки с обработкой условий. Оно называется ещё if else, то есть пишем if else. Вот у него такой синтаксис.
Speaker A
Вот, точнее, не if не if else, а else if. Вот. И здесь мы задаём условие, например, температура равна 20. Сравнение, не забываем, что мы не присваиваем значение, а сверяем. То есть, если температура равна 20, мы выводим консоль log. А, отлично, отличная температура.
Speaker A
Вот смотрите, как JavaScript читает это. У нас есть температура 20. Если температура больше 20, выводим жарко. У нас, соответственно, температура не больше двадцати. Мы приступаем к следующему блоку. Этот игнорируется.
Speaker A
В другом случае, если температура равна двадцати, мы выводим лок отличной температуры. Условие совпало. То есть всё, он выполнил этот код. Вот этот игнорируется. Если я поставлю 21, соответственно, у меня первый, второй блок, они проигнорируются, потому что условия не совпало. И выведется вот
Speaker A
этот. Оп, жарко. Видим, всё работает. Также мы можем встраивать условия в другие условия, как это, как это выглядит. Например, опять-таки возвращаемся к варианту с возрастом и с продажей алкоголя. Как у нас там всё происходит? Например, э одного возраста
Speaker A
недостаточно. И мы вот давайте создадим переменную has ээ passport. passport и допустим true. Вот мы храним здесь булин значение true или fф есть или не есть паспорт.
Speaker A
А здесь проверяем, например, если возраст больше или равен 18, доступ разрешён. Вот если нет, доступ запрещён. И здесь я хочу дополнительное условие. Если возраст больше или равен 18 и если там есть паспорт, вот тогда доступ будет запрещён. А иначе мы выведем консоль
Speaker A
log. А возраст подходит, но нет паспорта. Что мы с вами увидим? Так, точнее, да, оно так не сработает.
Speaker A
Почему? Потому что, а, у нас блок if сработал, то есть условие совпало, и, соответственно, вот этот весь блок выполнится. То есть это так не сработает. Значит, мы ещё один мы должны написать вот так. Ese els else оп, доступ разрешён. Этот блок игнорируется,
Speaker A
потому что паспорт у нас есть. А можно написать ещё вот так. Логическое отрицание. Пишется оно вот таким образом. То есть, что мы здесь с вами только что написали?
Speaker A
если возраст равен или больше 18 и внутри проверяем, если у него нет паспорта, то есть вот одно один знак восклицания - это логическое отрицание, то есть оно, грубо говоря, ээ отрицает ээ то, что паспорт есть.
Speaker A
Например, если паспорта нет, тогда там возраст не подходит то-то, то-то. Вот если я напишу сейчас fse, то это, грубо говоря, мы указываем намеренно. То есть, если возраст равен или больше 18 и при этом паспорта нет, то есть has passport, вот здесь
Speaker A
проводится здесь if по итогу возвращать либо true, или false. Вот. И здесь логическое отрицание. То есть я говорю о том, что я обрабатываю вариант, когда паспорта не будет. has passport и отрицание.
Speaker A
Соответственно, выводится у меня возраст подходит, но нет паспорта. Вот. И таким образом мы можем одни условия вставлять в другие условия и таким образом вот работать, обрабатывать разные варианты.
Speaker A
Вот например там э может, вот вы заходили на сайты и вам нужно было что-то сделать. Например, вы себе покупаете товар на Озоне или где-то ещё там на Wildberies.
Speaker A
И для того, чтобы заказать товар, вам нужно зарегистрироваться. И там как раз-таки используется вот это условие.
Speaker A
Пользователь, э, там авторизирован, зарегистрирован. Если да, тогда он вот мы переходим в корзину, оформляем товары. Если нет, тогда мы его перенаправляем на страницу с авторизацией, чтобы он авторизировался.
Speaker A
И вот, э, очень-очень часто во многих случаях и примерах у нас используются вот данные блоки. Но это, на самом деле, наляписто. Наляписто. Как можно сделать покороче? Это самый обычный блок if else. Он используется практически во всех языках программирования.
Speaker A
Мы можем с вами использовать короткую запись для каких-то маленьких условиях. Используется он, пишется он, используя тернарный оператор. Например, опять-таки создаём переменную 18 лет и записываем.
Speaker A
Например, нам нужно сохранить это внутри переменной. Вот я говорил о том, что блок if else внутри переменной мы сохранять не можем.
Speaker A
Но а какие-то условия вот с помощью тернарного оператора мы можем. По итогу это выглядит таким образом.
Speaker A
H больше больше или равен 18, а знак вопроса там напишу сразу сокращённо разрешён. Если нет, запрещён. И вот эту переменную мы выведем в консоль log.
Speaker A
Что мы с вами видим? Доступ разрешён. Как работает вот этот блок? То есть мы пишем с вами, идёт условие.
Speaker A
Код если условие true, код, если условие false. Вот. такой вот синтаксис у тернарного оператора, то есть условия, знак вопроса, после него идёт, если условие true, потом идёт двоеточие, если условие false. Вот. То есть мы очень-очень кратенько записали вот этот
Speaker A
блок if else. Можно, ну, мы это сохранили в переменную, получается, переменную передали в consль log. Можно, в принципе, написать её здесь, прямо в консоль логе больше во 18. И работает оно по тому же принципу. Проверяем. Всё работает, всё о'кей. Вот.
Speaker A
Вот в целом по блоку else всё.
Topics:JavaScriptвеб-разработкапеременныефункциикомментариибраузерDev Toolsфронтендинтерактивностькод
