Coding for Future in Lutsk. JavaScript. Part 12

Зміна величини атрибута
Типовий синтаксис:
document.getElementById(id).attribute = new
value
Приклад:
<!DOCTYPE html>
<html>
<body>
<img id="myImage" src="smiley.gif">
<script>
document.getElementById("myImage").src =
"landscape.jpg";
</script>
</body>
</html>

Задача 53
Помістіть в документ зображення з id=
image і за допомогою скрипта збільшіть
його висоту і ширину на 20 px.
Вказівка:
document.getElementById("image").width
отримує чи встановлює ширину
зображення у пікселях.

Розв’язок
<!DOCTYPE html>
<html>
<body>
<img id="image" src="landscape.jpg" width="160"
height="120">
<script>
document.getElementById("image").width =
document.getElementById("image").width + 20;
</script>
<p>The original image was smiley.gif, but the script
changed it to landscape.jpg</p>
</body>
</html>

Ще один корисний приклад зміни атрибута –
атрибут value у елементах форм:
<input type="text" id="myText"
value="Hello">
<script>
document.getElementById("myText").value =
"Goodbye";
</script>

Об’єкт Date. Дата і час.
•Створюється конструктором new Date().
•Дата в розумінні об’єкту Date складається з
року, місяця, дня, години, хвилини, секунди і
мілісекунд.
•Є 4 способи ініціалізувати об’єкт Date:
new Date()
new Date(milliseconds)
new Date(year, month, day, hours, minutes,
seconds, milliseconds)
new Date(dateString)

Приклад 1. new Date()
<p id="demo"></p>
<script>
var now = new Date();
document.getElementById("demo").innerHTML =
now;
</script>
Результат на зразок:
Mon Jun 12 2017 22:12:08 GMT+0300

Приклад 2. new Date(milliseconds)
Створюється об’єкт Date, значення якого
рівне кількості мілісекунд, що минули з 1
січня 1970 року GMT+0.
var d = new Date(86400000);
document.getElementById("demo").innerHTML = d;
Результат:
Fri Jan 02 1970 02:00:00 GMT+0200
(86400000 = 24*60*60*1000, 1 доба)

Приклад 3. new Date(year, month,
date, hours, minutes, seconds, ms)
Обов’язкові тільки перші два аргументи. Відсутні
hours, minutes, seconds, ms заміняються нулями,
date – одиницею.
Рік (year) повинен бути з 4 цифр;
Відлік місяців – з нуля.
d = new Date(2017, 5, 12, 22, 42, 12, 0);
document.getElementById("demo").innerHTML = d;
Результат:
Mon Jun 12 2017 22:42:12 GMT+0300

Приклад 4. new Date(datestring)
Аргумент у повній формі задається так: YYYY-MM-
DDTHH:mm:ss.sssZ
YYYY-MM-DD – рік-місяць-день.
T – розділитель.
HH:mm:ss.sss – години-хвилини-секунди.мілісекунди.
Z – часова зона у форматі +-hh:mm або символ Z для
використання GMT.
Можна скорочено: YYYY-MM-DD або YYYY-MM або тільки
YYYY.
Приклад:
document.getElementById("demo").innerHTML =
new Date("2017-01-01T00:00:00Z");
Sun Jan 01 2017 02:00:00 GMT+0200

Задача 54
Створіть об’єкт Date з Вашою датою
народження і поточним часом. Виводьте у
вигляді:
Дата мого народження:
Sat Mar 09 1861 09:48:00 GMT+0200

Розв’язок
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
</head>
<body>
<p>Дата мого народження:</p>
<p id="demo"></p>
<script>
document.getElementById("demo").innerHTML = new
Date(1861,2,9,19,48); // 9 березня 1861 - д.н. Т.
Шевченка
</script>
</body>
</html>

Get-методи Date
Методи отримання інформації з Date:
getFullYear() – рік (з 4 цифр)
getMonth() – місяць, от 0 до 11
getDate() – число місяця, от 1 до 31
getHours() - (0-23)
getMinutes() - (0-59)
getSeconds() – (0-59)
getMilliseconds() - (0-999)
getDay() – день тижня від 0 (неділя) до 6
(субота)
getTime() - число мілісекунд від 1.01.1970
р. GMT+0

Приклад:
<p id="demo"></p>
<script>
var d = new Date();
document.getElementById("demo").
innerHTML = "Зараз " +
d.getDate() + "." +
(+d.getMonth() + 1) + "." +
d.getFullYear();
</script>

Задача 55
Створіть функцію getWeekDay(date),
яка виводить день тижня українською.
Виведіть поточний день тижня і день
Вашого народження.

Розв’язок
var date1 = new Date();
var date2 = new Date(1987, 3, 3, 12, 30, 0);
alert( getWeekDay(date1) );
alert( getWeekDay(date2) );
function getWeekDay(d) {
var days = ['неділя', 'понеділок', 'вівторок',
'середа', 'четвер', 'п'ятниця', 'субота'];
return days[d.getDay()];
}
P.S. Можна форматувати виведення дати методом
dateObj.toLocaleString([locales[, options]]). Знайдіть
інформацію самостійно, наприклад, на developer.mozilla.org

Set-методи Date
setFullYear(year [, month, date])
setMonth(month [, date])
setDate(date)
setHours(hour [, min, sec, ms])
setMinutes(min [, sec, ms])
setSeconds(sec [, ms])
setMilliseconds(ms)
setTime(milliseconds) (встановлює всю
дату по мілісекундах з 01.01.1970 UTC)

Приклад:
<p>Наступного року в цю пору
буде</p>
<p id="demo"></p>
<script>
var d = new Date();
d.setFullYear(d.getFullYear() +
1);
document.getElementById("demo").
innerHTML = d;
</script>

Автовиправлення дати
Допускається введення дати і часу в некоректному
вигляді. Наприклад, 30 лютого чи 26 год чи -12 хв.
var d = new Date(2017, 1, 30); // 30
лютого 2017 ?
alert(d); // Sat Mar 02 2013 00:00:00
GMT+0200 - 2 березня 2017!
var d = new Date;
d.setDate(-1); // передостаннє число
попереднього місяця

Задача 56
Напишіть функцію getLastDayOfMonth(year,
month), яка повертає останній день місяця.
Аргументи функції:
year – 4-значний рік.
month – місяць от 0 до 11.
Наприклад, getLastDayOfMonth(2012, 1) = 29
(високосний рік, лютий).
Підказка: нульовий день місяця JavaScript
перетворює в останній день попереднього місяця.

Розв’язок
function getLastDayOfMonth(year, month) {
var date = new Date(year, month + 1, 0);
return date.getDate();
}
// Тобто шукаємо 0-ий день наступного місяця

Coding for Future in Lutsk. JavaScript. Part 12

Recommended

Recommended

More Related Content

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

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

Recently uploaded

Recently uploaded (13)

Coding for Future in Lutsk. JavaScript. Part 12