|
Читайте также: |
JavaScript - язык подготовки сценариев, позволяющий сделать Web-страницы более интерактивными и функциональными. После его изучения вы сможете заниматься разработкой Web-приложений на качественно новом уровне. Для написания сценариев JavaScript обязательно требуется знание языка HTML. В этой главе вы получите первое представление о JavaScript еще до того, как начнете создавать свой первый сценарий.
Присмотритесь к сайтам, которые вы посещаете. На каждой странице содержится текст и некоторое количество картинок. Быть может, есть часы, показывающие время, или бегущий текст в строке состояния браузера. Возможно, на сайте имеется форма, которую нужно заполнить. Если пропустить какую-либо графу анкеты, то появится сообщение об ошибке. На некоторых страницах встречаются движущиеся по экрану изображения или текст, изменяющийся при щелчке мыши.
Таким образом, вы можете наблюдать JavaScript в действии, а создать подобные эффекты может любой человек, знающий этот язык. Причем без особого труда.
Рекомендация Следует понаблюдать за тем, что создают с помощью JavaScript другие разработчики. Это отличный способ найти свежее решение.
Прочитав эту книгу, вы не только освоите JavaScript (вместо того, чтобы просто копировать и вставлять в Web-страницу готовые сценарии), но и узнаете множество интересных идей, реализовать которые вы сможете сами - с помощью JavaScript.
Полезно изучить JavaScript хотя бы из-за его широкого распространения в сети. Огромное количество Web-страниц сделано с использованием сценариев (по самым разным причинам), и сайты без них кажутся блеклыми и скучными. Каким бы интересным не было содержание сайта, некоторые посетители сразу захотят уйти. Конечно, нет смысла оспаривать важность текстового содержания для любой Web-страницы, однако использование JavaScript не только улучшит подачу материала, но и сделает вашу страницу более запоминающейся.
Рекомендация Запомните: единственное, что отличает пользующиеся успехом сайты от неудачных, - их внешний вид. Чем интереснее оформлен сайт, тем он популярнее.
Можно найти еще множество причин для изучения и использования JavaScript. Сценарий всего в несколько строк помогает посетителям сайта отыскать страницу, соответствующую их браузеру и установкам, либо автоматически подсчитать сумму колонок в форме заказа. Подобные "мелочи" не рассчитаны на внешний эффект, но они свидетельствуют о высоком уровне профессионализма разработчика и знании им этики деловых отношений.
В 1992 году компания Nombas (впоследствии приобретённая Openwave) начала разработку встраиваемого скриптового языка Cmm (Си-минус-минус), который, по замыслу разработчиков, должен был стать достаточно мощным, чтобы заменить макросы, сохраняя при этом схожесть с Си, чтобы разработчикам не составляло труда изучить его. Главным отличием от Си была работа с памятью. В новом языке всё управление памятью осуществлялось автоматически: не было необходимости создавать буферы, объявлять переменные, осуществлять преобразование типов. В остальном языки сильно походили друг на друга: в частности, Cmm поддерживал стандартные функции и операторы Си. Cmm был переименован в ScriptEase, поскольку исходное название звучало слишком негативно, а упоминание в нём Си «отпугивало» людей.
На основе этого языка был создан проприетарный продукт CEnvi. В конце ноября 1995 года Nombas разработала версию CEnvi, внедряемую в веб-страницы. Страницы, которые можно было изменять с помощью скриптового языка, получили название Espresso Pages — они демонстрировали использование скриптового языка для создания игры, проверки пользовательского ввода в формы и создания анимации. Espresso Pages позиционировались как демоверсия, призванная помочь представить, что случится, если в браузер будет внедрён язык Cmm. Работали они только в 16-битовом Netscape Navigator под управлением Windows.
Перед Бренданом Айхом, нанятым в компанию Netscape 4 апреля 1995 года, была поставлена задача внедрить язык программирования Scheme или что-то похожее в браузер Netscape. Поскольку требования были размыты, Айха перевели в группу, ответственную за серверные продукты, где он проработал месяц, занимаясь улучшением протокола HTTP. В мае разработчик был переброшен обратно, в команду, занимающуюся клиентской частью (браузером), где он немедленно начал разрабатывать концепцию нового языка программирования. Менеджмент разработки браузера, включая Тома Пакина (Tom Paquin), Михаэля Тоя (англ.), Рика Шелла (Rick Schell), был убеждён, что Netscape должен поддерживать язык программирования, встраиваемый в HTML-код страницы.
Помимо Брендона Айха в разработке участвовали сооснователь Netscape Communications Марк Андрисин (англ.) и со-основатель Sun Microsystems Билл Джой (англ.): чтобы успеть закончить работы над языком к релизу браузера, компании заключили соглашение о сотрудничестве в разработке. Они ставили перед собой цель обеспечить «язык для склеивания» составляющих частей веб-ресурса: изображений, плагинов, Java-апплетов, который был бы удобен для веб-дизайнеров и программистов, не обладающих высокой квалификацией.
Первоначально язык назывался LiveScript и предназначался как для программирования на стороне клиента, так и для программирования на стороне сервера (там он должен был называться LiveWire). На синтаксис оказали влияние языки Си и Java, и, поскольку Java в то время было модным словом, 4 декабря 1995 года LiveScript переименовали в JavaScript, получив соответствующую лицензию у Sun. Анонс JavaScript со стороны представителей Netscape и Sun состоялся накануне выпуска второй бета-версии Netscape Navigator. В нём декларируется, что 28 лидирующих ИТ-компаний выразили намерение использовать в своих будущих продуктах JavaScript как объектный скриптовый язык с открытым стандартом.
В 1996 году компания Microsoft выпустила аналог языка JavaScript, названный JScript. Анонсирован этот язык был 18 июля 1996 года. Первым браузером, поддерживающим эту реализацию был Internet Explorer 3.0.
По инициативе компании Netscape была проведена стандартизация языка ассоциацией ECMA. Стандартизированная версия имеет название ECMAScript, описывается стандартом ECMA-262. Первой версии спецификации соответствовал JavaScript версии 1.1, а также языки JScript и ScriptEasy.
Область применения
1. Веб-приложения
JavaScript используется в клиентской части веб-приложений: клиент-серверных программ, в котором клиентом выступает браузер, а сервером — веб-сервер, имеющих распределённую между сервером и клиентом логику. Обмен информацией в веб-приложениях происходит по сети. Одним из преимуществ такого подхода является тот факт, что клиенты не зависят от конкретной операционной системы пользователя, поэтому веб-приложения являются межплатформенными сервисами.
2. AJAX
JavaScript используется в AJAX, популярном подходе к построению интерактивных пользовательских интерфейсов веб-приложений, заключающемся в «фоновом» асинхронном обмене данными браузера с веб-сервером. В результате, при обновлении данных веб-страница не перезагружается полностью и интерфейс веб-приложения становится быстрее, чем это происходит при традиционном подходе (без применения AJAX).
3. Comet
Comet — зонтичный термин, описывающий механизм работы веб-приложений, использующих постоянные HTTP-соединения, что позволяет веб-серверу отправлять данные браузеру без дополнительного запроса со стороны браузера. Для таких приложений используются технологии, непосредственно поддерживаемые браузеры. В частности, в них широко используется JavaScript.
4. Браузерные операционные системы
JavaScript широко используется в браузерных операционных системах. Так, например, исходный код IndraDesktop WebOS на 75 % состоит из JavaScript, код браузерной операционной системы IntOS — на 70 %. Доля JavaScript в исходном коде eyeOS — 5 %, однако и в рамках этой операционной системы JavaScript играет важную роль, участвуя в визуализации на клиенте и являясь необходимым механизмом для коммуницирования клиента и сервера.
5. Букмарклеты
JavaScript используется для создания небольших программ, размещаемых в закладки браузера. При этом используются URL-адреса со спецификатором javascript:.
6. Пользовательские скрипты в браузере
Пользовательские скрипты в браузере — это программы, написанные на JavaScript, выполняемые в браузере пользователя при загрузке страницы. Они позволяют автоматически заполнять формы, переформатировать страницы, скрывать нежелательное содержимое и встраивать желательное для отображения содержимое, изменять поведение клиентской части веб-приложений, добавлять элементы управления на страницу и т. д.
Для управления пользовательскими скриптами в Mozilla Firefox используется расширение Greasemonkey; Opera предоставляет средства поддержки пользовательских скриптов и возможности для выполнения ряда скриптов Greasemonkey. Некоторые скрипты Greasemonkey могут выполняться в Google Chrome при использовании Greasemetal.
7. Серверные приложения
Приложения, написанные на JavaScript, могут исполняться на серверах, использующих Java 6 и более поздних версий. Это обстоятельство используется для построения серверных приложений, позволяющих обрабатывать JavaScript на стороне сервера.
JavaScript на стороне сервера используется в проектах Google. Так например, Google Sites допускает подстройку с помощью JavaScript-сценариев, исполняемых движком Rhino.
8. Мобильные приложения
Перевод мобильных устройств Palm на использование Palm webOS в качестве операционной системы с Mojo SDK в качестве комплекта средств разработки позволяет использовать JavaScript в качестве языка разработки мобильных приложени.
9. Виджеты
Виджет — вспомогательная мини-программа, графический модуль, которой размещается в рабочем пространстве соответствующей родительской программы (англ.), служащая для украшения рабочего пространства, развлечения, решения отдельных рабочих задач или быстрого получения информации из интернета без помощи веб-браузера. JavaScript используется как для реализации виджетов, так и для реализации движков виджетов. В частности, при помощи JavaScript реализованы Apple Dashboard, Microsoft Gadgets, Yahoo!_Widgets, Google Gadgets, Klipfolio Dashboard.
10. Прикладное программное обеспечение
Исходный код и скриншот JavaScript-программы, созданной с помощью Seed
JavaScript используется для написания прикладного ПО. Одним из ярких примеров является Mozilla Firefox, 57 % исходного кода которого написано на JavaScript (для сравнения, следующим языком программирования по объёму кодовой базы Firefox является C++, доля которого составляет 17 %).
Google Chrome OS в качестве прикладного ПО использует веб-приложения.
В окружении рабочего стола GNOME имеется возможность создавать на JavaScript программы, оперирующие с библиотеками GNOME при помощи Gjs, Seed.
11. Манипуляция объектами приложений
JavaScript также находит применение в качестве скриптового языка доступа к объектам приложений. Платформа Mozilla (XUL/Gecko) использует JavaScript. Среди сторонних продуктов, например, Java, начиная с версии 6, содержит встроенный интерпретатор JavaScript на базе Rhino. Сценарии JavaScript поддерживаются в таких приложениях Adobe, как Adobe Photoshop, Adobe Dreamweaver, Adobe Illustrator и Adobe InDesign.
12. Офисные приложения
JavaScript используется в офисных приложениях для автоматизации рутинных действий, написания макросов, организации доступа со стороны веб-служб.
13. Microsoft Office
В Excel Services 2010 добавились два новых интерфейса программирования приложений: REST API и JavaScript Object Model (JSOM).
Excel Services 2010 REST API позволяет осуществлять доступ к объектам рабочих книг, таким как таблицы, диаграммы и именованные серии данных; получать изображения, HTML, Atom, рабочие книги; устанавливать значения и обновлять вычисления перед запрашиванием элементов.
JSOM даёт возможность реагировать на действия пользователя в отношении Excel Web Access (EWA), программно взаимодействовать с составляющими EWA. Использование JSOM осуществляется при помощи помещения кода JavaScript на страницу, содержащую компоненты EWA.
14. OpenOffice.org
JavaScript — один из языков программирования, используемых для написания макросов в приложениях, входящих в состав OpenOffice.org. В OpenOffice.org интегрирован интерпретатор JavaScript Rhino. По состоянию на декабрь 2009 года поддержка JavaScript носила ограниченный характер. Ограничения, присущие разработке макросов OpenOffice.org на JavaScript:
среда выполнения JavaScript поддерживает загрузку лишь тех классов Java, которые развёрнуты сценарием JavaScript;
среда выполнения JavaScript не предоставляет сообщения об ошибках, произошедших во время выполнения скрипта;
ещё не реализована поддержка интерактивной разработки JavaScript-сценариев.
В OpenOffice.org имеется редактор и отладчик JavaScript-сценариев.
15. Обучение информатике
Язык обладает пропедевтической ценностью, позволяя сочетать при обучении информатике ((англ.) Computer science) интенсивную практику программирования и широту используемых технологий. Преподавание данного языка в школе позволяет создать базу для изучения веб-программирования, использовать на уроках творческие проекты. Соответствующий курс позволяет обеспечить углубленный уровень изучения информатики и его имеет смысл включать в элективные курсы углубленного уровня подготовки.
JavaScript — подходящий язык для обучения программированию игр По сравнению с альтернативами, он функционально достаточен, прост в изучении и в применении, снижает сложность для обучения, мотивирует обучаемых делиться своими играми с другими.
Невключённые в книгу Николаса Закаса «Professional JavaScript for Web Developers» части о реализации на JavaScript классических алгоритмов, техник, структур данных, послужили началу проекта Computer science in JavaScript.
3.2. Примеры задач
3.2.1. Обработка элементов форм
Задача. Тест по теме «Форсаж»
Постановка задачи:
Подобрать по 7 вопросов по каждому из Форсажей. Для каждого вопроса подобрать по 4 варианта ответов, выполненных элементами формы – переключателями. Предоставить пользователю возможность выбора одного из вариантов ответов на каждый вопрос. Создать кнопку для вызова результата тестирования. Дополнить форму кнопкой очистки элементов формы.
Модель формы:
test – имя формы
q1, q2, …, q7 – имена групп переключателей формы
Алгоритм решения:
r – массив номеров правильных ответов
b – количество баллов, набранное пользователем при включении правильного ответа
1. Создаём массив для номеров правильных ответов
var r=new Array(2,1,0,2,3,2,3);
2. Задаём начальное значение переменной b=0
3. Создаём функцию function test() для обработки переключателей формы
4. Организуем цикл по номерам групп переключателей for (i=1; i<=7; i++)
5. В цикле используем условный оператор для проверки нажатия переключателя с правильным ответом if (document.fm.elements["d"+i][r[i-1]].checked), доступ к переключателю осуществляем с помощью вложенных объектов: document.ИмяФормы.ЭлементМассиваПереключателей
6. Если условие=true, то увеличиваем переменную b на 1. {b++;}
7. Далее с помощью условного оператора выполняем проверку переменной b по заранее спланированному рейтингу, и с помощью панели alert выводим результат на экран.
HTML-код формы:
<form name="test" onmouseover="colorchandge('yellow')" onmouseout="colorchandge('#8FBC8F')">
<ol>
<li><p>Какого года Форсаж?</p>
<input name=q1 type="radio">1997<br>
<input name=q1 type="radio">2000<br>
<input name=q1 type="radio">2001<br>
<input name=q1 type="radio">2003<br>
…………………………
<li><p>Как с англиского периводиться "The fast and the Furious"?</p>
<input name=q7 type="radio">Быстрее не куда<br>
<input name=q7 type="radio">Бысрые и Скрытные<br>
<input name=q7 type="radio">Яротные гонщики<br>
<input name=q7 type="radio">Быстрые и Яростные<br>
</ol>
<h2><a href = "s5.htm" target="z" onmouseover="this.style.color='red'" onmouseout="this.style.color='white' ">Назад</a><br></h2>
<p>        Вы набрали: <textarea cols="5" name="display" rows="1"></textarea> очков      
<input type="BUTTON" CLASS = "mystyle" value="Подведем итоги" onClick="z()">      
<input type=reset CLASS = "mystyle" value="Очистить"></p>
</form>
JavaScript-код задачи:
<script>
var r=new Array(2,1,0,2,3,2,3);
var b=0;
function z(){
b=0;
for (i=1; i<=7; i++)
if (document.test.elements["q"+i][r[i-1]].checked) {b++}
document.test.display.value=b;
if (b<=3)
alert ("Вы набрали "+b+" очка(ов).\n Внимание!\n Вы наверное не смотрели этот фильм!");
if (b>=4 && b<=6)
alert ("Вы набрали "+b+" очка(ов).\n Помотрите этот фильм еще раз.");
if (b>=7)
alert ("Вы набрали "+b+" очка(ов).\n Великолепно! Вы знаете данный фильм почти наизусть");
}
</script>
Дата добавления: 2015-02-16; просмотров: 47 | Поможем написать вашу работу | Нарушение авторских прав |