Базовый справочник по JavaScript

JavaScript браузер HTML CSS

logo

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

материал

содержание

Основы JavaScript

предварительно объяснить

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

  • в JavaScript сvarключевое слово илиfunctionКлючевые слова должны быть предварительно объяснены.
  • При предварительной интерпретации, независимо от того, верны ли ваши условия или нет, те, у которых есть var, должны быть объявлены заранее.
  • При преинтерпретации предварительно интерпретируется только левая часть знака равенства, а значение справа в преинтерпретации не участвует.
  • Самовыполняющиеся функции не интерпретируются заранее в глобальной области видимости.
  • При преинтерпретации, если имя уже жило, оно не будет повторно объявлено, а будет переназначено.
  • в теле функцииreturnСледующий код не выполняется, а предварительно интерпретируется,returnДалее следует наше возвращаемое значение, поэтому предварительная интерпретация не выполняется.

переменная область видимости

Область действия переменной — это область в исходном коде программы, в которой определена переменная. Глобальные переменные имеют глобальную область действия и определяются в любом месте кода JavaScript. Однако переменные, объявленные внутри функции, определяются только в теле функции. Это локальные переменные, а область видимости локальна. Параметры функции также являются локальными переменными, они определяются только в теле функции. В теле функции локальные переменные имеют приоритет над глобальными переменными с тем же именем. Если локальная переменная, объявленная в функции, или переменная с параметром функции имеет то же имя, что и глобальная переменная, то глобальная переменная затмевается локальной переменной. Хотя вы можете писать код в глобальной области видимости без написанияvarзаявление, но при объявлении локальной переменной вы должны использоватьvarутверждение.

объем функции

Область действия функции JavaScript означает, что все переменные, объявленные в функции, всегда видны в теле функции. Интересно, что это означает, что переменная доступна еще до ее объявления. Эта функция JavaScript неофициально известна как продвижение объявления, что означает, что все переменные, объявленные в функции JavaScript (но не включающие присваивание), «перемещаются» в начало тела функции.

Об освобождении памяти и разрушении области видимости

  1. Когда выполнение функции возвращает значение ссылочного типа данных и принимается чем-то еще вне функции, эта ситуация обычно не разрушается.
function fn(){
    return function (){  }
}
var f = fn();
  1. Методы привязки к событиям на элементах DOM в приватной области видимости, как правило, не уничтожаются.
~function (){
    div.onclick = function (){  }
}
  1. Функция выполняется один раз, затем один раз выполняет возвращаемое значение и уничтожает его при выполнении возвращаемого значения.
function fn(){
    return function (){  }
}
fn()()

цикл for-in

for-inПри повторном обходе цикла по умолчанию вы можете пройти все свойства и методы, которые являются закрытыми и расширенными на прототипе класса, к которому он принадлежит, но в целом вам нужно пройти только частные свойства.Решение:

for (var key in object) {
    if (object.hasOwnProperty(key)) {
        
    }
}

Наследование (выделено)

  • прототипное наследование
function A(){
    this.x = 100;
}
A.prototype.getX = function (){
    console.log(this.x);
}
function B(){
    this.y = 200;
}
B.prototype = new A;
B.prototype.constructor = B;
  • вызов наследования
function A(){
    this.x = 100;
}
function B(){
    A.call(this);
}
  • маскировка под наследование объекта
function A() {
    this.x = 100;
}
A.prototype.getX = function () {
    console.log(this.x);
};
function B() {
    var temp = new A;
    for (var key in temp) {
        this[key] = temp[key]; 
    }
    temp = null;
}
  • Паразитическая композиционная наследственность
function A() {
    this.x = 100;
}
A.prototype.getX = function () {
    console.log(this);
};
function B() {
    A.call(this);
}
B.prototype = Object.create(A.prototype);
B.prototype.constructor = B;

разное

использоватьinstanceofПроверить, принадлежит ли класс экземпляру этого класса, вернется только цепочка прототиповtrue

  • Универсальность функций, включая обычные функции, классы, объекты. Обычная функция, которая сама по себе является обычной функцией, при выполнении формирует собственную область видимости. Класс, у которого есть собственный экземпляр, также имеет свойство, называемое прототипом, которое является его собственным прототипом, и все его экземпляры указывают на его собственный прототип. Обычный объект, так как объект может иметь некоторые свои свойства и методы.
function Fn(){
    var num = 1;
    this.x = 10;
}
Fn.prototype.getX = function (){
    console.log(this.x);
}
Fn();
var f = new Fn;
Fn.y = 100;
  • Все функции имеют объекты-прототипы-прототипы, и каждый объект имеет атрибут __proto__ (объектно-ориентированный).

Числовое преобразование

Есть 3 функции, которые преобразуют нечисловые значения в числовые:Number(),parseInt()а такжеparseFloat(). Первая функция, функция преобразованияNumber()Может использоваться для любого типа данных, а две другие функции предназначены для преобразования строк в числа.parseInt()Укажите второй параметр, базу, используемую для конвертации (т.е. сколько баз). Большую часть времени мы будем анализировать десятичные числа, поэтому необходимо всегда иметь 10 в качестве второго параметра.

⬆ вернуться к началу

Тип строки

Методы объектов String также доступны для всех основных строковых значений, среди которых унаследованныеvalueOf(),toLocaleString()а такжеtoString()все методы возвращают базовое строковое значение, представленное объектом. Каждый экземпляр типа String имеетlengthСвойство, указывающее, сколько символов содержится в строке.

символьный метод

Два метода для доступа к определенной позиции в строке:charAt()а такжеcharCodeAt(). Оба метода принимают один параметр — позицию символа, начинающуюся с 0. ECMA5 может использовать квадратные скобки, за которыми следует числовой индекс, для доступа к определенным символам в строке.

Методы работы со строками

Первыйconcat(), который используется для объединения одной или нескольких строк и возврата объединенной новой строки. Также предусмотрены три метода создания строк на основе подстрок:slice(),substr()а такжеsubstring(). Все три метода возвращают подстроку обработанной строки,slice()а такжеsubstring()Второй параметр указывает позицию после последнего символа подстроки. а такжеsubstr()Второй параметр указывает количество возвращаемых символов. В случае, когда параметр, переданный этим методам, отрицательный, они ведут себя по-разному. в,slice()Метод добавит входящее отрицательное значение к длине строки,substr()Метод вызывает отрицательный параметр, равный длине верхней строки, и преобразует отрицательный второй параметр в 0, и, наконец,substring()Метод преобразует все отрицательные аргументы в 0.

метод позиции строки

Есть два способа найти подстроки в строке:indexOf()а такжеlastIndexOf(). Оба метода ищут в строке заданную подстроку и возвращают позицию подстроки (или -1, если подстрока не найдена). Разница между этими двумя методами заключается в следующем:indexOf()метод ищет подстроку в обратном направлении от начала строки, в то время какlastIndexOf()Метод заключается в поиске подстроки вперед от конца строки. Оба метода могут получать необязательный второй параметр, указывающий, где в строке начать поиск. другими словами,indexOf()будет выполнять поиск в обратном направлении от позиции, указанной этим параметром, игнорируя все символы перед позицией; иlastIndexOf()будет искать вперед с указанной позиции, игнорируя все символы после этой позиции.

метод обрезки()

ECMAScript5 определяет для всех строкtrim()метод. Этот метод создает копию строки, удаляет все начальные и конечные пробелы и возвращает результат. Так как trim() возвращает копию строки, начальные и конечные пробелы в исходной строке сохраняются. Браузеры, поддерживающие этот метод: IE9+, Firefox 3.5+, Safari 5+, Opera 10.5+ и Chrome. Кроме того, Firefox 3.5+, Safari 5+ и Chrome 8+ поддерживают нестандартныеtrimLeft()а такжеtrimRight()метод для удаления пробелов в начале и в конце строки соответственно.

Метод преобразования регистра строк

Далее мы представим набор методов, связанных с преобразованием регистра. В ECMAScript есть 4 метода преобразования регистра строк:toLowerCase(),toLocaleLowerCase(),toUpperCase()а такжеtoLocaleUpperCase(). в,toLowerCase()а такжеtoUpperCase()два классических метода, заимствованных изjava.lang.Stringодноименный метод в . а такжеtoLocaleLowerCase()а такжеtoLocaleUpperCase()Методы — это реализации для конкретных регионов. Для некоторых регионов региональный метод дает те же результаты, что и его общий метод, за исключением нескольких языков (например, турецкого).UnicodeПри преобразовании регистра применяются специальные правила, и в этом случае для обеспечения правильного преобразования необходимо использовать методы, специфичные для локали.

Методы сопоставления с образцом для строк

Тип String определяет несколько методов сопоставления шаблонов в строках. Первый методmatch(), вызов этого метода для строки практически аналогичен вызовуRegExpизexec()Метод тот же.match()Метод принимает только один параметр, либо регулярное выражение, либо объект RegExp.

Другой метод поиска шаблоновsearch().这个方法的唯一参数与match()Аргументы метода те же: регулярное выражение, заданное строкой, или объект RegExp.search()Метод возвращает индекс первого совпадения в строке или -1, если совпадений не найдено. а также,search()Метод всегда заключается в том, чтобы найти шаблон в обратном направлении от начала строки.

Для упрощения операции замены подстрок ECMAScript предоставляетreplace()метод. Этот метод принимает два параметра: первый параметр может быть объектом RegExp или строкой (эта строка не будет преобразована в регулярное выражение), а второй параметр может быть строкой или функцией. Если первый аргумент является строкой, будет заменена только первая подстрока. Единственный способ заменить все подстроки — предоставить регулярное выражение и указать глобальный флаг ( g )

Последний метод, связанный с сопоставлением с образцом, этоsplit(), который разбивает строку на несколько подстрок на основе указанного разделителя и помещает результаты в массив. Разделителем может быть либо строка, либо объект RegExp (этот метод не обрабатывает строку как регулярное выражение).split()Метод может принимать необязательный второй параметр, указывающий размер массива, чтобы гарантировать, что возвращаемый массив не превышает заданного размера.

метод localeCompare()

Последний метод, связанный с манипулированием строками,localeCompare(), этот метод сравнивает две строки и возвращает одно из следующих значений:

  • Возвращает отрицательное число (-1 в большинстве случаев, зависит от реализации), если строка должна предшествовать строковому аргументу в алфавите;
  • Возвращает 0, если строка равна строковому аргументу;
  • Возвращает положительное число (в большинстве случаев 1, опять же в зависимости от реализации), если строка должна идти после строкового аргумента в алфавите.

метод fromCharCode()

Кроме того, сам конструктор String имеет статический метод:fromCharCode(). Задача этого метода — получить одну или несколько кодировок символов и преобразовать их в строку. По сути, этот метод аналогичен методу экземпляра.charCodeAt()Это делает наоборот.

подход ES6

  • ES6 обеспечиваетcodePointAtметод, который правильно обрабатывает символы, хранящиеся в 4 байтах, и возвращает кодовую точку символа.
  • ES6 добавляет к строкам интерфейс обходчика, чтобы строки можно былоfor...ofПереберите.
  • В ES6 есть предложение предложить метод экземпляров строк at, который может распознавать символы с номерами Unicode больше 0xFFFF и возвращать правильные символы.
  • ES6 предоставляет строковые экземплярыnormalize()метод объединения различных представлений символов в одну форму, который называется нормализацией Unicode.
  • Традиционно JavaScript имеет толькоindexOfметод, который можно использовать для определения того, содержится ли строка в другой строке. ES6 предоставляет три новых метода.
includes()：返回布尔值，表示是否找到了参数字符串。
startsWith()：返回布尔值，表示参数字符串是否在源字符串的头部。
endsWith()：返回布尔值，表示参数字符串是否在源字符串的尾部。
скопировать код
  • repeatМетод возвращает новую строку, которая повторяет исходную строку n раз.
  • ES2017 представил возможность завершать длину строк. Если строка недостаточно длинная, она будет заполнена в начале или в конце.padStart()для завершения головы,padEnd()Используется для завершения хвоста.

⬆ вернуться к началу

Тип массива

создать массив

Использование литерала массива — это самый простой способ создать массив, разделив элементы массива запятыми в квадратных скобках. Вызов конструктора Array() — еще один способ создания массива. При вызове без параметров этот метод создает пустой массив без каких-либо элементов. При вызове с числовым параметром он указывает длину. Когда известно количество необходимых элементов заранее, эту форму конструктора Array() можно использовать для предварительного выделения массива пространства. Обратите внимание, что в массиве не хранятся никакие значения. Также можно явно указать два или более элемента массива или нечисловой элемент массива, и в этом случае аргументами конструктора будут элементы нового массива.

Добавление и удаление элементов

Самый простой способ добавить элемент массива — это присвоить значение новому индексу. Вы также можете использовать метод push(), чтобы добавить один или несколько элементов в конец массива. Поместить элемент в конец массива и добавить его в массив.lengthНазначение такое же. можно использоватьunshift()Метод вставляет элемент в начало массива и последовательно перемещает остальные элементы в более высокие индексы. Может использоваться как удаление свойства объектаdeleteоператор для удаления элемента массива Удаление элемента массива похоже на присвоение ему неопределенного значения (с некоторыми тонкими отличиями). Обратите внимание, что для использования элемента массиваdeleteне изменяет массивlengthатрибут, а также не переместит элемент вниз из верхнего индекса, чтобы заполнить пробел, оставленный удаленным атрибутом. Если вы удалите элемент из массива, он станет разреженным массивом. Также можно просто установитьlengthСвойство представляет собой новую желаемую длину для удаления элементов в конце массива. У массивов есть метод pop() (используемый в сочетании с push()), который уменьшает длину на 1 за раз и возвращает значение удаленного элемента. есть еще одинshift()метод (он иunshift()вместе), удаляет элемент из головы массива. а такжеdeleteразница в томshift()Метод перемещает все элементы на 1 ниже текущего индекса. наконец,splice()это общий метод для вставки, удаления или замены элементов массива. он будет изменен по мере необходимостиlengthатрибут и переместите элемент в более высокий или более низкий индекс.

Метод преобразования

массив унаследованtoLocaleString(),toString()а такжеvalueOf()метод, который по умолчанию возвращает элементы массива в виде строк, разделенных запятыми. И если вы используете метод join(), вы можете использовать разные разделители для построения этой строки.join()Метод принимает только один параметр, строку, используемую в качестве разделителя, и возвращает строку, содержащую все элементы массива.

метод стека

push()Метод может принимать любое количество аргументов, добавлять их один за другим в конец массива и возвращать длину измененного массива. а такжеpop()метод удаляет последний элемент с конца массива, уменьшая размер массиваlengthvalue, затем возвращает удаленный элемент.

метод очереди

из-заpush()— это метод, который добавляет элементы в конец массива, поэтому для имитации очереди только один метод берет элементы из начала массива. Метод массива для этогоshift(), который удаляет первый элемент массива и возвращает этот элемент, уменьшая длину массива на 1.

ECMAScript также предоставляетunshift()метод. Как подсказывает название,unshift()а такжеshift()делает обратное: добавляет любое количество элементов в начало массива и возвращает длину нового массива.

метод перестановки

reverse()метод изменит порядок элементов массива на противоположный. По умолчанию,sort()Метод сортирует элементы массива в порядке возрастания, то есть наименьшее значение идет первым, а наибольшее — последним. Чтобы реализовать сортировку,sort()метод будет вызываться для каждого элемента массиваtoString()Затем метод приведения сравнивает полученные строки, чтобы определить способ сортировки. Даже если каждый элемент массива является числом,sort()Метод также сравнивает строки.

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

Как работать

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

Следующий методslice(), который создает новый массив на основе одного или нескольких элементов текущего массива.slice()Метод может принимать один или два параметра, начальную и конечную позицию возвращаемого элемента. Только с одним параметром,slice()Метод возвращает все элементы с позиции, указанной этим параметром, до конца текущего массива. Если есть два аргумента, метод возвращает элемент между начальной и конечной позициями, но не включая конечную позицию. Уведомление,slice()Метод не влияет на исходный массив.

еслиslice()Если в параметре метода есть отрицательное число, добавьте число к длине массива, чтобы определить соответствующую позицию. Например, вызов массива из 5 элементовslice(-2,-1)с вызовомslice(3,4)Получил тот же результат. Если конечная позиция меньше начальной, возвращается пустой массив.

Давайте представимsplice()метод, этот метод, вероятно, является самым мощным методом массива, и он имеет множество применений.splice()Основная цель — вставить элементы в середину массива, но есть три способа использования этого метода.

  • Удалить: можно удалить любое количество элементов, достаточно указать 2 параметра: позицию первого удаляемого элемента и количество удаляемых элементов. Например,splice(0,2)удалит первые два элемента в массиве.
  • Вставка: любое количество элементов может быть вставлено в указанную позицию, просто укажите 3 параметра: начальная позиция, 0 (количество элементов для удаления) и элемент для вставки. Если вы хотите вставить несколько элементов, вы можете передать четвертый, пятый или любое количество элементов. Например,splice(2,0,“red”,“green”)вставит строку, начиная с позиции 2 текущего массива“red”а также“green”.
  • Заменить: вы можете вставить любое количество элементов в указанную позицию и одновременно удалить любое количество элементов, нужно только указать 3 параметра: начальную позицию, количество элементов, которые нужно удалить, и произвольное количество элементов. быть вставленным. Количество вставленных элементов не обязательно должно быть равно количеству удаленных элементов. Например,splice (2,1,“red”,“green”)удалит элемент в позиции 2 текущего массива, а затем вставит строку из позиции 2“red”а также“green”.

метод определения местоположения

ECMAScript 5 добавляет к экземплярам массива два метода положения:indexOf()а такжеlastIndexOf(). Оба метода получают два параметра: искомый элемент и (необязательно) индекс, представляющий начальную точку поиска. в,indexOf()Метод смотрит назад от начала массива (позиция 0),lastIndexOf()Метод выполняет поиск вперед с конца массива.

Использовать методы indexOf() и lastIndexOf() для определения положения определенного элемента в массиве очень просто, и браузеры, которые их поддерживают, включают IE9+, Firefox 2+, Safari 3+, Opera 9.5+ и Chrome.

итерационный метод

ECMAScript 5 определяет пять методов итерации для массивов. Каждый метод принимает два параметра: функцию, которая должна выполняться для каждого элемента, и (необязательно) объект области, для которой выполняется функция, что влияет на значение this . Функции, передаваемые в эти методы, получают три аргумента: значение элемента массива, положение элемента в массиве и сам объект массива. В зависимости от используемого метода возвращаемое значение этой функции может влиять или не влиять на возвращаемое значение доступа. Вот что делают эти 5 итерационных методов.

  • every(): Запускает данную функцию для каждого элемента в массиве, возвращая значение true, если функция возвращает значение true для каждого элемента.
  • filter(): Запустите данную функцию для каждого элемента в массиве, возвращая массив элементов, для которых функция вернет значение true.
  • forEach(): запустить данную функцию для каждого элемента в массиве. Этот метод не имеет возвращаемого значения.
  • map(): запустить данную функцию для каждого элемента в массиве, возвращая массив результатов каждого вызова функции.
  • some(): Запускает данную функцию для каждого элемента в массиве, возвращая значение true, если функция возвращает значение true для любого элемента. *Эти методы массива могут значительно облегчить задачу работы с массивами, выполняя различные операции. Браузеры, поддерживающие эти итерационные методы, — это IE9+, Firefox 2+, Safari 3+, Opera 9.5+ и Chrome.

Метод слияния

ECMAScript 5 также добавляет два новых метода сжатия массивов:reduce()а такжеreduceRight(). Оба этих метода выполняют итерацию по всем элементам массива, а затем создают окончательное возвращаемое значение. в,reduce()Метод начинается с первого элемента массива и последовательно проходит до конца. а такжеreduceRight()Затем он начинается с последнего элемента массива и проходит вперед к первому элементу.

подход ES6

  • Оператор спреда (spread) — три точки (...). это какrestИнверсия аргументов, преобразование массива в последовательность аргументов, разделенных запятыми.
  • Array.fromМетоды используются для преобразования двух типов объектов в реальные массивы: массивоподобные объекты и итерируемые объекты (включая новые структуры данных ES6 Set и Map).
  • Array.ofМетод используется для преобразования набора значений в массив.
  • экземпляр массиваfindметод для поиска первого подходящего члена массива. Его параметр является функцией обратного вызова, и все элементы массива выполняют функцию обратного вызова по очереди, пока не будет найден первый элемент, возвращаемое значение которого равно true, а затем этот элемент возвращается. Возвращает, если нет подходящих членовundefined.
  • экземпляр массиваfindIndexиспользование метода иfindМетод очень похож, возвращая позицию первого подходящего члена массива или -1, если все члены не подходят.
  • fillМетод заполняет массив заданными значениями.
  • ES6 предоставляет три новых метода:entries(),keys()а такжеvalues()- используется для обхода массива. Оба они возвращают объект итератора, который можно использовать сfor...ofЦикл пройден, единственное отличиеkeys()Это обход ключевого имени,values()это обход ключевого значения,entries()представляет собой обход пар ключ-значение.
  • Array.prototype.includesМетод возвращает логическое значение, указывающее, содержит ли массив заданное значение, которое совпадает со значением строки.includesМетод аналогичен. ES2016 представил этот метод.
  • Вакансия в массиве означает, что в определенной позиции массива нет значения. Например, массив, возвращаемый конструктором Array, пуст.

индукция

метод массива следует ли изменить исходный массив Есть ли возвращаемое значение То, что возвращается,
join() нет да:white_check_mark: сгенерированная строка
reverse() да:white_check_mark: да:white_check_mark: новый отсортированный массив
sort() да:white_check_mark: да:white_check_mark: новый отсортированный массив
concat() нет да:white_check_mark: Новый массив после объединения
slice() нет да:white_check_mark: Новый массив после усечения
splice() да:white_check_mark: да:white_check_mark: новый массив удаленных элементов
push() да:white_check_mark: да:white_check_mark: Увеличить длину массива
pop() да:white_check_mark: да:white_check_mark: элемент, который был удален
unshift() да:white_check_mark: да:white_check_mark: Увеличить длину массива
shift() да:white_check_mark: да:white_check_mark: элемент, который был удален
every() нет да:white_check_mark: возвращает логическое значение
some() нет да:white_check_mark: возвращает логическое значение
filter() нет да:white_check_mark: вернуть массив
map() нет да:white_check_mark: вернуть массив
forEach() нет нет undefined

⬆ вернуться к началу

Тип объекта

Базовые знания

Мы знаем, что свойства объекта состоят из имен, значений и набора атрибутов. В ECMAScript 5 значения свойств могут быть заменены одним или двумя методами, эти два методаgetterа такжеsetter. Зависит отgetterа такжеsetterОпределенные атрибуты называются «Свойство Accessor» (свойство Accessior), он отличается от «Данных атрибутов» (свойство данных), только простое значение атрибута данных.

Когда значение атрибута программы запрашивает метод доступа, JavaScript вызывает метод получения (без параметров). Возвращаемое значение — это значение выражения, к которому обращаются атрибуты. Когда установлено значение аксессора атрибута программы, вызов JavaScriptsetterметод, передавая значение в правой части выражения присваивания в качестве параметраsetter. В некотором смысле этот метод отвечает за «установку» значения свойства. Можно игнорироватьsetterВозвращаемое значение метода.

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

Наиболее часто объект используется для создания, установки, запроса, удаления, проверки и перечисления его свойств.

ECMAScript 5 определяетObject.create()метод, который создает новый объект, где первым параметром является прототип этого объекта.Object.create()Второй необязательный параметр предоставляется для дальнейшего описания свойств объекта.Object.create()является статической функцией, а не методом, предназначенным для вызова объекта. Способ его использования так же прост, как передача желаемого объекта-прототипа.

Свойство прототипа объекта используется для наследования свойств,__proto__Свойства используются для запроса и установки прототипа объекта. В JavaScript все объекты-экземпляры класса наследуют свойства одного и того же объекта-прототипа. Следовательно, объект-прототип является ядром класса.

Определить свойства

Объекты JavaScript можно рассматривать как наборы свойств, и мы часто определяем принадлежность элементов к набору, чтобы определить, существует ли свойство в объекте. в состоянии пройтиinоператор,hasOwnPreperty()а такжеpropertyIsEnumerable()метод для выполнения задания или даже просто запрос свойств.

inЛевая часть оператора — это имя свойства (строка), а правая — объект. Возвращает, если собственное свойство объекта или унаследованное свойство содержит это свойствоtrue

объектhasOwnProperty()Метод используется для проверки того, является ли данное имя собственным свойством объекта. Для унаследованных свойств он вернетfalse

propertyIsEnumerable()даhasOwnProperty()Усовершенствованная версия , которая возвращает значение true, только если обнаруживает собственное свойство и перечисляемый атрибут свойства имеет значение true.

свойства свойств

позвонивObject.getOwnPropertyDescriptor()Можно получить дескрипторы свойств для определенных свойств объекта.Object.getOwnPropertyDescriptor()Можно получить только дескрипторы собственных свойств.

Чтобы установить свойства свойства или сделать новое свойство определенным свойством, вам нужно вызватьObject.definePeoperty(), передавая объект для изменения, имя свойства для создания или изменения и объект дескриптора свойства

Если вы хотите изменить или создать несколько свойств одновременно, вам нужно использоватьObject.defineProperties(). Первый параметр — это объект, который нужно изменить, а второй параметр — это карта, содержащая имена вновь создаваемых или изменяемых свойств и их дескрипторы свойств.

Свойства прототипа

В ECMAScript 5 передача объекта в качестве параметраObject.getPrototypeOf()Его прототип можно запросить. В ECMAScript 3 нет эквивалентной функции, но часто используются выраженияo.constructor.prototypeобнаружить прототип объекта. пройти черезnewОбъект, созданный выражением, обычно наследующийconstructorсвойство, которое ссылается на конструктор, создавший этот объект.

метод экземпляра

Constructor: содержит функцию, используемую для создания текущего объекта.

