JavaScript, Конспекти

Конспект застосування JavaScript у документі HTML

Leave a comment

Используется как встраиваемый язык для программного доступа к объектам приложений. Широко применяется в браузерах как язык сценариев на веб-страницах.

Языком JavaScript не владеет какая-либо компания или организация, что отличает его от ряда языков программирования, используемых в веб-разработке. Название «JavaScript» является зарегистрированным товарным знаком корпорации Oracle в США.

Зміст ♻

Основы применения JS в документе HTML

  • допустимо размещать js-скрипты и в разделе <head>, и в разделе <body>
  • скрипт помещают в тэг <script>...</script>
  • скрипт из внешнего файла <script src="https://myDomain/myPath/myScript.js"></script> облегчает чтение html и задействует механизм кэширования

JS-скрипт позволяет внести любые изменения в документ:

  • изменение содержания
    • изменяет текст в блоке document.getElementById("myDiv").innerHTML = "Hello JS!";
    • перезагружает файл картинки document.getElementById('myImg').src='hello.gif';
  • изменение стиля
    • изменяет размер шрифта блока document.getElementById("myDiv").style.fontSize = "35px";
    • делает картинку невидимой document.getElementById("mySVG").style.display = "none";
  • изменение события
    • замещение обработчика document.getElementById("myButton").onclick = function() { alert('Hello JS!') };
    • добавление обработчика document.getElementById("myInput").addEventListener( "click" , () => alert('Hello JS!'));
      • удаление обработчика document.getElementById("myInput").removeEventListener( "click" , () => alert('Hello JS!'));

JS-скрипт позволяет осуществить html-вставку аналогично тому, как это осуществляет <?php ?> с той разницей, что вставка осуществится на стороне браузера:

!!! Синтаксис

Исходный код JavaScript - это текстовые блоки, включаемые в HTML для интерпретации браузером. Первая строка JS вида "use strict"; означает, что блок следует интерпретировать более строго, в соответствии со стандартом ECMAScript 5 (ES5) 2009 года.

HTML элемент <script>

//developer.mozilla.org

Элемент используется для встраивания или подключения исполняемого JavaScript кода и может  использовать атрибуты:

  • async HTML5 разрешает браузеру асинхронно загрузить скрипт по url в атрибуте src
  • crossorigin Обычные элементы тега script передают мало информации в window.onerror для скриптов, которые не проходят проверку CORS (en-US). Чтобы разрешить ведение журнала ошибок сайта, которые используют отдельный домен для статических файлов (например, изображение, видео-файл, CSS-стили или Javascript-код), используйте атрибут crossorigin. Посмотрите статью «настройки атрибутов CORS» для более наглядного объяснения его допустимых аргументов.
  • defer Это логический атрибут, указывающий браузеру, что скрипт должен выполняться после разбора документа, но до события DOMContentLoaded (en-US). Скрипты с атрибутом defer будут предотвращать запуск события DOMContentLoaded (en-US) до тех пор, пока скрипт не загрузится полностью и не завершится его инициализация.
    Предупреждение: Атрибут defer не будет оказывать никакого эффекта, если атрибут src отсутствует. Чтобы достигнуть такого же эффекта для динамически вставленных скриптов используйте async=false. Скрипты с атрибутом defer будут выполняться в том порядке, в котором они появились при разборе документа.
  • integrity Этот атрибут содержит встроенные метаданные, которые агент пользователя (браузер) может использовать для проверки того, что выбранный ресурс был доставлен без непредвиденных манипуляций. Смотрите Целостность субресурса (en-US)
  • nomodule Булевый атрибут, который устанавливается для того, чтобы скрипт не выполнялся в браузерах, поддерживающих ES6-модули (англ.). Таким образом, может быть использован для предоставления резервных сценариев в старых браузерах, которые не поддерживают модульный код JavaScript
  • nonce Криптографический одноразовый номер (номер, используемый один раз) для внесения встроенных скриптов в белый список в script-src Content-Security-Policy (en-US). Сервер должен генерировать уникальное одноразовое значение каждый раз, когда он передает политику. Крайне важно предоставить одноразовый номер, который нельзя угадать, поскольку в противном случае обход политики ресурса является тривиальным
  • src Определяет URI внешнего скрипта; является альтернативой встраиванию скрипта непосредственно в документ.
    Предупреждение: Если у элемента script будет указан атрибут src, то он не должен иметь встроенный скрипт между тегами.
  • text Как и атрибут textContent, этот атрибут задает текстовое содержимое элемента. Однако, в отличие от атрибута textContent, этот атрибут оценивается как исполняемый код после того, как узел вставлен в DOM
  • type Этот атрибут указывает тип представленного скрипта. Значение этого атрибута будет находиться в одной из следующих категорий:
    • Атрибут не установлен (по-умолчанию), пустая строка или установлен как MIME-тип JavaScript
      • : Обозначает, что скрипт является "классическим скриптом", содержащим JavaScript-код. Рекомендуется не указывать MIME-тип, а пропускать атрибут вообще. MIME-типы JavaScript указаны в спецификации.
    • module Данное значение даёт браузеру инструкцию, что код является JavaScript-модулем. Обработка содержимого скрипта отложенная. Атрибуты charset и defer игнорируются. Для дополнительной информации по использованию module, смотрите руководство по JavaScript-модулям. В отличие от классчических скриптов, модули требуют использования CORS-протокола для cross-origin загрузок
    • importmap (en-US) : Данное значение сигнализирует о том, что содержимое тега является словарём импортов. Словарь импортов - это JSON-объект, который может использоваться для задания алиасов при импорте JavaScript-модулей.
    • Любое другое значение: Встроенный контент обрабатывается как блок данных, который не будет обрабатываться браузером. Разработчики должны использовать допустимый тип MIME, который не является типом MIME JavaScript, для обозначения блоков данных. Атрибут src будет проигнорирован.
    • charset Устарело
      Если присутствует, его значение должно соответствовать "utf-8" без учета регистра ASCII. И в том, и в другом случае нет необходимости указывать атрибут charset, поскольку документы должны использовать UTF-8, а элемент script наследует свою кодировку символов от документа.
    • language Устарело Non-standard Как и атрибут type, этот атрибут определяет используемый язык сценариев. Однако, в отличие от type, возможные значения language никогда не были стандартизированы. Вместо него следует использовать атрибут type.

