Введение в JavaScript для Мага

Текст добавлен: 29 сентября 2016, 06:00

Текст книги "Введение в JavaScript для Мага"

Автор книги: Стефан Кох

Жанр:

Программирование

сообщить о нарушении

Текущая страница: 1 (всего у книги 6 страниц)

Назад к карточке книги

Кох Стефан (Koch Stefan)
«ВВЕДЕНИЕ В JAVASCRIPT ДЛЯ МАГА»

Часть 1: Первые шаги

Что такое JavaScript

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

JavaScript – это не Java!

Многие люди считают, что JavaScript – это то же самое, что и Java, лишь потому, что эти языки имеют схожие названия. На самом деле это не так. Я считаю, что сейчас будет излишне показывать Вам все различия между этими языками – так что запомните лишь то, что JavaScript – это не Java.

Чтобы получить дополнительную информацию по затронутой теме, обратитесь пожалуйста к введению, опубликованному на сайте Netscape или в моей книге:-)

Запуск JavaScript

Что необходимо сделать, чтобы запускать скрипты, написанные на языке JavaScript? Вам понадобится браузер, способный работать с JavaScript – например Netscape Navigator (начиная с версии 2.0) или Microsoft Internet Explorer (MSIE – начиная с версии 3.0). С тех пор, как оба этих браузера стали широко распространеными, множество людей получили возможность работать со скриптами, написанными на языке JavaScript. Несомненно, это важный аргумент в пользу выбора языка JavaScript, как средства улучшения ваших Web-страниц.

Конечно же, перед чтением данного руководства Вы должны познакомиться с основами другого языка – HTML. При этом, возможно, Вы обнаружите, что много хороших средств диалога можно создать, пользуясь лишь командами HTML. Чтобы получить дополнительную информацию о языке HTML, лучше всего инициировать поиск по ключевому слову 'html' на поисковом сервере Yahoo.

Размещение JavaScript на HTML-странице

Код скрипта JavaScript размещется непосредственно на HTML-странице. Чтобы увидеть, как это делается, давайте рассмотрим следующий простой пример:

Это обычный HTML документ.

Вновь документ HTML.

С первого взгляда пример напоминает обычный файл HTML. Единственное новшество здесь – конструкция:

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

А это результат выполнения этого файла (если Вы используете браузер, имеющий поддержку JavaScript, то у Вас будет 3 строки):

Это обычный HTML документ.

Вновь документ HTML.

Я должен признать, что данный скрипт не столь полезен – то же самое и более просто можно было бы написать на «чистом» языке HTML. Я всего лишь хотел продемонстрировать Вам тэг признака , интерпретируется как код на языке JavaScript. Здесь Вы также видите пример использования инструкции document.write() – одной из наиболее важных команд, используемых при программировании на языке JavaScript. Команда document.write() используется, когда необходимо что-либо написать в текущем документе (в данном случае таком является наш HTML-документ). Так наша небольшая программа на JavaScript в HTML-документе пишет фразу «А это JavaScript!».

Браузеры без поддержки JavaScript

А как будет выглядеть наша страница, если браузер не воспринимает JavaScript? Браузеры, не имеющие поддержки JavaScript, «не знают» и тэга

Вновь документ HTML.

В этом случае браузер без поддержки JavaScript будет печатать:

Это обычный HTML документ.

Вновь документ HTML.

А без HTML-тэга комментария браузер без поддержки JavaScript напечатал бы:

Это обычный HTML документ.

document.write("А это JavaScript!")

Вновь документ HTML.

Пожалуйста обратите внимание, что Вы не можете полностью скрыть исходный код JavaScript. То, что мы здесь делаете, имеет целью предотвратить распечатку кода скрипта на старых браузерах – однако тем не менее читатель сможет увидеть этом код посредством пункта меню 'View document source'. Не существует также способа скрыть что-либо от просмотра в вашем исходном коде (и увидеть, как выполнен тот или иной трюк).

События

События и обработчики событий являются очень важной частью для программирования на языке JavaScript. События, главным образом, инициируются теми или иными действиями пользователя. Если он щелкает по некоторой кнопке, происходит событие «Click». Если указатель мыши пересекает какую-либо ссылку гипертекста – происходит событие MouseOver. Существует несколько различных типов событий.

Мы можем заставить нашу JavaScript-программу реагировать на некоторые из них. И это может быть выполнено с помощью специальных программ обработки событий. Так, в результате щелчка по кнопке может создаваться выпадающее окно. Это означает, что создание окна должно быть реакцией на событие щелка – Click. Программа – обработчик событий, которую мы должны использовать в данном случае, называется onClick. И она сообщает компьютеру, что нужно делать, если произойдет данное событие. Приведенный ниже код представляет простой пример программы обработки события onClick:

Данный пример имеет несколько новых особенностей – рассмотрим их по порядку. Вы можете здесь видеть, что мы создаем некую форму с кнопкой (как это делать – проблема языка HTML, так что рассматривать это здесь я не буду). Первая новая особенность – onClick="alert('Yo')" в тэге . Как мы уже говорили, этот атрибут определяет, что происходит, когда нажимают на кнопку. Таким образом, если имеет место событие Click, компьютер должен выполнить вызов alert('Yo'). Это и есть пример кода на языке JavaScript (Обратите внимание, что в этом случае мы даже не пользуемся тэгом

И такой скрипт напишет следующий текст

Добро пожаловать на мою страницу!

Это JavaScript!

три раза. Если посмотреть на исходный код скрипта, то видно, что для получения необходимого результата определенная часть его кода была повторена три раза. Разве это эффективно? Нет, мы можем решить ту же задачу еще лучше. Как насчет такого скрипта для решения той же самой задачи?:

В этом скрипте мы определили некую функцию, состоящую из следующих строк:

function myFunction() {

document.write("Добро пожаловать на мою страницу!
");

document.write("Это JavaScript!
");

}

Все команды скрипта, что находятся внутри фигурных скобок – {} – принадлежат функции myFunction(). Это означает, что обе команды document.write() теперь связаны воедино и могут быть выполнены при вызове указанной функции. И действительно, нашем примере есть три вызова этой функции – Можно увидеть, что мы написали строку myFunction() три раза сразу после того, как дали определение самой функции. То естькак раз и сделали три вызова. В свою очередь, это означает, что содержимое этой функции (команды, указанные в фигурных скобках) было выполнено трижды.

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

Функции могут также использоваться в совместно с процедурами обработки событий. Рассмотрим следующий пример:

Here you can test this example:

Здесь при нажатии на кнопку осуществляется вызов функции calculation(). Как можно заметить, эта функция выполняет некие вычисления, пользуясь переменными x, y и result. Переменную мы можем определить с помощью ключевого слова var. Переменные могут использоваться для хранения различных величин – чисел, строк текста и т. д. Так строка скрипта var result= x + y; сообщает браузеру о том, что необходимо создать переменную result и поместить туда результат выполнения арифметической операции x + y (т. е. 5 + 12). После этого в переменный result будет размещено число 17. В данном случае команда alert(result) выполняет то же самое, что и alert(17). Иными словами, мы получаем выпадающее окно, в котором написано число 17.

Часть 2: Документ HTML

Иерархия объектов в JavaScript

В языке JavaScript все элементы на web-странице выстраиваются в иерархическую структуру. Каждый элемент предстает в виде объекта. И каждый такой объект может иметь определенные свойства и методы. В свою очередь, язык JavaScript позволит Вам легко управлять объектами web-страницы, хотя для этого очень важно понимать иерархию объектов, на которые опирается разметка HTML. Как это все действует, Вы сможете быстро понять на следующем примере. Рассмотрим простую HTML-страницу:

My homepage </head> <body bgcolor=#ffffff> <center> <img src="home.gif" name="pic1" width=200 height=100> </center> <form name="myForm"> Name: <input type="text" name="name" value=""> e-Mail: <input type="text" name="email" value=""> <input type="button" value="Push me" name="myButton" onClick="alert('Yo')"> </form> <center> <img src="ruler.gif" name="pic4" width=300 height=15> My homepage </center> </body> </html> </div></blockquote>А вот как выглядит эта страница на экране (я добавил к ней еще красным цветом комментарии): <div style="text-align: center"><img alt="" src="_01.jpg"/></div>Итак, мы имеем два рисунка, одну ссылку и некую форму с двумя полями для ввода текста и одной кнопкой. С точки зрения языка JavaScript окно браузера – это некий объект window. Этот объект также содержит в свою очередь некоторые элементы оформления, такие как строка состоятия. Внутри окна мы можем разместить документ HTML (или файл какого-либо другого типа – однако пока мы все же ограничимся файлами HTML). Такая страница является ни чем иным, как объектом document. Это означает, что объект document представляет в языке JavaScript загруженный на настоящий момент документ HTML. Объект document является очень важным объектом в языке JavaScript и Вы будете пользоваться им многократно. К свойствам объекта document относятся, например, цвет фона для web-страницы. Однако для нас гораздо важнее то, что все без исключения объекты HTML являются свойствами объекта document. Примерами объекта HTML являются, к примеру, ссылка или заполняемая форма. На следующем рисунке иллюстрируется иерархия объектов, создаемая HTML-страницей из нашего примера: <div style="text-align: center"><img alt="" src="_02.jpg"/></div>Разумеется, мы должны иметь возможность получать информацию о различных объектах в этой иерархии и управлять ею. Для этого мы должны знать, как в языке JavaScript организован доступ к различным объектам. Как видно, каждый объект иерархической структуры имеет свое имя. Следовательно, если Вы хотите узнать, как можно обратиться к первому рисунку на нашей HTML-странице, то обязаны сориентироваться в иерархии объектов. И начать нужно с самой вершины. Первый объект такой структуры называется document. Первый рисунок на странице представлен как объект images[0]. Это означает, что отныне мы можем получать доступ к этому объекту, записав в JavaScript document.images[0]. Если же, например, Вы хотите знать, какой текст ввел читатель в первый элемент формы, то сперва должны выяснить, как получить доступ к этому объекту. И снова начинаем мы с вершины нашей иерархии объектов. Затем прослеживаем путь к объекту с именем elements[0] и последовательно записываем названия всех объектов, которые минуем. В итоге выясняется, что доступ к первому полю для ввода текста можно получить, записав: document.forms[0].elements[0] А теперь как узнать текст, введенный читателем? Чтобы выяснять, которое из свойств и методов объекта позволят получить доступ к этой информации, необходимо обратиться к какому-либо справочнику по JavaScript (например, это может быть документация, предоставляемая фирмой Netscape, либо моя книга). Там Вы найдете, что элемент, соответствующий полю для ввода текста, имеет свойство value, которое как раз и соответствует введенному тексту. Итак, теперь мы имеем все необходимое, чтобы прочитать искомое значение. Для этого нужно написать на языке JavaScript строку: <blockquote><div>name= document.forms[0].elements[0].value; </div></blockquote>Полученная строка заносится в переменную name. Следовательно, теперь мы можем работать с этой переменной, как нам необходимо. Например, мы можем создать выпадающее окно, воспользовавшись командой alert(«Hi» + name). В результате, если читатель введет в это поле слово 'Stefan', то по команде alert(«Hi» + name) будет открыто выпадающее окно с приветствием 'Hi Stefan'. Если Вы имеете дело с большими страницами, то процедура адресации к различным объектам по номеру может стать весьма запутынной. Например, придется решать, как следует обратиться к объекту document.forms[3].elements[17] document.forms[2].elements[18]? Во избежание подобной проблемы, Вы можете сами присваивать различным объектам уникальные имена. Как это делается, Вы можете увидеть опять же в нашем примере: <blockquote><div><form name="myForm"> Name: <input type="text" name="name" value=""> … </div></blockquote>Эта запись означает, что объект forms[0] получает теперь еще и второе имя – myForm. Точно так же вместо elements[0] Вы можете писать name (последнее было указано в атрибуте name тэга <input>). Таким образом, вместо name= document.forms[0].elements[0].value; Вы можете записать <blockquote><div>name= document.myForm.name.value; </div></blockquote>Это значительно упрощает программирование на JavaScript, особенно в случае с большими web-страницами, содержащими множество объектов. (Обратите внимание, что при написании имен Вы должны еще следить и за положением регистра – то есть Вы не имеете права написать myform вместо myForm) В JavaScript многие свойства объектов достпуны не только для чтения. Вы также имеете возможность записывать в них новые значения. Например, посредством JavaScript Вы можете записать в упоминавшееся поле новую строку. <div style="text-align: center"><img alt="" src="_03.jpg"/></div>Пример кода на JavaScript, иллюстрирующего такую возможность – интересующий нас фрагмент записан как свойство onClick второго тэга <input>: <blockquote><div><form name="myForm"> <input type="text" name="input" value="bla bla bla"> <input type="button" value="Write" onClick="document.myForm.input.value= 'Yo!; "> </div></blockquote>Сейчас я не имею возможности описывать каждую деталь данного примера. Намного лучше будет, если Вы попробуете сами понять иерархию объектов в JavaScript, обратившись к справочнику по JavaScript. В заключение я написал небольшой пример. В нем Вы увидите, как используются различные объекты. Попытайтесь разобрать его, обращаясь за помощью к документации, предоставляемой фирмой Netscape, или – еще лучше – к моей книге по JavaScript..: —) Исходный код скрипта: <blockquote><div><html> <head> <title>Objects

onClick="first()">

onClick="second()">

Объект location

Кроме объектов window и document в JavaScript имеется еще один важный объект – location. В этом объекте представлен адрес загруженного HTML-документа. Например, если Вы загрузили страницу http://www.xyz.com/page.html, то значение location.href как раз и будет соответствовать этому адресу.

Впрочем, для нас гораздо более важно, что Вы имеете возможность записывать в location.href свои новые значения. Например, в данном примере кнопка загружает в текущее окно новую страницу:

onClick="location.href='http://www.yahoo.com'; ">

Назад к карточке книги "Введение в JavaScript для Мага"

Ваша оценка произведения:

- 0
- 1
- 2
- 3
- 4
- 5