 Основные понятия javascript
Основные вопросы
- Что такое сценарии и для чего они нужны
- Различаются ли программирование и сценарии
- Что такое JavaScript и откуда он взялся
- Как включить команды JavaScript в web-страницу
- О других языках сценариев
Если Вы уже знакомы с языком разметки web- страниц, то Вы уже работали с одним компьютерным языком - HTML. Вы использовали НТML - тэги, чтобы указать, как должен выглядеть Ваш документ (цвет, вид шрифта, формат заголовков и пр.). Браузер повиновался Вашим командам и показывал документ пользователям именно так, как Вы запланировали. Однако, при помощи HTML Вы не можете автоматизировать повторяющиеся задачи, организовать диалог с пользователем. Если необходима интерактивность и перечисленные выше возможности, то требуются более изощренные средства: язык сценариев или язык программирования.
Многие языки программирования считаются сложными и требуют значительного времени и усилий на их изучение. Языки сценариев намного проще, имеют более простой синтаксис, позволяют программировать распространенные задачи с помощью минимального количества команд. Языки web- сценариев позволяют комбинировать сценарии с тегами HTML.
Web- сценарии вполне аналогичны сценариям пьес и фильмов. Играя пьесу, актеры выполняют действия, указанные в сценарии этой пьесы, web-сценарии выполняет (построчно) браузер. Web-сценарии могут состоять из одной строки и могут быть достаточно объемными и сложными (полномасштабными приложениями).
Языки программирования обычно являются компилируемыми, т.е. после того, как написан текст программы, специальная программа (компилятор) превращает этот текст (исходный) в исполняемый файл. Если Вы хотите изменить программу, то после редактирования текста программы, ее снова нужно компилировать. Языки сценариев - интерпретируемые, т.е. выполняются построчно и можно на лету вносить в код изменения. Поэтому написание сценариев больше похоже на HTML, чем на язык программирования. Конечно, интерпретируемые языки имеют и недостатки, главный из которых - медленное выполнение программы, но сценарии и не предназначены для сложных работ, например, обработки графики. Для выполнения сценариев необходим интерпретатор, в случае JavaScript отдельный интерпретатор не нужен, поскольку он встроен во все распространенные браузеры. Необходимо отметить, что разные браузеры неодинаково работают с JavaScript.
Впервые JavaScript появился в 1995 году с браузером Netscape Navigator 2.0. Возможности нового языка пришлись по нраву интернет -сообществу и тогда корпорацияMicrosoft выпустила на рынок собственный продукт, который назвала Jscript, встроенный в "фирменный" браузер Microsoft - Internet Explorer (далее IE). Началось соревнование (названное впоследствии "война браузеров") версий браузеров и соответственно версий JavaScript. В итоге возможности версий JavaScript от разных производителей сблизились, язык был стандартизован консорциумом производителей компьютеров (ECMA), но война продолжается и поныне. Последнюю версиюJavaScript (называемую 1.6) полностью поддерживает Mozilla Firefox 2.0 и (по непроверенным сведениям) IE 7. Говорят уже о JavaScript 2.0. В целом тенденция развития этого языка такова, что он становится все более похож на универсальные языки программирования, воспринимая как их мощь, так и сложность.
Для того, чтобы включить инструкции JavaScript в код web-страницы, имеется, как минимум, три возможности. Далее приведены примеры, работать с которыми нужно следующим образом:
отрыть пример (html-страницу). Нужно учесть, что IE6 и IE7 на локальном компьютере может запретить выполнение сценариев (это не относится к web-страницам) и показать такое предупреждение (рис)
Следует щелкнуть это предупреждение правой кнопкой мыши (рис)
и разрешить выполнение сценария. Затем нужно открыть код страницы (правый щелчок в поле страницы и выбрать "Просмотр HTML-кода" - откроется "Блокнот" с кодом страницы) и сохранить его под любым удобным именем (например "Пример1.html"). При сохранении укажите "All files" - Все файлы в поле "тип файла" в диалоговом окне "Сохранить как...". Закрывать "Блокнот" не нужно, откройте сохраненный файл браузером и затем, после того, как Вы внесете изменения в код страницы (в Блокноте) и сохраните их, то нажав кнопку "Обновить" (F5 или Ctrl+R в IE и Firefox), Вы увидите соответственно измененную html-страницу.
1. Откройте пример, а затем его код:
На этой странице имеется два сценария и соответственно два включения инструкций JavaScript. Разберем их подробнее. Первый сценарий заключен в тег <script>,который имеет параметр type="text/javascript", указывающий браузеру язык сценария (JavaScript в данном случае). Этот тег находится внутри тега <body>, поэтому вывод осуществляется при загрузке страницы в браузер, т.е. точно так же, как и остальное содержание страницы (т.е. как часть HTML- документа). В HTML тэг <script>специально предназначен для включения сценариев в код web-страницы. Сама инструкция JavaScipt состоит в данном случае из двух команд:
document.write(сообщение) - пишет на странице сообщение, которое находится в скобках;
document.lastModified - генерирует дату (и время) последнего изменения html-документа;
Обратите внимание также на точку с запятой в конце строки. Этим символом требуется завершать каждую инструкцию JavaScript.
Тег <script> с заключенным в нем сценарием может располагаться и в заголовочной части страницы (т.е. внутри тэга <head>). В этом случае сценарий оформляется в виде функций, которые по мере надобности вызываются из разных частей тела страницы. Более подробно о функциях JavaScript будет позже.
Второй сценарий находится внутри тега <button>, т.е. не требуется ограничивать его тегами <script>. Этот сценарий выполняется не при загрузке страницы, а при возникновении события "onClick" объекта "Button", т.е. когда пользователь щелкнет кнопку. Инструкция JavaScript при этом записывается в соответствии с правилами записи атрибутов тэгов HTML, а то, что это инструкция JavaScript указывается явно (т.е. пишем слово javascript с последующим двоеточием). Команда history.back()указывает браузеру, что необходимо вернуться на предыдущую страницу (которая просматривалась непосредственно перед текущей). Эта инструкция является в рассматриваемом случае обработчиком события.
JavaScript поддерживает использование отдельных файлов (с расширением .js), содержащих код сценария. Эти файлы включаются в страницу через тэг <script>, например
<script language="JavaScript" type="text/javascript" src="file.js"></script>
здесь атрибут src указывает имя (и путь) файла сценария.
Файлы JavaScript можно писать при помощи любого текстового редактора, например Блокнота Windows. Однако Web-редакторы содержат специальные средства, облегчающие написание сценария. Например, в комплект программы Microsoft FrontPage входит редактор сценариев (рис), но можно также пользоваться средствами редактирования сценариев, которые обеспечивают простоту создания и редактирования сценариев непосредственно в представлении Код, а затем сохранить его как файл сценария
Если Вы предпочитаете работать с редактором сценариев, то в окне кода Microsoft FrontPage щелкните правой кнопкой мыши на тэге <script>, из меню выберите "Изменить" или "Свойства" и появившемся окне
нажмите кнопку изменить. Появится окно редактора сценариев с загруженным в него кодом текущей страницы
Этот редактор обладает достаточно продвинутыми средствами создания и отладки сценариев.
Знакомство с редактором web-документов Expression Web
Главное окно программы выглядит следующим образом
Как видим, это окно содержит несколько элементов:
1) Окно конструктора (дизайнера) документа, в котором Вы можете редактировать документ так же, как, например, в текстовом редакторе Microsoft Word.
2) Окно редактирования кода html-документа. Код может формироваться автоматически, по мере того, как Вы изменяете содержание в окне конструктора или можно работать непосредственно в окне кода. В последнем случае к Вашим услугам - дополнительные удобства, например всплывающие "интеллектуальные" подсказки (разработчики называют этот сервис Intellisense).
3) Файловый менеджер, наподобие проводника Widows, предназначенный для работы с файлами и web-сайтами: создание, удаление, переименование и пр. файлов и папок.
4) Панель "Toolbox" (инструментарий) с типовыми элементами: кнопками, списками, текстовыми полями для ввода и т.д. Использование их очень простое: достаточно мышью перетащить нужный документ в окно документа.
5) Панель управления стилями. В настоящее время практически все оформление документа и его отдельных элементов осуществляется при помощи стилей CSS. Программа может создавать эти стили самостоятельно и без Вашего участия. Чтобы применить стиль к фрагменту текста достаточно его выделить и щелкнуть нужный стиль в панели.
6) Кнопки переключения режима отображения документа (конструктор - Design, и конструктор и код - Split, только код - Code).
Совет: Проверяйте, какой код формирует программа! Не оставляйте код, который Вы не можете понять, иначе Вы вскоре потеряете контроль над своим документом!
7) Меню и панели инструментов, обычные для Windows-программ. Правый щелчок на панели инструментов высветит меню с другими панелями:
Полезными будут для этой работы панели "Positioning" (Размещение) и "Tables" (Таблицы).
Посмотреть результат своей работы (как отображается документ в браузере) можно через File -> Preview in Browser (горячая клавиша обычно F12).
Создание и отладка простого сценария
На самом деле мы рассмотрим несколько сценариев, начиная от самого простого. Самым простым сценарием будет вывод в окне браузера сообщения. Сообщение, конечно, можно выводить любое (у нас будет "Привет от JavaScript". Последовательность действий должна быть следующей:
запустите FrontPage (или другой подходящий web-редактор) и создайте новую страницу, например так
переключитесь на вкладку "код" и напишите следующее
Сохраните в указанной преподавателем папке (имя файла рекомендуется такое Фамилия_Л2_1.htm). Затем запустите его (F12 в программе FrontPage), разрешите (если потребуется) активное содержание и должно получится следующее:
Сценарий, как видим, заключен внутри тэга script и представлен одной инструкцией
document.writeln("Привет от JavaScript")
Понятно, что эта инструкция (функция document.writeln) выводит строку. Эта строка должна быть заключена в кавычки (тогда программа воспримет ее как строку) и являться аргументом функции. Строку можно передать функции и в виде переменной. Попробуйте следующий код (немного видоизмененный)
При запуске генерируется такая же страница, как и раньше, однако в коде имеется уже два тэга "script", в одном (расположенном в заголовке страницы - тэге <head>)при помощи служебного слова var определяется переменная "Text", содержащая в себе нашу строку, а в другом - уже знакомая нам функция. Таким образом в коде страницы сценарий можно размещать в разных местах, в нескольких тегах.
В дальнейшем, web-редактор FrontPage удобно использовать вместе с редактором сценариев Microsoft Script Editor, который имеет гораздо более развитые средства редактирования и отладки сценариев. Чтобы перейти к редактированию в Microsoft Script Editor
переключите (если это еще не сделано FrontPage на вкладку "Код"
щелкните правой кнопкой мыши на теге <script> и из появившегося меню выберите "Свойства тега...". Появится диалоговое окно
где нужно нажать кнопку "Изменить...". Запустится Microsoft Script Editor.
Эта программа уже в стиле Visual Studio - мощнейшего инструмента визуального программирования, где видны все доступные свойства, методы, работают всплывающие подсказки и пр. удобства.
Использование диалоговых окон JavaScript
Сценарий предыдущего примера представляется не слишком полезным практически, поскольку еще проще вывести текстовую строку средствами HTML . Поэтому здесь рассматриваем простейшие диалоговые средства JavaScript , т.е. то, что никак не может сделать HTML . В JavaScript имеется три вида диалоговых окон:
1. Окно предупреждения ( alert) .
Создайте в программе FrontPage новую страницу , переключитесь на вкладку "Код" и дописываем код, чтобы он выглядел следующим образом
Сохраним файл и запустим на выполнение ( F12 в FrontPage ). Вы сразу увидите такое окно
Это окно является "модальным", т.е. Вы не сможете продолжить работу с программой, пока его не закроете (нажав кнопку "ОК").
2. Окно подтверждения ( confirm )
Создайте в программе FrontPage новую страницу , переключитесь на вкладку "Код" и допишите код так, чтобы он выглядел следующим образом
Сохраним файл и запустим на выполнение ( F12 в FrontPage ). Вы сразу увидите такое окно
Результат нажатия той или другой кнопки Вы увидите дальше в документе. Дело в том, что функция window.confirm() при нажатии пользователем кнопки "ОК" дает результат (правильно говорить "возвращает значение") "true", при нажатии кнопки "Cancel" - "false". Поэтому, сценарий при помощи конструкции если-то (if - else)проверяет какую кнопку нажал пользователь. Обратите внимание на синтаксис этого выражения.
3. Окно запроса (prompt)
Создайте в программе FrontPage новую страницу , переключитесь на вкладку "Код" и допишите код, чтобы он выглядел следующим образом
Сохраним файл и запустим на выполнение ( F12 в FrontPage ). Вы сразу увидите такое окно
Введенная информация затем используется в сценарии дальше. Дело в том, что функция prompt возвращает введенное пользователем значение. Поэтому введена переменная user_name, которая хранит эту (пользовательскую) информацию и используется в качестве аргумента другой функции (в нашем случае "document.writeln"). Обратите внимание, что мы "забыли" служебное слово "var" и использовали операцию сложения для формирования строки в document.writeln("Привет " + user_name + "!").
Вопрос: Изменится ли работа программы, если последний сценарий разместить в заголовочной части кода страницы (внутри тега <head>)?
Очевидно, что приведенных сведений достаточно для программной организации простейшего диалога с пользователем, а значит, Вам стоит попробовать написать простенький тест.
Обработка событий
Программа может называться интерактивной, если она реагирует на то, что с ней происходит, т.е. загружаются, выгружаются страницы, пользователь двигает и щелкает мышью и т.д. Все это называется программными событиями. События для современных компьютерных программ столь важны, что сами эти программы называют событийно-ориентированными. Для иллюстрации обработки событий рассмотрим простой калькулятор
HTML-код этой простой программы выглядит так:
Головна ДАЛІ
|