Введение в JavaScript

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

Здесь приводится следующая информация:
  • важность изучения JavaScript;
  • история JavaScript;
  • некоторые различия между языками подготовки сценариев и языками программирования;
  • инструменты, необходимые для написания сценариев JavaScript.

Использование JavaScript

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

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

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

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

Важность изучения JavaScript

Полезно изучить JavaScript хотя бы из-за его широкого распространения в сети. Огромное количество Web-страниц сделано с использованием сценариев (по самым разным причинам), и сайты без них кажутся блеклыми и скучными. Каким бы интересным не было содержание сайта, некоторые посетители сразу захотят уйти. Конечно, нет смысла оспаривать важность текстового содержания для любой Web-страницы, однако использование JavaScript не только улучшит подачу материала, но и сделает вашу страницу более запоминающейся.

Рекомендация Запомните: единственное, что отличает пользующиеся успехом сайты от неудачных, - их внешний вид. Чем интереснее оформлен сайт, тем он популярнее.

Предупреждение Остерегайтесь использования найденных в сети сценариев, предназначенных для копирования и вставки. Как правило, они не отличаются хорошим качеством и, что хуже всего, дублируются на тысячах сайтов. Изучение JavaScript избавит вас от такой практики и позволит создавать оригинальные запоминающиеся Web-страницы.

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

История JavaScript

JavaScript (или Livescript, как он назывался вначале) создан Бренданом Эй-хом (Brendan Eich), сотрудником компании Netscape Communications, и получил настоящее название после того, как в моду вошел язык Java.

Первым браузером, поддерживающим JavaScript, был Netscape Navigator 2.0. Потом и в компании Microsoft поняли, насколько важен язык подготовки сценариев, и выпустили собственный вариант под названием JScript 1.0, поддерживаемый программами Internet Explorer 3.0 и Internet Information Server. JScript 1.0 компании Microsoft оказался хорошо совместимым с JavaScript 1.0 компании Netscape. То есть сценарий, написанный для одного браузера, с большой вероятностью мог быть выполнен на другом браузере.

Позже компания Netscape выпустила версию JavaScript 1.1, поддерживаемую программами Netscape Navigator 3.0 и Live Wire Web server. В данной версии были сохранены все характерные черты языка JavaScript 1.0 и добавлено множество новых возможностей. Компания Microsoft также усовершенствовала собственный язык JScript, но решила не включать в него все новшества JavaScript 1.1. С этого момента возникла несовместимость браузеров, при которой тэги HTML и сценарии, написанные для одного браузера, не распознаются или приводят к ошибкам при использовании браузера-соперника.

Компания Netscape выпустила описание языка JavaScript (попытавшись таким образом сделать собственную версию более популярной). Вскоре после этого Netscape и другие компании, включая Microsoft, договорились выработать единый стандарт. Европейская ассоциация производителей компьютеров (European Computer Manufacturing Association - ЕСМА) начала работу над ним в ноябре 1996 года, основываясь на швейцарских стандартах. В июле следующего года был создан новый язык, получивший название ECMAScript. Тем временем компания Netscape выпустила новую версию JavaScript 1.2 и одновременно с ней браузер Netscape Navigator 4.0, a Microsoft - JScript 2.0 для браузера Internet Explorer 3.0. Ни JavaScript 1.2, ни JScript 2.0 не являются стопроцентно совместимыми со стандартом ECMAScript (известном также как ЕСМА-262).

Жизнь Web-разработчиков сильно осложнилась. Им не только пришлось запоминать особенности каждого браузера, но и создавать Web-страницы, которые можно было бы просматривать в обоих браузерах. Большинство из них было уверено, что ситуация никогда не изменится и стандарты совершенно утратят сходство, в то время как оптимисты надеялись, что благодаря ЕСМА браузеры снова станут совместимыми.

После всей этой путаницы наметилась тенденция к сращению стандартов компаний-соперниц, поскольку и JavaScript 1.5, и JScript 5.5 абсолютно совместимы с ECMAScript Edition 3. (Существуют лишь некоторые незначительные различия, возникшие из-за несовместимости предыдущих версий или изменений, внесенных компаниями Microsoft и Netscape вопреки существующим стандартам.) Это означает, что теоретически возможно написать сценарий JavaScript, который будет одинаково хорошо действовать в обоих браузерах. Однако, как вы позже узнаете, различия между браузерами сильно осложняют эту задачу. В табл. 1.1 и 1.2 приводится история развития JavaScript и поддерживающих его браузеров.

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

Таблица 1.1. Поддержка JavaScript в браузерах Netscape

