Разработка приложений с помощью клиентских сценариев HTML на JavaScript

Введение

Программы, работающие с  объектами HTML-документа, называют сценариями. Они могут иметь самостоятельную ценность, используя собственные ресурсы языка, но, кроме того, они способны взаимодействовать с объектами среды, окружающей интерпретатор языка. Интерпретатор JavaScript встроенный в Web-браузер, предоставляет пользователю возможность использовать средства языка для доступа к ресурсам браузера и всего того, что в нём находится в данный момент.

Цели:

• научиться использовать скрипты
• уметь располагать списки сценариев

Задачи:

• показать пример работы программы
• пример расположения тегов
• сделать сценарий

 

 

 

 

 

 

 

 

 

 

 

 

 

1. Теоретическая часть

HTML (от англ. HyperText Markup Language — «язык разметки гипертекста») — стандартный язык разметки  документов во Всемирной паутине.  Большинство веб-страниц создаются  при помощи языка HTML (или XHTML). Язык HTML интерпретируется браузером  и отображается в виде документа,  в удобной для человека форме.

HTML является приложением  («частным случаем») SGML (стандартного  обобщённого языка разметки) и  соответствует международному стандарту  ISO 8879. XHTML же является приложением  XML.

Язык HTML был разработан британским учёным Тимом Бернерсом-Ли приблизительно в 1991—1992 годах в стенах Европейского совета по ядерным исследованиям  в Женеве (Швейцария). HTML создавался как язык для обмена научной и  технической документацией, пригодный  для использования людьми, не являющимися  специалистами в области вёрстки. HTML успешно справлялся с проблемой  сложности SGML путём определения  небольшого набора структурных и  семантических элементов — дескрипторов.

Дескрипторы также часто  называют «тегами». С помощью HTML можно  легко создать относительно простой, но красиво оформленный документ. Помимо упрощения структуры документа, в HTML внесена поддержка гипертекста. Мультимедийные возможности были добавлены  позже. Изначально язык HTML был задуман  и создан как средство структурирования и форматирования документов без  их привязки к средствам воспроизведения (отображения). Текстовые документы, содержащие код на языке HTML (такие  документы традиционно имеют  расширение .html или .htm), обрабатываются специальными приложениями, которые  отображают документ в его форматированном  виде. Такие приложения, называемые «браузерами» или «интернет - обозревателями», обычно предоставляют пользователю удобный интерфейс для запроса веб-страниц, их просмотра (и вывода на иные внешние устройства) и, при необходимости, отправки введённых пользователем данных на сервер. Наиболее популярными на сегодняшний день браузерами являются Internet Explorer, Mozilla Firefox, Safari, Google Chrome и Opera.

Любой документ на языке HTML представляет собой набор элементов, причём начало и конец каждого  элемента обозначается тегами. Элементы могут быть пустыми, то есть не содержащими  никакого текста и других данных (например, тег перевода строки <br>). В этом случае обычно не указывается закрывающий  тег. Кроме того, элементы могут иметь  атрибуты, определяющие какие-либо их свойства (например, размер шрифта для  элемента font). Атрибуты указываются  в открывающем теге. Вот примеры  фрагментов HTML-документа:

 

<strong>Текст между двумя тегами — открывающим и закрывающим.</strong>

<a href="http://www.example.com">Здесь  элемент содержит атрибут href.</a>

А вот пример пустого элемента: <br>

 

Регистр, в котором набрано  имя элемента и имена атрибутов, в HTML значения не имеет (в отличие  от XHTML). Элементы могут быть вложенными. Например, следующий код:

<b>

  Этот текст будет выделен жирным шрифтом,

  <i>а этот - жирным и курсивным</i>

</b>

Результат:

Этот текст  будет выделен жирным шрифтом, а этот - жирным и курсивным

Язык HTML не стоит на месте, он постоянно совершенствуется, в ногу со временем, имеет следующие версии:

• RFC 1866 — HTML 2.0, одобренный как стандарт 22 сентября 1995 года;
• HTML 3.2 — 14 января 1997 года;
• HTML 4.0 — 18 декабря 1997 года;
• HTML 4.01 (изменения, причём более значительные, чем кажется на первый взгляд) — 24 декабря 1999 года;
• ISO/IEC 15445:2000 (так называемый ISO HTML, основан на HTML 4.01 Strict) — 15 мая 2000 года.
• HTML 5 — в разработке.

Официальной спецификации HTML 1.0 не существует. До 1995 года существовало множество неофициальных стандартов HTML. Чтобы стандартная версия отличалась от них, ей сразу присвоили второй номер.

Что такое JavaScript? JavaScript — объектно-ориентированный скриптовый язык программирования. Является диалектом языка ECMAScript.

JavaScript обычно используется как  встраиваемый язык для программного  доступа к объектам приложений. Наиболее широкое применение  находит в браузерах как язык  сценариев для придания интерактивности  веб-страницам.

Основные архитектурные черты: динамическая типизация, слабая типизация, автоматическое управление памятью, прототипное  программирование, функции как объекты  первого класса.

На JavaScript оказали влияние многие языки, при разработке была цель сделать  язык похожим на Java, но при этом лёгким для использования непрограммистами. Языком JavaScript не владеет какая-либо компания или организация, что отличает его от ряда языков программирования, используемых в веб-разработке.

Название «JavaScript» является зарегистрированным товарным знаком компании Oracle Corporation

 JavaScript - новый язык для составления скриптов, разработанный фирмой Netscape. С помощью JavaScript Вы можете легко создавать интерактивные Web-страницы. В данном руководстве Вы увидите, что можно сделать с помощью JavaScript, и даже более того - увидите, как это сделано.

История

Предпосылки

В 1992 году компания Nombas (впоследствии приобретённая Openwave (англ.)) начала разработку встраиваемого скриптового языка Cmm (Си-минус-минус), который, по замыслу разработчиков, должен был стать достаточно мощным, чтобы заменить макросы, сохраняя при этом схожесть с Си, чтобы разработчикам не составляло труда изучить его. Главным отличием от Си была работа с памятью. В новом языке всё управление памятью осуществлялось автоматически: не было необходимости создавать буферы, объявлять переменные, осуществлять преобразование типов. В остальном языки сильно походили друг на друга: в частности, Cmm поддерживал стандартные функции и операторы Си. Cmm был переименован в ScriptEase, поскольку исходное название звучало слишком негативно, а упоминание в нём Си «отпугивало» людей.

На основе этого языка был  создан проприетарный продукт CEnvi. В  конце ноября 1995 года Nombas разработала  версию CEnvi, внедряемую в веб-страницы. Страницы, которые можно было изменять с помощью скриптового языка, получили название Espresso Pages — они демонстрировали использование скриптового языка для создания игры, проверки пользовательского ввода в формы и создания анимации. Espresso Pages позиционировались как демоверсия, призванная помочь представить, что случится, если в браузер будет внедрён язык Cmm. Работали они только в 16-битовом Netscape Navigator под управлением Windows.

Возможности языка

JavaScript обладает рядом свойств  объектно-ориентированного языка,  но реализованное в языке прототипирование  обусловливает отличия в работе  с объектами по сравнению с  традиционными объектно-ориентированными  языками. Кроме того, JavaScript имеет  ряд свойств, присущих функциональным  языкам — функции как объекты первого класса, объекты как списки, карринг, анонимные функции, замыкания — что придаёт языку дополнительную гибкость.

Несмотря на схожий с Си синтаксис, JavaScript по сравнению с языком Си имеет  коренные отличия:

• объекты, с возможностью интроспекции;
• функции как объекты первого класса;
• автоматическое приведение типов;
• автоматическая сборка мусора;
• анонимные функции.

В языке отсутствуют такие полезные вещи, как:

• модульная система: JavaScript не предоставляет возможности управлять зависимостями и изоляцией областей видимости;
• стандартная библиотека: в частности, отсутствует интерфейс программирования приложений по работе с файловой системой, управлению потоками ввода/вывода, базовых типов для бинарных данных;
• стандартные интерфейсы к веб-серверам и базам данных;
• система управления пакетами, которая бы отслеживала зависимости и автоматически устанавливала их.

