Заглавная страница Избранные статьи Случайная статья Познавательные статьи Новые добавления Обратная связь КАТЕГОРИИ:  Археология Биология Генетика География Информатика История Логика Маркетинг Математика Менеджмент Механика Педагогика Религия Социология Технологии Физика Философия Финансы Химия ЭкологияТОП 10 на сайте Приготовление дезинфицирующих растворов различной концентрацииТехника нижней прямой подачи мяча. Франко-прусская война (причины и последствия) Организация работы процедурного кабинета Смысловое и механическое запоминание, их место и роль в усвоении знаний Коммуникативные барьеры и пути их преодоления Обработка изделий медицинского назначения многократного применения Образцы текста публицистического стиля Четыре типа изменения баланса Задачи с ответами для Всероссийской олимпиады по праву 
Мы поможем в написании ваших работ! ЗНАЕТЕ ЛИ ВЫ?
Влияние общества на человека
Приготовление дезинфицирующих растворов различной концентрации Практические работы по географии для 6 класса Организация работы процедурного кабинета Изменения в неживой природе осенью Уборка процедурного кабинета Сольфеджио. Все правила по сольфеджио Балочные системы. Определение реакций опор и моментов защемления |
Часть 1. Основы языка JavaScriptСтр 1 из 5Следующая ⇒
КОЛЛЕДЖ СВЯЗИ ТЕХНОЛОГИИ СТОРОНЫ КЛИЕНТА. ЯЗЫК JAVASCRIPT УЧЕБНОЕ ПОСОБИЕ
для специальностей: – 09.02.03 – Программирование в компьютерных системах – 09.02.04 – Информационные системы (по отраслям) – 09.02.07 – Информационные системы и программирование
Составил преподаватель Шомас Е.А.
Самара 2019
Шомас Е.А. Технологии стороны клиента. Язык JavaScript., Учебное пособие., Самара КС ПГУТИ, 2019г. – 4,9 п. л.
СОДЕРЖАНИЕ Часть 1. Основы языка JavaScript 4 Тема 1.1 Назначение языка JavaScript. Основные понятия и определения 4 Тема 1.2 Условные конструкции JavaScript. Опереторы цикла 10 Тема 1.3 Встроенные объекты языка JavaScript 14 Тема 1.4 Объектная модель JavaScript 23 Тема 1.5 Функции в JavaScript 29 Тема 1.6 События 35 Тема 1.7 Canvas. Работа с графикой 40 Часть 2. Объектно – ориентированное программирование (ООП) 50 Тема 2.1 Объекты 50 Тема 2.2 Продвинутая работа с функциями 56 Тема 2.3 Прототипное наследование 62 Тема 2.4 Классы 64 Тема 2.5 Библиотеки JavaScript 69 Список используемых источников 79
Часть 1. Основы языка JavaScript Тема 1.1 Назначение языка JavaScript, основные понятия и определения С помощью языка JavaScript можно создавать интерактивные современные веб – приложения. JavaScript полностью интегрируется с HTML/CSS, поддерживается всеми основными браузерами. JavaScript – язык сценариев (скриптов), которые представляют собой программный код не требующий предварительной обработки (компиляции) перед запуском. Код интерпретируется браузером во время загрузки веб - страницы и выполняется. JavaScript относится к объектно-ориентированным языкам программирования, позволяющий создавать сценарии, работающие как на стороне клиента, так и на стороне сервера. Клиентские приложения непосредственно встраиваются в HTML – страницы, размещенные на компьютере пользователя, и интерпретируются браузером по мере отображения частей документа в его окне. Серверные приложения для увеличения производительности предварительно компилируются в промежуточный байт-код и отправляются на сервер, где хранятся и обрабатываются.
Рассмотрим простой сценарий JavaScript: <script> alert ("Добро пожаловать!"); </script>
Размещение сценариев JavaScript Код на JavaScript встраивается в веб – страницу вместе с кодом HTML. Его присутствие обозначается тегами <script> </script>. Как и HTML – код, сценарий на JavaScript выполняется с верхней строки вниз и обрабатывается выражение за выражением (пошагово). Кроме размещения текста сценария в теле HTML – документа его можно поместить в отдельный файл. Это должен быть отдельный текстовый файл, с расширением *. js. В этом файле не должно быть ничего кроме операторов JavaScript. В тексте HTML - документа содержимое контейнера <script> приведите к следующему виду: <script src=”*.js”></script > Под размещением сценария понимается расположение контейнера <script> в документе. Этот контейнер может быть расположен как в заголовке документа (между тегами <head>), так и в теле документа, (между тегами <body>). Один документ может содержать произвольное количество сценариев, причем они не будут изолированы друг от друга. Все переменные, функции и объекты, созданные в одном из контейнеров <script>, будут доступны и во всех остальных сценариях, расположенных далее в документе. Структура кода Любой код состоит из инструкций. Инструкция – это синтаксические конструкции и команды, которые выполняют определенные действия. В примере была использована конструкция alert ("Добро пожаловать!"), которая отображает сообщение «Добро пожаловать!». В коде может быть любое количество инструкций, каждая из которых отделяется точкой с запятой. Комментарии В сценариях может присутствовать текст, не являющийся инструкцией, а предназначенный для описания кода или для его временного отключения (комментарий). Комментарии в JavaScript бывают двух видов: // Однострочный комментарий /* Комментарий, который занимает Несколько строк сценария */ Переменные Любое приложение работает с информацией. Если это интернет – магазин, то информацией здесь будет товары и корзина покупок, если чат - то это пользователи и их сообщения.
Переменные используются для хранения информации (данных). Для создания переменных используется ключевое слово let. Также переменную можно объявить через var, но в настоящее время это считается устаревшим способом. let message; Далее, через оператор присваивания (=), заносим в нее данные: let message = ‘Hello’;
Строка сохраняется в области памяти, связанной с переменной, и мы можем получить к ней доступ, используя имя переменной: let message = ‘Hello’; alert(message);
Можно в одной строке объявить сразу несколько переменных (не рекомендуется):
let user = ‘Tom’, age = 25, message = ‘Hello’;
Требования к именам переменных: 1. Имя переменной должно содержать только буквы, цифры и символы $ и _. 2. Первый символ не должен быть цифрой. 3. Имя переменной может быть любой длины; 4. Имена переменных чувствительны к регистру символов; 5. В качестве имен нельзя использовать зарезервированные слова JavaScript Константы С помощью ключевого слова const можно определить константу, которая также, как и переменная хранит значение. Однако значение это не может быть изменено. Название переменной должно иметь ясный и понятный смысл, говорить о том, какие данные в ней хранятся. Именование переменных – это один из важных и сложных навыков в программировании. Типы данных Переменная JavaScript может содержать любые данные. Язык относится к динамически типизированным, т.е. переменные не привязаны к определенным типам данных. В JavaScript есть семь основных типов данных: 1. Строковый (string) – любой текст, числа, символы, заключенные в одинарные или двойные кавычки - ‘Привет! ’; ’3,1415’; ’38 попугаев’ 2. Числовой (number) – любые числа и результаты математических выражений. Числовые данные бывают двух типов: - целочисленные, например - 123. Эти числа могут быть как положительными, так и отрицательными. - вещественные числа, такие как 123,12. Их еще называют числа с плавающей точкой, они также могут быть положительными и отрицательными. 3. Логический или булев (boolean) – результаты выполнения любых условных операторов. Принимает два значения – true – истина, false – ложь 4. Объект (object) – сложный тип данных, представляет набор различных данных простых типов и функций, выполняющих с этими данными те или иные действия. Простейшее определение объекта представляют фигурные скобки: let user = {}; Объект может иметь различные свойства и методы: let user = {name: "Иван", age:18}; console.log(user.name);
5. Символ (symbol) – используется для создания уникальных идентификаторов объектов; Кроме перечисленных типов данных, в JavaScript существуют еще два значения, которые тоже можно отнести к типам данных: 6. undefined - значение, которое получает каждая новая переменная до присвоения ей какого – либо определенного значения; 7. null – означает отсутствие определенного значения. В некоторых случаях возникает необходимость определить тип результата того или иного выражения. Для этого в языке JavaScript существует функция typeof (). Для любого выражения в скобках, результатом данной функции будет строка, содержащая название типа. Преобразование типов Чаще всего операторы и функции автоматически приводят переданные им значения к нужному типу. Например, alert автоматически преобразует любое значение к строке. Математические операторы преобразуют значения к числам.
Бывают случаи, когда нужно явно преобразовать значение в ожидаемый тип. Строковое преобразование происходит, когда требуется представление чего – либо в виде строки. Например, alert (value) преобразует значение к строке. Также можно использовать функцию String (value), чтобы преобразовать значение к строке. Численное преобразование можно осуществить через функцию Number (value), чтобы явно преобразовать value к числу: let str = "123"; alert(typeof str); // string
let num = Number(str); // становится числом 123
alert(typeof num); // number
Явное преобразование часто применяется, когда мы ожидаем получить число из строкового контекста, например, из текстовых полей форм. Если строка не может быть явно приведена к числу, то в результате получим NaN (не число). let age = Number("Любая строка вместо числа");
alert(age); // NaN, преобразование не удалось
Правила численного преобразования:
Рассмотрим примеры: alert(Number(" 123 ")); // 123 alert(Number("123z")); // NaN (ошибка чтения числа в "z") alert(Number(true)); // 1 alert(Number(false)); // 0
Логическое преобразование происходит в логических операторах и подчиняется следующим правилам: значения, которые интуитивно «пустые», вроде 0, пустой строки, null, undefined, NaN становятся false, все остальные true. Операторы JavaScript Рассмотрим некоторые термины: Операнд – это то, к чему применяется оператор. Например, в умножении 3 * 7 есть два операнда – 3 и 7. Унарным называется оператор,который применяется к одному операнду; Бинарным – применяется к двум операндам; Все операторы JavaScript можно разделить на несколько групп: 1. Оператор присваивания (=) – является наиболее часто используемым оператором. 2. Арифметические операторы – выполняют различные действия с числами. К ним относятся:
3. Строковые операторы в JavaScript всего один оператор конкатенации строк. Он записывается также, как и арифметический оператор (+), интерпретатор JavaScript сам определяет, в каком случае данный оператор означает сложение, а в каком – конкатенацию.
Операторы сравнения
Следствием выполнения данных операторов является логическое значение, полученное в результате сравнения - true – истина, false – ложь. Логические операторы
Отладка сценария При создании большого и сложного сценария неизбежно возникают ошибки, которые необходимо найти и исправить. Для этого существуют средства отладки, служащие для отслеживания и выявления ошибок. Для решения задач такого рода в браузер встроены инструменты разработка (вызывается клавишей F12). По умолчанию в инструментах откроется вкладка Console (Консоль).
В консоли можно увидеть сообщение об ошибке, выделено красным цветом. На рисунке скрипт содержит неизвестную команду – ggg. Справа присутствует ссылка на исходный код с номером строки кода, в котором эта ошибка произошла. Под сообщением об ошибке находится синий символ >. Он обозначает командную строку, в которой можно редактировать и запускать JavaScript – команды. Для их запуска нажимаем Enter, для переноса строки – Shift + Enter. Условный оператор «?» Иногда бывает нужно назначить переменную в зависимости от условия. Например: let accessAllowed; let age = prompt('Сколько вам лет?', '');
if (age > 18) { accessAllowed = true; } else { accessAllowed = false; }
alert(accessAllowed);
Условный оператор «?» позволяет записать рассмотренный пример более коротким и простым способом. Данный оператор называют тернарным, т.к. он имеет три аргумента. Синтаксис: let result = условие? значение 1: значение 2; Сначала вычисляется условие, если оно истинно, то возвращается значение 1, в противном случае – значение 2. let accessAllowed = (age > 18)? true: false;
Логические операторы В JavaScript есть три логических оператора: | | (ИЛИ), && (И) и! (НЕ). Операторы могут применяться к значениям любого типа. Полученные результаты также могут иметь различный тип. Оператор ИЛИ (| |) используется в if для проверки истинности любого из заданных условий. let hour = 9;
if (hour < 10 || hour > 18) { alert('Офис закрыт.'); } Такую же проверку можно осуществить и с помощью логического оператора И (&&), но в отличии от ИЛИ оно будет возвращать первое ложное значение. let hour = 17;
if (hour >= 10 && hour <= 18) { alert('Офис открыт.'); } Оператор! (НЕ). Синтаксис оператора: result =!value; Оператор принимает один аргумент и выполняет следующие действия: сначала приводит аргумент к логическому типу true/false, а затем возвращает противоположное значение. Оператор switch позволяет сравнивать значение с множеством других. Этот оператор дает возможность предусмотреть операторы по умолчанию, которые выполняются, если не найдено ни одного соответствия. switch (выражение)
{ case значение1:операторы 1; break; case значение2:операторы 2; break; … default:операторы; } Допустим, необходимо, чтобы сценарий переводил названия животных с русского языка на английский: <script> //Запрашиваем название животного let t; let b = prompt("Введите название животного");
//Находим соответствующее название на русском языке switch (b) { case "собака": t="dog"; break; case "кошка": t="cat"; break; case "корова": t="cow"; break; default: t="Неизвестное животное"; } alert(b + "-" + t); </script>
Операторы цикла Цикл – это блок команд, который может повторно выполняться пока определенное условие не будет выполнено. Цикл for использует блок команд пока заданное условие является истинным. Синтаксис: for (выражение инициализации; выражение условия; выражение цикла) { операторы } Выражение инициализации служит для задания начального значения счетчика цикла. Выражение условия позволяет прекратить выполнять цикл, когда условие перестанет выполняться. Выражение цикла обычно осуществляет инкремент или декремент счетчика цикла. Любое из этих выражений может быть пропущено, но соответствующая точка с запятой должна ставиться. Пример: Напишем программу, выводящую на страницу числа от 1 до 5. for (i=1;i<=5;i++) { document.write (i+'<br />'); } Цикл while сходен с циклом for, но он не производит инициализацию и инкремент счетчика в своем объявлении. Синтаксис: while (выражение условия) { операторы; } Если выражение условия в цикле while сразу ложно, то операторы не выполнятся ни разу. Перепишем предыдущий сценарий для оператора while: let i=1; while (i<=5) { document.write (i+'<br />'); i++; }
Цикл do … while часто называют циклом с постусловием, потому что в отличие от предыдущих циклов он вначале исполняет блок команд и только потом проверяет заданное условие. Синтаксис: do { операторы; } while (выражение условия)
let i=20; do { document.write('Если Вы видите этот текст, код в цикле был исполнен.'); } //Задаем ложное условие while (i<=3);
Операторы break и continue Иногда в ходе выполнения цикла возникает необходимость прервать весь цикл или одну его итерацию. Для этой цели служат операторы break и continue. Оператор break полностью прекращает выполнение цикла и предает управление операторам, следующим за циклом. Оператор continue прерывает текущее выполнение цикла и переходит к выполнению следующего шага цикла. Числа Существует несколько способов записи чисел в JavaScript. Допустим запишем число 1 миллиард. let million = 1000000000; В JavaScript для записи числа можно использовать букву «е», чтобы укоротить запись числа. Она добавляется к числу и заменяет указанное количество нулей: let million = 1e9; Можно таким же способом записать и маленькое число, например, 1 микросекунду: let ms = 1e-6; В JavaScript используются 2 – ые, 8-ые и 16 – ые числа. Для представления числа в указанной системе счисления используется метод num. toString (base), который возвращает строковое представления числа num в системе счисления base. Например: let num = 255; alert(num.toString(16)); // ffalert(num.toString(2)); // 11111111
base может варьироваться от 2 до 36 (по умолчанию 10). Округление Для округления числа используются несколько встроенных функций: Math. floor – округление в меньшую сторону; Math. ceil – округление в большую сторону; Math. round – округление до ближайшего целого. Пример: нам необходимо округлить число 1.2345 до 2-х знаков после запятой (1.23). С использованием функций можно число умножить на 100 и разделить на 100: let num = 1.23456; alert(Math.floor(num * 100) / 100); // 1.23456 -> 123.456 -> 123 -> 1.23
Для округления также можно использовать метод toFixed(n) округляя число до n знаков после запятой и возвращает строковое представление результата. let num = 12.34;alert(num.toFixed(1)); // "12.3"
Результатом работы метода является строка. Можно преобразовать полученное значение в число, используя оператор + или Number(). Пример с оператором: +num.toFixed(5). Существуют функции parseInt и parseFloat. Они считывают число из строки. Первая функция возвращает целое число, а вторая – число с плавающей точкой. alert(parseInt('100px')); // 100alert(parseFloat('12.5em')); // 12.5 alert(parseInt('12.3')); // 12, вернётся только целая частьalert(parseFloat('12.3.4')); // 12.3, произойдёт остановка чтения на второй точке
Строки В JavaScript любые текстовые данные являются строками. Строку можно создать с помощью одинарных или двойных кавычек, поведение у них одинаковое. Если вдруг в строке необходимо сделать перевод строки, записывается он как \n: let guestList = "Guests:\n * John\n * Pete\n * Mary"; alert(guestList); // список гостей, состоящий из нескольких строк Результат:
В JavaScript существуют и другие спецсимволы, но они используются реже. Все они начинаются с символа \ (символ экранирования). Длина стоки определяется через свойство length: alert('Hello!'.length); // 6 Таким образом синтаксис свойства – str. length Доступ к символам Получить символ определенной позиции можно через метод charAt: str. charAt (pos). Первый символ занимает нулевую позицию: let str = 'Hello!'; // Получаем первый символ alert(str.charAt(0)); // H
Содержимое строки в JavaScript нельзя изменить. Можно создать новую строку и записать ее в туже самую переменную вместо старой. Методы toLowerCase () и toUpperCase () меняют регистр символов:
alert('Hello!'.toLocaleLowerCase()); // hello! alert('Hello!'.toLocaleUpperCase()); // HELLO!
В JavaScript можно осуществить поиск подстроки в строке. Делается это несколькими способами: 1. Через метод str. indexOf (substr, pos). он ищет подстроку substr в строке str, начиная с позиции pos и возвращает позицию, на которой располагается совпадение, либо -1 при отсутствии совпадения. Надо помнить, что поиск чувствителен к регистру символов. Второй аргумент в методе необязателен. 2. Более современный метод includes: str. includes (substr, pos) возвращает true, если в строке str есть подстрока substr, либо false, если нет. 3. Методы str. startsWith и str. endsWith проверяют, начинается ли и заканчивается ли строка определенной строкой. Для получения подстроки в JavaScript существует 3 метода: str. slice (start [, end ]) – возвращает часть строки от start до (не включая) end. Если аргумент end отсутствует, то метод возвращает символы до конца строки. Поддерживаются отрицательные значения, чтобы возвратить часть строки, начиная с конца. str. substring (start [, end ]) – возвращает часть строки между start и end. Отрицательные значения не поддерживаются. str. substr (start [, length ]) – возвращает часть строки от start длины length. Значение первого аргумента может быть отрицательным, тогда позиция определяется с конца. Сравнение строк – строки сравниваются посимвольно в алфавитном порядке. Строки кодируются в UTF-16. У любого символа есть соответствующий код. Существуют специальные методы, позволяющие получить символ по его коду и наоборот. str. codePointAt (pos) – возвращает код для символа, находящегося на позиции pos: alert("z".codePointAt(0)); // 122 alert("Z".codePointAt(0)); // 90
string. fromCodePoint (code) – создает символ по его коду code: alert(String.fromCodePoint(90)); // Z
Массивы В программировании часто возникает необходимость хранения списка похожих значений, например, всех дней недели или всех месяцев. Для работы с наборами данных предназначены массивы. Массив создается с помощью квадратных скобок [ ]. let arr = []; //создание массива arr Массив пока не содержит никаких значений. Заполним его названиями дней недели: let arr = ['пн', 'вт', 'ср', 'чт', 'пт', 'сб', 'вс']; Каждое значение списка называется элементом массива. Элементы разделяются между собой запятой. Если тип значения строковый, то элемент берется в кавычки, если числовой или булев, то без кавычек. В одном массиве можно хранить различные типы данных, массивы JavaScript не типизированы. let arr = ['пн', 256, 'ср', 34, 38, 'сб', 95]; Перебор элементов Старый способ перебора элементов массива – это через цикл for: let arr = ['пн', 'вт', 'ср', 'чт', 'пт', 'сб']; for (let i = 0; i < arr.length; i++){ alert(arr[i]); } Для массива возможен другой вариант цикла, for … of: let arr = ['пн', 'вт', 'ср', 'чт', 'пт', 'сб']; for (let ar of arr){ alert(ar); } Многомерный массив Элементами массива могут быть и другие массивы, т.е. получаем массив массивов или многомерный массив. Создадим массив студентов students, который содержит два подмассива: студенты юноши и студенты девушки. let students = { 'boys': ['Коля', 'Вася', 'Петя'], 'girls': ['Даша', 'Маша', 'Лена'], } alert(students['boys'][0]);
Чтобы вывести какой – либо элемент из многомерного массива, следует писать не одну пару [ ], а две: students [ ' boys ' ][0] – выведем Колю. Сведем основные методы для работы с массивами в таблицу:
Map и Set Map – коллекция пар ключ-значение. Методы и свойства: new Map([iterable]) – создаёт коллекцию, можно указать перебираемый объект (обычно массив) из пар [ключ, значение] для инициализации. map.set(key, value) – записывает по ключу key значение value. map.get(key) – возвращает значение по ключу или undefined, если ключ key отсутствует. map.has(key) – возвращает true, если ключ key присутствует в коллекции, иначе false. map.delete(key) – удаляет элемент по ключу key. map.clear() – очищает коллекцию от всех элементов. map.size – возвращает текущее количество элементов. Отличия от обычного объекта Object: Что угодно может быть ключом, в том числе и объекты. Есть дополнительные методы, свойство size. Set – коллекция уникальных значений, так называемое «множество». Методы и свойства: new Set([iterable]) – создаёт Set, можно указать перебираемый объект со значениями для инициализации. set.add(value) – добавляет значение (если оно уже есть, то ничего не делает), возвращает тот же объект set. set.delete(value) – удаляет значение, возвращает true если value было в множестве на момент вызова, иначе false. set.has(value) – возвращает true, если значение присутствует в множестве, иначе false. set.clear() – удаляет все имеющиеся значения. set.size – возвращает количество элементов в множестве. Перебор Map и Set всегда осуществляется в порядке добавления элементов, так что нельзя сказать, что это – неупорядоченные коллекции, но поменять порядок элементов или получить элемент напрямую по его номеру нельзя. Дата и время Объект Date - предоставляет полный набор методов для работы с датой и временем. Для создания объекта Date можно воспользоваться следующими способами: - Создать объект, содержащий текущую дату и время: let date = new Date(); alert(date);// показывает текущую дату
- Получить объект, содержащий дату 1 января 2018 года и время 0:00:00 let date = new Date(2018, 0, 1) - Создать объект, содержащий дату 7 декабря 2019 года и время 18:30:10 let date = new Date(2019, 11, 7, 18, 30, 10) Все операции с датами и временем производятся с помощью двух групп методов объекта Date. Первая группа служит для получения информации о дате и времени – ее методы начинаются со слова get. Их использование не влияет на содержимое объекта. Вторая группа методов служит для внесения изменений в экземпляр объекта. Методы этой группы начинаются со слова set. Рассмотрим некоторые методы объекта Date:
Целое число, представляющее собой количество миллисекунд, прошедших с начала 1970 года, называется таймстамп. Это число довольно часто используется в программировании. Получить его можно следующим образом: let date = new Date(); alert(+date);// формат таймстамп
или другим способом, который считается предпочтительнее:
alert(Date.now());// формат таймстамп
Браузерное окружение Язык JavaScript изначально создавался для веб – браузеров. В настоящее время он превратился в кроссплатформенный язык программирования для решения широкого круга задач. Сегодня язык можно использовать в браузере, на веб – сервере или другой среде. Каждая среда предоставляет свой функционал, который называется окружением. Окружение предоставляет свои объекты и дополнительные функции в дополнение базовым языковым.
На рисунке в общих чертах показано, что доступно для JavaScript в браузерном окружении. Корневым объектом является window, который выступает в 2-х ролях: 1. Это глобальный объект для JavaScript – кода; 2. Он представляет собой окно браузера и располагает методами для управления им. Используем window как глобальный объект: function sayHi() { alert("Hello"); } // глобальные функции доступны как методы глобального объекта: window.sayHi();
Здесь будем использовать window как объект окна браузера, чтобы узнать его высоту: alert(window.innerHeight); // внутренняя высота окна браузера Подробнее о DOM Основой HTML документа являются теги. В соответствии с моделью документа, каждый HTML – тег является объектом. Вложенные теги являются «детьми» родительского элемента. Текст, который находится внутри тега, также является объектом. Все эти объекты доступны и при помощи JavaScript, мы можем использовать их для изменения страницы. Например, document. body – это объект для тега <body>. DOM – это представление HTML – документа в виде дерева тегов. Каждый узел этого дерева – это объект. Узлы бывают корневыми, дочерними, текстовыми, узлами – комментариями. Всего существует 12 типов узлов, но в основном работают с 4 из них: 1. document – входная точка; 2. Узлы – элементы – теги HTML, основные строительные блока; 3. Текстовые узла – содержать текст; 4. Комментарии. Атрибуты и свойства Когда браузер загружает страницу, он «читает» («парсит») HTML и генерирует из него DOM – объекты. Для узлов – элементов большинство стандартных HTML – атрибутов автоматически становятся свойствами DOM – объектов. Например, для такого тега <body id = “page”> у DOM – объекта будет такое свойство body.id=”page”. DOM - свойства DOM – узлы – это обычные объекты JavaScript. Их можно изменять. Например, создадим новое свойство для document.body: document.body.myData = { name: 'Caesar', title: 'Imperator' };
alert(document.body.myData.title); // Imperator
Методы для работы с атрибутами: elem. hasAttribute (name) – проверяет на наличие; elem. getAttribute (name) – получает значение; elem. setAttribute (name, value) – установить значение; elem.removeAttribute(name) – удаляет атрибут; elem. attributes – это коллекция всех атрибутов. Изменение документа Модификации DOM – это ключ к созданию «живых» страниц. Рассмотрим, как создавать новые элементы «на лету» и изменять уже существующие. Пример: показать сообщение <style> .alert { padding: 15px; border: 1px solid #d6e9c6; border-radius: 4px; color: #3c763d; background-color: #dff0d8; } </style>
<div class="alert"> <strong>Всем привет!</strong> Вы прочитали важное сообщение. </div>
Данный пример реализован на HTML + CSS. Теперь создадим такой же div, используя JavaScript. Предположим, что стили находятся в HTML или во внешнем файле CSS. Создать элемент (DOM – узел) можно двумя методами: 1. document. createElement (tag) – создает новый элемент с заданным тегом: let div = document.createElement('div'); 2. document. createTextNode (text) – создаем новый текстовый узел с заданным текстом: let textNode = document.createTextNode('А вот и я'); Создание сообщения В нашем примере сообщение – это div с классом alert и HTML в нем: let div = document.createElement('div'); div.className = "alert"; div.innerHTML = "<strong>Всем привет!</strong> Вы прочитали важное сообщение.";
Мы создали элемент, но пока он только в переменной. Мы его еще не можем видеть на странице, т.к. он не является частью документа. Чтобы наш div появился, нам нужно его где–нибудь вставить в document. Например, в document. body. Для этого есть метод append, в нашем случае: document. body. append (div). Полный код: <style> .alert { padding: 15px; border: 1px solid #d6e9c6; border-radius: 4px; color: #3c763d; background-color: #dff0d8; } </style>
<script> let div = document.createElement('div'); div.className = "alert"; div.innerHTML = "<strong>Всем привет!</strong> Вы прочитали важное сообщение.";
document.body.append(div); </script>
Методы для различных вариантов вставки: node. append (… nodes or srtings) – добавляет узлы или строки в конце node; node. prepend (… nodes or srtings) – добавляет узлы или строки в начало node; node. before (… nodes or srtings) – добавляет узлы или строки до node; node. after (… nodes or srtings) – добавляет узлы или строки после node; node. replaceWith (… nodes or srtings) – заменяет node заданными узлами или строками. Древний метод добавления содержимого на веб – страницу: document. write <p>Где-то на странице...</p> <script> document.write('<b>Привет из JS</b>'); </script> <p>Конец</p> Параметры функции Мы можем передавать функции информацию, используя параметры (аргументы функции). Рассмотрим передачу параметров функции: function display(x){ // определение функции
let z = x * x; document.write("Квадрат " + x + " равен " + z); }
display(5); // вызов функции Функция display принимает параметр – х. Поэтому при вызове функции мы можем передавать для него значение. В данном примере, передавалось число 5. Необязательные параметры Функция может принимать множество параметров, но при этом часть или все параметры могут быть необязательными. Если для параметров не передается значение, то по умолчанию они принимают значение undefined. function display(x, y){
if(y === undefined) y = 5; if(x === undefined) x = 8; let z = x * y; document.write (z); } display(); // 40 display(6); // 30 display(6, 4) // 24
Функция display принимает два параметра. При вызове функции можно проверить их значения, при вызове функции необязательно передавать для этих параметров значения. Проверка осуществится сравнением со значением undefined. Значения параметров по умолчанию также можно определить следующим образом:
function display(x = 5, y = 8){
let z = x * y; document.write (z); } display(); // 40 display(6); // 30 display(6, 4) // 24
Если параметрам x и y не передавать значения, то они получают в качестве значений числа 5 и 8 соответственно. Такой способ более удобен. Значение параметра по умолчанию может быть производным, представлять выражение: function display(x = 5, y = 8 + x){ let z = x * y; document.write (z); } display(); // 65 display(6); // 84 display(6, 4) // 24
Возврат значения Функцияможет возвращать результат. Для этого используется оператор return: function sum(a, b) {
return a + b; } let result = sum(2, 3); alert(result);// выведет 5
Оператор return может находиться в любом месте тела функции. Как только выполнение доходит до этого места, функция останавливается, и значение возвращается в вызвавший ее код (присваивается переменной result). Вызовов return может быть несколько, например: function checkAge(age) { if (age > 18) { return true; } else { return con | |||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||
|
| Поделиться: |
Последнее изменение этой страницы: 2021-02-07; просмотров: 136; Нарушение авторского права страницы; Мы поможем в написании вашей работы!
infopedia.su Все материалы представленные на сайте исключительно с целью ознакомления читателями и не преследуют коммерческих целей или нарушение авторских прав. Обратная связь - 3.149.229.253 (0.472 с.)