Выбор имени функции

<6 7 8910 11 12 >

Функция – это действие, поэтому имя функции обычно является глаголом. Оно должно быть простым и точно описывать действие функции.

Как правило в названии функции используются глагольные префиксы, обозначающие общий характер действия.

show – что – то показывает;

get – возвращает значение;

calc – вычисляет;

create – создает;

check – проверяет и возвращает логическое значение.

Благодаря префиксам становится относительно понятным роль функции в данном блоке.

Функция должна выполнять только одно действие, которое явно подразумевается ее названием. Два независимых действия разделяются на две функции с определенными названиями.

Функциональные выражения

Существует другой синтаксис создания функций, называется функциональным выражением. Выглядит следующим образом:

let hello = function(){

alert('Привет!');

}

alert(hello);

В коде функция создается и явно присваивается переменной, как любое другое значение. Если мы просмотрим выполнение кода в браузере, то увидим код самой функции:

Попробуем переписать код по другому:

function hello(){ // 1 - создаем

alert('Привет!');

}

let func = hello; // 2 - копируем

func(); // 3 - вызываем копию

hello() // 4 - вызываем функцию

В данном случае код сработает, и мы увидим результат, который и планировали увидеть.

Стрелочные функции

Стрелочные функции (arrow function) представляют сокращенную версию обычных функций. Стрелочные функции образуются с помощью знака стрелки (=>), перед которым в скобках идут параметры функции, а после – тело функции. Например:

let sum = (x, y) => x + y;

let a = sum(4, 5); // 9

let b = sum(10, 5); // 15

В данном случае функция (x, y) => x + y осуществляет сложение двух чисел и присваивается переменной sum. Функция принимает два параметра – x и y. Ее тело составляет сложение значений этих параметров. Поскольку после стрелки фактически идет конкретное значение, которое представляет сумму чисел, то функция возвращает это значение. Мы можем через переменную sum вызвать данную функцию и получить ее результат в переменные а и b.

Рассмотрим пример динамического создания функции:

let age = prompt('Сколько вам лет?', 18);

let welcome = (age < 18) ?

() => alert('Привет!') :

() => alert('Здравствуйте!');

welcome();

В примерах выше аргументы использовались слева от =>, а справа вычислялось выражение с их значениями. Иногда нужно что-то посложнее, например, выполнить несколько инструкций. Это возможно, нужно лишь заключить инструкции в фигурные скобки и использовать оператор return внутри них, как в обычной функции.

let sum = (a, b) => {

let result = a + b;

return result;

}

alert (sum(2, 5));

Тема 1.6 События

Сценарий может быть выполнен сразу же, после загрузки веб – страницы, но иногда нужно, чтобы он выполнился после каких-либо действий пользователя, например, нажатия на кнопку, т.е. в ответ на пользовательское событие. Для этого в тегах элементов страницы вводятся параметры обработки событий, задающие действия, которые выполняются при возникновении события, связанного с элементом. Например,

Здесь Click – событие (щелчок мыши), onClick – обработчик события, addText()- имя функции, которая срабатывает при возникновении события.

Событие – это сигнал от браузера о том, что что-то произошло.

Перечислим наиболее часто используемые события, которые поддерживаются JavaScript:

Событие	Когда происходит	Обработчик события
События мыши
click	Щелчок левой кнопкой мыши по элементу (на устройствах с сенсорными экранами оно происходит при касании)	onclick
contextmenu	Щелчок правой кнопкой мыши по элементу	onContextmenu
mouseover/ mouseout	Указатель мыши помещается над элементом/ покидает его	onMouseOver/ onMouseOut
mousedown/ mouseup	Нажали / отпустили кнопку мыши на элементе	onMouseDown/ onMouseUp
mousemove	При движении мыши	onMouseMove
События на элементах управления
submit	Нажатие кнопки Отправить в форме	onSubmit
focus	Окно или элемент формы получает фокус	onFocus
Клавиатурные события
keydown/ keyup	Нажатие/ отпускание клавиши клавиатуры	onKeyDown/ onKeyUp
Дополнительные события
blur	Потеря объектом фокуса	onBlur
DOMContentLoaded	HTML документ загружен и обработан, DOM полностью построен и доступен	onDOMContentLoaded
transitionend	CSS – анимация завершена	onTransitionEnd
dblclick	Двойной щелчок мышью по объекту	onDblClick
dragdrop	Перетаскивание мышью объект	onDragDrop
keypress	Удержание нажатой клавиши клавиатуры	onKeyPress
keyup	Отпускание клавиши клавиатуры	onKeyUp
load	Документ загружается в браузер	onLoad
reset	Нажатие кнопки сброса в форме	onReset
resize	Изменение размера окна или элемента	onResize
select	Выбор элемента формы	onSelect
unload	Закрытие документа	onUnload

Обычно, действия, выполняющиеся при обработке события, оформляются в виде функций.

<html>

<head>

function myFc() {

alert("Вы щелкнули по тексту");

}

</script>

<body>

<div onClick="myFc();">Щелкни меня</div>

</body>

</html>

Другой пример:

elem.onclick = function() {

alert('Спасибо');

};

</script>

Можно доступ к элементу осуществить через this:

<button onclick="alert(this.innerHTML)">Нажми меня</button>

Работа с формой

Напишем сценарий, который будет рассчитывать площадь прямоугольника по введенным пользователем длине и ширине. Для этого на html – странице разместим нужные элементы формы:

<html>

<head>

<title>Введение в JavaScript</title>

</head>

<body>

Длина: <input type="text" name="t1" size="5"> <br><br>

Ширина: <input type="text" name="t2" size="5"> <br><br>

Площадь прямоугольника: <input type="text" name="res" size="5">

</form>

</body>

</html>

В браузере наша страница будет выглядеть так:

Пользователь вводит значения ширины и длины и нажимает кнопку «Вычислить». После чего, в поле площадь должен появиться результат. Таким образом, событие наступает при нажатии кнопки, значит именно к ней мы привяжем обработчик события. Функцию вычисления площади назовем plPr():

…

…

Теперь напишем саму функцию "plPr()", для этого откроем страницу script.js и напишем тело функции:

function plPr() {

let a=document.form1.t1.value;

let b=document.form1.t2.value;

let s=a*b;

document.form1.res.value=s;

}

Параметры функции

Если рассматривать предыдущий пример, где вычислялась площадь прямоугольника по введенным пользователем данным, то там мы написали всего одну функцию, которая производила вычисления. Но если у нас будет несколько веб – страниц, на которых нам надо вычислить площадь прямоугольника, то нам придется для каждой страницы писать свою функцию.

Разумнее написать один раз функцию и в дальнейшем использовать ее на всех страницах. Для этого HTML – страница должна каким – то образом указать функции, какие именно значения (с какой страницы) брать для вычисления. Здесь нам понадобятся параметры, которые указываются в круглых скобках.

В функции мы используем имя формы - form1, его мы и сделаем параметром. Перепишем функцию следующим образом:

function plPr (obj) {

let a=obj.t1.value;

let b=obj.t2.value;

let s=a*b;

obj.res.value=s;

}

Мы указали, что функция должна принять в качестве параметра какой – то объект (obj) и производить все действия с ним. Нам осталось указать на нашей html – странице имя объекта:

…

…

Теперь, когда нам понадобиться вычислить площадь на какой-либо другой странице, нам достаточно будет вызвать функцию plPr (), а в скобках указать имя формы.

В качестве параметров функции можно передавать любые значения, причем их может быть несколько. Рассмотрим следующую задачу: у нас три квадрата, при щелчке по каждому должно появляться окно с сообщением, где указывается цвет квадрата, по которому щелкнули.

Начала напишем на странице script2.js код функции, которая будет открывать окно сообщений, назовем eе «soob». Вызов окна сообщений осуществляется с помощью метода alert(), а текст сообщения будем передавать в качестве параметра, обозначим его «m»:

function soob (m) {

alert(m);

}

На html – странице напишем код самих квадратиков:

<html>

<head>

</head>

<body>

</tr></table>

</body>

</html>

Здесь мы указали, что при щелчке по квадратикам, должна срабатывать функция «soob», а в качестве параметров указали текст нужных сообщений.

Оформим наши квадраты через таблицу стиля – style.css

#red, #green, #blue {

width:20px;

height:20px;

margin:5px;

}

#red {

background:red;

}

#green {

background:green;

}

#blue {

background:blue;

}

Рассмотрим еще один пример. Пусть у нас будет список ягод, а при наведении мышкой на название ягоды, ее описание появится в текстовом поле.

Нам потребуется два параметра: один с именем объекта (формы), второй с описанием ягод. Параметры в таком случае записываются через запятую. Наша функция будет выглядеть так:

function ИмяФункции(obj, n) {

obj.desc.value=n;

}

где desc – имя текстового поля для ввода описания. Эта функция будет срабатывать, когда на название ягоды наведен курсор.

Теперь напишем код html – страницы. Обработчик события, когда указатель мыши помещается над элементом, называется onMouseOver.

<html>

<head>

<title>Введение в JavaScript</title>

</head>

<body>

</form>

<ul>

<li onMouseOver="ИмяФункции(ИмяФормы, 'Малина обыкновенная - кустарник с многолетним корневищем');">Малина</li>

</ul>

</body>

</html>

<6 7 8910 11 12 >

Дата добавления: 2021-01-26; просмотров: 398;

Выбор имени функции

Публикации по технике и механике

Публикации по биологии

Публикации по информатике

Публикации по строительству

Публикации по физике

Публикации по химии

Публикации по электронике

Публикации по искусству

Публикации по истории

Публикации по медицине

Публикации по педагогике