WWW.DISSERS.RU

БЕСПЛАТНАЯ ЭЛЕКТРОННАЯ БИБЛИОТЕКА

   Добро пожаловать!


Pages:     || 2 | 3 | 4 | 5 |   ...   | 6 |
Санкт-Петербургский государственный университет Факультет филологии и искусств Кафедра информационных систем в искусстве и гуманитарных науках В. В. ЗАХАРКИНА JavaScri pt.

Основы клиентского программирования Санкт-Петербург 2007 1 Разработка любой информационной системы предполагает Рекомендовано к изданию рассмотрение целого ряда аспектов, так или иначе взаимосвязанных.

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

Захаркина В. В.

Понимая, что все аспекты разработки веб-ресурса в идеале должны JavaScript. Основы клиентского программирования: Учебное быть взаимосвязаны, сделаем акцент на трех основополагающих, без пособие. — СПб.: Ф-т филологии и искусств СПбГУ, 2007. — 73 с.

реализации которых нет предмета для обсуждения остальных:

• Задание структуры.

Учебное пособие соответствует третьей части курса «Введение в • Определение параметров внешнего отображения в рамках специальность» в рамках учебной программы специальности «Прикладная дизайнерской концепции.

информатика в искусстве и гуманитарных науках». Курс рассчитан на четыре семестра и призван сформировать представление о базовых • Обеспечение функциональности.

клиентских и серверных веб-технологиях и дать навык их использования.

Учебное пособие посвящено основам применения алгоритмического Такое выделение трех основных аспектов актуально именно в контексте языка JavaScript при создании интерактивных веб-документов. Обсуждаются разговора об основах клиентского веб-программирования. Очевидно, основные конструкции языка и методы использования объектной модели иные акценты расставили бы менеджер веб-проектов, аналитик, вебдокумента (DOM) в клиентских сценариях. Изложение сопровождается дизайнер, профессиональный программист и специалист по usability. И, примерами, приводятся фрагменты программного кода, реализующие естественно, все были бы правы. Но сейчас у нас своя предметная область.

актуальные задачи клиентского программирования.

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

рамках проекта СПбГУ «Инновационная образовательная среда в классическом университете» (Приоритетный • Структура веб-документа определяются средствами HTML.

национальный проект «Образование»).

• Параметры внешнего отображения задаются при помощи CSS.

А вот вопросы обеспечения функциональности явно могут быть разделены на две категории:

© В. В. Захаркина, • Функциональность на стороне клиента.

© Факультет филологии и искусств СанктПетербургского государственного • Обработка данных и динамическое формирование ответа университета, серверными средствами.

Язык JavaScript обеспечивает программирование клиентских Отпечатано с готового оригинал-макета в секторе цифровой печати Института искусств Факультета филологии и искусств СПбГУ сценариев. С его помощью можно создавать разнообразные варианты 199178 Санкт-Петербург, 10 линия В.О., д. 49.

меню и навигационных панелей, открывать дополнительные окна с Подписано в печать 10.11.2007. Заказ № 44. Формат 60х84/16. Усл. печ. л. 4,75. Тираж 100 экз.

заданными параметрами, реализовывать интерактивные тесты для 2 самопроверки, и т.д. Интересной сферой применения является и Основные конструкции программирование различных декоративных эффектов.

Будучи вполне полноценным алгоритмическим языком, JavaScript JavaScri pt лишен возможностей работы с файловой системой. Это совершенно естественное ограничение продиктовано соображениями Примечания к синтаксису безопасности клиентского компьютера.

JavaScript является интерпретируемым языком (для • JavaScript - регистрозависимый язык. Чувствительны к регистру алгоритмических языков подобного типа часто употребляют еще и идентификаторы переменных, имена функций, меток, ключевые термин «язык сценариев»). Заданные в текстовом формате слова. Все ключевые слова используют нижний регистр.

операторы JavaScript анализируются встроенным в браузер и либо • Идентификаторы могут содержать символы ASCII, цифры, выполняются либо по мере интерпретации, либо в ответ на символы подчеркивания "_" и символ доллара "$". Первый символ наступление некоторых событий. Сценарии JavaScript могут быть не должен быть цифрой. В качестве идентификаторов нельзя сохранены во внешних файлах, присоединяя которые к документам использовать ключевые и зарезервированные слова.

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

Строго говоря, JavaScript не является истинно объектноориентированным языком, однако объектный тип данных в нем • Комментарии:

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

/*...

многострочный комментарий */ Комментарии удобно использовать и не «по прямому назначению», а для того, чтобы визуально отделить друг от друга фрагменты кода. Например, так:



//----------------------------------------- //получился удобный горизонтальный разделитель • Переменные не имеют строгой типизации. Объявляются с помощью оператора var, который можно опускать, за исключением объявления локальных переменных в теле функции.

