Синтаксические основы JavaScript

Дополнительные файлы к лекции находятся в 08.zip. Презентацию к данной лекции Вы можете скачать здесь.

Комментарии

В JavaScript как и в С++ существуют однострочные и многострочные комментарии. Синтаксис комментариев следующий:

//Однострочный комментарий
/*
Многострочный комментарий, используется для блока текста
*/

Ввод-вывод

Для того, чтобы пользователь мог взаимодействовать с программой, требуются средства ввода-вывода.

Для ввода и вывода данных можно воспользоваться методами браузера и загруженного в него документа. Объект, представляющий свойства браузера, называется window (окно), а три его метода - alert(), prompt() и confirm() - предназначены для ввода и вывода данных посредством диалоговых окон. Объект, представляющий свойства документа, называется document, а его методы write() и writeln() служат для вывода данных непосредственно в клиентскую область браузера. Объект document очень важный, но не корневой в объектной модели, потому при обращении к его свойствам требуется указывать имя объекта, например, document .write("Здравствуй, Мир").

Проиллюстрируем сказанное на нескольких примерах.

Метод alert()

Данный метод позволяет выводить диалоговое окно с заданным сообщением и кнопкой ОК. Синтаксис следующий:

alert(сообщение)

В предлагаемом ниже примере будет выведен афоризм Козьмы Пруткова.

alert("Если хочешь быть красивым, поступи в гусары");

Диалоговое окно, выведенное на экран методом alert() является модальным, т.е. пока мы не нажмем кнопку OK, не сможем дальше работать с программой.

Метод confirm()

Метод confirm позволяет вывести диалоговое окно с сообщением и двумя кнопками: ОК и Отмена (Cancel). В отличие от alert(), этот метод возвращает логическую величину, значение которой зависит от того, какую из кнопок нажал пользователь. Если он щелкнул на кнопке ОК, то возвращается значение true (истина, да); если же была нажата кнопка Отмена (Cancel), то возвращается значение false (ложь, нет). Возвращаемое значение можно обработать в программе и, следовательно, создать эффект интерактивности, т. е. диалогового взаимодействия программы с пользователем. Синтаксис метода confirm() следующий:

confirm(сообщение)

Пример:

confirm("Выйти из программы?");

Метод prompt()

Метод prompt() позволяет вывести на экран диалоговое окно с сообщением, а также с текстовым полем, в которое пользователь может ввести данные. Кроме того, в окне предусмотрены две кнопки: ОК и Отмена (Cancel). В отличие от alert() и confirm(), данный метод принимает два параметра: сообщение и значение, которое должно появиться в текстовом поле ввода данных по умолчанию. Если пользователь щелкнет на кнопке ОК, метод вернет содержимое поля ввода данных, а если он щелкнет на кнопке Отмена, то возвращается логическое значение false (ложь, нет).

Синтаксис метода prompt () следующий:

prompt (сообщение, значение_поля_ввода_ланных)

В предлагаемом примере пользователь вводит свое имя с помощью оператора promt, имя присваивается переменной FirstName, затем переменная соединяется со статическим текстом и выводится на экран с помощью оператора alert().

var FirstName,str;
FirstName=prompt("Как Вас зовут?", "");
str = "Очень приятно, " + FirstName + "!";
alert(str);

Метод document.write()

Метод document.write(список_строк) позволяет выводить в окне браузера список текстовых строк, разделенных запятыми. Если выводимая строка представляет собой HTML-код, то браузер отобразит результат его интерпретации, а не последовательность тегов. Иначе говоря, теги HTML в выводимом сообщении будут восприниматься браузером как команды, а не просто как текстовые символы.

Метод document.writeln(список_строк) отличается от предыдущего тем, что выводит указанную строку (или несколько строк), добавляя в конце невидимый управляющий символ перехода на новую строку.

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

var str;
str = "<h1>" + "Бросая в воду камешки, смотри на круги, ими 
      образуемые," + "<br>" + 
      "иначе такое бросание будет пустою забавою" + "</h1>";
document.write(str);

Переменные

В языке программирования JavaScript поддерживаются пять примитивных типов данных (числовой, строковый, логический, пустой и неопределенный) и один составной, объектный ( Object )

Переменные объявляются с помощью ключевого слова var. При создании переменной она приобретает значение undefined.

var  str;
alert(str);

Автоматическое преобразование типов данных

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

var x, y, z, str;
x = 3;       //Числовой тип
y = true;    //Логический тип
z = "Вася";  //Символьный тип
str = x+ y + z;
alert(str);

Здесь мы попытались сложить числовую, логическую и символьную величину. JavaScript по своему разумению преобразовал типы этих переменных, получился непредсказуемый результат.

Для того чтобы развеять сомнения лучше осуществить явное преобразование типов. Функция parseInt(строка, основание) преобразует строку в целое десятичное число, функция parseFloat(строка) - преобразует строку в десятичное число с плавающей запятой.

var a, b, c, d, str;
a = parseInt("3.14159158");
b = parseInt("40.5 рублей 67 копеек");
c = parseFloat("3.14159158");
d = parseFloat("40.5 рублей 67 копеек");

str = a + "<br>" + b + "<br>" + c + "<br>" + d;
document.write(str);

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

С помощью оператора присваивания переменным присваиваются некоторые значения. В JavaScript имеется много способов записи операций присваивания, аналогичных с C++. Рассмотри различные формы присваивания на следующем примере.

var a, b, c, d, f, str;

a = 1;  //Наиболее привычная форма записи
b = 13;
c = 2;
d = 5;
f = 15;
        
b += a; //То же, что и b=b+a
c++;    //То же, что и c=c+1
d *= 2; //То же, что и d=d*2
f %= 7; //Нахождение остатка при делении 15 на 7

