Давайте подумаем для чего могут пригодится объекты в языках программирования. Вот в частности языке JavaScript. До сегодняшнего урока мы очень часто с вами говорили такие термины как свойства, методы, не раз говорили объекты. Вот сейчас настало время разобраться что такое объекты, как можно создать объект, какие у него есть особенности, для чего вообще объекты нужны в языке JavaScript. Перед тем, как перейти к примерам и следующим слайдам презентации давайте представим ситуацию. Мы разрабатываем игру на языке JavaScript, игра должна заключатся в следующем: на странице рисуется космический корабль, который летает при зажатии клавиш на клавиатуре и вместе с космическим кораблем на странице летают астероиды. Задача сделать так, чтобы космический корабль уворачивался от астероидов. Каждый астероид он как бы движется с какой-то определенной скоростью, в каком-то направлении, у каждого астероида есть свои координаты «х» и «у», вектор движения, скорость. Вот нам получается каждую секунду, например, нужно бать и менять положение допустим 20 астероидов, нам нужно постоянно их перерисовывать, двигать их по текущему окну, чтобы игроку было интересней играть, чтобы астероиды были не статическими, а динамическими. Получается мы должны каким-то образом сохранить информацию о всех астероидах, которые есть на текущей странице и каждую секунду эту информацию обновлять, менять координаты этих астероидов. Как мы можем сохранить информацию о 20 астероидах? Мы можем создать массив координат «х» всех астероидов, потом второй массив для хранение координат «у» всех астероидов и еще один массив для того, чтобы хранить направление движения астероидов и еще один массив для того, чтобы сохранять скорость движения астероидов. Если мы хоти взять и пересчитать позицию первого астероида в нашей игре, мы должны из первого массива взять нулевой индекс – это координата «х» и второго массива нулевой индекс – это координата «у» из массива вектора движения – нулевой вектор – это будет направление нашего астероида. А потом нулевой элемент из последнего массива, там, где записана скорость. Из разных массивов поизвлекать разных значений по одному и тому же индексу. Сделать какие-то расчеты над этими значениями, изменить их в массивах и перерисовать астероид на новую позицию. И так сделать с каждым элементом, который есть у нас в массивах. Представьте какая каша будет творится у вас в JavaScript коде. У вас буде работа не с астероидами, как с отдельными сущностями, а с кучей различных массивов. Отдельный массив представляет «х» координаты, отдельный массив – «у» координаты. Если вы где-нибудь допустите ошибку и возьмете допустим из массива «х» координаты там нулевой элемент, а из массива «у» координат – пятый элемент, то вы будете редактировать отдельные сущности, один астероид и пятый астероид, вы возьмете их координаты, то есть в игре будет творится непонятно что. Сопровождать такой код, разрабатывать его будет очень неудобно. С помощью объектов вы можете сделать такую игру намного проще, намного понятней в разработке. Объекты позволяют вам из реальной жизни, из реальности перенести какие-то сущности в виртуальную реальность. То есть, вы можете сделать так, чтобы в вашем сценарии, в вашей игре была не куча массивов, а была куча объектов астероид, чтобы вы редактировали не по отдельности массив, а редактировали единую сущность, редактировали астероид. Вы создаете объект астероид, говорите, что у астероида есть свойство «х» координата, «у» координата, скорость движения и направление движения и вот этот вот объект дублируете 20 раз. И вместо того, чтобы манипулировать 4 массивами, вы манипулируете один массивом объектов, меняете позицию вот этого объекта, изменяя его только одного. То есть не обращайтесь к другим элементам, которые есть в массиве. Поменяли один элемент, взяли следующий, поменяли его, все свойства, которые нужно менять, все позиции, все элементы связаны с позицией и скоростью – они собраны в одну кучу. Они собраны в одну сущность, которая называется объект. Вот в этом уроке наша задача с вами научится создавать объекты, научится создавать свойства, методы в объектах, и освоить самые простые техники работы с объектами в JavaScript коде.

А теперь давайте посмотрим объекты на примере котиков. Более жизнерадостный объект. Значит, что такое объект? Объект – это составной тип данных, который меняет множество значений в единый модуль и позволяет сохранять и извлекать значения по их именам. Что-то подобное мы с вами смотрели, когда разбирали тему массивов. Мы создавали переменную и в этой переменной хранили несколько значений. Помните, массив содержал в себе 2, 3, 10 элементов и каждый элемент у нас хранился в массиве с использованием порядкового номера – нулевой элемент, первый, второй, третий, десятый. Вот объекты в JavaScript коде это по сути те же самые массивы. Это набор значений, которые находятся в едином модуле, но каждое значение вместо порядкового номера использует имя и если в массиве 0, 1, 2, 3 то в объекте – это свойства – firsName, LastName, age, то есть различные имена, которыми мы будем указывать к чему относится вот данные значения в объекте. Когда мы в JavaScript коде создаем массив – это обычно означает, что мы создаем массив как последовательность каких-то однотипных значений, например, массив с названием месяцев. Массив там, с какими-то цифрами, которые относятся к одному и тому же типу значений, а вот если мы создаем объект, то значение, которое создаются в объекте – они относятся к какой-то одной физической сущности. Вот, например, объект кот. Какие у нас есть свойства у кота? То есть какие у нас есть значение у кота, которые можно привязать к коту? У домашнего животного обычно есть кличка, есть порода, есть, например, цвет окраски этого животного, его возраст, его вес, там цвет допустим глаз, кончик хвоста. Куча различных значений, которые привязаны к одной сущности. Вот значения, которые хранятся в объекте – они называются свойства. Вот, например, у кота могут быть такие свойства как имя, порода, цвет, то, что мы перечислили и также у объектов есть такие значения как поведения. То есть в объекта кроме свойств, кроме характеристик есть еще какая-то функциональность, которая к этому объекту заложена. Вот, например, кот может сидеть, лежать, кушать, спать, мурчать, мяукать, прыгать у куча делать различных операций. Вот когда мы создаем объект и в объект помещаем значение 1 – они будут называться свойствами, когда мы в объект вместо значение функцию – эта функция будет называться методом. Значит у объекта есть характеристики в виде свойств и поведение в виде методов. Если вы хотите создать объект в JavaScript коде, вы может пользоваться различными техниками. Одна из техник показана во второй части этого слайда. Мы можем создать переменную вот, например, var cat. Создали переменную с именем cat и в эту переменную вот в фигурных скобках, блоке инициализатора указываем из каких свойств и методов будет состоять объект. Вот name – это означает что для объекта cat мы добавляем свойство name, в котором будет хранится значение «Мурчик», потом breed, то есть порода – «бурмис», цвет – «white », возраст – «3», «weight» - «3,5». То есть получается вот мы задали свойства, которые будут находится в этом объекте. Ниже мы указываем какие есть методы в этом объекте, то есть что он умеет делать. Кот умеет сидеть – и вот операция, которая должна будет выполняться, если мы попросим кота сидеть. Кот умеет ходить – go. Вот функция, которая запускается если мы запустим метод go. То есть это вот метод go, а эта функция, которая находится в свойстве go. Eat – это у нас метод, который заставляет кота есть. Мы видим, что сейчас у кота есть набор свойств и методов, набор значений и какого-то поведения.

