Фронтендщик
رفتن به کانال در Telegram
Все для frontend developer, шуточки, тесты, статьи Администрация/Реклама @vtopua
نمایش بیشتر1 076
مشترکین
اطلاعاتی وجود ندارد24 ساعت
-57 روز
-1230 روز
در حال بارگیری داده...
کانالهای مشابه
![Frontender's notes [ru]](https://cdn.tlmtr.io/_next/image?url=https%3A%2F%2Fimg.tlmtr.io%2Fc%2F1qrVZ3%2F5348049928330532677%3Fty%3Dx&w=96&q=75){kind=small}
ابر برچسبها
اشارات ورودی و خروجی
---
---
---
---
---
---
جذب مشترکین
سپتامبر '26
سپتامبر '26
+1
در 0 کانالها
اوت '26
+1
در 0 کانالها
Get PRO
ژوئیه '26
+1
در 0 کانالها
Get PRO
ژوئن '260
در 1 کانالها
Get PRO
مه '260
در 0 کانالها
Get PRO
آوریل '260
در 1 کانالها
Get PRO
مارس '26
+1
در 0 کانالها
Get PRO
فوریه '26
+1
در 0 کانالها
Get PRO
ژانویه '260
در 0 کانالها
Get PRO
دسامبر '25
+1
در 0 کانالها
Get PRO
نوامبر '25
+1
در 0 کانالها
Get PRO
اکتبر '250
در 0 کانالها
Get PRO
سپتامبر '25
+7
در 0 کانالها
Get PRO
اوت '25
+1
در 0 کانالها
Get PRO
ژوئیه '25
+2
در 0 کانالها
Get PRO
ژوئن '25
+1
در 0 کانالها
Get PRO
مه '250
در 0 کانالها
Get PRO
آوریل '25
+1
در 0 کانالها
Get PRO
مارس '25
+6
در 0 کانالها
Get PRO
فوریه '25
+4
در 0 کانالها
Get PRO
ژانویه '25
+2
در 0 کانالها
Get PRO
دسامبر '240
در 1 کانالها
Get PRO
نوامبر '24
+1
در 0 کانالها
Get PRO
اکتبر '24
+1
در 0 کانالها
Get PRO
سپتامبر '24
+2
در 0 کانالها
Get PRO
اوت '24
+2
در 0 کانالها
Get PRO
ژوئیه '24
+3
در 0 کانالها
Get PRO
ژوئن '24
+3
در 0 کانالها
Get PRO
مه '24
+4
در 0 کانالها
Get PRO
آوریل '24
+3
در 0 کانالها
Get PRO
مارس '24
+3
در 0 کانالها
Get PRO
فوریه '24
+3
در 1 کانالها
Get PRO
ژانویه '24
+2
در 0 کانالها
Get PRO
دسامبر '23
+3
در 0 کانالها
Get PRO
نوامبر '23
+4
در 0 کانالها
Get PRO
اکتبر '23
+3
در 0 کانالها
Get PRO
سپتامبر '23
+8
در 0 کانالها
Get PRO
اوت '23
+4
در 0 کانالها
Get PRO
ژوئیه '23
+14
در 0 کانالها
Get PRO
ژوئن '23
+6
در 0 کانالها
Get PRO
مه '23
+8
در 0 کانالها
Get PRO
آوریل '23
+41
در 0 کانالها
Get PRO
مارس '23
+6
در 0 کانالها
Get PRO
فوریه '23
+9
در 0 کانالها
Get PRO
ژانویه '23
+17
در 0 کانالها
Get PRO
دسامبر '22
+177
در 0 کانالها
Get PRO
نوامبر '22
+142
در 0 کانالها
Get PRO
اکتبر '22
+26
در 0 کانالها
Get PRO
سپتامبر '22
+328
در 0 کانالها
Get PRO
اوت '22
+1 290
در 0 کانالها
Get PRO
ژوئیه '22
+106
در 0 کانالها
Get PRO
ژوئن '22
+2
در 0 کانالها
Get PRO
مه '220
در 0 کانالها
Get PRO
آوریل '220
در 0 کانالها
Get PRO
مارس '220
در 0 کانالها
Get PRO
فوریه '220
در 0 کانالها
Get PRO
ژانویه '220
در 0 کانالها
Get PRO
دسامبر '210
در 0 کانالها
Get PRO
نوامبر '21
+1
در 0 کانالها
Get PRO
اکتبر '21
+1
در 0 کانالها
Get PRO
سپتامبر '21
+4
در 0 کانالها
Get PRO
اوت '210
در 0 کانالها
Get PRO
ژوئیه '210
در 0 کانالها
Get PRO
ژوئن '21
+1
در 0 کانالها
Get PRO
مه '210
در 0 کانالها
Get PRO
آوریل '21
+3
در 0 کانالها
Get PRO
مارس '21
+2
در 0 کانالها
Get PRO
فوریه '210
در 0 کانالها
Get PRO
ژانویه '21
+1
در 0 کانالها
Get PRO
دسامبر '20
+1 226
در 0 کانالها
| تاریخ | رشد مشترکین | اشارات | کانالها | |
| 18 سپتامبر | 0 | |||
| 17 سپتامبر | 0 | |||
| 16 سپتامبر | 0 | |||
| 15 سپتامبر | 0 | |||
| 14 سپتامبر | 0 | |||
| 13 سپتامبر | 0 | |||
| 12 سپتامبر | 0 | |||
| 11 سپتامبر | 0 | |||
| 10 سپتامبر | 0 | |||
| 09 سپتامبر | 0 | |||
| 08 سپتامبر | 0 | |||
| 07 سپتامبر | 0 | |||
| 06 سپتامبر | 0 | |||
| 05 سپتامبر | 0 | |||
| 04 سپتامبر | 0 | |||
| 03 سپتامبر | 0 | |||
| 02 سپتامبر | +1 | |||
| 01 سپتامبر | 0 |
پستهای کانال
Первый путь - это сказать, что это нормальное поведение и просто проверять ифами наличие нужных нам атрибутов:
function getCost(elem) {
if (elem.dataset.price
!== undefined && elem.dataset.amount
!== undefined) {
return elem.dataset.price
* elem.dataset.amount;
} else {
return 0; // вернем
что-нибудь, например,
0 или null или false
}
}
📌 #instr || Фронтендщик
| 2 | Если теперь попробовать посчитать стоимость товара, то результате на экран выведется NaN. Согласитесь, не очень информативно.
Получается, нам нужно как-то обезопасится от того, что будут отсутствовать нужные нам атрибуты. Это можно сделать двумя путями.
📌 #instr || Фронтендщик | 14 |
| 3 | Найдем стоимость нашего продукта:
let product = document.querySelector('#product');
let cost = getCost(product);
alert(cost);
Предположим теперь следующую ситуацию: из-за какого-то сбоя на сервере он прислал нам товар, в котором отсутствует цена или количество (или оба сразу), например, вот так:
<div id="product"
data-product="яблоко" data-price="1000">
</div>
📌 #instr || Фронтендщик | 18 |
| 4 | Давайте сделаем функцию, которая будет принимать ссылку на элемент с продуктом и находить полную стоимость товара (цену умножать на количество):
function getCost(elem) {
return elem.dataset.price
* elem.dataset.amount;
}
📌 #instr || Фронтендщик | 21 |
| 5 |  Пример исключения с data- атрибутами в JavaScript
Пусть при загрузке страницы сервер создает HTML код, в котором хранится название, цена и количество купленного продукта:
<div id="product"
data-product="яблоко" data-price="1000"
data-amount="5"></div>
📌 #instr || Фронтендщик | 23 |
| 6 | Существуют разные способы сделать это. Самый простой - в throw передать объект с ключами name и message:
try {
throw {name: 'MyError',
message: 'текст
исключения'};
} catch (error) {
console.log(error.name);
// 'MyError'
console.log(error.message);
// 'текст
исключения'
}
📌 #instr || Фронтендщик | 19 |
| 7 | Выбрасывание своих типов исключений в JavaScript
Количество встроенных в JavaScript исключений не такое большое и они чаще всего не могут удовлетворить все наши потребности в разных типах исключений. Поэтому в JavaScript встроена возможность создавать исключения со своим типом.
📌 #instr || Фронтендщик | 16 |
| 8 |  В JavaScript предусмотрено решение этой проблемы: можно выбрасывать исключения не только типа
Error, но и любого встроенного в JavaScript типа ошибки, например, TypeError, SyntaxError, RangeError.
Давайте для примера выбросим исключение типа
SyntaxError:
try {
throw new SyntaxError('текст
исключения');
} catch (error) {
console.log(error.name);
// 'SyntaxError'
console.log(error.message);
// 'текст
исключения'
}
📌 #instr || Фронтендщик | 18 |
| 9 | Как вы видите, тип нашего исключения - 'Error'. Такой же тип будет у любых исключений, выброшенных подобным образом. Это, однако, не всегда будет удобно, так как, если у нас могут быть несколько исключений, мы не сможем их отличить друг от друга.
📌 #instr || Фронтендщик | 16 |
| 10 | Давайте для примера выбросим исключение типа SyntaxError:
try {
throw new SyntaxError('текст
исключения');
} catch (error) {
console.log(error.name);
// 'SyntaxError'
console.log(error.message);
// 'текст
исключения'
}
📌 #instr || Фронтендщик | 20 |
| 11 | В JavaScript предусмотрено решение этой проблемы: можно выбрасывать исключения не только типа Error, но и любого встроенного в JavaScript типа ошибки, например, TypeError, SyntaxError, RangeError.
📌 #instr || Фронтендщик | 18 |
| 12 | Как вы видите, тип нашего исключения - 'Error'. Такой же тип будет у любых исключений, выброшенных подобным образом. Это, однако, не всегда будет удобно, так как, если у нас могут быть несколько исключений, мы не сможем их отличить друг от друга.
📌 #instr || Фронтендщик | 19 |
| 13 | Выбрасывание различных типов исключений в JavaScript
Давайте выбросим свое исключение и посмотрим, как будет вести себя объект с ошибкой в этом случае:
try {
throw new Error('текст
исключения');
} catch (error) {
console.log(error.name);
// 'Error'
console.log(error.message);
// 'текст
исключения'
}
📌 #instr || Фронтендщик | 19 |
| 14 |  Давайте теперь будем перехватывать нашу ошибку и как-то ее обрабатывать:
try {
alert( div(3, 0) );
} catch (error) {
alert('вы пытаетесь
делить на
0, что запрещено');
}
📌 #instr || Фронтендщик | 20 |
| 15 | Давайте для начала просто попробуем поделить на 0, не перехватывая исключение:
alert( div(3, 0) );
В этом случае выполнение скрипта прервется и в консоли появится ошибка с текстом 'ошибка деления на ноль' (проверьте).
📌 #instr || Фронтендщик | 24 |
| 16 | Давайте будем считать, что деление на ноль запрещено и при попытке сделать это должна возникать исключительная ситуация. Для этого будем проверять в функции, нет ли попытки делить на 0. Если нет - будем делить, а если да - будем бросать исключение:
function div(a, b) {
if (b !== 0) {
return a / b;
} else {
throw new Error('ошибка
деления на
ноль');
}
}
📌 #instr || Фронтендщик | 21 |
| 17 | Выбрасывание исключения заставляет JavaScript считать, что случилась исключительная ситуация. Это значит, что такое исключение можно отловить с помощью конструкции try-catch и обработать нужным образом.
Давайте посмотрим на примере, как этим пользоваться. Пусть у нас есть функция, которая делит одно число на другое:
function div(a, b) {
return a / b;
}
📌 #instr || Фронтендщик | 21 |
| 18 | Давайте разберем синтаксис, необходимый для этого. Для начала исключение нужно создать с помощью команды new Error, параметром передав текст исключения:
new Error('текст исключения');
Затем это исключение нужно выбросить с помощью команды throw:
throw new Error('текст
исключения');
📌 #instr || Фронтендщик | 21 |
| 19 | Выбрасывание исключений в JavaScript
В предыдущих уроках мы изучили два места, в которых JavaScript выбрасывает исключение в случае каких-то проблем.
В вашем проекте, однако, могут быть и другие ситуации, которые для вас являются исключительными, а для JavaScript - нет. В таком случае мы можете создавать и выбрасывать свои, пользовательские исключения.
📌 #instr || Фронтендщик | 25 |
| 20 |  Наше сообщение, это, конечно, хорошо, но оно никак не дифференцирует возникшие проблемы. Более логично было бы вывести сообщение о том, какая именно проблема возникла.
Для этого отличим возникшие ошибки по имени:
try {
saveData('{1,2,3,4,5}');
} catch (error) {
if (error.name ==
'QuotaExceededError') {
alert('закончилось
место в
хранилище');
}
if (error.name ==
'SyntaxError') {
alert('некорректный JSON');
}
}
📌 #instr || Фронтендщик | 23 |
