Функции, события. Тема 1.6

Содержание

Слайд 2

Функции – это именованная последовательность действий (инструкций). function Имя_Функции() { оператор; ………… оператор; }

Функции

– это именованная последовательность действий (инструкций).
function Имя_Функции() {
оператор;
…………
оператор;
}

Слайд 3

Пример: необходимо вывести текстовое сообщение Hello World! несколько раз document.write(“Hello World!”);

Пример: необходимо вывести текстовое сообщение Hello World! несколько раз


Мы

можем оформить этот скрипт через функцию:

Слайд 4

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

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

Напишем функцию, которая будет суммировать 2 числа и выводить результат

на экран.
Слайд 5

Параметры функции: В качестве параметров функций могут выступать не только числа,

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

В качестве параметров функций могут выступать не только числа, но

и какие – либо переменные.
Например, у вас птичий двор. Надо узнать количество птиц.
Слайд 6

Область видимости переменных Переменные бывают глобальные и локальные. Глобальные переменные создаются

Область видимости переменных

Переменные бывают глобальные и локальные.
Глобальные переменные создаются один раз

(вне функции) и потом используются в коде программы там где это необходимо (в массивах, функциях и т.д.)
Локальные переменные создаются внутри функции и только внутри нее могут использоваться.
Слайд 7

Пример: function showMessage() { var message = 'Привет, я - Вася!';

Пример:


Слайд 8

Возврат значений функцией: Во всех рассмотренных примерах результат работы функции был

Возврат значений функцией:

Во всех рассмотренных примерах результат работы функции был сразу

выведен на экран.
В программировании, в основном, нет необходимости сразу выводить результат работы функции.
Функция может возвращать результаты своей работы, а программист получать его где это необходимо.
Для возврата значений функцией используется оператор return.
Слайд 9

Пример: Создадим функцию, которая будет возвращать дискриминант квадратного уравнения по формуле

Пример: Создадим функцию, которая будет возвращать дискриминант квадратного уравнения по формуле

– b^2 – 4ac.

Создаем функцию + возвращаем ее значение (результат работы) – оператор return;
Вызываем функцию в любом месте + заносим результат ее работы в переменную;
Используем переменную, содержащую значение функции по своему усмотрению.

Слайд 10

Оператор return может - находиться в любом месте функции; - может

Оператор return может

- находиться в любом месте функции;
- может быть осуществлен

несколько раз;
- использоваться без значения, для того чтобы прекратить выполнение и выйти из функции.
Слайд 11

Выбор имени функции: Как правило, при назначении имени функции используют глагольные

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

Как правило, при назначении имени функции используют глагольные префиксы,

обозначающие общий характер действия, после которых следует уточнение.
show – что-то показывают (показать сообщение).
get – получают;
calc – вычисляют;
create – создают;
check – проверяют.
Далее следуют поясняющие слова, которые принято начинать каждое с большой буквы.
Слайд 12

События и обработчик события Сценарий может быть выполнен после определенных действий пользователя. Такие действия называют событиями.

События и обработчик события

Сценарий может быть выполнен после определенных действий пользователя.

Такие действия называют событиями.
Слайд 13

События:

События:

Слайд 14

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

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

Слайд 15

Обработка HTML – форм: Формы предоставляют возможность сгруппировать элементы HTML, пре

Обработка HTML – форм:

Формы предоставляют возможность сгруппировать элементы HTML, пре
Для создания

формы используются теги
и
.
action – определяет, куда передается форма;
method – устанавливает, как будет передаваться информация;
target – определяет фрейм, в который загрузится отклик на передачу формы.
Для клиентских сценариев эти атрибуты не обязательны, используется только атрибут name, чтобы вы могли ссылаться на нужную форму.
Слайд 16

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

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

и ширине.
Слайд 17

Код для формы:

Код для формы:

Слайд 18

К кнопке привяжем обработчик события: … …

К кнопке привяжем обработчик события:




Слайд 19

Создаем функцию вычисления площади: function plPr () { var a =

Создаем функцию вычисления площади:

function plPr () {
var a = document.form1.t1.value;
var b

= document.form1.t2.value;
var s = a*b;
document.form1.res.value = s;
}
Слайд 20

Параметры функции Если у нас будет несколько веб – страниц, на

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

Если у нас будет несколько веб – страниц, на которых

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

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

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


function plPr (obj) {
var a=obj.t1.value;
var b=obj.t2.value;
var s=a*b;
obj.res.value=s;
}

Слайд 22

Мы указали, что функция должна принять в качестве параметра какой –

Мы указали, что функция должна принять в качестве параметра какой –

то объект (obj) и производить все действия с ним.



Слайд 23

Задача: у нас три квадрата, при щелчке по каждому должно появляться

Задача: у нас три квадрата, при щелчке по каждому должно появляться

окно с сообщением, где указывается цвет квадрата, по которому щелкнули.

function soob (m) {
alert(m);
}

Слайд 24

…





синему квадрату')">

Слайд 25

Задача: Пусть у нас будет список ягод, а при наведении мышкой

Задача: Пусть у нас будет список ягод, а при наведении мышкой

на название ягоды, ее описание появится в текстовом поле.
Слайд 26

Функция: function ИмяФункции(obj, n) { obj.desc.value=n; }

Функция:

function ИмяФункции(obj, n) {
obj.desc.value=n;
}