Лабораторная работа № 1. Исследование возможностей встраивания JavaScript в WEB-страницу.
Вариации на тему "Hello, world!"
Начнем изучение нового языка программирования с классической программы "Hello, world!", впервые составленной создателями языка С. Рассмотрим несколько вариантов такой программы, демонстрирующих различные возможности JavaScript.
Вариация первая: самая простая
На первом этапе мы составим программу JavaScript, которая вставляет слова "Hello, world!" непосредственно в документ HTML. Программы или сценарии JavaScript встраиваются в документ HTML. Взгляните на листинг 1.1, в которой приведен исходный текст документа с программой, составленной на JavaScript.
Листинг 1.1.
<HTML> <HEAD> <TITLE>Hello, world!</TITLE> </HEAD> <BODY> <H1>JavaScript Test</H1> <SCRIPT LANGUAGE="JavaScript"> <!-- document.write("Hello, world!"); // --> </SCRIPT> </BODY></HTML>Как и подобает любому документу HTML, он ограничен операторами <HTML>, </HTML> и состоит из двух разделов. Раздел заголовка выделяется операторами <HEAD> и </HEAD>, а раздел тела документа - операторами <BODY> и </BODY>. Программа JavaScript этом примере встроена в тело документа HTML при помощи операторов <SCRIPT> и </SCRIPT>, как это показано ниже:
<SCRIPT LANGUAGE="JavaScript"><!-- document.write("Hello, world!");// --></SCRIPT>С помощью оператора <SCRIPT> можно встроить в документ сценарий, составленный на языке JavaScript или VBScript. Язык указывается с помощью параметра LANGUAGE. Текст сценария оформлен как комментарий с применением операторов <!-- и -->. Это сделано для того, чтобы сценарий не вызывал проблем у пользователей, браузеры которых не могут работать с JavaScript. Такие браузеры просто проигнорируют сценарий. Обратите внимание на строку, которой завершается комментарий: // --> Перед символами --> записаны два символа /. Это позволяет обеспечить работоспособность сценария в различных браузерах. Некоторые из них (например, Netscape Navigator) в сценариях JavaScript рассматривают строку --> как ошибочную. Символы // используются в JavaScript для выделения комментариев и предписывают браузерам игнорировать символы, записанные после них (в том числе и -->). Для обозначения комментариев можно использовать также конструкцию /*...*/. Этот способ удобен, если комментарий содержит несколько строк.
Наша первая программа весьма проста и содержит только одну строку:
document.write("Hello, world!");Здесь для объекта с именем document вызывается метод write. В качестве параметра ему передается текстовая строка "Hello, world!". Строка закрывается символом точка с запятой, хотя этот символ может и отсутствовать. Объект document - это документ HTML, загруженный в окно браузера. Он содержит в себе объекты, свойства и методы, предназначенные для работы с элементами этого документа HTML, а также для взаимодействия с другими объектами. Метод write записывает в тело документа HTML приветственную строку "Hello, world!". При этом документ будет выглядеть так, как будто эта строка находится в нем на месте сценария:
<HTML><HEAD><TITLE>Hello, world!</TITLE></HEAD><BODY><H1>JavaScript Test</H1>Hello, world!</BODY></HTML>Вариация вторая: с подгружаемым исходным текстом
Исходный текст любого сценария должен включаться в документы HTML. Однако, есть техническая возможность оформлять программы на JavaScript в отдельных файлах, а в страницах HTML указывать на эти файлы ссылки. Браузер, загружая оформленные подобным образом HTML документы, загружает оформленные в отдельных файлах сценарии и подставляет их вместо соответствующих ссылок. Такой способ включения JavaScript сценариев удобен, если один и тот же сценарий должен быть включен во множество документов HTML, или же если есть необходимость скрыть исходный код от просмотра пользователями (через просмотр источника).
Ссылки на файлы с подгружаемыми скриптами оформляются с помощью параметра SRC тега <SCRIPT>, допускающего указывать адрес URL файла сценария. Следующий пример демонстрирует использование параметра SRC. В листинге 1.2 находится исходный текст документа HTML, содержащий ссылку на файл сценария hello.js.
Листинг 1.2.
<HTML> <HEAD> <TITLE>Hello, world!</TITLE> </HEAD> <BODY> <H1>JavaScript Test</H1> <SCRIPT LANGUAGE="JavaScript" SRC="hello.js"> </SCRIPT> </BODY></HTML>Ссылка оформлена с применением операторов <SCRIPT> и </SCRIPT>, однако между этими операторами нет ни одной строчки исходного текста. Этот текст перенесен в файл hello.js (листинг 1.3).
