Рубрики
Uncategorized

Освоить веб-API и разработать общие функции взаимодействия с страницами (расширенные)

Автор оригинала: David Wong.

Цели обучения:

  • Освоите концепцию API и веб-API
  • Освоите распространенный способ вызова API, предоставляемый браузером
  • Может разрабатывать общие функции взаимодействия со страницей с помощью API
  • Уметь использовать поисковую систему для решения проблем

Веб-API

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

  • Любой язык разработки имеет свой собственный API
  • Характеристика ввода и вывода (ввода/вывода) API
  • Как использовать API (консоль. Журнал())

Концепция веб-API

Набор API (BOM и DOM), предоставляемых браузером для работы с функциями браузера и элементами страницы. Веб-API здесь относится к API, предоставляемому браузером (набор методов). Веб-API имеет другие значения в последующих уроках

Освоите распространенный способ вызова API, предоставляемый браузером

MDN-Веб-API

Состав JavaScript

ECMAScript – ядро JavaScript

Определена спецификация синтаксиса JavaScript Ядро JavaScript описывает базовый синтаксис и тип данных языка. ECMAScript-это набор стандартов, который определяет, что стандарты языка не зависят от конкретной реализации

СПЕЦИФИКАЦИЯ – объектная модель браузера

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

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

Набор API для работы с элементами страницы DOM может рассматривать HTML как дерево документов, а узлами в дереве можно управлять с помощью API, предоставляемого Dom

БОМ

Концепция спецификации BOM (объектная модель браузера) относится к объектной модели браузера, которая обеспечивает независимую от содержимого структуру объектов, которая может взаимодействовать с окном браузера. Спецификация состоит из нескольких объектов, среди которых объект окна, представляющий окно браузера, является объектом спецификации верхнего уровня, а другие объекты являются подобъектами объекта. Некоторые из наших операций в браузере могут быть запрограммированы с помощью спецификации, например: обновить браузер, назад, вперед, ввести URL-адрес в браузере и т.д.

Окно объекта верхнего уровня спецификации

Окно-это объект верхнего уровня браузера. При вызове свойств и методов в окне вы можете опустить окно Примечание: следующим специальным атрибутом окна является window.name

Диалоговое окно

  • предупреждение()
  • подсказка()
  • подтвердите()

Событие загрузки страницы

загрузка

window.onload = function () {
  //When the page is loaded and executed
  //When the page is fully loaded (including images, script files, CSS files, etc.) execution
}

onunload

window.onunload = function () {
  //Execute when the user exits the page
}

таймер

Settimeout() и cleartimeout() Выполняют указанную функцию только один раз по истечении указанного количества миллисекунд

//Create a timer, execute it after 1000 milliseconds, and return the indicator of timer
var timerId = setTimeout(function () {
  console.log('Hello World');
}, 1000);

//Cancel timer execution
clearTimeout(timerId);

Setinterval() и clearinterval()

Функция, вызываемая в определенное время, которая может быть вызвана за заданный промежуток времени (в миллисекундах)

//Create a timer that is called every 1 second
var timerId = setInterval(function () {
  var date = new Date();
  console.log(date.toLocaleTimeString());
}, 1000);

//Cancel timer execution
clearInterval(timerId);

Объект местоположения

Объект “Местоположение” является свойством объекта “Окно”. Вы можете опустить местоположение объекта окна, можете получить или задать URL-адрес адресной строки браузера

URL-АДРЕС

Единый локатор ресурсов (URL)

  • Состав URL-адреса

    схема://хост:порт/путь?запрос#фрагмент Схема: протокол связи

     
    Хост: хост
     
     
    Порт: номер порта
     
     
    Путь: путь
     
     
    Запрос: запрос
     
     
    Фрагмент: информационный фрагмент
     
 
Кто является членами location?
 
  • Использование консоли Chrome для просмотра
    •  
  • Проверьте MDN MDN
    •  
  • член
     
    • назначить()/перезагрузить()/заменить()
      •  
    • хэш/хост/имя хоста/поиск/href……
 
Объект истории
 
  • назад()
    •  
  • вперед()
    •  
  • иди()
 
Объект навигатора
 
  • Агент пользователя
 
Агент пользователя может судить о типе пользовательского браузера
 
  • платформа
 
