1

КП.ХПТК. 00481 - 25 81 01

зміст
1. Вступ 2
2. Технічні характеристики 3
2.1.Постановка задачі 3
2.2.Визначення структури вхідних даних 3
2.3.Визначення структури вихідних даних 4
2.4.Визначення вимог до технічних засобів 4
2.5.Опис мови програмування 4
2.6.Опис алгоритму рішення задачі 6
3. Виконання програми 10
4. Висновок 11
5. Список використаних джерел 12
6. Додаток А Схема алгоритму програми 13
7. Додаток Б Лістинг програми 14

1
 2
КП.ХПТК. 00481 - 25 81 01

вступ

У сучасному світі, коли кількість технічних досягнень стрімко зростає, а

спілкування з людьми з різних точок планети стає все доступнішим,
інформація та розвиток всіляких способів її передачі набувають величезного
значення. Відстань, на яку можна передати інформацію, помітно збільшується,
апаратура, що застосовується з цією метою, стає більш високотехнологічною.
Можна подумати, що вже неможливо придумати щось краще. Однак фахівці в
галузі телекомунікацій та IT-технологій вважають інакше і продовжують
займатися розробками. Вони працюють над підвищенням якості зберігання,
обробки і передачі інформації, створенням нових технологій.

Сьогодні вже важко уявити наше життя без комп'ютерів і комп'ютерних

програм, які керують комп'ютерами і виконуються на них. Мало кого цікавить,
як написані ці програми, яка при цьому використовувалась мова
програмування. Тому, в цій статті піде мова про мови програмування.

Багато поважних діячів від колишнього президента США Білла Клінтона до

творця Facebook Марка Цукерберга і фізика і космолога Стівена Хокінга
публічно заявляли про те, що базові навички програмування необхідні всім в
сучасному світі. «Уміння програмувати стало четвертою складовою
грамотності. Кожен повинен знати, як наш цифровий світ працює, не тільки
інженери»- вважає Марк Серман, виконавчий директор Mozilla Foundation.

Згідно з прогнозами Бюро трудової статистики США, зростання попиту на

ІТ-спеціалістів та професіоналів з технічною освітою складе 34% до 2019 року.
Багато фахівців вже в тій чи іншій мірі пов'язані з програмуванням. Наведемо
дані дослідження Університету Карнегі-Меллон 2005 року, яке передбачало,
що в 2012 році з 90 млн. працездатного населення в США понад 55 млн. будуть
використовувати електронні таблиці і бази даних, що можна вважати
елементарним програмуванням.

2
 3
КП.ХПТК. 00481 - 25 81 01

2 Технічні характеристики
2.1 Постановка задачі
Мій курсовий проект «Утиліта Секундомір для операційної системи
Windows» полягає у написанні программи, яка зможе вимірювати час.
Створення цієї програми необхідно для того щоб користувач зміг
засікати час.
Пограмма повинна вміти
-засікати час
-збрасувати час
-зупиняти час
Данна утиліта має працювати на операційній системі Windows, на данний момент
ця ОС є найпоширинішою серед користувачів компю’терів.при включені утиліти
вона демонструє таймер з кнопками для користування.

2.2 Визначення структури вхідних даних

Таблиця 2.1- Вхідні дані

№ Ідентифікатор Тип Діапазон Пояснення

1 time Показує секунди

seconds
2 time Показує хвилини
minutes
3 time Показує мілісекунди

milliseconds

3
 4
КП.ХПТК. 00481 - 25 81 01

2.3 Визначення структури вихідних даних

Таблиця 2.2- Вихідні дані

№ Ідентифікатор Тип Діапазон Пояснення
1 start Button - Кнопка запуску секундоміра
2 stop Button - Кнопка зупинки
3 reset Button - кнопка скидання часу

2.4 Визначення вимог до технічних засобів

Програма була розроблена на комп’ютері такої конфігурації:

- Intel Core i3 3.6 GHz;
- пам’ять 16 Гбайт;
- жорсткий диск 1 Тбайт;
- кольоровий монітор;
- операційна система Windows 10.
- Відео карта Nvidia Gtx 1060 6gb

Для нормального функціонування програми яка буде працювати на Оп Windows

Підійде майже любий компютер який дозволяє запускати програми.Операційна
система почнаючи з Windows 7.
2.5 Опис мови програмування
Для реалізації данної задачі я використовую програму Microsoft Visual Basic.
В ході розробки курсового проекту були використані такі мови як HTML,CSS,
JavaScript.

HTML

HTML (англ. HyperText Markup Language — мова розмітки гіпертексту) — це

мова тегів, якою пишуться гіпертекстові документи для мережі Інтернет.

