Презентация Функции, события. Тема 1. 6 онлайн
На нашем сайте вы можете скачать и просмотреть онлайн доклад-презентацию на тему Функции, события. Тема 1. 6 абсолютно бесплатно. Урок-презентация на эту тему содержит всего 27 слайдов. Все материалы созданы в программе PowerPoint и имеют формат ppt или же pptx. Материалы и темы для презентаций взяты из открытых источников и загружены их авторами, за качество и достоверность информации в них администрация сайта не отвечает, все права принадлежат их создателям. Если вы нашли то, что искали, отблагодарите авторов - поделитесь ссылкой в социальных сетях, а наш сайт добавьте в закладки.
Оцените презентацию от 1 до 5 баллов!
- Тип файла:ppt / pptx (powerpoint)
- Всего слайдов:27 слайдов
- Для класса:1,2,3,4,5,6,7,8,9,10,11
- Размер файла:315.73 kB
- Просмотров:52
- Скачиваний:0
- Автор:неизвестен
Слайды и текст к этой презентации:
№1 слайд
Содержание слайда: Тема 1.6 Функции и события
№2 слайд
Содержание слайда: Функции
– это именованная последовательность действий (инструкций).
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 слайд
Содержание слайда: <table><tr>
<table><tr>
<td><div id="red" onClick="soob('Вы щелкнули по красному квадрату')"></div></td>
…
<td><div id="blue" onClick="soob('Вы щелкнули по синему квадрату')"></div></td>
</tr></table>
№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>
Скачать все slide презентации Функции, события. Тема 1. 6 одним архивом:
