Лабораторная работа 1. Основы JavaScript Как запустить JavaScript
 Скачать 0.94 Mb.
|
|
lang может принимать 3 значения - 'ru', 'en' и 'de'. В зависимости от значения переменной lang следует вывести фразу на одном из языков. Решение: можно было бы воспользоваться вложенными ифами или else if. Выглядело бы это примерно так: //Решение задачи через else if – не самое удачное: if (lang == 'ru') { //фраза на русском alert('Русский текст'); } else if (lang == 'en') { //фраза на английском alert('Английский текст'); } else if (lang == 'de') { //фраза на немецком alert('Немецкий текст'); } Такое решение не слишком красивое - блок else здесь не нужен! Проще всего будет написать не один длинный if с несколькими else, а несколько if вообще без else: //Решение задачи через несколько if – оно намного лучше: if (lang == 'ru') { //фраза на русском alert('Русский текст'); } if (lang == 'en') { //фраза на английском alert('Английский текст'); } if (lang == 'de') { //фраза на немецком 23 alert('Немецкий текст'); } /* В данном коде сработает только один из ифов, так как переменная lang может иметь только одно из значений */ Однако это решение тоже не слишком удобно. Представьте, что у вас будет не три языка, а 10 - вам придется написать 10 конструкций if. Для таких случаев существует конструкция switch-case. Конструкция switch-case Данная конструкция представляет собой альтернативу if-else, ее рекомендуется использовать в случае множественного выбора (например, 10 различных языков, как в нашей задаче). Изучите ее синтаксис: switch (переменная) { case 'значение1': здесь код, который выполнится в случае, если переменная имеет значение1; break; case 'значение2': здесь код, который выполнится в случае, если переменная имеет значение2; break; case 'значение3': здесь код, который выполнится в случае, если переменная имеет значение3; break; default: этот код выполнится в случае, если переменная не совпала ни с одним значением; break; } Решим нашу задачу с тремя языками с помощью данной конструкции: switch (lang) { case 'ru': alert('Русский текст'); break; case 'en': alert('Английский текст'); break; case 'de': alert('Немецкий текст'); break; default: alert('Данный язык не поддерживается'); break; } Примеры решения задач 24 Задача Задача. Если переменная a равна 10, то выведите 'Верно', иначе выведите 'Неверно'. Решение: var num = 10; if (num == 10) { alert('Верно'); } else { alert('Неверно'); } Задача Задача. В переменной min лежит число от 0 до 59. Определите в какую четверть часа попадает это число (в первую, вторую, третью или четвертую). Решение: var min = 10; if (min >= 0 && min <= 14) { alert('В первую четверть.'); } if (min >= 15 && min <= 30) { alert('Во вторую четверть.'); } if (min >= 31 && min <= 45) { alert('В третью четверть.'); } if (min >= 46 && min <= 59) { alert('В четвертую четверть.'); } Задача Переменная lang может принимать 2 значения: 'ru' 'en'. Если она имеет значение 'ru', то в переменную arr запишем массив дней недели на русском языке, а если имеет значение 'en' – то на английском. Решите задачу через 2 if, через switch-case и через многомерный массив без ифов и switch. Решение: Решение через 2 if: var lang = 'ru'; if (lang == 'ru') { var arr = ['пн', 'вт', 'ср', 'чт', 'пт', 'сб', 'вс']; } if (lang == 'en') { arr = ['mn', 'ts', 'wd', 'th', 'fr', 'st', 'sn']; } alert(arr); Решение через switch-case: var lang = 'ru'; 25 switch (lang) { case 'ru': var arr = ['пн', 'вт', 'ср', 'чт', 'пт', 'сб', 'вс']; break; case 'en': arr = ['mn', 'ts', 'wd', 'th', 'fr', 'st', 'sn']; break; } alert(arr); Решение через многомерный массив: var lang = 'ru'; var arr = { 'ru':['пн', 'вт', 'ср','чт', 'пт', 'сб', 'вс'], 'en':['mn', 'ts', 'wd', 'th', 'fr', 'st', 'sn'], }; alert(arr[lang]); Задачи для решения Работа с if-else Если переменная a равна нулю, то выведите 'Верно', иначе выведите 'Неверно'. Проверьте работу скрипта при a, равном 1, 0, -3. Если переменная a больше нуля, то выведите 'Верно', иначе выведите 'Неверно'. Проверьте работу скрипта при a, равном 1, 0, -3. Если переменная a меньше нуля, то выведите 'Верно', иначе выведите 'Неверно'. Проверьте работу скрипта при a, равном 1, 0, -3. Если переменная a больше или равна нулю, то выведите 'Верно', иначе выведите 'Неверно'. Проверьте работу скрипта при a, равном 1, 0, -3. Если переменная a меньше или равна нулю, то выведите 'Верно', иначе выведите 'Неверно'. Проверьте работу скрипта при a, равном 1, 0, -3. Если переменная a не равна нулю, то выведите 'Верно', иначе выведите 'Неверно'. Проверьте работу скрипта при a, равном 1, 0, -3. Если переменная a равна 'test', то выведите 'Верно', иначе выведите 'Неверно'. Проверьте работу скрипта при a, равном 'test', 'тест', 3. Если переменная a равна '1' и по значению и по типу, то выведите 'Верно', иначе выведите 'Неверно'. Проверьте работу скрипта при a, равном '1', 1, 3. Работа с логическими переменными Если переменная test равна true, то выведите 'Верно', иначе выведите 'Неверно'. Проверьте работу скрипта при test, равном true, false. Напишите два варианта скрипта - с короткой записью и с длинной. 26 Если переменная test не равна true, то выведите 'Верно', иначе выведите 'Неверно'. Проверьте работу скрипта при test, равном true, false. Напишите два варианта скрипта - с короткой записью и с длинной. Работа с && (и) и || (или) Если переменная a больше нуля и меньше 5-ти, то выведите 'Верно', иначе выведите 'Неверно'. Проверьте работу скрипта при a, равном 5, 0, -3, 2. Если переменная a равна нулю или равна двум, то прибавьте к ней 7, иначе поделите ее на 10. Выведите новое значение переменной на экран. Проверьте работу скрипта при a, равном 5, 0, -3, 2. Если переменная a равна или меньше 1, а переменная b больше или равна 3, то выведите сумму этих переменных, иначе выведите их разность (результат вычитания). Проверьте работу скрипта при a и b, равном 1 и 3, 0 и 6, 3 и 5. Если переменная a больше 2-х и меньше 11-ти, или переменная b больше или равна 6-ти и меньше 14-ти, то выведите 'Верно', в противном случае выведите 'Неверно'. На switch-case Переменная num может принимать 4 значения: 1, 2, 3 или 4. Если она имеет значение '1', то в переменную result запишем 'зима', если имеет значение '2' – 'весна' и так далее. Решите задачу через switch-case. Задачи В переменной day лежит какое-то число из интервала от 1 до 31. Определите в какую декаду месяца попадает это число (в первую, вторую или третью). В переменной month лежит какое-то число из интервала от 1 до 12. Определите в какую пору года попадает этот месяц (зима, лето, весна, осень). Дана строка, состоящая из символов, например, 'abcde'. Проверьте, что первым символом этой строки является буква 'a'. Если это так - выведите 'да', в противном случае выведите 'нет'. Дана строка с цифрами, например, '12345'. Проверьте, что первым символом этой строки является цифра 1, 2 или 3. Если это так - выведите 'да', в противном случае выведите 'нет'. Дана строка из 3-х цифр. Найдите сумму этих цифр. То есть сложите как числа первый символ строки, второй и третий. Дана строка из 6-ти цифр. Проверьте, что сумма первых трех цифр равняется сумме вторых трех цифр. Если это так - выведите 'да', в противном случае выведите 'нет'. 27 Лабораторная работа №4. Работа с циклами for и while в JavaScript Циклы используются для того, чтобы некоторый участок кода выполнился несколько раз подряд. Зачем это нужно - представьте, что вам нужно возвести в квадрат 100 элементов массива. Если обращаться к каждому элементу отдельно по его ключу - это займет 100 строчек кода, и для того, чтобы написать этого код, нужно будет потратить довольно много времени. Но это не нужно - у нас есть возможность сделать так, чтобы JavaScript за нас выполнил некоторую операцию нужное количество раз. Например, возвел все элементы массива в квадрат. Делается это с помощью циклов. Цикл while Цикл while будет выполняться до тех пор, пока верно (истинно) выражение, переданное ему параметром. Смотрите синтаксис: while ( пока выражение истинно ) { выполняем этот код циклически; в начале каждого цикла проверяем выражение в круглых скобках } /* Цикл закончится, когда выражение перестанет быть истинным. Если оно было ложным изначально - то он не выполнится ни разу! */ В принципе, цикл while может выполняться бесконечно (но это приведет к зависанию скрипта!), достаточно передать ему выражение, которое никогда не станет ложным. Например, так: var test = true; while (test === true) { /* Написанный здесь код будет выполняться 'вечно' (пока скрипт не будет остановлен принудительно). Не стоит это повторять - это приведет к зависанию сервера! */ } Давайте последовательно выведем с помощью цикла while числа от одного до пяти: var i = 0; //счетчик цикла while (i < 5) { /* С помощью оператора ++ увеличиваем i на единицу 28 при каждом проходе цикла. */ i++; alert(i); } Обратите внимание на переменную i – она является так называемым счетчиком цикла. Счетчики используются для того, чтобы подсчитывать, сколько раз выполнился цикл. Кроме того, они выполняют вспомогательную роль - в нашей задаче мы использовали счетчик, чтобы вывести цифры от 1 до 5. Для счетчиков принято использовать буквы i, j и k. Цикл for Цикл for является альтернативой while. Он более сложен для понимания, но чаще всего его любят больше, чем while за то, что он занимает меньше строчек. for ( начальные команды; условие окончания цикла; команды после прохода цикла ) { тело цикла } Начальные команды - это то, что выполнится перед стартом цикла. Они выполнятся только один раз. Обычно там размещают начальные значения счетчиков, пример: i = 0. Условие окончания цикла - пока оно истинное, цикл будет работать, пример: i <10. Команды после прохода цикла - это команды, которые будут выполнятся каждый раз при окончании прохода цикла. Обычно там увеличивают счетчики, например: i++. Давайте с помощью цикла for выведем последовательно числа от 0 до 9: /* В начале цикла i будет равно нулю, цикл будет выполнятся пока i < 10, после каждого прохода к i прибавляется единица: */ for (var i = 0; i < 10; i++) { alert(i); //выведет 0, 1, 2... 9 } Цикл без тела Фигурные скобки в циклах можно не указывать - в этом случае цикл выполнит только одну строку под ним (не рекомендую так делать, часто приводит к ошибкам): for (var i = 0; i < 10; i++) //<--- точки с запятой нет alert(i); //выведет 0, 1, 2... 9 А вот если после ) поставить точку с запятой - цикл закроется и следующая строка в него не попадет, получится так называемый цикл без тела, который в нашем случае просто прокрутится и в результате изменит значение переменной i: for (var i = 0; i < 10; i++); //<--- точка с запятой есть 29 alert(i); //выведет 9 Такой цикл иногда используется, вы увидите примеры его применения при разборах задач на циклы. Несколько команд в цикле for Если нам необходимо выполнить несколько команд в круглых скобках - указываем их через запятую: for (var i = 0, j = 2; i < 10; i++, j++, i = i + j) { } Давайте разберем приведенный цикл: до прохода цикла выполнятся две команды: var i = 0, j = 2 (обратите внимание на то, что var тут пишется один раз), а после каждой итерации - целых три: i++, j++, i = i + j. Этот пример с точки зрения программирования никакой особой пользы не несет, просто схематически показывает, что так можно делать. Запомните его, в дальнейшем это вам пригодится. Цикл for для массивов С помощью цикла for можно последовательно перебрать элементы массива. Делается это следующим образом: var arr = [1, 2, 3, 4, 5]; for (var i = 0; i <= arr.length-1; i++) { alert(arr[i]); //выведет 1, 2, 3, 4, 5 } Ключевым моментом является то, что мы делаем перебор от нуля до длины массива минус 1 (так как номер последнего элемента массива на единицу меньше его длины). Можно не отнимать единицу, а место <= сделать <: var arr = [1, 2, 3, 4, 5]; for (var i = 0; i < arr.length; i++) { alert(arr[i]); //выведет 1, 2, 3, 4, 5 } Цикл for-in Для перебора объекта используется так называемый цикл for-in. Давайте посмотрим, как он работает. Пусть у нас дан такой объект: var obj = {Коля: 200, Вася: 300, Петя: 400}; Давайте выведем его ключи. Для этого используем такую конструкцию: for (key in obj), где obj - это объект, который мы перебираем, а key - это переменная, в которую 30 последовательно будут ложится ключи объекта (ее название может быть любым, какое придумаете - такое и будет). То есть в данном цикле не надо указывать условие окончания - он будет перебирать ключи объекта, пока они не закончатся. Итак, вот так мы выведем все ключи объекта (по очереди): var obj = {Коля: 200, Вася: 300, Петя: 400}; for (key in obj) { alert(key); //выведет 'Коля', 'Вася', 'Петя' } Если нам нужны не ключи, а значения, нужно обратиться к нашему объекту по ключу, вот так: obj[key]. Как это работает: в переменной key сначала будет 'Коля', то есть obj[key] в данном случае все равно, что obj['Коля'], при следующем проходе цикла в переменной key будет 'Вася' и так далее. Итак, выведем все элементы объекта: var obj = {Коля: 200, Вася: 300, Петя: 400}; for (key in obj) { alert(obj[key]); //выведет 200, 300, 400 } Инструкция break Иногда нам необходимо прервать выполнение цикла досрочно, в случае с циклом for это значит до того, как цикл переберет все элементы массива. Зачем такое может понадобится? Например, перед нами стоит задача выводить элементы массива до тех пор, пока не встретится число 3. Как только встретится - цикл должен завершить свою работу. Такое можно сделать с помощью инструкции break - если выполнение цикла дойдет до нее, цикл закончит свою работу. Давайте решим приведенную выше задачу - оборвем цикл, как только нам встретится число 3: var arr = [1, 2, 3, 4, 5]; for (var i = 0; i < arr.length; i++) { if (arr[i] === 3) { break; //выходим из цикла } else { alert(arr[i]); } } Инструкция continue 31 Существует также инструкция continue, при достижении которой цикл начинает новую итерацию. Иногда может быть полезна для упрощения кода, хотя практически всегда задачу можно решить и без нее. Примеры решения задач Задача Задача. Выведите столбец чисел от 1 до 50. Решение: воспользуемся циклом while (отделим числа тегом br друг от друга, чтобы получить столбец, а не строку): var i = 1; while (i <= 50) { document.write(i + ' '); i++; } Можно также воспользоваться и циклом for: for (var i = 1; i <= 50; i++) { document.write(i + ' '); } Задача Задача. Дан массив с элементами [1, 2, 3, 4, 5]. С помощью цикла for выведите все эти элементы на экран. Решение: будем повторять цикл for от 0 до номера последнего элемента массива. Этот номер на единицу меньше количества элементов в массиве, которое можно найти с помощью свойства length таким образом: arr.length. Чтобы цикл прокрутился на единицу меньше длины массива, в условие окончания мы поставим <, а не <=. К элементам массива будем обращаться так: arr[i]. При этом переменная i - это счетчик цикла, который будет меняться от нуля до arr.length (не включительно). Таким образом мы последовательно выведем все элементы массива на экран (отделив их тегом br друг от друга): var arr = [1, 2, 3, 4, 5]; for (var i = 0; i < arr.length; i++) { document.write(arr[i] + ' '); } Задача Задача. Дан массив с элементами [2, 3, 4, 5]. С помощью цикла for найдите произведение элементов этого массива. Решение: для таких задач существует стандартное решение, которое заключается в том, что циклом for перебираются элементы массива и их произведение последовательно 32 записывается в переменную result (в ней постепенно накапливается искомое произведение): var result = 1; var arr = [2, 3, 4, 5]; for (var i = 0; i < arr.length; i++) { result = result * arr[i]; } alert(result); Как это работает: изначально переменная result имеет значение 1, затем при первом проходе цикла в нее записывается ее текущее содержимое (это 1), умноженное на первый элемент массива (это 2). Получится, что в result запишется 1*2 и теперь там будет лежать число 2. При следующем проходе цикла в result запишется текущее значение result, умноженное на второй элемент массива (то есть 2*3=6). И так далее пока массив не закончится. Можно переписать строчку result = result * arr[i] через *= для краткости: var result = 1; var arr = [2, 3, 4, 5]; for (var i = 0; i < arr.length; i++) { result *= arr[i]; } alert(result); Задача . Цикл for-in Задача. Дан объект obj с ключами 'Минск', 'Москва', 'Киев' с элементами |