str = b + "<br>" + c + "<br>" + d + "<br>" + f;
document.write(str);

Условные операторы

Условные операторы изменяют ход выполнения программы в зависимости от некоего условия. Существуют конструкции ?) и переключатель switch. При разработке программ, использующих условные операторы, нужно учитывать, что как и в С++, при проверке равенства двух величин нужно писать a==b, а не a=b, т.к. выражение a=b в условном операторе будет расценено как оператор присваивания. Второе. При разработке составных условий выражение a>3 b<5 обозначает операцию конъюнкции, т.е. должны выполняться оба условия. Выражение a>3 || b<5 обозначает дизъюнкцию, т.е. для истинности выражения достаточно выполнение хотя бы одного условия.

Оператор if..then

Синтаксис оператора if…then следующий:

If (Условие) {Действие 1} else {Действие 2}

В случае истинности условия выполняется первое действие, в противном случае - второе действие.

В предлагаемом примере сравниваются два числа, и находится наименьшее.

var a, b, c, str;
a = 1;
b = 300;
if (a < b) { c = a; }
else { c = b; }
str = "Минимальное значение из двух чисел равно " + c;
document.write(str);

Условная операция (оператор ?)

Оператор ? является сокращенной формой оператора if..then. Синтаксис его следующий:

Условие ? действие 1 : действие 2.

В случае истинности условия выполняется первое действие, в противном случае - второе.

var a, b, c, str;
 a = 80;
 b = 300;
//Оператор ? является сокращенной формой условного оператора if.. else
 a > b ? c = a : c = b;
 str = "Максимальное из двух чисел: " + c;
 document.write(str);

Переключатель switch

Этот оператор удобно применять в случае нескольких однородных повторяющихся условий. Его синтаксис следующий:

switch (выражение) {
	case вариант 1:
		код
		[break]
	case вариант 2:
		код
		[break]
…
[default:
	код]
}

В квадратные скобки заключены необязательные выражения. Сначала вычисляется выражение, указанное в круглых скобках сразу за ключевым словом switch. Полученное значение сравнивается с тем, которое указано в первом варианте. Если они не совпадают, то код этого варианта не выполняется и происходит переход к следующему варианту. Если же значения совпали, то выполняется код, соответствующий этому варианту. При этом если не указан оператор break, то выполняются коды и остальных вариантов, пока не встретится оператор break. Это же правило действует и для остальных вариантов.

В предлагаемом ниже примере в зависимости от выбранного номера дня недели на экран выводится его шуточный комментарий.

var DayNumber, str;
DayNumber = 5;

switch (DayNumber) {
    case 1:
        str = "Отдых от рабочего дня";
        break
    case 2:
        str = "Поготовка к рабочему дню";
        break
    case 3:
        str = "Рабочий день";
        break
    case 4:
        str = "Отдых от рабочего дня";
        break
    case 5:
        str = "Подготовка к выходному дню";
        break
    case 6:
        str = "Первый выходной день";
        break
    case 7:
        str = "Второй выходной день";
        break
}
document.write(str);

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

Операторы цикла выполняют некоторую последовательность действий до тех пор, пока истинно (ложно) некое условие. Помимо условия операторы цикла содержат также итерационную переменную, которая на каждом шаге работы цикла претерпевает определенные изменения. В JavaScript предусмотрены три оператора цикла: for, while и do-while. В операторе цикла for заранее известно количество итераций. Его удобно использовать при работе с массивами. Допускаются вложенные операторы цикла for. В циклах while и do-while мы заранее не знаем количество итераций. Их удобно использовать в задачах математического моделирования и при сканировании различного рода последовательностей.

Оператор for

Синтаксис оператора for следующий:

for ([начальное_выражение] ; [условие] ; [выражение обновления])
{
код
}

В предлагаемом примере мы найдем сумму чисел от нуля до десяти. Как видно из листинга, вначале переменной sum присваивается значение 0, затем на каждом шаге цикла прибавляется по единице.

var i,n, sum,str;
sum = 0;
n = 10;

for (i = 1; i <= n; i++) {
    sum += i;
}
str = "Сумма первых " + n + " членов ряда = " + sum;
alert(str);

Оператор while

Синтаксис этого оператора следующий:

while (условие) {
код
}

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

В предлагаемом примере решается предыдущая задача. Цикл while работает до тех пор, пока итерационная переменная i не станет равна десяти.

var i,n, sum,str;
  sum = 0;
  n = 10;
  i = 1;
        
while(i<=n)
{
    sum += i;
    i++;
}
str = "Сумма первых " + n + " членов ряда = " + sum;
document.write(str);

Оператор do-while

Оператор do-while (делай до тех пор, пока) представляет собой конструкцию из двух операторов, работающих совместно. Синтаксис этой конструкции следующий:

do {
код
}
while (условие)

В отличие от while в операторе do-while код выполняется хотя бы один раз, независимо от условия, которое проверяется после выполнения кода. Если оно истинно, то снова выполняется код в теле оператора do. В противном случае работа оператора do-while завершается.

В приведенном ниже примере показано использование цикла do … while для нахождения факториала.

var n, i, z, str;
n = 5;
z = 1;
if (n > 1) {
    i = 2;
    do {
        z *= i;
        i++;
    }
    while (i <= n);
}
str = "Факториал " + n + " = " + z;
document.write(str);

Краткие итоги

JavaScript имеет Си-подобный синтаксис, что особенно заметно проявляется на примере комментариев, операторов присваивания, в циклах и условных операторах. Вместе с тем, ввод-вывод заметно отличается от такового в Си и больше напоминает Visual Basic.Net (оператор alert похож на MsgBox ). Еще одним существенным отличием от Си является слабая типизация и автоматическое преобразование типов.

Набор для практики

Вопросы:

Упражнения: