​🧾 Объекты в JavaScript (часть 3)

Определение объекта

Ниже, определяется (создается) JavaScript объект с помощью объекта литералов:

var person = {firstName:"Щипунов", lastName:"Андрей", age:50, eyeColor:"зеленый"};

Пробелы и переносы строк не важны. Определение объекта может занимать несколько строк:

var person = {
firstName: "Щипунов",
lastName: "Андрей",
age: 50,
eyeColor: "зеленый"
};

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

​🧾 Объекты в JavaScript (часть 4)

Свойства объекта

Пара Имя: Значения в JavaScript объектах, называются свойствами:

firstName Щипунов
lastName Андрей
age 50
eyeColor зеленый

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

​🧾 Объекты в JavaScript (часть 5)

Доступ к свойствам объекта

Вы можете получить доступ к свойствам объекта двумя способами:

objectName.propertyName

или,

objectName["propertyName"]

Пример1:

person.lastName;

Пример2:

person["lastName"];

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

​🧾 Объекты в JavaScript (часть 6)

Методы объекта

У объектов также, могут быть методы.

Методы - это действия, которые выполняются объектами.

Методы хранятся в свойствах как определения функций.

firstName Щипунов
lastName Андрей
age 50
eyeColor зеленый
fullName function() {return this.firstName + " " + this.lastName;}

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

​🧾 Объекты в JavaScript (часть 7)

Метод - это функция, хранящаяся как свойство.

Пример:

var person = {
firstName: "Щипунов",
lastName : "Андрей",
id : 5566,
fullName : function() {
return this.firstName + " " + this.lastName;
}
};

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

​🧾 Объекты в JavaScript (часть 8)

Ключевое слово this

В определении функции this относится к владельцу" функции.

В приведенном выше примере this является объектом person, которому "принадлежит" функция fullName.

Другими словами, this.firstName означает firstName, свойство этого объекта.

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

​🧾 Объекты в JavaScript (часть 9)

Доступ к методам объекта

Вы получаете доступ к методу объекта со следующим синтаксисом:

objectName.methodName()

Пример:

name = person.fullName();

Если вы обращаетесь к методу без скобок (), он вернет определение функции:

name = person.fullName;

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

​🧾 Объекты в JavaScript (финал)

Не объявляйте строки, числа и логические значения как объекты!

Когда JavaScript переменная объявляется с ключевым словом "new", переменная создается как объект.

Объявляет x как строковый объект:

var x = new String(); //

Объявляет x как числовой объект:

var y = new Number(); //

Объявляет z как логический объект:

var z = new Boolean(); //

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

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

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

События HTML - это "вещи", которые происходят с элементами HTML.

Когда JavaScript используется на HTML страницах, JavaScript может "реагировать" на эти события.

HTML события

Событие HTML может быть чем-то, что делает браузер или пользователь.

Вот несколько примеров HTML событий:

Веб страница HTML завершила загрузку;

Поле ввода HTML было изменено;

Была нажата кнопка HTML;

События случаются тогда, когда вы захотите что-то сделать.

JavaScript позволяет выполнять код при обнаружении событий.

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

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

HTML позволяет добавлять атрибуты обработчика событий JavaScript кода в элементы HTML.

В одинарных кавычках:

element event='some JavaScript'

С двойными кавычками:

element event="some JavaScript"

В следующем примере onclick к button элементу добавляется атрибут (с кодом):

button onclick="document.getElementById('demo').innerHTML = Date()">Время?/button

В приведенном выше примере JavaScript код изменяет содержимое элемента в id="demo".

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

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

В следующем примере код изменяет содержимое своего собственного элемента (используя this.innerHTML).

Пример:

button onclick="this.innerHTML = Date()">Время?/button

Код JavaScript часто состоит из нескольких строк. Чаще всего можно увидеть функции вызова атрибутов событий.

Пример:

button onclick="displayDate()">Время?/button

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

​🧾 События в 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