Javascript динамическое изменение страницы

Иллюстрированный самоучитель по созданию сайтов

Чтобы динамически изменять вид нашей веб-страницы, необходимо решить один вопрос: каким образом наш сценарий сможет обращаться к отдельным ее элементам? Существует два способа такого доступа: классический и по имени элемента. Чтобы быть последовательными, давайте сначала рассмотрим первый из них.

Доступ к элементам HTML по номеру

Возьмем такой пример. Предположим, что мы поместили на веб-страницу графический элемент (картинку), но хотим, чтобы она не сразу возникла в своем реальном размере, а постепенно выросло “из ничего”. Для примера можно взять изображение компьютера ATARI-800, которое уже использовалось нами в главе 3. Карту графических ссылок мы в этом примере на него ставить не будем, хотя это легко сделать, просто перенеся код из последнего примера раздела 3.1. Сначала просто поставим картинку на страницу:

Физический размер этой картинки – 451х310, но мы, как видите, специально уменьшили ее ширину и высоту на 300 пикселов. Теперь давайте попытаемся обратиться к ней из сценария JavaScript.

Оказывается, доступ ко всем картинкам на странице можно получить, просто написав метод document.images и указав в квадратных скобках номер картинки на странице. Вообще говоря, такой синтаксис в JavaScript употребляется по отношению к массивам элементов. То есть, если у нас есть массив из пяти элементов под названием MoyMassiv, то к его элементам следует обращаться так: MoyMassiv[0], MoyMassiv[1],…, MoyMassiv[4]. Массив document.images называется коллекцией.

Нумерация картинок начинается с нуля. Наша картинка, как первая на странице, будет иметь номер 0. Следовательно, для обращения к ней из сценария следует использовать метод document.images[0]. Если бы мы поместили на страницу еще одну картинку, после первой, то к этой второй картинке мы могли бы обратиться так: document.images[1].

Теперь мы можем написать функцию, которая будет проверять, не достигла ли еще наша картинка нужного размера, и если нет, то увеличивать ее ширину и высоту. Проверить размеры можно следующим образом:

То есть, если после номера картинки мы поставим точку и напишем любой имеющийся ее HTML-атрибут, то сможем из сценария узнать его значе ние и, при необходимости, изменить его:

В данном случае мы увеличили ширину картинки на 2 пиксела. Точно так же можно поступить и с ее высотой:

Теперь, чтобы “зациклить” нашу функцию, можно просто в конце вызвать ее же после некоторой задержки. Например, если наша функция будет называться sizer(), то последней ее строкой может быть:

Такой вызов функции из самой себя называется рекурсивным вызовом и довольно часто употребляется в JavaScript. (Учтите, что так можно поступать далеко не во всех языках программирования – в некоторых языках из-за рекурсивных вызовов может случиться, например, ошибка переполнения стека, или еще какая-нибудь гадость… Но пока мы пишем код на JavaScript, об этом можно не беспокоиться.) Теперь достаточно один раз вызвать эту функцию, и далее она будет все время вызывать себя сама. Конечно, можно было сделать и как-нибудь по-другому, например оста вить в “теле” функции только само увеличение размера, а проверку и повторный вызов вынести в “тело” документа, написав там что-нибудь вроде:

Однако для иллюстрации возможностей давайте все же применим рекурсивный вызов. Итак, посмотрим, что у нас получается.

Источник

Динамическое обновление веб-страницы

Никого уже не удивишь концепцией динамического HTML, почти все сайты давно в той или иной мере используют javascript для того, чтобы сделать страницы интерактивными. А с появлением технологии AJAX стало возможным асинхронно генерировать запросы к серверу, чтобы изменять старые данные на сервере или получать новые. Но как именно обновлять структуру страницы? Кто должен генерировать новый html — сервер или javascript? А может, все вместе?

Посмотрим, как можно ответить на эти вопросы.

Для начала, я опишу жизненный цикл страницы. Сразу скажу, что я не собираюсь описывать этот процесс досконально, здесь требуется только понимание основной логики процесса.