Давайте сейчас перейдем в Visual Studio и попробуем на примерах как можно создавать объекты, как можно их настраивать и использовать. Есть несколько способов создания объектов и сейчас мы эти способы с вами разберем. Первый способ создать объект – это использовать литерал фигурные скобки. Вот на 20 строке создается переменная с именем instance и в эту переменную записывается объект состоящий из двух свойств – из свойства property «а» и значение 22, и property «b» со значением 444. Каждое свойство, которое задается объекту должно быть разделено запятой, каждое свойство должно быть представлено ключом и значение. Ключ – это то, что идет до двоеточия – property «а» – это по сути имя свойства, а после двоеточия идет значение, которое будет присвоено этому свойству. И вот сейчас в этом объекте находится два свойства – property «а», property «b». Для того, чтобы получить доступ к свойствам и методам, которые мы создавали в объектах, нам нужно использовать оператор «.». На 23 строке в тело документа мы выводим текст – instance property «а», а потом наводим значение, которое находится в нас в объекте instance. Видите, мы обращаемся – instance.property“a”, то есть оператор точка – он позволяет вытащить из объекта его состояние, поведение, то есть получить доступ к тому, что мы создали внутри объекта. В Visual Studio большинство редакторов подсказывают вам, когда вы ставите точку, что именно находится в объекте. Вот в объекте есть наши два свойства property «а» и «b». Если вы видите такой синенький куб – это значение, которое находится в объекте. Если вы видите фиолетовые кубики – это означает, что это действия поведения. Мы сейчас на строке 20 создали объект только с двумя свойствами, вот эти свойства. Но почему-то у нас появились еще и дополнительные какие-то операции, а не методы, которые мы не создавали. Детальней о том, как создаются эти методы, почему они появляются – мы рассматриваем на следующем курсе, сейчас мы не будем разбирать для чего нужны эти методы. То есть, просто знайте, что любой объект, который вы создаете в JavaScript коде – он всегда получает какую-то базовую функциональность. Даже если вы создаете пустой объект и в нем нет ни одного свойства и не одного метода, который вы могли бы задать. Этот пустой объект все равно содержит в себе поведение, которое было получено от родительских объектов. Всегда есть главный объект от которого мы получаем функциональность. Для большинство разработчиков, если вы работали в Java или в C# – вы знаете, что у любого объекта, созданного в коде, всегда есть родительский какой-то класс. Вот в JavaScript по сути происходит что-то подобное – у любого созданного объекта, даже пустого, есть созданный родитель, прототип из которого получается ряд функциональности. Вот допустим метод ToString, который этому объекту превратится в строковое представление. Но о б этому мы поговорим с вами позже. Мы в итоге через оператор точка обращаемся к свойству «a» и выводим значение, из свойства «a» у нас со значение 202, свойство «b», на строке 24, значение 444. Вывели значение, которые лежат в объекте, а теперь мы меняем значение свойства из-за объекта instance. На 29 строке обращаемся к объекту instance, извлекаем свойство property «a», и этому свойству присваиваем новое значение -333. До этого было 222, теперь 333. Обращаться к объектам можно точно так же, как и к массивам. Помните, что на прошлых уроках, мы разбирая массивы по сути разбирали с вами этот пример. На 30 строке мы обращаемся instance.property «b», то есть мы указываем в квадратных скобочках индекс, который является не целочисленным значением, а именем свойства нашего объекта и говорим, что свойство «b» нашего объекта теперь будет иметь новое значение – 555. Вот этими мы еще как бы подтверждаем, что для JavaScript кода, для интерпретатора объекты и массивы – это похожие сущности. На самом деле в JavaScript нет особой разницы между объектом и массивом. Та в оперативной памяти браузер хранит эти типы данных практически по одному и тому же принципу и объекты – это у нас набор значений именованных, а массивы – это набор значений пронумерованных. Поменяли свойства – на 29-30 строчке двумя способами, а потом эти свойства отобразили – свойство «а» и свойство «b». Давайте сейчас посмотрим, что получается. Вот наши первые два свойства – вот свойства после изменений. Видите, изменения вступили в силу, когда мы выполнили две абсолютно идентичны с 23-24 строчкой кода, видите, что результат уже был совсем другой – 333 – 555. Обратите внимание, что происходит, когда на 38 строке мы просто берем и выводим объект instance в документ. Видите, какое значение отображает нам браузер – object-object. Это связано с тем, что браузеру не понятно, что сейчас нужно делать с этим Instance. Instance – заполнен какими-то свойствами, то есть там много находится значений. Не единое значение, как например в переменной типа number, а куча мелких свойств. И получается, что из-за того, что браузеру не понятно, что вывести – он вызывает специальную функцию ToString. Помните, мы в подсказке только что видели, вот получается, что вот здесь вызывается автоматически функция ToString, точнее метод ToString и просто объект превращается в какое-то строковое представление. По умолчанию, все объекты в строковом представлении выглядит вот так. Выглядит как object-object. Давайте еще посмотрим, как отладчик покажет нам объект. Мы сейчас поставим breakpoint на 23 строке, тогда, когда мы обращаемся к свойству «a» и посмотрим, что из себя будет представлять instance. Если мы наведем сейчас на переменную instance, то видите, как отображает нам информацию Google Chrome? Она указывает, что это объект, в этом объекте есть свойство «a» и свойство «b» с двумя значениями. Еще есть свойство proto, это по сути есть тот родительский класс, вот отсюда мы берем именно функции ToString, там valueOff. Вот все функции находятся здесь, это мы сейчас с вами разбирать не будет, это уже такая продвинутая тема использования прототипов, это мы с вами посмотрим немного позже. Ну, вы видите, что отладчик в Chrome, Firefox, в Internet Explorer, отладчик всегда будет показывать вам из чего состоит объект. Какие у объекта есть свойства, какие у объекта есть методы.

