Лабораторная работа №11
. Работа с пользовательскими функциями в JavaScript. Применение методов работы с пользовательскими функциями в JavaScript.
Цель лабораторной работы:
- ознакомление с способами создания HTML-страниц с использованием пользовательских функций в JavaScript ;
- освоить основные возможности языка JavaScript в части работы с пользовательскими функциями;
- ознакомление с базовым синтаксисом языка JavaScript;
- обучение навыкам работы с JavaScript на HTML-страницах;
- приобретение навыков создания HTML – документов с использованием пользовательских функций JavaScript.
Учащиеся должны научиться:
- познакомиться со способами создания HTML-страниц с использованием пользовательских функций JavaScript;
- познакомиться с базовым синтаксисом языка JavaScript;
- работе с базовым синтаксисом, основными элементами JavaScript;
- работе с различными способами подключения JavaScript при создании HTML -страницы;
- использованию JavaScript при создании HTML –страницы.
Программные средства: текстовый редактор Блокнот, различные Браузеры.
ВОПРОСЫ ДЛЯ САМОПОДГОТОВКИ
- Базовые понятия JavaScript;
- Элементы языка программирования JavaScript;
- Пользовательские функции. Применение пользовательских функций в JavaScript;
КРАТКИЕ ТЕОРЕТИЧЕСКИЕ СВЕДЕНИЯ
См. теоретический материал к лабораторной работе 11.
Советы по работе с функциями
- Давайте функциям осмысленные имена
Имя должно отражать то, что делает функция. Предположим, у нас есть функция, которая осуществляет валидацию (проверку правильности заполнения) формы.
Как лучше всего ее назвать? Например: validateForm. И напротив, имя validate или form не будет полностью отражать то, что делает эта функция.
В идеале вы должны посмотреть на имя функции и сразу определить то, что она делает, не заглядывая в ее код.
- Не делайте их очень большими
Функции не должны быть очень большими. Нормальный размер - строк 10. Максимальный - 30 строк. Если в вашей функции получается больше 30 - задумайтесь о том, чтобы разбить ее на несколько функций.
- Одна функция - одна задача
Функции не должны быть многозадачными. Правило такое: одна функция должна выполнять только одну задачу.
Предположим, перед вами стоит задача: при регистрации пользователя проверить, не занято ли такое имя, и если не занято - сохранить его в базу данных. Велик соблазн сделать все одной функцией, которая будет проверять, а потом сохранять. Однако это неправильно. Лучше будет сделать две функции: одна проверяет, а вторая сохраняет.
- Используйте функции внутри функций
Это правило вытекает из предыдущего - внутри функций можно и нужно использовать другие функции, вспомогательные.
- Делайте ваши функции универсальными
Старайтесь делать ваши функции как можно более универсальными.
Задача
Задача: пусть дан массив с числами, давайте запишем в новый массив только те элементы, сумма цифр в которых от 1 до 9.
Начнем решение с разработки вспомогательной функции getDigits (digit - цифра), которая параметром будет принимать число, а возвращать массив цифр. Вот эта функция:
function getDigits(num) {
var str = String(num);
return str.split('');
}
Обратите внимание на String(num) - переданное число необходимо преобразовать в строку с помощью String, иначе к нему нельзя будет применить метод split.
Этот код можно переписать короче в одну строчку:
function getDigits(num) {
return String(num).split('');
}
Давайте потестируем нашу функцию на каком-нибудь числе:
console.log(getDigits(123)); //выведет ['1', '2', '3']
Обратите внимание на то, что функция вернула массив строк ['1', '2', '3'], а не массив чисел [1, 2, 3] - это результат работы split. Давайте здесь с этим ничего не будем делать, а просто учтем в дальнейшем.
Следующая функция - это функция arraySum, параметром принимающая массив и возвращающая сумму элементов этого массива. Пусть эта функция работает и с массивом ['1', '2', '3'], и с массивом [1, 2, 3]. Это достигается с помощью функции Number, в которую мы оборачиваем элементы нашего массива:
function arraySum(arr) {
var sum = 0;
for (var i = 0; i < arr.length; i++) {
sum += Number(arr[i]);
}
return sum;
}
Давайте потестируем комбинацию наших двух функций - найдем сумму цифр заданного числа:
var sum = arraySum(getDigits(123));
alert(sum); //выведет 6
Следующая функция - это функция inRange, которая параметром принимает число и возвращает true, если сумма цифр этого числа от 1 до 9, и false - если это не так. Вот эта функция:
function inRange(num) {
var sum = arraySum(getDigits(num)); //используем вспомогательные функции
if (sum >= 1 && sum <= 9) {
return true;
} else {
return false;
}
}
Можно переписать и короче:
function inRange(num) {
var sum = arraySum(getDigits(num));
return sum >= 1 && sum <= 9;
}
Давайте теперь решим нашу исходную задачу: дан массив с числами, запишем в новый массив только те элементы, сумма цифр в которых от 1 до 9. Для этого возьмем массив с числами, переберем его циклом и в цикле с помощью нашей функции inRange будем проверять, подходит ли нам этот элемент массива. Если подходит - забираем его себе:
var arr = [12, 19, 28, 13, 14, 345];
var result = [];
for (var i = 0; i < 10; i++) {
if (inRange(arr[i])) { //если подходит - берем
result.push(arr[i]);
}
}
console.log(result);
Окончательное решение будет выглядеть так:
var arr = [12, 19, 28, 13, 14, 345];
var result = [];
for (var i = 0; i < 10; i++) {
if (inRange(arr[i])) {
result.push(arr[i]);
}
}
console.log(result);
function inRange(num) {
var sum = arraySum(getDigits(num));
return sum >= 1 && sum <= 9;
}
function getDigits(num) {
return String(num).split('');
}
function arraySum(arr) {
var sum = 0;
for (var i = 0; i < arr.length; i++) {
sum += Number(arr[i]);
}
return sum;
}
Задача: дан массив с числами, найдем сумму всех цифр из этих чисел.
Для решения этой задачей удобно воспользоваться функциями arraySum и getDigits, которые мы разработали при решении предыдущей задачи:
var arr = [12, 19, 28, 13, 14, 345];
var sum = 0;
for (var i = 0; i < 10; i++) {
sum += arraySum(getDigits(num));
}
alert(sum);
Функция inArray
Задача: реализуйте функцию inArray, которая будет проверять, есть ли в массиве элемент с таким значением или нет. Первым параметром функция должна принимать значение, а вторым - массив. Если такой элемент есть - функция должна вернуть true, а если нет - false.
Решение:
function inArray(value, arr) {
for (var i = 0; i < arr.length; i++) {
if(arr[i] == value) {
return true;
}
}
return false;
}
var arr = [1, 2, 3, 4, 5];
alert(inArray(3, arr)); //выведет 3
Простые числа
Задача: реализуйте функцию isSimple, которая параметром будет принимать число и проверять, простое оно или нет. Простое число - это число, которое не делится ни на одно другое число (кроме как на 1 и на само себя - на это делятся все числа). Если число простое - функция должна вернуть true, в противном случае false.
Решение: самый простой способ проверить число на простоту - попробовать поделить его на все числа от 2 до самого числа (на само число не делим). Если ни на одно из этих чисел наше число не поделится - оно простое, а если хотя бы на одно поделится - вернем false и выйдем из функции:
function isSimple(num) {
for (var i = 2; i < num; i++) {
if(num % i == 0) {
return false;
}
}
return true;
}
alert(isSimple(13)); //выведет true
Делители
Задача: реализуйте функцию getDivisors, которая параметром будет принимать число и возвращать массив его делителей, то есть чисел, на которое делится наше число. К примеру, если мы передадим число 24 - мы должны получить массив [1, 2, 3, 4, 6, 12, 24].
Решение:
function getDivisors(num) {
var result = [];
for (var i = 1; i <= num; i++) {
if(num % i == 0) {
result.push(num);
}
}
return result;
}
alert(getDividers(24)); //выведет [1, 2, 3, 4, 6, 12, 24]
Пересечение массивов
Задача: реализуйте функцию getIntersection, которая параметрами будет принимать два массива и возвращать массив элементов, которые есть и в одном, и во втором массиве (это называется пересечение массивов). К примеру, getIntersection([1, 2, 3], [2, 3, 4]) должно вернуть [2, 3].
Решение: переберем один из переданных массивов (не имеет значения какой) с помощью цикла. В цикле воспользуемся функцией inArray, которую мы с вами разработали выше. С ее помощью будем проверять, есть ли текущий элемент одного массива во втором. Если есть - записываем его в массив с результатом. Вот решение:
function getIntersection(arr1, arr2) {
var result = [];
for (var i = 0; i < arr1.length; i++) {
if(inArray(arr1[i], arr2)) {
result.push(arr1[i]);
}
}
return result;
}
alert(getIntersection([1, 2, 3], [2, 3, 4])); //выведет [2, 3]
НОД
Задача: реализуйте функцию getGreatestCommonDivisor, которая параметрами будет принимать два числа и возвращать наибольший общий делитель (НОД) этих двух чисел. К примеру, для чисел 12 и 18 НОД равен 6.
Решение: используем разработанные нами функции. С помощью getDivisors найдем массив делителей одного и второго числа, а с помощью getIntersection - получим массив общих делителей. Останется просто взять максимальный из общих делителей - и получим результат:
function getGreatestCommonDivisor(num1, num2) {
var divisors = getIntersection(getDivisors(num1), getDivisors(num2)); // ['2', '3', '6']
return Number(Max.apply(null, divisors));
}
alert(getGreatestCommonDivisors(12, 18)); //выведет 6
Примеры решения задач
Задача. Сделайте функцию, которая возвращает куб числа. Число передается параметром.
Решение:
function cube($num) {
return $num * $num * $num
}
Задача. Дан массив с числами. Создайте из него новый массив, где останутся лежать только положительные числа. Создайте для этого вспомогательную функцию isPositive(), которая параметром будет принимать число и возвращать true, если число положительное, и false - если отрицательное.
Решение:
var arr = [1, 2, 3, -1, -2, -3];
function isPositive(num) {
if (num >=0) {
return true;
} else {
return false;
}
}
var newArr = [];
for (var i = 0; i <= arr.length; i++) {
if (isPositive(arr[i])) {
newArr.push(arr[i]);
}
}
console.log(newArr);
Контрольные задания
Простые функции
Задание 1 Сделайте функцию, которая возвращает квадрат числа. Число передается параметром.
Задание 2 Сделайте функцию, которая возвращает сумму двух чисел.
Задание 3 Сделайте функцию, которая отнимает от первого числа второе и делит на третье.
Задание 4 Сделайте функцию, которая принимает параметром число от 1 до 7, а возвращает день недели на русском языке.
Задание 5 Сделайте функцию isNumberInRange, которая параметром принимает число и проверяет, что оно больше нуля и меньше 10. Если это так - пусть функция возвращает true, если не так - false.
Задание 6 Дан массив с числами. Запишите в новый массив только те числа, которые больше нуля и меньше 10-ти. Для этого используйте вспомогательную функцию isNumberInRange из предыдущей задачи.
Задание 7 Сделайте функцию getDigitsSum (digit - это цифра), которая параметром принимает целое число и возвращает сумму его цифр.
Задание 8 Найдите все года от 1 до 2019, сумма цифр которых равна 13. Для этого используйте вспомогательную функцию getDigitsSum из предыдущей задачи.
Задание 9 Сделайте функцию isEven() (even - это четный), которая параметром принимает целое число и проверяет: четное оно или нет. Если четное - пусть функция возвращает true, если нечетное - false.
Задание 10 Дан массив с целыми числами. Создайте из него новый массив, где останутся лежать только четные из этих чисел. Для этого используйте вспомогательную функцию isEven из предыдущей задачи.
Задание 11Сделайте функцию getDivisors, которая параметром принимает число и возвращает массив его делителей (чисел, на которое делится данное число).
Задание 12 Дана строка. Сделайте заглавным первый символ каждого слова этой строки. Для этого сделайте вспомогательную функцию ucfirst, которая будет получать строку, делать первый символ этой строки заглавным и возвращать обратно строку с заглавной первой буквой.
Задание 13 Дана строка вида 'var_text_hello'. Сделайте из него текст 'varTextHello'.
Задание 14 Сделайте функцию inArray, которая определяет, есть в массиве элемент с заданным текстом или нет. Функция первым параметром должна принимать текст элемента, а вторым - массив, в котором делается поиск. Функция должна возвращать true или false.
Задание 15 Дана строка, например, '123456'. Сделайте из нее '214365'.