Любое веб-приложение можно логически поделить на две составляющие — на клиентскую часть и серверную часть. К клиентской части относятся сам браузер и скрипты, которые он выполняет, к серверной — набор скриптов, которые генерируют ответ на любой запрос пользователя.

Жизнь любой страницы начинается с запроса от клиента к серверу. Ответом будет код страницы, содержащий, помимо структуры и стилей, логику клиентской части.

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

Пикантность начинается, когда необходимо в какой-то момент перерисовать некоторые компоненты на странице. Для того, чтобы обновить структуру страницы, скрипту клиента необходимо знать, что необходимо убрать, что и куда необходимо добавить, что на что заменить. Вот тут-то и появляются разные варианты, как организовать такие обновления.

Ближе к сути

Для удобства объяснения рассмотрим вариант обновления простой страницы с лентой новостей и, скажем, счетчиком подписчиков. Мы хотим, чтобы браузер регулярно проверял обновления ленты, добавляя новости по мере их появления. А еще мы хотим, чтобы каждый посетитель видел динамику роста популярности нашего сайта — пусть счетчик подписчиков тоже регулярно обновляется.

Тело нашей страницы может выглядеть, например, так:

Вариант 1 — дублирование

Основная идея — логику отображения знает и клиентская, и серверная часть. В таком случае, ответы на регулярные запросы со стороны клиента могут содержать исключительно данные — изменения в модели, и выглядеть, например, так:

При получении такого ответа клиентская часть «оборачивает» данные в html-теги, добавляет необходимые тексты и обновляет структуру страницы.

Серверу же знания об отображении нужны только для того, чтобы сгенерировать изначальную версию страницы.

• Требуется продублировать код — он будет и в клиентской части, и в серверной;
• Клиентская часть должна знать, как именно поступать с каждой порцией данных от сервера — иногда нужно заменить html элемента, иногда добавить новые данные к уже существующему коду;

Вариант 2 — всемогущий сервер и «толстые» ответы

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

Замечу, что пересылается здесь весь html каждого компонента на странице. Реализуется же такой способ просто — сервер генерирует страницу по кускам, клиент при получении ответа заменяет тела отдельных элементов.

• Многократная генерация одного и того же кода, особенно неэффективно при небольших изменениях;
• Огромный объем трафика, особенно на больших страницах;

Вариант 2а — всемогущий сервер и «тонкие» ответы

Можно попытаться исправить главный недостаток предыдущего варианта. Сервер может не отправлять весь html компонента, а присылать только «дельту» — изменения, которые необходимо внести. Наш ответ тогда может стать таким:

Теперь клиент определяет элемент, который будет изменять, и то, как он его будет изменять, непосредственно из ответа сервера.

• Все еще достаточно большой объем сетевого трафика;
• Клиент должен отправить серверу текущее состояние каждой компоненты, закодированное некоторым образом, чтобы сервер понял, относительно чего считать дельту;
• Сложность вычисления и записи дельты в случае нетривиальных изменений;
• Общее усложнение и клиентской, и серверной части;

Вариант 3 — всемогущий javascript

Можно переложить всю ответственность за генерацию html на клиента. В таком случае сервер будет только предоставлять данные, необходимые для отображения. Ответы, как и в первом варианте, будут содержать только данные:

Так в чем же существенное отличие от первого варианта? А заключается оно в том, что сервер не выполняет первоначальную генерацию страницы, её сборка осуществляется уже браузером клиента. Вариант этот только выглядит странным, он может пригодиться, если необходимо уменьшить нагрузку на сервер.

• Малый объем трафика — передаются только необходимые данные;
• Уменьшение нагрузки на сервер;

• Высокая нагрузка на компьютер пользователя;
• Возможна избыточность — часть знаний клиентской части об отображении может так и остаться невостребованной, если какие-то события не наступят;

Заключение

