Назад Вперед Зміст

const newWindow = window.open("", "newWindow", "width=300,height=200"); const heading = newWindow.document.createElement("h2"); heading.textContent = "Привіт! Це нове вікно."; newWindow.document.body.appendChild(heading); newWindow.document.body.style.fontFamily = "Arial, sans-serif"; newWindow.document.body.style.padding = "20px";

Пояснення кроків:

Крок 1: Створюємо нове вікно через window.open.

Крок 2: Створюємо заголовок <h2>.

Крок 3: Додаємо текст заголовка.

Крок 4: Додаємо заголовок у body нового вікна.

Крок 5: Стилізуємо шрифт і відступи для body.

const newWindow = window.open("", "newWindow", "width=350,height=250"); const heading = newWindow.document.createElement("h2"); heading.textContent = "Привіт! Це нове вікно."; const innerButton = newWindow.document.createElement("button"); innerButton.textContent = "Натисни мене!"; innerButton.addEventListener("click", () => alert("Ти натиснув кнопку у новому вікні!")); newWindow.document.body.appendChild(heading); newWindow.document.body.appendChild(innerButton);

Пояснення кроків:

Створюємо нове вікно.

Створюємо заголовок <h2>.

Додаємо текст заголовка.

Створюємо кнопку у новому вікні.

Встановлюємо текст кнопки та обробник події alert.

Додаємо заголовок і кнопку у body нового вікна.

const newWindow = window.open("", "newWindow", "width=400,height=300"); const heading = newWindow.document.createElement("h2"); heading.textContent = "Привіт! Це нове вікно."; const textContainer = newWindow.document.createElement("div"); const addButton = newWindow.document.createElement("button"); let counter = 1; addButton.addEventListener("click", () => { const newLine = newWindow.document.createElement("p"); newLine.textContent = "Це рядок номер " + counter; textContainer.appendChild(newLine); counter++; }); newWindow.document.body.appendChild(heading); newWindow.document.body.appendChild(addButton); newWindow.document.body.appendChild(textContainer);

Пояснення кроків:

Створюємо нове вікно.

Створюємо заголовок <h2>.

Додаємо текст заголовка.

Створюємо контейнер для рядків тексту.

Створюємо кнопку та лічильник. Додаємо обробник події для додавання рядків.

Додаємо заголовок, кнопку та контейнер у body нового вікна.

const newWindow = window.open("", "newWindow", "width=450,height=350"); const heading = newWindow.document.createElement("h2"); heading.textContent = "Привіт! Це нове вікно."; const textContainer = newWindow.document.createElement("div"); const addButton = newWindow.document.createElement("button"); const clearButton = newWindow.document.createElement("button"); const closeButton = newWindow.document.createElement("button"); let counter = 1; const maxLines = 10; addButton.addEventListener("click", () => { if(counter<=maxLines){ const newLine = newWindow.document.createElement("p"); newLine.textContent = "Це рядок номер " + counter; textContainer.appendChild(newLine); counter++; } else { alert("Досягнуто максимум рядків (" + maxLines + ")"); }}); clearButton.addEventListener("click", () => { textContainer.innerHTML=""; counter=1; }); closeButton.addEventListener("click", () => newWindow.close()); newWindow.document.body.appendChild(heading); newWindow.document.body.appendChild(addButton); newWindow.document.body.appendChild(clearButton); newWindow.document.body.appendChild(closeButton); newWindow.document.body.appendChild(textContainer);

Пояснення кроків:

Створюємо нове вікно.

Створюємо заголовок <h2>.

Додаємо текст заголовка.

Контейнер для рядків тексту та додавання елементів у body.

Створюємо кнопки: Додати рядок, Очистити, Закрити. Додаємо обробники подій.

ЛАБОРАТОРНА РОБОТА №4

Варіант 1.

На сторінці форма з 10 кнопками. На п'яти кнопках написано прізвище художника, на п'яти - "закрити вікно". Написати скрипт, що містить всього дві функції, одну для відкриття вікна з картиною відповідного художника, а іншу його закриття. Створити ще п'ять сторінок із зображенням картин художників.

Якось так:

Варіант 2.

На сторінці кнопка "Показати", при натисканні на неї з'являється спливаюче вікно з картиною і "Х", кліку на "Х" вікно закривається і на консолі пишеться прізвище художника та назва картини. Використовувати методи DOM і CallBack - функції.

Якось так:

Назад Вперед Зміст