мета-данные страницы
  •  
Загрузка не удалась. Возможно, проблемы с правами доступа?

Различия

Показаны различия между двумя версиями страницы.

Ссылка на это сравнение

Предыдущая версия справа и слеваПредыдущая версия
Следующая версия		Предыдущая версия
javascript:ex [08/11/2017 15:01] – [Урок 7: тайм-аут ;-)] vlasovjavascript:ex [09/11/2017 13:28] (текущий) – [Урок 2.1: ввод-вывод из полей формы] vlasov
Строка 174: Строка 174:
 }; };
 </SCRIPT> </SCRIPT>
 +</code>
 +
 +В заключение темы стоит отметить, что современным способом вывода отладочной информации является использование ''console'':
 +
 +<code javascript>
 + console.log("var =",  myvar);
 </code> </code>
  
Строка 316: Строка 322:
 и он появится! 8-) и он появится! 8-)
  
 +==== Урок 5.1: Создаем свой спойлер ====
  
 +Сформулируем такую задачу: //необходимо создать разметку спойлера, основанную на тэгах div и необходимых классах, сопровождение в виде js-функций, с тем, чтобы при отсустствии поддержки javascript в окне браузера, все спойлеры были раскрыты и никаких затруднений (и даже напоминаний о спойлере) у пользователя не возникало.//
 +
 +Иными словами, выглядеть это должно примерно так:
 +
 +<code html>
 +<div class="spoilertitle" text="THIS IS SPOILER!!!"></div>
 +<div class="spoiler">
 +...здесь скрываемый текст...
 +</div>
 +</code>
 +
 +Для начала определим пару полезных нам функций:
 +
 +<code javascript>
 +function getTagged(name, elem) {
 +  return (elem || document).getElementsByTagName(name);
 +}
 +
 +function getNext(elem) {
 +  do {
 +    elem = elem.nextSibling;
 +  } while ( elem && elem.nodeType != 1 );
 +  return elem;
 +}
 +</code>
 +
 +Здесь первая функция ''getTagged'' собирает множество элементов с тэгом ''name'', при этом, если задан второй аргумент ''elem'', то в его <<потомках>>,  если не задан, то -- по всему документу.
 +
 +Вторая функция ''getNext'' находит и возрващает следующий сестринский элемент, который не будет являться текстом. Следует иметь ввиду, что текстом может оказаться простой перевод строки, поэтому проверка
 +
 +<code javascript>
 +elem.nodeType != 1
 +</code>
 +важна, если есть такой риск.
 +
 +Теперь, собственно, основной код:
 +
 +<code javascript>
 +var alldiv = getTagged("div");
 +
 +for (var j=0; j<alldiv.length; j++) {
 +  if(alldiv[j].className == "spoilertitle") 
 +    {
 +      alldiv[j].insertAdjacentHTML('afterbegin', alldiv[j].getAttribute("text"));
 +      alldiv[j].onclick = spoiling;
 +      alldiv[j].onmouseover = function(){this.style.textDecoration="underline"};
 +      alldiv[j].onmouseout =  function(){this.style.textDecoration="none"};
 +
 +      var nxt = getNext(alldiv[j]);
 +      while ( nxt.className != "spoiler" ) {nxt = getNext(nxt)};
 +      nxt.style.border = "dotted black";
 +      nxt.style.backgroundColor = "aqua";
 +      nxt.style.display = "none";
 +    };
 +}
 +
 +function spoiling() {
 +  var nxt = getNext(this);
 +  while ( nxt.className != "spoiler" ) {nxt = getNext(nxt)};
 +  console.log(nxt.id, "check: ",  nxt.style.display);
 +  if (nxt.style.display == "none")  {nxt.style.display = "block"; console.log("set=",nxt.style.display); return};
 +  if (nxt.style.display == "block" || !nxt.style.display) {nxt.style.display = "none";  console.log("set=",nxt.style.display)};
 +}
 +</code>
 +
 +Прокомментируем программу. Условие
 +<code javascript>
 +  if(alldiv[j].className == "spoilertitle") 
 +</code>
 +делает отбор только тэгов, помеченных классом ''spoilertitle''. Для этого контейнера, мы, во-первых вставляем следом (но перед спойлером!) html-текст из <<нестандартного>> атрибута ''text'':
 +<code javascript>
 + alldiv[j].insertAdjacentHTML('afterbegin', alldiv[j].getAttribute("text"));
 +</code>
 +
 +Строка
 +<code javascript>
 +alldiv[j].onclick = spoiling;
 +</code>
 +создает обработчик события клика мышкой по содержимому контейнера. Заметим, что ''spoiling'' -- всего лишь ссылка на функцию, а не ее вызов типа ''spoiling(..)''!
 +
 +Строки
 +<code javascript>
 +  alldiv[j].onmouseover = function(){this.style.textDecoration="underline"};
 +  alldiv[j].onmouseout =  function(){this.style.textDecoration="none"};
 +</code>
 +описывают поведение, когда наводим мышку на текст и когда уводим мышку. Также обращаем внимание, что вместо ссылки на функцию используем анонимную функцию, созданную прямо по месту применения.
 +
 +Далее, в блоке
 +<code javascript>
 +      var nxt = getNext(alldiv[j]);
 +      while ( nxt.className != "spoiler" ) {nxt = getNext(nxt)};
 +      nxt.style.border = "dotted black";
 +      nxt.style.backgroundColor = "aqua";
 +      nxt.style.display = "none";
 +</code>
 +во-первых, с помощью ''nxt = getNext(alldiv[j])'' получаем ссылку на следующий контейнер (сестринский элемент), перебираем их все, проверяя, чтобы был в наличии класс ''spoiler'':
 +<code javascript>
 +while ( nxt.className != "spoiler" ) {nxt = getNext(nxt)};
 +</code>
 +Для найденного элемента ''nxt'' устанавливаем требуемое стилевое оформление:
 +<code javascript>
 +      nxt.style.border = "dotted black";
 +      nxt.style.backgroundColor = "aqua";
 +      nxt.style.display = "none";
 +</code>
 +где самое главное для нас -- скрытое по умолчанию состояние спойлера: ''<nowiki>nxt.style.border = "dotted black"</nowiki>''
 +
 +И, наконец, рассмотрим функцию-обработчик клика, которая и осуществляет работу спойлера.
 +Строки вроде таких
 +<code javascript>
 +  var nxt = getNext(this);
 +  while ( nxt.className != "spoiler" ) {nxt = getNext(nxt)};
 +</code>
 +мы уже обсуждали.
 +
 +Команда
 +<code javascript>
 +  console.log("check: ",  nxt.style.display);
 +</code>
 +позволяет нам осуществить запись в лог значения ''nxt.style.display''.
 +Наконец, проверяем
 +<code javascript>
 +  if (nxt.style.display == "none")  {nxt.style.display = "block"; console.log("set=",nxt.style.display); return};
 +  if (nxt.style.display == "block" || !nxt.style.display) {nxt.style.display = "none";  console.log("set=",nxt.style.display)};
 +</code>
 +состояние значения ''nxt.style.display'' и соответственно переобпредляем это значение на противополжное (отдельная забота о случае, если pyfxtybt ''nxt.style.display'' не определено).
  
 +Код базируется на примерах, взятых из книги Резинга, создателя пакета ''jquery''; разность стилей в выполнении однотипных задач определяется ленью и забывчивостью...
 ===== Урок 6: динамическое изменение картинок и события задержки ===== ===== Урок 6: динамическое изменение картинок и события задержки =====
  
Строка 359: Строка 493:
  
       var nxt = getNext(alldiv[j]);       var nxt = getNext(alldiv[j]);
-      while ( nxt.className != "spoiler" ) {nxt = getNext(alldiv[j])};+      while ( nxt.className != "spoiler" ) {nxt = getNext(nxt)};
       nxt.style.border = "dotted black";       nxt.style.border = "dotted black";
       nxt.style.backgroundColor = "aqua";       nxt.style.backgroundColor = "aqua";