4
 5
КП.ХПТК. 00481 - 25 81 01

Веб-браузери отримують HTML-документи з веб-сервера або з локальної пам'яті і

передають документи в мультимедійні веб-сторінки. HTML описує структуру веб-
сторінки семантично і спочатку включені сигнали для зовнішнього вигляду
документа.

Елементи HTML є будівельними блоками сторінок HTML. За допомогою

конструкцій HTML, зображення та інші об'єкти, такі як інтерактивні форми,
можуть бути вбудовані у візуалізовану сторінку. HTML надає засоби для
створення структурованих документів, позначаючи структурну семантику тексту,
наприклад заголовки, абзаци, списки, посилання, цитати та інші елементи.
Елементи HTML окреслені тегами, написаними з використанням кутових дужок.
Теги, такі як і безпосередньо вводять вміст на сторінку. Інші теги, такі
як<img /> <input /> <p>оточують і надають інформацію про текст документа і
можуть включати інші теги як піделементи. Браузери не показують теги HTML,
але використовують їх для інтерпретації вмісту сторінки.

HTML може вбудовувати програми, написані на мові сценаріїв,

наприклад JavaScript, що впливає на поведінку та вміст веб-сторінок. Включення
CSS визначає вигляд і компонування вмісту. World Wide Web Consortium (W3C),
які супроводжують як HTML і CSS стандартів, заохочує використання CSS над
явним презентаційним HTML з 1997 року.[1]

HTML впроваджує засоби для:[1]

 створення структурованого документа шляхом позначення структурного

складу тексту: заголовки, абзаци, списки, таблиці, цитати та інше;

 отримання інформації із Всесвітньої мережі через гіперпосилання;

 створення інтерактивних форм;

 включення зображень, звуку, відео, та інших об'єктів до тексту.

CSS

5
 6
КП.ХПТК. 00481 - 25 81 01

CSS є основною технологією всесвітньої павутини, поряд із HTML та JavaScript[1].

Найчастіше CSS використовують для візуальної презентації сторінок,

написаних HTML та XHTML, але формат CSS може застосовуватися до інших
видів XML-документів.

Специфікації CSS були створені та розвиваються Консорціумом Всесвітньої

мережі.

CSS має різні рівні та профілі. Наступний рівень CSS створюється на основі

попередніх, додаючи нову функціональність або розширюючи вже наявні функції.
Рівні позначаються як CSS1, CSS2 та CSS3. Профілі — сукупність правил CSS
одного або більше рівнів, створені для окремих типів пристроїв або інтерфейсів.
Наприклад, існують профілі CSS для принтерів, мобільних пристроїв тощо.

CSS (каскадна або блочна верстка) прийшла на заміну табличній верстці веб-

сторінок. Головна перевага блочної верстки — розділення змісту сторінки (даних)
та їхньої візуальної презентації.

JavaScript.

JavaScript (JS) — динамічна, об'єктно-орієнтована[4] прототипна мова
програмування. Реалізація стандарту ECMAScript. Найчастіше використовується
для створення сценаріїв вебсторінок, що надає можливість на
боці клієнта (пристрої кінцевого користувача) взаємодіяти з користувачем,
керувати браузером, асинхронно обмінюватися даними з сервером,
змінювати структуру та зовнішній вигляд вебсторінки.

JavaScript класифікують як прототипну (підмножина об'єктно-

орієнтованої), скриптову мову програмування з динамічною типізацією. Окрім
прототипної, JavaScript також частково підтримує інші парадигми програмування

6
 7
КП.ХПТК. 00481 - 25 81 01

(імперативну та частково функціональну) і деякі відповідні архітектурні

властивості, зокрема: динамічна та слабка типізація, автоматичне керування
пам'яттю, прототипне наслідування, функції як об'єкти першого класу.

2.6 Опис алгоритму рішення задачі

Java є об'єктно-орієнтованою мовою, тому такі поняття як "клас" і "об'єкт" грають
в ньому ключову роль. Будь-яку програму на Java можна уявити як набір
взаємодіючих між собою об'єктів.
Шаблоном або описом об'єкта є клас, а об'єкт являє екземпляр цього класу.
Можна ще провести наступну аналогію. У нас у всіх є деяке уявлення про людину
- наявність двох рук, двох ніг, голови, тулуба і т.д. Є деякий шаблон - цей шаблон
можна назвати класом. Реально ж існуюча людина (фактично екземпляр даного
класу) є об'єктом цього класу.
Клас визначається за допомогою ключового слова сlass

• патерн State дозволяє об'єкту змінювати свою поведінку в залежності від

