Главная Обратная связь Поможем написать вашу работу!

Дисциплины:

Архитектура (936)
Биология (6393)
География (744)
История (25)
Компьютеры (1497)
Кулинария (2184)
Культура (3938)
Литература (5778)
Математика (5918)
Медицина (9278)
Механика (2776)
Образование (13883)
Политика (26404)
Правоведение (321)
Психология (56518)
Религия (1833)
Социология (23400)
Спорт (2350)
Строительство (17942)
Технология (5741)
Транспорт (14634)
Физика (1043)
Философия (440)
Финансы (17336)
Химия (4931)
Экология (6055)
Экономика (9200)
Электроника (7621)






Вариация третья: с переменной и функциями



Лабораторная работа №6.

Вариации на тему "Hello, world!"

Вариация первая: самая простая

На первом этапе мы составим программу 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).

Листинг 1.3. Файл hello.js

document.write("<HR>");document.write("Hello, world!");document.write("<HR>");

В параметре SRC вышеприведенного примера задано только имя файла, так как он находится в том же каталоге, что и ссылающийся на него файл документа HTML. Однако можно указать и относительный путь, и полный адрес URL, например: <SCRIPT LANGUAGE="JavaScript" SRC="http://www.myserver.ru/scripts/hello.js"> Существенно, чтобы файл, в котором находится исходный текст сценария JavaScript, имел тип js. В противном случае сценарий работать не будет.



Вариация третья: с переменной и функциями

В сценариях JavaScript активно применяют функции и переменные. Приведем исходный текст простой программы, в которой используется переменная и функция (листинг 1.4).

Листинг 1.4.

<HTML> <HEAD> <TITLE>Hello, world!</TITLE> <SCRIPT LANGUAGE="JavaScript"> <!-- var szHelloMsg = "Hello, world!"; function printHello() { document.write(szHelloMsg); } // --> </SCRIPT> </HEAD> <BODY> <H1>JavaScript Test</H1> <SCRIPT LANGUAGE="JavaScript"> <!-- printHello(); // --> </SCRIPT> </BODY></HTML>

Прежде всего, обратите внимание на область заголовка документа, выделенную операторами <HEAD> и </HEAD>. В этой области расположено определение переменной и функции, оформленное с применением операторов <SCRIPT> и </SCRIPT>:

<SCRIPT LANGUAGE="JavaScript"><!-- var szHelloMsg = "Hello, world!"; function printHello() { document.write(szHelloMsg); }// --></SCRIPT>

Кроме того, в теле документа HTML есть еще один раздел сценариев, выделенный аналогичным образом:

<SCRIPT LANGUAGE="JavaScript"><!-- printHello();// --></SCRIPT>

Переменная с именем szHelloMsg определяется при помощи оператора var, причем ей сразу же присваивается начальное значение - текстовая строка "Hello, world!".

Язык JavaScript не является типизированным. Это означает, что программист не может указать явным образом тип создаваемых им переменных. Этот тип определяется интерпретатором JavaScript автоматически, когда переменной в первый раз присваивается какое-либо значение. В дальнейшем можно легко изменить тип переменной, просто присвоив ей значение другого типа. Отсутствие строгой типизации упрощает создание сценариев, особенно для непрофессиональных программистов, однако может привести к ошибкам. Поэтому необходимо внимательно следить за тем, какие типы данных применяются. Этому способствует использование префиксов имен, по которым можно судить о типе переменной. Например, текстовые строки можно начинать с префикса sz, а численные значения - с префикса n.

Помимо переменной szHelloMsg, в области заголовка документа HTML с помощью ключевого слова function определена функция с именем printHello. Эта функция вызывается из сценария, расположенного в теле документа и выводит в документ HTML значение переменной szHelloMsg.

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

 


Просмотров 187

Эта страница нарушает авторские права




allrefrs.ru - 2021 год. Все права принадлежат их авторам!