js .2
5. Основы JavaScript
6. JavaScript в браузере
1.JavaScript в браузере
2.Объект, его свойства и методы
3.JavaScript выбирает HTML-элементы по id
4.Массив, его метод indexOf() и свойство length
5.Инкремент в префиксной и постфиксной формах
6.Случайные числа и их округление методом Math.floor()
7.Селекторы множества HTML-элементов
8.События на странице и функции-обработчики
9.Циклы, их устройство на примере цикла for
5. Основы JavaScript
...1-17 уроки — https://telegra.ph/js-1-07-21
18.Объявление функции
19.Функции с параметрами
20.Возвращаемое функцией значение и оператор return
21.DOM, объектная модель документа
22.Управление атрибутом style через JavaScript
23.Заключение
Объявление функции
Основной способ запуска кода на веб-странице — вызов функции. Вот код, рисующий в консоли котёнка:
Скопировать код JAVASCRIPT var c = ' ˉ ˉ ˉ ˉ', var b = ' (=චᆽච=)==∫', var a = ' Λ _ Λ'; console.log(a); console.log(b); console.log(c);
Если такой котёнок понадобится один раз, можно поместить этот код там, где он нужен. Но если рисовать надо неоднократно, лучше записать этот код отдельно и дать ему простое понятное имя. Скажем, kitten (англ. «котёнок»). Так создаётся функция. Запустить рисование можно, позвав котёнка по имени. Это и будет вызов функции kitten();
Круглые скобки после имени kitten, как в случае с методом, говорят, что это не переменная, а инструмент с готовым кодом.
Функция имеет тело, как условная конструкция, а объявляется ключевым словом function, за которым следует придуманное нами имя:
Скопировать код
JAVASCRIPT
function имяФункции( ) {
<тело функции>
}
Пример объявления функции:
Скопировать код
JAVASCRIPT
function kitten() {
var c = ' ˉ ˉ ˉ ˉ';
var b = ' (=චᆽච=)==∫';
var a = ' Λ _ Λ';
console.log(a);
console.log(b);
console.log(c);
}
Вызов функции приводит к исполнению кода её тела:
Скопировать код
JAVASCRIPT
kitten();
// Λ _ Λ
// (=චᆽච=)==∫
// ˉ ˉ ˉ ˉ
Интересно
Пространственное расположение в коде тела функции и её фигурных скобок желательно организовывать в том стиле, что и условные конструкции. Здесь мы следуем уже принятому раньше «египетскому стилю».
Перейти к заданию
Функции с параметрами
В круглых скобках функций могут быть указаны параметры, которые функция принимает.
Например, «скептически настроенная» функция scepsis(x) делит любое заданное число на 25:
Скопировать код
JAVASCRIPT
function scepsis(x) {
console.log('Сколько-сколько? ' + x + '? Да там от силы ' + x / 25 + '!');
}
Если при вызове функции передать ей значение переменной как параметр x, функция сделает с этим значением то, что предписано делать с параметром x:
Скопировать код JAVASCRIPT var mass = 50; scepsis(mass); // «Сколько-сколько? 50? Да там от силы 2!»
Параметров может быть несколько. В таких случаях при объявлении функции указываются все параметры.
В коде тела функции прописываются действия с ними, как с обычными переменными.
Вот функция keepScore() (от англ. to keep score, «вести счёт»), которая объявляет итог матча. Она принимает два параметра — ours (англ. «наши», «наше») и theirs (англ. «они», «их»). Это число голов, забитое «нашими» и «противником».
Скопировать код
JAVASCRIPT
function keepScore(ours, theirs) {
if (ours > theirs) alert('Выиграли!😃 Счёт ' + ours + ':' + theirs);
else if (ours == theirs) alert('Ничья.😐 Счёт ' + ours + ':' + theirs);
else alert('Продули...😢 Счёт ' + ours + ':' + theirs);
}
При вызове этой функции можно: 1. передать ей как параметры значения переменных; 2. указать результаты матча прямо в коде вызова. Всё равно параметр ours примет первое значение, а theirs — второе.
Вариант 1
Скопировать код JAVASCRIPT var a = 10; var b = 8; keepScore(a, b);
Вариант 2
Скопировать код JAVASCRIPT keepScore(10, 8);
Результат будет одинаковый: модальное окно с сообщением: «Выиграли!😃 Счёт 10:8».
Интересно
Обратите внимание, что в коде функции keepScore() условные конструкции не имеют фигурных скобок. Это разрешено, если в теле ifодна строчка кода. Здесь так и есть: в любом из трёх случаев всё ограничивается вызовом метода alert().
Перейти к заданию
Возвращаемое функцией значение и оператор return
Функции могут намного больше, чем выводить сообщения в консоли и модальном окне. Самое главное, что функция по своему алгоритму превращает исходные данные (параметры, аргументы) в результаты.
Представьте себе соковыжималку. В принципе, этот аппарат выполняет функцию сделатьСок(фрукт) {}. Программисты сказали бы: соковыжималка принимает фрукты и возвращает сок. Она не определяет, куда вы этот сок перельёте — в стакан, бутылку, банку или пакет.
Функциям обычно поручают преобразовывать данные, но не определять, где они применяются (в консоли, во всплывающем окне — вариантов слишком много). Нужно просто вернуть эти данные скрипту для дальнейшего использования. Возвращаемые значения указывает оператор return (англ. return, «вернуть»). Например:
Скопировать код
JAVASCRIPT
function sayHello(name) {
var greeting = 'Привет, ' + name;
return greeting;
}
console.log(sayHello('Алиса'));
// Привет, Алиса
В этом примере функция реализует алгоритм: добавление строки 'Привет, ' к параметру. Оператор return предъявляет результат — строку с полным приветствием. Зона применения этого результата (в данном случае консоль) определена при вызове функции.
Если в другом месте программы приветствие снова понадобится, и не в консоли, а например, в документе, мы легко сможем вызвать ту же функцию.
Важно:
Директива return означает выход из функции. Без результатов он просто говорит «хватит»:
Скопировать код JAVASCRIPT return;
В теле функции код ниже строки с оператором return исполняться не будет.
Перейти к заданию
DOM, объектная модель документа
Сейчас нам достаточно навыков, чтобы написать простую программу, которая сформирует CSS-правило строкой кода. Но как применить его к веб-странице?
Весь HTML-документ для JavaScript — это объект document. Вызывая его в консоль, мы увидим HTML-код нашей страницы:
Скопировать код JAVASCRIPT console.log(document);
В этот объект вложены два объекта: document.head и document.body. Знакомую нам иерархию HTML-элементов JavaScript воспринимает как иерархию объектов. Это называется DOM (от англ. document object model, «объектная модель документа»).
К верхнему уровню DOM-дерева (элементам headи body) мы можем обратиться как к свойствам объекта document:
console.log(document.body); — покажет в консоли HTML-код элемента body;
console.log(document.head); — покажет в консоли HTML-код элемента head.
Но продвинуться глубже подобным образом мы не сумеем. Объекта по имени document.body.h1нет — ведь в документе теоретически бывает несколько заголовков первого уровня.
Дальше мы ещё увидим, как в DOM добираются до HTML-элемента типа h1. А пока поработаем с HTML-элементами, доступными для JavaScript как свойства объекта document.
Перейти к заданию
Управление атрибутом style через JavaScript
Для любого HTML-элемента, который мы можем назвать на языке JavaScript (например, для body по обращению document.body) можно вызвать свойство style. Оно вернёт нам все CSS-свойства и их значения, которые могут быть записаны или уже записаны в HTML-атрибут style:
Скопировать код JAVASCRIPT document.body.style;
Так в дереве DOM возник объект следующего уровня — document.body.style — хранящий в себе стили объекта document.body В JavaScript можно вызвать любое CSS-свойство и поменять его значение оператором присваивания как свойство объекта document.body.style. Написание имён свойств в CSS и JS различается, когда имя свойства содержит дефис. Например, синий шрифт и красный фон для тела веб-страницы на CSS задаётся так:
Скопировать код
JAVASCRIPT
body {
color: blue;
background-color: red;
}
На JavaScript код c тем же смыслом выглядит так:
Скопировать код JAVASCRIPT document.body.style.color = 'blue'; document.body.style.backgroundColor = 'red';
Как видите, различается имя свойства, задающего цвет фона. В JS всегда убирают дефис и уточняющее значение приводят с заглавной буквы, используя camelCase.
Выполнение скрипта с таким кодом равносильно HTML-разметке для элемента body с атрибутом style:
Скопировать код HTML <body style="color: blue; background-color: red;">
Так можно добавить выбранному HTML-элементу любой стиль. Но пока нам доступен только элемент body.
Перейти к заданию
6. JavaScript в браузере
1.JavaScript в браузере
2.Объект, его свойства и методы
3.JavaScript выбирает HTML-элементы по id
4.Массив, его метод indexOf() и свойство length
5.Инкремент в префиксной и постфиксной формах
6.Случайные числа и их округление методом Math.floor()
7.Селекторы множества HTML-элементов
8.События на странице и функции-обработчики
9.Циклы, их устройство на примере цикла for
10.Заключение
Объект, его свойства и методы
Полноценная разработка на JavaScript начинается с организации собственных объектов, где хранят свои данные и функции. Объект не примитивный тип данных, как число или строка, а комплексный: он состоит из пар ключ-значение.
Значение — это нужная информация, а ключ — уникальное имя, которым надписано каждое значение. Как данные любого другого типа, объект можно сохранить в переменной.
Вот, например, объект с 5 ключами сохраняется в новой переменной myObject:
Скопировать код
JAVASCRIPT
var myObject = {
stringKey: 'значение',
numberKey: 4,
booleanKey: true,
nullKey: null,
methodKey: kitten() {
alert('kitten!');
}
};
Если значение представляет собой просто данные, это свойство объекта. Оно существует для того, чтобы что-то узнать/запомнить. Таковы в нашем объекте свойства stringKey, numberKey, booleanKey, nullKey. Значением, как видите, бывают данные любого типа.
А если значение — фрагмент кода, встроенная функция, как methodKey, то это инструмент, позволяющий что-то сделать. Такая функция называется метод объекта.
Создав объект, мы наполняем его свойствами и методами, а затем пользуемся ими (вызываем методы и получаем доступ к свойствам). Доступ по ключу можно получить записью через точку:
Скопировать код JAVASCRIPT myObject.stringKey;
или с именем свойства в кавычках и квадратных скобках:
Скопировать код JAVASCRIPT myObject['numberKey']
Важно!
Если объект уподобить ящику с инструментами, то фигурные скобки — стенки ящика. Это границы литерала объекта, после них нужна точка с запятой. Лежащие внутри ящика инструменты (пары «ключ-значение») разделены запятыми. Это очень важно, без запятой ничего работать не будет.
Перейти к заданию
JavaScript выбирает HTML-элементы по id
Чтобы скрипт мог выбирать любые элементы веб-страницы, а не только body и head, понадобится ещё один способ обращения к HTML-элементам. Удобнее всего дать нужному элементу особое имя.
Оно называется «идентификатор» и задаётся атрибутом id (от англ. identifier, «идентификатор»). Атрибут id работает как класс, но присваивается лишь одному элементу на странице.
Названиями лучше делать английские слова и выражения — самые понятные, написанные базовой латиницей. Это сделает код более читаемым как для людей, так и для роботов, и не вызовет проблем в работе с международными проектами.
Например, идентификатор под названием "my-unique-id" (англ. my unique id, «мой уникальный идентификатор») в коде веб-страницы выглядит так:
Скопировать код HTML <div id="my-unique-id"></div>
Хотя идентификаторы практически не используют в селекторах правил CSS, технически это возможно. Реализуется простановкой хэша перед названием идентификатора:
Скопировать код
CSS
#my-unique-id {
color: blue;
}
JavaScript может заполучить любой HTML-элемент, передав его идентификатор как параметр методу getElementById() объекта document (англ. get element by id, «получить элемент по идентификатору»):
Скопировать код
JAVASCRIPT
var myElement = document.getElementById('my-unique-id');
Так благодаря уникальному идентификатору 'my-unique-id' блочный элемент div оказался доступен в DOM, объектной модели документа. Теперь он сохранён в переменной myElement и скрипт может изменить любое его свойство.
Перейти к заданию
Массив, его метод indexOf() и свойство length
Частный случай объекта — массив. В нём перечисляются только значения, а вместо имён-ключей — индексы 0, 1, 2 и далее. Литерал массива записывается в квадратных скобках. Элементы массива, как свойства объекта, также разделяются запятыми. Вот массив, в котором собраны астрономические знаки планет Солнечной системы:
Скопировать код JAVASCRIPT var planets = ['☿', '♀', '♁', '♂', '♃', '♄', '♅', '♆'];
Получить отдельный элемент можно по его индексу в квадратных скобках. Причём отсчёт ведётся с нуля: индекс первого элемента 0, а второго 1. Знак Венеры, второй от Солнца планеты, будет иметь индекс 1.
Скопировать код JAVASCRIPT planets[1]; // "♀"
Узнать индекс элемента с определённым значением позволяет вызов метода indexOf() (от англ. index of …, «индекс такого-то»):
Скопировать код
JAVASCRIPT
planets.indexOf('♀'); // 1
Помимо множества разных методов, у массивов есть свойство length (англ. length, «длина»), которое возвращает длину массива. Вызвать length можно как от имени, так и от литерала массива. Индекс последнего элемента всегда на единицу меньше длины массива:
Скопировать код
JAVASCRIPT
planets.length; // 8
['☿', '♀', '♁', '♂', '♃', '♄', '♅', '♆'].length; // 8
planets.indexOf('♆'); // 7
Массив можно хранить в объекте как значение одного из свойств объекта. К примеру, в объекте ship («корабль») два ключа — masts («мачты») и superstructures («надстройки»), значениями для которых выступают массивы:
Скопировать код
JAVASCRIPT
var ship = {
masts: ['фок', 'грот', 'бизань'],
superstructures: ['бак', 'рубка', 'ют']
};
Перейти к заданию
Инкремент, его префиксная и постфиксная форма
Имея массив значений, мы скоро сталкиваемся с необходимостью перебрать все его элементы с начала до конца или наоборот. Для этого нужно последовательно увеличивать или уменьшать счетчики.
Можно использовать перезапись переменных:
Скопировать код JAVASCRIPT var i = 0; console.log(planets[i]); // "☿" i = i + 1; console.log(planets[i]); // "♀"
Но существует специальная арифметическая операция — инкремент. Слово это латинское. Означает «прирастание» в том смысле, в котором растут стены возводимых домов: один ряд кирпичей за другим. Оператор инкремента записывается как двойной плюс ++, применяется он только к переменным и обозначает увеличение на единицу.
Инкремент бывает префиксный ++i и постфиксный i++. Оба имеют одинаковый приоритет — выше, чем у других арифметических операторов.
Префиксный инкремент спешит увеличить переменную на единицу и сразу же вернуть это увеличенное значение для использования в расчётах. Он похож на человека, который, считая шаги, говорит «раз», ещё не тронувшись с места:
Скопировать код JAVASCRIPT var i = 1; console.log(2 * ++i); // 4 console.log(2 * ++i); // 6
Постфиксный инкремент сначала передаёт JavaScript исходное значение переменной, а увеличивает его на единицу на следующем шаге. Он сначала говорит «ноль», потом делает первый шаг:
Скопировать код JAVASCRIPT var i = 1; console.log(2 * i++); // 2 console.log(2 * i++); // 4
Перебирать элементы массива по индексам удобнее постфиксным инкрементом i++, поскольку он задействует и элемент с индексом [0].
Перейти к заданию
Случайные числа. Округление методом Math.floor()
На JavaScript уже написано и ещё будет написано немало увлекательных игр, в которых происходит выбор случайных значений. Мы сейчас проектируем не игру, но и в нашей работе случайность понадобится. Генератор случайных чисел существует в JavaScript как метод random готового объекта Math(англ. math, «математика» и random, «случайный»). Вызов Math.random();возвращает случайное дробное число между 0 и 1.
Скопировать код JAVASCRIPT Math.random(); // 0.9752705074780903
Можно получить случайное число в заданном промежутке между минимальным числом min и максимальным числом max:
Скопировать код JAVASCRIPT Math.random() * (max - min) + min;
Для округления такого результата до целого числа есть по крайней мере 4 метода, из которых самый удобный — Math.floor(). Он отбрасывает знаки после запятой:
Скопировать код JAVASCRIPT Math.floor(Math.random() * (max - min + 1)) + min;
Округление «до пола» вызовом метода Math.floor() (англ. floor, «пол») позволяет получить и 0, таким образом иногда задействуя в расчётах минимальное значение min.
Перейти к заданию
Селекторы множества HTML-элементов
До сих пор мы выбирали уникальный HTML-элемент методом getElementById(). Но что, если мы хотим выбрать через DOM сразу несколько элементов? Например, по тегу или классу.
Для этого существуют специальные методы.
Скопировать код
JAVASCRIPT
var divs = document.getElementsByTagName('div');
Вызов метода getElementsByTagName('div')(англ. get element by tag name, «получить элемент по имени тега») вернёт массив всех элементов с тегом div.
Скопировать код
JAVASCRIPT
var classRed = document.getElementsByClassName('red');
Вызов метода getElementsByClassName('red')(англ. get element by class name, «получить элемент по имени класса») вернёт массив всех элементов с классом 'red'.
К сожалению, произвести какие-либо операции сразу надо всеми полученными элементами не выйдет (c этим разберемся в следующем уроке). Но результат, который нам вернёт JavaScript, похож на массив. Каждый конкретный его элемент можно выбрать по индексу.
Так будут выглядеть первые по счету элементы:
Скопировать код
JAVASCRIPT
document.getElementsByTagName('div')[0];
document.getElementsByClassName('red')[0];
Важно
Результат, возвращаемый функцией getElementsByClassName(), похож на массив. Но это не полноценный массив, а похожая на него структура — псевдомассив. У псевдомассива тоже есть свойство .length; и к его элементам также обращаются по числовым индексам. Но у него нет некоторых методов, присущих полноценным массивам. Например, уже знакомого вам метода .indexOf().
Перейти к заданию
События на странице и функции-обработчики
Понятие «интерактивный интерфейс» подразумевает, что в результате действия пользователя выполнилась какая-либо функция.
Происходящее на странице или в системе называют событием. Пользователи могут вызвать массу разных событий. Вот основные и наиболее распространённые:
'load'— загрузка объекта,'click'— клик по объекту,'mouseover'— пользователь навёл указатель мыши на объект,'mouseout'— пользователь убрал указатель мыши с объекта,'scroll'— пользователь прокручивает элемент.
Универсальный способ отслеживания и реакции на событие — метод addEventListener() (англ. add event listener, «добавить слушатель события»). Вот пример его использования:
Скопировать код JAVASCRIPT element.addEventListener(eventName, handler);
element— элемент, которому добавляем слушатель;eventName— имя события, на которое нужно отреагировать. Передаётся строкой, например:'click','scroll','mouseover';handler— функция-обработчик события. Она будет вызвана, когда событие сработает (например, произойдет клик).
Вот пример, когда при клике по элементу element запускается обработчик showClick(), который выведет сообщение в консоль:
Скопировать код
JAVASCRIPT
var element = document.getElementById('my-element');
function showClick() {
console.log('Мы кликнули по элементу');
}
element.addEventListener('click', showClick);
Обратите внимание, что в такой записи вторым параметром обработчика указывают только имя функции, без скобок. Скобки отсутствуют, потому что мы не вызываем функцию, а просто передаём её как аргумент. Тем самым мы говорим браузеру: «Вот функция showClick, вызови её, когда сработает событие click».
Интересно
Функция showClick в данном случае называется «функцией-коллбэком» (англ. call back function, «функция обратного вызова»). Функция-коллбэк передаётся другой функции в качестве аргумента, чтобы быть вызванной позже. Сперва эта концепция может казаться сложной, но вы привыкнете. В JavaScript это распространенный прием, мы еще много раз столкнемся с коллбэками. Полное осознание придёт с написанием десятка таких функций.
Другой способ записи, который удобно использовать, если не собираетесь использовать функцию в других блоках кода:
Скопировать код
JAVASCRIPT
var element = document.getElementById('my-element');
element.addEventListener('click', function () {
console.log('Мы кликнули по элементу');
});
Здесь код функции-обработчика событий написан полностью внутри вызова метода addEventListener(). В таких случаях обработчику можно и не давать имени.
Перейти к заданию
Циклы. Их устройство на примере цикла for
Чтобы перебрать по очереди элементы массива и совершить с ними определённые действия, нам понадобятся циклы. Это конструкции с условием и кодом, который выполняется повторно. Каждый повтор называется итерацией (от латинского itero — «опять»).
Из четырёх видов циклов JavaScript начнем с цикла for.
Вот какой код, к примеру, выведет в консоли целые числа от 0 до 10:
Скопировать код
JAVASCRIPT
for (var i = 0; i <= 10; i++) {
console.log(i);
}
Цикл объявляется ключевым словом for. Здесь это слово переводится с английского как «в направлении». Задавая направление перебора, обычно указывают:
1) где начать движение, 2) где остановиться и 3) с каким шагом двигаться.
Эти указания помещают в круглые скобки, а сам повторяемый код — тело цикла — в фигурные. Cинтаксис цикла for:
Скопировать код
JAVASCRIPT
for (настройка; условие; финальное выражение) {
<тело цикла>
}
Настройка, или инициализация задаёт исходную отметку счётчика: объявляется переменная (обычно i, от слова «итерация») и её начальное значение. При переборе массива чаще всего 0.Условие — логическое выражение, вычисляемое на каждой итерации. Код выполняется, пока условие равно true.
Финальное выражение завершает каждую итерацию. Обычно это приращение счётчика, чаще всего инкремент i++ или декремент (уменьшение на единицу i--).
Перейти к заданию