Отправляет email-рассылки с помощью сервиса Sendsay

Программирование на JavaScript: просто о сложном.

Рассылка закрыта

При закрытии подписчики были переданы в рассылку "Всё о работе в Интернет" на которую и рекомендуем вам подписаться.

Вы можете найти рассылки сходной тематики в Каталоге рассылок.

←   Январь 2006   →
 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
Автор
Владимир

Статистика

1.761 подписчиков
0 за неделю
←   Все выпуски   →

Программирование на JavaScript: просто о сложном. Вып 14


Информационный Канал Subscribe.Ru

ГЛАВНАЯ     УЧЕБНИК     СКРИПТЫ     1000 СКРИПТОВ     Все о Яваскрипт-скачать    



Наши партнеры:


Бесплатный курс лекций по FOREX

Воспоминания биржевых трейдеров.
На сайте собраны воспоминания, секреты и рекомендации таких известных биржевых трейдеров современности, как Дж.Сорос, Д.Швагер, Б.Льюис и многих других.


ВЫПУСК 14

Главная часть JS программы может быть помещена в контейнер <head>... </head>, поскольку он считывается при загрузке HTML - документа одним из первых. Теоретически скрипт можно помещать в любом месте HTML - документа, хотя лучше это делать перед контейнером <body>... </body>, т.е. в заголовке документа. Окончательный выбор за вами.

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

Синтаксис тега:

<script language="JavaScript"> [текст программы] </script> Следует иметь в виду, что слово "JavaScript" записывается с соблюдением регистра символов.

Выражения языка JavaScript.

Выражение - это сочетание переменных, операторов и методов, возвращающее определенное значение.

Условные выражения.

Условные выражения используются для сравнения одних переменных с другими, а также с константами или значениями, возвращаемыми различными выражениями. В языке JS есть оператор сравнения ?, имеющий синтаксис:

(условное выражение) ? операторы_1 : операторы_2

Если условное выражение истинно - выполнются операторы_1, в противном случае операторы_2. Можно также присваивать значения переменным. Например, оператор:

type_time = (hour >= 12) ? "PM" : "AM" присваивает строковое значение "PM" переменной type_time, если значение переменной hour больше или равно 12; в противном случае присваивается "AM". Оператор ? в действительности является сокращенным вариантом оператора if . . . else. Предыдущий пример может быть записан так:

if (hour >= 12)
type_time="PM";
else
type_time="AM";

Операции присваивания

В языке JS имеется несколько вариантов присваивания:

=Прямое присваивание значения левому операнду
+= Складывает значения левого и правого операндов и присваивает результат левому операнду
+Складывает значения левого и правого операндов и присваивает результат левому операнду
++Увеличивает значение левого операнда (правый может отсутствовать)
-=Вычитает значения левого и правого операндов и присваивает результат левому операнду
-Вычитает значения левого и правого операндов и присваивает результат левому операнду
-- Уменьшает значение левого операнда (правый может отсутствовать)
* Умножает значения левого и правого операндов и присваивает результат левому операнду
*=Умножает значения левого и правого операндов и присваивает результат левому операнду
/ Делит значения левого на правого операндов и присваивает результат левому операнду
/=Делит значения левого на правого операндов и присваивает результат левому операнду


Так, например, можно записать:
nval *=10;
т.е. переменна nval увеличивает значение в 10 раз.
вместо:
nval = nval * 10;

Операции сравнения:

==Равенство (равно)
!=Не равно
!Логическое отрицание
>=Больше или равно
<=Меньше или равно
>Больше
< Меньше (по возможности желательно воздержаться от применения этого типа)


От выражений, имеющих знак "<" следует отказываться по возможности, так, как данный символ может иметь и другое значение в HTML-документах. Во избежание подобных казусов, когда подобное выражение может послужить случайным открытием тега HTML:

if mvar <h . . . . . .bgcolor- может интерпретироваться как начало заголовка HTML. Теги HTML в JS программах недопустимы.
Логические операции Для обозначения логической операции И в языке JS используют два символа амперсанта ( && ), а для обозначения логической операции ИЛИ - два символа прямой черты ( || ). Эти операции применимы только к булевым значеним. Например:

bvar1 = true;
bvar2 = false;
bvar3 = true;

можно записать выражение:

bvar1 || bvar2
которое возвратит значение true, так, как для данного выражения достаточно того, чтобы значение одного из операндов было true. А вот выражение:
bvar1 && bvar2
возвратит соответственно false так, как отрабатывается операция логического И.

Можно записывать и более сложные выражения:

if ((bvar1 && bvar2) || bvar3) {
  function1();
}
     else {
   function2();
}
следует понимать как: "Активизировать функцию function1(), если обе переменные bvar1 и bvar2 содержат значения true, или хотя бы bvar3 содержит true, иначе вызвать функцию function2 " Для данных значений будет активизирована функция function1(), - bvar3 содержит значение true.

Базовые операторы зыка JavaScript

Программы на языке JS обычно состоят из программных блоков или единичных операторов. Программные блоки - это группы операторов, которые заключаются в фигурные скобки ({ и }). Каждый оператор, если он занимает единственную строку, имеет разграничивающую точку с запятой (;), обозначающую окончание оператора. Каждый оператор имеет собственный синтаксис. Синтаксис оператора - это набор правил, определяющих обязательные и допустимые для использования в данном операторе значения. Значения, присутствие которых является необязательным, при описании синтаксиса принято заключать в квадратные скобки, например [value]. При несоблюдении правил синтаксиса произойдет ошибка компиляции.

Операторы комментариев и примечаний

Синтаксис:

// Текст комментариев
/* Текст
комментариев
*/

Соответственно первый комментарий может иметь только одну строку, второй несколько. Комментарии нужны исключительно только для пояснений или для временного исключения некоторых фрагментов программы во время отладки.

Операторы циклов

В языке JS имеются операторы для выполнения итераций т.е. повторения ряда операторов.

Цикл For

Синтаксис:

for ([инициализация начального значения;] [условие;] [механизм обновления счетчика, шаг]) {
программный блок
}

Оператор For позволяет многократно выполнять операторы в JS-программе. Оператор For может быть использован для выполнения одного или нескольких операторов. Фигурные скобки можно опустить, если тело цикла содержит только один оператор. Все параметры оператора For являются необязательными и используются для управления процессом выполнения цикла. При применении всех параметров каждую часть нужно отделять точкой с запятой (;).
Пример вывода в окне браузера горизонтальных линий, причем каждая длиннее предыдущей:

<html>
<head>
<script language ="JavaScript">
<!--
function testloop() {
var String1 = '<hr align="center" width="' ;
document.open();
for (var size = 5; size <= 50; size+=5)
document.writeln (String1+ size+'%">');
document.close();
}
//-->
</script>
</head>
<body>
<form>
<input type="button"
value="Test the loop"
onClick="testloop()">
</form>
</body>
</html>

В приведенном примере программа выводит в документ ряд горизонтальных линеек - HTML тегов (<HR>), - размер которых увеличивается с шагом 5 (size += 5) от 5% до 100% ширины рабочей области окна браузера. Всего образуется 20 итераций. Переменная String1 хранит строку, содержащую HTML-тег. В цикле к этой строке добавляется новое значение ширины, записанное в переменной size. Когда значение этой переменной достигает 100, цикл завершается. Фигурные скобки в данном примере не нужны, поскольку тело цикла содержит только один оператор. (Здесь и далее оговоримся, что исполняемые выражения встречающиеся внутри операторов влияющих на порядок выполнения программы, например циклов: вызовы функций, методы, обработчики событий и т.п. условимся называть операторами). HTML-документ содержит кнопку, которая активизирует функцию testloop().

Цикл while

Синтаксис:
while (условие) {
программный блок
}

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

Попробуем привести пример программы, которая использует цикл while. Например нужно вывести таблицу умножения:

<html>
<head>
<script language ="JavaScript">
function ftable(inum) {
   var iloop = 1;
   document.writeln ("ТАБЛИЦА УМНОЖЕНИЯ ДЛЯ: <b>" + inum + "</b><hr><pre>");
/* заметьте, что в параметрах функции writeln применены теги HTML - это допустимо.

Теги HTML в тексте программы на JS недопустимы.
Заголовок написан прописными буквами потому, что в тексте встречается буква "я"
Некоторые браузеры, а точнее NN выдают ошибку сценария встретив такую строчную букву.
*/
while (iloop <= 10) {
document.writeln(iloop + " x "+ inum + " = " + (iloop*inum));
iloop ++;
}
document.writeln("</pre>");
}
ftable(prompt ("Введите число: ", 10));
</script>
</head>
</html>

Таблица создается в функции ftable(). Цикл while выполняется 10 раз. Таблица выводится при помощи стандартной функции языка JS writeln(). Метод prompt() обеспечивает ввод данных с клавиатуры. В данном примере вводится число для вычисления таблицы умножения от 1 до 10.
    Данный пример можно было также написать и другим способом, используя цикл for:
for (var iloop=1; iloop <= 10; iloop ++) {
. . . . . . .
}

Выход из цикла - оператор break

Синтаксис:
break

Оператор break используется для выхода из какого-либо цикла, например из цикла for или while. Выполнение цикла прекращается в той точке, в которой размещен этот оператор, а управление передается следующему оператору, находящемуся непосредственно после цикла. Рассмотрим следующую программу:

<html>
<script language ="JavaScript">
function btest() {
var index = 1;
while (index <= 10) {
if (index = = 6)
break;
index ++;
}
//После отработки оператора break управление переходит сюда.

}
btest();
</script>
</html>

В этом примере переменной index присваивается значение 1, а цикл while должен выполняться до тех пор, пока значение переменной index меньше либо равно 10-ти (index <= 10). Однако оператор if проверяет выполнение условия index = = 6. Если это условие выполняется, то цикл while завершается с помощью оператора break. В результате цикл while будет всегда завершаться после первых шести итераций, а значение переменной index никогда не достигнет 10-ти.

Продолжение цикла - оператор continue

Синтаксис:
continue;

Оператор continue используется для прерывания выполнения блока операторов, которые составляют тело цикла и продолжения цикла в следующей итерации. В отличие от оператора break, оператор continue не останавливает выполнение цикла, а наоборот запускает новую итерацию. Если в цикле while идет просто запуск новой итерации, то в циклах for запускает с обновленным шагом.

Определение функции

Синтаксис:
function functionname (arg, . . .) {
блок операторов
}

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

Возврат значения функциями - оператор return

Синтаксис:
return (value);
return value;

Оператор return завершает выполнение функции и возвращает значение заданного выражения. Скобки в этом операторе можно не использовать. Оператор return может отсутствовать в функции, если функция не возвращает значение.
    Оператор return обычно используется для возврата одного значения, однако его можно применять для возврата массива:

function retarray() {
var sarray = new Object();
sarray[1] = "Java";
sarray[2] = "Script";
return (sarray);
}

Обращение к аргументам функции при помощи массива argunents[] (не поддерживается в старых версиях браузеров)

В этом массиве хранится список аргументов, передаваемых текущей функции. Так, первый элемент массива argunents[0] содержит первый аргуменнт функции, argunents[1] - второй и т.д. Общее количество аргументов хранится в свойстве arguments.length. Небольшой пример, который выводит на экран все аргументы, передаваемые функции:

function showargs() {
   arglist = "";
   for (var n=0; n <= arguments.length; n++) {
       arglist += n +"." + arguments[n] + "\n";
}
alert(arglist);
}

    Приведем пример, включающий функцию showargs().
Обратите внимание, что функция вызывается всего с двумя аргументами, хотя в описании функции задано три. В этом случае последний аргумент определяется как значение null. В функции showargs() создается строка аргументов, которая затем выводится на экран с помощью метода alert().

<html>
<script language ="JavaScript">
<!--
function showargs(a, b, c) {
arglist = "";
   for (var n=0; n <= arguments.length; n++) {
     arglist += n +"." + arguments[n] + "\n";
}
alert(arglist);
}
showargs("java","script")
//-->
</script>
</html>

Условные операторы - if . . . else

