Основы Java Script
Основы JavaScript
графический изображение java script
1.JavaScript
Начнем изучение нового языка программирования с классической программы "Hello, world!". Рассмотрим несколько вариантов такой программы, демонстрирующих различные возможности JavaScript.
1.1 Вариация первая: самая простая
На первом этапе мы составим программу 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">
<!--.write("Hello, world!");
// -->
</SCRIPT>
</BODY>
</HTML>
Как и подобает любому документу HTML, он ограничен операторами <HTML>, </HTML> и состоит из двух разделов. Раздел заголовка выделяется операторами <HEAD> и </HEAD>, а раздел тела документа - операторами <BODY> и </BODY>. Программа JavaScript этом примере встроена в тело документа HTML при помощи операторов <SCRIPT> и </SCRIPT>, как это показано ниже:
<!--.write("Hello, world!");
// -->
</SCRIPT>
С помощью оператора <SCRIPT> можно встроить в документ сценарий, составленный на языке JavaScript или VBScript. Язык указывается с помощью параметра LANGUAGE. Текст сценария оформлен как комментарий с применением операторов <!-- и -->. Это сделано для того, чтобы сценарий не вызывал проблем у пользователей, браузеры которых не могут работать с JavaScript. Такие браузеры просто проигнорируют сценарий. Обратите внимание на строку, которой завершается комментарий: // --> Перед символами --> записаны два символа /. Это позволяет обеспечить работоспособность сценария в различных браузерах. Некоторые из них (например, Netscape Navigator) в сценариях JavaScript рассматривают строку --> как ошибочную. Символы // используются в JavaScript для выделения комментариев и предписывают браузерам игнорировать символы, записанные после них (в том числе и -->). Для обозначения комментариев можно использовать также конструкцию /*...*/. Этот способ удобен, если комментарий содержит несколько строк.
Наша первая программа весьма проста и содержит только одну строку:.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>, world!
</BODY>
</HTML>
1.2 Вариация вторая: с подгружаемым исходным текстом
Исходный текст любого сценария должен включаться в документы HTML. Однако, есть техническая возможность оформлять программы на JavaScript в отдельных файлах, а в страницах HTML указывать на эти файлы ссылки. Браузер, загружая оформленные подобным образом HTML документы, загружает оформленные в отдельных файлах сценарии и подставляет их вместо соответствующих ссылок. Такой способ включения JavaScript сценариев удобен, если один и тот же сценарий должен быть включен во множество документов HTML, или же если есть необходимость скрыть исходный код от просмотра пользователями (через просмотр источника).
Ссылки на файлы с подгружаемыми скриптами оформляются с помощью параметра SRC тега <SCRIPT>, допускающего указывать адрес URL файла сценария. Следующий пример демонстрирует использование параметра SRC. В Листинг 1.2 находится исходный текст документа HTML, содержащий ссылку на файл сценария hello.js.
Листинг 1.2
<HTML>
<HEAD>
</HEAD>
<BODY>
<H1>JavaScript Test</H1>
<SCRIPT LANGUAGE="JavaScript" SRC="hello.js">
</SCRIPT>
</BODY>
</HTML>
Ссылка оформлена с применением операторов <SCRIPT> и </SCRIPT>, однако между этими операторами нет ни одной строчки исходного текста. Этот текст перенесен в файл hello.js (Листинг 1.3).
Листинг 1.3. Файл hello.js
document.write("<HR>");.write("Hello, world!");.write("<HR>");
В параметре SRC вышеприведенного примера задано только имя файла, так как он находится в том же каталоге, что и ссылающийся на него файл документа HTML. Однако можно указать и относительный путь, и полный адрес URL, например: <SCRIPT LANGUAGE="JavaScript" SRC="#"justify">1.3Вариация третья: с переменной и функциями
В сценариях JavaScript активно применяют функции и переменные. Приведем исходный текст простой программы, в которой используется переменная и функция (Листинг 1.4).
Листинг 1.4
<HTML>
<HEAD>
<TITLE>Hello, world!</TITLE>
<SCRIPT LANGUAGE="JavaScript">
<!--szHelloMsg = "Hello, world!";printHello()
{.write(szHelloMsg);
}
</SCRIPT>
</HEAD>
<BODY>
<H1>JavaScript Test</H1>
<SCRIPT LANGUAGE="JavaScript">
<!--();
// -->
</SCRIPT>
</BODY>
</HTML>
Прежде всего, обратите внимание на область заголовка документа, выделенную операторами <HEAD> и </HEAD>. В этой области расположено определение переменной и функции, оформленное с применением операторов <SCRIPT> и </SCRIPT>:
<SCRIPT LANGUAGE="JavaScript">
<!--szHelloMsg = "Hello, world!";printHello()
{.write(szHelloMsg);
}
// -->
</SCRIPT>
Кроме того, в теле документа HTML есть еще один раздел сценариев, выделенный аналогичным образом:
<SCRIPT LANGUAGE="JavaScript">
<!--();
</SCRIPT>
Переменная с именем szHelloMsg определяется при помощи оператора var, причем ей сразу же присваивается начальное значение - текстовая строка "Hello, world!".
Язык JavaScript не является типизированным. Это означает, что программист не может указать явным образом тип создаваемых им переменных. Этот тип определяется интерпретатором JavaScript автоматически, когда переменной в первый раз присваивается какое-либо значение. В дальнейшем можно легко изменить тип переменной, просто присвоив ей значение другого типа. Отсутствие строгой типизации упрощает создание сценариев, особенно для непрофессиональных программистов, однако может привести к ошибкам. Поэтому необходимо внимательно следить за тем, какие типы данных применяются. Этому способствует использование префиксов имен, по которым можно судить о типе переменной. Например, текстовые строки можно начинать с префикса sz, а численные значения - с префикса n.
Помимо переменной szHelloMsg, в области заголовка документа HTML с помощью ключевого слова function определена функция с именем printHello. Эта функция вызывается из сценария, расположенного в теле документа и выводит в документ HTML значение переменной szHelloMsg.
Интерпретация документа HTML и встроенных в него сценариев происходит по мере загрузки документа. Поэтому если в сценарии одни функции вызывает другие или используют определенные в документе переменные, то их определения (вызываемых функций и переменных) необходимо разместить выше вызывающих.