Лабораторная работа 1. Основы JavaScript Как запустить JavaScript
 Скачать 0.94 Mb.
|
|
Свойства объекта Существует и другой способ обратиться к элементу объекта - используя обращение не через квадратные скобки, а через точку: не obj['key'], а obj.key. В этом случае говорят, что мы обращаемся к свойству объекта. Смотрите пример: var obj = {key1: 200, key2: 300, key2: 400}; alert(obj.key1); //выведет 200 При таком способе обращения на названия свойств (то есть ключей) накладываются ограничения: они не должны начинаться с цифры, не должны иметь символ дефиса или символ пробела внутри. Если у вас есть такой ключ - используйте обращение через квадратные скобки. Как еще можно создать массив или объект Вместо { } и [ ] можно пользоваться Object() и Array() соответственно (это просто альтернативный синтаксис). Давайте создадим объект вторым синтаксисом: var obj = new Object(key1: 200, key2: 300, key2: 400); alert(obj['key1']); //выведет 200 Давайте создадим массив вторым синтаксисом: var arr = Array('пн', 256, 'ср', 34, 38, 'сб', 95); Создание объекта через { } и через Object() эквивалентно, вы можете пользоваться тем способом, который вам удобнее. А вот с массивом не все так просто. Разница между ними проявляется в случае, если вы хотите сделать массив, состоящий из одного элемента, который будет целым числом, вот так: var arr = Array(10); В этом случае получим не такой массив: var arr = [10]; 13 А вот такой: var arr = [,,,,,,,,,]; Это будет массив, состоящий из 10-ти пустых элементов (их значение будет undefined), а не массив из одного элемента 10, как мы хотели бы. Заполнение массива Массив можно заполнять не на этапе его создания, а потом. В следующем примере я вначале объявил, что переменная arr - массив, а потом заполнил его данными: var arr = [] arr[0] = 1; arr[1] = 2; arr[2] = 3; alert(arr) //с помощью alert выводим содержимое массива Также можно поступать и с объектами: var obj = {}; obj['Коля'] = 100; obj['Вася'] = 200; obj['Петя'] = 300; Многомерный массив Элементы массива могут быть не только строками и числами, но и массивами. То есть у нас получится массив массивов или многомерный массив. Давайте сделаем массив студентов students, который будет содержать два подмассива: студенты мужского пола и женского: //Многомерный массив студентов: var students = { 'boys': ['Коля', 'Вася', 'Петя'], 'girls': ['Даша', 'Маша', 'Лена'], }; Чтобы вывести какой-либо элемент из многомерного массива следует писать уже не одну пару [ ], а две: students['boys'][0] – так мы выведем 'Коля'. Примеры решения задач Задача Задача. Дан массив с элементами 'Привет, ', 'мир' и '!'. Необходимо вывести на экран фразу 'Привет, мир!'. Решение: //Выведем фразу 'Привет, мир!': var arr = ['Привет, ', 'мир', '!']; alert(arr[0] + arr[1] + arr[2]); 14 Разберем это решение: слово 'Привет, ' хранится под номером 0, это значит, что для доступа к нему мы должны написать arr[0]. Для доступа к слову 'мир' мы должны написать arr[1], а arr[2] содержит в себе '!'. Далее с помощью оператора '+' мы сложим три наши строки ('Привет, ', 'мир' и '!') в одну строку таким образом arr[0] + arr[1] + arr[2], и выведем на экран с помощью alert. Задача Задача. Решим немного другую задачу: дан массив с элементами 'Привет, ', 'мир' и '!'. Необходимо записать в переменную text фразу 'Привет, мир!', а затем вывести на экран содержимое этой переменной. Решение: //Выведем фразу 'Привет, мир!': var arr = ['Привет, ', 'мир', '!']; var str = arr[0] + arr[1] + arr[2]; //в переменной text теперь лежит строка 'Привет, мир!' alert(str); Задача Задача. Дан массив ['Привет, ', 'мир', '!']. Необходимо записать в нулевой элемент этого массива слово 'Пока, ' (то есть вместо слова 'Привет, ' будет 'Пока, '). Решение: var arr = ['Привет, ', 'мир', '!']; arr[0] = 'Пока, '; //перезапишем нулевой элемент массива alert(arr); //посмотрим на массив и убедимся в том, что он изменился Задача . Объекты (ассоциативные массивы) Задача. Создайте ассоциативный массив (объект) заработных плат obj. Выведите на экран зарплату Пети и Коли. //Этот объект дан: var obj = {'Коля':'1000', 'Вася':'500', 'Петя':'200'}; Решение: Чтобы вывести зарплату Коли следует вывести значение элемента объекта с ключом 'Коля'. Сделаем это: var obj = {'Коля':'1000', 'Вася':'500', 'Петя':'200'}; alert(obj['Коля']); //выведет 1000 Задача . Способы создания массива Задача. Создайте массив arr с элементами 1, 2, 3, 4, 5 двумя различными способами. Решение: Первый способ создать массив - объявить его через [ ]: var arr = [1, 2, 3, 4, 5]; 15 Второй способ создания массива - это поступить таким образом: var arr = []; arr[0] = 1; arr[1] = 2; arr[2] = 3; arr[3] = 4; arr[4] = 5; Задача . Многомерный массив Задача. Дан многомерный массив arr: var arr = { 'ru':['голубой', 'красный', 'зеленый'], 'en':['blue', 'red', 'green'], }; Выведите с его помощью слово 'голубой'. Решение: так как массив многомерный (в нашем случае двухмерный), то нам придется написать несколько квадратных скобок подряд. Поясню это по шагам. Давайте сделаем так: alert(arr['ru']); В этом случае результатом будет массив ['голубой','красный', 'зеленый'], который является частью нашего многомерного массива. Чтобы вывести слово 'голубой', необходимо дописать еще одну квадратную скобку с ключом, соответствующим этому элементу (у него нет явного ключа - значит его ключ 0): alert(arr['ru'][0]); //выведет 'голубой' Выведем теперь слово 'красный': alert(arr['ru'][1]); //выведет 'красный' Выведем 'red': alert(arr['en'][1]); //выведет 'red' Задачи для решения Работа с массивами Создайте массив arr = ['a', 'b', 'c']. Выведите его на экран с помощью функции alert. С помощью массива arr из предыдущего номера выведите на экран содержимое первого, второго и третьего элементов. Создайте массив arr = ['a', 'b', 'c', 'd'] и с его помощью выведите на экран строку 'a+b, c+d'. 16 Создайте массив arr с элементами 2, 5, 3, 9. Умножьте первый элемент массива на второй, а третий элемент на четвертый. Результаты сложите, присвойте переменной result. Выведите на экран значение этой переменной. Объекты (ассоциативные массивы) Создайте объект obj. Выведите на экран элемент с ключом 'c' двумя способами: через квадратные скобки и как свойство объекта: var obj = {a: 1, b: 2, c: 3}; Создайте массив заработных плат obj. Выведите на экран зарплату Пети и Коли. var obj = {Коля: '1000', Вася: '500', Петя: '200'}; Создайте объект с днями недели. Ключами в нем должны служить номера дней от начала недели (понедельник - первый и т.д.). Выведите на экран текущий день недели. Пусть теперь номер дня недели хранится в переменной day, например там лежит число 3. Выведите день недели, соответствующий значению переменной day. Многомерные массивы Дан массив [ [1, 2, 3], [4, 5, 6], [7,8,9] ]. Выведите на экран цифру 4 из этого массива. Дан объект {js:['jQuery', 'Angular'], php: 'hello', css: 'world'}. Выведите с его помощью слово 'jQuery'. Создайте двухмерный массив. Первые два ключа - это 'ru' и 'en'. Пусть первый ключ содержит элемент, являющийся массивом названий дней недели по-русски, а второй - по- английски. Выведите с помощью этого массива понедельник по-русски и среду по английски (пусть понедельник - это нулевой день). Пусть теперь в переменной lang хранится язык (она принимает одно из значений или 'ru', или 'en' - либо то, либо то), а в переменной day - номер дня. Выведите словом день недели, соответствующий переменным lang и day. То есть: если, к примеру, lang = 'ru' и day = 3 - то выведем 'среда'. 17 Лабораторная работа №3. Работа с конструкциями if-else, switch-case в JavaScript Конструкция if-else Для того, чтобы напрограммировать что-нибудь полезное, одних переменных далеко не достаточно. Нам нужен механизм, который позволит выполнять определенный код в зависимости от каких-либо условий. То есть нам нужно иметь возможность спросить у JavaScript 'Если'. Например так: если эта переменная меньше нуля, то вывести 'отрицательно', иначе (то есть если она больше нуля) вывести 'положительно'. В JavaScript для таких вопросов предназначена конструкция if, которая позволяет выполнять определенный код при выполнении какого-либо условия: if (логическое выражение) { Этот код выполниться, если логическое выражение верно (то есть равно true) } else { Этот код выполнится, если логическое выражение неверно (то есть равно false) } Обратите внимание на то, что блок else не обязателен. Логическое выражение представляет собой тот самый вопрос, который мы хотим задать JavaScript. Например, чтобы спросить 'переменная a больше нуля' мы напишем так: a > 0. Примеры работы: var a = 3; /* Если переменная a больше нуля, то выведи 'верно', иначе (если меньше или равна нулю) выведи 'неверно' */ if (a > 0) {alert('Верно!');} else {alert('Неверно!');} //выведет 'Верно!' var a = -3; /* Если переменная a больше или равна нулю, то выведи 'верно', иначе (если меньше нуля) выведи 'неверно' */ if (a >= 0) {alert('Верно!');} else {alert('Неверно!');} //выведет 'Неверно!' Сокращенный синтаксис 18 В случае, если в фигурных скобках if или else будет только одно выражение, можно эти фигурные скобки не писать: //Полный вариант: if (a == 0) {alert('Верно!');} else {alert('Неверно!');} //Уберем скобки после if: if (a == 0) alert('Верно!'); else {alert('Неверно!');} //Уберем скобки после else: if (a == 0) {alert('Верно!');} else alert('Неверно!'); /* Уберем скобки и после if, и после else (обратите внимание на точку с запятой - она осталась): */ if (a == 0) alert('Верно!'); else alert('Неверно!'); Равенство по значению и типу Для того, чтобы сравнить на равенство следует использовать оператор двойное равно ==, а не одиночное =, как можно было подумать. Почему так? Потому что одиночное равно зарезервировано за присваиванием. Смотрите пример: var a = 0; /* Если переменная a равна нулю, то выведи 'верно', иначе (если не равна нулю) выведи 'неверно' */ if (a == 0) alert('Верно!'); else alert('Неверно!'); //выведет 'Верно!' А следующий пример работать будет не так, как мы думаем: var a = 0; /* Мы думаем оно работает так: если переменная a равна нулю, то выведи 'верно', иначе (если не равна нулю) выведи 'неверно'. На самом деле оно работает так: переменной a присвоить 1, если удалось присвоить - то выведи 'верно', иначе (если не удалось присвоить) выведи 'неверно'. */ if (a = 1) alert('Верно!'); else alert('Неверно!'); //всегда будет выводить 'Верно!' Кроме оператора == существует еще и оператор ===. Их различие в том, что === сравнивает не только по значению, но и по типу, а == сравнивает только по значению. Чтобы полностью разобраться в этом внимательно изучите примеры: var a = '0'; //переменная a представляет собой строку, а не число 0 19 if (a == 0) alert('Верно!'); else alert('Неверно!'); /* Выведет 'Верно!', так как проверяется только значение, но не тип. Поэтому '0' равен 0. */ var a = '0'; //переменная a представляет собой строку, а не число 0 if (a === 0) alert('Верно!'); else alert('Неверно!'); /* Выведет 'Неверно!', так как строка '0' не равна числу 0 при сравнении по типу. */ Не равно Для того, чтобы спросить 'не равно', существует операторы != и !==. Первый игнорирует различие в типах, а второй - нет. var a = 0; /* Если переменная a НЕ равна нулю, то выведи 'верно', иначе (если равна нулю) выведи 'неверно' */ if (a != 0) alert('Верно!'); else alert('Неверно!'); //выведет 'Неверно!', так как a равна 0 a = 1; /* Если переменная a НЕ равна нулю, то выведи 'верно', иначе (если равна нулю) выведи 'неверно' */ if (a != 0) alert('Верно!'); else alert('Неверно!'); //выведет 'Верно!', так как a равна 1 var a = '0'; /* Если переменная a НЕ равна нулю, то выведи 'верно', иначе (если равна нулю) выведи 'неверно' */ if (a != 0) alert('Верно!'); else alert('Неверно!'); /* Выведет 'Неверно!', так как a равно '0', а различие в типах игнорируется. */ var a = '0'; /* Если переменная a НЕ равна нулю, то выведи 'верно', иначе (если равна нулю) выведи 'неверно' */ if (a !== 0) alert('Верно!'); else alert('Неверно!'); /* Выведет 'Верно!', так как a равно '0', а это не равно 0 при сравнении по типу. */ 20 Все операции сравнения Возможные операции сравнения, которые можно использовать внутри if: a == b a равно b a === b a равно b и они одинаковы по типу a != b a не равно b a !== b a не равно b или a равно b, но ни разные по типу a < b a меньше b a > b a больше b a <= b a меньше или равно b a >= b a больше или равно b Несколько условий сразу Иногда может быть нужно составить какое-то сложное условие, например, пользователь вводит месяц своего рождения и вам нужно проверить, что введенное число больше или равно 1 и меньше либо равно 12 (так как в году 12 месяцев). Для этого существуют операторы && (логическое И) и || (логическое ИЛИ). var a = 3; var b = -3; //Если a больше нуля и b одновременно меньше нуля то... if (a > 0 && b < 0) alert('Верно!'); else alert('Неверно!'); //выведет 'Верно!' var a = 3; //Если a больше или равно 1 и меньше или равно 12 то... if (a >= 1 && a <= 12) alert('Верно!'); else alert('Неверно!'); //выведет 'Верно!' var a = -3; var b = -3; /* Если a больше нуля ИЛИ b меньше нуля - хотя бы один из них, то... выведет 'Верно!', так как хотя a и не больше нуля, но одно из условий - b < 0 - выполнится! */ if (a > 0 || b < 0) alert('Верно!'); else alert('Неверно!'); Работа с логическими переменными Многие функции JavaScript в результате своей работы возвращают либо true (истина), либо false (ложь). Эти значения довольно удобны при своей работе, но новичкам бывает довольно сложно понять их. Представим себе, что переменная a равна true. В таком случае конструкцию if можно записать так: 21 var a = true; //Если a равно true, то... if (a == true) alert('Верно!'); else alert('Неверно!'); /* Выведет 'Верно!', так как a равно true. */ Так как такие сравнения довольно распространены в JavaScript, то существует специальный прием, облегчающий работу (но не понимание, к сожалению). Прием такой: конструкцию a == true можно заменить на более простую: вместо if (a == true) написать if (a) и она будет работать аналогично. Следует пользоваться второй конструкцией, так как она проще. /* Заменим a == true на более простую: вместо if (a == true) напишем if (a): */ var a = true; //Если a равно true, то... if (a) alert('Верно!'); else alert('Неверно!'); //выведет 'Верно!', так как a равно true var a = true; //Если a НЕ true (то есть false!), то... if (!a) alert('Верно!'); else alert('Неверно!'); //выведет 'Неверно!', так как a равно true Также обратите внимание на следующие примеры: //Данное выражение всегда будет выводить 'Верно' if (true) alert('Верно!'); else alert('Неверно!'); //Данное выражение всегда будет выводить 'Неверно' if (false) alert('Верно!'); else alert('Неверно!'); //Данное выражение всегда будет выводить 'Неверно' if (!true) alert('Верно!'); else alert('Неверно!'); //Данное выражение всегда будет выводить 'Верно' if (!false) alert('Верно!'); else alert('Неверно!'); Вложенные if Предположим, нам необходимо спросить у JavaScript такую вещь: если переменная a не определена, то вывести 'Введите a', если определена, то проверить - больше нуля a или нет. Если больше нуля - то вывести 'Больше нуля!', если меньше - вывести 'Меньше нуля'. Одной конструкцией if здесь не обойтись, нужно использовать две таким образом, чтобы одна была внутри другой: if (a === undefined) { //если переменная a не определена alert('Введите a!'); } else { //если переменная a НЕ пуста 22 if (a > 0) { //спрашиваем, больше ли нуля переменная a alert('Больше нуля!'); } else { alert('Меньше нуля!'); } } Конструкция else if Недостатком конструкции предыдущего примера является большое количество фигурных скобок. Чтобы избавиться от них, можно пользоваться специальной конструкцией else if, которая представляет собой одновременно и else, и начало вложенного if: //Решение предыдущей задачи через конструкцию else if: if (a === undefined) { alert('Введите a!'); } else if (a > 0) { alert('Больше нуля!'); } else { alert('Меньше нуля!'); } Можно использовать несколько else if, но злоупотреблять этим не стоит (лучше будет воспользоваться конструкцией switch-case, о которой ниже). Несколько if Пусть у нас есть такая задача: сайт поддерживает 3 языка - русский, английский, немецкий. Переменная |