Размещение JavaScript на HTML-странице

Код скрипта JavaScript размещется непосредственно на HTML-странице. Чтобы  увидеть, как это делается, давайте  рассмотрим следующий простой пример: 
 

<html>

<body>

<br>

Это обычный HTML документ.

<br>

  <script language="JavaScript">

    document.write("А это JavaScript!")

  </script>

<br>

Вновь документ HTML.

</body>

</html>

С первого взгляда пример напоминает обычный файл HTML. Единственное новшество здесь - конструкция: 
 

  <script language="JavaScript">

    document.write("А это JavaScript!")

  </script>

Это действительно код JavaScript. Чтобы видеть, как этот скрипт работает, запишите данный пример как обычный  файл HTML и загрузите его в браузер, имеющий поддержку языка JavaScript. 
А это результат выполнения этого:

 
Это обычный HTML документ.  
А это JavaScript!А это JavaScript!  
Вновь документ HTML.

Я должен признать, что данный скрипт не столь полезен - то же самое  и более просто можно было бы написать на "чистом" языке HTML. Я всего  лишь хотел продемонстрировать тэг признака <script>. Все, что стоит между тэгами <script> и </script>, интерпретируется как код на языке JavaScript. Здесь также есть пример использования инструкции document.write() - одной из наиболее важных команд, используемых при программировании на языке JavaScript. Команда document.write() используется, когда необходимо что-либо написать в текущем документе (в данном случае таком является HTML-документ). Так небольшая программа на JavaScript в HTML-документе пишет фразу "А это JavaScript!".

Объекты и Свойства

Объект JavaScript имеет свойства ассоциированные с ним. Вы обращаетесь к свойствам объекта следующей простой системой обозначений:

 

objectName.propertyName

 

И имя объекта, и имя свойства чувствительны к регистру. Вы определяете  свойства, приписывая значение. Например, пусть существует объект, с именем myCar (мы обсудим, как создавать объекты позже - теперь, только принимаем, что объект уже существует). Вы можете дать свойства, именованные make , model , и year следующим образом:

myCar.make = "Ford"

myCar.model = "Mustang"

myCar.year = 69;

 

Вы можете также обратиться к  этим свойствам, используя систему  обозначений таблицы следующим  образом:

mycar["make"] = "Ford

myCar["model"] = "Mustang"

myCar["year"] = 69;

Этот тип таблицы известен как  ассоциативная таблица, потому что  каждый элемент индекса также  связан со значением строки. Чтобы  пояснять, как это делается, следующая  функция показывает свойство объекта, когда вы проходите объект и имя  объекта как аргументы функции:

function show_props(obj, obj_name) {

    var result = ""

    for (var i in obj)

        result += obj_name + "." + i + " = " + obj[i] + "\n"

    return result;

}

Так, обращение к функции show_props(myCar, "myCar") возвращает следующее:

Вы можете также определять свойства, используя порядковые числа, например:

temp[0] = 34

temp[1] = 42

temp[2] = 56

 

Эти утверждения создают  три свойства объекта temp, и вы должны обращаться к этим свойствам как temp[i], где i - целое число между 0 и 2.

Функции и Методы

Функции - один из фундаментальных  встроенных блоков в JavaScript. Функция - JavaScript процедура - набор утверждений, которые выполняют определенную задачу.

Определение функции состоит из ключевого слова function , сопровождаемого

• Именем функции
• Списком аргументов функции, приложенной в круглых скобках, и отделяемые запятыми
• JavaScript утверждениями, которые определяют функцию, приложенные в фигурных скобках, {...}

Вы можете использовать любые функции, определенные в текущей странице. Лучше всего определять все ваши функции в HEAD страницы. Когда пользователь загружает страницу, сначала загружаются функции.

Утверждения в функциях могут включать другие обращения к функции.

Например, есть функция с именем pretty_print: