Функции. Формальные, фактические параметры. Полезные функции

Функции

Во всех, приличных языках программирования есть функции. Они здорово помогают сократить и упростить для чтения запись программы. Есть они и JavaScript. Правда здесь они играют не только (и даже не столько) свою обычную утилитарную роль. К счастью, другое (и основное) назначение функций - тема отдельной лекции. Поэтому, сейчас мы ограничимся рассмотрением функций как таковых, к которым мы привыкли по другим языкам прогаммирования.

Итак, чтобы определить функцию, записываем ключевое слово function, за ним (через пробел) имя нашей функции и, в скобках, список параметров. Если параметров нет, скобки все рано должны присутствовать. И, наконец, в фигурных скобках, собственно тело функции, т.е. операторы, которые она должна исполнять. Опять же, если она ничего не должна делать, все равно нужны фигурные скобки, хотя бы пустые. Если функция должна возвращать значение, то оно возвращается с помощью ключевого слова return. Записывается return, а за ним выражение, которое и будет результатом. Кстати, оператор return вызывает немедленное прекращение выполнения функции и выход из нее.

function doNothing () {}

function alwaysTrue () {

   return true;

}

function sum (a,b) {

   return a+b;

}

function nod(n,m) {

   return (m) ? nod(m,n%m) : n;

}

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

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

function f(a) {

   if (a==null) document.write("Missing parameter a<BR>");

   else document.write("Parameter a="+a+"<BR>");

}

f(2,1);

f(1);

f();

Будет напечатано:

Parameter a=2

Parameter a=1

Missing parameter a

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

function print_list() {

   document.write("<OL>");

   for (var i = 0; i < print_list.arguments.length; i++)

      document.write("<LI>"+print_list.arguments[i]+"</LI>");

   document.write("</OL>");

}

document.write("<STRONG>Трое из Простоквашино</STRONG><BR>");

f("Матроскин","Д\яд\я Федор","Шарик");

document.write("<P><STRONG>Репка</STRONG><BR>");

f("Дедка","Бабка","Внучка","Жучка","Кошка","Мышка");

Будет напечатано:

Трое из Простоквашино

Матроскин

Дядя Федор

Шарик

Репка

Дедка

Бабка

Внучка

Жучка

Кошка

Мышка

Обратите внимание, как мы обращаемся к массиву arguments. Имя функции, точка, arguments. Неправда-ли, похоже, что функция - это экземпляр объекта, а массив arguments - его свойство? :-)

Функции parseInt и parseFloat

Обе эти функции принимают один аргумент - строку и пытаются преобразовать ее соответственно к целому или вещественному числу. Если это удалось, то они возвращают полученное число, если не удалось, возвращается NaN. NaN (Not a Number) - специальное значение, которое, потом, можно проверить (см. след. функцию).

У функции parseInt может быть еще один аргумент - число обозначающее систему счисления.

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

document.write(parseInt("22")+"<BR>");

document.write(parseInt("   22")+"<BR>");

document.write(parseInt(" 22руб.")+"<BR>");

document.write(parseInt("цена 22руб.")+"<BR>");

document.write(parseFloat("22.12")+"<BR>");

document.write(parseFloat("22,12"));

Будет напечатано:

22

22

22

NaN

22.12

22

Заметьте, что строка " 22руб." благополучно преобразоваллась в число 22.

Функция isNaN

Позволяет сравнить значение, возвращенное parseInt и parseFloat с NaN. Возвращает истину если равно, и ложь, если не равно. Применим ее в предыдущем примере.

document.write(isNaN(parseInt("22"))+"<BR>");

document.write(isNaN(parseInt("   22"))+"<BR>");

document.write(isNaN(parseInt(" 22руб."))+"<BR>");

document.write(isNaN(parseInt("цена 22руб."))+"<BR>");

document.write(isNaN(parseFloat("22.12"))+"<BR>");

document.write(isNaN(parseFloat("22,12")));

Будет напечатано:

false

false

false

true

false

false

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

// Перевод чисел в шестнадцатиричную систему

// нужен, чтобы сформировать триплет цвета #rrggbb

//

function to_hex(n) {

  var res="";

  for(var i=0; i<6; i++) {

     var s = "0123456789ABCDEF".substr(n%16,1)+res;

     res = s;

     n = Math.floor(n/16);

  }

  return "#"+res;

}

// Эта функция формирует триплет цвета #rrggbb

//

function rgb(r,g,b) {

   return to_hex(Math.round(b)+Math.round(g)*256+Math.round(r)*65536);

}

// Эта функция устанавливает цвет каждой буквы

// так, чтобы он плавно переходил от буквы к букве

// затем, она печатает текст.

function Colorchange(r1,g1,b1,r2,g2,b2,stroka){

   var len = stroka.length;

   var y1=(r2-r1)/len;

   var y2=(g2-g1)/len;

   var y3=(b2-b1)/len;

   for (var i=0; i<len; i++,r1+=y1,g1+=y2,b1+=y3)

      document.write(stroka.substr(i,1).fontcolor(rgb(r1,g1,b1)));

}

При обращении к этой функции нужно указать семь параметров: r, g, b первой буквы, r, g, b последней буквы и строку для вывода. Например, если мы напишем:

Colorchange(255,120,0,140,0,255,

   "Никогда не думай, что ты иная, чем могла бы быть, иначе "+

   "как будучи иной в тех случаях, когда иною нельзя не быть.");

При інтерпретації html-сторінки браузер створює об'єкти JavaScript або об’єкти браузера. Вони зберігаються у вигляді ієрархічної структури, відображаючи структуру документа, наприклад: window

            frames

            history

            location

            navigator

            document

                        links

                        images

                        anchors

                        forms

                                   elements