Каждый из рассмотренных методов имеет право на жизнь, и может быть использован в проектах разной сложности. Лично я во встреченных мною проектах чаще всего видел первый вариант, несмотря на нарушение им моего любимого принципа DRY — Don`t repeat yourself.

А какие принципы вы используете при разработке динамических страниц?

Источник

Динамическое изменение содержимого страницы

Здравствуйте. Ранее для динамического изменения содержимого страницы я использовал следующее:

1 2 3 4 5 6 7 8 9 10 11 12 13 14

script type="text/javascript"> function DoSmth(ImgId, Imglink) { document.all.my.innerHTML = "+Imglink+"'> " } /script> DIV >"my"> FORM> /FORM> /div>

Затем, эта функция когда надо вызывается и выполняется.

Но как оказалось, данная система динамического отображения, а именно document.all.my.innerHTML не работает в FireFox, поэтому, начав искать я нашел статью

В статье был приведен код, как это обойти.
Соответственно, я попытался его использовать у себя:

1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25

script type="text/javascript"> function DoSmth(ImgId, Imglink) { var our_div = document.getElementById('our_div_name'); var our_text = "

+Imglink+"'> 
Нажимите на картинку для просмотра сведений о товаре
"; var ua = navigator.userAgent.toLowerCase(); (ua.indexOf("gecko") != -1) { // Если браузер Mozilla, или Firefox, или Netscape var range = div_preview.ownerDocument.createRange(); range.selectNodeContents(our_div); // Очистим внутренности нашего блока range.deleteContents(); var fragment = range.createContextualFragment(our_text); //<-- dies here // Теперь наполним необходимым контентом our_div.appendChild(fragment); } else { // Для остальных браузеров our_div.innerHTML = our_text; } } /script>

Не могли бы вы мне подсказать, как адаптировать этот код под:

мою задачу?
Подскажите пожалуйста как заставить этот код работать, может быть что-то нужно вынести за функцию, может быть как-то дополнительно нужно вызывать document.getElementById(‘our_div_name’); или даже что-то еще.

Источник

Динамическое изменение HTML с помощью JavaScript

JavaScript – это язык программирования, который используется в браузерах для взаимодействия с веб-страницами. Он позволяет создавать динамические и интерактивные элементы на страницах, которые могут изменяться в реальном времени. В этой статье мы рассмотрим, как с помощью JavaScript можно изменять HTML-элементы и их содержимое.

JavaScript позволяет добавлять новые HTML-элементы на страницу. Например, можно создать новый абзац элемент, с помощью следующего кода:

var newParagraph = document.createElement('p');

Затем, можно добавить содержимое в новый элемент и прикрепить его к странице:

newParagraph.innerHTML = 'Это новый абзац, созданный с помощью JavaScript.'; document.body.appendChild(newParagraph);

В этом примере мы создали новый абзац элемент с помощью createElement (), затем добавили текст в элемент и прикрепили его к концу body тега.

JavaScript также позволяет изменять уже существующие HTML-элементы. Например, можно изменять содержимое элемента, используя свойство innerHTML:

var element = document.getElementById('someId'); element.innerHTML = 'Новый текст';

jQuery – это библиотека JavaScript, которая позволяет сделать изменение элементов более простым и удобным. Например, можно использовать методы .html () и .text () в jQuery для изменения содержимого элементов:

$('#someId').html('Новый HTML'); $('#someId').text('Новый текст');

JavaScript также позволяет удалять существующие HTML-элементы с помощью метода .remove ():

var element = document.getElementById('someId'); element.remove();

jQuery также предоставляет простой метод .remove () для удаления элементов:

JavaScript предоставляет возможность легко создавать динамические и интерактивные элементы на веб-страницах. Мы рассмотрели некоторые основные методы для добавления, изменения и удаления HTML-элементов в JavaScript и jQuery. Надеюсь, эта статья поможет вам лучше понять, как использовать JavaScript для создания динамических элементов на веб-страницах.

Похожие записи:

Источник