Как javascript взаимодействует с html
Перейти к содержимому

Как javascript взаимодействует с html

  • автор:

Как реализуется пользовательское взаимодействие на страницах JavaScript?

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

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

Тег script позволяет браузеру войти в мир JavaScript и выполнить JS-код ( src/index.js ):

Атрибут defer указывает браузеру на то, что надо не ждать скрипт, а продолжить обработку HTML и создать представление веб-страницы в виде объектной модели документа (модели DOM). Скрипт загружается «в фоновом режиме» асинхронно и после того, как DOM будет полностью создан, запускается.

Итак, страница загружена и готова ко взаимодействию с пользователем, но как именно реализуется это пользовательское взаимодействие на страницах JavaScript?

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

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

I — манипуляции на уровне модели DOM

Объектная модель документа — это стандартная объектная модель и программный интерфейс для HTML. Она определяет HTML-элементы как объекты, а также свойства, методы доступа и события для всех HTML-элементов. Это стандарт для получения, изменения, добавления или удаления HTML-элементов.

Начнем с кнопки регистрации. Чтобы добавить интерактивность и некоторую логику, сначала найдем кнопку (правый элемент DOM) в дереве DOM с помощью селектора CSS и методов DOM (для легкого нахождения элементов DOM используйте инструменты разработчика).

Вот некоторые из методов HTML DOM, позволяющих находить HTML-элементы:

Так, чтобы заполучить кнопку регистрации, используем метод document.querySelector() с идентификатором CSS-селектора.

Форма регистрации показана ниже

II — прослушиватели событий

Получив элемент DOM, нужно задаться вопросом: «Какое пользовательское событие прослушивает этот элемент?». Среди многих других будет ли это событие Click («нажатие левой кнопкой мыши»), Submit («проверка или валидация формы перед её отправкой»), Hover («наведение курсора на элемент»), Keypress «нажатие на клавишу» и т. д.? В HTML DOM есть функция прослушивателя событий addEventListener(), принимающая два аргумента: событие и функцию обратного вызова, которая всегда запускает событие, когда пользователь (как в нашем случае) нажимает на кнопку. Поэтому добавляем к выбранной кнопке прослушиватель события click event listener («нажатия левой кнопкой мыши»).

При этом отобразится форма регистрации. В форме нужно добавить прослушиватель события Submit Event listener («проверка или валидация формы перед её отправкой»), позволяющий пользователю отправить свою информацию. При работе с прослушивателями события submit нужно всегда помнить о предотвращении поведения формы по умолчанию ( e.preventDefault() ).

Но что происходит при отправке формы пользователем? Куда направляется его информация, и как страница распознает пользователя, когда он снова на нее заходит?

III — связь с сервером / использование «Fetch»

Ответы на эти вопросы мы получаем, используя взаимодействие между клиентом и сервером. Браузер (клиент) отправляет на сервер HTTP-запрос (в нашем случае это запрос «POST»), включая в него данные пользователя из формы. После сохранения/создания сервером записи, он отправляет клиенту ответ, чтобы последний имел доступ к странице и выполнял другие действия.

JavaScript использует Fetch API для доступа к таким частям конвейера HTTP, как запросы и ответы, и для выполнения с ними тех или иных действий.

После отправки формы мы создаем новый объект (newUser), полученный из каждой формы с пользовательскими данными. Затем отправляем fetch -запрос методом «POST» в таблицу пользователей нашего бэкенда. Для создания новой записи нужно проверить, готовы ли пользовательские маршруты и контроллер выполнить это действие.

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

  • Bash, Python или JavaScript: какой язык лучше для автоматизации?
  • Как создать бессерверное приложение с Netlify и JavaScript
  • Как получить все неуникальные значения в массиве JavaScript?

Введение

В Web приложениях элементы интерфейса описывается в HTML файлах, а логика приложения – в коде javascript (JS).

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

HTML (HyperText Markup Language) – язык разметки гипертекста для описания структуры Web-страницы. Основным компонентом HTML является тег (tag) – код, который командует Web-браузеру выполнить определенную задачу типа создания абзаца или вставки изображения. HTML не является языком программирования, но для организации динамических Web-страниц в него можно включать программы на языке Javascript, в пределах тегов и .

Основным инструментом работы и динамических изменений на HTML странице является DOM (Document Object Model) – объектная модель. Согласно DOM-модели, объекты, описываемые в пределах HTML-тегов, структурированы иерархическим способом по мере вложенности один в другой. Ссылку на объекты можно обнаружить в DOM с помощью JavaScript кода.

В HTML5 определен элемент как «растровый холст, который может быть использован для отображения 2D графики. Каждый холст имеет контекст рисования, для которого определены методы и свойства рисования. Объект canvas позволяет также получить WebGL контекст, который обеспечивает 3D графику, используя возможности библиотеки OpenGL.

Структура HTML документа

HTML (HyperText Markup Language) – язык разметки гипертекста, предназначенный для создания Web-страниц [16]. HTML представляет собой достаточно простой набор кодов, которые описывают структуру документа. Основным компонентом HTML является тег (tag) – это код, который командует Web-браузеру выполнить определенную задачу типа создания абзаца или вставки изображения. Теги имеют атрибуты, значения которых могут быть текстовыми, типа left или right, а также числовыми, как например ширина и высота изображения. Теги представляют собой зарезервированные последовательности символов, начинающиеся с (знака меньше) и заканчивающиеся > (знаком больше). Закрытие тега отличается от открытия только наличием символа ‘/‘. Предположим, у нас есть гипотетический атрибут форматирования текста, управляемый кодом , и мы хотим применить его к словам «Это мой текст». HTML-последовательность кодов будет выглядеть так:

Это мой текст

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

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

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

  Заголовок документа  . (здесь будут другие теги тела программы)

Вы можете думать об HTML как о тегах и угловых скобках. Это конечно важная часть, но не вся. Спецификация HTML5 также устанавливает, как эти угловые скобки взаимодействуют с JavaScript посредством объектной модели документа (Document Object Model, DOM). HTML не является языком программирования, но web-страницы могут включать в себя встроенные программы-скрипты на языках Javascript и Visual Basic Script и программы-апплеты на языке Java. Для вставки в HTML-программу фрагмента, написанного на языке JavaScript или Viual Basic Script сценариев, используют теги и .

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

Подключение и выполнение JavaScript

Можно выделить 3 способа подключения скриптов:

  1. подключение в любом месте;
  2. вынос скриптов в заголовок HEAD;
  3. внешние скрипты.

Когда браузер читает HTML-страничку, и видит – он первым делом читает и выполняет код, а только потом продолжает читать страницу дальше.

