Разработка приложений с помощью клиентских сценариев 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:

function pretty_print(string) {

document.write(" " + string)

 }

Эта функция принимает строку как  аргумент, прибавляет некоторые теге HTML, используя оператор суммы (+), затем  показывает результат в текущем  документу.

Определение функции не выполняет  ее. Для этого вы должны вызвать функцию, чтобы выполнить ее. Например, вы можете вызывать функцию pretty_print следующим образом:

<SCRIPT>

pretty_print("This is some text to display")

</SCRIPT>

Аргументы функции не ограничены только строками и числами.

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

functionName.arguments [i]

Где functionName - имя функции, и i - порядковое число аргумента, начинающегося с нуля. Так, первый аргумент в функции, с именем myfunc, будет myfunc.arguments [0]. Общее число аргументов обозначено переменным arguments.length.

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

function factorial(n) {

  if ((n == 0) || (n == 1))

    return 1

  else {

    result = (n * factorial(n-1) )

    return result

  }

}

Можно показывать факториалы от одного до пяти следующим образом:

for (x = 0; x < 5; x++) {

   document.write(x, " factorial is ", factorial(x))

   document.write(" ")

}  

2. Практическая часть

2.1Доступ к базам данных

Серверная часть JavaScript позволяет  реализовать полноценное решение  для доступа к базам данных через Web. Независимо от того, какую  цель ставит перед собой автор  — разработать процессор обработки  запросов к базе данных или настоящую  СУБД, — в успешном решении поставленной задачи поможет комплект средств LiveWire Database Service, входящий в состав JavaScript. Эти средства совместимы с «родными»  драйверами для баз данных DB2, Informix, Oracle и Sybase, а также для СУБД, соответствующих  стандарту ODBC. К числу реализуемых функций относятся организация пула подключений к базам данных (pooling), «сквозной» SQL (передача SQL-запросов непосредственно серверу баз данных), курсоры и хранимые процедуры.

Обращение к программам на других языках

Для желающих использовать функции, где  применяются другие языки программирования, в программе на JavaScript предусмотрена  удобная оболочка JavaScript для подключения  внешних библиотек. С помощью  этой оболочки программы на JavaScript могут  обращаться к функциям, составленным на Си, а через них и к функциям на других языках программирования, таких, как Си++ или Visual C++. Поскольку нет  необходимости переводить эти функции  на язык JavaScript, сокращается время  разработки и часто достигается  выигрыш в производительности.

Функции, разработанные на языках, отличных от JavaScript, называются собственными функциями (native functions) и должны быть размещены во внешней библиотеке. Обращения к ней или ее совместное использование в динамическом режиме происходит в рабочей среде этапа исполнения. Для систем на базе Windows внешняя библиотека должна быть выполнена в виде динамически компонуемой библиотеки (DLL). Для UNIX-систем внешнюю библиотеку следует оформлять как разделяемый объект. Как только собственная функция будет помещена во внешнюю библиотеку, последнюю следует зарегистрировать в среде этапа исполнения JavaScript. Регистрация библиотеки означает для процессора этапа исполнения, что прикладным программам открыт доступ к этой библиотеке.

Javascript подключается напрямую в  HTML-файл. Самый простой способ - это  написать javascript-команды внутрь тега <script> где-нибудь в теле страницы.

Когда браузер читает HTML-страничку, и видит <script> - он первым делом читает и выполняет код, а только потом продолжает читать страницу дальше.

В этом примере показано начало страницы, затем три раза выполняется функция alert, которая выводит окошко с информацией, а только потом появится остальная часть страницы.

В этом примере использовались следующие  элементы.

<script type="text/javascript"> ... </script>

Тег <script> сообщает браузеру о том, что внутри находится исполняемый скрипт. Атрибут type говорит о том, что это javascript. Вообще говоря, атрибут может отсутствовать - разницы нет, но с точки зрения стандарта его следует указать.

Конструкция for

Обычный цикл, по синтаксису аналогичный другим языкам программирования.

Объявление var i

Объявление переменной внутри цикла: i - локальная переменная.

Функция alert

Выводит сообщение на экран  и ждет, пока посетитель не нажмет ОК

Атрибут <script type=...>

По стандарту этот атрибут  нужен для указания языка скрипта, но по умолчанию принят javascript, поэтому  даже атрибута type нет - все работает ок. Но валидатор будет ругаться, т.к стандарт требует этот атрибут.

Иногда используют <script type="text/html"> как оригинальный способ добавить неотображаемые данные на страницу. Браузер не исполняет и не показывает <script> с неизвестным типом. В этом плане он ничем не отличается от обычного <div> с вечным style="display:none".

Атрибут <script language=...>

В старых скриптах нередко  можно увидеть атрибут language. Этот атрибут давно мертв и никому не нужен. Не используйте его для javascript.

Комментарии до и  после скрипта

В старых руководствах по javascript встречается указание "прятать" javascript-код от старых браузеров, заключая его в HTML-комментарии <!-- ... -->.

  2.2 Применение сценариев для создания интерфейса пользователя.

При создании Интернет-магазинов и  других аналогичных узлов Web мы используем диалоговый интерфейс, основанный на применении форм и фреймов. Как мы только что сказали, формы создаются с помощью тегов <FORM>. Внутри формы могут располагаться текстовые поля ввода, списки, флажки, кнопки и другие объекты.

Как выполняется обработка данных, введенных пользователем в форме?

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

У каждого из этих двух способов есть свои преимущества и недостатки.

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

При применении второго способа  введенные пользователем данные проверяются локально. Это улучшает время ответа системы, но иногда приводит к возникновению проблемы совместимости  использованного Вами сценария и  браузера пользователя.

В том случае, когда Вы ставите  перед собой задачу обеспечить максимальную доступность магазина (или другого  активного узла Web) для посетителей с любыми браузерами, постарайтесь полностью исключить применение клиентских сценариев. Однако при разработке административных приложений, предназначенных для управления работой приложения Web использование клиентских сценариев для проверки форм вполне допустимо.

Notepad + + с HTML и Javascript

Включение JavaScript для Mozilla Firefox

AAScripter – программа скриптов

JavaScript Maker

Заключение

Использовать скрипты, сценарии и теги javascript очень просто. В данном проекте это выражено очень чётко. Конструкция системы порядка расположения сценариев, описание тегов, формулировка поставленных задач, всё это выполнено и отмечено.

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

Список использованных источников

1. Интернет справочник по HTML, адрес http://html.manual.ru
2. Информационный ресурс ru.wikipedia.org
3. http://www.frolov-lib.ru/books/rusedit/web_development/ch08.html
4. Вадим Дунаев:  HTML, Скрипты и стили 2-е издание