hasOwnProperty(propertyName): Используется для проверки наличия данного свойства в текущем экземпляре объекта (а не в прототипе экземпляра). где имя атрибута в качестве параметра (propertyName) должен быть указан в виде строки (например:o.hasOwnProperty(“name”)).

isPrototypeOf(object): используется для проверки того, является ли переданный объект прототипом другого объекта.

propertyIsEnumerable(propertyName): используется для проверки возможности использования данного свойстваfor-inоператор (обсуждается далее в этой главе) для перечисления. а такжеhasOwnProperty()Как и в случае с методами, имя свойства в качестве параметра должно быть указано в виде строки.

toLocaleString(): возвращает строковое представление объекта, соответствующее локали среды выполнения.

toString(): возвращает строковое представление объекта.

valueOf(): возвращает строковое, числовое или логическое представление объекта. обычно сtoString()Возвращаемое значение метода такое же.

Масштабируемость

Расширяемость объекта указывает, можно ли добавить к объекту новые свойства.

ECMAScript 5 определяет функции для запроса и настройки расширяемости объекта. путем передачи объектаObject.isExtensible(), чтобы определить, является ли объект расширяемым. Если вы хотите преобразовать объект в нерасширяемый, вам нужно вызватьObject.preventExtensions(), передайте объект для преобразования в качестве параметра. Обратите внимание, что после преобразования объекта в нерасширяемый его нельзя преобразовать обратно в расширяемый. Также обратите внимание, чтоpreventExtensions()Влияет только на расширяемость самого объекта. Если вы добавите свойства к прототипу нерасширяемого объекта, нерасширяемый объект также унаследует эти новые свойства.

Целью расширяемой недвижимости является «заблокировать» объект, чтобы избежать наружных помех. Расширяемость объектов обычно используется в сочетании с присвоением и приспособлеемостью свойств, а некоторые функции, определенные ECMAScript 5, могут установить различные свойства более удобно.Object.seal()а такжеObject.preventExtensions()Точно так же, в дополнение к возможности сделать объект нерасширяемым, вы также можете сделать все собственные свойства объекта ненастраиваемыми. То есть к этому объекту нельзя добавить новые свойства, а его существующие свойства нельзя удалить или настроить, но его существующие доступные для записи свойства по-прежнему можно задать. Объекты, которые были опечатаны (опечатаны), не могут быть распечатаны. можно использоватьObject.isSealed()чтобы проверить, закрыт ли объект.

Object.freeze()Объекты будут заблокированы более плотно - "заморожены". В дополнение к тому, что объект не расширяется, а его свойства не настраиваются, вы также можете сделать все его собственные свойства данных доступными только для чтения (если свойства доступа объекта имеют методы установки, свойства доступа не будут затронуты, они все еще могут вызываться путем присвоения свойствам). использоватьObject.isFrozen()чтобы определить, заморожен ли объект.

подход ES6

  • ES6 позволяет напрямую записывать переменные и функции как свойства и методы объектов.
  • ES6 предлагает алгоритм «равенства одинаковых значений» для решения этой проблемы.Object.isЭто новый способ развертывания этого алгоритма. Он используется для сравнения того, являются ли два значения строго равными, и имеет в основном то же поведение, что и оператор строгого сравнения (===).
  • Object.assignМетод используется для слияния объектов, копирования всех перечисляемых свойств исходного объекта (source) в целевой объект (target).
  • __proto__Атрибут (два символа подчеркивания до и после), используемый для чтения или установки текущего объекта.prototypeобъект. В настоящее время все браузеры (включая IE11) используют это свойство.
  • Object.setPrototypeOfЭффект метода и__proto__То же самое, используется для установки объектаprototypeобъект, возвращает сам объект параметра. Это официально рекомендуемый способ настройки объектов-прототипов в ES6.
  • Object.getPrototypeOf()Этот метод иObject.setPrototypeOfСопоставление методов, используемое для чтения объекта-прототипа объекта.
  • Object.valuesМетод возвращает массив, членами которого являются ключи всех перечисляемых свойств самого объекта параметра (за исключением унаследованных).
  • Object.entriesМетод возвращает массив пар ключ-значение всех перечисляемых свойств самого объекта параметра (за исключением унаследованных).
  • оператор спреда (...) используется для извлечения всех проходимых свойств объекта параметра и их копирования в текущий объект.

индукция

имя метода Можно ли добавить свойства к объекту Можно ли удалить существующие свойства Можно ли изменить существующие свойства Метод обнаружения
preventExtensible() нет да:white_check_mark: да:white_check_mark: isExtensible()
seal() нет нет да:white_check_mark: isSeal()
freeze() нет нет нет isFreeze()

⬆ вернуться к началу

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

Тип узла

Каждый узел имеетnodeTypeАтрибут для указания типа узла. Чтобы узнать конкретную информацию об узле, вы можете использоватьnodeNameа такжеnodeValueэти два свойства.

Связь узла

Каждый узел имеетchildNodesатрибут, который содержитNodeListобъект.NodeListпредставляет собой массивоподобный объект, который содержит упорядоченный набор узлов, к которым можно получить доступ по положению. Обратите внимание, что хотя синтаксис квадратных скобок можно использовать для доступаNodeListзначение, и этот объект также имеетlengthимущество, но неArrayпример.NodeListОбъект уникален тем, что фактически является результатом динамического выполнения запросов на основе структуры DOM, поэтому изменения в структуре DOM автоматически отражаются в структуре DOM.NodeListв объекте. Мы часто говорим,NodeListЖивые, дышащие объекты, а не снимок, сделанный в момент, когда мы впервые их посещаем.

Каждый узел имеетparentNodeсвойство, указывающее на родительский узел в дереве документа. включен вchildNodesВсе узлы в списке имеют одного и того же родителя, поэтому ихparentNodeАтрибуты.

Используя значение каждого узла в спискеpreviousSiblingа такжеnextSiblingдля доступа к другим узлам в том же списке. первый узел в спискеpreviousSiblingСтоимость свойстваnull, а последний узел в списке имеетnextSiblingСтоимость имущества такжеnull.

родительский узелfirstChildа такжеlastChildатрибут указывает на егоchildNodesПервый и последний узел в списке. В случае только одного дочернего узла,firstChildа такжеlastChildуказывают на один и тот же узел.

Кроме того,hasChildNodes()Также очень полезный метод, этот метод возвращает значение, если узел содержит одного или нескольких дочерних элементов.true; следует сказать, что это лучше, чем запросchildNodesБолее простой способ сделать это с помощью свойства длины списка.

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

Работа узла