С помощью платформы мы можем судить о типе системной платформы, на которой расположен браузер
 
С помощью платформы мы можем судить о типе системной платформы, на которой расположен браузер
 
Объектная модель документа (DOM) – это стандартный программный интерфейс, рекомендованный W3C для работы с расширяемым языком разметки. На веб – странице объекты, организующие страницу (или документ), организованы в древовидную структуру. Стандартная модель, используемая для представления объектов в документе, называется dom. Историю объектной модели документа можно проследить до “войны браузеров” между Microsoft и Netscape в конце 1990-х годов. Чтобы выжить в JavaScript и JScript, обе стороны предоставили браузерам мощные функции в больших масштабах. Microsoft добавила много эксклюзивных вещей в технологию веб-страниц, включая VBScript, ActiveX и собственный формат DHTML Microsoft, что делает многие веб-страницы невозможными для обычного отображения с использованием платформ и браузеров, отличных от Microsoft. ДОМ-это шедевр, который был сварен в то время.
 
DOM также называется моделью дерева документов
 
  • Документ: веб-страницу можно назвать документом
    •  
  • Узел: все содержимое веб-страницы является узлом (метка, атрибут, текст, комментарий и т.д.)
    •  
  • Элементы: метки на веб-страницах
    •  
  • Атрибуты: атрибуты для меток
 
Общие операции ВНУТРЕННИХ
 
  • Получить элементы
    •  
  • Динамическое создание элементов
    •  
  • Работать с элементом (задавать его свойства или вызывать его методы)
    •  
  • Событие (когда нужно выполнить соответствующую операцию)
 
Получить элементы страницы
 
getElementById
 
var div = document.getElementById('main');
console.log(div);

//The data type obtained is htmldivelement, and the objects are all of type
// HTMLDivElement <-- HTMLElement <-- Element  <-- Node  <-- EventTarget
 
Получить элементы по имени тега
 
var divs = document.getElementsByTagName('div');
for (var i = 0; i < divs.length; i++) {
  var div = divs[i];
  console.log(div);
}
 
Получить элементы по имени*
 
var inputs = document.getElementsByName('hobby');
for (var i = 0; i < inputs.length; i++) {
  var input = inputs[i];
  console.log(input);
}
 
Получить элементы по имени класса
 
var mains = document.getElementsByClassName('main');
for (var i = 0; i < mains.length; i++) {
  var main = mains[i];
  console.log(main);
}
 
Получение элементов из селектора
 
var text = document.querySelector('#text');
console.log(text);

var boxes = document.querySelectorAll('.box');
for (var i = 0; i < boxes.length; i++) {
  var box = boxes[i];
  console.log(box);
}
 
  • резюме
     
    мастер
     
     
    понимать
     
 
Событие
 
Событие: механизм триггерного ответа Интерфейс события представляет любое событие, происходящее в DOM, некоторые из которых генерируются пользователем (например, событие мыши или клавиатуры), в то время как другие генерируются API.
 
Три элемента мероприятия
 
  • Источник события: событие запуска элемента (бытия)
    •  
  • Тип события: метод запуска события (например, щелчок мыши или щелчок клавиатуры)
    •  
  • Обработчик событий: Код (в форме функции), выполняемый после запуска события
 
Основное использование событий
 
var box = document.getElementById('box');
box.onclick = function() {
  Console. Log ('the code will be executed after the box is clicked ');  
};
 
Операция с атрибутом
 
Свойства элементов, не имеющих формы
 
href, заголовок, идентификатор, src, имя класса
 
var link = document.getElementById('link');
console.log(link.href);
console.log(link.title);

var pic = document.getElementById('pic');
console.log(pic.src);
 
Внутренний текст и внутренний текст
 
var box = document.getElementById('box');
Box. InnerHTML = 'I'm text < p > I'll be born as a label < / P >';
console.log(box.innerHTML);
Box. InnerText = 'I am text < p > I will not generate as label < / P >';
console.log(box.innerText);
 
Escape-символ HTML “”” & & < меньше, чем
 
≫ // greater than
 
Космос © ©
 
