 
|
|
Новости
Статьи
Магазин
Драйвера
Контакты
RSS канал новостей
Программаторы 25 SPI FLASH
Адаптеры Optibay HDD Caddy
Драйвера nVidia GeForce
Драйвера AMD Radeon HD
Игры на DVD
Сравнение видеокарт
Сравнение процессоров
 В конце марта компания ASRock анонсировала фирменную линейку графических ускорителей Phantom Gaming. ...  Компания Huawei продолжает заниматься расширением фирменной линейки смартфонов Y Series. Очередное ...  Компания Antec в своем очередном пресс-релизе анонсировала поставки фирменной серии блоков питания ...  Компания Thermalright отчиталась о готовности нового высокопроизводительного процессорного кулера ...  Компания Biostar сообщает в официальном пресс-релизе о готовности флагманской материнской платы ... |
АРХИВ СТАТЕЙ ЖУРНАЛА «МОЙ КОМПЬЮТЕР» ЗА 2002 ГОДJavaScript сценарист по призванию
Сегодня существует немало применяемых в web-дизайне технологий программирования, среди которых можно назвать такие, как Java, Perl, CGI, PHP. В настоящей статье остановимся на одной из них — на языке сценариев JavaScript, которому наш журнал уже уделял некоторое внимание. Мы не ставим цель дать исчерпывающее описание языка JavaScript (что и невозможно сделать в журнальном формате), а также повторять учебники и руководства. Наша задача — дать общее представление о языке и привести наглядные примеры его использования. Надеемся, статья послужит содержательным введением в предмет и предоставит достаточный материал для начала самостоятельного программирования на JavaScript. Краткий исторический экскурс JavaScript берет свое начало с языка сценариев для HTML-страниц LiveScript, появившемся в Netscape Navigator 2.0 в 1995 году. Новый язык предоставлял средства контроля за заполняемыми формами со стороны клиентской части (до этого такой контроль был возможен только со стороны сервера). Примерно в это же время корпорация Sun выпустила свою пресловутую сетевую технологию, основанную на языке Java, и Netscape, используя возникший вокруг этого события ажиотаж, переименовывает LiveScript в JavaScript, хотя язык от этого практически не меняется. Немного спустя из-за конкуренции между крупнейшими разработчиками web-технологий JavaScript начинает развиваться в разных направлениях: Netscape продолжает выпускать новые версии исходного JavaScript, в то время как Microsoft, начиная с Internet Explorer 3.0, выпускает собственную разработку —JScript. На сегодняшний день это уже разные языки, хотя и в высокой степени совместимые. В данном материале мы остановимся именно на их общей универсальной части, не вникая в различия. Средства разработки и общие сведения о языке JavaScript, несмотря на свое название, созвучное с Java, является самостоятельным языком web-сценариев, с Java никак не связанным. Для разработки программ на JavaScript не нужны никакие специальные инструменты: для написания сценария достаточно иметь простейший текстовый редактор, а для их исполнения — интернет-браузер. Однако для отладки больших и сложных сценариев удобнее использовать профессиональные средства, например Microsoft Script Editor, входящий в состав Microsoft Office (рис. 1). Отдельный вопрос — поддержка браузерами сценариев на JavaScript. Необходимо отметить, что не все современные браузеры понимают JavaScript. Но это не относится к наиболее распространенным обозревателям, поэтому вероятность того, что сценарий, включенный в Вашу web-страницу, не будет исполняться на JavaScript имеет синтаксис, сходный с языком С, потому web-дизайнерам, знакомым с этим языком, начать работу с JavaScript будет несложно. Но даже если язык С вам незнаком, освоение JavaScript не будет представлять сложностей. Сценарии на JavaScript включаются непосредственно в HTML-страницу, компилируются и выполняются браузером, что отличает JavaScript-программы, например, от программ на Java, которые хранятся во внешних модулях и для исполнения требуют специальной программной оболочки — виртуальной машины Java. Сценарий на JavaScript внутри HTML-документа должен быть заключен в тэги <SCRIPT> и </SCRIPT>. После первого тэга можно задать атрибуты, уточняющие язык сценария, но без этого можно и обойтись: по умолчанию браузеры используют в качестве языка сценариев именно JavaScript. Поскольку мы не даем в нашем обзоре систематического описания языка, в дальнейшем команды и операторы будут вводиться по мере объяснения изучаемых конструкций. Виды сценариев Теперь перейдем непосредственно к программам на JavaScript. Всего имеется три вида сценариев, отличающихся главным образом по их положению в HTML-документе и способом вызова. Первый вид сценариев — управляющие команды. Это фрагменты кода, помещаемые после тэга <BODY>, т. е. в основной части web-страницы. Этот сценарий начинает выполняться сразу же после загрузки его в обозреватель. Обычно с помощью управляющих команд инициализируют какие-либо переменные, вызывают дополнительные окна, то есть проводят действия, сопровождающие загрузку страницы. Рассмотрим конкретный пример. Допустим, мы хотим во время загрузки страницы вывести приветственное сообщение. Для этого достаточно после тэга <BODY> вставить такой фрагмент: При открытии страницы вы увидите окно сообщения с кнопкой (рис. 2). При этом от места размещения фрагмента зависит, что будет видно за этим окошком: в браузер будет загружена только часть страницы, предшествующая коду. После нажатия кнопки «ОК» загрузка страницы продолжится в обычном режиме. Другой вид сценария — пользовательские функции. Это программы, вызываемые при наступлении определенных событий (например, при нажатии кнопки, встроенной в страницу). Опять ограничимся иллюстрирующим примером. Поместим в произвольном месте страницы (после тэга <BODY>) кнопку, реагирующую на нажатие. Для этого достаточно включить такую последовательность операторов: а между тэгами <SCRIPT> и </SCRIPT> — код функции: Смысл написанных операторов очень прост. При нажатии кнопки вызывается функция (атрибут ONCLICK показывает, какая именно), которая выводит окно сообщения, подобное показанному на рис. 2. Функции могут зависеть от произвольного числа аргументов, но список аргументов также может быть пуст, как в нашем случае. Важный момент: функции обычно помещают в заголовок Наконец, последний вид сценариев — встроенные. Для использования встроенных сценариев их не требуется заключать в дескрипторы <SCRIPT>, текст сценариев располагается в самих обработчиках событий (таких как знакомый нам ONCLICK) и заключается в кавычки. Фрагмент на JavaScript, полностью идентичный предыдущему, выглядит так: Обратите внимание, что здесь мы обходимся без <SCRIPT>-тэгов и прибегаем к правилу «чередующихся кавычек», согласно которому вложенные кавычки в сценариях меняются по закону двойные-одинарные-двойные и т. д. Данные и операторы JavaScript не является языком со строгой структурой данных. Это означает, что переменные не обязательно описывать (объявлять или указывать тип) до начала их использования. Если в программе встречается переменная, интерпретатор-браузер сам пытается ей приписать тип, наиболее подходящий по контексту. Однако переменные желательно объявлять до начала их использования, что считается хорошим стилем программирования. К основным типам данных относятся числовые, логические, строковые и тип Null — отсутствие данных. Данные одного типа можно объединять в массивы. Каждому типу переменных соответствуют свои операции, на которых специально мы останавливаться не будем, а проиллюстрируем ниже несколькими примерами. JavaScript чувствителен к регистру используемых переменных и функций. Например, встроенная функция alert, с помощью которой мы вызывали окно сообщения, не сработает, если записать ее в виде Alert. Важными конструкциями языка являются хорошо знакомые большинству разработчиков операторы условного перехода и цикла. Рассмотрим небольшой пример, демонстрирующий использование некоторых из них. Поместим на страницу форму ввода, состоящую из двух текстовых полей и кнопку, которая вычисляет максимальное значение из введенных в полях двух чисел. После тэга <BODY> вставим фрагмент: Не будем останавливаться на второстепенных деталях этого кода — главное, что он создает на странице два поля ввода (с именами Т1 и Т2) и кнопку, вызывающую при нажатии функцию MAX(). Теперь в <HEAD>-секцию документа поместим саму функцию (как всегда, внутри тэгов <SCRIPT>): Сейчас уже пора пояснить, как все это работает. В первой строке тела функции объявляются переменные, которые будут использоваться в дальнейшем. Тип в JavaScript не указывается, однако при объявлении переменных им сразу можно задать значения. В следующих строках переменным R1 и R2 присваиваются значения, введенные в полях ввода формы. Для этого содержимое текстового поля, которое является строкой символов, преобразуется в числовое (целое) значение с помощью функции parseInt. Строковая переменная MsgStr используется позже для создания сообщения. Обратите внимание, что оператор «+» используется для конкатенации строк, но его также применяют для сложения чисел. Последний элемент функции — условный оператор, определяющий наибольшее из чисел. При выполнении условия (первое число больше второго) максимумом определяется, как содержимое первого поля, в противном случае — как содержимое второго. Попробуйте включить наши фрагменты в свою страницу, и вы убедитесь, что все это безотказно работает (рис. 3). Хотя приведенный сценарий подчеркнуто иллюстративен, его не следует недооценивать. Познакомившись с JavaScript поближе, на основе нашего кода вы сможете создать вполне приличный калькулятор, включив в него не только простейшие арифметические операции, но и более сложные функции (тригонометрические — прямые и обратные, экспоненциальные, логарифмические), использовать в вычислениях основные математические константы и генерировать последовательности случайных чисел. Программирование интерфейса К интерфейсу отнесем все элементы, принимающие участие во взаимодействии с пользователем — как средства ввода, так и средства отображения. С некоторыми из них мы познакомились выше. Остановимся подробнее на таком важном элементе любой программы, как диалоговые окна. С простейшим видом диалогового окна — окном сообщения — мы уже встречались. Синтаксис его вызова крайне прост: После чего мы видим только модальное окно с единственной кнопкой «ОК». Если необходимо предоставить пользователю выбор, можно использовать окно подтверждения, которое вызывается следующим образом: Данное окно предлагает выбор из двух кнопок (рис. 4), а функция confirm возвращает логическое значение «истина» либо «ложь» в зависимости от выбора («истине» соответствует «ОК»). Наконец, диалоговое окно ввода служит для передачи сценарию строки, вводимой пользователем. Этой строкой может быть, например, имя пользователя или ключевое слово для запроса. Синтаксис вызова: Команда promt выводит окно с текстовым полем (рис. 5) и возвращает строку, введенную в него. Первый аргумент в команде — пояснительная надпись окна, второй — отображаемое при инициализации значение (чтобы оно было пустым, просто передаем пустую строку).
Перечисленные команды далеко не исчерпывают возможности организации интерфейса. Они, скорее, только открывают их список. В следующем материале мы познакомимся с объектной моделью JavaScript — механизмом, с помощью которого сценарий взаимодействует со страницей, загруженной в браузер, и позволяет контролировать свойства окна просмотра. (Продолжение следует) Рекомендуем ещё прочитать:
|
|
|
Идёт загрузка...| Хостинг на серверах в Украине, США и Германии. | © sector.biz.ua 2006-2015 design by Vadim Popov |