​🧾 События в JavaScript (часть 4)

Общие события HTML

Вот список некоторых распространенных событий HTML:

onchange – элемент HTML был изменен.

onclick – пользователь щелкает элемент HTML.

onmouseover – пользователь наводит указатель мыши на элемент HTML.

onmouseout – пользователь отводит указатель мыши от элемента HTML.

onkeydown – пользователь нажимает клавишу на клавиатуре.

onload – браузер завершил загрузку страницы.

📋 #JavaScript #Совет
▬▬▬▬▬▬▬▬
// How To WebDev

​🧾 События в JavaScript (финал)

Что умеет JavaScript?

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

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

Чтобы JavaScript работал с событиями, можно использовать множество различных методов:

Атрибуты событий HTML могут напрямую выполнять код JavaScript;

Атрибуты событий HTML могут вызывать функции JavaScript;

Вы можете назначить свои собственные функции обработчика событий элементам HTML;

Вы можете запретить отправку или обработку событий.

📋 #JavaScript #Совет
▬▬▬▬▬▬▬▬
// How To WebDev

​🧾 Методы строк в JavaScript (часть 1)

Методы строк помогают работать со строками.

Методы строк и свойства

Примитивные значения, такие как "Щипунов Андрей", не могут иметь свойств или методов (потому что они не являются объектами).

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

📋 #JavaScript #Совет
▬▬▬▬▬▬▬▬
// How To WebDev

​🧾 Методы строк в JavaScript (часть 2)

Длина строки

Свойство length возвращает длину строки.

var txt = "АБВГДЕЁЖЗИЙКЛМНОПРСТУФХЦЧШЩЪЫЬЭЮЯ";
var sln = txt.length;

Поиск строки в строке

Метод indexOf() возвращает индекс (положение) на first вхождения указанного текста в строке.

Пример:

var str = "Пожалуйста, найдите, где происходит 'размещение'!";
var pos = str.indexOf("размещение");

JavaScript считает позиции с нуля.
0 - первая позиция в строке, 1 - вторая, 2 - третья и т.д.

📋 #JavaScript #Совет
▬▬▬▬▬▬▬▬
// How To WebDev

​🧾 Методы строк в JavaScript (часть 3)

Метод lastIndexOf() возвращает индекс последнего вхождения указанного текста в строке.

Пример:

var str = "Пожалуйста, найдите, где происходит 'размещение'!";
var pos = str.lastIndexOf("размещение");

Оба indexOf(), и lastIndexOf() возвращают -1, если текст не найден.

Пример:

var str = "Пожалуйста, найдите, где происходит 'размещение'!";
var pos = str.lastIndexOf("размещение");

📋 #JavaScript #Совет
▬▬▬▬▬▬▬▬
// How To WebDev

​🧾 Методы строк в JavaScript (часть 4)

Оба метода принимают второй параметр в качестве начальной позиции для поиска.

Пример:

var str = "Пожалуйста, найдите, где происходит 'размещение'!";
var pos = str.indexOf("размещение", 15);

Эти lastIndexOf() методы выполняют поиск в обратном направлении (от конца к началу), что означает: если второй параметр равен 15, поиск начинается с позиции 15 и выполняется поиск до начала строки.

Пример:

var str = "Пожалуйста, найдите, где происходит 'размещение'!";
var pos = str.lastIndexOf("размещение", 15);

📋 #JavaScript #Совет
▬▬▬▬▬▬▬▬
// How To WebDev

​🧾 Методы строк в JavaScript (часть 5)

Поиск строки в строке
В search() методе ищет строку для указанного значения и возвращает позицию матча.

Пример:

var str = "Пожалуйста, найдите, где происходит 'размещение'!";
var pos = str.search("размещение");

Два метода, indexOf() и search(), равны?

Они принимают одни и те же аргументы (параметры) и возвращают одно и то же значение?

Эти два метода НЕ равны. Вот отличия:

• Метод search() не может принимать второй аргумент позиции начала.

• Метод indexOf() не может принимать мощные значения поиска (регулярные выражения).

📋 #JavaScript #Совет
▬▬▬▬▬▬▬▬
// How To WebDev