внутрішнього стану. Створюється враження, що об'єкт змінив свій клас.
• патерн State є об'єктно-орієнтованої реалізацією кінцевого автомата.

class State {
constructor(startTimestamp, difference, suspended) {
this.startTimestamp = startTimestamp;
this.difference = difference;
this.suspended = suspended;
}

static ready() {
return new State(null, 0, 0);
}
}
7
 8
КП.ХПТК. 00481 - 25 81 01

Використовуйте клас глави Stopwatch. Об'єкт, який вимірює минулий час в

наносекундах. Це корисно для того, щоб виміряйте минулий час, використовуючи
цей клас замість прямих викликів до System. ... Альтернативне джерело часу може
бути замінений з причин тестування або продуктивності
.
class Stopwatch {
constructor(state) {
this.state = state;
this.requestAnimationId = null;
this.handleClickStart = this.handleClickStart.bind(this);
document
.getElementById("start")
.addEventListener("click", this.handleClickStart);
this.handleClickStop = this.handleClickStop.bind(this);
document
.getElementById("stop")
.addEventListener("click", this.handleClickStop);
this.handleClickReset = this.handleClickReset.bind(this);
document
.getElementById("reset")
.addEventListener("click", this.handleClickReset);
this.tick = this.tick.bind(this);
this.render();
}

static ready() {
return new Stopwatch(State.ready());

8
 9
КП.ХПТК. 00481 - 25 81 01

setState(newState) {
this.state = { ...this.state, ...newState };
this.render();
}

tick() {
this.setState({
difference: new Date(new Date() - this.state.startTimestamp)
});
this.requestAnimationId = requestAnimationFrame(this.tick);
}

Відповідає за старт відліку часу.

handleClickStart() {
if (this.state.startTimestamp) {
// Prevent multi clicks on start
return;
}
this.setState({
startTimestamp: new Date() - this.state.suspended,
suspended: 0
});
this.requestAnimationId = requestAnimationFrame(this.tick);
}

Відповідає за відліку часу.

9
 10
КП.ХПТК. 00481 - 25 81 01

handleClickStop() {
cancelAnimationFrame(this.requestAnimationId);
this.setState({
startTimestamp: null,
suspended: this.state.difference
});
}

Відповідає за скидання времни в секундомере

handleClickReset() {
cancelAnimationFrame(this.requestAnimationId);
this.setState(State.ready());
}

render() {
const { difference } = this.state;
const hundredths = (difference
? Math.floor(difference.getMilliseconds() / 10)
:0
)
.toString()
.padStart(2, "0");
const seconds = (difference ? Math.floor(difference.getSeconds()) : 0)
.toString()
.padStart(2, "0");
const minutes = (difference ? Math.floor(difference.getMinutes()) : 0)
.toString()

10
 11
КП.ХПТК. 00481 - 25 81 01

.padStart(2, "0");

// Render screen
document.getElementById("minutes").textContent = minutes;
document.getElementById("seconds").textContent = seconds;
document.getElementById("hundredths").textContent = hundredths;
}
}

StopwatchЕкземпляр може вимірювати витрачений час для одного інтервалу або

загальний час, витрачений на кілька інтервалів. У типовому Stopwatch сценарії
викликається Start метод, потім викликається Stop метод, а потім перевіряються
витрачений час за допомогою Elapsed Властивості.
const STOPWATCH = Stopwatch.ready();

11
 12
КП.ХПТК. 00481 - 25 81 01

Виконання програми
При відкридті веб сторінки перед вами з’явится сторінка на якій буде
секундомір.У ньому є три функції Start,stop,reset.При натиску на кнопку Start
почнется відлік часу зупинити його можна за допомогою кнопки stop,такой є
функція скидання часу reset.

12
 13
КП.ХПТК. 00481 - 25 81 01

Висновок
В даному курсовому проекті розроблена програма Утиліта «Секундомір» для
операційної системи Windows.
В результаті розробки проекту я розширив свої знання в сфері ОС Windows, та як
з ним працювати за допомогою мови програмування Html,CSS,JS.
Також я здобув багато навичків у написанні програм на мовах Html,CSS,JS.

13
 14
КП.ХПТК. 00481 - 25 81 01

Список використаних джерел

1. Довідник по Html- http://htmlbook.ru/html/
2. Довідник по JS- https://learn.javascript.ru/
3. Довідник по CSS- http://htmlbook.ru/css
4. Вікіпедія JS - https://uk.wikipedia.org/wiki/JavaScript
5. Вікіпедія CSS- https://uk.wikipedia.org/wiki/CSS
6. Вікіпедія Html - https://uk.wikipedia.org/wiki/HTML

14
 15
КП.ХПТК. 00481 - 25 81 01

Додаток А Схема алгоритму програми

15
 16
КП.ХПТК. 00481 - 25 81 01

Додаток б
Файл secundomer.html
<!doctype html>
<html>
<head>
<title>Stopwatch</title>
<link rel="stylesheet" type="text/css" href="style.css">
</head>

<body>
<div class="container">
<h1 class="screen">
<span id="minutes">
00
</span>:<span id="seconds">
00
</span>:<span id="hundredths">
00
</span>
</h1>
<div class="buttons">
<button id="start">START</button>
<button id="stop">STOP</button>
<button id="reset">RESET</button>

16
 17
КП.ХПТК. 00481 - 25 81 01

</div>
</div>

<script src="script.js"></script>
</body>
</html>
Файл script.js
class State {
constructor(startTimestamp, difference, suspended) {
this.startTimestamp = startTimestamp;
this.difference = difference;
this.suspended = suspended;
}

static ready() {
return new State(null, 0, 0);
}
}

class Stopwatch {
constructor(state) {
this.state = state;
this.requestAnimationId = null;
this.handleClickStart = this.handleClickStart.bind(this);
document
.getElementById("start")
.addEventListener("click", this.handleClickStart);
this.handleClickStop = this.handleClickStop.bind(this);
document

17
 18
КП.ХПТК. 00481 - 25 81 01

.getElementById("stop")
.addEventListener("click", this.handleClickStop);
this.handleClickReset = this.handleClickReset.bind(this);
document
.getElementById("reset")
.addEventListener("click", this.handleClickReset);
this.tick = this.tick.bind(this);
this.render();
}

static ready() {
return new Stopwatch(State.ready());
}

setState(newState) {
this.state = { ...this.state, ...newState };
this.render();
}

tick() {
this.setState({
difference: new Date(new Date() - this.state.startTimestamp)
});
this.requestAnimationId = requestAnimationFrame(this.tick);
}

handleClickStart() {
if (this.state.startTimestamp) {
// Prevent multi clicks on start

18
 19
КП.ХПТК. 00481 - 25 81 01

return;
}
this.setState({
startTimestamp: new Date() - this.state.suspended,
suspended: 0
});
this.requestAnimationId = requestAnimationFrame(this.tick);
}

handleClickStop() {
cancelAnimationFrame(this.requestAnimationId);
this.setState({
startTimestamp: null,
suspended: this.state.difference
});
}

handleClickReset() {
cancelAnimationFrame(this.requestAnimationId);
this.setState(State.ready());
}

render() {
const { difference } = this.state;
const hundredths = (difference
? Math.floor(difference.getMilliseconds() / 10)
:0
)
.toString()

19
 20
КП.ХПТК. 00481 - 25 81 01

.padStart(2, "0");
const seconds = (difference ? Math.floor(difference.getSeconds()) : 0)
.toString()
.padStart(2, "0");
const minutes = (difference ? Math.floor(difference.getMinutes()) : 0)
.toString()
.padStart(2, "0");

// Render screen
document.getElementById("minutes").textContent = minutes;
document.getElementById("seconds").textContent = seconds;
document.getElementById("hundredths").textContent = hundredths;
}
}

const STOPWATCH = Stopwatch.ready();

файл style.css
html {
height: 100%;
font-family: "Roboto Condensed", sans-serif;
}

body {
height: 100%;
display: flex;
justify-content: center;
align-items: center;
background-image: url(ghul.jpg);

20
 21
КП.ХПТК. 00481 - 25 81 01

.container {
box-shadow: 0 1px 4px rgba(0, 0, 0, 0.5);
padding: 15px;
border-radius: 5px;
background-color: #FF1493;
}

.screen {
margin: 0;
background-color: #cfcfcf;
color: #4B0082;
font-size: 64px;
border-radius: 5px;
padding: 10px;
cursor: default;
user-select: none;
box-shadow: 0 1px 4px rgba(0, 0, 0, 0.5);
}

.screen span {
display: inline-block;
width: 85px;
text-align: center;
}

.buttons {
display: flex;

21
 22
КП.ХПТК. 00481 - 25 81 01

margin: 10px -5px 0;

}

.buttons button {
flex: 1;
margin: 0 5px;
border: none;
font-size: 20px;
padding: 5px;
border-radius: 5px;
box-shadow: 0 1px 4px rgba(0, 0, 0, 0.5);
font-weight: bold;
color: #800080;
background-color: #000000;
outline: none;
cursor: pointer;
}

.buttons button:hover {
color: #000000;
background-color: #061539;
}

22