🫡Как работать с HTML через JavaScript?
👉Чтобы начать работу с HTML, нам необходимо подключить .js файл в .html через тэг <script>, где в аттрибут src - мы указываем путь до JavaScript файла.
🤔Обычно JavaScript файлы подключаются в конце тэга <body>, но это опять же и можно это сделать в самом начале <body> или даже в середине.
🌐Чтобы обратиться в браузерному HTML окружению - в JavaScript мы используем глобальный объект document.
🎲Чтобы получить какой-то элемент из нашего HTML файла - мы вызываем метод :
😳Выборка может осуществляться по названию тэга, по его классу или идентификатору, для этого надо уточнять, если это класс - то передаваемый аргументом класс должен начинаться с точки, в случае с id - #.
🔥Полученное значение можно занести в переменную.
✨А чтобы получить внутреннее содержимое элемента - мы вызываем у переменной содержащей HTML-элемент
свойство innerHTML.✨
👉Чтобы начать работу с HTML, нам необходимо подключить .js файл в .html через тэг <script>, где в аттрибут src - мы указываем путь до JavaScript файла.
🤔Обычно JavaScript файлы подключаются в конце тэга <body>, но это опять же и можно это сделать в самом начале <body> или даже в середине.
🌐Чтобы обратиться в браузерному HTML окружению - в JavaScript мы используем глобальный объект document.
🎲Чтобы получить какой-то элемент из нашего HTML файла - мы вызываем метод :
document.querySelector(фильтрация выборки)😳Выборка может осуществляться по названию тэга, по его классу или идентификатору, для этого надо уточнять, если это класс - то передаваемый аргументом класс должен начинаться с точки, в случае с id - #.
🔥Полученное значение можно занести в переменную.
✨А чтобы получить внутреннее содержимое элемента - мы вызываем у переменной содержащей HTML-элемент
свойство innerHTML.✨
🔥2
🔥Как легко и просто форматировать даты? 😱
🫡Часто возникает необходимость форматироавть даты в зависимости от разных задач и порой это должно быть очень удобным, чтобы не заморачиваться над сложными самописными методами.
👉В таких ситуациях нам на помощь приходит глобальный класс Inlt, чтобы очень многогранно и удобно использовать форматы для дат.
😏На самом деле это очень общирный класс для форматироваиня в целом, однако в частности для работы с датами мы можем использоавть его метод DateTimeFormat(), который первым параметром принимает строку с выбранным форматом региона, а вторым параметром объект опций, при чем оба параметра являются необязательными и выставляются по умолчанию.
👍Весь необходимый материал для ознакомления отображен на скриншоте, для более подробного ознакомления - вы можете проследовать по следующей ссылке на учебник learn.javascript от Ильи Кантора😘.
❤️https://learn.javascript.ru/intl
🫡Часто возникает необходимость форматироавть даты в зависимости от разных задач и порой это должно быть очень удобным, чтобы не заморачиваться над сложными самописными методами.
👉В таких ситуациях нам на помощь приходит глобальный класс Inlt, чтобы очень многогранно и удобно использовать форматы для дат.
😏На самом деле это очень общирный класс для форматироваиня в целом, однако в частности для работы с датами мы можем использоавть его метод DateTimeFormat(), который первым параметром принимает строку с выбранным форматом региона, а вторым параметром объект опций, при чем оба параметра являются необязательными и выставляются по умолчанию.
👍Весь необходимый материал для ознакомления отображен на скриншоте, для более подробного ознакомления - вы можете проследовать по следующей ссылке на учебник learn.javascript от Ильи Кантора😘.
❤️https://learn.javascript.ru/intl
👍3
🤔Как сделать приватное поле в JavaScript?
🥳Инкапсуляция - один из столбов на котором держится объектно ориентированное программирование.
😔В TypeScript💙 мы уже знакомы с модификаторами доступа в виде public / private / protected, но нативный JavaScript🧡 не располагает подобным функционалом, вернее, не располагал до недавних пор.
🤓Начиная с ECMA 2021 - мы можем назначать приватные поля для класса с указанием # перед именем поля, что позволяет нам скрывать поле для получения и открывать его посредством геттеров / сеттеров доступным с ECMA 2016.
🥳Инкапсуляция - один из столбов на котором держится объектно ориентированное программирование.
😔В TypeScript💙 мы уже знакомы с модификаторами доступа в виде public / private / protected, но нативный JavaScript🧡 не располагает подобным функционалом, вернее, не располагал до недавних пор.
🤓Начиная с ECMA 2021 - мы можем назначать приватные поля для класса с указанием # перед именем поля, что позволяет нам скрывать поле для получения и открывать его посредством геттеров / сеттеров доступным с ECMA 2016.
🔥3
🤔Как создать класс без слова class?
Или как это делали до ECMAScript2015?
😢До спецификации языка JavaScript ECMAScript2015 🧡всем так давно привычного слова class👍 не было в обороте. Но каким образом тогда создавались классы для классического использования ООП в разработке?
🫡До 2015-го года использовали функции, их контекст и прототипирование, и ключевое слово new, для создания экзепляра на основе отрабатвыаемой функции.
👉Для начала создавалась функция, обычно именуемая с большой буквы, принимавшая параметры, как и конструктора класса, для инициализации полей через контекстное слово this.
🙈Но работа с методами строится чуть иначе. Чтобы определить метод для функции-класса, необходимо сделать её частью прототипа (prototype) самой функции, и так же обращаться к полям экземпляра через this.
🥳По итогу, готовая функция создавала свой экземпляр так же как и класс - через ключевое слово 🤩
Или как это делали до ECMAScript2015?
😢До спецификации языка JavaScript ECMAScript2015 🧡всем так давно привычного слова class👍 не было в обороте. Но каким образом тогда создавались классы для классического использования ООП в разработке?
🫡До 2015-го года использовали функции, их контекст и прототипирование, и ключевое слово new, для создания экзепляра на основе отрабатвыаемой функции.
👉Для начала создавалась функция, обычно именуемая с большой буквы, принимавшая параметры, как и конструктора класса, для инициализации полей через контекстное слово this.
🙈Но работа с методами строится чуть иначе. Чтобы определить метод для функции-класса, необходимо сделать её частью прототипа (prototype) самой функции, и так же обращаться к полям экземпляра через this.
🥳По итогу, готовая функция создавала свой экземпляр так же как и класс - через ключевое слово 🤩
new Название_функции_класса(аргументы для полей)👍3
🔥Сохранение данных даже при перезагрузке страницы
☺️Часто возинкает потребность сохранять какие-то данные на сайте, чтобы при запланированной или случайной перезагрузке страницы они оставались у клиента для его же удобства.
🎲Такой функционал в мире Web осуществляется посредством использования localStoage.
Это локальное храналище на каждом компьютере пользователя от бразуера.
👌Есть определённый функционал, который осуществляет работу с хранилищем, представленный в виде нескольких методов и его свойств.
🙈Важное замечание, данные в localStorage хранятся в виде строк. Поэтому для хранения объектов / массивов - необходимо преобразовывать его в JSON формат через JSON.stringify() и при получении парсить через JSON.parse().
👉Глобальный объект, отвечающий за работу хранилища - localStoage.
👍Все способы работы с хранилищме представлены на скрине для удобства.
😱Так же, при получении несуществующего элемента из хранилища - нам вернётся null, без выбрасывания ошибки, что очень удобно и позволяет обходиться основыми операторами проверки как ??.
☺️Часто возинкает потребность сохранять какие-то данные на сайте, чтобы при запланированной или случайной перезагрузке страницы они оставались у клиента для его же удобства.
🎲Такой функционал в мире Web осуществляется посредством использования localStoage.
Это локальное храналище на каждом компьютере пользователя от бразуера.
👌Есть определённый функционал, который осуществляет работу с хранилищем, представленный в виде нескольких методов и его свойств.
🙈Важное замечание, данные в localStorage хранятся в виде строк. Поэтому для хранения объектов / массивов - необходимо преобразовывать его в JSON формат через JSON.stringify() и при получении парсить через JSON.parse().
👉Глобальный объект, отвечающий за работу хранилища - localStoage.
👍Все способы работы с хранилищме представлены на скрине для удобства.
😱Так же, при получении несуществующего элемента из хранилища - нам вернётся null, без выбрасывания ошибки, что очень удобно и позволяет обходиться основыми операторами проверки как ??.
🔥3
блин вот би бил игэ па 0 прасмотраф на постах)
👍4
🤔Что такое Map? Или как сделать объекты всемогущими?
😊Все привыкли, что ключами для объекта являются значения либо строкового - либо числового формата. Но каким был бы наш мир, если бы появилась возможность сделать ключом для поля объекта - true, другой объект или NaN?
🙈Ответ! Наш мир остался бы таким же, потому что JavaScript предоставляет такую возможность уже сейчас.
👉Стуктура Map - инициализируется через ключевое слово new.
👍Map имеет определённые методы для взаимодействия.
set(ключ, значение) - позволяет ключом поставить всё что душе угодно.
get(ключ) - получение значения по ключу, или же возвращает undefined.
has(ключ) - получение true / false в зависимости от того имеется ли такой ключ или же такого ключа в нашем Map нет.
😳
😎Чтобы получить общую длину нашей Map - мы используем его свйоство size, вместо привычного length, как у массивов.
😊Все привыкли, что ключами для объекта являются значения либо строкового - либо числового формата. Но каким был бы наш мир, если бы появилась возможность сделать ключом для поля объекта - true, другой объект или NaN?
🙈Ответ! Наш мир остался бы таким же, потому что JavaScript предоставляет такую возможность уже сейчас.
👉Стуктура Map - инициализируется через ключевое слово new.
const myMap = new Map()👍Map имеет определённые методы для взаимодействия.
set(ключ, значение) - позволяет ключом поставить всё что душе угодно.
get(ключ) - получение значения по ключу, или же возвращает undefined.
has(ключ) - получение true / false в зависимости от того имеется ли такой ключ или же такого ключа в нашем Map нет.
😳
Мы можем поставить даже undefined в качестве ключа.😎Чтобы получить общую длину нашей Map - мы используем его свйоство size, вместо привычного length, как у массивов.
🔥1
🤩Провдинутая работа с объектами.
🔥Новое клонирование объекта, объект из массива.
🎲Объекты представляют определённый спектр работы для облегчения жизни разработичку в разных ситуациях.
При этом, методы, которые будут описаны в этом посте позволяют кооперировать с массивами.
🙈Для работы с этими методами мы можем обращаться к глобальному классу Object.
👉Object.keys(массив) - метод для получения всех ключей объекта в виде массива в строковом формате (при этом если у объекта есть ключи числового типа - они будут идти первее, в порядке возрастания, и уже потом последуют строковые ключи).
👉Object.values(массив) - метод для получения массива из значений объекта.
👉Object.entries(массив) - метод для получения массива, состоящего из массива двух элементов, являющихся парой ключ - значение.
🤔Так же, если мы имеем какой-то массив, представляющий собой результат метода - Object.entries() - мы можем сделать из него объект другим методом - Object.fromEntries(массив).
🫡Данный метод осуществляет неглубокое копирование, так что можно смело изменять его не-объектные свойства, без мутации родительского.
🔥Новое клонирование объекта, объект из массива.
🎲Объекты представляют определённый спектр работы для облегчения жизни разработичку в разных ситуациях.
При этом, методы, которые будут описаны в этом посте позволяют кооперировать с массивами.
🙈Для работы с этими методами мы можем обращаться к глобальному классу Object.
👉Object.keys(массив) - метод для получения всех ключей объекта в виде массива в строковом формате (при этом если у объекта есть ключи числового типа - они будут идти первее, в порядке возрастания, и уже потом последуют строковые ключи).
👉Object.values(массив) - метод для получения массива из значений объекта.
👉Object.entries(массив) - метод для получения массива, состоящего из массива двух элементов, являющихся парой ключ - значение.
🤔Так же, если мы имеем какой-то массив, представляющий собой результат метода - Object.entries() - мы можем сделать из него объект другим методом - Object.fromEntries(массив).
🫡Данный метод осуществляет неглубокое копирование, так что можно смело изменять его не-объектные свойства, без мутации родительского.
🔥2
Dead Coders Society | Всё о Frontend, JavaScript, TypeScript pinned «🤩Провдинутая работа с объектами. 🔥Новое клонирование объекта, объект из массива. 🎲Объекты представляют определённый спектр работы для облегчения жизни разработичку в разных ситуациях. При этом, методы, которые будут описаны в этом посте позволяют кооперировать…»
🔥Что такое JSON?
🌟JSON - (JavaScript Object Notation) широкоиспользуемый текстовый (принимается JavaScript в виде строки) формат хранения, передавания данных в объектом формате JavaScript.
Данный формат часто используется при получении данных от сервера, который необходимо преборазовать в понятный объектно-массивный формат для языка JavaScript.
🫡В основном файлы содержащие JSON инфомацию представлены в виде расширения .json.
👍Чтобы работать в JavaScript с JSON, имеется одноименный глобальный класс, предоставляющий ряд методов.
Сегодня мы расскажем вам о двух самых основных.
👉JSON.stringify(объект) - для форматирования объекта в JSON строку. Так же, это может быть как объект, так и массив.
Единственное правило, JSON не может содержать undefined в качестве ключа - значения.
👉JSON.parse(json-строка) - преобразование JSON формата в понятный JavaScript объект / массив.
🤓Есть небольая хитрость, чтобы делать глубокое копирование объекта. Преобразовать объект, копию которого мы желаем сделать в JSON, и распарсить в другую переменную, которая будет хранить новую копию.
🧠https://jsonplaceholder.typicode.com/ - сайт, на котором вы можете потренироваться в полчении и преобразовании JSON формата.
🌟JSON - (JavaScript Object Notation) широкоиспользуемый текстовый (принимается JavaScript в виде строки) формат хранения, передавания данных в объектом формате JavaScript.
Данный формат часто используется при получении данных от сервера, который необходимо преборазовать в понятный объектно-массивный формат для языка JavaScript.
🫡В основном файлы содержащие JSON инфомацию представлены в виде расширения .json.
👍Чтобы работать в JavaScript с JSON, имеется одноименный глобальный класс, предоставляющий ряд методов.
Сегодня мы расскажем вам о двух самых основных.
👉JSON.stringify(объект) - для форматирования объекта в JSON строку. Так же, это может быть как объект, так и массив.
Единственное правило, JSON не может содержать undefined в качестве ключа - значения.
👉JSON.parse(json-строка) - преобразование JSON формата в понятный JavaScript объект / массив.
🤓Есть небольая хитрость, чтобы делать глубокое копирование объекта. Преобразовать объект, копию которого мы желаем сделать в JSON, и распарсить в другую переменную, которая будет хранить новую копию.
JSON.parse(JSON.stringify(объект))🧠
❤3
🔥Как делать глубокую копию объекта?
😊Все мы давно уже знаем, что можно делать копии объекта через Object.assign(), циклы перебора значений и перезаписи в новую перменнную, но есть определённые неудобства использования этих спобов.
👉Первый.
Object.assign - не даёт вам глубокое копирование исходного объекта, так как его внутренние объекты будут переданы по ссылке и так же будут изменены.
👉Второй.
Кастомные циклы весьма длинные и порой некоторым разработчикам может будет сложно вникнуть в суть происходящего.
Есть решение этой ситауции!
🤓Первый вариант представляет собой быстрый и лаконичный способ приведения объекта в JSON строку, и его обратный парсинг в объект, который не имеет связи в первоначальным объектом.
😎Второй вариант, уже представленный в виде встроенной JavaScript функции, которая изначально служит для глубокого копирования объекта без неудобств.
🙈Данная функция именуется как structuredClone().
Первым параметром она принимает копируемый объект и возвращает его копию. Функция так же имеет второй необязательный параметр в виде объекта со свойством transfer для представления добавляемого ArrayBuffer, но можно не забивать этим голову, так как удовлетворения первого параметра будет более чем достаточно для глубокой копии.
😊Все мы давно уже знаем, что можно делать копии объекта через Object.assign(), циклы перебора значений и перезаписи в новую перменнную, но есть определённые неудобства использования этих спобов.
👉Первый.
Object.assign - не даёт вам глубокое копирование исходного объекта, так как его внутренние объекты будут переданы по ссылке и так же будут изменены.
👉Второй.
Кастомные циклы весьма длинные и порой некоторым разработчикам может будет сложно вникнуть в суть происходящего.
Есть решение этой ситауции!
🤓Первый вариант представляет собой быстрый и лаконичный способ приведения объекта в JSON строку, и его обратный парсинг в объект, который не имеет связи в первоначальным объектом.
😎Второй вариант, уже представленный в виде встроенной JavaScript функции, которая изначально служит для глубокого копирования объекта без неудобств.
🙈Данная функция именуется как structuredClone().
Первым параметром она принимает копируемый объект и возвращает его копию. Функция так же имеет второй необязательный параметр в виде объекта со свойством transfer для представления добавляемого ArrayBuffer, но можно не забивать этим голову, так как удовлетворения первого параметра будет более чем достаточно для глубокой копии.
👍1🔥1
🫡Какие бывают области видимости?
🤔Часто встречаемый вопорс на собеседованиях, особенно на позицию Junior Frontend разработчика - это вопрос относительно переменных let,const / var - а так же областей видимости, к которым они относятся.
🤓И так, можно в целом выделить три области видимости.
1) Глобальная. Область видимости, чьи объекты могут быть вызвани, даже при условии, что мы явно их не видим. Например, объект window при работе браузером. Это пример глобального объекта. А так же сюда относятся все переменные / функции которые объявлены вне вложенного контекста.
2) Функциональная. Область видимости в теле функции выделенной фигурными скобками (curly braces). Обеспечивает видимость var переменных лишь внутри данной области видимости.
3) Блочная. Так же определяет доступ взаимодействия с переменными, но уже на этот раз с const / let, по меркам языка, не так давно пришедшими к нам. Объявляется так же фигурными скобками, но в отличии от var - недоступны вне любых блоков данных скобок.
🤔Часто встречаемый вопорс на собеседованиях, особенно на позицию Junior Frontend разработчика - это вопрос относительно переменных let,const / var - а так же областей видимости, к которым они относятся.
🤓И так, можно в целом выделить три области видимости.
1) Глобальная. Область видимости, чьи объекты могут быть вызвани, даже при условии, что мы явно их не видим. Например, объект window при работе браузером. Это пример глобального объекта. А так же сюда относятся все переменные / функции которые объявлены вне вложенного контекста.
2) Функциональная. Область видимости в теле функции выделенной фигурными скобками (curly braces). Обеспечивает видимость var переменных лишь внутри данной области видимости.
3) Блочная. Так же определяет доступ взаимодействия с переменными, но уже на этот раз с const / let, по меркам языка, не так давно пришедшими к нам. Объявляется так же фигурными скобками, но в отличии от var - недоступны вне любых блоков данных скобок.
👍4