(Рис.1)

Об’єкт window – це відкрите вікно браузера. Додаток1 – це перелік основних методів та властивостей об’єкта window. Детально познайомимось з методами, що створюють діалогові вікна. alert () alert ({Текст}) Виводить на екран вікно попередження з текстом, переданим в якості параметра. Приклад(додаток 4, код1):

…

alert('Вітаємо Вас!');

…

Поява вікна з текстом 'Вітаємо Вас!' зупиняє подальше виконання скрипта, після того, як натиснуто кнопку OK, оператори скрипта, що йдуть далі за методом alert, продовжують свою роботу.


confirm ()

confirm ({Текст})

Виводить на екран вікно попередження з текстом, переданим в якості параметра, що пропонує користувачеві зробити вибір. Якщо користувач натисне Ок, повертається true, якщо Скасування - false.

Приклад(додаток 4, код2):

…

var t= confirm(‘Ви щасливі?’);

alert(t); … При виконанні цього коду, перше вікно з запитанням ‘Ви щасливі?’ має дві кнопки. Кнопка «Ok» повертає в програму (а саме в відмінну t) значення true, Кнопка «Oтмена» повертає значення false prompt () prompt ({Запрошення}, [{Значення за замовчуванням}]) Виводить на екран діалогове вікно з полем введення, що запрошує користувача ввести будь-яке рядкові значення. Текст запрошення передається як перший параметр, у другому параметрі може бути передано значення за замовчуванням. Приклад (додаток 4, код3):

…

var t= prompt(‘Скільки Вам років?’);
alert(t);

…

При виконанні цього коду, перше вікно з запитанням ‘Скільки Вам років??’ має рядок для введення клієнтської відповіді та дві кнопки. Кнопка «Ok» повертає в програму (а саме в відмінну t) значення, що ввів клієнт або пустий рядок, якщо клієнт нічого не написав в рядку відповіді. Кнопка «Oтмена» повертає значення null


Об'єкт history представляє інтерфейс до списку історії Web-оглядача, тобто списку всіх Web-сторінок, переглянутих користувачем протягом часу, зазначеного в налаштуваннях. Додаток2 – це перелік основних методів та властивостей об’єкта window.

Об’єкт location містить інформацію про місцезнаходження поточного документа, тобто його інтернет-адресу. Додаток3 – це перелік основних методів та властивостей об’єкта location. Його також можна використовувати для переходу на інший документ і перезавантаження поточного документа.

Користуючись об'єктом location, можна завантажити інший документ на місце поточного. Для цього просто надайте значення нового інтернет-адреси властивості href. document.location.href = "http://www.google.com"; Якщо ви хочете повністю замінити поточний документ, щоб навіть адресу його не з'являвся в списку історії, скористайтеся методом replace: document.location.replace ("http://www.google.com");

Об'єкт navigator служить для доступу до самої програми Web-браузера. Додаток5 – це перелік основних методів та властивостей об’єкта navigator.

Об’єкт document – це документ, що відображається в робочому вікні браузера, цей об’єкт створюється тегами <body></body>. Додаток6 – це перелік основних методів, властивостей об’єкта document та подій, на які реагує цей об’єкт. Для розгляду принципів роботи з об’єктом document на прикладах розглянемо питання побудови функції (більш детально це питання буде розглядатися в наступній лекції)

Формат описання функції:

function им’я функції (необов’язкові формальні параметри)
  {
Тіло функції
}

Тіло функції – це логічно закінчиний код програми на мові JavaScript

Заголовок функції включає ключове слово function, унікальне в рамках програми им’я функції та заключний в круглі дужки список формальних параметрів. Цей список може бути пустим.

Виклик функції завжди здійснюється по імені з означенням списку фактичних параметрів:

им’я функції (фактичні параметри, що відповідають формальним).
Виклик функції може бути включений в вираз, якщо функція повертає якесь значення (за допомогою оператора return в тілі функції), або може бути окремим оператором.
Повернемося до розгляду об’єкта document.
Об’єкт document є вложеним об’єктом об’єкта window, тому повне звернення до об’єкта document має такий вигляд:
Window.document
В зв’язку з тим, що всі об’єкти вложені в об’єкт window, прийнято опускати Window. Надалі будемо звертатися до об’єкта document по спрощеній схемі (document.)
Базові події, на які реагує об’єкт document.

onBlur, onFocus, onLoad, onUnload

Зняття фокусу, активація документу, повна загрузка, починається вигризка документу з робочого вікна браузера

onMouseDown onMouseUp onClick onDblClick

Для маніпулятора миш нажато функціональну кнопку, віджато, виповнено один клік, виконано подвійний клік

onKeyDown onKeyUp onKeyPress

Для клавіатури при активному документі виконано натискання кнопки клавіатури, віджато кнопку, виконано клік на кнопку

 
Базові властивості об’єкта document.

fgColor

Колір тексту документа

bgColor

Колір фону документа

linkColor vlinkColor alinkColor

Колір гіперпосилок (гіперпосилка, відвідана, активна)

lastModified

Дата останньої модифікації документа

 
Базові методи об’єкта document.

Write() и writeln()

Вивід текста, що передано, як фактичний параметр 

Open() и close()

Відкриття та закриття документа

 
Приклад №1:
На подію «документ повністю загружено» вивести діалогове вікно зі словами «Вітаємо!!!»
 

Фаїл pr1.html
 
<html>
<head>
…
<script src=”scripts.js”>
</head>
<body onload=”f()”>

Фаїл scripts.js
 
function f()
{

}