Элемент <noscript>

Парный тег <noscript></noscript> используется для отображения браузером в этой части документа текста в случае, если JavaScript не поддерживается браузером или отключен:

 

Событие

//

  • focusin event: fired when an element is about to gain focus.
  • focusout event: fired when an element is about to lose focus.

<script>
function demoCanvas() {
var b_canvas = document.getElementById("demoCanvas");
var b_context = b_canvas.getContext("2d");
var cIndex = 0;
var rIndex = 0;
for (rIndex = 0; rIndex < 6; rIndex++) {
for (cIndex = 0; cIndex < 30; cIndex++) {
b_context.fillStyle = "rgb(" + String(Math.floor(Math.random() * 256)) + "," + String(Math.floor(Math.random() * 256)) + "," + String(Math.floor(Math.random() * 256)) + ")";
b_context.fillRect(cIndex * 25, rIndex * 25, 20, 20);
}
}
}
demoCanvas();
</script>

Объект документа /document

 //developer.mozilla.org/ru/docs/Web/API/Document

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

  • Свойства
    • .defaultView объект window документа
  • Методы
    • .getElementById(id): Element Возвращает ссылку на элемент по его идентификатору
      • id чувствительная к регистру строка, являющаяся уникальным идентификатором искомого элемента
    • .querySelectorAll(selectors): NodeList  !!!
      • selectors Строка DOMString, содержащая один или более CSS селектор (en-US). Эта строка должна быть валидным CSS селектором. Если это не так, то генерируется SyntaxError.

Объект /window

 //developer.mozilla.org/ru/docs/Web/API/Window

Объект window представляет собой окно, содержащее DOM документ; свойство document указывает на DOM document (en-US), загруженный в данном окне. Окно текущего документа может быть получено с помощью свойства

/

Получение свойств элемента заданных в CSS или установленных динамической отрисовкой

 

Прослушивание событий

//

Событие операции с хранилищем данных

!!! не проверялось !!!

Функция

Функции определяемые и вызываемые в документе...

Разрешения

!!!

Средства

/

JSON

  • Конструктор json-переменные можно инициировать в коде выражениями в json-нотации
  • obj = JSON.parse(text[, reviver]) -
    • reviver
  • text = JSON.stringify(value[, replacer[, space]]) -
    • value
    • replacer
    • space
    • obj.toJSON() - если преобразуемый в строку объект имеет свойство с именем toJSON и значением свойства, установленным в функцию, то этот метод toJSON() изменит стандартное поведение преобразования в JSON: вместо преобразования объекта будет использоваться значение, возвращаемое методом toJSON()

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

  • NodeList
    Объект NodeList — это коллекция узлов, возвращаемая такими методами, как Node.childNodes и document.querySelectorAll.
    Несмотря на то, что NodeList не является массивом ( Array ), его вполне возможно перебрать при помощи метода forEach(). NodeList также можно конвертировать в Array при помощи Array.from()
    Однако некоторые старые браузеры на данный момент все ещё не поддерживают NodeList.forEach() или Array.from(). Данные ограничения можно обойти, используя Array.prototype.forEach() ( больше информации на этой странице ).
    • Array.from(NodeList) !!! приводит значение к типу Array
  • !!! querySelector !!! ?это метод Document'а
  • Свойства
    • length Количество элементов в NodeList.
  • Методы
    • item ( idx ) Возвращает элемент из списка по его индексу или null, если индекс выходит за границы допустимого диапазона. Может быть использован как альтернатива nodeList[idx], возвращающему undefined при недопустимом idx.
    • entries() Возвращает iterator, позволяя перебрать все пары ключ/значение, содержащиеся в объекте.
    • forEach() Выполняет указанную функцию один раз для каждого элемента NodeList
    • keys() Возвращает iterator, позволяя перебрать все ключи каждой пары ключ/значение, содержащейся в объекте.
    • values() Возвращает iterator, позволяя перебрать все значения каждой пары ключ/значение, содержащейся в объекте.
    • closest() !!! ближайший родитель заданного класса
  • Node (Element)
    • Node.firstChild
    • Node.lastChild
    • Node.nextSibling
    • Node.previousSibling
    • ParentNode.children (en-US)
    • .tagName
    • obj[prop] -
    • obj.hasOwnProperty(prop) -
    • Object.getOwnPropertyNames(obj)
    • ? .attributes Только для чтения Возвращает NamedNodeMap, в котором перечислены все атрибуты связанные с элементом
    •  .childNodes
      • .forEach
    • .ParentNode
      • .childElementCount
        Это Number представляющее число дочерних узлов, представленных в элементе.
      • .children (en-US)
        Is a live HTMLCollection, содержащая все дочерние элементы, в виде коллекции.
  • DOMTokenList

HTMLElement

Web APIs > HTMLElement //developer.mozilla.org

  • Свойства
    • .style - коллекция свойств оформления
    • .classList Только для чтения Возвращает DOMTokenList содержащий список атрибутов класса.
    • .parentElement
  • Методы
    • .click() Sends a mouse click event to the element.
    • .focus(options) устанавливает курсор на элементе
    • .blur() to remove the focus from an element
    • .scrollIntoView()
      .scrollIntoView(alignToTop)
      .scrollIntoView(scrollIntoViewOptions) прокручивает контейнер родителя элемента так, чтобы элемент, на котором был вызван scrollIntoView(), стал виден пользователю
      • alignToTop: boolean !!!!/
        • true, верхняя граница элемента будет выровнена по верху видимой области прокрутки. Соответствует scrollIntoViewOptions: {block: "start", inline: "nearest"}. Значение по умолчанию.
        • false, нижняя граница элемента будет выровнена по низу видимой области прокрутки. Соответствует scrollIntoViewOptions: {block: "end", inline: "nearest"}
      • scrollIntoViewOptions: Object !!!

DOMTokenList

Интерфейс представляет набор чувствительных к регистру токенов разделённых пробелами, например, набор классов в свойстве Element.classList. Набор индексируется от 0 и допускает итерацию.

  • Свойства
    • length количество токенов в наборе
    • value строковое представление набора
  •  Методы
    • .item(index)
    • .contains(token)
    • .add(token, ...)
    • .remove(token, ...)
    • .replace(oldToken, newToken)
    • .entries() возвращает итератор для перебора пар ключ/токен
    • .toggle(token) переключает присутствие токена в наборе: добавляет в набор токен, если в  наборе его нет и возвращает true, удаляет если он есть и возвращает false
      .toggle(token, force) устанавливает заданное присутствие токена в наборе:  и возвращает признак при./
      • token /
      • force /
    • .entries() возвращает итератор для перебора пар ключ/токен
    • и другие...

Таймеры

Веб-технологии для разработчиков > Интерфейсы веб API > WindowTimers.setTimeout() //developer.mozilla.org

Таймаут реализует однократный вызов функции или выполнение фрагмента кода по истечению указанной задержки.
var timeoutID = window.setTimeout(func [, delay, param1, param2, ...]);
Отмена таймаута позволяет предотвратить вызов,  но также освобождает память кода и параметров после того, как вызов был выполнен.
clearTimeout(timeoutID);

Интервал реализует регулярный вызов функции или кода с заданной периодичностью
var intervalID = window.setInterval(func [, delay, param1, param2, ...]);
Отмена интервала прекращает его работу
clearInterval(intervalID);

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

Функция setImmediate(func [, param1, param2, ...]); выполняет функцию или код немедленно. Использовать ее в клиентском коде не рекомендуется и не во всех браузерах она поддерживается.

navigator

//

!!! navigator.languages содержит языковые настройки браузера;

Использование данных

Данные в документе

Произвольные данные можно сохранять в свойствах объекта document, при этом важно только избегать коллизию ключей, чтобы не повредить уже находящиеся в документе данные:

Сохранность этих данных обеспечивается до закрытия документа.

Данные в теге

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

  • идентификатор данных может быть любым
  • имя свойства тег  образуется префиксом data-identifier
  • скрипт может получить значение данных по идентификатору в специальной коллекции данных тега tag.dataset.identifier
    • значение в коллекции доступно для изменения

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

Хранилище данных сеанса /Window.sessionStorage

 //developer.mozilla.org/ru/docs/Web/API/Window/sessionStorage

не имеют ограничений по времени хранения и могут быть удалены только с помощью JavaScript.

localStorage.setItem(uniqueKey, data);

Хранилище локальных данных  /Window.localStorage

 //developer.mozilla.org/ru/docs/Web/API/Window/localStorage

не имеют ограничений по времени хранения и могут быть удалены только с помощью JavaScript.

Клипборд или буфер обмена

//developer.mozilla.org/en-US/docs/Web/API/Clipboard

Использование буфера обмена основано на Clipboard API, который взаимодействует системой, если позволяют разрешения безопасности браузера.

Функции буфера обмена доступны как методы глобального свойства Navigator.clipboard.

  • read(): Promise асинхронный метод запрашивает копию буфера обмена и возвращает Promise,  который может получить из буфера данные любого типа, включая тексты и изображения
  • readText(): Promise асинхронный метод запрашивает копию текстовых данных буфера обмена и возвращает Promise
  • write(data): Promise асинхронный метод передает произвольные данные для записи в буфер обмена
  • writeText(text: String): Promise асинхронный метод передает текст для записи в буфер обмена, возвращая Promise, который разрешается после полного завершения копирования текста в буфер

Методы клипборда могут не работать в режиме отладки в Google DevTools!

Браузер

//

Заголовок вкладки браузера document.title

window.location.href; - текущий URL документа

Интерфейс истории /history

 //developer.mozilla.org/ru/docs/Web/API/History

Интерфейс history позволяет манипулировать историей браузера в пределах сессии загруженной вкладки или фрейма.

  • history.pushState(state, title[, url]) добавляет новое состояние в историю браузера, которое  отобразится в адресной строке браузера

Клиент-сервеные вызов XMLHttpRequest

Реализация API XMLHttpRequest в браузерах предоставляет клиенту функциональность для обмена данными с сервером без перезагрузки страницы. XMLHttpRequest используется в AJAX запросах и особенно в single-page приложениях.

  • Конструктор
    • /
  • /
    • .open(method, url[, async[, user[, password]]]) инициализирует новый запрос
      • вызов метода для уже активного (открытого) запроса эквивалентно вызову abort()
      • method устанавливает метод одним из значений "GET", "POST", "PUT", "DELETE" для URL HTTP-запросов (для других URL игнорируется)
      • url DOMString представляет URL для отправки запроса
      • async (необязательный) логический параметр со значением по умолчанию true, указывающим, выполнять ли операцию асинхронно или нет. Если это значение равно false, метод send() не возвращается, пока не будет получен ответ. Если true, уведомление о получении ответа осуществляется с помощью обработчика события. Должен быть true, если атрибут multipart равен true, иначе будет выброшено исключение.Примечание: Синхронные запросы в основном потоке могут нарушить работу пользователя, их следует избегать. Фактически большинство браузеров полностью отказались от поддержки синхронных XHR в основном потоке. Синхронные запросы можно использовать в Worker.
      • user (необязательный, по умолчанию null) имя пользователя, использующееся для аутентификации
      • password (необязательный, по умолчанию null) пароль, использующийся для аутентификации

/

Примеры

Пример асинхронного вызова XMLHttpRequest:

Консоль отладки

Для вывода отладочных сообщений используется объект console с методом log().
Методы warn() и error() применяется аналогично, но для вывода предупреждений и ошибок, которые будут выделены особым образом:

Свойства элементов документа

Cвойства стиля color, background-color и другие расположены в коллекции style и могут назначаться скриптом:

Якоря

Переход на странице по якорю выполняется через значение свойства href объекта location:

При переходе по якорю возникает событие window.onhashchange, в котором якорь доступен в свойстве location.hash:

Якорь в составе URL может, например, указывать на скрытый блок документа, но т.к. якорь недоступен серверному php-скрипту, и не может быть им обработан, обработку якоря в URL должен выполнить js-скрипт на странице по событию загрузки onload:

//

CSS стили

//

 

JQuery

Официальный API Documentation //api.jquery.com
JavaScript и jQuery»3.10. Введение в jQuery //html5book.ru

https://developers.google.com/speed/libraries

  • <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.6.1/jquery.min.js"></script>
  • <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.2.4/jquery.min.js"></script>
  • <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.4/jquery.min.js"></script>

Дивись "Конспект jQuery + Promise + Axios" на //reks.biz

Источники

Leave a Reply