Coding for Future in Lutsk. JavaScript. Part 13

Задача 57
Напишіть функцію formatDate(date), яка виводить дату і час
date у форматі гг:хх дд.мм.рр.
Наприклад:
var d = new Date(2017, 5, 15, 20, 15);
alert( formatDate(d) ); // '20:15 15.06.17'
Зауваження: повинні бути присутні ведучі нулі, тобто 1
січня 2001 повинно бути 01.01.01, а не 1.1.1.
Розв’язок (з коментарями і належним оформленням коду)
надішліть на адресу viligurskyi@gmail.com

Date.now()
Метод Date.now() повертає дату зразу у
вигляді мілісекунд.
Аналогічний до +new Date(), але значно
швидший, оскільки не створює проміжного
об’єкту Date.
Ще один спосіб: new Date().getTime()

Дати можна віднімати, отримуючи
різницю в мілісекундах. Це корисно для
вимірювання інтервалів часу.
Приклад:
<script>
var start = new Date; // засікли час
// щось виконуємо
for (var i = 0; i < 10000; i++) {
for (var j = 0; j < 10000; j++) {
var doSomething =i*j;
}
}
var end = new Date; // кінець вимірювання
alert( "Цикл зайняв " + (end - start) + " ms" );
</script>

Задача 58
Виведіть тривалість Вашого життя у
секундах, хвилинах, годинах і днях.
Приклад:
Я прожив:
1409938889 секунд
23498981 хвилин
391649 годин
16318 днів

Розв’язок
<script>
var birthday = +new Date(1972, 9, 16);
var now = Date.now();
document.write("Я прожив:<br>" +
Math.floor((now - birthday)/1000) + "
секунд<br>");
document.write(Math.floor((now -
birthday)/1000/60) + " хвилин<br>");
birthday)/1000/60/60) + " годин<br>");
birthday)/1000/60/60/24) + " днів<br>");
</script>

DOM. Продовження
childNodes, firstChild, lastChild
Властивість childNodes повертає
колекцію дочірніх вузлів елемента,
включно з текстовими.
Вузлами є, зокрема, тексти, навіть
пробіли і коментарі.
Доступ до вузлів можливий за їхніми
індексами (починаючи з 0).

Приклад.
<p>Кількість і перелік вузлів</p>
<div id="myDIV">
<p>Перший абзац (index 1)</p>
<p>Другий абзац (index 3)</p>
</div>
<p id="demo"></p>
<script>
var n =
document.getElementById("myDIV").childNodes.length; //5!
document.getElementById("demo").innerHTML = "Кількість
вузлів: " + n;
for (var i = 0; i < n; i++) {
document.getElementById("demo").innerHTML +=
"<br>" + document.getElementById("myDIV").childNodes[i];
}
</script>

firstChild і lastChild забезпечують
швидкий доступ до першого і останнього
елементів:
elem.childNodes[0] === elem.firstChild
elem.childNodes[elem.childNodes.length -
1] === elem.lastChild

Навігація по елементах
children на противагу childNodes дає
доступ тільки до дочірніх вузлів-
елементів, тобто до тегів.
children – дочірні вузли-елементи (теги).
firstElementChild, lastElementChild –
перший і останній діти-елементи.
previousElementSibling,
nextElementSibling – сусіди-елементи.
parentElement – батьківський елемент.

Попередній приклад з children замість childNodes.
<p>Кількість і перелік вузлів</p>
<div id="myDIV">
<p>Перший абзац (index 0)</p>
<p>Другий абзац (index 1)</p>
</div>
<p id="demo"></p>
<script>
var n =
document.getElementById("myDIV").children.length;
document.getElementById("demo").innerHTML = "Кількість
елементів: " + n;
for (var i = 0; i < n; i++) {
document.getElementById("demo").innerHTML +=
"<br>" + document.getElementById("myDIV").children[i];
}
</script>

Приклад дітей елемента body.
<body>
<p>Абзац 1</p>
<div>
<p>Абзац 2 (в DIV'і)</p>
</div>
<p id="demo"></p>
<script>
var c = document.body.children;
var txt = "";
for (var i = 0; i < c.length; i++) {
txt = txt + c[i].tagName + "<br>";
}
document.getElementById("demo").innerHTML = txt;
</script>
</body>

Мають місце рівності:
elem.firstElementChild ===
elem.children[0]
elem.lastElementChild ===
elem.children[elem.children.length - 1]

Додавання і вилучення вузлів
Для створення нових елементів сторінки
за допомогою JavaScript
використовуються методи:
document.createElement(element)
document.appendChild(element)

Наприклад, створимо новий елемент з
заданим тегом:
document.createElement(tag)
var par =
document.createElement("P");
Так створюється новий порожній абзац,
який ще не поміщений нікуди, тобто в
жодний елемент документа.

Далі створимо новий текстовий вузол:
document.createTextNode(text)
var t =
document.createTextNode("Якийсь
текст");
Так створюється текстовий вузол з
наповненням, який ще не поміщений
нікуди, тобто в жодний елемент
документа.

Тепер додамо текстовий вузол в
елемент за допомогою appendChild.
Синтаксис:
parentElem.appendChild(node)
Додається node у кінець дочірніх
елементів parentElem.
Приклад:
par.appendChild(t);
Так текстовий t вузол поміщаємо в
абзац par, але сам абзац ще нікуди не
поміщений.

Абзац поміщаємо в body документа вже
знайомим методом appendChild:
document.body.appendChild(par);
Повністю:
<body>
<p>Перший абзац</p>
<script>
var par = document.createElement("P");
var t = document.createTextNode("Другий
абзац");
par.appendChild(t);
</script>
</body>

Можна помістити елемент всередину іншого
елемента (якщо це допускається в HTML):
<div id="div1">
<p>Текст в DIV'і</p>
</div>
<p>Перший абзац</p>
<script>
var t = document.createTextNode("Другий абзац");
par.appendChild(t);
document.getElementById("div1").appendChild(par);
</script>

Один і той самий елемент не можна вставити двічі.
<div id="div1">
<p>Текст в DIV1</p>
</div>
<div id="div2">
<p>Текст в DIV2</p>
</div>
<script>
var t = document.createTextNode("Новий текст");
par.appendChild(t);
// скасується наступним рядком
</script>
Але елемент можна клонувати (див. далі)

Задача 59
Створіть документ:
...
<ul id="List1">
<li>Coffee</li>
<li>Tea</li>
</ul>
<ul id="List2">
<li>Water</li>
<li>Milk</li>
</ul>
<script>
alert(1);
</script>
...
Напишіть після alert такий код, який перемістить
елемент "Milk" з другого списку в кінець першого.

Розв’язок
<ul id="List1">
<li>Coffee</li>
<li>Tea</li>
</ul>
<ul id="List2">
<li>Water</li>
<li>Milk</li>
</ul>
<script>
alert(1);
var x =
document.getElementById("List2").children[1];
document.getElementById("List1").appendChild(x);
</script>

Метод insertBefore()
Вставляє дочірній вузол перед вказаним
існуючим дочірнім елементом.
node.insertBefore(newnode, existingnode)
<ol id="list">
<li id="coffee">Кава</li>
<li id="milk">Молоко</li>
</ol>
<script>
var newLi = document.createElement('li');
newLi.innerHTML = 'Цукор';
list.insertBefore(newLi, milk);
</script>

Задача 60
...
<p><strong>Меню</strong></p>
<ol id="myList">
<li>Салат</li>
<li>Борщ</li>
<li>Картопля фрі</li>
<li>Кава</li>
</ol>
<script>
alert(1);
</script>
...
Напишіть після alert такий код, який буде вставляти
додатковий елемент в меню "Тістечко" перед елементом "Кава".

Розв’язок
...
<p><strong>Меню</strong></p>
<ol id="myList">
<li>Салат</li>
<li>Борщ</li>
<li>Картопля фрі</li>
<li>Кава</li>
</ol>
<script>
alert(1);
var newItem = document.createElement("LI");
var textnode = document.createTextNode("Тістечко");
newItem.appendChild(textnode);
var list = document.getElementById("myList");
list.insertBefore(newItem, list.children[3]);
</script>
...

Клонування вузлів. cloneNode()
Створює копію вузла і повертає вузол.
node.cloneNode(deep)
Необов’язковий логічний параметр deep
визначає глибину клонування:
elem.cloneNode(true) – копія з
атрибутами і дочірніми елементами.
elem.cloneNode(false) – без дочірніх
елементів (default).

Задача 61
...
<ul id="List1">
<li>Coffee</li>
<li>Tea</li>
</ul>
<ul id="List2">
<li>Water</li>
<li>Milk</li>
</ul>
<script>
alert(1);
</script>
...
Напишіть після alert такий код, який скопіює елемент
"Milk" з другого списку в кінець першого.

Розв’язок
<ul id="List1">
<li>Coffee</li>
<li>Tea</li>
</ul>
<ul id="List2">
<li>Water</li>
<li>Milk</li>
</ul>
<script>
alert(1);
var x =
document.getElementById("List2").children[1];
var y = x.cloneNode(true); // спробуйте і з false
document.getElementById("List1").appendChild(y);
</script>

Видалення і заміна вузлів
parentElem.removeChild(node)
Видаляє node з числа дітей parentElem.
parentElem.replaceChild(newNode, node)
Видаляє node і на його місце вставляє
newNode.

Задача 62
...
<ul id="List1">
<li>Coffee</li>
<li>Tea</li>
<li>Milk</li>
</ul>
<script>
alert(1);
</script>
...
Напишіть після alert такий код, який видалить
елемент "Tea" зі списку.

Розв’язок
<ul id="List1">
<li>Coffee</li>
<li>Tea</li>
<li>Milk</li>
</ul>
<script>
alert(1);
var list = document.getElementById("List1");
list.removeChild(list.children[0]);
</script>

Задача 63
...
<ul id="List1">
<li>Coffee</li>
<li>Tea</li>
<li>Milk</li>
</ul>
<script>
alert(1);
</script>
...
Напишіть після alert такий код, який замінить
елемент "Tea" на "Sugar".

Розв’язок
<ul id="List1">
<li>Coffee</li>
<li>Tea</li>
<li>Milk</li>
</ul>
<script>
alert(1);
var list = document.getElementById("List1");
var newItem = document.createElement("LI");
var textnode = document.createTextNode("Sugar");
newItem.appendChild(textnode);
list.replaceChild(newItem, list.children[1]);
</script>

Coding for Future in Lutsk. JavaScript. Part 13

More Related Content

More from Олег Вілігурський (20)

Coding for Future in Lutsk. JavaScript. Part 13