Синтаксис:
if (condition); {
  Программный блок1
} [ else { программный блок2 }]

    Оператор if . . . else - это условный оператор, который обеспечивает выполнение одного или нескольких операторов, в зависимости от того, удовлетворяются ли условия. Часть condition оператора if является выражением, при истинности которого выполняются операторы языка в первом программном блоке. Программный блок должен быть заключен в фигурные скобки, однако если используется только один оператор, можно скобки не ставить. Необязательная часть else обеспечивает выполнение операторов второго блока, в случае, если условие condition оператора if является ложным. Операторы if можно вкладывать друг в друга. Приведем пример. Ну например будем менять цвет фона в зависимости от системного времени: первая половина часа пусть будет синим, вторая - черным:

<html>
<head>
<script language ="JavaScript">
<!--
today = new date();
minutes = today.getMinutes();
if (minutes >=0 && minutes <= 30)
   document.write("<body text=white bgcolor=blue> Это написано белым на синем");
     else
       document.write("<body text=red bgcolor=black> Это написано красным на черном");
//-->
</script>
</body>
</html>

оператор ?

Синтаксис:
(expression) ? trueStatements ? falseStatements; {
где expression - выражение на языке JS, результат выполнения которого равен либо true (истина), либо false(ложь). Вместо trueStatements и falseStatements подставляются один или несколько операторов JS, которые выполняются в зависимости от результата вычисления выражения expression. Операторы trueStatements выполняются, если выражение истинно, а falseStatements - если оно ложно. Оператор ? можно рассматривать как сокращенный вариант записи оператора if . . . else. Я упоминаю его еще раз с тем, что он работает несколько быстрее оператора if. В приведенном ниже примере будем менять цвет фона в зависимости от значения секунд в текущем системном времени:

<html>
<head>
<script language ="JavaScript">
<!--
var today = new date();
var secs = today.getSeconds();
(secs >=0 && secs <= 30) ?
   document.write("<body text=white bgcolor=blue> Это написано белым на синем") :
   document.write("<body text=red bgcolor=black> Это написано красным на черном");
//-->
</script>
</body>
</html>

Вложенные операторы ?

    Для проверки нескольких условий операторы ? можо вкладывать друг в друга. В качестве примера рассмотрим программу, в которой проверять будем больше значений. Например составим программу, которая будет проверять значение секунд, если в интервале от 0 до 30, - цвет фона делаем голубым. Когда значение больше 30-ти, программа проверяет, в каком интервале находится значение секунд - от 31 до 50 или нет. Если результат будет истинным, цвет фона изменится на черный, в противном случае фон становится бежевым:

<html>
<head>
<script language ="JavaScript">
<!--
var today = new date();
var secs = today.getSeconds();
(secs >=0 && secs <= 30) ?
   document.write("<body text=white bgcolor=blue> Это написано белым на синем") :
       (secs >=31 && secs <= 50) ?
    document.write("<body text=red bgcolor=black> Это написано красным на черном"):
   document.write("<body text=red bgcolor=black> Это написано красным на черном");
//-->
</script>
</body>
</html>
Создание переменных

    Переменные создаются либо при помощи оператора var, либо при непосредственном присвоении значений с помощью оператора присваивания (=). Оператор var

Синтаксис:
var variablename [= value | expression];

    Оператор var создает новую переменную с именем variablename. Область действия этой переменной будет либо локальной, либо глобальной в зависимости от того, где создана переменная. Фактически при создании переменной оператор var можно опустить, однако в этом случае в правой части оператора присваивания должно быть указанно значение. Переменная, созданная внутри функции будет недоступна за пределами функции, то есть переменная будет локальной.

Обращение к текущему объекту - оператор this

Синтаксис:
this[.property]

    Оператор this является не столько оператором, сколько внутренним свойством языка JavaScript. Значение this представляет собой текущий объект, имеющий стандартные свойства, такие как name, length и value. Оператор this нельзя использовать вне области действия функции или вызова функции. Когда аргумент property опущен, с помощью оператора this передается текущий объект. Однако при обращении к объекту, как правило, нужно указать его определенное свойство.
    Оператор this применяется для "устранения неоднозначности" объекта с помощью привязки его в область действия текущего объекта, а также для того, чтобы сделать программу более компактной.
     Например, вы можете вызывать JS-функцию при обработке события OnChange, связанного с изменением содержимого поля ввода, используя оператор this для передачи текущего значения объекта:

<html>
<head>
<script language ="JavaScript">
<!--
function sendData (arg) {
alert( arg.name + "меняем содержимое поля ввода.");
}
//-->
</script>
</head>
<body>
<form>
<table>
<tr>
<td> Name: </td>
<td><input name = "persname" type="text" > </td>
</tr>
<tr>
<td> E-mail: </td>
<td><input name = "email" type="text" > </td>
</tr>
</table>
</form>
</body>
</html>

    Когда пользователь изменяет содержимое поля ввода с именем persname, вызывается функция sendData() с аргументом this. Значением this в данном случае является поле ввода, определенное в теге <input>. Для того чтобы извлечь в программе какое-либо зачение, связанное с этим объектом, необходимо указать соответствующее свойство. В приведенном примере указано свойство name. Конечно, можно было бы сразу передать в функцию аргумент this.name. Чтобы увидеть содержимое текстового поля, следует использовать свойство this.value. Если же не использовать оператор this, функцию sendData() необходимо изменить следующим образом:

function sendData (arg) {
alert (document.forms[0].persname.name + "меняем содержимое поля ввода.");
}

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

<html>
<head>
<script language ="JavaScript">
<!--
function seeElem (f) {
var elemlist = "";
for (var num=0; num < f.elements.length; num++) {
   elemlist += num + ". " + f.elements[num] + "\n";
}
alert(elemlist);
}
//-->
</script>
</head>
<body>
<form>
<table>
<tr>
<td> Name: </td>
<td><input name = "persname" type="text" > </td>
</tr>
<tr>
<td> E-mail: </td>
<td><input name = "email" type="text" > </td>
</tr>
</table>
<input type = "button"
     value = "Посмотрим теги элементов"
      onClick="seeElem(this.form)">
</form>
</body>
</html>

    Приведенная программа организует цикл, в котором просматриваются все элементы массива elements. В этом цикле каждый элемент формы добавляется к результирующей строке, которая затем форматируется и выводится на экран при помощи окна alert(). Обратите внимание, что в функцию seeAlert() передается целый объект form.

Задание текущего объекта - оператор with

Синтаксис:
with (objname); {
     statements
}
    Оператор with делает объект, обозначенный как objname, текущим объектом для операторов в программном блоке statements. Удобство использования этого оператора заключается в том, что такая запись позволяет сократить объем текста программы. (Это же ведь важно для web-приложений) Ниже показано, как оператор with применяется к встроенному объекту Math языка JS.

with (Math) {
    document.writeln(PI);
}

    Такая запись позволяет избежать использования префикса Math при обращении к константам данного объекта. Рассмотрим пример, как можно использовать оператор with применительно к объекту document:

with (parent.frames [1].document) {
     writeln("Пишем сюда текст");
     write("<hr>");
}

    В этом случае оператор with избавляет нас от необходимости указывать перед методами writeln() и write() документ, к которому относятся вызовы этих методов. В приведенном примере используется фреймосодержащий документ.






На этом на сегодня все.
До встречи в следующих выпусках.

Владимир Максимишин


Уважаемые читатели. Теперь Вы сможете изучить JAVASCRIPT самостоятельно, украсить свой сайт интересным скриптом, скачав пакет "Все о JAVASCRIPT". Скачать его Вы сможете отсюда -
СКАЧАТЬ ПАКЕТ "ВСЕ О JAVASCRIPT"    


Внимание: пакет находится под паролем.
Просмотреть наименование его содержимого Вы сможете, а откроете только после оплаты и получения от нас паролей к материалам.

Содержание пакета:

1) Полнофункциональный сборник "1000 яваскриптов" - стоимость 250 рублей, или 10$.
2) Бонусы ( бесплатно):
    а) Руководство по Яваскрипт
    б) Учебник по Яваскрипт
    в) Яваскрипт в примерах

 Наши реквизиты для оплаты вложены в пакет в текстовый файл "Прочитать", либо Вы сможете их просмотреть здесь:http://javascript05.narod.ru/1111.html


Subscribe.Ru
Поддержка подписчиков
Другие рассылки этой тематики
Другие рассылки этого автора		 Подписан адрес:
Код этой рассылки: inet.webbuild.javascript05
Архив рассылки		 Отписаться Вебом Почтой
Вспомнить пароль
В избранное