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

Курсы JavaScript

Урок 8. Обращение к атрибутам через JS.


Обращение к атрибутам через JS

К атрибутам элемента в JavaScript можно как непосредственно, так и через метод setAttribute:

синтаксис непосредственного обращения к атрибуту элемента:
элемент.атрибут = "значение атрибута"; Пример: elem.title = "Всплывающая подсказка";

синтаксис обращения к атрибуту элемента методом setAttribute:
элемент.setAttribute("атрибут", "значение"); Пример: elem.setAttribute("title", "Подсказка");

Для атрибута style возможен ещё и такой вариант:
элемент.style.свойство = "значние"; Пример: elem.style.color = "red";

Атрибут class доступен через className, а атрибуты вида data.* доступны через dataset.

<!DOCTYPE html>
	<html>
		<head>
			<meta charset="utf-8">
			<title>Обращение к атрибутам через JS</title>
		</head>
		<body>
		
			<div>
				<span id="sp1">Строка 1</span>
				<span id="sp2">Строка 2</span>
				<span id="sp3">Строка 3</span>
			</div>
		
		<script>
			/* Получаем нужные нам элементы в переменные */
			var span1 = document.querySelector("#sp1");
			var span2 = document.querySelector("#sp2");
			var span3 = document.querySelector("#sp3");
			
			/* Меняем цвет текста первого span */
			span1.style = "color: gold"; 
			
			/* Задаём цвет фона второго span */
			span2.style.backgroundColor = "lime";
			
			/* Создаём всплывающую подсказку у третьего span */
			span3.setAttribute("title", "Какая-то подсказка");
		</script>
		
		</body>
	</html>

Результат:


Метод createDocumentFragment

Метод createDocumentFragment() объекта document позволяет создавать узлы дерева документа (узлы DOM). Он обычно используется для создания фрагментов документа.

Синтаксис: document.createFragment();

Для примера рассмотрим код, в котором сформируем список элементов с пятью числами:

<!DOCTYPE html>
	<html>
		<head>
			<meta charset="utf-8">
			<title>Метод createDocumentFragment</title>
		</head>
		<body>
		<h2>Список с пятью числами</h2>
		
		<ul></ul>
		
			<script>
			/* Создаём переменную с фрагментом документа */
				var docFrag = document.createDocumentFragment();
				
			/* Создаём цикл for, в котором определяем три переменных: i - счётчик,
			newEl - новый элемент и newText - текст нового элемента */
				for (var i = 0, newEl, newText; i < 5; ++i){
					
					/* Создаём новый элемент <li> */
					newEl = document.createElement("li");
					
					/* Создаём текстовый узел для элементов <li>, в каждом из
					которых находится числовое значение счётчика i */
					newText = document.createTextNode(i);
					
					/* Добавляем созданный текстовый узел в элемент <li> */
					newEl.appendChild(newText);
					
					/* Добавляем созданный элемент <li> в конец дочерних
					элементов фрагмента документа doc.Frag */
					docFrag.appendChild(newEl);
				}
				
				/* Добавляем созданный фрагмент документа docFrag 
				в элемент <ol> */
				document.querySelector('ul').appendChild(docFrag);
			</script>
		
		</body>
	</html>

Метод createElement обекта document создаёт новый элемент документа с указанным тегом:

document.createElement("p"); - в этом примере метод createElement создаст элемент <p></p>

Метод appendChild добавляет элемент в конец дочерних элементов: parentElement.appendChild(element); - в этом примере элемент element будет добавлен в конец дочерних элементов элемента parentElement.


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


События в JavaScript

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

Событие load

Важнейшее событие окна браузера - load - когда загружены и отображены документ и все внешние ресурсы. Альтернативы этого события - DOMContentLoaded и readystatechange - документ готов к работе, хотя внешние ресурсы ещё не загружены полностью.

В настоящее время наиболее частым является приём window.addEventListener (регистрация слушателя события) - подобный метод принимает на вход функцию или ссылку на функцию в виде переменной внутри того объекта, который владеет слушателем. В нужный момент (момент наступления события) будет осуществлён вызов этой функции с передачей ей некоего контекста (данных, связанных с событие, например, это может быть код нажатой клавиши).

Способы передачи функции слушателю

Метод addEventListener() регистрирует слушателя (обработчика) события для объекта eventTarget. При возникновении указанного события этот обработчик будет вызываться для указанного объекта. Объектом метода addEventListener() может быть Element, Document, Window или любой другой, поддерживающий события.

Синтаксис: eventTarget.addEventListener(тип_события, обработчик, фаза); где:

тип_события -
строка, указывающая тип события, для которого регистрируется обработчик (слушатель события). Тип события указывается без префикса "on".
обработчик -
функция-выражение или имя функции, которая будет вызываться.
фаза -
необязательный параметр - значение булева типа, которое определяет, для какой фазы распространения будет зарегистрирован обработчик - true - для фазы перехвата, false - для фазы всплытия (подробнее это будет рассмотрено позже).

