Лабораторная работа 1. Основы JavaScript Как запустить JavaScript
 Скачать 0.94 Mb.
|
|
'Беларусь', 'Россия', 'Украина'. С помощью цикла for-in выведите на экран строки такого формата: 'Минск - это Беларусь.'. Решение: задача не представляет сложности если уметь работать с циклом for-in . Давайте решать задачу поэтапно. Для начала выведем на экран все ключи объекта (это названия городов): var obj = { 'Минск': 'Беларусь', 'Москва': 'Россия', 'Киев': 'Украина' }; for (var key in obj) { alert(key); } А теперь выведем все значения объекта (это страны): var obj = { 'Минск': 'Беларусь', 'Москва': 'Россия', 'Киев': 'Украина' }; for (var key in obj) { alert(obj[key]); 33 } Ну, а теперь сформируем строки нужного нам формата: var obj = { 'Минск': 'Беларусь', 'Москва': 'Россия', 'Киев': 'Украина' }; for (var key in obj) { alert(key + ' - это ' + obj[key] + '.'); } Задачи для решения Циклы while и for Решите эти задачи сначала через цикл while, а затем через цикл for. Выведите столбец чисел от 1 до 100. Выведите столбец чисел от 11 до 33. Выведите столбец четных чисел в промежутке от 0 до 100. С помощью цикла найдите сумму чисел от 1 до 100. Работа с for для массивов Дан массив с элементами [1, 2, 3, 4, 5]. С помощью цикла for выведите все эти элементы на экран. Дан массив с элементами [1, 2, 3, 4, 5]. С помощью цикла for найдите сумму элементов этого массива. Запишите ее в переменную result. Работа с for-in Дан объект obj. С помощью цикла for-in выведите на экран ключи и элементы этого объекта. var obj = {green: 'зеленый', red: 'красный', blue: 'голубой'} Дан объект obj с ключами Коля, Вася, Петя с элементами '200', '300', '400'. С помощью цикла for-in выведите на экран строки такого формата: 'Коля - зарплата 200 долларов.'. Задачи Дан массив с элементами 2, 5, 9, 15, 0, 4. С помощью цикла for и оператора if выведите на экран столбец тех элементов массива, которые больше 3-х, но меньше 10. Дан массив с числами. Числа могут быть положительными и отрицательными. Найдите сумму положительных элементов массива. 34 Дан массив с элементами 1, 2, 5, 9, 4, 13, 4, 10. С помощью цикла for и оператора if проверьте есть ли в массиве элемент со значением, равным 4. Если есть - выведите на экран 'Есть!' и выйдите из цикла. Если нет - ничего делать не надо. Дан массив числами, например: [10, 20, 30, 50, 235, 3000]. Выведите на экран только те числа из массива, которые начинаются на цифру 1, 2 или 5. Дан массив с элементами 1, 2, 3, 4, 5, 6, 7, 8, 9. С помощью цикла for создайте строку '-1- 2-3-4-5-6-7-8-9-'. Составьте массив дней недели. С помощью цикла for выведите все дни недели, а выходные дни выведите жирным. Составьте массив дней недели. С помощью цикла for выведите все дни недели, а текущий день выведите курсивом. Текущий день должен храниться в переменной day. Дано число n=1000. Делите его на 2 столько раз, пока результат деления не станет меньше 50. Какое число получится? Посчитайте количество итераций, необходимых для этого (итерация - это проход цикла), и запишите его в переменную num. 35 Лабораторная работа №5. Работа с пользовательскими функциями Вы уже знаете многие стандартные функции JavaScript, например substr(), reverse(), split(). Их использование очень удобно - чтобы написать свои аналоги на JavaScript, потребовалось бы много времени и сил. Однако, с помощью стандартных функций невозможно сделать все, что нам требуется. На помощь приходит такой механизм JavaScript, как функции пользователя. С их помощью мы можем создавать свои функции, принцип работы которых аналогичен стандартным функциям JavaScript. Зачем нужны пользовательские функции? Очень часто при программировании возникает такая ситуация: некоторые участки кода повторяются несколько раз в разных местах. Пользовательские Функции нужны для того, чтобы убрать дублирование кода. Дублирование плохо тем, что если вам потребуется что-то поменять в коде - это придется сделать во многих местах При этом обязательно в каком-нибудь месте вы это сделать забудете. Практика копирования участков кода и вставки в другое место - очень плохая практика (очень часто ей грешат новички). Кроме того, функции скрывают внутри себя какой-то код, о котором нам не приходится задумываться. Например, у нас есть функция saveUser(), которая сохраняет пользователя в базу данных. Мы можем просто вызывать ее, не задумываясь о том, какой код выполняется внутри функции. Это очень удобно. В программировании это называется инкапсуляцией. Синтаксис функций пользователя Функция создается с помощью команды function. Далее через пробел следует имя функции и круглые скобки. Круглые скобки могут быть пустыми, либо в них могут быть указаны параметры, которые принимает функция.Параметры - это обычные переменные JavaScript. Сколько может быть параметров: один, несколько (в этом случае они указываются через запятую), ни одного (в этом случае круглые скобки все равно нужны, хоть они и будут пустыми). //'func' - это имя функции, ей передается один параметр param: function func(param) { } //Передаем функции два параметра - param1 и param2: function func(param1, param2) { 36 } //Вообще не передаем никаких параметров: function func() { } Обратите внимание на фигурные скобки в примерах: в них мы пишем код, который выполняет функция. Общий синтаксис функции выглядит так: function имя_функции(здесь перечисляются параметры через запятую) { Здесь написаны команды, которые выполняет функция. } Как вызвать функцию в коде? Саму функцию мы можем вызвать в любом месте нашего JavaScript документа (даже до ее определения). Функция вызывается по ее имени. При этом круглые скобки после ее имени обязательны, даже если они пустые. Смотрите пример: /* Мы написали функцию, которая выводит на экран 'Привет, мир!'. Назовем ее 'hello': */ function hello() { /* В этом месте ничего не выведется само по себе, а выведется только при вызове функции. */ alert('Привет, мир!'); } /* Теперь мы хотим вызвать нашу функцию, чтобы она вывела на экран свою фразу. Обратимся к ней по имени: */ hello(); //Вот и все! Функция выведет на экран фразу 'Привет, мир!'. /* Мы можем вывести нашу фразу несколько раз - для этого достаточно написать функцию не один раз, а несколько: */ hello(); hello(); hello(); Подробнее о параметрах В наших примерах мы вызывали функцию 'hello()' без параметров. Давайте теперь попробуем ввести параметр, который будет задавать текст, выводимый нашей функцией: //Зададим нашу функцию: function hello(text) { //укажем здесь параметр text 37 //Выведем на экран значение переменной text: alert(text); } //Теперь вызовем нашу функцию: hello('Привет, Земляне!'); //она выведет именно ту фразу, которую мы ей передали Обратите внимание на переменную text в нашей функции: в ней появляется то, что мы передали в круглых скобках при вызове функции. Как JavaScript знает, что текст 'Привет, Земляне!' нужно положить в переменную text? Мы сказали ему об этом, когда создавали нашу функцию, вот тут: 'function hello(text)'. Если мы зададим несколько параметров - то каждый из них будет лежать в своей переменной внутри функции. Инструкция return Чаще всего функция должна не выводить что-то через alert на экран, а возвращать. Сделаем теперь так, чтобы функция не выводила что-то на экран, а возвращала текст скрипту, чтобы он смог записать этот текст в переменную и как-то обработать его дальше: //Зададим функцию: function hello(text) { /* Укажем функции с помощью инструкции 'return', что мы хотим, чтобы она ВЕРНУЛА текст, а не вывела на экран: */ return text; } //Теперь вызовем нашу функцию и запишем значение в переменную message: var message = hello('Привет, Земляне!'); //пока вывода на экран нет //И теперь в переменной message лежит 'Привет, Земляне!': alert(message); //убедимся в этом //Можно не вводить промежуточную переменную message, а сделать так: alert(hello('Привет, Земляне!')); В принципе, практической пользы от того, что мы сделали - никакой, так как функция вернула нам то, что мы ей передали. Модернизируем наш пример так, чтобы функция принимала имя человека, а выводила строку 'Привет, %имя_человека_переданное_функции%!': //Зададим функцию: function hello(name) { //укажем здесь параметр name, в котором будет лежать имя человека //Введем переменную text, в которую запишем всю фразу: var text = 'Привет, '.name.'!'; /* Укажем функции с помощью инструкции 'return', что мы хотим, чтобы она ВЕРНУЛА содержимое переменной text: */ return text; 38 } //Теперь вызовем нашу функцию и запишем значение в переменную message: var message = hello('Дима'); //И теперь в переменной text лежит 'Привет, Дима!': alert(message); //убедимся в этом //Поздороваемся сразу с группой людей из трех человек: alert(hello('Вася').' '.hello('Петя').' '.hello('Коля')); Частая ошибка с return После того, как выполнится инструкция return – функция закончит свою работу. То есть: после выполнения return больше никакой код не выполнится. Это не значит, что в функции должен быть один return. Но выполнится только один из них. Такое поведение функций является причиной многочисленных трудноуловимых ошибок. Смотрите пример: function func(param){ /* Если переменная param имеет значение true, то вернем 'Верно!'. Напоминаю о том, что конструкция if(param) эквивалентна if(param === true)! */ if (param) return 'Верно!'; /* Далее новичок в JavaScript хочет проделать еще какие-то операции, но если переменная param имеет значение true – сработает инструкция return, и код ниже работать не будет! Напротив, если param === false – инструкция return не выполнится и код дальше будет работать! */ alert('Привет, мир!'); } //Осознайте это и не совершайте ошибок Приемы работы с return Существуют некоторые приемы работы с return, упрощающие код. Как сделать проще всего: function func(param) { /* Что делает код: если param имеет значение true – то в переменную result запишем 'Верно!', иначе 'Неверно!': */ if (param) { 39 var result = 'Верно!' } else { var result = 'Неверно!'; } //Вернем содержимое переменной result: return result; } Теперь упростим нашу функцию, используя прием работы с return: function func(param) { /* Что делает код: если param имеет значение true – вернет 'Верно!', иначе вернет 'Неверно!'. */ if (param) { return 'Верно!' } else { return = 'Неверно!'; } } Обратите внимание на то, насколько упростился код. Плюсом также является то, что мы убрали лишнюю переменную result. |