Функции, объекты, инфраструктура браузера в JavaScript презентация

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

Функции в JavaScript
Функции в JavaScript еще один из базовых типов, функции можно присваивать переменным, а можно вызывать и получать результат их работы.

Функции в JavaScript
Функции в JavaScript еще один из базовых типов, функции можно присваивать переменным, а можно вызывать и получать результат их работы. Запись без круглых скобок «скопирует» функцию в другую переменную, запись с круглыми скобками -

Основной отличительный знак функций – круглые скобки: alert() Круглые скобки делают сразу два дела: говорят браузеру что мы хотим выполнить функцию имя которой стоит перед скобками, и позволяет передать функции параметры (если они необходимы для работы функции):
alert(“Сообщение на экран”);
Имя функции которую вызываем (выполняем).
Скобки, признак того, что мы именно вызываем функцию.
Параметры функции (данные которые функция обрабатывает).
Функции

Параметры функции (аргументы) – такие себе «переменные» которые передаются функции при каждом вызове, и могут влиять на результат её работы.
Возвращаемое значение – возможность функции вернуть результат своей работы, при необходимости. Возврат делается оператором return.
Параметры функции и возвращаемое значение

Не обязательно передавать функции все параметры которые предусмотрены её заголовком, НО в таком случае
Параметры функции
Параметры внутри функции ведут себя как временные переменные, которые живут только пока функция выполняется, при старте им присваивается те значения которые переданы функции при вызове.

Параметры функции по умолчанию
ECMAScript-2015
Можно указывать параметры по умолчанию через равенство. Параметр по умолчанию используется при отсутствующем аргументе или равном undefined

Возвращаемое значение
Возвращаемое значение возможность функции вернуть результаты своей работы, при помощи оператора return, функция может не возвращать результат.

Сокращенный синтаксис функций
ECMAScript-2015
Сокращенный вариант записи функций через оператор => позволяет сократить объём кода затрачиваемого на объявление функции.

Практическая ценность функций
Уменьшаем дублирование (повторение) кода;
Проще вносить изменения;
Абстрагирование от деталей;

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

Глобальные переменные
Глобальные переменные – те который объявлены вне тела функции, функции имеют доступ к ним, и могут их необратимо изменять.

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

Применение функций. Таймеры
Пример: http://js.courses.dp.ua/express/02/timers_example.html

Список аргументов переменной длинны
Псевдомассив arguments – хранит в себе все аргументы (параметры) которые, при вызове, переданы функции, и их порядковые номера. Все параметры которые предусмотрены в заголовке функции, также хранятся в arguments. Функции объявленные через оператор => не имеют arguments.

Список аргументов переменной длинны
Псевдомассив arguments – хранит в себе все аргументы (параметры) которые, при вызове, переданы функции, и их порядковые номера.

Оператор «…» и arguments ECMAScript-2015
В переменную …params попадут все параметры которые не поместились в именованные параметры функции. В отличии от arguments куда помещаются все параметры функции.

Самовызывающаяся функция
Самовызывающаяся функция – удобный механизм выполнить какие-либо действия автоматически, не создавая переменных и внося в код явных вызовов функций. Другими словами не засоряя глобальную область видимости. Активно используется в сторонних библиотеках.

Функции и события
На базе функций работает система событий (оповещения о выполнении пользователем тех или иных действий)

Функции и события
На базе функций работает система событий (оповещения о выполнении пользователем тех или иных действий)

Объекты / Objects
материал: металл
циферблат: механика
вес: 300 грамм
форма: шаровидная
цвет: оранжевый
сахар: 15%
сорт: «Дэнси»
узнать время()
звонить()
пахнуть()
почистить()
выжать сок()
установить время()
<< Действия()/Методы() >>
<< Свойства / Аттрибуты >>
параметры

Объекты / Objects
Объект в программировании — некоторая сущность, обладающая определённым состоянием и поведением, имеющая заданные значения свойств (параметров, атрибутов) и операций над ними (функций, методов).

Объекты / Objects
Объект в JavaScript представляет собой ассоциативный массив (верно и обратное утверждение) содержащий поля (свойства, элементы, такие себе переменные) с данными, и методы (функции) их обрабатывающие.

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

Объекты / Objects
…
Объект может состоять из множества других объектов. Абстракция. Принцип черного ящика.

Объекты могут состоять из других объектов
Объекты могут состоять из множества других объектов. Обращаться к ним не составляет труда. Оператор точка «.» разделяет сложенный объект и объект «контейнер». Такое разделение называют – цепочкой вызова, длинна такой цепочки ограничена только тем сколько объектов участвуют в «матрёшке».

Объекты
Вложенность объектов позволяет писать простой и элегантный код.

Объекты, как и массивы – динамическая структура данных
?!?
Объекты

Объекты, как и массивы – динамическая структура данных
?!?
Объекты

object - ссылочная структура данных
?!?
?!?
Объекты

object и null
null – “заглушка” говорящая, что данная ссылка не ссылается ни на одни объект.
Объекты

object - ссылочная структура данных
name: Ivan,
age: 33,
…
ob
ob2
Объекты

Функция-конструктор - позволяет создавать много однотипных объектов. Для этого она используется вместе с оператором new.
Функция-Конструктор

Функция-конструктор - позволяет создавать много однотипных объектов. Конструктор может (и должен) иметь параметры
Функция-Конструктор

Прототип – объект родитель, дополняет своими свойствами дочерний объект.
Прототипы
Для получения и установки прототипа существует более цивилизованный поход (чем обращение к свойству __proto__ ) – использование методов Object.getPrototypeOf(obj) для получения прототипа, и Object.setPrototypeOf(obj, newProto) для его установки (появился в ES2015).

Прототип – объект родитель, дополняет своими свойствами дочерний объект.
Прототипы

Прототип – объект родитель, дополняет своими свойствами дочерний объект.
Доступ к свойствам прототипа
?!?

Оператор in и метод hasOwnProperty()
Оператор in проверяет наличие свойства в объекте (и его прототипе). Метод .hasOwnProperty() проверяет наличие свойства только в самом объекте (не заглядывая в прототип).

Классы в ECMAScript-2015
В ES2015 появились классы, однако они лишь обёртка над идеей прототипов и функций-конструкторов.

Применение прототипов
Наличие общего прототипа у группы объектов позволяет модифицировав его – автоматически модифицировать все его «объекты-наследники».

Применение прототипов
Наличие общего прототипа у группы объектов позволяет модифицировав его – автоматически модифицировать все его «объекты-наследники».
Пример: http://js.courses.dp.ua/express/02/proto_example.html

О режиме
совместимости

Директива “use strict”
Директива “use strict” говорит браузеру, что следует относиться к JavaScript коду строго по стандарту ECMAScript 5. Все «попустительства» поддерживаемые для совместимости со старыми стандартами перестают действовать.
Что перестанет работать: https://developer.mozilla.org/ru/docs/Web/JavaScript/Reference/Strict_mode

Инфраструктура браузера

JavaScript в HTML
Интеграция кода непосредственно в HTML.