Ниже представлены способы передачи функции слушателю. Первые два варианта отличаются подъёмом определения (функция "рюзабельна"). В первом случае поднимается имя и тело функции (инструкция-объявление). Третий вариант - callback hell.

	<!-- Вариант 1 -->
	<script>
	/* Создаём функцию-обработчик */
		function myFunc() {
			document.querySelector("h1").textContent = "Изменено сценарием";
		}
		
		/* При наступлении события load вызываем функцию myFunc  */
		window.addEventListener("load", myFunc);
	</script>
	
	<!-- Вариант 2 -->
	<script>
		/* Создаём функцию-обработчик с применением var */
		var myFunc = function() {
			document.querySelector("h1").textContent = "Изменено сценарием";
		}
		
		/* При наступлении события load вызываем функцию myFunc  */
		window.addEventListener("load", myFunc);
	</script>
	
	<!-- Вариант 3 -->
	<script>
		/* Создаём функцию-обработчик внутри addEventListener */
		window.addEventListener("load", function(){
			document.querySelector("h1").textContent = "Изменено сценарием";
		});
	</script>
	

Обратите внимание на частую ошибку: в первых двух вариантах имя функции в addEventListener указывается без круглых скобок!

Помимо load существует масса других событий, которые мы будем изучать по мере надобности, кроме того, имеется возможность создавать собственные события в JavaScript.

События KeyUp и KeyDown

Событие KeyDown происходит, когда пользователь нажимает клавишу, событие KeyUp - когда пользователь отпускает клавишу. При нажатии клавиши в функцию-обработчик передаётся её код, который можно отловить. Для этого в addEventListenr в качестве обработчика указывается функция с круглыми скобками, в которых помещается переменная ev, при этом код нажатой клавиши будет доступен методу ev.keyCode:

	eventTarget.addEventListener.("keydown", function(ev){...})
	eventTarget.addEventListener.("keyup", function(ev){...})
	

Рассмотрим пример, где при нажатии на клавишу в поле ввода текст будет изменяться на код клавиши в первом абзаце, а при отпускании - во втором:

<!DOCTYPE html>
	<html>
		<head>
			<meta charset="utf-8">
			<title>События KeyDown и KeyUp</title>
		</head>
		<body>
		
		<p id="p1">Абзац 1</p>
		<p id="p2">Абзац 2</p>
		<input type="text" />
		
		<script>
			/* Получаем нужные элементы в переменные для удобства */
			var p1 = document.querySelector("#p1");
			var p2 = document.querySelector("#p2");
			var inp = document.querySelector("input");
			
			/* При нажатии на клавишу в поле ввода текст будет изменяться на
			код клавиши в первом абзаце */
			inp.addEventListener("keydown", function(ev){
				p1.textContent = ev.keyCode;
			})
			
			/* При отпускании клавиши текст будет изменяться на
			код клавиши во втором абзаце */
			inp.addEventListener("keyup", function(ev){
				p2.textContent = ev.keyCode;
			})
			
		</script>
		
		</body>
	</html>

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


Метод bind

События KeyDown и KeyUp в предыдущем коде можно объединить в одну функцию, указав её затем методу addEventListener(). Однако в этом случае возникает трудность разделения элементов, к которым мы обращаемся для двух событий - KeyDown и KeyUp. Здесь нам придёт на помощь встроенный метод bind(), в котором указываются два параметра - в первом параметре напишем null и пока не будем разбирать, что это за параметр (о нём - позже), а вот во втором параметре в кавычках укажем нужный элемент в виде селектора CSS:

<!DOCTYPE html>
	<html>
		<head>
			<meta charset="utf-8">
			<title>События KeyDown и KeyUp</title>
		</head>
		<body>
		
		<p id="p1">Абзац 1</p>
		<p id="p2">Абзац 2</p>
		<input type="text" />
		
		<script>
			/* Получаем нужные элементы в переменные для удобства */
			var p1 = document.querySelector("#p1");
			var p2 = document.querySelector("#p2");
			var inp = document.querySelector("input");
			
			
			/* Создаём функцию (назовём её keys) для событий keydown и keyup */
			function keys(el, ev){
				document.querySelector(el).textContent = ev.keyCode;
			}
			
			/* При нажатии на клавишу в поле ввода текст будет изменяться на
			код клавиши в первом абзаце */
			inp.addEventListener("keydown", keys.bind(null, "#p1"));
			
			/* При отпускании клавиши в поле ввода текст будет изменяться на
			код клавиши во втором абзаце */
			inp.addEventListener("keyup", keys.bind(null, "#p2"));
			
		</script>
		
		</body>
	</html>

В функцию keys мы передали два аргумента: первый - это нужный элемент, который возвращает метод bind, а второй - ev - это код нажатой клавиши.

В этом коде в нескольких строках сосредоточено большое количество концептуально важных понятий JS.

Комментарии

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

Введите e-mail:

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

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