В следующем примере мы разберем немного другой способ создания объектов. Создание объектов через конструктор. В JavaScript есть специальная функция конструктор, которая умеет создавать пустые объекты. Ну на самом деле не пустые объекты, а объекты в которых есть те стандартные функции, которые мы видели в подсказке. На 24 строке мы создаем переменную point и с помощью функции-конструктора newObject, говорим, что мы создаем новый, пустой объект. И вот здесь находится пустой объект, который осталось только заполнить свойствами и задать этим свойствам значение. На 28 строке мы обращаемся к объекту point, и говорим, что свойству «х» мы хотим присвоить значение 10. Так как объект point пустой и свойства «х» у него нету, такое выражение – оно добавляет к объекту свойство «х» и после 28 строке, на 29 строке в объекте point появится какие-то данные, появится значения «х». На 31 строке к объекту point мы добавим свойство «у» и значение добавим этому 15. И обратите еще внимание на 34 строку. Мы обращаемся к объекту point как к свойству «f», которого там нету. После выполнения этой строчки, свойство «f» появится в объекте point. Но обратите внимание, что в это свойство мы уже записываем не значение, а функцию и соответственно это свойство будет содержать в себе какое-то действие, поведение, поэтому теперь свойство «f» правильно называть не свойством, а методом, потому что это поведение, которое хранится в объекте. Смотрите, что будет делать это поведение. На 35 строке мы отображаем point «х» и point «у», то есть мы выводим информацию о текущем объекте, показываем, какие значения хранятся в этом объекте. И вот на 38 строке, теперь мы берем point, вызываем на нем метод «f», и видим значение «х=10, у =15». Если мы возьмем и поменяем значение, скажем point.х=20, и скажем заново, чтобы поинт показал какие значения координат они имеет, то мы увидим второй результат – 20, 15. Получается, что мы можем создать объект, а потом этим объектом начать манипулировать, менять его свойства, вызвать его методы, и наш код будет достаточно простым в сопровождении, нам не придется постоянно писать больших объемов инструкций, мы будем пользоваться уже готовыми свойствами, привязанными к объекту, готовыми методами и так далее.

