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

Курсы JavaScript

Урок 6. DOM - объектная модель документа, подключение JavaScript к HTML-документу, объект Window.


Оператор void

Иногда, при вычислении кода, например функций, JavaScript выводит информацию, которая не связана с переданным функции значением. Это может быть подробный вывод всех переменных встроенной функции, которые ожидают какого-либо аргумента или результат их вычисления, который нам совсем не нужен. Чтобы этого избежать используется префиксный оператор void.

Рассмотрим простой пример - зададим обратный отсчёт в 5 сек., по истечении которого в консоль браузера будет выведена некоторая строка:

	setTimeout(function(){console.log ('Привет!');}, 5000);
	
	// Выведет 10 и через 5 сек. строку "Привет!" 
	

Что это за 10? - Результат каких-то внутренних скрытых вычислений, о чём позднее. Однако сейчас нам эти вычисления не нужны и тем более, их отображение. Давайте скроем этот ненужный вывод, используя оператор void:

	void setTimeout(function(){console.log ('Привет!');}, 5000);
	
	// Теперь выведет undefined и через 5 сек. строку "Привет!" 
	

Нормально. Теперь нас не путает непонятный вывод чисел.

DOM - Document Object Model (объектная модель документа)

DOM - это среда, которую предоставляет браузер и с которой взаимодействует ядро JavaScript. DOM имеет иерархическую, древовидную структуру.

На вершине иерархии DOM находится объект window, свойством которого является объект document.



Давайте рассмотрим DOM модель для простой HTML страницы:



Подключение JavaScript к HTML документу

Как и в случае с CSS, JavaScript обычно подключается к HTML документу отдельным файлом с расширением .js с помощью тега <script> расположенному в <head>. В атрибуте type указывается MIME тип text/javascript (в настоящее время это указание можно опустить), в атрибуте src - путь к файлу со скриптами:

	<!DOCTYPE html>
	<html>
	<head>
		<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
		<title>Подключение JavaScript к документу</title>
		<script type="text/javascript" src="/scripts.js"></script>
	</head>
	<body>
	</body>
	</html>
	

В этом примере к html документу подключён скриптовый файл с именем "scripts.js".

Кроме этого скрипт может быть размещён в самом html документе в <head> и/или <body> неограниченное количество раз. В этом случае код JavaScript пишется внутри тегов <script></script> (тип контента "text/javascript" допускается не указывать):

	<!DOCTYPE html>
	<html>
	<head>
		<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
		<title>Подключение JavaScript к документу</title>
		<script type="text/javascript" src="/scripts.js"></script>
		<script>
			alert ('Привет! Я из HEAD');
		</script>
	</head>
	<body>
		<script>
			alert ('Привет! Я из BODY');
		</script>
	</body>
	</html>
	

Команда alert() выводит в браузере сообщение в отдельном окне и пока не будет нажата кнопка "ок" дальнейшее выполнение кода приостанавливается.

Скрипт может быть подключён отдельным файлом и одновременно прописан в самом документе, однако рекомендуется помещать всю логику в один файл с расширением .js.

В следующем коде элемент <script></script> помещён перед закрывающим тегом </body>. Сначала загружается элемент <h1>, а затем скрипт обращается к нему методом querySelector, за которым следует CSS селектор:

	<!DOCTYPE html>
	<html>
	<head>
		<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
		<title>Изменение заголовка h1 при помощи скрипта</title>
	</head>
	<body>
	
	<h1>Заголовок h1 до изменения скриптом</h1>
		<script>
			document.querySelector('h1').textContent = "Изменено сценарием";
		</script>
		
	</body>
	</html>
	

В результате текст заголовка <h1> изменяется на "Изменено сценарием". Обратите внимание: сначала должен загрузиться изменяемый элемент и только потом идти скрипт, изменяющий его! Иначе мы получим ошибку обращения к несуществующему элементу Uncaught TypeError (эта ошибка будет высвечена в консоли бразера, не на самой странице html!).

