Язык сценариев JavaScript

5. Язык сценариев JavaScript Язык JavaScript в сочетании с каскадными листами стилей (CSS) и объектной моделью документа (DOM) позволяет полностью контролировать все, что происходит на Web-странице. Основные свойства языка JavaScript: -JavaScript является языком сценариев (script), это означает, что команды JavaScript интерпретируются браузером, а не компилируются в бинарный код. -JavaScript является объектно-базированным языком, объектная модель JavaScript основывается на объектах. -Большинство созданных кодов на JavaScript реагируют на события, генерируемые пользователем или системой. Язык JavaScript обладает поддержкой обработки событий. -JavaScript является слабо типизированным языком в отличии от языков программирования, требующих объявления типов переменных. -Особенностью JavaScript является возможность внедрения кода в HTML-документ. Большинство объектов JavaScript представлено соответствующими дескрипторами HTML. Код JavaScript может быть внедрен как в часть , так и непосредственно в тело HTML-документа. Инструментом для написания сценариев может служить простой текстовый редактор (Notepad) или средства визуального проектирования, такие как Notepad++, PHP Designer и другие. 1 5.1 HTML и JavaScript HTML и JavaScript–независимые друг от друга технологии и существуют специальные правила помещения JavaScript на Web-страницу. Первый способ заключается в том, что сценарий JavaScript вставляется блоком в элемент . Этот блок ограничивается парными дескрипторами . Назначением этого блока является указание браузеру на то, что содержимым является сценарий, который требует соответствующей обработки. Помещенный в блок сценарий будет выполнен в первую очередь. Сценарий может быть расположен не только в дескрипторе , но и встроен непосредственно в HTML-код. В этом случае сценарий должен выполняться после создания браузером DOM-дерева. Кроме указанных способов размещения код JavaScript рекомендуется располагать во внешнем файле (с расширением .js), тогда в дескрипторе . Этот вариант присоединения удобен в тех случаях, когда код должен использоваться несколькими HTML-страницами. 2 5.2 Типы данных В языке JavaScript различают следующие типы данных: -строковые; -числовые; -булевы. В пределах типа данные могут быть разделены на литералы и переменные. Литералы представляют собой постоянные значения JavaScript. Строка представляет собой набор символов, включающий в себя буквы, цифры, знаки пунктуации, заключенный в двойные или одинарные кавычки. Например, "Я изучаю JavaScript“ Числа различаются целые и с плавающий точкой. Булевы литералы имеют только два значения true и false. К особым типам данных можно отнести несуществующее число (not a namber-NaN), неопределенный (null) и неопределяемый (undefined) тип. Переменные позволяют хранить данные. Под переменной понимается имя, присваиваемое ячейке памяти компьютера, хранящей определенные данные во время выполнения сценария. До использования переменных в сценарии их надо объявить и назначить им определенное значение (инициализировать). Для объявления переменных используется ключевое слово var (variable), за которым следует имя переменной. При выборе имени нужно помнить следующие правила: первым символом должна быть буква или символ подчеркивания; в имени недопустимы пробелы, знаки пунктуации и ключевые слова JavaScript; можно использовать символы верхнего и нижнего регистров, но учитывать тот факт,3 что JavaScript чувствителен к регистру;.длина может быть любой. Например, для объявления переменной msg нужно использовать конструкцию: var msg; Несколько переменных можно объявить в одной строке через запятую: var msg, msg1,msg2; Значение переменной может быть присвоено в любом месте сценария. Для этого применяется оператор присваивания, в левой части которого стоит имя переменной, а в правой - присваиваемое значение, например, msg="переменная JavaScript"; Переменной может быть присвоено значение в момент ее объявления, например, var msg="переменная JavaScript", msg1="также переменная JavaScript"; Далее приведен пример использования переменной в сценарии. Переменная name объявлена, а затем инициализирована с помощью метода prompt(). Имя пользователя, которое он введет в диалоговом окне будет присвоено переменной name, а затем она будет выведена с помощью метода alert в окне вывода сообщений. Пример var name; name=prompt("Как Вас зовут?", "пожалуйста, введите Ваше имя"); alert ("привет, "+name); 4 5.3 Выражения Преобразование данных производится с помощью выражений. Выражение представляет собой совокупность операндов, над которыми производятся операции. Результатом выражения является значение, которое относится к одному из известных в JavaScript типу данных. 5.3.1 Операции Арифметические операции Арифметические операции служат для получения числовых результатов. Их перечень приведен в таблице Операция Название Пример Результат + Сложение 5+2 7 - Вычитание 5-2 3 / Деление 5/2 2.5 * Умножение 5*2 10 ++ Инкремент 5++ 6 -- Декремент 5-- 4 % Целочисленное деление Отрицание 5%2 1 -5 -5 - 5 Арифметические операции используются в сочетании с операцией присваивания, что позволяет присваивать переменной новые значения, например, х=5+7 или х=х+у. Запись комбинации операции присваивания и арифметических операций производится так как показано в таблице. Сокращенная запись Полная запись х+=у х=х+у х-=у х=х-у х*=у х=х*у х/=у х=х/у х%=у х=х%у В программировании часто используется увеличение или уменьшение значения переменной на единицу, а затем присваивание ей этого значения х=х+1 или х=х-1. Сокращенная запись этих действий в JavaScript: х++ (инкремент) и х--(декремент). 6 Операции сравнения Операции сравнения используются для сравнения выражений. Два операнда, соединенные операцией сравнения, образуют выражение сравнения. Результатом выражения сравнения являются значения true или false. В качестве операндов могут выступать числа, строки, переменные, свойства объектов или результаты работы функций. Операции сравнения приведены в таблице. Результат Операция Название Пример == равно 2= =4 false != не равно 2!=4 true > больше 2>4 false < меньше 2<4 true >= больше либо 2>=4 равно меньше либо 2<=4 равно <= false true 7 Строковые операции Строковые операции включают в себя операции сравнения и операцию конкатенации (объединения) строк, которая обозначается знаком +. Например, "Java"+"Script". Результатом будет строка "JavaScript". Если хотя бы один из операндов является строкой, то результат объединения данных также будет строкой. Когда первый операнд строка, все остальные операнды будут преобразованы в строки. Например, "33"+44. Результатом будет строка "3344". Если строкой является не первый операнд, то вначале выполняется сложение чисел, а затем объединение со строковым операндом. Например, 44+5+"33". Результатом будет строка "4933". Булевы операции Булевы или логические операции служат для построения логических выражений, в которых операндами являются выражения сравнения. Название Синтаксис Возвращаем ое значение AND (И) Опер1&&Опер2 || OR (ИЛИ) Опер1||Опер2 ! NOT (НЕ) !Опер true, если оба операнда равны true, в противном случае false true, если хотя бы один операнд равен true, в противном случае false true, если операнд равен false, в противном случае false Оператор && 8 5. 4 Использование операторов в языке JavaScript Операторы в языке JavaScript обычно записываются в одной строке и заканчиваются точкой с запятой. 5. 4.1 Оператор variable Оператор variable позволяет объявить компьютеру о существовании переменной и обеспечить отведение некоторой части памяти под эту переменную. Например, var my_var; Для объявления нескольких переменных нужно отделить их друг от друга запятой, например, var my_var, my_var1, my_var2; 5. 4.2. Операторы принятия решений if и switch Оператор if позволяет выполнить одну из двух альтернативных групп операторов в зависимости от значения проверяемого выражения (условия), которое может быть истинным (true) или ложным (false). Оператор if может не содержать часть, обеспечивающую обработку значения false. Замечание. В JavaScript следующие значения по определению равны false: ноль, пустая строка (""), null и undefined (значение неопределенной переменной). Оператор if имеет следующий синтаксис: if (выражение) { true операторы; } else { false операторы; 9 } В примере производится вывод информации о том, является ли високосным указанный год. Будем считать високосным год, без остатка делящийся на 4. Переменной current_year присваивается значение года, введенное пользователем, а затем в зависимости от результата проверки условия current_year%4= =0 на экран выводится соответствующее сообщение. Если значение условия равно true , то выводится сообщение "високосный", при значении false выводится сообщение " не високосный". Пример 10 Если для принятия решения нужно поверить несколько условий, то можно использовать вложенные операторы if. Для формирования составных условий применяются логические операции И, ИЛИ и НЕ. Вложенный оператор if имеет следующий синтаксис: if (выражение1) { true операторы1; } else if (выражение2){ true операторы2; } else { false операторы; } Данная конструкция работает следующим образом. Сначала проверяется выражение1. Если результат true, то выполняется группа операторов true операторы1. Все остальные операторы игнорируются. Если результат false, проверяется выражение2. Если результат true, то выполняется группа операторов true операторы2. Все остальные операторы игнорируются. В противном случае выполняются false операторы. 11 В следующем примере рассматривается работа вложенного оператора if. Пользователь вводит значение возраста, которое сохраняется в переменной my_age. Код JavaScript выдает сообщение о возрастной группе, к которой принадлежит пользователь. Возрастные группы организованы с шагом в 20 лет. Их формирование обеспечивается использованием логической операции И (&&), например, (my_age <=40 && my_age >20). Кроме того существует группа, куда входят лица младше 20 и старше 80 лет. Она формируется с помощью логической операции ИЛИ (||) ((my_age <=20) || (my_age >80)). Оператор switch При необходимости проводить большое число проверок, удобно использовать оператор switch. Оператор switch имеет следующий синтаксис: switch (выражение){ case выражение1 : операторы1; break; case выражение2 : операторы2; break; . . . default: операторы; break; } В начале вычисляется выражение, которое может быть числом, строкой или булевым значением . Операторы1, операторы2 и т.д. – это те операторы, которые выполняются в случае совпадения значений выражения и соответствующего выраженияn. Если такого совпадения не произошло, то выполняются операторы, стоящие в части default (по умолчанию). Чтобы закончить выполнение оператора switch после отработки одного из случаев совпадения выражений, каждая часть case 13 заканчивается оператором break. В примере выводится название дня недели в зависимости от его порядкового номера, которое ввел пользователь. Если пользователь введет число, не входящее в диапазон, то получит сообщение об ошибке. Пример 14 Задания к лабораторным и практическим занятиям (Часть 1) Задание 1_JS Цель: Знакомство с организацией диалога с пользователем с помощью методов alert(), confirm() и prompt(). Составление программного кода с использованием условных операторов if и switch. 1. Cоздайте html-документ с программным кодом, в котором объявлена переменная name, а затем она инициализирована с помощью метода prompt(). Выведите с помощью метода alert() приветствие и имя пользователя, введенное в диалоговом окне prompt. 2. Добавьте к сценарию программный код, в котором проанализируйте имя, введенное пользователем в диалоговом окне prompt(), пользуясь оператором if. Если это Ваше имя, выведите сообщение об этом, в противном случае сообщите, как Вас зовут. Для вывода информации используйте метод document.write(). Сохраните файл и просмотрите полученные результаты в браузере. 3. Создайте сценарий, обеспечивающий вывод на экран окна подтверждения, формируемого с помощью метода confirm(), сохраните результат в переменной answer и выведите ее на экран дисплея. Обратите внимание на тип переменной answer. 15 4. Добавьте к сценарию программный код, в котором проанализируйте значение переменной answer, пользуясь оператором if. Если пользователь нажал кнопку ОК, выведите на экран сообщение "Идем в кино!", в противном случае – "Идем учиться!". Сохраните файл и просмотрите полученные результаты в браузере 5. Создайте сценарий, запрашивающий поочередный ввод двух целых чисел. Сложите их и выведите результат с помощью диалогового окна alert() и метода document.write(). Обратите внимание на конкатенацию строк и функцию преобразования строки в число (parseInt()). Сохраните файл и просмотрите полученные результаты в браузере. 6. Cоздайте html-документы, используя в качестве содержимого тексты примеров 1 и 2. Пример 1 16 Пример 2