Так, в следующем примере показано начало страницы, затем три раза выполнится функция alert, которая выводит окошко с информацией, а только потом появится остальная часть страницы

  
Считаем кроликов
 for(var i=1; i 
. Посчитали

Обычно javascript стараются отделить от собственно документа. Для этого его помещают внутрь тега HEAD, а в теле страницы по возможности оставляется чистая верстка. В следующем примере javascript-код только описывает функцию count_rabbits, а ее вызов осуществляется по нажатию на кнопку input.

Для указания запускаемой по клику функции в input был использован атрибут onclick. Это лишь вершина мощного айсберга javascript-событий.

Обычно javascript-код вообще не пишут в HTML, а подключают отдельный файл со скриптом, вот так:

При этом файл /my/script.js содержит javascript-код, который иначе мог бы находиться внутри тега .

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

Чтобы подключить несколько скриптов используйте несколько таких тегов:

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

Объектная модель HTML-документа

  1. Изменять страницу (писать на ней текст, добавлять и удалять теги, менять стили элементов и т.п.).
  2. Реагировать на события (клик мыши, окончание загрузки страницы) выполнением соответствующей функции.
  3. Выполнять запросы к серверу и загружать данные без перезагрузки страницы.

Основным инструментом работы и динамических изменений на странице является DOM (Document Object Model) – объектная модель, используемая для XML/HTML-документов. Согласно DOM-модели, документ является иерархией. Каждый HTML-тег образует отдельный элемент-узел, каждый фрагмент текста – текстовый элемент, и т.п. Проще говоря, DOM – это представление документа в виде дерева тегов. Это дерево образуется за счет вложенной структуры тегов плюс текстовые фрагменты страницы, каждый из которых образует отдельный узел.

Например, для html-документа представлено дерево DOM.

Теги образуют узлы-элементы (element node). Текст представлен текстовыми узлами (text node). И то и другое – равноправные узлы дерева DOM.

Как нам изменять эти самые узлы в этом дереве. Рассмотрим это на примере работы со списками. На рисунке ниже представлена html-страничка с небольшим списком. Кнопки на страничке позволяют добавить (или удалить) несколько значений из списка. Если нажать кнопку «Добавить в список», у вас откроется окно для ввода, куда вы можете ввести название нового пункта. После нажатия кнопки OK к списку добавится новый элемент списка. Если нажать кнопку «Удалить из списка», то исчезнет нижняя строка из списка.

Фрагмент кода HTML:

//пишем функцию добавления нового пункта в списке function addLi() < var stroka = prompt("Введите название строки:", "");//для ввода названия if (stroka)< var ol = document.getElementById ("spisokst");//находим наш список var li = document.createElement("LI");//создаем элемент списка ol.appendChild(li);//присваиваем нашему списку новый элемент var text = document.createTextNode(stroka);//создаем узел текст li.appendChild(text);//присваиваем текст новому пункту списка >> //пишем функцию удаления пунктов из списка function deleteLi() < var ol = document.getElementById ("spisokst");//находим список var lastLi = ol.lastChild;//в переменной храним элемент списка //проверяем на наличие элемента, исключая пробелы, таб. и коммен. while (lastLi && lastLi.nodeType != 1)< lastLi = lastLi.previousSibling; >if (lastLi) < lastLi.parentNode.removeChild(lastLi);//удаляем пункт списка, //если в списке еще что-то осталось >>

Как все это происходит, давайте разбираться. У нас есть некий список, помеченный id = spisokst для того чтобы нам было его легче найти, из JavaScript. Затем мы пишем две функции на javascript:

  1. addLi() – для добавления новых строк. В функции addLi мы просим пользователя ввести название новой строки с помощью встроенной функции prompt, и помещаем это название в переменную stroka (переменные объявляются с помощью оператора var). Затем с помощью метода getElementById объекта document находим нужный нам id списка. Потом с помощью метода createElement все того же объекта document создаем элемент LI (вы, наверное, заметили, что при создании элемента, его название пишется с большой буквы). Далее с помощью метода appendChild мы присваиваем нашему списку еще один новый пункт LI. Затем мы создаем новый узел текст и передаем ему значение, которое ввел пользователь в нашу переменную stroka. И снова присваиваем, только уже элементу li, новое его значение (или его дочерний узел т.е. текст) с помощью метода appendChild.
  2. deleteLi() – для удаления этих строк. Здесь мы также находим наш список с помощью метода document.getElementById и передаем ему значение spisokst. Затем заводим новую переменную lastLi и присваиваем ей значение последнего пункта в нашем списке (ol.lastChild). Здесь существует небольшая проблема, по стандарту при формировании страницы HTML все пробелы, табуляции, комментарии в коде HTML учитываются, но не выводятся на экран. Поэтому запомните, при обращении к последним элементам, какого-нибудь узла, там может оказаться пробел, табуляция или комментарии, поэтому результат может немного отличаться от действительного. Например, если бы здесь не было учтено этого, то пункты в списке удалялись через один или, в некоторых случаях, через два клика на кнопку «Удалить из списка» и чтобы этого избежать, необходимо проверять, что находиться в последнем узле.

Функционал кнопок реализован на javascript путем обработки событий, например, при клике (событие – onClick=»javascript:addLi()») на кнопку «Добавить в список» запускается функция addLi() а при клике на кнопку «Удалить из списка» запускается функция deleteLi(). Остальное сделано для визуальных эффектов. Например, событие onmouseover означает, что при наведении курсора мыши будет что-то выполняться.

Отображение графики с помощью элемента

В HTML5 определен элемент как «растровый холст, который может быть использован для отображения диаграмм, игровой графики или изображений на лету [19]. Холст – это прямоугольная область на вашей странице, где с помощью JavaScript можно рисовать что пожелаете. Холст — это двумерная сетка. Координата 0,0 находится в левом верхнем углу холста. Вдоль оси X значения растут к правому краю холста. По оси Y значения растут к нижнему краю холста.

HTML код для определения холста выглядит так.

У вас может быть несколько элементов на одной странице. Каждый холст будет отображаться в DOM и сохранять свое собственное состояние. Если вы добавите каждому холсту атрибут id, то можете получить к ним доступ, как и к любому другому элементу. Расширим наш код, включив атрибут id.

Теперь легко можно обнаружить элемент в DOM с помощью JavaScript кода.

Каждый холст изначально пустой. Давайте что-нибудь нарисуем:

function draw_b()

Первая строка функции не делает ничего особенного, она просто находит элемент в DOM. Каждый холст имеет контекст рисования, в котором и происходят все эти смешные штучки. Как только вы нашли элемент в DOM (с помощью document.getElementById() или любым другим способом), вызываете метод getContext(). При этом необходимо указать строку «2d» в методе getContext().

Итак, у вас есть элемент и есть контекст рисования, где определены методы и свойства рисования. Имеется целая группа свойств и методов посвященных рисованию прямоугольников. Вызов метода fillRect() рисует прямоугольник и заполняет его текущим стилем заливки, исходно черный цвет, пока вы его не измените. Прямоугольник задается левым верхним углом (50, 25), шириной (150) и высотой (100). Чтобы рисовать прямые линии карандашом, можно использовать следующие два метода: moveTo(х, у) перемещает карандаш к указанной начальной точке; lineTo(х, у) рисует линии до указанной конечной точки.

Описание игры “Уголки”

“Уголки” – это многовековая настольная игра с множеством разных вариантов. В этом примере (рис.7.6) версия для одного игрока с девятью фишками и полем 9х9. В начале игры фишки заполняют поле 3х3 в левом нижнем углу доски. Цель игры в том, чтобы переместить все фишки в поле 3х3 в правый верхний угол доски за наименьшее число ходов.

В Уголках существует два типа правильных перемещений:

  • взять фишку и переместить ее на любую соседнюю пустую клетку;
  • взять фишку и перепрыгнуть через одну или более соседних фишек.

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

gCanvasElement.width = kPixelWidth; gCanvasElement.height = kPixelHeight; gDrawingContext = gCanvasElement.getContext("2d");

Затем мы добавим отслеживание события щелчка для элемента .

gCanvasElement.addEventListener("click", halmaOnClick, false);

Функция halmaOnClick() вызывается, когда пользователь щелкает где-нибудь внутри холста. Его аргумент — это объект MouseEvent, который содержит информацию о том, где пользователь щелкал.

function halmaOnClick(e) < var cell = getCursorPosition(e); // Остальное это просто логика игры for (var i = 0; i < gNumPieces; i++) < if ((gPieces[i].row == cell.row) && (gPieces[i].column == cell.column)) < clickOnPiece(i); return; >> clickOnEmptyCell(cell); >

Следующий шаг — это получить объект MouseEvent и рассчитать, по какой клетке на доске игры только что щелкнули. Доска уголков занимает весь холст, поэтому каждый щелчок происходит в пределах доски. Нам просто нужно выяснить, где. Это сложно, потому что события мыши осуществляется по-разному почти во всех браузерах.

function getCursorPosition(e) < var x; var y; if (e.pageX != undefined && e.pageY != undefined) < x = e.pageX; y = e.pageY; >else

На данный момент у нас есть координаты x и y по отношению к документу (т.е., всей HTML-страницы). Это не совсем полезно. Мы хотим координаты относительно холста.

x -= gCanvasElement.offsetLeft; y -= gCanvasElement.offsetTop;

Теперь у нас есть координаты x и y, которые относятся к холсту. То есть, если в этой точке х это 0 и у это 0, мы знаем, что пользователь просто щелкнул на верхний левый пиксел холста. Отсюда мы можем рассчитать, по какой клетке пользователь щелкнул, а затем действовать соответственно.

var cell = new Cell(Math.floor(y/kPieceHeight), Math.floor(x/kPieceWidth)); return cell; >

Вот так! События мыши трудны. Но вы можете использовать ту же логику во всех ваших собственных приложениях с холстом. Помните: щелчок мыши → координаты относительно документа → координаты относительно холста → код конкретного приложения.

Хорошо, давайте посмотрим на основные типовые задачи рисования. Потому что графика это так просто, что я решил очищать и перерисовывать доску в полном объеме каждый раз, когда что-нибудь изменяется в игре. Это не является строго обязательным. Контекст рисования холста будет сохранять все, что вы ранее нарисовали на нем, даже если пользователь прокручивает холст за пределы видимости или выбирает другую вкладку, а затем возвращается позже назад. Если вы разрабатываете приложение с более сложной графикой (например, аркадные игры), вы можете оптимизировать производительность путем отслеживания тех регионов холста, которые «загрязнились» и перерисовывать только их. Но это выходит за рамки данной книги.

gDrawingContext.beginPath(); /* вертикальные линии */ for (var x = 0; x /* горизонтальные линии */ for (var y = 0; y /* рисуем их! */ gDrawingContext.strokeStyle = "#ccc"; gDrawingContext.stroke();

Самое интересное начинается тогда, когда мы идем рисовать каждую фишку отдельно. Фишка представляет собой окружность, которую мы прежде не рисовали. Кроме того, если пользователь выберет фишку в ожидании перемещения, мы хотим нарисовать фишку как заполненную окружность. Здесь аргумент p соответствует фишке, которая имеет свойства строки и столбца, обозначающих текущее местоположение фишки на доске. Мы используем некоторые игровые константы (столбец, строка) и переводим их в относительные координаты холста (х, у), затем рисуем окружность, а затем (если фишка выбрана) заполняем окружность цветом.

function drawPiece(p, selected) < var column = p.column; var row = p.row; var x = (column * kPieceWidth) + (kPieceWidth/2); var y = (row * kPieceHeight) + (kPieceHeight/2); var radius = (kPieceWidth/2) - (kPieceWidth/10);

Вот и вся специфичная игровая логика. Теперь у нас есть координаты (х, у) относительно холста для получения центра окружности, которую мы хотим нарисовать. В API Canvas нет метода circle(), но есть метод arc(). И действительно, что есть окружность, как не замкнутая дуга? Помните основы геометрии? Метод arc() задает центральную точку (х, у), радиус, начальный и конечный угол (в радианах) и флаг направления (false по часовой стрелке, true против часовой стрелки). Вы можете использовать модуль Math встроенный в JavaScript для расчета радиан.

gDrawingContext.beginPath(); gDrawingContext.arc(x, y, radius, 0, Math.PI * 2, false); gDrawingContext.closePath();

Но подождите! Ничего еще не нарисовано. Метод arc() подобен moveTo() и lineTo() и относится к «карандашным» методам. Чтобы действительно нарисовать окружность, мы должны установить strokeStyle и вызвать метод stroke() для обводки «чернилами».

gDrawingContext.strokeStyle = "#000"; gDrawingContext.stroke();

Что если фишка выбрана? Мы можем повторно использовать тот же созданный контур, чтобы нарисовать границу фишки и заполнить окружность цветом.

if (selected)

Остальная часть программы это игровая логика – различия между правильными и неверными движениями, отслеживание количества ходов, определение, закончилась ли игра. С девятью окружностями, несколькими линиями и одним обработчиком onclick мы создали всю игру на .

Полезные ссылки:

  • Введение в AngularJS
  • Почему вам НЕ стоит использовать AngularJs
  • Android programming
  • Artificial Intelligance
  • CAD Systems API
  • Computer vision
  • Geometric modeling
  • Image recognition
  • Machine Learning
  • Neural networks
  • OOP languages
  • Robotics
  • Trading
  • Unity3D
  • Web
  • WebGL
  • Защищено: Анализ стратегий и сделок(Strategy Analysis)
  • Защищено: Пересчет спреда из котировки в $ (spread)
  • Защищено: Планирование сделок накануне фундаментальных событий
  • Защищено: Взаимосвязь Европейских валют (The relationship of European currencies)
  • Защищено: Трейдинг с Европейскими валютами (Trading with European currencies)
  • Защищено: Сделки с коррелирующими парами (Trades with correlated pairs)
  • Защищено: Фундаментальный анализ на форекс (Forex fundamental analysis)
  • Карта основных валют (Map of major currencies)
  • Защищено: Формализация трейдинга (Formalization of trading)
  • Защищено: Трейдинг на платформе MT5 (Trading on the MT5 platform)
  • Защищено: Боковик с хеджированием (Flat with Hedging)
  • Защищено: Трейдинг в боковике (Sideways Trading)
  • Защищено: Планирование и отслеживание сделок (Planning and tracking transactions)
  • Защищено: Разумная диверсификация (Reasonable diversification)
  • Защищено: Сравнение валют (Currency comparison)
  • Защищено: Сделки на основе корреляции (Trades based on correlation)
  • Защищено: Стратегии, валютные пары и параметры сделок
  • Защищено: Диверсификация и хеджирование в трейдинге (Diversification and hedging)
  • Защищено: Анализ и прогнозирование графиков популярных пар (Chart analysis of popular pairs)
  • Защищено: Обзор Forex брокеров (Overview of Forex Brokers)
  • Защищено: Стратегии и алгоритмы для роботов в трейдинге (Strategies and algorithms for trading robots)
  • Защищено: Прогнозирование кривой на основе нейросети (Neural Network Curve Prediction)
  • Защищено: Трейдинг на платформе Libertex (Trading on the Libertex platform)
  • Защищено: Convolutional Neural Network. Object Landmarks
  • Технологии машинного обучения на простом примере
  • Введение в Unsupervised learning
  • Введение в Deep Q-Learning Network
  • Введение в Q-Learning
  • Защищено: Stereo Vision
  • Keras API models (Sequential, Functional, and Model Subclassing)
  • Защищено: Object detection algorithms
  • Введение в Google Colab (Introduction to Google Colab)
  • Защищено: Архитектуры нейросетей для CV
  • Защищено: Measurements of a human body (Sample plan to create MVP)
  • Защищено: Обзор алгоритмов детекции мимики лица (Overview of algorithms for detecting facial expressions)
  • CMake projects in Visual Studio — Quick start
  • Защищено: Linux C++ проект в Visual Studio
  • Защищено: От регрессии к нейронным сетям (From regression to neural networks)
  • Основы калибровки (Calibration Basics)
  • Защищено: Калибровка системы «проектор-экран-камера» (Calibrating the projector-screen-camera system)
  • Защищено: Гомография в примерах (Homography in examples)
  • Защищено: Введение в GPU-программирование
  • Защищено: Методы 3d реконструкции помещений (Methods for 3d reconstruction of premises)
  • Аппроксимация линии по точкам контура через преобразования Хафа (Line approximation by contour points through Hough transforms)
  • Преобразование координат при калибровке роботов (Coordinate transformation when calibrating robots)
  • Защищено: Определение центроида лазерного пятна на цифровом изображении (Determination of the centroid of the laser spot on a digital image)
  • Start на GitHub
  • Инструменты для машинного обучения через нейросети (Machine learning via neural networks)
  • Оценка глубины по 360-градусному изображению (Depth estimation from a 360-degree image)
  • Алгоритмы регистрации облаков точек (Point cloud registration algorithms)
  • Регистрация облаков точек с оценкой соответствия. Основы (Compliance-Assessed Point Cloud Registration. The basics)
  • Cемантическая сегментация, панорама и фотограмметрия (Semantic segmentation, panorama and photogrammetry)
  • Калибровка камеры (Camera Calibration)
  • Преобразование mesh-модели в модель B-rep (Conversion mesh-model в B-rep model)
  • Фотограмметрия (Photogrammetry)
  • От облака точек к поверхности (From point cloud to surface)
  • Пример организации экзамена в ZOOM (ZOOM exam organization example)
  • Защищено: Arduino проект «Автомобиль, который избегает препятствий» (Arduino project «A car that avoids obstacles»)
  • Основы программирования Arduino (Arduino programming basics)
  • Кратко об Arduino и Raspberry Pi (Briefly about Arduino and Raspberry Pi)
  • Подключение Raspberry Pi камеры и инсталляция OpenCV (Connecting a Raspberry Pi camera and OpenCV installing )
  • Основы программирования на Raspberry Pi (Raspberry Pi programming basics)
  • Face recognition. Python, DLIB
  • Распознавание лиц с IP камер. Выбор, хранение и обработка данных для принятия решения (Face recognition from IP cameras. Selection, storage and processing of data for decision making)
  • Адекватность и оптимальность нейронной сети на примере распознавания поворота головы (Adequacy and optimality of the neural network for detecting head rotation)
  • Машинное обучение распознавать поворот лица (Machine learning to recognize face turn)
  • Introduction to AI and references
  • Защищено: Tensorflow, Python, Visual Studio. Quick start
  • AI based on Unity ML Agents. Quick start
  • Модификация простой игры на Unity (Modification of a simple game on Unity)
  • WEB на Python с Django в Visual Studio
  • WEB на Python с Flask в Visual Studio
  • Обнаружение лица и выделение характерных точек (Face Detection in Python)
  • Нейросеть для классификации фруктов на Python (Fruit Neural Network)
  • Основы построения нейронных сетей на Python (numpy) в Visual Studio (Python numpy NN in Visual Studio)
  • Быстрый старт в WebGL (Quickstart in WebGL)
  • Быстрый старт в WEB программирование (Quickstart in WEB programming)
  • Быстрый старт с Qt C++ в Visual Studio (Quickstart with Qt C++ in Visual Studio)
  • Быстрый старт с Python в Visual Studio (Quickstart with Python in Visual Studio)
  • Распознавание лиц. 3D- реконструкция ASM модели (Face Recognition. 3D reconstruction of ASM)
  • Идентификация по множеству признаков при помощи нейросети (Identification by multiple features. Using neural network)
  • Идентификация по множеству признаков. Основы (Identification by multiple features. Basics)
  • Unity3D симулятор «Умная змейка со стереозрением» (Unity3D simulator «Smart snake with stereo vision»)
  • Игра “Snake” на Unity3D (The game “Snake” on Unity3D)
  • Основы Unity3D (Unity3D Basics)
  • Архитектура WebGL приложения для чайников (WebGL application architecture for Dummies)
  • Оптимизация OpenGL приложений (Optimizing OpenGL applications)
  • Взаимодействие HTML5 и JavaScript (HTML5 and JavaScript interaction)
  • Shaders in Unity3d
  • Матрицы поворота, углы Эйлера и кватернионы (Rotation matrices, Euler angles and quaternions)
  • Выделение объектов на изображении по методу Виолы-Джонса (Object selection in the image according to the Viola-Jones method)
  • CMake компоновка OpenCV (CMake OpenCV layout)
  • Распознавание лиц на основе OpenCV для C++ (Facial Recognition based on OpenCV C++)
  • OpenCV in Android
  • Введение в OpenCV программирование на C++ (Introduction to OpenCV C++ programming)
  • Основы компьютерного зрения (Basics of computer vision — CV)
  • 2D/3D моделирование в Android (2D/3D modeling in Android)
  • Введение в Android программирование (Introduction to Android Programming)
  • Поиск объектов на изображении (Search for objects in the image)
  • Алгоритмы вычитания фона (Background Subtraction Algorithms)

© 2017-2023 api-2d3d-cad. Все права защищены.
Запрещено использование материалов сайта без согласия его авторов и обратной ссылки.

Почему JavaScript пожирает HTML: примеры кода

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

Код веб-страницы традиционно состоит из трех разделов, каждый из которых выполняет свои обязанности: HTML-код определяет структуру и семантику, CSS-код определяет внешний вид, а JavaScript-код определяет его поведение. В командах с участием дизайнеров, HTML / CSS разработчиков и JavaScript-разработчиков это разделение получается естественно: дизайнеры определяют визуальные элементы и пользовательский интерфейс, разработчики HTML и CSS размещают эти визуальные элементы на странице в браузере, а JavaScript-разработчики добавляют взаимодействие с пользователем, чтобы связать все вместе и «заставить это работать». Каждый может работать над своими задачами, не вмешиваясь в код остальных двух категорий разработчиков. Но все это справедливо для так называемого «старого стиля».

В последние годы JavaScript-разработчики стали определять структуру страницы в JavaScript, а не в HTML (например, используя js-фреймворк React), что помогает упростить создание и сопровождение кода взаимодействия с пользователем. Без js-фреймворков разрабатывать современные веб-сайты гораздо сложнее. Конечно, когда вы говорите кому-то, что написанный им HTML-код необходимо разбить на части и смешать с JavaScript, с которым он знаком очень плохо, это (по понятным причинам) может быть воспринято в штыки. Как минимум собеседник спросит, зачем нам этого вообще надо, и как мы выиграем от этого.

Как JavaScript-разработчику в межфункциональной команде, мне иногда задают этот вопрос, и часто мне трудно ответить на него. Все материалы, которые я нашел по этой теме, написаны для аудитории, которая уже знакома с JavaScript. А это не очень хорошо для тех, кто специализируется исключительно на HTML и CSS. Но паттерн HTML-in-JS (или что-то еще, что обеспечивает те же преимущества), вероятно, будет еще некоторое время востребован, поэтому я думаю, это важная вещь, которую должны понимать все, кто занимается веб-разработкой.

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

Ликбез: HTML, CSS и JavaScript

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

HTML: для структуры и семантики

Код на HTML (HyperText Markup Language) задает структуру и семантику контента, который будет размещен на странице. Например, HTML-код этой статьи содержит текст, который вы сейчас читаете, и в соответствии с заданной структурой, этот текст размещен в отдельном абзаце, после заголовка и перед вставкой CodePen.

Создадим, к примеру, простую веб-страницу со списком покупок:

Мы можем сохранить этот код в файле, открыть его в веб-браузере, и браузер отобразит полученный результат. Как видите, код HTML в этом примере представляет собой страницу, которая содержит заголовок «Список покупок» (Shopping List (2 items)), текстовое поле ввода, кнопку «Добавить товар» (Add Item) и список из двух пунктов («Яйца» и «Масло»). Пользователь введет адрес в своем веб-браузере, затем браузер запросит этот HTML-код с сервера, загрузит его и отобразит. Если в списке уже есть элементы, сервер может прислать HTML с уже готовыми элементами, как в этом примере.

Попробуйте набрать что-нибудь в поле ввода и нажать кнопку «Добавить элемент». Вы увидите, что ничего не происходит. Кнопка не связана ни с каким кодом, который мог бы изменить HTML, а HTML не может ничего изменить сам. Мы вернемся к этому через минуту.

CSS: для изменения внешнего вида

Код CSS (Cascading Style Sheets, Каскадные Таблицы Стилей) определяет внешний вид страницы. Например, CSS этой статьи задает шрифт, интервал и цвет текста, который вы читаете.

Возможно, вы заметили, что наш пример списка покупок выглядит очень просто. HTML не позволяет задать такие вещи, как интервалы, размеры шрифтов и цвета. Поэтому мы и используем CSS. Мы могли бы добавить CSS-код для этой страницы, чтобы немного украсить ее:

Как видите, этот CSS-код изменил размер и толщину символов текста, а также цвет фона. Разработчик может по аналогии написать правила для собственного стиля, и они будут последовательно применяться к любой структуре HTML: если мы добавим на эту страницу элементы section, button или ul, для них будут действовать те же изменения шрифта.
Но кнопка Add Item по-прежнему ничего не делает: здесь нам как раз и понадобится JavaScript.

JavaScript: для реализации поведения

Код JavaScript определяет поведение интерактивных, или динамических, элементов на странице. Например, CodePen написан с использованием JavaScript.

Чтобы кнопка Add Item в нашем примере работала без JavaScript, нам потребовалось бы использовать специальный HTML-код, чтобы заставить его отправлять данные обратно на сервер ( , если вам вдруг интересно). Более того, браузер перезагрузит обновленную версию всего HTML-файла без сохранения текущего состояния страницы. Если бы этот список покупок был частью большой веб-страницы, все, что делал пользователь, было бы потеряно. Не важно на сколько пикселей вниз вы продвинулись, читая текст — при перезагрузке сервер вернет вас в начало, не важно сколько минут видео вы просмотрели — при перезагрузке оно начнется заново.

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

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

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

Отделение JavaScript от HTML и CSS оправданно даже в этом простом примере. Более сложные взаимодействия работают так: HTML загружается и отображается, а впоследствии запускается JavaScript, чтобы добавить что-то к нему и изменить его. Однако по мере роста сложности веб-приложения, нам нужно внимательнее следить за тем, что, где и когда меняет наш JavaScript-код.

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

Как только мы заметили ошибку, мы исправили ее, добавив ту же строку totalText.innerHTML из нашего кода для Add Item в код для Remove Item. Теперь у нас одинаковый код, который дублируется в нескольких местах. Позже, скажем, мы захотим изменить этот код так, чтобы вместо «(2 items)» вверху страницы он выводил «Items: 2». Мы должны убедиться, что не забудем обновить этот код во всех трех местах: в HTML, в JavaScript-коде для кнопки Add Item и в JavaScript-коде для кнопки Remove Item. Если мы этого не сделаем, у нас будет другая ошибка, из-за которой этот текст будет резко меняться после взаимодействия с пользователем.

Уже в этом простом примере мы видим, как легко запутаться в коде. Конечно. существуют подходы и практики, позволяющие упорядочить JavaScript-код, чтобы облегчить решение этой проблемы. Однако, по мере того, как все будет становиться сложнее, нам придется продолжать реструктуризацию и постоянно переписывать проект, чтобы его можно было спокойно развивать и сопровождать. Пока HTML и JavaScript хранятся отдельно, может потребоваться много усилий, чтобы обеспечить синхронизацию между ними. Это одна из причин, по которой стали популярны новые JavaScript-фреймворки, такие как React: они предназначены для обеспечения более формализованных и эффективных взаимоотношений между HTML и JavaScript. Чтобы понять, как это работает, нам сначала нужно немного углубиться в компьютерную науку.

Императивное vs декларативное программирование

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

  • Императивное программирование. Слово «императивное» здесь означает, что мы задаем компьютеру некую последовательность действий. Строка императивного кода во многом похожа на императив (повелительное наклонение) в английском языке: она дает компьютеру конкретную инструкцию для выполнения задачи, как говорится, по образу и подобию. В императивном программировании мы должны точно говорить компьютеру, как делать каждую мелочь, которая нам нужна. В веб-разработке такой подход скоро признают «устаревшим». Пока он еще используется при работе с Vanilla JavaScript и такими библиотеками, как jQuery. JavaScript в моем примере списка покупок следует императивной парадигме.
    • «Делай X, потом делай Y, потом делай Z».
    • Пример: когда пользователь выберет этот элемент, добавь к нему класс .selected; и когда пользователь уберет свой выбор с элемента, удали класс .selected.
    • Декларативное программирование. Его уровень абстракции выше, чем у императивного программирования. Вместо того, чтобы давать инструкции, мы вместо этого «объявляем» (декларируем), какие результаты мы хотим увидеть после того, как компьютер что-то сделает. То есть мы говорим ему не как делать, а что должно быть сделано. Языки и фреймворки (например, React), поддерживающие декларативную парадигму самостоятельно определяют, как достичь результатов, которых мы ждем от них. Правда, эти инструменты внутри тоже построены на императивном коде, но они скрывают от нас, как и в какой последовательности выполняют действия, направленные на достижение результатов. Так что, мы не должны думать об этом:
      • «Результат должен быть XYZ. Делай все, что тебе нужно, чтобы это произошло.
      • Пример: этот элемент имеет класс .selected, если пользователь его выбрал.

      HTML — декларативный язык

      Забудьте о JavaScript на мгновение. Вот важный факт: HTML является декларативным языком. В HTML-файле вы можете объявить что-то вроде:

       
      Hello
       
      My name is Mike.

      Когда веб-браузер прочитает этот HTML-код, он самостоятельно определит необходимые шаги и выполнит их:

      1. Создай элемент section.
      2. Создай элемент-заголовок уровня 1 (h1).
      3. Установи для текста элемента-заголовка значение «Hello».
      4. Помести заголовочный элемент в элемент section.
      5. Создай элемент абзаца (p).
      6. Установи текст элемента абзаца на «My name is Mike».
      7. Помести элемент абзаца в элемент section.
      8. Помести элемент section в HTML-документ.
      9. Выведи документ на экран.

      JavaScript — императивный язык

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

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

      • список помеченных флажков, каждая строка которых меняется на свой цвет при выборе;
      • текст внизу, например «1 из 4 выбран», который должен обновляться при изменении флажков;
      • кнопка Select All («Выбрать все»), которую следует отключить, если все флажки уже установлены;
      • кнопка Select None («Не выбирать ничего»), которую следует отключить, если флажки не установлены.

      const captionText = document.getElementById('caption-text'); const checkAllButton = document.getElementById('check-all-button'); const uncheckAllButton = document.getElementById('uncheck-all-button'); const checkboxes = document.querySelectorAll('input[type="checkbox"]'); function updateSummary() < let numChecked = 0; checkboxes.forEach(function(checkbox) < if (checkbox.checked) < numChecked++; >>); captionText.innerHTML = `$ of $ checked`; if (numChecked === 0) < checkAllButton.disabled = false; uncheckAllButton.disabled = true; >else < uncheckAllButton.disabled = false; >if (numChecked === checkboxes.length) < checkAllButton.disabled = true; >> checkAllButton.addEventListener('click', function() < checkboxes.forEach(function(checkbox) < checkbox.checked = true; checkbox.closest('tr').className = 'checked'; >); updateSummary(); >); uncheckAllButton.addEventListener('click', function() < checkboxes.forEach(function(checkbox) < checkbox.checked = false; checkbox.closest('tr').className = ''; >); updateSummary(); >); checkboxes.forEach(function(checkbox) < checkbox.addEventListener('change', function(event) < checkbox.closest('tr').className = checkbox.checked ? 'checked' : ''; updateSummary(); >); >);

      Головная боль как она есть

      • Есть четыре элемента row (ряд таблицы, она же список), каждый из которых содержит флажок. Третий флажок помечен.
      • Есть текст «1 из 4 выбранных».
      • Есть кнопка Select All («Выбрать все»), которая включена.
      • Есть кнопка Select None («Не выбирать ничего»), которая отключена.
      • Найди ряд, содержащий флажок, и добавь в него CSS класс .selected.
      • Найди все флажки в списке и посчитай, сколько из них помечено, а сколько нет.
      • Найди текст и обнови его, указав верное число выбранных покупок и их общее количество.
      • Найди кнопку Select None и включи ее, если она была отключена.
      • Если все флажки теперь установлены, найди кнопку Select All и отключи ее.
      • Найди ряд, содержащий флажок, и удали из него класс .selected.
      • Найди все флажки в списке и посчитай, сколько из них помечено, а сколько не помечено.
      • Найди элемент текста резюме и обновите его, указав проверенное число и общее количество.
      • Найди кнопку Select All и включи ее, если она была отключена.
      • Если все флажки сняты, найди кнопку Select None и отключи ее.
      • Найди все флажки в списке и пометь их.
      • Найди все ряды в списке и добавь к ним класс .selected.
      • Найди текст и обновите его.
      • Найди кнопку Select All и отключи ее.
      • Найди кнопку Select None и включи ее.
      • Найди все флажки в списке и снимите все флажки.
      • Найди все ряды в списке и удалите класс .selected из них.
      • Найди текстовый элемент резюме и обновите его.
      • Найди кнопку Select All и включи ее.
      • Найди кнопку Select None и отключи ее.

      У нас тут большая проблема на самом деле: нет сущности, которая бы содержала полную информацию о состоянии нашего приложения (в данном случае это ответ на вопрос «какие флажки помечены?») и несла бы ответственность за обновление этой информации. Флажки, конечно же знают, помечены ли они, но об этом также должны знать CSS-код для рядов таблицы, текст и каждая кнопка. Пять копий этой информации хранятся отдельно по всему HTML, и когда она изменяется в любом из этих мест, JavaScript-разработчик должен отловить это и написать императивный код для синхронизации с изменениями в других местах.

      И это все еще простой пример одного небольшого компонента страницы. Если даже этот набор инструкций выглядит как головная боль, представьте, насколько сложным и хрупким становится более крупное веб-приложение, когда вам нужно реализовать все это на императивном JavaScript. Для многих сложных современных веб-приложений такое решение не масштабируется от слова «совсем».

      Ищем источник правды

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

      Помните, как HTML позволяет нам сосредоточиться на структуре страницы, а не на деталях реализации, и как браузер отображает эту структуру? Точно так же, когда мы используем React, мы можем сосредоточиться на структуре, определив ее на основе данных, хранящихся в одном месте. Такой процесс называется односторонним связыванием, а место хранения данных о состоянии приложения называется «единым источником правды». Когда источник правды изменится, React автоматически обновит для нас структуру страницы. Он позаботится об обязательных шагах за кулисами, как это делает веб-браузер для HTML. Хотя в качестве примера здесь используется React, этот подход работает и для других фреймворков, например Vue.

      Давайте вернемся к нашему списку флажков из примера выше. В этом случае «правда», которую мы хотим знать, довольно лаконична: какие флажки помечены? Другие детали (например, текст, цвет строк, какие кнопки включены) — это уже информация, полученная на основе источника правды. И почему же они должны иметь свою собственную копию этой информации? Они должны просто использовать единый источник правды только для чтения, и все элементы страницы должны «просто знать», какие флажки помечены, и вести себя соответственно. Вы можете сказать, что ряды таблицы, текст и кнопки должны иметь возможность автоматически реагировать на флажок в зависимости от того, помечен он или не помечен (“видите, что там происходит?”)

      Скажи мне, чего ты хочешь (чего ты хочешь на самом деле)

      Чтобы реализовать эту страницу с помощью React, мы можем заменить список несколькими простыми описаниями фактов:

      • Существует список значений true / false, называемый checkboxValues, который показывает, какие поля помечены.
        • Пример: checkboxValues ​​\u003d [false, false, true, false]
        • Этот список показывает, что у нас есть четыре флажка, установлен только третий.
        • Для каждого значения в checkboxValues в таблице ​​есть ряд, который:
          • имеет CSS-класс с именем .selected, если значение равно true, и
          • содержит флажок, который проверяется, если значение истинно.
          • Существует текстовый элемент, который содержит текст « of selected», где — это число истинных значений в checkboxValues, а — общее количество значений в checkboxValues.
          • Есть кнопка Select All, которая включена, если в checkboxValues ​​есть значения false.
          • Есть кнопка Select None, которая включена, если в checkboxValues ​​есть значения true.
          • Когда флажок помечен, соответствующее значение изменяется в checkboxValues.
          • Когда кнопка Select All нажата, она устанавливает все значения checkboxValues ​​в true.
          • При нажатии кнопки Select None все значения в checkboxValues ​​устанавливаются в false.

          Остальное — это декларативные высказывания («есть . »), которые теперь встроены прямо в определение структуры страницы. Для этого мы пишем код для наших элементов с использованием специального синтаксического расширения JavaScript — JavaScript XML (JSX). Он напоминает HTML: JSX позволяет использовать похожий на HTML синтаксис для описания структуры интерфейса, а также обычный JavaScript. Это дает нам возможность смешивать логику JS со структурой HTML, поэтому структура может быть в любой момент времени разной. Все зависит от содержимого checkboxValues​​.

          Перепишем наш пример на React:

          function ChecklistTable(< columns, rows, initialValues, . otherProps >) < const [checkboxValues, setCheckboxValues] = React.useState(initialValues); function checkAllBoxes() < setCheckboxValues(new Array(rows.length).fill(true)); >function uncheckAllBoxes() < setCheckboxValues(new Array(rows.length).fill(false)); >function setCheckboxValue(rowIndex, checked) < const newValues = checkboxValues.slice(); newValues[rowIndex] = checked; setCheckboxValues(newValues); >const numItems = checkboxValues.length; const numChecked = checkboxValues.filter(Boolean).length; return ( > -$`; const isChecked = checkboxValues[rowIndex]; return (  ); >)>
           of items checked     
           > ; >)>
                      
             /> >  data-label=> ); >)>
           
           ); >; function ShoppingList() < return ( rows= <[ ['Sugar', '1 cup'], ['Butter', '½ cup'], ['Eggs', '2'], ['Milk', '½ cup'], ]>initialValues= <[false, false, true, false]>/> ); > ReactDOM.render( , document.getElementById('shopping-list') );

          JSX выглядит своеобразно. Когда я впервые столкнулся с этим, мне показалось, что так делать просто нельзя. Моей первоначальной реакцией было: «Чтоааа? HTML не может находится внутри JavaScript-кода!». И я был не один такой. Тем не менее, это не HTML, а JavaScript, одетый как HTML. На самом деле, это мощное решение.

          Помните те 20 императивных инструкций выше? Теперь у нас их три. Остальные (внутренние) императивные инструкции React сам выполняет для нас за кулисами — каждый раз, когда изменяется checkboxValues.

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

          JavaScript победил HTML: взял измором

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

          Преимущества современного подхода: предсказуемость, возможность повторного использования и комбинирования

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

          Мы можем взять простые компоненты и составить их вместе, как кубики LEGO, создавая более сложные и полезные компоненты, не делая их логику слишком запутанной. А если мы используем компоненты, созданные другими разработчиками, мы можем легко накатить обновления или баг-фиксы без необходимости переписывать наш код.

          Тот же JavaScript, только в профиль

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

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

          Другая потенциальная проблема: когда семантическая структура страницы разбивается на абстрактные компоненты, разработчик может перестать думать о том, какие элементы HTML будут сгенерированы в результате. Специфические HTML-теги, такие как section и aside, имеют свою семантику, которая теряется при использовании тегов общего назначения, таких как div и span — даже если они визуально выглядят одинаково на странице. Это особенно важно для обеспечения доступности веб-приложения для разных категорий пользователей.

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

          Осознанная необходимость vs неосознанный тренд

          В последнее время использование фреймворков в каждом проекте стало трендом. Некоторые считают, что разделение HTML и JavaScript устарело, но это не так. Для простого статического веб-сайта, который не требует сложного взаимодействия с пользователем, это как раз подойдет. Более ярые поклонники React могут не согласиться со мной здесь, но если все, что делает ваш JavaScript, — это создание неинтерактивной веб-страницы, вам не следует использовать его. JavaScript загружается не так быстро, как обычный HTML. Поэтому, если вы не ставите задачу получить новый опыт разработки или повысить надежность кода, JavaScript тут принесет больше вреда, чем пользы.

          Кроме того, нет никакой необходимости писать весь свой веб-сайт на React. Или Vue! Или что там еще есть… Многие люди не знают этого, потому что все учебники в основном показывают, как использовать React для разработки сайта с нуля. Если у вас есть только один маленький сложный виджет на простом веб-сайте, вы можете использовать React для одного компонента. Вам не всегда нужно беспокоиться о webpack, Redux, Gatsby или еще о чем-то, что кто-то там рекомендует как «лучшие практики».

          Но если приложение достаточно сложное, использование современного декларативного подхода абсолютно стоит того. Является ли React наилучшим решением? Нет. У него уже сейчас есть сильные конкуренты. А потом появятся еще и еще… Но декларативное программирование никуда не денется, и в каком-нибудь новом фреймворке, вероятно, этот подход будет переосмыслен и реализован еще лучше.

          • Блог компании RUVDS.com
          • Веб-разработка
          • JavaScript
          • Программирование
          • HTML

          DOM: работа с HTML-страницей

          Большинство действий в javascript выполняется с HTML-страницей. В javascript страница представлена в виде объектной модели DOM (Document Object Model).

          Любые действия со страницей требуют вызова соответствующего метода DOM.

          Понимание, как работать с документом в модели DOM - краеугольный камень в javascript-программировании.

          Основным инструментом работы и динамических изменений на странице является DOM (Document Object Model) - объектная модель, используемая для XML/HTML-документов. Согласно DOM-модели, документ является иерархией.
          Каждый HTML-тег образует отдельный элемент-узел, каждый фрагмент текста - текстовый элемент, и т.п. читать дальше »

          1. Свойства DOM-элементов
          2. DOM-Атрибуты
          3. DOM-атрибуты VS DOM-свойства
            1. Синхронизация
            2. Возможные значения

            У DOM-элементов в javascript есть свойства и атрибуты. И те и другие имеют имя и значение.
            Поэтому иногда разработчики путают одно с другим.

            Между ними есть соответствие, но оно не однозначное и его лучше понимать. читать дальше »

            1. HTML-разметка документа для путешествия
              1. Так выглядит документ
              2. Здесь стоите Вы

              Здесь вы сможете побродить по DOM, посмотреть все элементы и проверить, все ли вы понимаете правильно. читать дальше »

              1. Поиск по id
              2. Поиск по тегу
              3. Получить всех потомков
              4. Поиск по name : getElementsByName
              5. Другие способы

              Стандарт DOM предусматривает несколько средств поиска элемента. Это методы getElementById , getElementsByTagName и getElementsByName .

              Более мощные способы поиска предлагают javascript-библиотеки. читать дальше »

              1. Создание и добавление элементов
                1. Добавление в DOM
                2. Добавление в конкретное место
                3. Удаление узла DOM
                1. Создание
                2. Позиционирование
                3. Закрытие
                4. Запуск

                Рассмотрим основные способы изменять DOM, вначале - в общих чертах, затем - на конкретном примере из жизни. читать дальше »

                При поиске элементов в DOM надо помнить одну простую вещь: все списки узлов - не массивы Array , а специальные динамичные сущности DOMNodeList . Какое это имеет значение? Разберем на примере. читать дальше »

                Автор: 온라인 포커 사이트 (не зарегистрирован), дата: 8 июня, 2023 - 05:09

                Resort 온라인 포커 사이트 | City of Norfolk, Virginia

                Автор: 토토사이트2 (не зарегистрирован), дата: 8 июня, 2023 - 15:22

                Many people say it surrounds the simul. I'm afraid to see more than I can imagine먹튀검증사이트

                Автор: Гость (не зарегистрирован), дата: 9 июня, 2023 - 12:54

                QuickBooks offers integration with Square, allowing you to sync your Square transactions and sales data directly into QuickBooks. This integration can help streamline your accounting processes and keep your financial records up to date. Here are some key points about QuickBooks integration with Square

                Автор: 플레이포커머니상 (не зарегистрирован), дата: 14 июня, 2023 - 15:54

                I love seeing more and more people visiting your blog. I, who have been together for a long time, created a forum with the same topic as yours this time. The subject is going to be captured by 플레이포커머니상.

                Автор: laski (не зарегистрирован), дата: 17 июня, 2023 - 22:52
                Автор: laski (не зарегистрирован), дата: 17 июня, 2023 - 22:56
                Автор: laski (не зарегистрирован), дата: 17 июня, 2023 - 23:02
                Автор: fwqe (не зарегистрирован), дата: 24 июня, 2023 - 12:07

                This specific seems to be definitely excellent. These very small facts are produced using wide range of qualifications know-how. I favor the idea a good deal 영화 다시보기

                Автор: Jugma (не зарегистрирован), дата: 25 июня, 2023 - 12:13

                Very great article , thanks for posting! Buhalterine apskaita Vilniuje

                Автор: Гость (не зарегистрирован), дата: 25 июня, 2023 - 12:15

                Very great article thanks for posting! Buhalterine apskaita Vilniuje

                Автор: Гость (не зарегистрирован), дата: 25 июня, 2023 - 12:16

                Very great article thanks for posting! Buhalterine apskaita Vilniuje

                Автор: Гость (не зарегистрирован), дата: 25 июня, 2023 - 12:16

                Very great article thanks for posting! Buhalterine apskaita Vilniuje

                Автор: Гость (не зарегистрирован), дата: 25 июня, 2023 - 12:16

                Very great article thanks for posting! Buhalterine apskaita Vilniuje

                Автор: Гость (не зарегистрирован), дата: 25 июня, 2023 - 12:16

                Very great article thanks for posting! Buhalterine apskaita Vilniuje

                Автор: Гость (не зарегистрирован), дата: 25 июня, 2023 - 12:16

                Very great article thanks for posting! Buhalterine apskaita Vilniuje

                Автор: Гость (не зарегистрирован), дата: 25 июня, 2023 - 12:16

                Very great article thanks for posting! Buhalterine apskaita Vilniuje

                Автор: Гость (не зарегистрирован), дата: 25 июня, 2023 - 12:16

                Very great article thanks for posting! Buhalterine apskaita Vilniuje

                Автор: Гость (не зарегистрирован), дата: 26 июня, 2023 - 06:02

                I like what you guys are up too. Such clever work and reporting! Keep up the excellent works guys I have incorporated you guys to my blogroll. I think it will improve the value of my site . 안전놀이터 추천

                Автор: raj (не зарегистрирован), дата: 28 июня, 2023 - 05:57

                good exercises for 12 (kids) year olds at home. workout for 12 year olds at home

                Автор: 카지노api (не зарегистрирован), дата: 15 июля, 2023 - 13:27

                I am really enjoying reading your well written articles. It looks like you spend a lot of effort and time on your blog. I have bookmarked it and I am looking forward to reading new articles. Keep up the good work.카지노api

                Автор: nagagames ทางเข้าเล่น (не зарегистрирован), дата: 15 июля, 2023 - 15:27

                pg slot games feel to their web based gaming experience. and get the money if you use time to play on this website. nagagames ทางเข้าเล่น

                Автор: pgslot เว็บตรง (не зарегистрирован), дата: 15 июля, 2023 - 15:27

                If you are having a hard time deciding between providers, check out the bonuses they offer. The best online casino. pgslot เว็บตรง

                Автор: เล่น pg (не зарегистрирован), дата: 15 июля, 2023 - 15:27

                There are free credits and full slot demo game promotions. There are many games to choose from. เล่น pg

                Автор: ibizagame888.co (не зарегистрирован), дата: 15 июля, 2023 - 15:28

                I like the valuable information you provide in your articles. comes with online slots games. The strongest ibizagame888.co

                Автор: 먹튀검증 (не зарегистрирован), дата: 19 июля, 2023 - 11:50

                Really a great addition. I have read this marvelous post. Thanks for sharing information about it. I really like that
                먹튀검증

                Автор: Гость (не зарегистрирован), дата: 27 июля, 2023 - 03:43
                Автор: Гость (не зарегистрирован), дата: 27 июля, 2023 - 03:44
                Автор: kiki (не зарегистрирован), дата: 28 июля, 2023 - 10:39

                フランクミュラー コピー
                Very nice post. Thanks for sharing the post. Best of Luck my dear friend
                https://casinoberlin.eu

                Автор: casinoberlin (не зарегистрирован), дата: 28 июля, 2023 - 10:42

                フランクミュラー コピー
                Very nice post. Thanks for sharing the post. Best of Luck my dear friend
                https://casinoberlin.eu

                Автор: https://laoal.com/ (не зарегистрирован), дата: 31 июля, 2023 - 08:40

                I will bookmark your weblog and check again here regularly. I’m quite certain I will learn lots of new stuff right here! https://laoal.com/

                Автор: TGA168.BET (не зарегистрирован), дата: 4 августа, 2023 - 08:49

                Calling all TGA168.BET gaming enthusiasts! Join us for a thrilling night of online slots and live football betting. Let's roll the dice and cheer for our teams.

                Автор: TGA-BET.COM (не зарегистрирован), дата: 4 августа, 2023 - 08:50

                Get ready for a TGA-BET.COM gaming showdown! Join us as we explore the world of online slots and live football betting. It's time to test our skills

                Автор: TGA-SLOT.COM (не зарегистрирован), дата: 4 августа, 2023 - 08:50

                Step into the TGA-SLOT.COM realm of endless entertainment! Join the excitement with online slots and live football betting. Luck is on our side

                Автор: tgagame.net (не зарегистрирован), дата: 4 августа, 2023 - 08:51

                Hey there, let's dive tgagame.net into a world of gaming fun! Join us for online slots and live football betting – the perfect combo for a great time

                Автор: สล็อตpgล่าสุด (не зарегистрирован), дата: 16 августа, 2023 - 14:05

                people play the most. We have developed the system well. สล็อตpgล่าสุด

                Автор: ทดลองเล่นสล็อต (не зарегистрирован), дата: 16 августа, 2023 - 14:06

                pg slot games feel to their web based gaming experience. and get the money if you use time to play on this website. ทดลองเล่นสล็อต

                Автор: slot (не зарегистрирован), дата: 16 августа, 2023 - 14:07

                If you are having a hard time deciding between providers, check out the bonuses they offer. The best online casino. slot

                Автор: easyslot (не зарегистрирован), дата: 16 августа, 2023 - 14:07

                There are free credits and full slot demo game promotions. There are many games to choose from. easyslot

                Автор: pg (не зарегистрирован), дата: 16 августа, 2023 - 14:08

                I like the valuable information you provide in your articles. comes with online slots games. The strongest pg

                Автор: 燒味及鹵味店 (не зарегистрирован), дата: 29 августа, 2023 - 12:09

                Thank you very much for sharing such a useful article. Will definitely saved and revisit your site.

                Автор: ufabet168 go (не зарегистрирован), дата: 29 августа, 2023 - 16:50

                I will right away take hold of your rss feed as I can not to find your email subscription link or newsletter service. Do you have any? Please permit me know in order that I may just subscribe. Thanks.

                Автор: pgslot168z (не зарегистрирован), дата: 9 сентября, 2023 - 18:37

                I think this is one of the most vital information for me. And i am glad reading your article. But want to remark on few general things, The site style is great, the articles is really great. Good job, cheers
                pgสล็อต168

                Автор: แทงบอล-ราคาดี (не зарегистрирован), дата: 10 сентября, 2023 - 12:55

                ท่านสามารถเดิมพันบอลออนไลน์ ที่ไหนก็ได้ขอแค่มีสมาร์ทโฟน และ อินเตอร์เน็ต แพล็ตฟอร์มของเราสามารถเข้าถึงได้ง่าย มีบริการตลอด 24 ชั่วโมง แทงบอล-ราคาดี

                Автор: bet818king (не зарегистрирован), дата: 18 сентября, 2023 - 13:38

                เราคือเว็บตรงจากคาสิโน มั่นใจได้ 100% ปลอดภัยด้วยการบริการที่รวดเร็วทันใจ พร้อมบริการตลอด 24 ชั่วโมง ลูกค้าสามารถเลือกเล่นได้หลากหลายเกมจุใจๆ ด้วย pg slot , joker slot , slotxo , pragmatic game, super slot อื่นๆอีกมากมายได้แล้ววันนี้ สล็อต-เว็บตรงไม่ผ่านเอเ

                Автор: bet818king (не зарегистрирован), дата: 18 сентября, 2023 - 13:39

                ของเราเป็นคาสิโนออนไลน์ที่เป็นเว็บไซต์ที่ดีมีคุณภาพทั้งด้านการบริการ และการเงินที่ จ่ายชัวร์ 100% ปลอดภัย 100% และมีความรวดเร็วในการชำระเงิน เพียงเท่านี้เราก็สามารถไว้ใจให้ทางคาสิโนเป็นผู้ดูแลเราได้แล้ว ufabet-thai

                Автор: betflixsupervip (не зарегистрирован), дата: 19 сентября, 2023 - 18:01

                I do believe this is an excellent blog. I stumbledupon it I will come back once again since I book marked it. Money and freedom is the best way to change, may you be rich and continue to help other people. เบทฟิก678" title="เบทฟิก678">เบทฟิก678

                Автор: UFABET168GO (не зарегистрирован), дата: 21 сентября, 2023 - 19:56

                ทางเข้าufabet168 เว็บตรงแทงบอล และคาสิโนออนไลน์ดีที่สุด สล็อต PG ทดลองเล่น เล่นฟรีทุกค่าย เล่นได้ก่อนใคร

                Автор: smit (не зарегистрирован), дата: 27 сентября, 2023 - 06:59

                Admire it! I am thinking about how i can be advised at whatever factor another put up has been made.플레이포커머니상

                Автор: 메이저사이트 (не зарегистрирован), дата: 3 октября, 2023 - 12:07

                "“After reading your article I was amazed. I know that you explain it very well. And I hope that other readers will also experience how I feel after reading your article.

                Автор: betflixsupervip (не зарегистрирован), дата: 4 октября, 2023 - 13:31

                betflik vip กติกา บาคาร่า และวิธีเล่นเกมไพ่ยอดนิยม เข้าใจง่าย ทำเงินดีที่สุด

                Автор: สล็อตpg 2023 (не зарегистрирован), дата: 4 октября, 2023 - 17:05

                people play the most. We have developed the system well. สล็อตpg 2023

                Автор: เว็บทดลอง (не зарегистрирован), дата: 4 октября, 2023 - 17:05

                pg slot games feel to their web based gaming experience. and get the money if you use time to play on this website. เว็บทดลอง

                Автор: ทดลองเล่น บาคาร่า (не зарегистрирован), дата: 4 октября, 2023 - 17:05

                If you are having a hard time deciding between providers, check out the bonuses they offer. The best online casino. ทดลองเล่น บาคาร่า

                Автор: ทดลองเล่นสล็อต pg ซื้อฟรีสปิน (не зарегистрирован), дата: 4 октября, 2023 - 17:06

                There are free credits and full slot demo game promotions. There are many games to choose from. ทดลองเล่นสล็อต pg ซื้อฟรีสปิน

                Автор: pg ฝาก 1 รับ 100 (не зарегистрирован), дата: 4 октября, 2023 - 17:06

                I like the valuable information you provide in your articles. comes with online slots games. The strongest pg ฝาก 1 รับ 100

                Автор: betflixsupervip (не зарегистрирован), дата: 8 октября, 2023 - 03:25
                Автор: 오피 (не зарегистрирован), дата: 9 октября, 2023 - 10:37

                "Fabulous, what a website it is! This web site provides valuable information to us, keep
                it up." 오피

                Автор: UFABET168GO (не зарегистрирован), дата: 9 октября, 2023 - 16:04

                ufabet168 ทางเข้า บาคาร่า DEMO ทดลองเล่นบาคาร่าครบทุกค่าย คาสิโนสดอันดับ1

                Автор: Seo Service Mississauga (не зарегистрирован), дата: 10 октября, 2023 - 10:37

                Very informative post ! There is a lot of information here that can help any business get started with a successful social networking campaign Seo Service Mississauga

                Автор: pgslot168z (не зарегистрирован), дата: 11 октября, 2023 - 15:52

                Thanks for some other magnificent article. The place else may just anyone get that kind of info in such an ideal means of writing? I’ve a presentation next week, and I’m on the search for such info. pgslot168 login" title="pgslot168 login">pgslot168 login

                Автор: 뉴토끼 (не зарегистрирован), дата: 18 октября, 2023 - 11:32
                Автор: Гость (не зарегистрирован), дата: 22 октября, 2023 - 10:40

                I wear t have room schedule-wise right now to completely read your site yet I have bookmarked it and furthermore include your RSS channels. I will return in a day or two. much obliged for an extraordinary site

                Автор: dkdnTfnr (не зарегистрирован), дата: 26 октября, 2023 - 10:18

                Great article. Thank you so much for the 캡포탈 site analysis provided here. Nonetheless, I am somewhat illiterate about 캡포탈. So this submit was really helpful to me. A friend of mine published his e-book in the midst of this struggle, and I think I could be of significant help to him with some of the things I discovered in your submission. thank you! Just saying thank you for the fantastic readability of your writing is not enough. We will make sure to have your RSS channel to stay informed about all updates from 캡포탈 in the future. Thanks for the great information, it's very useful. It's really very moving. I love everything you have and thank you for the coolest and most useful statistics. It's really very moving.

                Автор: dkdnTfnr (не зарегистрирован), дата: 26 октября, 2023 - 10:20

                Great article. Thank you so much for the 캡포탈 site analysis provided here. Nonetheless, I am somewhat illiterate about 캡포탈. So this submit was really helpful to me. A friend of mine published his e-book in the midst of this struggle, and I think I could be of significant help to him with some of the things I discovered in your submission. thank you! Just saying thank you for the fantastic readability of your writing is not enough. We will make sure to have your RSS channel to stay informed about all updates from 캡포탈 in the future. Thanks for the great information, it's very useful. It's really very moving. I love everything you have and thank you for the coolest and most useful statistics. It's really very moving.

                Автор: Гость (не зарегистрирован), дата: 26 октября, 2023 - 12:10

                Thank you so much for this incredibly informative article.입플사이트추천

                Thank you so much for this incredibly informative article.입플사이트

                Автор: Гость (не зарегистрирован), дата: 26 октября, 2023 - 12:10

                https://xn--vf4b27job483ao9au7qele.com/ #입플사이트#입플사이트 추천#입플머니#토토입플#스포츠입플#카지노입플 
                Thank you so much for this incredibly informative article.입플사이트추천
                 
                Thank you so much for this incredibly informative article.입플사이트

                Автор: ยูฟ่า168 (не зарегистрирован), дата: 27 октября, 2023 - 12:55

                You are fantastic. You're actually like an angel that created this remarkable things as well as composed it to your viewers. Your blog site is excellent, consisting of web content design. This ability resembles an expert. Can you inform me your abilities, as well? I'm so interested. ยูฟ่า168

                Автор: 툰코 (не зарегистрирован), дата: 5 ноября, 2023 - 16:41

                I can see that you are an expert at your field! I am launching a website soon, and your information will be very useful for me.. Thanks for all your help and wishing you all the success in your business
                툰코

                Автор: สล็อตpg 2023 (не зарегистрирован), дата: 6 ноября, 2023 - 12:56

                ทดลองเล่นสล็อต pg ใหม่ ล่าสุด 2023 อัพเดทเกมไวก่อนใครทดลองเล่นสล็อต สล็อตpg 2023 ใหม่ รวดเร็วทันใจ เรียกได้ว่าอัพเดทกันแบบเรียงไทม์ ค่ายเกม ลงเกมหมดปุ๊บ ก็สามารถเข้ามา ทดลองเล่นสล็อต pg ใหม่ กับเราได้ทันที เพราะเราเป็นพาร์ทเนอร์ กับหลายๆค่าย

                Автор: pgslot game (не зарегистрирован), дата: 6 ноября, 2023 - 12:56

                เล่นเว็บใหญ่ทำให้สามารถนำเกมใหม่มาลงให้คุณ pgslot game ด้เล่นก่อนใคร เพียงแค่คุณคลิกเข้าเว็บเราในหน้า ทดลองเล่นสล็อต ก็สามารถที่จะคลิก เพื่อเล่นเกมได้เลยก่อนใคร ไม่จำเป็นจะต้องสมัครสมาชิก ให้ยุ่งยาก ก็สามารถเข้ามาเล่นสล็อต ได้แบบฟรีๆ พร้อมเครดิตฟรี ให้คุณได้หมุนกันแบบจุใจ และมีแจกใหม่เรื่อยๆ

                Автор: สล็อต red tiger (не зарегистрирован), дата: 6 ноября, 2023 - 12:57

                สล็อตออนไลน์ ทำให้คุณสามารถสนุกกับเกมสล็อต ทุกเกมได้แบบไม่มีสะดุด สล็อต red tiger พร้อมทั้งยังสามารถ ที่จะกดเข้ามาเพื่อสมัครสมาชิกกันแบบฟรี หากทดลองเล่นสล็อต แล้วอยากเล่นจริงก็สามารถ สมัครได้เลยแบบง่ายๆ ใช้เวลาไม่เกิน 1 นาทีก็สามารถเติมเงิน ด้วยระบบออโต้

                Автор: ฝาก 10 รับ 100 ใหม่ล่าสุด (не зарегистрирован), дата: 6 ноября, 2023 - 12:58

                เพื่อเข้ามาเล่นกับเราได้เลย ฝาก 10 รับ 100 ใหม่ล่าสุด สล็อตเว็บตรง โดยตัวระบบออโต้นั้น ใช้เวลาในการแอดเงินเข้าระบบ ให้ท่านหลังจากโอนเงินโดยใช้เวลาเพียงไม่เกิน 1 นาที

                Автор: slot planet (не зарегистрирован), дата: 6 ноября, 2023 - 13:00

                สล็อต slot planet เว็บตรงเว็บใหญ่เปิดใหม่ รวมสล็อตออนไลน์ที่ดีที่สุด แตกง่าย สมัครฟรี ฝากถอนไม่มีขั้นต่ำ

                Автор: asdd (не зарегистрирован), дата: 12 ноября, 2023 - 10:04

                Thank you again for all the knowledge you distribute,Good post. I was very interested in the article, it's quite inspiring I should admit. I like visiting you site since I always come across interesting articles like this one.Great Job, I greatly appreciate that.Do Keep sharing! Regards
                야동

                Автор: asdd (не зарегистрирован), дата: 12 ноября, 2023 - 10:05

                Thank you again for interesting articles like this one.Great Job, I greatly appreciate that.Do Keep sharing! Regards
                야동

                Автор: 한국야동 (не зарегистрирован), дата: 12 ноября, 2023 - 16:12

                Good to become visiting your weblog again, it has been months for me. Nicely this article that i've been waited for so long. I will need this post to total my assignment in the college, and it has exact same topic together with your write-up. Thanks, good share. 한국야동

                Страница 3 из 3 1 2 3

                Отправить комментарий

                • Полезные.
                • Дополняющие прочитанное.
                • Вопросы по прочитанному. Именно по прочитанному, чтобы ответ на него помог другим разобраться в предмете статьи. Другие вопросы могут быть удалены.
                  Для остальных вопросов и обсуждений есть форум.

                Учебник javascript

                • Введение
                • Основы javascript
                • DOM: работа с HTML-страницей
                • События
                • Объекты, ООП
                • AJAX
                • Особенности регулярных выражений в Javascript

                Основные элементы языка

                • Базовые типы: Строки, Числа, Boolean
                • Операторы, их особенности в JS
                • Массивы
                • Функции
                • Замыкания
                • Регулярные выражения
                • Конструкции языка. Обработка ошибок.

                Сундучок с инструментами

                • Редактирование и отладка скриптов
                • Cookie
                • HTTP-Отладка
                • Просмотр живого HTML
                • Разное полезное

                Интерфейсы

                • Drag and drop
                • Грамотное javascript-дерево за 7 шагов
                • Интеграция AJAX в интерфейс
                • Координаты элемента на странице
                • Правильные show/hide/toggle
                • Удобное дерево с AJAX-подгрузкой

                Все об AJAX

                • Введение в Ajax
                • Ajax и Rich Client
                • Ajax и клиент-серверная архитектура.
                • Способы общения с сервером
                • COMET
                • Форматы данных для AJAX
                • Обмен данными для документов с разных доменов
                • Обмен данными между доменами. Часть 2.

                Оптимизация

                • Google Closure Compiler в деталях
                • Yahoo: лучшие способы ускорения сайта
                • Анализ оптимизации страниц c Yslow
                • Интерфейсы. Прочь от MVC
                • Оптимизация Javascript-кода
                • Польза от documentFragment
                • Сжатие Javascript и CSS
                • Улучшаем сжимаемость Javascript-кода.
                • Умное Кеширование и Версионность в Javascript/CSS

                Разное

                • Асинхронное программирование
                • Google Gears в деталях
                • Javascript Flash мост
                • Букмарклеты и правила их написания
                • О подборке книг на сайте
                • Почему - плохо
                • Способы идентификации в интернете
                • Уровни DOM
                • Что почитать?
                • Шаблонизация с javascript
                • Юнит-тесты уровня браузера на связке Selenium + PHP.
                • Справочники: Javascript/HTML/CSS
                • Система сборки и зависимостей Google Closure Library
                • Хранение данных на клиенте. DOM Storage и его аналоги.
                • 10 лучших функций на JavaScript
                • فلتر فلوكستك 7 مراحل فخر الصناعة.
                  16 минут 23 секунды назад
                • そして顧客の予算を最適化します。Xem thêm: Khách sạn tân.
                  25 минут 10 секунд назад
                • Ver Ennovelas, Telenovelas Online.
                  1 час 46 минут назад
                • สมัคร usun1688 ยูสใหม่ปรับแตก 99%.
                  1 час 48 минут назад
                • It’s really a great and helpful piece.
                  2 часа 12 минут назад
                • Get your King Exchange ID for Betbhai9.
                  2 часа 30 минут назад
                • It’s really a great and helpful piece.
                  3 часа 9 минут назад
                • I was suggested this web site by my.
                  3 часа 28 минут назад
                • I'm looking for unique posts. I’m glad.
                  3 часа 49 минут назад
                • The person who created this post is a.
                  3 часа 50 минут назад
                • Как сделать отправку формы
                • Запретить уменьшение iframe
                • Битовый сдвиг
                • Парсинг большого списка UL
                • Регулярное выражение
                • Куда отправляются данные форм?
                • Как изменить цвет при наведении? (svg в ::before)
                Похожие публикации:
                1. как восстановить whatsapp на компьютере
                2. Как посмотреть пароль от wifi на ios
                3. Как стилизовать рубрики в wordpress
                4. Какое кодовое название было у группы разработчиков ibm pc

Добавить комментарий

Ваш адрес email не будет опубликован. Обязательные поля помечены *