Стать программистом. Часть 24. Основы JavaScript для абсолютных новичков!

Доброго времени суток, друзья! Всех с праздником! Всем мужества и силушки богатырской!

В нашем прошлом уроке мы с Вами начали исследования в области встроенных функций и объектов в JavaScript'e. Мы познакомились с такими встроенными функциями как alert, confirm, prompt, setTimeout, setInterval и clearInterval. Каждую из этих встроенных функций мы изучили и привели примеры с их практическим использованием. Кроме того, теперь мы знаем, что прежде чем выдумывать что-то свое, нам сначала нужно убедиться нет ли того, что нам требуется уже в самом JavaScript'e.

Встроенные функции, которые мы использовали в прошлом уроке как Вы уже догадались не являются единственными. Кроме них JavaScript поддерживает еще огромное количество других функций, которые призваны помочь программистам в решении поставленных перед ними задач. Если подытожить предыдущий урок, то суть работы со встроенными функциями можно уложить в несколько пунктов:

Все встроенные функции Именованные, что (как мы знаем из прошлых уроков) позволяет нам обратиться к ним в абсолютно любом месте кода без каких-либо ограничений.
Так-как все функции Именованные, мы всегда можем найти нужную нам информацию в документации по ИМЕНИ этой функции.

Итак, надеюсь, большинство моментов в работе о встроенными функциями Вам были понятны. Если все-таки какие-то вопросы остались - добро пожаловать в комментарии! Ну а мы двигаемся дальше.

Урок 24. Встроенные функции и Объекты, Часть II. Глобальные функции и переменные.

В нашем сегодняшнем уроке мы с Вами начинаем рассматривать встроенные Объекты. Сама тема Objects (Объекты) рассматривалась нами в Уроке № 22, где аналогично теме **Functions (Функции) мы в своих примерах пользовались объектами, которые создали сами. JavaScript смело можно называть языком объектов. Внутри этого языка существует строгая иерархическая система объектов, свойства и методы которых весьма полезны, а в некоторых случаях просто незаменимы.

Как я уже говорил, внутри JavaScript'a существует строгая иерархическая система встроенных объектов. Что это значит? Это значит, что есть один главный объект, внутри которого расположились другие встроенные объекты, внутри которых в свою очередь могут располагаться еще объекты. Такая себе вложенная пирамидальная структура встроенных объектов. Какой же встроенный объект является главным в JavaScript'e? Этот объект - window (окно)

Встроенный объект - window.

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

Итак, мы открыли окно нашего браузера и захотели посмотреть какова ширина и высота рабочей области этого окна. Вот этой:

Из информации сверху мы знаем, что за хранение любой информации об окне браузера отвечает объект window, значит логично предположить, что какието из свойств этого объекта смогу нам помочь. Это действительно так. В объекте window существуют два свойства для установления этих величин. Эти innerWidth (внутренняя ширина) и innerHeight (внутренняя высота). Теперь, когда мы знаем названия этих свойств, мы можем посмотреть какие значения в них лежат:

/* Объект window */

alert('ширина ' + window.innerWidth);

alert('высота ' + window.innerHeight);

Работа со свойствами встроенных объектов почти ничем не отличается от работы с объектами, которые мы создаем сами. Для доступа к какому-либо свойству мы сначала обращаемся к имени объекта (красная линия) и затем через точку (красная стрелочка) обращаемся к имени интересующего нас свойства. Внутри свойств innerWidth и innerHeight всегда лежат цифры, поэтому записи вида 'ширина ' + window.innerWidth или 'высота ' + window.innerHeight будут ничем иным как попытка сложить строку и число, соответственно (как мы знаем из прошлых уроков) результатом такой операции будет строка, склеенная из двух участников. Посмотрим на результат:

Как видим мы получили данные о ширине и высоте рабочей области конкретного окна браузера. Кроме того, значения свойств innerWidth и innerHeight динамические. То есть если вы измените окно браузера (растяните его, сузите или развернете на весь экран) и снова исполните код, то заметите что цифры в значении эти свойств будут уже совсем другими. То есть они меняются одновременно с фактическим изменением размера самого окна.

Это был простой, но показательный пример того, как работает встроенный объект window. Что же касается его главенствующей позиции, то показателем этого является тот факт, что все остальные встроенные объекты и функции располагаются внутри этого объекта, как его свойства либо как его методы. Например, уже известная нам функция alert или любая другая встроенная функция на самом деле является методом объекта window, и если мы к примеру решим обратиться к эти функциям как к методам, то мы получим поведение аналогичное тому, какое получаем когда обращаемся к этим функция напрямую по имени. Пример:

/* Объект window */