JavaScript в HTML
Блоки кода
в теле HTML документа. Блоки кода выполняются по</div></h3></h3><!----><!----><div class="slides-content">ходу загрузки документа.<br></div><!----><!--]--><!----></div></div><div class="slides-wrapper"><div id="slide48" class="slides-item"><!--[--><h3 class="slides-heading"><a class="slides-headingLink" href="/_ipx/w_720/imagesDir/jpg/144274/slide-47.jpg" target="_blank" rel="noopener">Слайд 48</a><h3 class="slides-content text-center font-bold"><div><p>JavaScript в HTML<br><p>Блоки кода <script> в заголовке документа. Выполняется сразу (дальнейшая загрузка документа</div></h3></h3><!----><!----><div class="slides-content">ожидает пока не обработается скрипт).<br></div><!----><!--]--><!----></div></div><div class="slides-wrapper"><div id="slide49" class="slides-item"><!--[--><h3 class="slides-heading"><a class="slides-headingLink" href="/_ipx/w_720/imagesDir/jpg/144274/slide-48.jpg" target="_blank" rel="noopener">Слайд 49</a><h3 class="slides-content text-center font-bold"><div><p>JavaScript в HTML<br><p>Блоки кода в отдельном файле.<br></div></h3></h3><!----><!----><!----><!----><!--]--><!----></div></div><div class="slides-wrapper"><div id="slide50" class="slides-item"><!--[--><h3 class="slides-heading"><a class="slides-headingLink" href="/_ipx/w_720/imagesDir/jpg/144274/slide-49.jpg" target="_blank" rel="noopener">Слайд 50</a><h3 class="slides-content text-center font-bold"><div><p>Атрибуты defer и async<br><p><script async src="scripts/async.js">
Атрибут defer откладывает выполнение скрипта до тех пор, пока вся страница не будет загружена полностью. Аналог подписки на событие window.onload. Работает только для внешних файлов (т.е. когда есть атрибут src).
Атрибута async указывает, что указанный в атрибуте src файл будет выполняться без ожидания загрузки и отображения веб-страницы. В то же время и страница не ожидает результата выполнения скрипта, а продолжает загружаться как обычно. Т.е. браузер продолжает грузить страницу дальше, не дожидаясь полной загрузки файла со скриптами. Появился в HTML5.

JavaScript в HTML
Блоки кода в отдельном файле.
Раньше:
HTML 5:

Объект Window
Браузер добавляет в JavaScript всего один объект – window. Но этот объект содержит все необходимые инструменты для манипуляции HTML-документом.

Объект Window
Объект window можно использовать неявно, т.е. опускать его имя при написании кода. А все переменные которые создаются в коде – автоматически становиться свойствами и методами window.
.setInterval();
.setTimeOut();
.alert();
.prompt();
.confirm();
…
Известные методы window

Объект Window
Все переменные которые создаются в коде – автоматически становиться свойствами и методами window.
http://js.courses.dp.ua/express/02/window_ex1.html

Объект Window
window.location – свойство определяющее какую страницу содержит окно браузера.
window.location === window.document.location
Свойство: window.location

Объект Window
Свойство: window.location

Объект Window
window.screen – информация об экране, размерах, ориентации и т.д.
Свойство: window.screen

Объект Window
window.navigator – информация о браузере.
Свойство: window.navigator

window.document
window.document – хранилище HTML-документа.

HTML-документ
Слайд 61
HTML-документ
Древовидная структура HTML-документа

HTML-документ
Древовидная структура HTML-документа

HTML-документ
Древовидная структура HTML-документа

Древовидная структура HTML-документа
В JavaScript каждый элемент дерева (узел, тег, node) представлен объектом.
У каждого элемента есть один родительский элемент, и множество дочерних элементов (от 0 до ∞).

Свойства элементов HTML-документа
Свойство .parentNode – ссылка на родительский элемент.
Свойство .childNodes – псевдомассив содержащий ссылки на дочерние элементы.

window.document – корень дерева документа
window.document.childNodes – массив с тегами верхнего уровня (как правило тег html и doctype).
http://js.courses.dp.ua/express/02/window_ex3.html

window.document – корень дерева документа

Типы Node (элементов)
Свойство nodeType у элементов – определяет тип ноды (узла, node):
Типы узлов: http://www.w3schools.com/jsref/prop_node_nodetype.asp

Элемент, его предки и потомки
DOCUMENT >> HTML >> BODY >> P

Элемент, его предки и потомки
DOCUMENT >> HTML >> BODY >> P

Элемент, его предки и потомки
I << P << BODY << HTML

Элемент, его предки и потомки
I << P << BODY << HTML

Атрибуты тоже входят в дерево
Свойство .attributes содержит перечень атрибутов элементов
http://js.courses.dp.ua/express/02/window_ex4.html

Атрибуты тоже входят в дерево
Свойство .attributes содержит перечень атрибутов элементов

Свойства элементов можно менять, динамически
У каждого элемента-атрибута есть множество свойств, которые можно изменять, и это сразу же отразиться на документе.

Свойства элементов можно менять, динамически
У каждого элемента-атрибута есть множество свойств, которые можно изменять, и это сразу же отразиться на документе.

Свойство .innerHTML – содержимое тега
Изменение свойства innerHTML – автоматически влечёт перерасчёт дерева документа

Свойство .innerHTML – содержимое тега
Изменение свойства innerHTML – автоматически влечёт перерасчёт дерева документа

Удаление элементов из дерева документа
Удаление элемента из дерева влёчет, то что он исчезнет при отрисовке документа.

Удаление элементов из дерева документа
Удаление элемента из дерева влёчет, то что он исчезнет при отрисовке документа.

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

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

.parentNode
.childNodes
Element (Node, узел)
DOM – Document Object Model
(объектная модель документа)

Задача JavaScript – изменение HTML-документа
Добавление нового элемента:
Создать новый элемент и присоединить его, в качестве дочернего, к одному из существующих элементов;
2. Изменение элемента:
Изменение свойств элемента (в т.ч. содержимого);
Изменение его позиции в дереве документа;
3. Удаление элемента (из дерева документа).
Чтобы с тегом что-то сделать нужно его, для начала найти!

Домашнее задание
Узнать о следующих свойствах:
.firstChild;
.lastChild;
.nextSibling;
.previousSibling;
https://developer.mozilla.org/ru/docs/Web/JavaScript

https://www.gitbook.com/download/pdf/book/karmazzin/eloquentjavascript_ru

Основы программирования
http://courses.prometheus.org.ua/courses/Prometheus/CS50/2016_T1/about

Домашнее задание
О налогах в США http://www.tax-rates.org/federalincometax
Задание: написать скрипт, который будет запрашивать сумму годового дохода человека, и рассчитывать сумму федерального налога (для США), которую человек должен оплатить (за основу взять ставки для лиц не состоящих в браке – single).

Домашнее задание: задача от «Apple»
Массив содержит котировки стоимость акций Apple (в течении одного дня торгов). Вы можете купить одну акцию и потом продать её. Ваша задача найти самый удачный момент для покупки и продажи акции (покупка разуметься должна быть до продажи), так чтобы ваша прибыль от этого действия была максимально возможной. В результате работы скрипта необходимо вывести рассчитанную прибыль, а также номера цен
(в массиве) по которым бы производилась покупка и продажа.