Наиболее распространенным методом являетсяappendChild()ДляchildNodesДобавьте узел в конец списка. После добавления узлаchildNodesУказатели отношений вновь добавленного узла, родительского узла и предыдущего последнего дочернего узла обновляются соответствующим образом. После завершения обновленияappendChild()Возвращает только что добавленный узел. Если узел, переданный в appendChild(), уже является частью документа, в результате узел перемещается из исходного положения в новое. Несмотря на то, что дерево DOM можно представить как связанное серией указателей, ни один узел DOM не может одновременно появляться в нескольких местах документа. (отображение DOM)

Если вам нужно поместить узел вchildNodesв определенной позиции в списке, а не в конце, вы можете использоватьinsertBefore()метод. Этот метод принимает два параметра: узел для вставки и узел для ссылки. После вставки узла вставленный узел становится предыдущим одноуровневым узлом ссылочного узла (previousSibling), возвращаемый методом. Если эталонный узелnull,ноinsertBefore()а такжеappendChild()Делать то же самое.

ранее представленныйappendChild()а такжеinsertBefore()Все методы только вставляют узлы, но не удаляют узлы. И следующее представитreplaceChild()Метод принимает два параметра: узел для вставки и узел для замены. Заменяемый узел будет возвращен этим методом и удален из дерева документа, а вставляемый узел займет его место.

Если вы просто хотите удалить, а не заменить узлы, вы можете использоватьremoveChild()метод. Этот метод принимает один параметр — удаляемый узел. Удаленный узел будет возвращаемым значением метода.

Описанные выше четыре метода работают с дочерними узлами узла, то есть для использования этих методов необходимо сначала получить родительский узел (используяparentNodeАтрибуты). Кроме того, не все типы узлов имеют дочерние элементы, и вызов этих методов на узле, который не поддерживает дочерние элементы, приведет к ошибке.

Другие методы

Для всех типов узлов доступны два метода. ПервыйcloneNode(), используемый для создания точной копии узла, вызвавшего этот метод.cloneNode()Метод принимает логический параметр, указывающий, следует ли выполнять глубокое копирование. в параметреtrueВ случае выполнить глубокую копию, т. е. скопировать узел и все его дочернее дерево узлов; при значении параметраfalseВ случае мелкой копии копируется только сам узел. Копия узла, возвращенная после копирования, принадлежит документу, но для него не указан родитель. Таким образом, эта реплика узла становится «сиротой», если не передаетсяappendChild(),insertBefore()илиreplaceChild()Добавьте его в документ.

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

Расширение DOM

querySelector()Способ принимает селектор CSS и возвращает первый элемент, который соответствует шаблону, или если совпадающий элемент не найден, возвратnull.

querySelectorAll()Параметры, полученные методом, такие же, какquerySelector()метод является селектором CSS, но возвращает все соответствующие элементы, а не только один элемент. Этот метод возвращаетNodeListпример.

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

Спецификация Selectors API Level 2 добавляет новый метод к типу Element.matchesSelector(). Этот метод принимает один параметр, селектор CSS, и возвращает значение, если вызывающий элемент соответствует селектору.true; иначе вернутьfalse. См. пример. В случае получения ссылки на элемент этот метод можно использовать, чтобы легко определить, будет ли онquerySelector()илиquerySelectorAll()метод возвращает.

childElementCount ：返回子元素（不包括文本节点和注释）的个数。
firstElementChild ：指向第一个子元素； firstChild 的元素版。
lastElementChild ：指向最后一个子元素； lastChild 的元素版。
previousElementSibling ：指向前一个同辈元素； previousSibling 的元素版。
nextElementSibling ：指向后一个同辈元素； nextSibling 的元素版。
скопировать код

Тип документа

JavaScript представляет документы через тип документа. В браузереdocumentобъектHTMLDocumentЭкземпляр (наследуется от типа Document), представляющий всю HTML-страницу. а также,documentобъектwindowСвойство объекта, поэтому к нему можно получить доступ как к глобальному объекту.

Тип Document представляет документ HTML или XML, а тип Element представляет элемент в документе. Подклассы HTMLDocument и HTMLElement относятся только к документам и элементам HTML.

document的原型链
HTMLDocument->Document->Node->EventTarget->Object

Дочерние узлы документа, первый из нихdocumentElementатрибут, который всегда указывает на<html>. так какHTMLDocumentпример,documentобъект имеет другойbodyсвойство, указывающее непосредственно на<body>элемент. Итак, все браузеры поддерживаютdocument.documentElementа такжеdocument.bodyАтрибуты.

так какHTMLDocumentэкземпляр ,documentОбъект также имеет некоторые свойства, которых нет у стандартного объекта Document. Эти свойства обеспечиваютdocumentНекоторая информация о веб-странице, представленной объектом. Первым свойством которого являетсяtitle, включая<title>Текст в элементе — отображается в строке заголовка или на вкладке окна браузера. С помощью этого свойства можно получить заголовок текущей страницы, а также изменить заголовок текущей страницы и отобразить его в строке заголовка браузера. ИсправлятьtitleСтоимость имущества не меняется<title>элемент.

Следующие 3 свойства связаны с запросами к веб-страницам.URL,domainа такжеreferrer.URLСвойство содержит полныйURL(то есть URL-адрес, отображаемый в адресной строке), атрибут домена содержит только доменное имя страницы иreferrerАтрибут содержит страницу, связанную с текущей страницей.URL. При отсутствии исходной страницыreferrerСвойства могут содержать пустые строки. Вся эта информация присутствует в HTTP-заголовках запроса, просто эти свойства позволяют нам получить к ним доступ в JavaScript.

Операция получения элемента может быть использованаdocumentВыполняется несколько методов объекта. Среди них тип документа предоставляет для этого два метода:getElementById()а такжеgetElementsByTagName().getElementById()Возвращает единственный элемент документа в первый раз. IE7 и более ранние версии также добавляют для этой цели интересный метод «quirks»:nameЭлементы формы, атрибуты которых соответствуют заданному идентификатору (<input>,<textarea>,<button>а также<select>) также будет возвращен этим методом. Если какой-либо элемент формыnameАтрибут равен указанному идентификатору, и элемент предшествует элементу с данным идентификатором в документе, тогда IE возвращает этот элемент формы. Другим методом, обычно используемым для получения ссылок на элементы, являетсяgetElementsByTagName(). Этот метод принимает один параметр, который является именем тега элемента, который необходимо получить, и возвращает значение, содержащее ноль или более элементов.NodeList.

Третий способ тоже толькоHTMLDocumentТиповые методыgetElementsByName(). Как следует из названия, этот метод возвращаетnameВсе элементы собственности. чаще всего используетсяgetElementsByName()Метод получения радиокнопок; чтобы убедиться, что в браузер отправляется правильное значение, все радиокнопки должны иметь одинаковыеnameхарактеристика

Тип элемента

Тип Element используется для представления элементов XML или HTML, предоставляя доступ к именам тегов элементов, дочерним узлам и атрибутам. Все элементы HTML представленыHTMLElementПредставление типа не напрямую через тип, а через его подтипы.HTMLElementТип наследуется непосредственно отElementи добавил некоторые свойства.

Представляет элемент HTML-документаHTMLElementОбъекты определяют свойства чтения/записи, которые отображаютHTMLАтрибуты.HTMLElementопределяет общийHTMLТакие атрибуты, как id, title lang и dir, а также атрибуты обработчика событий, такие как onclick. специфическийElementПодтип определяет определенные свойства для своих элементов. Например, чтобы запросить URL-адрес изображения, вы можете использовать представление＜img＞элементальHTMLElementобъектsrcАтрибуты.

HTMLElement и его подтипы определяют свойства, соответствующие стандартным свойствам HTML элемента. Тип элемента также определяетgetAttribute()а такжеsetAttribute()методы для запроса и установки нестандартных атрибутов HTML, а также могут использоваться для запроса и установки атрибутов элементов в XML-документах.

a元素的原型链
HTMLAnchorElement->HTMLElement->Element->Node->EventTarget->Object
body元素的原型链
HTMLBodyElement->HTMLElement->Element->Node->EventTarget->Object

HTML5 также определяет объект ElementdatasetАтрибуты. Это свойство относится к объекту, свойства которого соответствуют префиксуdata-Атрибуты. следовательноdataset.xдолжен спастиdata-xСтоимость имущества. Свойства, написанные через дефис, соответствуют именам свойств в верблюжьем регистре:data-jquery-testАтрибут становитсяdataset.jqueryTestАтрибуты.

использоватьdocument.createElement()способ создания новых элементов. Этот метод принимает только один параметр — имя тега создаваемого элемента. Это имя тега нечувствительно к регистру в документах HTML, но чувствительно к регистру в документах XML (включая XHTML). Установка этих свойств для новых элементов просто дает им соответствующую информацию. Поскольку новый элемент еще не добавлен в дерево документов, установка этих свойств не повлияет на отображение в браузере. Чтобы добавить новый элемент в дерево документов, используйтеappendChild(),insertBefore()илиreplaceChild()метод.

Элементы могут иметь любое количество дочерних элементов и потомков, потому что элементы могут быть дочерними элементами других элементов. элементальchildNodesАтрибут содержит все свои дочерние узлы, которые могут быть элементами, текстовыми узлами, комментариями или инструкциями по обработке. Разные браузеры видят эти узлы значительно по-разному.

Читать элементinnerHTMLАтрибут возвращает содержимое этого элемента в виде строкового тега. HTML5 также стандартизированouterHTMLАтрибуты. При запросеouterHTMLКогда возвращаемая строка разметки HTML или XML содержит открывающий и закрывающий теги запрашиваемого элемента. При установке элементаouterHTML, сам элемент заменяется новым содержимым. ТолькоElementУзел определяетouterHTMLАтрибуты, узлы документа не имеют. Еще одна функция, представленная IE,insertAdjacentHTML()метод, который будет стандартизирован в HTML5 и вставляет произвольную строку HTML-разметки, «примыкающую» к указанному элементу. Маркер является вторым аргументом этого метода, и точное значение слова «смежный» зависит от значения первого аргумента. Первый параметр — это строка с одним из следующих значений: «beforebegin», «afterbegin», «beforeend» и «afterend».

индукция

имя метода Можно ли использовать документы HTML Можно ли использовать элементы HTML То, что возвращается, Есть ли отображение DOM
getElementById() могу:white_check_mark: нет Элемент объекта да:white_check_mark:
getElementByName() могу:white_check_mark: нет Объект NodeList да:white_check_mark:
getElementByTagName() могу:white_check_mark: могу:white_check_mark: Объект NodeList да:white_check_mark:
getElementByClassName() могу:white_check_mark: могу:white_check_mark: Объект NodeList да:white_check_mark:
querySelectorAll() могу:white_check_mark: могу:white_check_mark: Объект NodeList нет
querySelector() могу:white_check_mark: могу:white_check_mark: Объект NodeList нет

оконный объект

Объект окнаpageXOffsetа такжеpageYOffsetСвойства предоставляют эти значения во всех браузерах, кроме IE 8 и более ранних версий. IE (и все современные браузеры) также могут пройтиscrollLeftа такжеscrollTopсвойство, чтобы получить положение полосы прокрутки. Как ни странно, запрашивая корневой узел документа (document.documentElement), чтобы получить значения этих свойств, но в режиме совместимости он должен быть＜body＞элемент(document.body), чтобы запросить их.

Самый простой способ определить размер и положение элемента — это вызвать егоgetBoundingClientRect()метод. Этот метод был представлен в IE 5 и теперь реализован во всех современных браузерах. Он не принимает аргументов и возвращает объект со свойствами слева, справа, сверху и снизу. Свойства left и top представляют координаты X и Y левого верхнего угла элемента, а свойства right и bottom представляют координаты X и Y правого нижнего угла элемента. Во многих браузерах (и стандарте W3C) объект, возвращаемый функцией getBoundingClientRect(), также содержит свойства ширины и высоты, но это не было реализовано в родном IE. Это просто статические снимки визуального состояния документа при вызове метода. фотографии, они не обновляются, когда пользователь прокручивает или изменяет размер окна браузера.

Объект окнаscrollTop()метод (и его синонимы)scroll()) Принимает координаты X и Y точки (координаты документа) и предоставляет полосу прокрутки в качестве величины ее смещения. ОкноscrollBy()Методы иscroll()а такжеscrollTo()Аналогично, но его аргументы являются относительными и увеличиваются при смещении текущей полосы прокрутки.

⬆ вернуться к началу

Объектная модель браузера спецификации

Свойство location объекта Window ссылается на объект Location, который представляет URL-адрес документа, отображаемого в данный момент в окне. Свойство href объекта Location представляет собой строку, содержащую полный текст URL-адреса.

Местоположение объектаhashа такжеsearchСвойства интереснее. если так,hashСвойство возвращает часть URL-адреса «идентификатор фрагмента».searchСвойство также похоже, оно возвращает URL-адрес после вопросительного знака, который обычно представляет собой строку запроса.

Местоположение объектаassign()Метод вызывает загрузку окна и отображение документа по указанному вами URL-адресу.replace()Метод аналогичен, но он удаляет текущий документ из истории посещенных страниц перед загрузкой нового документа.

Кромеassgin()а такжеreplace()метод, объект Location также определяетreload()метод, который заставляет браузер перезагружать текущий документ.