Браузер Версия
Netscape 2.0 1.0
Netscape 3.0 1.1
Netscape 4.0 1.2
Netscape 4.5 1.3/1.4
Netscape 6.0 1.5

Таблица 1.2. Поддержка JavaScript в браузерах Internet Explorer

Браузер Версия
Internet Explorer 3.0 1.0/2.0
Internet Explorer 4.0 3.0
Internet Explorer 5.0 5.0
Internet Explorer 5.5 5.5

JavaScript сегодня

JavaScript 1.5 и JScript 5.5, новейшие языки написания сценариев, дают вам огромную власть и над тем, как выглядит ваша Web-страница, и над тем, как она функционирует. Используя JavaScript в сочетании с новыми технологиями, представленными в последних версиях браузеров, такими как объектная модель документа (Document Object Model - DOM) и каскадные таблицы стилей (Cascading Style Sheets - CSS), можно полностью контролировать все, что происходит на вашей Web-странице. Пользуясь JavaScript и объектной моделью, вы можете создавать страницы, реагирующие на щелчки мыши и ввод информации с клавиатуры. С помощью каскадных таблиц стилей можно скрывать или показывать текст, перемещать изображения на странице, управлять размерами окна браузера и т.п.

Используя эти технологии, вы создаете не просто Web-страницу, а среду для пользователя, действующую подобно прочим компьютерным программам. В дальнейшем вы поймете, как это делается.

Будущее JavaScript

Появление стандарта ЕСМА, объединившего JavaScript и JScript, обеспечило будущее JavaScript в сети. Компании Netscape и Microsoft (у которой имеется свой язык подготовки сценариев VBScript, основанный на Visual Basic и поддерживаемый только браузером Internet Explorer) обещают развивать JavaScript и в дальнейшем. Браузер Opera производства компании Opera Software, начиная с третьей версии, также поддерживает язык JavaScript.

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

В чем разница между сценарием и программой

Этот вопрос часто задают начинающие создатели сценариев и даже люди, которые уже некоторое время работали с такими сценариями. Согласно классическому определению, сценарий (script) - это последовательность команд (а иногда даже программа), которая интерпретируется и обрабатывается другой программой. Это означает, что для написания сценария достаточно текстового редактора, в то время как для создания программы требуется другая программа (по крайней мере, компилятор). Иными словами, сценарии пишутся легче и быстрее, чем программы, создаваемые на более структурированных языках, таких как С и C++.

Однако для выполнения сценария требуется больше времени, чем это необходимо для скомпилированной программы. Да и как иначе, если каждая команда сценария сначала обрабатывается другой программой (а значит, эту дополнительную программу нужно еще загрузить и выполнить многие другие команды), а не непосредственно процессором. Впрочем, этот недостаток с успехом компенсируется тем, что для создания сценария нужен всего лишь бесплатный текстовый редактор, в то время как компилятор для языка C++ стоит сотни долларов.

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

Вероятно, в прошлом вам приходилось слышать, что JavaScript очень похож на C++ или JavaScript и Java - почти одно и то же. В действительности это не совсем так. JavaScript - язык третьего поколения, а значит, в чем-то родственен языкам С, Pascal или BASIC. Между ними есть сходство, но есть и значительные различия:

  • JavaScript - язык свободной формы, то есть тщательное форматирование не обязательно;
  • JavaScript - интерпретируемый язык, то есть обрабатывается в компьютере отдельной программой - интерпретатором;
  • JavaScript - высокомобильный и не зависящий от аппаратного обеспечения язык, то есть, как и Java, может использоваться на любой платформе;
  • JavaScript легко внедряется в другие программы, например в браузеры (что невозможно сделать с C++).

Все это означает, что если вы когда-либо работали с С, C++, Pascal, BASIC, Java, FORTRAN или Perl, то можете отыскать в JavaScript некоторые знакомые черты. Однако нельзя писать сценарии JavaScript с помощью какого-нибудь из вышеперечисленных языков программирования, вам придется пользоваться только JavaScript.

Инструменты написания сценариев JavaScript

Как вы уже знаете, для того чтобы писать сценарии JavaScript, не нужно идти в магазин и покупать дорогое программное обеспечение. Но две программы для работы вам все же понадобятся. Рассмотрим их.

Простой текстовый редактор

Наверное, удобнее всего выбрать простой текстовой редактор (например, старый добрый Windows Notepad) и печатать код в нем. Быть может, это не самый легкий способ написания сценариев JavaScript, но у него имеется несколько несомненных преимуществ:
  • это дешево;
  • не придется осваивать сложную программу;
  • изучается JavaScript, а не комплект программного обеспечения;
  • нет готовых шаблонов, встроенных в программу. Записывая код вручную, можно делать все, что позволяет язык JavaScript;
  • можно вставлять свои заметки и комментарии в любом удобном месте. Результат сразу виден, а значит, легче вносить исправления;
  • можно пользоваться своими наработками, создав собственную библиотеку сценариев.

Предупреждение Для написания сценариев нежелательно пользоваться редакторами обогащенного текста (Reach Text Format - RTF), такими как Microsoft Word или Microsoft Write, так как это может привести к различным проблемам. Примером может служить использование кавычек. Для написания кода JavaScript требуются простые кавычки ( 'или " ), тогда как некоторые редакторы обогащенного текста используют «лапки» (" "). Эти простенькие кавычки способны создавать большие неприятности. Чтобы избежать подобных проблем, пользуйтесь простыми текстовыми редакторами.

В этой книге для написания сценариев используется редактор Windows Notepad (см. рис. 1.1).


Рис. 1.1. Фрагмент сценария JavaScript в редакторе Windows Notepad

Использование средств визуального проектирования

В качестве средств визуального проектирования для написания сценариев JavaScript обычно используются редакторы HTML, позволяющие вставлять в Web-страницу несложные сценарии для выполнения простых задач. К таким средствам относятся Microsoft FrontPage, Macromedia Dreamweaver и Adobe GoLive.

Чаще всего при этом не нужно проверять или набирать вручную код JavaScript, что может показаться поначалу значительным преимуществом. Но, облегчая себе работу, вы теряете необходимую гибкость. Возможности каждого средства сводятся к нескольким готовым фрагментам JavaScript, что несколько ограничивает свободу творчества. К тому же сценарии в результате получаются настолько громоздкими и запутанными, что даже профессиональные разработчики с трудом могут в них разобраться, не говоря уже о внесении каких-либо изменений. Нередко возникают ситуации, когда крошечное исправление приводит к множеству ошибок - не самый лучший способ привлечь посетителей на ваш сайт.

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

Все же у средств визуального проектирования есть и некоторые достоинства:

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

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

Последняя версия браузера

Вы изучаете современную версию JavaScript, поэтому, чтобы воспользоваться всеми ее преимуществами, необходимо иметь самые последние версии браузеров. Следует установить как минимум Netscape Navigator 4.0 и Microsoft Internet Explorer 5.5. Эти браузеры представлены на рис. 1.2 и 1.3.

Рекомендация Браузеры можно бесплатно загрузить из сети. Последняя версия Internet Explorer имеется на сайте http://www.microsoft.com/ie. а последнюю версию браузера Netscape Navigator вы найдете на сайте http://www.netscape.com.

Примечание Еще одним браузером, работающим с JavaScript, является Opera компании Opera Software (версия 4.5). Доступ к браузеру платный, программу можно приобрести на сайте http://www.opera.com.


Рис. 1.2. Microsoft Internet Explorer 5.5




Рис. 1.3. Netscape Navigator 6

Прочие инструменты

Что еще можно сделать, чтобы облегчить работу с JavaScript? Следует пользоваться шаблоном HTML-страницы, а также необходимо создать собственную библиотеку сценариев.

Создание шаблона HTML

Если вы собираетесь создавать Web-страницы в текстовом редакторе, то можно обойтись без печатания повторяющихся фрагментов кода. Следует пользоваться шаблоном HTML-страницы - текстовым файлом, который содержит основной набор команд, применяющихся на каждой странице. При необходимости его можно модифицировать, но для начала достаточно и этого:

<html>
<head>

<title>Шa6лoн HTML-страницы<title>
<script language="javascript">
<! --

//-->
</script>
</head>
<body>

</body>
</html>

Этот шаблон был слегка изменен с учетом того факта, что вы только собираетесь изучать JavaScript. He беспокойтесь, если вы что-то не поняли. В следующей главе данный материал будет рассматриваться подробнее.

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


Рис. 1.4. Шаблон HTML в редакторе Windows Notepad

Примечание Если вы пользуетесь стандартной HTML-разметкой ваших страниц, то можете добавить ее в шаблон.

Библиотека сценариев

Чтобы значительно сэкономить время, создайте собственную библиотеку сценариев. Это всего лишь набор текстовых файлов в одной папке. (Только давайте им имена, по которым можно легко их идентифицировать, потому что поиск нужного сценария иногда отнимает больше времени, чем его написание.)

Если вы действительно хотите собрать обширную библиотеку, то можете создать базу данных с вашими заготовками, присвоив каждой из них имя и снабдив каким-либо комментарием. Это значительно облегчит поиск нужного сценария.

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



[ Назад ] [ Вверх ] [ Далее ] 
Hosted by uCoz