Зразок веб-сторінки
середа, 28 листопада 2018 р.
вівторок, 27 листопада 2018 р.
Масиви
Опис масиву, додавання елементів, вивід в консоль і на сторінку
HTML
<!DOCTYPE html>
<head>
<meta charset="UTF-8">
<title>Масиви</title>
</head>
<body>
<p id="out"></p>
<script src="masyv.js" ></script>
</body>
</html>
понеділок, 26 листопада 2018 р.
неділя, 25 листопада 2018 р.
Умовний оператор
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Умовний оператор</title>
</head>
<body>
<p>Введіть число: <input type="text" id="num1"></p>
<button onclick="f1()">Дізнатися</button>
<hr>
<p id="out"></p>
<script src="2.js"></script>
</body>
</html>
<html>
<head>
<meta charset="UTF-8">
<title>Умовний оператор</title>
</head>
<body>
<p>Введіть число: <input type="text" id="num1"></p>
<button onclick="f1()">Дізнатися</button>
<hr>
<p id="out"></p>
<script src="2.js"></script>
</body>
</html>
Способи виведення тексту на сторінку
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Вивід тексту</title>
</head>
<body>
<p id="out">Тестова сторінка</p>
<hr>
<button onclick="out()">Пуск</button>
<script src="1.js"></script>
</body>
</html>
<html>
<head><meta charset="UTF-8">
<title>Вивід тексту</title>
</head>
<body>
<p id="out">Тестова сторінка</p>
<hr>
<button onclick="out()">Пуск</button>
<script src="1.js"></script>
</body>
</html>
середа, 21 листопада 2018 р.
вівторок, 20 листопада 2018 р.
Простий калькулятор на JavaScript
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title>Калькулятор</title>
</head>
<body>
<p>Число 1:<input type="text"></p>
<p>Число 2:<input type="text"></p>
<button>Додати</button>
<button>Відняти</button>
<hr>
<p>Результат</p>
</body>
</html>
<p>Число 2:<input type="text" id="n2"></p>
var num1, num2, result;
num1 = document.getElementById('n1').value;
num1 = parseInt(num1);
num2 = document.getElementById('n2').value;
num2 = parseInt(num2);
result = num1+num2;
document.getElementById('out').innerHTML = result;
}
<html>
<head>
<title>Калькулятор</title>
</head>
<body>
<p>Число 1:<input type="text"></p>
<p>Число 2:<input type="text"></p>
<button>Додати</button>
<button>Відняти</button>
<hr>
<p>Результат</p>
</body>
</html>
Додаємо ідентифікатори для input:
<p>Число 1:<input type="text" id="n1"></p><p>Число 2:<input type="text" id="n2"></p>
а також для button
<p id="out">Результат</p>Додаємо подію для кнопки
<button onclick="plus()">Додати</button>Пишемо функцію додавання:
function plus(){var num1, num2, result;
num1 = document.getElementById('n1').value;
num1 = parseInt(num1);
num2 = document.getElementById('n2').value;
num2 = parseInt(num2);
result = num1+num2;
document.getElementById('out').innerHTML = result;
}
І не забуваємо, що файл js треба під'єднати до html:
<script src="calc.js" ></script>понеділок, 19 листопада 2018 р.
вівторок, 13 листопада 2018 р.
понеділок, 12 листопада 2018 р.
Створюємо логотип
Створити логотип з геометричних фігур засобами CSS
Наприклад, як можна створити відомий логотип твіттера:
Тут більше прикладів:
середа, 7 листопада 2018 р.
Практична робота 3
1. Знайти найкоротший шлях за алгоритмом Дейкстри
2. Знайти матрицю шляхів за алгоритмом Флойда-Уоршелла
3. Побудувати для обох графів остове дерево
пʼятниця, 2 листопада 2018 р.
Самостійна робота
Реалізувати проект. За основу взяти таблицю стилів з сайту
https://www.impressivewebs.com/demo-files/css3-animated-scene/
Приклад, як в CSS отримати коло:
.circle {
https://www.impressivewebs.com/demo-files/css3-animated-scene/
Приклад, як в CSS отримати коло: .circle {
width: 100px;
height: 100px;
background: #cc0000;
-moz-border-radius: 50px;
-webkit-border-radius: 50px;
border-radius: 50px;
border-radius: 50px;
}
Підписатися на:
Дописи (Atom)