Функции, события. Тема 1.6 - презентация, доклад, проект скачать

Нажмите для полного просмотра!

Содержание ▲

Вы можете ознакомиться и скачать презентацию на тему Функции, события. Тема 1.6. Доклад-сообщение содержит 27 слайдов. Презентации для любого класса можно скачать бесплатно. Если материал и наш сайт презентаций Mypresentation Вам понравились – поделитесь им с друзьями с помощью социальных кнопок и добавьте в закладки в своем браузере.

Слайды и текст этой презентации

Слайд 1

Описание слайда:

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

Слайд 2

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

Описание слайда:

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

Слайд 3

Описание слайда:

Пример: необходимо вывести текстовое сообщение Hello World! несколько раз <script> document.write(“Hello World!”); document.write(“Hello World!”); </script> Мы можем оформить этот скрипт через функцию: <script> function print() { document.write(“Hello World! <br>”); } print();// вывод сообщения 1 раз print();// вывод сообщения 2-ой раз </script>

Слайд 4

Описание слайда:

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

Слайд 5

Описание слайда:

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

Слайд 6

Описание слайда:

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

Слайд 7

Описание слайда:

Пример: <script type="text/javascript"> function showMessage() { var message = 'Привет, я - Вася!'; // локальная переменная alert( message ); } showMessage(); // 'Привет, я - Вася!' alert( message ); // Ничего не получим </script>

Слайд 8

Описание слайда:

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

Слайд 9

Описание слайда:

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

Слайд 10

Описание слайда:

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

Слайд 11

Описание слайда:

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

Слайд 12

Описание слайда:

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

Слайд 13

Описание слайда:

События:

Слайд 14

Описание слайда:

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

Слайд 15

Описание слайда:

Обработка HTML – форм: Формы предоставляют возможность сгруппировать элементы HTML, пре Для создания формы используются теги <form> и </form>. action – определяет, куда передается форма; method – устанавливает, как будет передаваться информация; target – определяет фрейм, в который загрузится отклик на передачу формы. Для клиентских сценариев эти атрибуты не обязательны, используется только атрибут name, чтобы вы могли ссылаться на нужную форму.

Слайд 16

Описание слайда:

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

Слайд 17

Описание слайда:

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

Слайд 18

Описание слайда:

К кнопке привяжем обработчик события: … <input type="button" name="button" value="Вычислить" onClick="plPr ()"> …

Слайд 19

Описание слайда:

Создаем функцию вычисления площади: 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, его и сделаем параметром. function plPr (obj) { var a=obj.t1.value; var b=obj.t2.value; var s=a*b; obj.res.value=s; }

Слайд 22

Описание слайда:

Мы указали, что функция должна принять в качестве параметра какой – то объект (obj) и производить все действия с ним. … <input type="button" name="button" value="вычислить" onClick="plPr (form1)"> …

Слайд 23

Описание слайда:

Задача: у нас три квадрата, при щелчке по каждому должно появляться окно с сообщением, где указывается цвет квадрата, по которому щелкнули. function soob (m) { alert(m); }

Слайд 24

Описание слайда:

Слайд 25

Описание слайда:

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

Слайд 26

Описание слайда:

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

Слайд 27

Описание слайда:

HTML – код: <body> <form name="ИмяФормы"> <textarea name="desc" cols= rows= ></textarea> </form> <ul> <li onMouseOver="ИмяФункции(ИмяФормы, 'Малина обыкновенная - кустарник с многолетним корневищем');">Малина</li> … </ul> </body>