Оператор присваивания

Познакомимся с самым простым оператором присваивания =. Он позволяет сохранить в переменной результат вычислений, например: x = y * z + 1;

В переменной x будет сохранён результат вычисления выражения: произведение значений y и z, увеличенное на 1.

Формально оператор присваивания работает следующим образом: сначала вычисляется значение выражения в правой части, затем полученное значение записывается в переменную, указанную левой части. Из этого следует, что в правой части может быть любое выражение, а в левой только имя переменной. Если после этого присваивания значения y или z изменятся, это никак не повлияет на значение x.

Пример: x = x + 1;

Сначала вычисляется значение выражения x + 1, а затем полученное значение записывается вновь в переменную x. Таким образом, данный оператор увеличивает x на 1.

Изменение размера элемента относительно прежнего размера

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

• обратиться к ширине таблицы и сохранить её текущее значение в переменной;

• уменьшить значение переменной на 20;

• присвоить ширине таблицы новое значение.

<input type="button" value="Меньше" onClick="    var tabWidth;    tabWidth = document.getElementById('tab').width;    tabWidth=tabWidth - 20;    document.getElementById('tab').width = tabWidth; "> <table border="1" id="tab" width="750" > <tr> <td>Я не от тех бегу...</td> <td>Ну и пусть будет нелегким мой путь...</td> </tr> </table>

Код в действии

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

Ну и пусть будет нелегким мой путь, Тянут ко дну боль и грусть, Прежних ошибок груз. Но мой плот, свитый из песен и слов, Всем моим бедам назло Вовсе не так уж плох.

Задание 2

Разместите на странице картинку и две кнопки: «Увеличить» и «Уменьшить». Одна из них должна при каждом щелчке увеличивать картинку, а другая — уменьшать.

4. Понятие функции

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

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

Описание функции состоит из ключевого слова function, за которым следуют:

• имя функции;

• заключенный в круглые скобки необязательный список аргументов, разделённых запятыми;

• JavaScript-команды, составляющие тело функции, заключённые в фигурные скобки.

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

function triangle(a, h){    var s=a*h/2;    window.alert(s); }

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

triangle(4, 4); // площадь треугольника высотой 4 и основанием 4 triangle(5, 7); // площадь треугольника высотой 7 и основанием 5

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

Понятия функции в программировании и алгебре аналогичны. Совокупность действий над переменными удобно обозначать одной буквой. Например, действия x² + 5x - 17 обычно обозначают буквой y и она называется функцией: y(x) = x² + 5x - 17. Здесь x — аргумент функции y. Далее эту букву удобно использовать вместо длинного выражения. Также и в программировании совокупности операторов удобно дать имя и затем использовать только одно это имя вместо повторения всех операторов.

Задание 3

Опишите функцию, вычисляющую и выводящую на экран площадь прямоугольника. Вызовите функцию, вычисляюшую площадь прямоугольника размером 7 на 8.

 

Задание обработчика события с помощью функции

В примере, изменяющем ширину таблицы, при нажатии кнопки выполняются 4 команды. Ниже показано, как эти команды оформлены в виде функции.

<script type="text/javascript"> function smaller(){    var tabWidth;    tabWidth = document.getElementById('tab').width;    tabWidth = tabWidth - 20;    document.getElementById('tab').width = tabWidth; } </script> <input type="button" value="Меньше" onClick="smaller()">

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

Когда браузер считывает описание функции, она запоминается в оперативной памяти компьютера и ждёт своего вызова. Если задать только описание функции, то она не выполнится. Чтобы запустить функцию на выполнение, нужно её вызвать, указав её имя. В нашем примере функция smaller вызывается по щелчку на кнопке.

Задание 4

Доработайте задание с изменением таблицы: команды из кнопок «Увеличить» и «Уменьшить» оформите в виде двух функций.

this	указатель на текущий HTML-элемент
var	создание переменной
function	описание функции