Свойства элемента формы
 
  • Значение используется для получения содержимого большинства элементов формы (кроме опции).
    •  
  • Введите, чтобы получить тип входного тега (поле ввода или флажок и т.д.)
    •  
  • Имущество для инвалидов
    •  
  • Установлен флажок выбрать свойства
    •  
  • Выбранное раскрывающееся меню выберите пункт Свойства
 
Действие пользовательского атрибута
 
  • Getattribute() возвращает атрибут в строке метки
    •  
  • Setattribute() задает атрибут в строке метки
    •  
  • Removeattribute() удаляет атрибут в строке метки
    •  
  • Отличие от элемента. Атрибут: вышеуказанные три метода используются для получения любого встроенного атрибута.
 
Стиль работы
 
var box = document.getElementById('box');
box.style.width = '100px';
box.style.height = '100px';
box.style.backgroundColor = 'red';
 
Операция с именем класса
 
var box = document.getElementById('box');
box.className = 'clearfix';
 
Три способа создания элементов
 
документ.запись()
 
Document. Write ('the newly set content < p > tag can also generate < / P > ');
 
innerHTML
 
var box = document.getElementById('box');
Box. InnerHTML = 'new content < p > new label < / P >';
 
document.createЭлемент()
 
var div = document.createElement('div');
document.body.appendChild(div);
 
Проблемы с производительностью
 
  • Метод innerHTML должен избегать многократного использования в цикле, поскольку он может анализировать строки.
    •  
  • Он может быть заменен строками или массивами, а затем установлен в innerHTML
    •  
  • После оптимизации производительность аналогична производительности document.createelement
 
Работа узла
 
var body = document.body;
var div = document.createElement('div');
body.appendChild(div);

var firstEle = body.children[0];
body.insertBefore(div,firstEle);

body.removeChild(firstEle);

var text = document.createElement('p');
body.replaceChild(text, div);
 
Иерархия узлов
 
Сосредоточьтесь на атрибуте “родитель-потомок”, объяснении рисунка атрибута brother
 
var box = document.getElementById('box');
console.log(box.parentNode);
console.log(box.childNodes);
console.log(box.children);
console.log(box.nextSibling);
console.log(box.previousSibling);
console.log(box.firstChild);
console.log(box.lastChild);

 
  • Будьте осторожны Разница между дочерними узлами и дочерними узлами заключается в том, что дочерние узлы получают дочерние узлы, а дочерние элементы получают дочерние элементы Nextsibling и previoussibling получают узлы, а атрибуты, соответствующие элементам, являются nexterelementsibling и previouselementsibling получают элементы
     
    •  
  • резюме
     
    Работа узла, способ
     
     
    Иерархия узлов, атрибуты
     
 
Подробное объяснение событий
 
Три способа регистрации/удаления событий
 
var box = document.getElementById('box');
box.onclick = function () {
  Console. Log ('click to execute ');
};
box.onclick = null;

box.addEventListener('click', eventCode, false);
box.removeEventListener('click', eventCode, false);

box.attachEvent('onclick', eventCode);
box.detachEvent('onclick', eventCode);

function eventCode() {
  Console. Log ('click to execute ');
}
 
Три этапа мероприятия
 
  1. Фаза захвата
    2.  
  2. Текущая целевая фаза
    3.  
  3. фаза пузырьков Объект события. Свойство Eventphase позволяет просматривать стадию, на которой запускается событие
 
Свойства и методы объектов событий
 
  • Событие.тип получить тип события
    •  
  • Clientx/клиенты поддерживают все браузеры, расположение окон
    •  
  • Pagex/pagey IE8 ранее не поддерживался, расположение страницы
    •  
  • Event.target | event.srcelement используется для получения элемента, который вызвал событие
    •  
  • Событие. Функция Preventdefault() отменяет поведение по умолчанию
 
Как предотвратить распространение событий
 
  • Событие в стандартном режиме. Остановка распространения();
    •  
  • Событие.cancelbubble в более низкой версии IE; устарело в стандарте
 
Общие события с мышью и клавиатурой
 
  • Срабатывает при отпускании кнопки мыши onmouseup
    •  
  • Кнопка мыши Onmousedown нажмите триггер
    •  
  • Триггер OnMouseMove
    •  
  • При нажатии клавиши нажмите клавишу для запуска
    •  
  • Клавиша Onkeydown на клавиатуре левый триггер