Объект окнаhistoryСвойство относится к окнуHistoryобъект.HistoryОбъект используется для представления истории просмотров окна в виде списка документов и состояний документов.HistoryобъектlengthСвойство представляет количество элементов в списке истории посещенных страниц, но из соображений безопасности скрипты не могут получить доступ к сохраненнымURL. (Если разрешено, произвольные сценарии могут отслеживать вашу историю просмотров.)

объекта Историяback()а такжеforward()Метод такой же, как и у кнопок браузера «назад» и «вперед»: они заставляют браузер переходить назад и вперед на одну позицию в истории посещенных страниц. Третий метод, go(), принимает целочисленный аргумент и может пропускать любое количество страниц вперед (положительный аргумент) или назад (отрицательный аргумент) в списке истории.

⬆ вернуться к началу

рисунок на холсте

Простую 2D-графику, такую ​​как прямоугольники, дуги и контуры, можно рисовать с помощью методов, предоставляемых контекстом 2D-рисования. Координаты 2D-контекста начинаются с<canvas>верхний левый угол элемента, исходные координаты(0,0). Все значения координат рассчитываются на основе этого начала, Чем больше значение x, тем правее, и чем больше значение y, тем ниже. по умолчанию,widthа такжеheightУказывает количество пикселей, доступных как в горизонтальном, так и в вертикальном направлениях.

Заполнить и обвести

Двумя основными операциями рисования для 2D-контекстов являются заливка и обводка. Заливка — заливка изображения заданным стилем (цветом, градиентом или изображением), обводка — рисование линий только по краям изображения. Большинство операций 2D-контекста подразделяются на операции заливки и обводки, а результат операции зависит от двух свойств:fillStyleа такжеstrokeStyle.

нарисовать прямоугольник

Прямоугольник — единственная фигура, которую можно нарисовать непосредственно в 2D-контексте. Методы, связанные с прямоугольниками, включаютfillRect(),strokeRect()а такжеclearRect(). Все три метода принимают 4 параметра: координату x прямоугольника, координату y прямоугольника, ширину прямоугольника и высоту прямоугольника. Единицами этих параметров являются все пиксели.

ширина штриховой линии

Ширина заштрихованной линии определяется выражениемlineWidthУправление атрибутом, значением этого атрибута может быть любое целое число. Кроме того, поlineCapсвойства, определяющие, является ли конец линии плоским, круглым или квадратным (“butt”,“round”или“square”),пройти черезlineJoinСвойство определяет, пересекаются ли линии по кругу, косо или под углом (“round”,“bevel”или“miter”).

рисовать путь

Контекст 2D-рисования поддерживает множество методов рисования контуров на холсте. Сложные формы и линии могут быть созданы с помощью контуров. Чтобы нарисовать путь, сначала вы должны вызватьbeginPath()метод, указывающий, что необходимо нарисовать новый путь. Затем путь фактически рисуется путем вызова следующих методов.

  • arc(x, y, radius, startAngle, endAngle, counterclockwise):к(x,y)Нарисуйте дугу для центра круга с радиусомradius, начальный и конечный углы (в радианах) равныstartAngleа такжеendAngle. Последний параметр означаетstartAngleа такжеendAngleСледует ли рассчитывать в направлении против часовой стрелки, значение равноfalseОбозначает счет по часовой стрелке.
  • arcTo(x1, y1, x2, y2, radius): От точки, чтобы начать рисовать дугу, чтобы(x2,y2)Решаемо, и с заданным радиусомradiusпройти через(x1,y1).
  • bezierCurveTo(c1x, c1y, c2x, c2y, x, y): Нарисуйте кривую от предыдущей точки до (x,y) с (c1x,c1y) и (c2x,c2y) в качестве контрольных точек.
  • lineTo(x, y): Проведите прямую линию от предыдущей точки до(x,y)до.
  • moveTo(x, y): переместите курсор рисования в(x,y), без рисования линий.
  • quadraticCurveTo(cx, cy, x, y): Нарисуйте квадратичную кривую от предыдущей точки до(x,y)до и с(cx,cy)как контрольный пункт.
  • rect(x, y, ширина, высота): от точки(x,y)Начните рисовать прямоугольник с шириной и высотой, заданнымиwidthа такжеheightУказано. Этот метод рисования прямоугольного пути, а неstrokeRect()а такжеfillRect()Независимо от формы.
  • После того, как вы создаете путь, то есть несколько возможных вариантов. Если вы хотите нарисовать строку, подключенную к отправной точке пути, вы можете позвонитьclosePath(). Если путь уже пройден, вы хотите использоватьfillStyleчтобы заполнить его, вы можете позвонитьfill()метод. Кроме того, вы также можете позвонитьstroke()Метод обводит контур, а обводка используетstrokeStyle. Наконец, вы также можете позвонитьclip(), этот метод создает область отсечения на пути.

⬆ вернуться к началу

Суммировать

Сценарий CSS

Встроенные стили. Самый простой способ написать CSS-скрипт — изменить атрибут стиля отдельных элементов документа. Как и большинство атрибутов HTML, стиль — это атрибут объекта элемента, которым можно манипулировать в JavaScript. А вот свойство стиля необычное: его значением является не строка, а объект CSSStyleDeclaration. Свойство JavaScript объекта стиля представляет свойство CSS, указанное стилем в коде HTML.

Запрос вычисляемых стилей: свойство стиля элемента представляет встроенные стили элемента, оно переопределяет все таблицы стилей, и это лучшее место для установки значений свойств CSS для изменения внешнего вида элемента. Однако это не очень полезно для запроса стилей, фактически примененных к элементу. Для этого вы хотите использовать вычисляемые стили. Вычисляемый стиль элемента — это набор значений атрибутов, полученных (или вычисленных) браузером путем объединения встроенных стилей со всеми применимыми правилами стиля во всех связанных таблицах стилей: это набор значений, которые фактически используются при отображении элемента. элемент значение свойства. Подобно встроенным стилям, вычисляемые стили также представлены объектом CSSStyleDeclaration, с той разницей, что вычисляемые стили доступны только для чтения. Хотя эти стили нельзя установить, объект CSSStyleDeclaration, вычисленный для элемента, точно определяет, какие значения свойств стиля использует браузер при рендеринге элемента. Используйте метод getComputedStyle() объекта окна браузера, чтобы получить вычисленный стиль элемента.

Классы CSS. Альтернативой написанию стилей CSS через встроенный атрибут стиля является создание сценария значения атрибута класса HTML. Изменение класса элемента изменяет набор селекторов таблицы стилей, применяемых к элементу, что может одновременно изменить несколько свойств CSS.

наконец

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

Категории