window.alert('ширина ' + window.innerWidth);

window.confirm('высота ' + window.innerHeight);

window.prompt('ухты! на самом деле я метод объекта window');

Как мы можем видеть, здесь мы обращаемся к функциям, к которым ранее обращались напрямую, как к методам объекта window (чем они по сути и являются). И результат исполнения такого кода...

...абсолютно идентичен тому, как если бы мы написали:

/* Объект window */
alert('ширина ' + window.innerWidth);
confirm('высота ' + window.innerHeight);
prompt('ухты! на самом деле я метод объекта window');

Более того. Когда мы в предыдущих уроках создавали с вами именованную функцию или переменную, то такая функция или переменная сразу же становится методом и свойством объекта window соответственно. Пример:

/* Объект window */
var a = 3;
function message(text) {
    alert(text);
}

alert(window.a);
alert(window.message);

Обратите внимание что при создании переменной a равно как и при создании функции message
мы не указываем явным образом, что переменная должна быть свойством объекта window, а функция - его методом. Тем не менее, в наших записях alert(window.a); и alert(window.message); мы обращаемся к ним именно как к свойству и методу. Посмотрим каким будет результат:

Как видим сообщения вывели нам значения нашей переменной и шаблон нашей функции. То есть каждый раз, когда вы таким образом создаете функцию или переменную, JavaScript неявно от нас присваивает переменную как свойство объекту window а, именованную функцию - как метод.

Такие переменный или функции (неважно встроенные или созданные программистом), к которым можно получить доступ через объект window используя всего ОДНУ точку называются Глобальными функциями и Глобальными переменными. Именно это их свойство и позволяет нам обращаться к ним из любого места в коде и производить какие-то манипуляции.

Все выше сказанное применимо так же и к созданию сложносоставных переменных типа Объект или Массив:

/* Объект window */

var man = {
    friends: ['Дон Хуан', 'Дон Хенаро', 'Карлитос']
};

var professions = ['травник', 'изобретатель', 'мирный воин'];

alert(window.man);
alert(window.professions);

И объект man и массив professions аналогично предыдущему пример станут свойствами глобального объекта window. И так как к ним можно получить доступ через этот объект используя всего одну точку, то и объект man и массив professions будут являться Глобальными.

В завершении исследования объекта window хочется добавить, что свойств и методов, содержащихся в нем, присутствует огромное количество. Все их можно увидеть с помощью вкладки console в инструменте профилирования, который мы рассматривали ранее. Все что требуется - это открыть вкладку, ввести в нее название нашего объекта window и нажать "enter":

Весь этот длинный список свойств и методов лежит внутри главного объекта window. Логично предположить, что мы не станем рассматривать каждый из них в рамках нашего курса. Однако некоторые из них мы все же будем использовать в нашей дальнейшей практике.

А на сегодня все.

Ссылки на предыдущие уроки:

var lessons = {
Урок_1 : "Урок 1 - Окружение.",
Урок_2 : "Урок 2 - Некоторые особенности синтаксиса.",
Урок_3 : "Урок 3 - Переменные.",
Урок_4 : "Урок 4 - Типы переменных, как основа для их взаимодействия.",
Урок_5 : "Урок 5 - Операции с переменными одного типа.",
Урок_6 : "Урок 6 - Операции с переменными одного типа. Часть II.",
Урок_7 : "Урок 7 - Взаимодействие переменных с разными типами.",
Урок_8 : "Урок 8 - Взаимодействие переменных разного типа. часть II.",
Урок_9 : "Урок 9 - Взаимодействие переменных разного типа. Часть III.",
Урок_10 : "Урок 10 - Другие возможные взаимодействия между переменными.",
Урок_11 : "Урок 11 - Другие возможные взаимодействия между переменными. Часть II.",
Урок_12 : "Урок 12 - Другие возможные взаимодействия между переменными. Операторы присваивания.",
Урок_13 : "Урок 13 - Другие возможные взаимодействия между переменными. Операторы сравнения.",
Урок_14 : "Урок 14 - Сложные переменные. Array и Object.",
Урок_15 : "Урок 15 - Условные операторы.",
Урок_16 : "Урок 16 - Циклы.",
Урок_17 : "Урок 17 - Циклы. Часть II.",
Урок_18 : "Урок 18 - Функции.",
Урок_19 : "Урок 19 - Функции. Часть II.",
Урок_20 : "Урок 20 - Профилирование. Функции, часть III.",
Урок_21 : "Урок 21 - Функции, Часть IV. Аргументы.",
Урок_22 : "Урок 22 - Objects (Объекты)." ,
Урок_23 : "Урок 23 - Встроенные функции и объекты." ,
}