Метод querySelectorAll возвращает массив элементов, отвечающих выбранному селектору, например document.querySelectorAll('p') вернёт все элементы <p>. В скобках должен передваться CSS-селектор (h1, p , #id, .class и т.д.)

Объект Window

Объект window относится к уровню отображения документа, позволяет открывать и закрывать окна, менять размер, скроллировать (прокручивать окно), работать с историей.

Объект window хранит location, фреймы, строку статуса, в то время как объект document хранит, например то, что находится в элементе <title>

Когда переменные и функции объявляются вне функций при помощи инструкций var и function, они хранятся как неудаляемые свойства объекта window. Это касается и функций. Это как бы глобальные свойства и методы.

Такие методы как alert или setTimeout часто вызываются как функции, т.е. без указания объекта, хотя это равнозначно window.alert или window.setTimeout.

В следующем примере ссылка "открыть окно" - откроет окно с указанным адресом в новой вкладке, а ссылка "закрыть" окно, прописанная в открытом документе, закроет его:

	<a href="javascript: window.open('http://nostroma.online')">Открыть окно</a>
	<a href="javascript: window.close()">Закрыть окно</a>
	

Из соображений безопасности закрыть можно только те вкладки и окна, которые были открыты при помощи JavaScript, т.е. ссыка "Закрыть окно" сработает только во вновь открытой вкладке - попробуйте:

Обращение к элементу

Для начала рассмотрим вариант, когда на веб странице с контентом нам нужно поменять характеристики уже существующих элементов. Первое, что необходимо сделать - это получить доступ к нужным элементам. В примере выше мы использовали для этого метод querySelector объекта document.

Объект document доступен как свойство объекта window. Обычно window не пишется (опускается) при обращении к текущему окну.

Доступ к свойствам-методам в JavaScript осуществляется через оператор уточнения точка.

Аргументом метода querySelector является CSS-селектор элемента. Если элементов, полученных этим селектором несколько, то возвращается первый из них.

Если нужно получить несколько элементов, то используется метод querySelectorAll. При этом возвращается массив (о массивах речь впереди), однако, забегая вперёд скажу, что к каждому из элементов массива мы можем обратиться при помощи оператора "квадратные скобки", который ожидает числового индекса (а в случае объектов - и нечислового).

Перебирать элементы массива мы можем с помощью цикла for-in. Если требуются обращения, задействующие номера номера элементов, то следует использовать обычный for со счётчиком, где понадобится свойство массива length для определения количества элементов:

<!DOCTYPE html>
	<html>
		<head>
			<meta charset="utf-8">
			<title>JS: обращение к нескольким элементам</title>
		</head>
		<body>
			<ol>
				<li>Первый элемент</li>
				<li>Второй элемент</li>
				<li>Третий элемент</li>
				<li>Четвёртый элемент</li>
				<li>Пятый элемент</li>
			</ol>
			
			<script>
				var list = document.querySelectorAll("li");
				for (var i in list) {
					list[i].textContent = "Элемент номер " + ++i;
				}
			</script>
			
		</body>
	</html>

Результат отображения:


Конкатенация ("склеивание") строк в JavaScript осуществляется через оператор плюс, что и было сделано в предыдущем примере, где мы склеили строку "Элемент номер" и число, возвращаемое операцией "++i".

Метод textContent изменяет содержимое элемента. Если его значением в кавычках указать какой-либо тег, то он не будет интерпретирован браузером как тег html, а выведется как есть:

<!DOCTYPE html>
	<html>
		<head>
			<meta charset="utf-8">
			<title>метод textContent</title>
		</head>
		<body>
			<h1>Заголовок до изменения скриптом</h1>
			
			<script>
				var h = document.querySelector("h1");
				h.textContent = '<p>textContent выводит теги как есть:</p><br />'; 
				
			</script>
			
		</body>
	</html>

Результат отображения:


Комментарии

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

Введите e-mail:

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

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