Відмінності між версіями «�?зучение JavaScript для начинающих»

Поточна версія на 21:14, 18 січня 2014

Самый удобный и популярный язык программирования - 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-разметкой ваших страниц, то можете добавить ее в шаблон.

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

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

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

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

Соприкосновение миров: HTML и JavaScript

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

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

Давайте посмотрим, как это делается.

Каркас HTML

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

<html> <head> <title>Пpocтая страница</titlе> </head> <body> <р>0чень простая Web-страница!</p> </body> </html>

Следует обратить особое внимание на блок HTML, начинающийся с открывающего тэга <head> и заканчивающийся тэгом </head>. Это блок HEAD, или заголовок Web-страницы, и именно сюда вы будете помещать свой сценарий JavaScript.

Рис. 2.1. Web-страница в Internet Explorer Однако вы не сможете просто вставить код в блок HEAD. Сначала вам придется сделать еще кое-что.

Блок SCRIPT

Чтобы ввести сценарий JavaScript в блок HEAD, сначала нужно добавить новый HTML-блок. Это блок SCRIPT. Назначение данного блока - указать браузеру, что содержимое блока, заключенное между открывающим и закрывающим тэгами, является сценарием, который требует соответствующего обращения.

Этот блок может быть вставлен в любом месте внутри блока HEAD, но обычно добавляется в конце, перед закрывающим тэгом </head>:

<html> <head> <title>Пpocтая страница</title> <script>

</script> </head> <body> <р>0чень простая Web-страница!</p> </body> </html>

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

Прежде чем вставлять сценарий JavaScript в блок SCRIPT, вы должны выполнить еще несколько действий. В первую очередь нужно указать браузеру, какого рода сценарий содержится в блоке SCRIPT. Дело в том, что JavaScript не единственный язык подготовки сценариев. Другим широко распространенным языком является VBScript компании Microsoft. Итак, чтобы ввести описание языка JavaScript, нужно добавить в тэг <script>, который открывает блок SCRIPT, атрибут language:

<html> <head> <title>Пpocтая страница</title> <script language=" ">

</script> </head> <body> <р>0чень простая Web-страница!</p> </body> </html>

Вы объявляете, что пользуетесь JavaScript, указывая в кавычках JavaScript:

<html> <head> <title>Простая страница</title> <script language="JavaScript">

</script> </head> <body> <р>0чень простая Web-страница!</p> </body> </html>

Примечание Если вы хотите писать сценарий на VBScript, следует указать язык vbscript: <script language="vbscript">

Необходимо отметить два важных момента.

Во-первых, кавычки. Иногда вам может встретиться код JavaScript, в котором название языка вводится безо всяких кавычек. Все вроде работает, так зачем они вообще нужны? Это один из тех случаев, когда следует строго соблюдать правила. Хотя браузеры Internet Explorer и Netscape Navigator понимают указание языка и без кавычек, все же предпочтительнее их использовать. Иногда возникают такие ситуации, когда требуется, чтобы код HTML был написан в соответствии со стандартами. Привычка правильно вводить код HTML поможет вам в будущем.

Во-вторых, регистр. Взгляните на следующие надписи:

<script language="javascript"> <script language="JavaScript"> <script language="JAVASCRIPT"> Здесь по-разному комбинируются строчные и прописные буквы. Хотя в этой книге используется написание «JavaScript», при создании Web-страниц желательно пользоваться только нижним регистром. Так быстрее и проще печатать.

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

И вновь об атрибуте language

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

Строкой <script language=" javascript"> вы сообщаете браузеру, что ис-пользуете язык JavaScript, и обрабатывать его нужно специальной программой, интерпретирующей JavaScript. Это значение по умолчанию. Однако если вы используете JavaScript для браузера Internet Explorer компании Microsoft, то желательно указывать не JavaScript, a JScript:

<script language="JScript"> </script>

В этом случае сценарий JavaScript, содержащийся внутри блока SCRIPT, будет выполняться только в браузере Internet Explorer.

Но если ваш сценарий адресован пользователям Netscape Navigator 3.0? Из предыдущей главы вы узнали, что этот браузер поддерживает версию 1.1 языка JavaScript. В таком случае следует задать следующую установку:

<script language="JavaScript1.1"> </script>

Теперь вы получили полное представление о назначении атрибута language. Позже мы вновь обратимся к нему и раскроем еще несколько секретов.

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

Сокрытие JavaScript от старых версий браузеров

Более ранние, чем Netscape Navigator 2.0 и Microsoft Internet Explorer 3.0, версии браузеров не поддерживают JavaScript, и имеющийся на Web-странице сценарий может привести к грубейшим ошибкам. Во избежание подобного рода проблем «спрячьте» сценарии внутри блока SCRIPT с помощью тэгов комментариев HTML. Вставляются они очень просто и, хотя старые версии браузеров сегодня встречаются довольно редко, имеет смысл ввести тэги комментариев в шаблон HTML, чтобы использовать их на каждой странице, содержащей сценарий JavaScript.

Такие комментарии очень легко добавить. Внутри тэгов <scr ipt> введите еще пару тэгов: <! — и - - >. Написанный вами код будет располагаться между ними и, следовательно, пропускаться теми браузерами, которые не поддерживают JavaScript.

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

Чтобы тэги комментариев HTML привлекали внимание, некоторые разработчики помещают внутри них собственные примечания (иногда довольно забавные), как бы предупреждая о своих намерениях:

<script language="JavaScript"> </script>

Теперь страница имеет следующий вид:

<html> <head> <title>Простая страница</title> <script language="JavaScript"> </script> </head> <body> <р>0чень простая Web-страница!</р> </body> </html>

Примечание Вы уже сделали первые шаги в изучении JavaScript - научились пользоваться тэгами комментариев (//) и узнали, что они отличаются от тэгов комментариев HTML.

В JavaScript есть3 основные команды для ввода и вывода информации на экран. 1.Alert(предупреждение)-служит для вывода информации на экран. 2.Confirm(подтверждение)-предназначена для вывода информации и позволяет пользователю сделать выбор в форме ответа"Да\Нет" на вопрос. 3.Prompt(запрос)-служит для вывода информации и позволяет пользователю ввести ответ с клавиатуры.