Возможно объявление c одновременной инициализацией, например:

var s = 4 \t символ табуляции (tab) Типы данных \' ' В JavaScript поддерживаются следующие типы данных.

\" " \\ \ Числа символ в кодировке Latin-1, заданный тремя восьмеричными \aaa Числа представляются в формате с плавающей точкой длиной 64 символами aaa разряда (и целые тоже). Например, символ в кодировке Latin-1, заданный двумя \xaa 123 шестнадцатеричными символами aa 3.для всех символов, отличных от вышеперечисленных, трактуется 1e-12 \символ как указанный символ 015 // восьмеричное число начинается с 0xFC // шестнадцатеричное число начинается с Для чего может понадобиться последняя конструкция Например, 0x какие-то (точно уже не помню) старые браузеры некорректно воспринимали в строках некоторые буквы кириллицы, выдавая при этом сообщения об ошибках сценария. И для того, чтобы, скажем, в Булевы величины строке s содержалось слово "филология", приходилось выполнять Как и в других языках программирования, булевы величины присваивание s = '\филология', после чего символ "ф" представляются ключевыми словами true и false. трактовался интерпретатором правильно.

JavaScript предоставляет ряд функций для работы со строками.

Строки Массивы Строки заключаются в апострофы либо в двойные кавычки. Внутри строки ряд символов, непосредственно перед которыми стоит символ Массив JavaScript представляет собой объект, доступ к значениям "\", имеют специальное значение. Таким образом, пары символов, которого осуществляется с помощью индексов - целых чисел, начиная первым из которых является "\", трактуются как один спецсимвол.

с нуля. Объявляется с помощью конструктора new, создающего новый экземпляр объекта Array.

код значение teachers = new Array(); // объявление без \b удаление последнего предшествующего символа (backspace) инициализации \f подача страницы (feed) teachers[0] = 'Pankratov'; // инициализация 1-го элемента \n символ новой строки (new) teachers[1] = 'Zakharkina'; // инициализация 2-го \r элемента возврат каретки (return) 6 days = new Array( 'Monday', 'Tuesday', availHeight (доступная ширина и высота в пикселах). Пример 'Wednesday' ); // объявление с инициализацией обращения к свойствам:

w = screen.width;

JavaScript предоставляет ряд функций для работы с массивами.

h = screen.height;

Объекты null В JavaScript определен ряд внутренних объектов для работы со Это ключевое слово указывает на отсутствие значения.

строками, числами, датами и т.д., но особый интерес для вебпрограммиста представляет объектная модель DOM (Document Object Model), описывающая специфическое множество объектов, Операторы сопоставленных элементам HTML-документа. С каждым объектом связаны свойства, методы (функции, определенные для объекта) и Основные операторы (англ. operator) в порядке убывания приоритета.

события.

При обращении к свойствам и методам объектов используется т.н.

оператор выполняемая операция точечная нотация, то есть имя переменной объектного типа отделяется от имени свойства и метода точкой.

.

доступ к свойству или методу объекта Приведем интуитивно понятный пример. Главным в иерархии [ ] доступ к элементу массива объектов DOM является окно браузера – объект window. С этим объектом связан ряд методов и большое количество свойств. ( ) вызов функции Например, у объекта window есть метод open(), открывающий ++ приращение (инкремент) новое окно с указанными параметрами. Вызвать его можно следующим образом: -- уменьшение (декремент) window.open('qq.htm','new','width=300,height=200,t - унарный минус oolbar=1') ! отрицание (логическое NOT) // откроется окно 300х200, в котором из стандартных delete удаление свойств объекта // интерфейсных элементов будет только панель new создание экземпляра объекта инструментов.

typeOf возвращает тип операнда Еще один интуитивно понятный пример. Объект screen дает доступ void возвращает неопределенное значение к параметрам экрана монитора клиентского компьютера (разумеется, эти параметры можно лишь узнать, но не изменить). Методы для этого *, /, % арифметические умножение, деление, взятие по модулю объекта не определены, но определен ряд свойств. Наиболее полезные +, - арифметические сложение и вычитание – width, height (ширина и высота в пикселах), availWidth и 8 Цикл while с предусловием + сцепление (конкатенация) строк <, <=, > >= меньше, меньше или равно, больше, больше или равно while ( условие ) инструкция, выполняемая в случае истинности ==, != проверка равенства и неравенства условия;

проверка идентичности (т.е. равенства и неравенства без ===, !== преобразования типа операндов) Под «условием» здесь понимается выражение, имеющее значение булевского типа, например логическое AND (второй операнд вычисляется, если && первый равен true) X > 112.логическое OR (второй операнд вычисляется, если или || первый равен false) ( a != 0 ) && ( b > 1) = присваивание +=, -=, *= присваивание с операцией Цикл while с постусловием и т.д.

do инструкция, выполняемая в случае истинности условия while ( условие );

