Меню
✘Скрыть меню
Меню заработка
✘Скрыть меню
Загрузка.. nostroma.online from NOSTROMA - best life and beautiful workЭто ужасно тяжелая работа — ничего не делать – Оскар УайльдРешающую роль в работе играет не всегда материал, но всегда мастер – Максим ГорькийЯ слишком энергичен, чтобы работать – Марсель АшарЧто привлекло меня в карьере писателя? Отсутствие бумажной работы.Одни люди работают только для того чтобы работать, другие – для того, чтобы иметь возможность не работать в будущем.Занятие ерундой на рабочем месте развивает боковое зрение, слух и бдительность в целомСтоит статýя в лучах заката с огромным буем, в руках - граната.Друзья, если вы попались на лохотрон, не будьте эгоистами - предупредите других о таком сайте!Секрет гения — это работа, настойчивость и здравый смысл. Томас Эдисон
Меню заработка

Курсы JavaScript

Урок 19. Объект Date - работа с датой и временем, объект window, параметры окна, метод confirm().

Содержание курса

Объект Date - работа с датой и временем

Объект Date хранит внутри себя точку на оси времени с точностью до тысячной доли секунды. Обратите внимание, что это не часики, внутри него ничего самостоятельно не "тикает", Date хранит только точку времени в момент своего создания или вызова. У этого объекта также есть множество методов, на некоторые из которых мы и посмотрим чуть ниже.

Объект Date создаётся при помощи функции-конструктора Date() и оператора new. Если никаких параметров не указано, то объект Date берёт в себя момент своего создания по локальным часам компьютера пользователя:

var d1 = new Date();

У объекта Date есть три группы методов - с префиксом get, с префиксом set, и с префиксом to



Методы объекта Date с префиксом to позволяют превратить параметры даты и времени в строку, т.е. предназначены для отображения на экране. К примеру, toLocale предназаначены для вывода даты/времени в соответствии с региональными настройками пользователя:

var d1 = new Date();

console.log(d1.toLocaleString());
/* Выведет: 21.12.2018, 6:00:34 */

console.log(d1.toLocaleDateString());
/* Выведет: 21.12.2018 */

console.log(d1.toLocaleTimeString());
/* Выведет: 6:00:34 */

Как видно из примера, метод toLocaleTimeString() выводит только время, а метод toLocaleDateString() - только дату.

Объект Date можно создавать на любую дату - для этого в качестве параметров нужно указать год, месяц (нумеруются с нуля!), день месяца, часы, минуты, секунды:

var d1 = new Date(2004, 4, 25, 18, 00, 00);

console.log(d1.toLocaleString());
/* Выведет: 25.05.2004, 18:00:00 */

Методы объекта Date с префиксом get позволяют получить отдельные элементы даты/времени (только дату, только часы, только секунды и т.д.):

var d1 = new Date();

console.log(d1.getFullYear());
/* Выведет: 2018 */

Метод getDay() возвращает порядковый номер дня недели, отсчёт начинается с воскресенья. Рассмотрим пример, где узнем, на какой день недели приходится новый год 2025 года:

/* Создадим массив с днями недели, начиная с воскресенья */
var days = new Array("воскресенье", "понедельник", "вторник", "среда", "четверг", "пятница", "суббота");

/* Создадим объект Date на 1 января 2025 года */
var newYear = new Date(2025, 0, 1);

/* Выводим день недели, указывая в качестве индекса массива days
 порядковый номер дня, который возвращает метод getDay() */
console.log("Новый год 2025 будет " + days[newYear.getDay()]);

/* Выведет: Новый год 2025 будет среда */

Методы с префиксом set позволяют изменить в уже созданном объекте Date какой-либо из компонентов:

var d1 = new Date();

console.log(d1.toString());
/* Выведет: Sat Dec 22 2018 05:39:36 GMT+0600 (Восточный Казахстан) */

d1.setFullYear(2025);
console.log(d1.toString());
/* Выведет: Mon Dec 22 2025 05:42:47 GMT+0600 (Восточный Казахстан) */

Если в качестве параметра методу setHours() передать больше 23 часов, то он будет складывать параметры даты/времени увеличивая нужные компоненты:

var d1 = new Date(2025, 0, 1, 0, 0, 0);

console.log(d1.toString());
/* Выведет: Wed Jan 01 2025 00:00:00 GMT+0600 (Восточный Казахстан) */

d1.setHours(32);
console.log(d1.toString());
/* Выведет: Thu Jan 02 2025 08:00:00 GMT+0600 (Восточный Казахстан) */

Вот ещё например: какая дата/время будет через миллион минут после настоящего момента (момент написания этого урока)? Посмотрим:

var d1 = new Date();
d1.setMinutes(1000000);
console.log(d1.toString());
/* Выведет: Sun Nov 15 2020 15:40:33 GMT+0600 (Восточный Казахстан) */

Таким образом, это будет воскресенье, 15 ноября 2020 года 15:40:33 по GMT+0600 (Восточный Казахстан). Во как!

Метод Date.parse(param1) получает строку с датой (напр. "Jan 08, 2012") и возвращает целое число, представляющее собой количество миллисекунд, истекших с полуночи 1 января 1970 года GMT+0 (этот момент называют «эпохой Unix») до даты, указанной в переданном параметре param1:

var d1 = new Date();
var param1 = d1.toString();
console.log(param1);
/* Выведет: Sun Dec 23 2018 11:54:55 GMT+0600 (Восточный Казахстан) */

var objDate = Date.parse(param1);
console.log(objDate);
/* Выведет: 1545544495000 */

Объект window. Параметры окна

В примере ниже показаны методы работы с тремя основными параметрами окна:

статусная строка - метод window.defaultStatus
внутреннее имя окна - метод window.name
получение статусной строки браузера - метод window.status
При этом установка статуса не работает в конфигурации по умолчанию Firefox и ряда других браузеров.

Вызывать функции JavaScript можно по нажатию на ссылку. Для этого в значении href нужно указать javascript: и далее имя функции с круглыми скобками. Естественно, вызываемая функция должна существовать, т.е. должна быть описана в самом документе, либо в подключённом js файле:

<!DOCTYPE html>
	<html>
		<head>
			<meta charset="utf-8">
			<title>Вызов функции по ссылке</title>
		</head>
		<body>
			<h1>Объект window. Параметры окна</h1>
			<div id="links">
			<!-- Создаём две ссылки с внутренним именем окна "searchWindow" -->
				<a href="http://www.google.ru" target="searchWindow">Goolge</a>
				<br />
				<a href="http://www.yandex.ru" target="searchWindow">Yandex</a>
				<br />
				
			<!-- Создаём ссылки при клике на которые запускается код JavaScript -->
				<a href="javascript:demoDefaultStatus()">defaultStatus</a>
				<br />
				<a href="javascript:demoName()">name</a>
				<br />
				<a href="javascript:demoStatus()">status</a>
			</div>
			
			<p id="status"></p>
			
			<script>
			
				function demoDefaultStatus(){
		   var d = new Date();
		   window.defaultStatus = d.toLocaleString();
		   alert(window.defaultStatus);
		}
		function demoName(){
		   window.name = "newWindow";
		   alert(window.name);
		}
		function demoStatus(){
		   window.status = "Строка статуса";
		   var status = document.querySelector("#status");
		   status.textContent = window.status;
		}
			
			</script>
		</body>
	</html>
Показать в браузере (откроется в новой вкладке)

Первая и вторая ссылки загружают страницы поисковых систем Гугл и Яндекс в новом окне с внутренним именем "searchWindow", при этом в случае повторных кликов по этим ссылкам новое окно не будет создаваться, а данные будут загружаться в уже созданное окно "searchWindow". При нажатии на третью ссылку в статусной строке браузера будет отображено время (работает только в Internet Explorer), четвёртая ссылка меняет внутреннее имя текущего окна на "newWindow", пятая ссылка устанавливает статусную строку как "Строка статуса".

Метод ввода/вывода confirm()

Ранее мы уже познакомились с методами alert() и prompt(). Рассмотрим ещё один метод - confirm() - это метод с одним параметром - вопрос, который вы можете задать пользователю и у него появляется диалоговое окно с вашим вопросом и двумя кнопками "ok" и "отмена". confirm() возвращает true если пользователь нажмёт "ok" и false, в случае, если была нажата "отмена":

<!DOCTYPE html>
	<html>
		<head>
			<meta charset="utf-8">
			<title></title>
			<style>
				p{
					cursor: pointer;
					text-decoration: underline;
					color: mediumblue;
				}
			</style>
		</head>
		<body>
			<p onclick="question()">Ответить на вопрос</p>
			<div></div>
			
			<script>
		
		function question(){
		 var answer = confirm("Вы перешли из поиска?");
		 if(answer == true){
		   answer = "из поиска";
		 }else {answer = "нет, не из поиска";}
		 document.querySelector("div").textContent = answer;
		}
		
		
			</script>
			
		</body>
	</html>
Показать в браузере (откроется в новой вкладке)

Комментарии

Введите Ваше имя:*

Введите e-mail:

Ваш комментарий:*

* Обязательные поля