​🧾 Методы строк в JavaScript (часть 6)

Извлечение строчных частей.

Есть 3 метода извлечения части строки:

1. slice(start, end)
2. substring(start, end)
3. substr(start, length)

1. Метод slice()
Метод slice() извлекает часть строки и возвращает извлеченную часть в новой строке.

Метод принимает 2 параметра: начальную позицию и конечную позицию (конец не включен).

В этом примере часть строки вырезается из позиции 7 в позицию 12 (13-1).

Пример:

var str = "Яблоко, Банан, Киви";
var res = str.slice(7, 13);

Результатом res будет:

Банан

📋 #JavaScript #Совет
▬▬▬▬▬▬▬▬
// How To WebDev

​🧾 Методы строк в JavaScript (часть 7)

Помните: JavaScript считает позиции с нуля. Первая позиция - 0.

Если параметр отрицательный, позиция отсчитывается от конца строки

В этом примере часть строки вырезается из позиции -12 в позицию -6.

Пример:

var str = "Яблоко, Банан, Киви";
var res = str.slice(-12, -6);

Результатом res будет:

Банан

📋 #JavaScript #Совет
▬▬▬▬▬▬▬▬
// How To WebDev

​🧾 Методы строк в JavaScript (часть 8)

Если вы опустите второй параметр, метод вырежет остальную часть строки

Пример:

var res = str.slice(7);

или, считая с конца.

Пример:

var res = str.slice(-12);

Отрицательные позиции не работают в Internet Explorer 8 и ранее.

📋 #JavaScript #Совет
▬▬▬▬▬▬▬▬
// How To WebDev

​🧾 Методы строк в JavaScript (часть 9)

Метод substring():

Метод substring() похож на slice().

Разница в том, что substring() не может принимать отрицательные индексы.

Пример:

var str = "Яблоко, Банан, Киви";
var res = str.substring(7, 13);

Результатом res будет:

Банан

Если вы опустите второй параметр, substring() оставшаяся часть строки будет вырезана.

📋 #JavaScript #Совет
▬▬▬▬▬▬▬▬
// How To WebDev

​🧾 Методы строк в JavaScript (часть 10)

Метод substr():

Метод substr() похоже на slice().

Разница в том, что второй параметр указывает длину извлеченной части.

Пример:

var str = "Яблоко, Банан, Киви";
var res = str.substr(7, 6);

Результатом res будет:

Банан

📋 #JavaScript #Совет
▬▬▬▬▬▬▬▬
// How To WebDev

​🧾 Методы строк в JavaScript (часть 11)

Если вы опустите второй параметр, substr() оставшаяся часть строки будет вырезана.

Пример:

var str = "Яблоко, Банан, Киви";
var res = str.substr(7);

Результатом res будет:

Банан, Киви

Если первый параметр отрицательный, позиция отсчитывается от конца строки.

Пример:

var str = "Яблоко, Банан, Киви";
var res = str.substr(-4);

Результатом res будет:

Киви

📋 #JavaScript #Совет
▬▬▬▬▬▬▬▬
// How To WebDev

​🧾 Методы строк в JavaScript (часть 12)

Замена содержимого строки
Метод replace() заменяет указанное значение с другим значением в строке.

Пример:

str = "Пожалуйста, посетите Microsoft!";
var n = str.replace("Microsoft", "Schoolsw3");

Метод replace() не изменяет строку она вызвана. Он возвращает новую строку.

По умолчанию replace() метод заменяет только первое совпадение:

Пример:

str = "Пожалуйста, посетите Microsoft и Microsoft!";
var n = str.replace("Microsoft", "Schoolsw3");

По умолчанию replace() метод чувствителен к регистру. Записать MICROSOFT (в верхнем регистре) не получится.

Пример:

str = "Пожалуйста, посетите Microsoft!";
var n = str.replace("MICROSOFT", "Schoolsw3");

📋 #JavaScript #Совет
▬▬▬▬▬▬▬▬
// How To WebDev

​🧾 Методы строк в JavaScript (часть 13)

Чтобы заменить нечувствительность к регистру, используйте регулярное выражение с /i флагом (нечувствительность):

Пример:

str = "Пожалуйста, посетите Microsoft!";
var n = str.replace(/MICROSOFT/i, "Schoolsw3");

Обратите внимание, что регулярные выражения пишутся без кавычек.

Чтобы заменить все совпадения, используйте регулярное выражение с /g флагом (глобальное совпадение):

Пример:

str = "Пожалуйста, посетите Microsoft и Microsoft!";
var n = str.replace(/Microsoft/g, "Schoolsw3");

📋 #JavaScript #Совет
▬▬▬▬▬▬▬▬
// How To WebDev

​🧾 Методы строк в JavaScript (часть 13)

Чтобы заменить нечувствительность к регистру, используйте регулярное выражение с /i флагом (нечувствительность):

Пример:

str = "Пожалуйста, посетите Microsoft!";
var n = str.replace(/MICROSOFT/i, "Schoolsw3");

Обратите внимание, что регулярные выражения пишутся без кавычек.

Чтобы заменить все совпадения, используйте регулярное выражение с /g флагом (глобальное совпадение):

Пример:

str = "Пожалуйста, посетите Microsoft и Microsoft!";
var n = str.replace(/Microsoft/g, "Schoolsw3");

📋 #JavaScript #Совет
▬▬▬▬▬▬▬▬
// How To WebDev

​🧾 Методы строк в JavaScript (часть 14)

Преобразование в верхний и нижний регистр
Строка преобразуется в верхний регистр с помощью toUpperCase().

Пример:

var text1 = "Привет, мир!"; // Строка
var text2 = text1.toUpperCase(); // text2 к text1, преобразованный в верхний

Строка преобразуется в нижний регистр с помощью toLowerCase().

Пример:

var text1 = "Привет, мир!"; // Строка
var text2 = text1.toLowerCase(); // text2 к text1, преобразованный в нижний

📋 #JavaScript #Совет
▬▬▬▬▬▬▬▬
// How To WebDev

​🧾 Методы строк в JavaScript (часть 15)

Метод concat():

Метод concat() объединяет две или более строк.

Пример:

var text1 = "Привет";
var text2 = "Мир";
var text3 = text1.concat(" ", text2);

Этот concat() метод можно использовать вместо оператора плюс. Эти две строки делают то же самое.

Пример:

var text = "Привет" + " " + "Мир!";
var text = "Привет".concat(" ", "Мир!");

Все строковые методы возвращают новую строку. Они не изменяют исходную строку.
Формально сказано: строки неизменяемы: строки нельзя изменить, их можно только заменить.

📋 #JavaScript #Совет
▬▬▬▬▬▬▬▬
// How To WebDev

​🧾 Методы строк в JavaScript (часть 16)

Метод trim():

Метод trim() удаляет пробельные символы с обеих сторон строки:

Пример:

var str = " Привет, мир! ";
alert(str.trim());

Этот trim() метод не поддерживается в Internet Explorer 8 и ниже.

Если вам нужна поддержка IE 8, вы можете использовать replace() вместо этого регулярное выражение:

Пример:

var str = " Привет, мир! ";
alert(str.replace(/^[\s\uFEFF\xA0]+|[\s\uFEFF\xA0]+$/g, ''));

Вы также можете использовать решение замены выше, чтобы добавить функцию обрезки в JavaScript String.prototype:

Пример:

if (!String.prototype.trim) {
String.prototype.trim = function () {
return this.replace(/^[\s\uFEFF\xA0]+|[\s\uFEFF\xA0]+$/g, '');
};
}
var str = " Привет, мир! ";
alert(str.trim());

📋 #JavaScript #Совет
▬▬▬▬▬▬▬▬
// How To WebDev

​🧾 Как найти подстроку в строке в JavaScript?

Метод charAt возвращает символ по указанному индексу.

Метод includes проверяет, содержит ли строка переданную подстроку. Возвращается true либо false. Вторым параметром возможно передать индекс в строке, с которого надо начать поиск, но это необязательно.

Метод search проверяет, присутствует ли в строке переданное значение либо регулярное выражение и возвращает индекс начала совпадения. В случае, если переданное значение не найдено, возвращается -1.

📋 #JavaScript #Совет
▬▬▬▬▬▬▬▬
// How To WebDev