Инструкции Цикл for Простые и составные инструкции for ( инициализация счетчика цикла;





Простыми инструкциями (англ. statement) JavaScript являются проверка условия продолжения цикла;

операторы присваивания, вызовы методов объектов, операторы изменение счетчика цикла ) инкремента и декремента и т.д. Как и других языках инструкция;

программирования, в JavaScript можно объединять последовательности инструкций в блоки, получая составную Например, после выполнения следующего цикла переменные x и y инструкцию. Для этого последовательность инструкций заключается в получат значения, равные соответственно сумме и произведению фигурные скобки. В дальнейшем под инструкцией понимается чисел от 1 до 10.

простая либо составная инструкция.

Инструкции могут быть вложены одна в другую с любой степенью вложенности.

10 x = 0;

Инструкция switch y = 1;

Если вариантов значения условия много, и конструкция if получается for ( i=1; i<=10; i++ ) слишком громоздкой, удобна инструкция switch следующего { формата:

x = x + i;

switch ( выражение ) y = y*i;

{ };

case значение1 : инструкция; break;

case значение2 : инструкция; break;

...

Условная инструкция if case значениеN : инструкция; break;

default : инструкция по умолчанию;

if ( условие ) } инструкция, выполняемая в случае истинности условия Оператор break прекращает выполнение инструкции switch в else случае найденного соответствия; если его не поставить, будут инструкция, выполняемая в случае ложности выполняться все последующие проверки case. Вариант по условия;

умолчанию (default) указывать необязательно.

Например, в результате выполнения следующего фрагмента кода Например, следующий цикл прервется на второй проверке и установит переменная result получит строковое значение 'отлично'.

значение monthName = 'хорошо':

ball = 5;

ball = 2;

if ( ball == 5 ) switch (ball) result = 'отлично' { else case 5 : result = 'отлично'; break;

result = 'до отличной оценки вы не дотянули';

case 4 : result = 'хорошо'; break;

case 3 : result = 'удовлетворительно';

Если надо последовательно рассмотреть выполнение нескольких break;

условий, можно использовать вложенные условные инструкции. В case 2 : result = 'плохо'; break;

ряде случаев при наличии нескольких взаимоисключающих условий };

удобна инструкция switch, описанная ниже.

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

12 Итак, синтаксис объявления функций следующий:

Инструкции break и continue function имя_функции([арг1,[ арг2, [арг3,…]]] ) Инструкция break приводит к выходу из цикла или инструкции { switch. В случае вложенных циклов выход происходит из самого инструкции_тела_функции внутреннего. Формат применения:

};

break;

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

continue;

Функции JavaScript могут быть вложенными, то есть одна функция может быть определена в теле другой.

Инструкция var В теле функции может присутствовать инструкция return в формате return выражение;

Инструкция var служит для явного объявления глобальных и локальных переменных. При объявлении глобальной Выполнение инструкции return прекращает выполнение функции и переменной с одновременной инициализацией эту инструкцию можно опустить. При объявлении локальной переменной возвращает указанное выражение.

инструкция var обязательна (см. «Области видимости Приведем максимально простые (даже глуповатые) примеры функций, переменных»).

первая из которых не возвращает выражения, а вторая – возвращает.

Эти функции, как видно, вызываются в разных контекстах.

function showMessage(msg) Функции //выводит окно предупреждения с заданным //сообщением Функция определяется с помощью инструкции function.

{ Объявление начинается ключевым словом function, за которым (не alert(msg);

менее чем через один пробел) следуют };

• Имя функции.

//----------------------- • Необязательный список аргументов, заключенный в круглые скобки и перечисляемый через запятую. Если у функции function square(a) аргументов нет, круглые скобки все равно обязательны.

//возвращает квадрат заданного числа { • Набор инструкций, составляющий тело функции, заключенный в return(a*a);

фигурные скобки. Фигурные скобки обязательны, даже если тело };

функции представлено одной инструкцией. Инструкции выполняются при вызове функции.

//----------- эти функции могут быть вызваны так:

14 Возможное совпадение идентификаторов глобальных и локальных showMessage('Hello world!');

переменных – синтаксически допустимая, но крайне неудобная при //будет выведено маленькое окошко с сообщением отладке ситуация. Приведем пример.

//так могут быть объявлены глобальные x = 5;

//переменные:

y = square(x);

//переменная y получит значение //явное объявление без инициализации var x;

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

a = 123;

Pages:     || 2 | 3 | 4 | 5 |   ...   | 6 |










© 2011 www.dissers.ru - «Бесплатная электронная библиотека»

Материалы этого сайта размещены для ознакомления, все права принадлежат их авторам.
Если Вы не согласны с тем, что Ваш материал размещён на этом сайте, пожалуйста, напишите нам, мы в течении 1-2 рабочих дней удалим его.