В следующем пример мы еще раз разберем как создать объект, но уже на примере с более понятными именами. На строке 17 мы создаем переменную с именем person и эту переменную инициализируем как объект. Объект, который мы сейчас создаем, будет содержать в себе 4 свойства. Это свойство firstName, то есть имя, lastName – фамилия, возраст – age и свойство occupation, то есть – деятельность. Создали вот объект с 4 свойствами. Теперь 25 строчка, мы отображаем на экран свойство firstName, а потом свойство lastName. То есть выводим Jim Rainbow. А на строке 28 мы меняем значение свойства age, просто для примере, естественно это можно было и не делать. Берем person, обращаемся к свойстве age, и значение, которое было изначально – 30, меняем на новое значение – 25. И на 29 строке выводим сообщение хранящиеся в объекте person, в свойстве age. Вот вывели имя, фамилию – Jim Rainbow и вывели его возраст – 25 лет. И для того, чтобы убедится в подсказке, видите – все свойства, которые мы создали - вот они отображаются у нас в подсказке Visual Studio.

В следующем примере мы увидим, что в объекте могут находится вложенные объекты. Например, сейчас на 16 строке мы создаем объект human, который будет содержать в себе имя, фамилию, возраст, но теперь occupation, то есть место работы, деятельность этого объекта – это будет не проcто строковым объектом, а вложенным объектом. Видите, occupation – это еще один объект, который состоит из двух свойств – из свойства company и свойства position. Теперь посмотрите на то как мы обращаемся к свойствам, которые находятся в объекте human и свойством, которое находится во вложенном объекте human. Вот 28-29 строчка – human.firstName, human.secondName мы выводим вот два вот этих свойства, потом выводим свойство age. На строке 33-34, чтобы обратится к этим свойствам, нам приходится из human вытащить свойство occupation, а из вот этого объекта, который лежит в свойстве occupation – вытащить свойство company, а потом свойство position. Давайте проверим как оно будет работать. Вот мы вывели имя, фамилию, возраст, компанию и должность этого объекта.

В следующем примере мы разберем тоже самое. Как можно сделать, чтобы в объекте находился вложенный объект, но при этом немножко другой синтаксис определения объектов рассмотрим. Мы будем использовать не блок инициализатора, ни фигурные скобки, а конструктор object. На 13 строке human – это пустой объект. Заполняем этот пустой объект тремя свойствами – firstName, secondName, age, а потом на 20 строчке указываем, что у human есть свойство occupation и в этом свойстве находится новый, пустой объект. После того, как мы создали новый и пустой объект – 22 строчка в этот пустой объект записываем свойство company и position. То есть вот этот блок кода ничем не отличается от этого блока кода, просто мы используем немножко другой синтаксис, немножко другой подход в создании объектов. Я в принципе предпочитаю вот этот вариант использования — вот такой нотации, ну вы можете использовать и такой подход.

Теперь давайте подробней разберем что такое методы, как используются методы в объектах. Мы уже с вами обсуждали, что когда мы создаем функцию, если эта функция просто создана в нашем коде – она называется функцией. Но когда эту функцию мы помещаем в объект – эту функцию правильно называть методом, тогда функция становится частью объекта. Вот сейчас на строке 16 мы создаем объект human, заполняем его свойствами и на строчке 23 создаем метод show, который будет принадлежать этому объекту human. Метод show – это по сути свойство, куда мы записали функцию. Тоже помните, мы смотрели с вами недавно как создаются функции-литералы. Мы создаем анонимную функцию и записываем эту функцию в переменную. То есть вот переменная show, которая будет в себе содержать функцию. И что делает наша функция в переменной show? Она обращается documentwrite и отображает this.firstName. Зачем нам нужно вот это ключевое слово this. Мы с вами его еще не разу не встречали. Ключевое слово this означает, что мы обращаемся к текущему объекту, вот если посмотреть – контекст выполнения текущего кода. Мы находимся сейчас вот в данном объекте и получается, что ключевое слово this дает нам возможность обратится к текущему объекту. Через ключевое слово this мы получаем объект human не указывая его явно имя и указываем, что берем свойство firstName из human. То есть эта запись обращается к текущему объекту, к свойству firstName. Здесь мы обращаемся к свойству secondName, свойству age и свойству occupation. Если у нас в приложении будет два объекта human, human 1и human2, то одна и та же функция может использоваться для двух этих объектов. То есть если мы эту функцию помещаем в первый объект, то она будет выводить свойства первого объекта, потому что когда функция находится в первом объекте – this будет ссылаться на первый объект. А когда эту же функцию мы помещаем во второй объект, хюмент2222222222, то ключевое слово this во втором объекте будет ссылаться на второй объект. Соответственно свойства firstName и secondName и прочее свойства будут уже браться из второго объекта. Когда вы создаете объекты и если вам внутри методов в этих объектов необходимо получить доступ к свойствам объектов, всегда используйте ключевое слово this. Если вы напишете firstName вот таким вот способом, то вы будете обращается не к этому объекту, не к объекту, в котором вы находитесь, а к глобальному объекту. Подробней о глобальном объекте мы с вами поговорим на курсе JavaScript Advanced, когда уже непосредственно будем работать с браузером. Сейчас мы изучаем ядро языка, сейчас мы изучаем синтаксис, а уже что такое глобальный объект, как с ним работать, мы будем смотреть с вами дальше. Ну и на 31 строке у нас есть еще отдельно метод changeWork. Если это метод show, понятно, что он делает – показывает информацию в объекте, то этот метод меняем работу, то есть, где работает этот человек. В метод changeWork мы передаем значение occupation. Если здесь у нас метод без параметров, то метод на 31 строке принимает один параметр. Этот принятый параметр мы используем как новый параметр для свойства occupation. Ну вот мы вызвали show, показали свойства, объект показали его имя, фамилию, возраст, потом мы вызвали на объекте human changeWork и сказали, что этот объект должен сменить место работы и вот новое его место работы. Потом вызвали show и заново показали те свойства, которые вызвали раньше. Но из-за того, что мы меняли работу, на строке 42 по-другому уже отображается информация. До смены работы и после смены работы.

Следующий пример показывает, как можно создавать методы не внутри самой инициализации объекта, вот в №6 примере объекты создавались в блоке инициализации объекта. Вот наша инициализация идет, вот вы увидите, что методы можно свернуть, вот что один метод, вот еще один метод – они находятся у нас в определении самого объекта. Второй вариант создания методов – это определить отдельно объект, а потом уже добавить методы по отдельности. Вот мы создали объект build – пустой, в котором ничего нету, а потом определили в этом объекте метод create roof, firstFloor, secondFloor, basement. То есть, создать крышу, первый этаж, второй этаж и подвал. Каждом из этих методов мы в тело документа отображаем картинку, Roof.gif, FirstFloor.gif и так далее. Создав этот объект, мы с помощью этого объекта строителя, строим дом. Вот мы создаем крышу, потом строим второй этаж, первый этаж и подвал. Пусть вас не смущает то, что функция вызывается в противоположном порядке. Если бы мы строили в реальной жизни, мы сначала строили б подвал, то есть фундамент уложили, а потом уже остальное. Здесь нам нужно строить это все в обратную строну, потому что иначе у нас неправильно нарисуется наш домик. Вот наша крыша, которую мы вначале вывели, потом второй этаж, первый этаж и подвал. В языке JavaScript при роботе с объектами есть дополнительные ключевые слова, дополнительные конструкции, которые мы не разбирали, так как смысл их разбирать есть только после ознакомления с объектами. Первое, что мы разберем – это конструкцию – цикл for_in, с помощью которого мы можем получить доступ ко всем свойствам, которые находятся в объекте. Вот сейчас на 17 строке мы создаем объект house, который состоит из крыши, второго этажа, первого этажа, basement, и адреса. То есть, где этот дом вообще находится. Вот объект дом, состоящий из 5 свойств. На строке 26 мы запускаем цикл for, но запускаем его не обычным способом, как мы делали это на предыдущих занятиях, а используем в этом цикле ключевое слово int. Запускаем for element in house. Можем для того, чтобы было понятно переименовать element на prop, property. property в переводе с английского – свойства. То есть мы запускаем цикл floor для свойств в объекте house. На каждой итерации, вот здесь в этой переменной property будет находится имя свойства, которое находится в объекте house. На первой итерации property это будет roof, на второй итерации property – это secondFloor, потом firstFloor, basement и address. Вот поочередно значение из объектов будут записаны в это свойство. А на 27 строке мы возьмем объект house и в качестве параметра в индекс, индексатор этого объекта запишем имя свойства. То есть на самом деле вместо property здесь будет находится на первой итерации roof, на второй итерации другая строчка, получается с помощью цикла for ин мы можем просто вытащить все свойства, которые находятся внутри объекта. Давайте посмотри, что у нас получится. Видите, мы перебрали объект и вывели всю информацию, которая заложена в объекте. Для примера мы можем воспользоваться немножко другим подходом. Мы можем, например, не house перебрать, который мы создали, а другой объект, который есть у браузера, это объект навигатор, это одно из свойств глобального объекта окна браузера. С помощью навигатора мы можем узнать, что за браузер сейчас просматривает текущую страницу. Давайте посмотрим, что лежит в объекте навигатор? Только мы не везде его прописали, навигатор мы здесь установим, здесь, и установим, что у нас идет перенос на новую строку, чтобы увидеть нормально значение. И добавим еще в начало вот такую запись. Мы установим свойство, которое мы берем, + знак равно, чтобы мы увидели имя свойства из объекта навигатор, а потом значение этого свойства, а потом на каждой строчки мы выводили вот такую информацию. Вот видите, что лежит в навигаторе, есть свойство geolocation, это HTML5 фича, позволяющая определить текущее месторасположение пользователя, вот есть, например, производитель текущего браузера, Google Inc. Есть продукт geko, это версия движка, которую мы используем, там различные свойства, например, user_agent, это строка, которую этот браузер отправляет на сервер, чтоб представится серверу кто он есть. Язык, который использует браузер. Вот с помощью цикла for_in, мы извлеки информацию из объекта навигатор. Объект навигатор, который предоставляет сведения о текущем браузере, который зашел на страницу.

Следующий пример покажет нам как с помощью одного ключевого слова мы можем проверять наличие свойств в объекте. На строке 14 создается объект house и этот объект заполняется 5 свойствами – roof, secondFloor, firstFloor, basement и address, как и в предыдущем примере. Видите, на 16 строке у нас есть свойство thirdFloor, которое у нас отсутствует, то есть мы его не создавали специально. На строке 26 мы отображаем в начале в тело документа выводим крышу, а потом на строке 29 делаем вот такую проверку. Если свойство firstFloor находится внутри объекта house, то есть ели этот объект содержит свойство с таким именем, то тогда условие выполняется и на 30 строке мы рисуем эту строчку. Выводим house thirdFloor. Но если свойство thirdFloor не существует, то тогда 33 строка, мы вместо 3 этажа рисуем второй этаж, ну и до конца дальше, до конца сценария отображаем оставшиеся свойства, которые лежат в объекте. Сути этого примера показать ключевое слово int, которое мы можем применять для того, чтобы проверить наличие в объекте определенного свойства, чтобы работать с этим свойством только, если оно присутствует. Так как вы понимаете, что JavaScript – это динамический язык, свойство может быть добавлено в объект, а может быть не добавлено, может мы не выполнили ту строку, которая инициализировала свойство. Также свойство мы можем удалять. В следующем пример мы можем увидеть, как свойства могут быть удалены из объекта. Давайте запустим сейчас этот пример. Видите, так как мы не нашли 3 этажа, мы нарисовали еще раз второй. То есть условие действительно не сработало, мы перешли в блок else и нарисовали повторно secondFloor, вот два этажа одинаково.

В следующем пример показано использование ключевого слова делит. С его помощью мы можем из объекта удалить свойство. В JavaScript мы можем динамически создавать свойства в объектах и также их удалять из объекта. Вот сейчас мы заполнили объект, как и в предыдущем примере, а на 27 строке мы делаем проверку. Если свойство secondFloor существует в объекте house, то строка 29 мы с помощью ключевого слова delete, мы удаляем secondFloor из объекта house. Синтаксис удаления свойства заключается в следующем. Мы пишем ключевое слово, ставим пробел, потом указываем объект и свойство и метод, который нас не интересует в этом объекте, который мы собираемся убрать. Вот на 29 строке у нас удаляется свойство secondFloor. Чтобы проверить действительно ли оно удалилось, 32 строчка мы запускаем цикл for_in и все что есть в объекте house выводим на экран. Получается, что мы увидим, что второй этаж нарисовался и дом получился одноэтажным. Видите, одноэтажный дом, потому что второй этаж был удален ключевым словом delete. С помощью ключевого слова delete мы так же можем удалять элементы из массивов, так как массивы и объекты – это одно и тоже самое – то можно выполнить вот такую операцию. На строке 14 мы создаем массив, заполняем его 8мью значениями, отображаем все эти значения на экран, потом строка 18, мы спрашиваем у пользователя какое из значений в массиве собирается пользователь удалить, то есть просим пользователя ввести индекс, а потом на 21 строке с помощью delete array по индексу мы удаляем отдельный элемент, который находится вот в этом массиве. И после удаления отображаем массив, показываем, что произошло. МЫ говорим, например, что хотим удалить 4 элемент. Ок. И вот у нас получился массив, в которого нету 4 элемента, то есть тут у нас сейчас значение undefined, данных там нету.

Последний пример, который мы разбираем в этом примере – это ключевое слово with. Я рекомендую не использовать это ключевое слово в коде, но так как оно существует в языке JavaScript, мы с ним познакомимся, но лучше не применяйте их в своих сценариях. С помощью ключевого слова with мы можем временно поменять область видимости в участке кода и сделать вот такую операцию, на строке 17 мы создали объект house, а на строке 25 мы сказали, что хотим сделать так, чтобы все свойства объекта house в данной области, то есть в блоке with, между этими фигурными скобами, чтобы все свойства объекта house стали частью глобального объекта, чтобы нам не приходилось писать код house.roof, house.secondFloor. Видите, как мы обращаемся к свойству roof. Просто пишем roof и по сути это идет обращение к свойствам, которые лежат в этом объекте. Если изначально нам нужно было обращаться house.roof, то благодаря ключевому слову with, свойства, которые находятся в объекте временно становятся глобальными. Но это может привезти к непредвиденному поведению и неоднозначному выполнению кода. Рекомендую подробно разобрать об использовании ключевого слова width и о такой фичи, которая появилась в последней версии ….script, 5, о возможности включить строгий режим, stringmode. Когда вы определяете строгий режим в своем сценарии, это добавляет дополнительную проверку браузеру и браузер запрещает вам выполнять некоторые не очень хорошие практики в написании JavaScript кода. Если вы напишете вначале useString, это активирует строгий режим для текущего документа и браузер запретит вам, интерпретатор не будет использовать ключевое слово width, другие, не очень хорошие техники браузер просто не будет выполнять такой код. Если мы сейчас запустим пример, то ничего не отобразится в документе, а если мы нажмем на f12, то в developertools, в блоке консоль мы увидим ошибку, что режим stringMode у нас недопустимо использовать ключевое слово width. Почитайте дополнительно о всех ошибках, которые вы можете получить при использовании useStirng на странице вот этого сайта.

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

Продолжением этого курса является JavaScript углубленный, JavaScript Advanced, в этом курсе вы больше уже разберете разработку клиентского JavaScript. В следующем курсе вы будете работать уже с элементами, которые загружены в браузер, будете работать с HTML разметкой, работать с самим браузером. Первый курс – эго задача была научить вас работать с самим JavaScript кодом, изучить ядро языка JavaScript, узнать, что такое переменная, циклы, условия, объекты. Я надеюсь, что после этого курса вы теперь уверенней можете работать с основными синтаксическими единицами языка JavaScript, вы теперь можете создать простейшие приложения, на языке JavaScript. Спасибо за внимание.