EDeev/web-tech
1
0
Fork 0
mirror of https://github.com/EDeev/web-tech.git synced 2026-10-08 04:59:38 +03:00
Code Releases 1 Activity

Экранирование данных из API перед вставкой в HTML (lab-04 … lab-10)

Browse source 
Названия блюд, состав заказов, адреса и прочие поля из общего учебного API подставлялись
в HTML-шаблоны как есть (innerHTML/insertAdjacentHTML) — запись с разметкой в API
выполнилась бы у каждого, кто открыл страницу. Добавлена функция esc(), все подстановки
данных в шаблонах проходят через неё (167 мест).
This commit is contained in:
Деев Егор Викторович 2026-10-02 21:39:04 +00:00
parent 654c305c21
commit 3d9bb53a15
12 changed files with 273 additions and 153 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

32
labs/lab-04/menu.js
View file

@ -1,3 +1,13 @@
// Экранирование данных перед вставкой в HTML (данные приходят из общего учебного API)
function esc(value) {
return String(value ?? '')
.replace(/&/g, '&')
.replace(/</g, '&lt;')
.replace(/>/g, '&gt;')
.replace(/"/g, '&quot;')
.replace(/'/g, '&#39;');
}
const selectedDishes = { const selectedDishes = {
soup: null, soup: null,
'main-course': null, 'main-course': null,
@ -36,11 +46,11 @@ function displayDishes() {
function createDishCard(dish) { function createDishCard(dish) {
return ` return `
<div class="dish-card" data-dish="${dish.keyword}"> <div class="dish-card" data-dish="${esc(dish.keyword)}">
<img src="${dish.image}" alt="${dish.name}"> <img src="${esc(dish.image)}" alt="${esc(dish.name)}">
<p class="dish-price">${dish.price} руб.</p> <p class="dish-price">${esc(dish.price)} руб.</p>
<p class="dish-name">${dish.name}</p> <p class="dish-name">${esc(dish.name)}</p>
<p class="dish-weight">${dish.count}</p> <p class="dish-weight">${esc(dish.count)}</p>
<button>Добавить</button> <button>Добавить</button>
</div> </div>
`; `;
@ -87,8 +97,8 @@ function updateOrderSummary() {
<div class="order-category"> <div class="order-category">
<h3>Суп</h3> <h3>Суп</h3>
<div class="order-item"> <div class="order-item">
<span>${selectedDishes.soup.name}</span> <span>${esc(selectedDishes.soup.name)}</span>
<span>${selectedDishes.soup.price} руб.</span> <span>${esc(selectedDishes.soup.price)} руб.</span>
</div> </div>
</div> </div>
`; `;
@ -107,8 +117,8 @@ function updateOrderSummary() {
<div class="order-category"> <div class="order-category">
<h3>Главное блюдо</h3> <h3>Главное блюдо</h3>
<div class="order-item"> <div class="order-item">
<span>${selectedDishes['main-course'].name}</span> <span>${esc(selectedDishes['main-course'].name)}</span>
<span>${selectedDishes['main-course'].price} руб.</span> <span>${esc(selectedDishes['main-course'].price)} руб.</span>
</div> </div>
</div> </div>
`; `;
@ -127,8 +137,8 @@ function updateOrderSummary() {
<div class="order-category"> <div class="order-category">
<h3>Напиток</h3> <h3>Напиток</h3>
<div class="order-item"> <div class="order-item">
<span>${selectedDishes.drink.name}</span> <span>${esc(selectedDishes.drink.name)}</span>
<span>${selectedDishes.drink.price} руб.</span> <span>${esc(selectedDishes.drink.price)} руб.</span>
</div> </div>
</div> </div>
`; `;

40
labs/lab-05/menu.js
View file

@ -1,3 +1,13 @@
// Экранирование данных перед вставкой в HTML (данные приходят из общего учебного API)
function esc(value) {
return String(value ?? '')
.replace(/&/g, '&amp;')
.replace(/</g, '&lt;')
.replace(/>/g, '&gt;')
.replace(/"/g, '&quot;')
.replace(/'/g, '&#39;');
}
const selectedDishes = { const selectedDishes = {
soup: null, soup: null,
'main-course': null, 'main-course': null,
@ -66,11 +76,11 @@ function displayDishes() {
function createDishCard(dish) { function createDishCard(dish) {
return ` return `
<div class="dish-card" data-dish="${dish.keyword}"> <div class="dish-card" data-dish="${esc(dish.keyword)}">
<img src="${dish.image}" alt="${dish.name}"> <img src="${esc(dish.image)}" alt="${esc(dish.name)}">
<p class="dish-price">${dish.price} руб.</p> <p class="dish-price">${esc(dish.price)} руб.</p>
<p class="dish-name">${dish.name}</p> <p class="dish-name">${esc(dish.name)}</p>
<p class="dish-weight">${dish.count}</p> <p class="dish-weight">${esc(dish.count)}</p>
<button>Добавить</button> <button>Добавить</button>
</div> </div>
`; `;
@ -119,8 +129,8 @@ function updateOrderSummary() {
<div class="order-category"> <div class="order-category">
<h3>Суп</h3> <h3>Суп</h3>
<div class="order-item"> <div class="order-item">
<span>${selectedDishes.soup.name}</span> <span>${esc(selectedDishes.soup.name)}</span>
<span>${selectedDishes.soup.price} руб.</span> <span>${esc(selectedDishes.soup.price)} руб.</span>
</div> </div>
</div> </div>
`; `;
@ -139,8 +149,8 @@ function updateOrderSummary() {
<div class="order-category"> <div class="order-category">
<h3>Главное блюдо</h3> <h3>Главное блюдо</h3>
<div class="order-item"> <div class="order-item">
<span>${selectedDishes['main-course'].name}</span> <span>${esc(selectedDishes['main-course'].name)}</span>
<span>${selectedDishes['main-course'].price} руб.</span> <span>${esc(selectedDishes['main-course'].price)} руб.</span>
</div> </div>
</div> </div>
`; `;
@ -159,8 +169,8 @@ function updateOrderSummary() {
<div class="order-category"> <div class="order-category">
<h3>Салат</h3> <h3>Салат</h3>
<div class="order-item"> <div class="order-item">
<span>${selectedDishes.salad.name}</span> <span>${esc(selectedDishes.salad.name)}</span>
<span>${selectedDishes.salad.price} руб.</span> <span>${esc(selectedDishes.salad.price)} руб.</span>
</div> </div>
</div> </div>
`; `;
@ -179,8 +189,8 @@ function updateOrderSummary() {
<div class="order-category"> <div class="order-category">
<h3>Напиток</h3> <h3>Напиток</h3>
<div class="order-item"> <div class="order-item">
<span>${selectedDishes.drink.name}</span> <span>${esc(selectedDishes.drink.name)}</span>
<span>${selectedDishes.drink.price} руб.</span> <span>${esc(selectedDishes.drink.price)} руб.</span>
</div> </div>
</div> </div>
`; `;
@ -199,8 +209,8 @@ function updateOrderSummary() {
<div class="order-category"> <div class="order-category">
<h3>Десерт</h3> <h3>Десерт</h3>
<div class="order-item"> <div class="order-item">
<span>${selectedDishes.dessert.name}</span> <span>${esc(selectedDishes.dessert.name)}</span>
<span>${selectedDishes.dessert.price} руб.</span> <span>${esc(selectedDishes.dessert.price)} руб.</span>
</div> </div>
</div> </div>
`; `;

48
labs/lab-06/menu.js
View file

@ -1,3 +1,13 @@
// Экранирование данных перед вставкой в HTML (данные приходят из общего учебного API)
function esc(value) {
return String(value ?? '')
.replace(/&/g, '&amp;')
.replace(/</g, '&lt;')
.replace(/>/g, '&gt;')
.replace(/"/g, '&quot;')
.replace(/'/g, '&#39;');
}
const selectedDishes = { const selectedDishes = {
soup: null, soup: null,
'main-course': null, 'main-course': null,
@ -67,11 +77,11 @@ function displayDishes() {
function createDishCard(dish) { function createDishCard(dish) {
return ` return `
<div class="dish-card" data-dish="${dish.keyword}"> <div class="dish-card" data-dish="${esc(dish.keyword)}">
<img src="${dish.image}" alt="${dish.name}"> <img src="${esc(dish.image)}" alt="${esc(dish.name)}">
<p class="dish-price">${dish.price} руб.</p> <p class="dish-price">${esc(dish.price)} руб.</p>
<p class="dish-name">${dish.name}</p> <p class="dish-name">${esc(dish.name)}</p>
<p class="dish-weight">${dish.count}</p> <p class="dish-weight">${esc(dish.count)}</p>
<button>Добавить</button> <button>Добавить</button>
</div> </div>
`; `;
@ -99,7 +109,7 @@ function selectDish(dish) {
if (previousDish) { if (previousDish) {
const previousCard = document.querySelector( const previousCard = document.querySelector(
`.dish-card[data-dish="${previousDish.keyword}"]` `.dish-card[data-dish="${esc(previousDish.keyword)}"]`
); );
if (previousCard) { if (previousCard) {
previousCard.classList.remove('selected'); previousCard.classList.remove('selected');
@ -109,7 +119,7 @@ function selectDish(dish) {
selectedDishes[dish.category] = dish; selectedDishes[dish.category] = dish;
const currentCard = document.querySelector( const currentCard = document.querySelector(
`.dish-card[data-dish="${dish.keyword}"]` `.dish-card[data-dish="${esc(dish.keyword)}"]`
); );
if (currentCard) { if (currentCard) {
currentCard.classList.add('selected'); currentCard.classList.add('selected');
@ -139,8 +149,8 @@ function updateOrderSummary() {
<div class="order-category"> <div class="order-category">
<h3>Суп</h3> <h3>Суп</h3>
<div class="order-item"> <div class="order-item">
<span>${selectedDishes.soup.name}</span> <span>${esc(selectedDishes.soup.name)}</span>
<span>${selectedDishes.soup.price} руб.</span> <span>${esc(selectedDishes.soup.price)} руб.</span>
</div> </div>
</div> </div>
`; `;
@ -159,8 +169,8 @@ function updateOrderSummary() {
<div class="order-category"> <div class="order-category">
<h3>Главное блюдо</h3> <h3>Главное блюдо</h3>
<div class="order-item"> <div class="order-item">
<span>${selectedDishes['main-course'].name}</span> <span>${esc(selectedDishes['main-course'].name)}</span>
<span>${selectedDishes['main-course'].price} руб.</span> <span>${esc(selectedDishes['main-course'].price)} руб.</span>
</div> </div>
</div> </div>
`; `;
@ -179,8 +189,8 @@ function updateOrderSummary() {
<div class="order-category"> <div class="order-category">
<h3>Салат</h3> <h3>Салат</h3>
<div class="order-item"> <div class="order-item">
<span>${selectedDishes.salad.name}</span> <span>${esc(selectedDishes.salad.name)}</span>
<span>${selectedDishes.salad.price} руб.</span> <span>${esc(selectedDishes.salad.price)} руб.</span>
</div> </div>
</div> </div>
`; `;
@ -199,8 +209,8 @@ function updateOrderSummary() {
<div class="order-category"> <div class="order-category">
<h3>Напиток</h3> <h3>Напиток</h3>
<div class="order-item"> <div class="order-item">
<span>${selectedDishes.drink.name}</span> <span>${esc(selectedDishes.drink.name)}</span>
<span>${selectedDishes.drink.price} руб.</span> <span>${esc(selectedDishes.drink.price)} руб.</span>
</div> </div>
</div> </div>
`; `;
@ -219,8 +229,8 @@ function updateOrderSummary() {
<div class="order-category"> <div class="order-category">
<h3>Десерт</h3> <h3>Десерт</h3>
<div class="order-item"> <div class="order-item">
<span>${selectedDishes.dessert.name}</span> <span>${esc(selectedDishes.dessert.name)}</span>
<span>${selectedDishes.dessert.price} руб.</span> <span>${esc(selectedDishes.dessert.price)} руб.</span>
</div> </div>
</div> </div>
`; `;
@ -367,7 +377,7 @@ function restoreSelection() {
const dish = selectedDishes[category]; const dish = selectedDishes[category];
if (dish) { if (dish) {
const card = document.querySelector( const card = document.querySelector(
`.dish-card[data-dish="${dish.keyword}"]` `.dish-card[data-dish="${esc(dish.keyword)}"]`
); );
if (card) { if (card) {
card.classList.add('selected'); card.classList.add('selected');
@ -380,7 +390,7 @@ function resetSelection() {
Object.keys(selectedDishes).forEach(function(category) { Object.keys(selectedDishes).forEach(function(category) {
if (selectedDishes[category]) { if (selectedDishes[category]) {
const card = document.querySelector( const card = document.querySelector(
`.dish-card[data-dish="${selectedDishes[category].keyword}"]` `.dish-card[data-dish="${esc(selectedDishes[category].keyword)}"]`
); );
if (card) { if (card) {
card.classList.remove('selected'); card.classList.remove('selected');

48
labs/lab-07/menu.js
View file

@ -1,3 +1,13 @@
// Экранирование данных перед вставкой в HTML (данные приходят из общего учебного API)
function esc(value) {
return String(value ?? '')
.replace(/&/g, '&amp;')
.replace(/</g, '&lt;')
.replace(/>/g, '&gt;')
.replace(/"/g, '&quot;')
.replace(/'/g, '&#39;');
}
let dishes = []; let dishes = [];
const selectedDishes = { const selectedDishes = {
@ -90,11 +100,11 @@ function displayDishes() {
function createDishCard(dish) { function createDishCard(dish) {
return ` return `
<div class="dish-card" data-dish="${dish.keyword}"> <div class="dish-card" data-dish="${esc(dish.keyword)}">
<img src="${dish.image}" alt="${dish.name}"> <img src="${esc(dish.image)}" alt="${esc(dish.name)}">
<p class="dish-price">${dish.price} руб.</p> <p class="dish-price">${esc(dish.price)} руб.</p>
<p class="dish-name">${dish.name}</p> <p class="dish-name">${esc(dish.name)}</p>
<p class="dish-weight">${dish.count}</p> <p class="dish-weight">${esc(dish.count)}</p>
<button>Добавить</button> <button>Добавить</button>
</div> </div>
`; `;
@ -122,7 +132,7 @@ function selectDish(dish) {
if (previousDish) { if (previousDish) {
const previousCard = document.querySelector( const previousCard = document.querySelector(
`.dish-card[data-dish="${previousDish.keyword}"]` `.dish-card[data-dish="${esc(previousDish.keyword)}"]`
); );
if (previousCard) { if (previousCard) {
previousCard.classList.remove('selected'); previousCard.classList.remove('selected');
@ -132,7 +142,7 @@ function selectDish(dish) {
selectedDishes[dish.category] = dish; selectedDishes[dish.category] = dish;
const currentCard = document.querySelector( const currentCard = document.querySelector(
`.dish-card[data-dish="${dish.keyword}"]` `.dish-card[data-dish="${esc(dish.keyword)}"]`
); );
if (currentCard) { if (currentCard) {
currentCard.classList.add('selected'); currentCard.classList.add('selected');
@ -163,8 +173,8 @@ function updateOrderSummary() {
<div class="order-category"> <div class="order-category">
<h3>Суп</h3> <h3>Суп</h3>
<div class="order-item"> <div class="order-item">
<span>${selectedDishes.soup.name}</span> <span>${esc(selectedDishes.soup.name)}</span>
<span>${selectedDishes.soup.price} руб.</span> <span>${esc(selectedDishes.soup.price)} руб.</span>
</div> </div>
</div> </div>
`; `;
@ -183,8 +193,8 @@ function updateOrderSummary() {
<div class="order-category"> <div class="order-category">
<h3>Главное блюдо</h3> <h3>Главное блюдо</h3>
<div class="order-item"> <div class="order-item">
<span>${selectedDishes['main-course'].name}</span> <span>${esc(selectedDishes['main-course'].name)}</span>
<span>${selectedDishes['main-course'].price} руб.</span> <span>${esc(selectedDishes['main-course'].price)} руб.</span>
</div> </div>
</div> </div>
`; `;
@ -203,8 +213,8 @@ function updateOrderSummary() {
<div class="order-category"> <div class="order-category">
<h3>Салат</h3> <h3>Салат</h3>
<div class="order-item"> <div class="order-item">
<span>${selectedDishes.salad.name}</span> <span>${esc(selectedDishes.salad.name)}</span>
<span>${selectedDishes.salad.price} руб.</span> <span>${esc(selectedDishes.salad.price)} руб.</span>
</div> </div>
</div> </div>
`; `;
@ -223,8 +233,8 @@ function updateOrderSummary() {
<div class="order-category"> <div class="order-category">
<h3>Напиток</h3> <h3>Напиток</h3>
<div class="order-item"> <div class="order-item">
<span>${selectedDishes.drink.name}</span> <span>${esc(selectedDishes.drink.name)}</span>
<span>${selectedDishes.drink.price} руб.</span> <span>${esc(selectedDishes.drink.price)} руб.</span>
</div> </div>
</div> </div>
`; `;
@ -243,8 +253,8 @@ function updateOrderSummary() {
<div class="order-category"> <div class="order-category">
<h3>Десерт</h3> <h3>Десерт</h3>
<div class="order-item"> <div class="order-item">
<span>${selectedDishes.dessert.name}</span> <span>${esc(selectedDishes.dessert.name)}</span>
<span>${selectedDishes.dessert.price} руб.</span> <span>${esc(selectedDishes.dessert.price)} руб.</span>
</div> </div>
</div> </div>
`; `;
@ -391,7 +401,7 @@ function restoreSelection() {
const dish = selectedDishes[category]; const dish = selectedDishes[category];
if (dish) { if (dish) {
const card = document.querySelector( const card = document.querySelector(
`.dish-card[data-dish="${dish.keyword}"]` `.dish-card[data-dish="${esc(dish.keyword)}"]`
); );
if (card) { if (card) {
card.classList.add('selected'); card.classList.add('selected');
@ -404,7 +414,7 @@ function resetSelection() {
Object.keys(selectedDishes).forEach(function(category) { Object.keys(selectedDishes).forEach(function(category) {
if (selectedDishes[category]) { if (selectedDishes[category]) {
const card = document.querySelector( const card = document.querySelector(
`.dish-card[data-dish="${selectedDishes[category].keyword}"]` `.dish-card[data-dish="${esc(selectedDishes[category].keyword)}"]`
); );
if (card) { if (card) {
card.classList.remove('selected'); card.classList.remove('selected');

26
labs/lab-08/js/menu.js
View file

@ -1,3 +1,13 @@
// Экранирование данных перед вставкой в HTML (данные приходят из общего учебного API)
function esc(value) {
return String(value ?? '')
.replace(/&/g, '&amp;')
.replace(/</g, '&lt;')
.replace(/>/g, '&gt;')
.replace(/"/g, '&quot;')
.replace(/'/g, '&#39;');
}
let dishes = []; let dishes = [];
const selectedDishes = { const selectedDishes = {
@ -104,11 +114,11 @@ function displayDishes() {
function createDishCard(dish) { function createDishCard(dish) {
return ` return `
<div class="dish-card" data-dish="${dish.keyword}"> <div class="dish-card" data-dish="${esc(dish.keyword)}">
<img src="${dish.image}" alt="${dish.name}"> <img src="${esc(dish.image)}" alt="${esc(dish.name)}">
<p class="dish-price">${dish.price} руб.</p> <p class="dish-price">${esc(dish.price)} руб.</p>
<p class="dish-name">${dish.name}</p> <p class="dish-name">${esc(dish.name)}</p>
<p class="dish-weight">${dish.count}</p> <p class="dish-weight">${esc(dish.count)}</p>
<button>Добавить</button> <button>Добавить</button>
</div> </div>
`; `;
@ -136,7 +146,7 @@ function selectDish(dish) {
if (previousDish) { if (previousDish) {
const previousCard = document.querySelector( const previousCard = document.querySelector(
`.dish-card[data-dish="${previousDish.keyword}"]` `.dish-card[data-dish="${esc(previousDish.keyword)}"]`
); );
if (previousCard) { if (previousCard) {
previousCard.classList.remove('selected'); previousCard.classList.remove('selected');
@ -146,7 +156,7 @@ function selectDish(dish) {
selectedDishes[dish.category] = dish; selectedDishes[dish.category] = dish;
const currentCard = document.querySelector( const currentCard = document.querySelector(
`.dish-card[data-dish="${dish.keyword}"]` `.dish-card[data-dish="${esc(dish.keyword)}"]`
); );
if (currentCard) { if (currentCard) {
currentCard.classList.add('selected'); currentCard.classList.add('selected');
@ -298,7 +308,7 @@ function restoreSelection() {
const dish = selectedDishes[category]; const dish = selectedDishes[category];
if (dish) { if (dish) {
const card = document.querySelector( const card = document.querySelector(
`.dish-card[data-dish="${dish.keyword}"]` `.dish-card[data-dish="${esc(dish.keyword)}"]`
); );
if (card) { if (card) {
card.classList.add('selected'); card.classList.add('selected');

40
labs/lab-08/js/order.js
View file

@ -1,3 +1,13 @@
// Экранирование данных перед вставкой в HTML (данные приходят из общего учебного API)
function esc(value) {
return String(value ?? '')
.replace(/&/g, '&amp;')
.replace(/</g, '&lt;')
.replace(/>/g, '&gt;')
.replace(/"/g, '&quot;')
.replace(/'/g, '&#39;');
}
const API_URL = 'https://edu.std-900.ist.mospolytech.ru/labs/api'; const API_URL = 'https://edu.std-900.ist.mospolytech.ru/labs/api';
const API_KEY = '358a63a5-52ae-4ab0-800b-90f75ce5a5c2'; const API_KEY = '358a63a5-52ae-4ab0-800b-90f75ce5a5c2';
@ -101,11 +111,11 @@ function displayOrderDishes() {
function createOrderDishCard(dish) { function createOrderDishCard(dish) {
return ` return `
<div class="dish-card" data-dish-id="${dish.id}"> <div class="dish-card" data-dish-id="${esc(dish.id)}">
<img src="${dish.image}" alt="${dish.name}"> <img src="${esc(dish.image)}" alt="${esc(dish.name)}">
<p class="dish-price">${dish.price} руб.</p> <p class="dish-price">${esc(dish.price)} руб.</p>
<p class="dish-name">${dish.name}</p> <p class="dish-name">${esc(dish.name)}</p>
<p class="dish-weight">${dish.count}</p> <p class="dish-weight">${esc(dish.count)}</p>
<button class="remove-dish-btn">Удалить</button> <button class="remove-dish-btn">Удалить</button>
</div> </div>
`; `;
@ -177,8 +187,8 @@ function updateOrderSummary() {
<div class="order-category"> <div class="order-category">
<h3>Суп</h3> <h3>Суп</h3>
<div class="order-item"> <div class="order-item">
<span>${orderDishes.soup.name}</span> <span>${esc(orderDishes.soup.name)}</span>
<span>${orderDishes.soup.price} руб.</span> <span>${esc(orderDishes.soup.price)} руб.</span>
</div> </div>
</div> </div>
`; `;
@ -197,8 +207,8 @@ function updateOrderSummary() {
<div class="order-category"> <div class="order-category">
<h3>Главное блюдо</h3> <h3>Главное блюдо</h3>
<div class="order-item"> <div class="order-item">
<span>${orderDishes['main-course'].name}</span> <span>${esc(orderDishes['main-course'].name)}</span>
<span>${orderDishes['main-course'].price} руб.</span> <span>${esc(orderDishes['main-course'].price)} руб.</span>
</div> </div>
</div> </div>
`; `;
@ -217,8 +227,8 @@ function updateOrderSummary() {
<div class="order-category"> <div class="order-category">
<h3>Салат</h3> <h3>Салат</h3>
<div class="order-item"> <div class="order-item">
<span>${orderDishes.salad.name}</span> <span>${esc(orderDishes.salad.name)}</span>
<span>${orderDishes.salad.price} руб.</span> <span>${esc(orderDishes.salad.price)} руб.</span>
</div> </div>
</div> </div>
`; `;
@ -237,8 +247,8 @@ function updateOrderSummary() {
<div class="order-category"> <div class="order-category">
<h3>Напиток</h3> <h3>Напиток</h3>
<div class="order-item"> <div class="order-item">
<span>${orderDishes.drink.name}</span> <span>${esc(orderDishes.drink.name)}</span>
<span>${orderDishes.drink.price} руб.</span> <span>${esc(orderDishes.drink.price)} руб.</span>
</div> </div>
</div> </div>
`; `;
@ -257,8 +267,8 @@ function updateOrderSummary() {
<div class="order-category"> <div class="order-category">
<h3>Десерт</h3> <h3>Десерт</h3>
<div class="order-item"> <div class="order-item">
<span>${orderDishes.dessert.name}</span> <span>${esc(orderDishes.dessert.name)}</span>
<span>${orderDishes.dessert.price} руб.</span> <span>${esc(orderDishes.dessert.price)} руб.</span>
</div> </div>
</div> </div>
`; `;

26
labs/lab-09/js/menu.js
View file

@ -1,3 +1,13 @@
// Экранирование данных перед вставкой в HTML (данные приходят из общего учебного API)
function esc(value) {
return String(value ?? '')
.replace(/&/g, '&amp;')
.replace(/</g, '&lt;')
.replace(/>/g, '&gt;')
.replace(/"/g, '&quot;')
.replace(/'/g, '&#39;');
}
let dishes = []; let dishes = [];
const selectedDishes = { const selectedDishes = {
@ -104,11 +114,11 @@ function displayDishes() {
function createDishCard(dish) { function createDishCard(dish) {
return ` return `
<div class="dish-card" data-dish="${dish.keyword}"> <div class="dish-card" data-dish="${esc(dish.keyword)}">
<img src="${dish.image}" alt="${dish.name}"> <img src="${esc(dish.image)}" alt="${esc(dish.name)}">
<p class="dish-price">${dish.price} руб.</p> <p class="dish-price">${esc(dish.price)} руб.</p>
<p class="dish-name">${dish.name}</p> <p class="dish-name">${esc(dish.name)}</p>
<p class="dish-weight">${dish.count}</p> <p class="dish-weight">${esc(dish.count)}</p>
<button>Добавить</button> <button>Добавить</button>
</div> </div>
`; `;
@ -136,7 +146,7 @@ function selectDish(dish) {
if (previousDish) { if (previousDish) {
const previousCard = document.querySelector( const previousCard = document.querySelector(
`.dish-card[data-dish="${previousDish.keyword}"]` `.dish-card[data-dish="${esc(previousDish.keyword)}"]`
); );
if (previousCard) { if (previousCard) {
previousCard.classList.remove('selected'); previousCard.classList.remove('selected');
@ -146,7 +156,7 @@ function selectDish(dish) {
selectedDishes[dish.category] = dish; selectedDishes[dish.category] = dish;
const currentCard = document.querySelector( const currentCard = document.querySelector(
`.dish-card[data-dish="${dish.keyword}"]` `.dish-card[data-dish="${esc(dish.keyword)}"]`
); );
if (currentCard) { if (currentCard) {
currentCard.classList.add('selected'); currentCard.classList.add('selected');
@ -298,7 +308,7 @@ function restoreSelection() {
const dish = selectedDishes[category]; const dish = selectedDishes[category];
if (dish) { if (dish) {
const card = document.querySelector( const card = document.querySelector(
`.dish-card[data-dish="${dish.keyword}"]` `.dish-card[data-dish="${esc(dish.keyword)}"]`
); );
if (card) { if (card) {
card.classList.add('selected'); card.classList.add('selected');

40
labs/lab-09/js/order.js
View file

@ -1,3 +1,13 @@
// Экранирование данных перед вставкой в HTML (данные приходят из общего учебного API)
function esc(value) {
return String(value ?? '')
.replace(/&/g, '&amp;')
.replace(/</g, '&lt;')
.replace(/>/g, '&gt;')
.replace(/"/g, '&quot;')
.replace(/'/g, '&#39;');
}
const API_URL = 'https://edu.std-900.ist.mospolytech.ru/labs/api'; const API_URL = 'https://edu.std-900.ist.mospolytech.ru/labs/api';
const API_KEY = '358a63a5-52ae-4ab0-800b-90f75ce5a5c2'; const API_KEY = '358a63a5-52ae-4ab0-800b-90f75ce5a5c2';
@ -101,11 +111,11 @@ function displayOrderDishes() {
function createOrderDishCard(dish) { function createOrderDishCard(dish) {
return ` return `
<div class="dish-card" data-dish-id="${dish.id}"> <div class="dish-card" data-dish-id="${esc(dish.id)}">
<img src="${dish.image}" alt="${dish.name}"> <img src="${esc(dish.image)}" alt="${esc(dish.name)}">
<p class="dish-price">${dish.price} руб.</p> <p class="dish-price">${esc(dish.price)} руб.</p>
<p class="dish-name">${dish.name}</p> <p class="dish-name">${esc(dish.name)}</p>
<p class="dish-weight">${dish.count}</p> <p class="dish-weight">${esc(dish.count)}</p>
<button class="remove-dish-btn">Удалить</button> <button class="remove-dish-btn">Удалить</button>
</div> </div>
`; `;
@ -177,8 +187,8 @@ function updateOrderSummary() {
<div class="order-category"> <div class="order-category">
<h3>Суп</h3> <h3>Суп</h3>
<div class="order-item"> <div class="order-item">
<span>${orderDishes.soup.name}</span> <span>${esc(orderDishes.soup.name)}</span>
<span>${orderDishes.soup.price} руб.</span> <span>${esc(orderDishes.soup.price)} руб.</span>
</div> </div>
</div> </div>
`; `;
@ -197,8 +207,8 @@ function updateOrderSummary() {
<div class="order-category"> <div class="order-category">
<h3>Главное блюдо</h3> <h3>Главное блюдо</h3>
<div class="order-item"> <div class="order-item">
<span>${orderDishes['main-course'].name}</span> <span>${esc(orderDishes['main-course'].name)}</span>
<span>${orderDishes['main-course'].price} руб.</span> <span>${esc(orderDishes['main-course'].price)} руб.</span>
</div> </div>
</div> </div>
`; `;
@ -217,8 +227,8 @@ function updateOrderSummary() {
<div class="order-category"> <div class="order-category">
<h3>Салат</h3> <h3>Салат</h3>
<div class="order-item"> <div class="order-item">
<span>${orderDishes.salad.name}</span> <span>${esc(orderDishes.salad.name)}</span>
<span>${orderDishes.salad.price} руб.</span> <span>${esc(orderDishes.salad.price)} руб.</span>
</div> </div>
</div> </div>
`; `;
@ -237,8 +247,8 @@ function updateOrderSummary() {
<div class="order-category"> <div class="order-category">
<h3>Напиток</h3> <h3>Напиток</h3>
<div class="order-item"> <div class="order-item">
<span>${orderDishes.drink.name}</span> <span>${esc(orderDishes.drink.name)}</span>
<span>${orderDishes.drink.price} руб.</span> <span>${esc(orderDishes.drink.price)} руб.</span>
</div> </div>
</div> </div>
`; `;
@ -257,8 +267,8 @@ function updateOrderSummary() {
<div class="order-category"> <div class="order-category">
<h3>Десерт</h3> <h3>Десерт</h3>
<div class="order-item"> <div class="order-item">
<span>${orderDishes.dessert.name}</span> <span>${esc(orderDishes.dessert.name)}</span>
<span>${orderDishes.dessert.price} руб.</span> <span>${esc(orderDishes.dessert.price)} руб.</span>
</div> </div>
</div> </div>
`; `;

30
labs/lab-09/js/orders.js
View file

@ -1,3 +1,13 @@
// Экранирование данных перед вставкой в HTML (данные приходят из общего учебного API)
function esc(value) {
return String(value ?? '')
.replace(/&/g, '&amp;')
.replace(/</g, '&lt;')
.replace(/>/g, '&gt;')
.replace(/"/g, '&quot;')
.replace(/'/g, '&#39;');
}
const API_URL = 'https://edu.std-900.ist.mospolytech.ru/labs/api'; const API_URL = 'https://edu.std-900.ist.mospolytech.ru/labs/api';
const API_KEY = '358a63a5-52ae-4ab0-800b-90f75ce5a5c2'; const API_KEY = '358a63a5-52ae-4ab0-800b-90f75ce5a5c2';
@ -91,16 +101,16 @@ function createOrderCard(order, number) {
const deliveryTime = getDeliveryTime(order); const deliveryTime = getDeliveryTime(order);
return ` return `
<div class="order-card" data-order-id="${order.id}"> <div class="order-card" data-order-id="${esc(order.id)}">
<div class="order-card-header"> <div class="order-card-header">
<span class="order-number">Заказ №${number}</span> <span class="order-number">Заказ №${esc(number)}</span>
<span class="order-date">${date}</span> <span class="order-date">${esc(date)}</span>
</div> </div>
<div class="order-card-body"> <div class="order-card-body">
<div class="order-info"> <div class="order-info">
<p><strong>Состав:</strong> ${composition}</p> <p><strong>Состав:</strong> ${esc(composition)}</p>
<p><strong>Стоимость:</strong> ${price} руб.</p> <p><strong>Стоимость:</strong> ${esc(price)} руб.</p>
<p><strong>Доставка:</strong> ${deliveryTime}</p> <p><strong>Доставка:</strong> ${esc(deliveryTime)}</p>
</div> </div>
</div> </div>
<div class="order-card-footer"> <div class="order-card-footer">
@ -302,8 +312,8 @@ function showViewModal(order) {
orderItems.forEach(function(item) { orderItems.forEach(function(item) {
const itemHTML = ` const itemHTML = `
<div class="modal-order-item"> <div class="modal-order-item">
<span>${item.label}</span> <span>${esc(item.label)}</span>
<span>${item.name} (${item.price}Р)</span> <span>${esc(item.name)} (${esc(item.price)}Р)</span>
</div> </div>
`; `;
itemsContainer.insertAdjacentHTML('beforeend', itemHTML); itemsContainer.insertAdjacentHTML('beforeend', itemHTML);
@ -341,8 +351,8 @@ function showEditModal(order) {
orderItems.forEach(function(item) { orderItems.forEach(function(item) {
const itemHTML = ` const itemHTML = `
<div class="modal-order-item"> <div class="modal-order-item">
<span>${item.label}</span> <span>${esc(item.label)}</span>
<span>${item.name} (${item.price}Р)</span> <span>${esc(item.name)} (${esc(item.price)}Р)</span>
</div> </div>
`; `;
itemsContainer.insertAdjacentHTML('beforeend', itemHTML); itemsContainer.insertAdjacentHTML('beforeend', itemHTML);

26
labs/lab-10/js/menu.js
View file

@ -1,3 +1,13 @@
// Экранирование данных перед вставкой в HTML (данные приходят из общего учебного API)
function esc(value) {
return String(value ?? '')
.replace(/&/g, '&amp;')
.replace(/</g, '&lt;')
.replace(/>/g, '&gt;')
.replace(/"/g, '&quot;')
.replace(/'/g, '&#39;');
}
let dishes = []; let dishes = [];
const selectedDishes = { const selectedDishes = {
@ -104,11 +114,11 @@ function displayDishes() {
function createDishCard(dish) { function createDishCard(dish) {
return ` return `
<div class="dish-card" data-dish="${dish.keyword}"> <div class="dish-card" data-dish="${esc(dish.keyword)}">
<img src="${dish.image}" alt="${dish.name}"> <img src="${esc(dish.image)}" alt="${esc(dish.name)}">
<p class="dish-price">${dish.price} руб.</p> <p class="dish-price">${esc(dish.price)} руб.</p>
<p class="dish-name">${dish.name}</p> <p class="dish-name">${esc(dish.name)}</p>
<p class="dish-weight">${dish.count}</p> <p class="dish-weight">${esc(dish.count)}</p>
<button>Добавить</button> <button>Добавить</button>
</div> </div>
`; `;
@ -136,7 +146,7 @@ function selectDish(dish) {
if (previousDish) { if (previousDish) {
const previousCard = document.querySelector( const previousCard = document.querySelector(
`.dish-card[data-dish="${previousDish.keyword}"]` `.dish-card[data-dish="${esc(previousDish.keyword)}"]`
); );
if (previousCard) { if (previousCard) {
previousCard.classList.remove('selected'); previousCard.classList.remove('selected');
@ -146,7 +156,7 @@ function selectDish(dish) {
selectedDishes[dish.category] = dish; selectedDishes[dish.category] = dish;
const currentCard = document.querySelector( const currentCard = document.querySelector(
`.dish-card[data-dish="${dish.keyword}"]` `.dish-card[data-dish="${esc(dish.keyword)}"]`
); );
if (currentCard) { if (currentCard) {
currentCard.classList.add('selected'); currentCard.classList.add('selected');
@ -298,7 +308,7 @@ function restoreSelection() {
const dish = selectedDishes[category]; const dish = selectedDishes[category];
if (dish) { if (dish) {
const card = document.querySelector( const card = document.querySelector(
`.dish-card[data-dish="${dish.keyword}"]` `.dish-card[data-dish="${esc(dish.keyword)}"]`
); );
if (card) { if (card) {
card.classList.add('selected'); card.classList.add('selected');

40
labs/lab-10/js/order.js
View file

@ -1,3 +1,13 @@
// Экранирование данных перед вставкой в HTML (данные приходят из общего учебного API)
function esc(value) {
return String(value ?? '')
.replace(/&/g, '&amp;')
.replace(/</g, '&lt;')
.replace(/>/g, '&gt;')
.replace(/"/g, '&quot;')
.replace(/'/g, '&#39;');
}
const API_URL = 'https://edu.std-900.ist.mospolytech.ru/labs/api'; const API_URL = 'https://edu.std-900.ist.mospolytech.ru/labs/api';
const API_KEY = '358a63a5-52ae-4ab0-800b-90f75ce5a5c2'; const API_KEY = '358a63a5-52ae-4ab0-800b-90f75ce5a5c2';
@ -101,11 +111,11 @@ function displayOrderDishes() {
function createOrderDishCard(dish) { function createOrderDishCard(dish) {
return ` return `
<div class="dish-card" data-dish-id="${dish.id}"> <div class="dish-card" data-dish-id="${esc(dish.id)}">
<img src="${dish.image}" alt="${dish.name}"> <img src="${esc(dish.image)}" alt="${esc(dish.name)}">
<p class="dish-price">${dish.price} руб.</p> <p class="dish-price">${esc(dish.price)} руб.</p>
<p class="dish-name">${dish.name}</p> <p class="dish-name">${esc(dish.name)}</p>
<p class="dish-weight">${dish.count}</p> <p class="dish-weight">${esc(dish.count)}</p>
<button class="remove-dish-btn">Удалить</button> <button class="remove-dish-btn">Удалить</button>
</div> </div>
`; `;
@ -177,8 +187,8 @@ function updateOrderSummary() {
<div class="order-category"> <div class="order-category">
<h3>Суп</h3> <h3>Суп</h3>
<div class="order-item"> <div class="order-item">
<span>${orderDishes.soup.name}</span> <span>${esc(orderDishes.soup.name)}</span>
<span>${orderDishes.soup.price} руб.</span> <span>${esc(orderDishes.soup.price)} руб.</span>
</div> </div>
</div> </div>
`; `;
@ -197,8 +207,8 @@ function updateOrderSummary() {
<div class="order-category"> <div class="order-category">
<h3>Главное блюдо</h3> <h3>Главное блюдо</h3>
<div class="order-item"> <div class="order-item">
<span>${orderDishes['main-course'].name}</span> <span>${esc(orderDishes['main-course'].name)}</span>
<span>${orderDishes['main-course'].price} руб.</span> <span>${esc(orderDishes['main-course'].price)} руб.</span>
</div> </div>
</div> </div>
`; `;
@ -217,8 +227,8 @@ function updateOrderSummary() {
<div class="order-category"> <div class="order-category">
<h3>Салат</h3> <h3>Салат</h3>
<div class="order-item"> <div class="order-item">
<span>${orderDishes.salad.name}</span> <span>${esc(orderDishes.salad.name)}</span>
<span>${orderDishes.salad.price} руб.</span> <span>${esc(orderDishes.salad.price)} руб.</span>
</div> </div>
</div> </div>
`; `;
@ -237,8 +247,8 @@ function updateOrderSummary() {
<div class="order-category"> <div class="order-category">
<h3>Напиток</h3> <h3>Напиток</h3>
<div class="order-item"> <div class="order-item">
<span>${orderDishes.drink.name}</span> <span>${esc(orderDishes.drink.name)}</span>
<span>${orderDishes.drink.price} руб.</span> <span>${esc(orderDishes.drink.price)} руб.</span>
</div> </div>
</div> </div>
`; `;
@ -257,8 +267,8 @@ function updateOrderSummary() {
<div class="order-category"> <div class="order-category">
<h3>Десерт</h3> <h3>Десерт</h3>
<div class="order-item"> <div class="order-item">
<span>${orderDishes.dessert.name}</span> <span>${esc(orderDishes.dessert.name)}</span>
<span>${orderDishes.dessert.price} руб.</span> <span>${esc(orderDishes.dessert.price)} руб.</span>
</div> </div>
</div> </div>
`; `;

30
labs/lab-10/js/orders.js
View file

@ -1,3 +1,13 @@
// Экранирование данных перед вставкой в HTML (данные приходят из общего учебного API)
function esc(value) {
return String(value ?? '')
.replace(/&/g, '&amp;')
.replace(/</g, '&lt;')
.replace(/>/g, '&gt;')
.replace(/"/g, '&quot;')
.replace(/'/g, '&#39;');
}
const API_URL = 'https://edu.std-900.ist.mospolytech.ru/labs/api'; const API_URL = 'https://edu.std-900.ist.mospolytech.ru/labs/api';
const API_KEY = '358a63a5-52ae-4ab0-800b-90f75ce5a5c2'; const API_KEY = '358a63a5-52ae-4ab0-800b-90f75ce5a5c2';
@ -91,16 +101,16 @@ function createOrderCard(order, number) {
const deliveryTime = getDeliveryTime(order); const deliveryTime = getDeliveryTime(order);
return ` return `
<div class="order-card" data-order-id="${order.id}"> <div class="order-card" data-order-id="${esc(order.id)}">
<div class="order-card-header"> <div class="order-card-header">
<span class="order-number">Заказ №${number}</span> <span class="order-number">Заказ №${esc(number)}</span>
<span class="order-date">${date}</span> <span class="order-date">${esc(date)}</span>
</div> </div>
<div class="order-card-body"> <div class="order-card-body">
<div class="order-info"> <div class="order-info">
<p><strong>Состав:</strong> ${composition}</p> <p><strong>Состав:</strong> ${esc(composition)}</p>
<p><strong>Стоимость:</strong> ${price} руб.</p> <p><strong>Стоимость:</strong> ${esc(price)} руб.</p>
<p><strong>Доставка:</strong> ${deliveryTime}</p> <p><strong>Доставка:</strong> ${esc(deliveryTime)}</p>
</div> </div>
</div> </div>
<div class="order-card-footer"> <div class="order-card-footer">
@ -302,8 +312,8 @@ function showViewModal(order) {
orderItems.forEach(function(item) { orderItems.forEach(function(item) {
const itemHTML = ` const itemHTML = `
<div class="modal-order-item"> <div class="modal-order-item">
<span>${item.label}</span> <span>${esc(item.label)}</span>
<span>${item.name} (${item.price}Р)</span> <span>${esc(item.name)} (${esc(item.price)}Р)</span>
</div> </div>
`; `;
itemsContainer.insertAdjacentHTML('beforeend', itemHTML); itemsContainer.insertAdjacentHTML('beforeend', itemHTML);
@ -341,8 +351,8 @@ function showEditModal(order) {
orderItems.forEach(function(item) { orderItems.forEach(function(item) {
const itemHTML = ` const itemHTML = `
<div class="modal-order-item"> <div class="modal-order-item">
<span>${item.label}</span> <span>${esc(item.label)}</span>
<span>${item.name} (${item.price}Р)</span> <span>${esc(item.name)} (${esc(item.price)}Р)</span>
</div> </div>
`; `;
itemsContainer.insertAdjacentHTML('beforeend', itemHTML); itemsContainer.insertAdjacentHTML('beforeend', itemHTML);