Лабораторная работа №7. Внедрение сценариев в HTML-документ
Цели и задачи
Цель работы
Ознакомиться с базовым синтаксисом и основными возможностями управления содержимым веб-страницы на стороне клиента. Получить практические навыки написания клиентских скриптов с использованием языка JavaScript.
Задачи
Написать скрипт «Tip of the Day» (совет дня). Скрипт должен выводить случайную строку («совет») из заданного массива строк. Скрипт разместить во внешнем файле, подключить его на все страницы вашего сайта, созданного в предыдущих работах.
Теоретический материал
Как правило, скриптом называется программа или программный файл сценарий. Ну а если быть предельно точным, то скриптом будет называться практически любая исполняемая процедура.
Если говорить об Интернет-технологиях, то понятие "скрипт" уже несколько сужается и его можно охарактеризовать, как исполняемую процедуру, написанную на каком либо языке, которая запускается на выполнение со стороны сервера по запросу поступившему с конкретно определенной веб-страницы.
JavaScript - предназначен для написания сценариев для активных HTML-страниц. Язык JavaScript не имеет никакого отношения к языку Java. Java разработан фирмой SUN. JavaScript - фирмой Netscape Communication Corporation. Первоначальное название - LiveScript. После завоевания языком Java всемирной известности LiveScript из коммерческих соображений переименовали в JavaScript.
JavaScript не предназначен для создания автономных приложений. Программа на JavaScript встраивается непосредственно в исходный текст HTML-документа и интерпретируется брaузером по мере загрузки этого документа. Язык JavaScript является системно-независимым и совместим между всеми типами компьютеров , работающими в Интернет.
|
|
|
Программы на языке JavaScript включаются в состав HTML документа и, фактически, этот язык может считаться расширением состава команд HTML. Поэтому для создания программ на JavaScript не требуется никаких дополнительных средств, необходим лишь браузер, поддерживающий JavaScript (Браузеры Netscape Navigator 2.0 и выше или Microsoft Internet Explorer) и редактор для создания HTMLдокументов.С помощью JavaScript можно динамически изменять текст загружаемого HTML-документа и реагировать на события, связанные с действиями посетителя или изменениями состояния документа или окна.
Важная особенность JavaScript - объектная ориентированность. Программисту доступны многочисленные объекты, такие, как документы, гиперссылки, формы, фреймы и т.д. Объекты характеризуются описательной информацией (свойствами) и возможными действиями (методами).
Язык JavaScript - это обьектно - ориентированный язык, предназначенный для создания приложений в Интернет.
Наиболее типичный пример - обработка Анкеты, заполненной пользователем:
|
|
|
- проверка правильности входных данных
- выдача на экран сообщений
- переработка данных
- запись в файл
- отправка ответа пользователю
- и другие необходимые операции
Каждая вставка в JavaScript в HTML - документе начинается командой <SCRIPT> с необязательным параметром LANGUAGE и заканчивается командой </SCRIPT>
Например, следующий фрагмент:
<SCRIPT LANGUAGE="JavaScript">
document.write("Наш первый пример на JavaScript");
</SCRIPT>
Выводит на зкран строку:
Наш первый пример на JavaScript
JavaScript очень удобен для создания и отладки Web-страниц. Язык JavaScript основан на понятиях: обьект, атрибут и функция (рисунок 1)
.
Рисунок 1 – Основа JavaScript
Обьекты - это, например, текущее окно (Window), текущий документ (document), кнопки (button, checkbox, select и др.) , дата (date),обработки данных (number, array, math, string и др.).
Аттрибут объекта - это входное или выходное данное, например:
- входное - document.lastModified - разработчик домашней страницы получает дату и время последней модификации документа,
- выходное - document.fgColor - разработчик задает цвет текста документа.
Функция выполняет определенные действия, например, document.write(parameter) выводит parameter в текущий документ. Каждый объект имеет свой набор атрибутов и функций. Внешне функция отличается от объекта наличием скобок ().
|
|
|
Кроме функций, принадлежащих объектам, Вы можете создавать и свои функции. Обычно функция создается при необходимости многократного вызова одной и той же последовательности команд. Тогда эта последовательность команд записывается в виде функции, и, вызывая эту функцию, мы тем самым вызываем всю группу команд.
Текст сценария оформляется как комментарий, чтобы не было проблем у посетителей, брaузеры которых не понимаютJavaScript. Кроме того к символам, завершающим комментарий добавляется еще два символа "/", т.к. некоторые браузеры рассматривает строку, состоящую только из символов "-->", как ошибочную.
Динамический HTML
HTML является языком разметки и не имеет каких-либо средств, которые могли бы использоваться для изменения содержимого страницы. Эту проблему решает использование языка DHTML (Dynamic HTML), поддерживающего средства программирования на клиентской стороне. Для этого в DHTML встроена поддержка скриптового языка JavaScript (должен поддерживаться браузером). Возможности динамического управления содержимым становятся доступны при внедрении в веб-страницу кода JavaScript . Это делается с помощью тега script, размещаемого в нужном месте веб-страницы и которым выделяют начало и конец исходного кода или указывают на подгружаемый из сети файл с исходным кодом: Для внедрения скриптов в веб-документ используется контейнерный тег <script>...</script>, внутри которого записываются команды JavaScript (в общем случае и ряда других яыков: VBScript, php, tcl/tk ... ). Если этот тег ипользуется в теле документа (внутри тега body), то исполнение скрипта осуществляется по мере отображения веб-страницы в браузере. Если же контейнер script описан внутри тега head, то обращение к скрипту возможно только явным образом, например, через вызов функции.
|
|
|
<!-- внедрение скрипта в разметку --><script type="text/javascript"> код скрипта </script> Имеется возможность вынести код JavaScript в отдельный файл (как правило с расширением .js), который затем подключить к документу следующим образом:
<html><head><!-- загрузка скрипта из внешнего файла --><script type="text/javascript"> src="http://example.com/scripts.js"></script></head> ... Такой способ внедрения скриптов позволяет создавать своего рода библиотеки скриптов и использовать их на всех страницах сайта. Синтаксис JavaScript
Язык JavaScript синаксически близок к языкам C/C++, Java, PHP и другим C-подобным языкам. Поэтому для тех, кто знаком с такими языками не составит труда разобраться с основными языковыми конструкциями.
Переменные
Для объявления переменных используется ключевое слова var. Переменные можно сразу инициализировать. Можно объявить несколько переменых сразу, разделив их запятыми.
var color = "#FFF", fsize = 1024 , total_count = 0, i; var average = null; var c = 3; d = 0; //Ошибка!
Непроинициализированые переменные будут иметь неопределенное значение (undefined). Объявлять переменные можно в любом месте скрипта, но до первого обращения. Типы данных переменным в javascript назначаются автоматически. Так же автоматически выполняется приведение типов. Объявления массивов данных могут выполняться статически и динамически. Индексирование элементов начинается с нуля. Элементы массива могут быть проинициализированы при создании.
var weekdays = ["Пн", "Вт", "Ср", "Чт", "Пт"]; // статический массив из пяти элементов
// динамическое объявление массива путем создания экземпляра встроенного класса
Array var myarr; myarr = new Array(256);
myarr[0] = 255; myarr[1] = 254;
var x = myarr[7];
Комментарии
Комментарии - предназначены для пояснения фрагментов кода или исключения фрагментов кода из обработки. Игнорируются при выполнении программы.
// Это однострочный комментарий.
/* Это многострочный комментарий. Он может объединять несколько строк и его можно использовать в любом месте программы */
Дата добавления: 2018-04-04; просмотров: 1242; Мы поможем в написании вашей работы! |
Мы поможем в написании ваших работ!