JavaScript

1. JavaScript
Информационные технологии

2. JavaScript
Объектно-ориентированный
скриптовый язык
программирования.
Является диалектом (вариация или
расширение) языка ECMAScript.

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

4. История
JavaScript разработан Netscape в 1995
году.
Изначально использовался для
добавления практически
бесполезных эффектов:
◦ счётчик, видимый при прокрутке
страницы
◦ анимированная картинка, движущаяся
за курсором мыши

5. История
Первоначально язык назывался LiveScript и
предназначался как для программирования на
стороне клиента, так и для программирования
на стороне сервера.
На синтаксис оказали влияние языки Си и Java,
и, поскольку Java в то время было модным
словом, 4 декабря 1995 года LiveScript
переименовали в JavaScript, получив
соответствующую лицензию у Sun.

6. История
В 1996 году компания Microsoft выпустила аналог
языка JavaScript, названный JScript.
◦ Первым браузером, поддерживающим эту реализацию был
Internet Explorer 3.0.
По инициативе компании Netscape была проведена
стандартизация языка ассоциацией ECMA.
Стандартизированная версия имеет название
ECMAScript, описывается стандартом ECMA-262.
◦ Первой версии спецификации соответствовал JavaScript
версии 1.1, а также языки JScript и ScriptEasy.

7. Популярность JavaScript
В статье «Самый непонимаемый язык программирования в мире стал самым
популярным в мире языком программирования» автор (Дуглас Крокфорд, 2008)
утверждает, что лидирующую позицию JavaScript занял в связи с развитием AJAX,
поскольку браузер стал превалирующей системой доставки приложений.
Он также констатирует растущую популярность JavaScript, то, что этот язык
встраивается в приложения, отмечает значимость языка.
Согласно рейтингу Tiobe, базирующемуся на данных поисковых систем Google,
MSN, Yahoo!, Википедия и YouTube, в сентябре 2010 года JavaScript находится на 11
месте (был 9).

8. Популярность JavaScript

9. Популярность JavaScript
По данным Black Duck Software в разработке открытого
программного обеспечения доля использования JavaScript выросла.
◦ 36 % проектов, релизы которых состоялись с августа 2008 по август 2009
гг., включают JavaScript.
◦ 80 % открытого программного обеспечения использует Си, C++, Java, Shell и
JavaScript. При этом JavaScript — единственный из этих языков, чья доля
использования увеличилась (более чем на 2 процента, если считать в
строках кода).
JavaScript является самым популярным языком программирования,
используемым для разработки веб-приложений на стороне
клиента.

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

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

12. Семантика и синтаксис
Синтаксис языка JavaScript во многом напоминает
синтаксис Си и Java, семантически же язык гораздо ближе к
Self, Smalltalk или даже Лиспу.
◦ все идентификаторы регистрозависимы,
◦ в названиях переменных можно использовать буквы,
подчёркивание, символ доллара, арабские цифры,
◦ названия переменных не могут начинаться с цифры,
◦ для оформления однострочных комментариев используются //,
многострочные и внутристрочные комментарии начинаются с /* и
заканчиваются */.

13. Структура языка
Ядро
◦ ECMAScript
Объектная модель браузера
◦ Browser Object Model или BOM
Объектная модель документа
◦ Document Object Model или DOM

14. Ядро
ECMAScript не является браузерным языком и на самом
деле в нём не определяются методы ввода и вывода
информации.
Это скорее основа для построения скриптовых языков.
Спецификация ECMAScript описывает типы данных,
инструкции, ключевые и зарезервированные слова,
операторы, объекты, регулярные выражения, не
ограничивая авторов производных языков в расширении
их новыми составляющими.

15. Объектная модель браузера
Объектная модель браузера – браузероспецифичная
часть языка, являющаяся прослойкой между ядром и
объектной моделью документа.
Основное предназначение объектной модели
браузера – управление окнами браузера и
обеспечение их взаимодействия.
Каждое из окон браузера представляется объектом
window, центральным объектом BOM.
Объектная модель браузера на данный момент не
стандартизирована, однако спецификация находится
в разработке WHATWG и W3C.

16. Объектная модель браузера
Управление фреймами.
Поддержка задержки в исполнении кода и
зацикливания с задержкой.
Системные диалоги.
Управление адресом открытой страницы.
Управление информацией о браузере.
Управление информацией о параметрах монитора.
Ограниченное управление историей просмотра
страниц.
Поддержка работы с HTTP cookie.

17. Объектная модель документа
Объектная модель документа – интерфейс
программирования приложений для HTML и
XML-документов.
Согласно DOM документу можно поставить в
соответствие дерево объектов, обладающих
рядом свойств, которые позволяют
производить с ним различные манипуляции:
◦ получение узлов,
◦ изменение узлов,
◦ изменение связей между узлами,
◦ удаление узлов.

18. Объектная модель документа
DOM (от англ. Document Object Model –
«объектная модель документа») – это
не зависящий от платформы и языка
программный интерфейс,
позволяющий программам и
скриптам получить доступ к
содержимому HTML, XHTML и XML-
документов, а также изменять
содержимое, структуру и оформление
таких документов.

19. Иерархия объектов в HTML DOM
Модель DOM не накладывает
ограничений на структуру документа.
Любой документ известной структуры с
помощью DOM может быть
представлен в виде дерева узлов,
каждый узел которого представляет
собой элемент, атрибут, текстовый,
графический или любой другой объект.
Узлы связаны между собой
отношениями родительский-дочерний.

20. Расположение JavaScript
Внутри страницы.
Внутри тега.
Отдельно от разметки.
В отдельном файле.

21. JavaScript внутри страницы
Для добавления JavaScript-кода на
страницу, можно использовать теги
<script></script>.
Скрипт, выводящий модальное окно с
классической надписью «Hello, World!»
внутри браузера:
<script type="text/javascript">
alert('Hello, World!');
</script>

22. JavaScript внутри тега
Спецификация HTML описывает
набор атрибутов, используемых для
задания обработчиков событий.
Пример использования:
<a href="delete.php" onclick="return
confirm('Вы уверены?');">Удалить</a>

23. JavaScript отдельно от разметки
Использование кода JavaScript в контексте разметки
страницы в рамках ненавязчивого JavaScript
расценивается как плохая практика.
<a href="delete.php" id="alertLink">Удалить</a>
window.onload = function() {
var linkWithAlert = document.getElementById("alertLink");
linkWithAlert.onclick = function() {
return confirm('Вы уверены?');
};
};

24. JavaScript в отдельном файле
<script type="text/javascript"
src="http://Путь_к_javascript_файлу"><
/script>
Тег script имеет несколько атрибутов:
◦ type
◦ src
◦ charset
◦ defer
◦ language

25. Область применения
Веб-приложения
◦ AJAX
◦ Comet
◦ Браузерные операционные
системы
Букмарклеты
Пользовательские
скрипты в браузере
Серверные приложения
Мобильные приложения
 Виджеты
 Прикладное программное
обеспечение
 Манипуляция объектами
приложений
 Офисные приложения
◦ Microsoft Office
◦ OpenOffice.org
 Обучение информатике

26. Веб-приложения
JavaScript используется в клиентской части веб-приложений:
клиент-серверных программ, в котором клиентом выступает
браузер, а сервером — веб-сервер, имеющих распределённую
между сервером и клиентом логику.
Обмен информацией в веб-приложениях происходит по сети.
Одним из преимуществ такого подхода является тот факт, что
клиенты не зависят от конкретной операционной системы
пользователя, поэтому веб-приложения являются
межплатформенными сервисами.

27. AJAX
JavaScript используется в AJAX, популярном подходе к
построению интерактивных пользовательских
интерфейсов веб-приложений, заключающемся в
«фоновом» асинхронном обмене данными браузера с
веб-сервером.
В результате, при обновлении данных веб-страница не
перезагружается полностью и интерфейс веб-
приложения становится быстрее, чем это происходит
при традиционном подходе (без применения AJAX).

28. Букмарклеты
Букмарклет — небольшая JavaScript-
программа, оформленная как
javascript: URL и сохраняемая как
браузерная закладка.
Букмарклеты используются как
инструменты, придающие браузеру
дополнительную функциональность.

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

30. Пользовательские скрипты
в браузере
Пользовательские скрипты в браузере — это программы,
написанные на JavaScript, выполняемые в браузере
пользователя при загрузке страницы.
Они позволяют автоматически заполнять формы,
переформатировать страницы, скрывать нежелательное
содержимое и встраивать желательное для отображения
содержимое, изменять поведение клиентской части веб-
приложений, добавлять элементы управления на страницу и
т.д.

31. Серверные приложения
Приложения, написанные на JavaScript, могут
исполняться на серверах.
Это обстоятельство используется для построения
серверных приложений, позволяющих обрабатывать
JavaScript на стороне сервера.
JavaScript на стороне сервера используется в
проектах Google.
◦ Google Sites допускает подстройку с помощью JavaScript-
сценариев, исполняемых движком Rhino.

32. Мобильные приложения
Перевод мобильных устройств Palm
на использование Palm webOS в
качестве операционной системы с
Mojo SDK в качестве комплекта
средств разработки позволяет
использовать JavaScript в качестве
языка разработки мобильных
приложений.

33. Виджеты
Виджет — вспомогательная мини-программа, графический модуль
которой размещается в рабочем пространстве соответствующей
родительской программы, служащая для украшения рабочего
пространства, развлечения, решения отдельных рабочих задач
или быстрого получения информации из интернета без помощи
веб-браузера.
JavaScript используется как для реализации виджетов, так и для
реализации движков виджетов.
◦ В частности, при помощи JavaScript реализованы Apple Dashboard, Microsoft
Gadgets, Yahoo!_Widgets, Google Gadgets, Klipfolio Dashboard.

34. Прикладное
программное обеспечение
JavaScript используется для написания прикладного ПО.
◦ Одним из ярких примеров является Mozilla Firefox, 57% исходного
кода которого написано на JavaScript (для сравнения, следующим
языком программирования по объёму кодовой базы Firefox
является C++, доля которого составляет 17%).
◦ Google Chrome OS в качестве прикладного ПО использует веб-
приложения.
◦ В окружении рабочего стола GNOME имеется возможность
создавать на JavaScript программы, оперирующие с библиотеками
GNOME при помощи Gjs, Seed.

35. Манипуляция
объектами приложений
JavaScript также находит применение в
качестве скриптового языка доступа к
объектам приложений.
◦ Платформа Mozilla (XUL/Gecko) использует
JavaScript.
◦ Среди сторонних продуктов, например, Java,
начиная с версии 6, содержит встроенный
интерпретатор JavaScript на базе Rhino.
◦ Сценарии JavaScript поддерживаются в таких
приложениях Adobe, как Adobe Photoshop, Adobe
Dreamweaver, Adobe Illustrator и Adobe InDesign.

36. Офисные приложения
JavaScript используется в офисных
приложениях для автоматизации
рутинных действий, написания
макросов, организации доступа со
стороны веб-служб.
◦ JavaScript — один из языков
программирования, используемых для
написания макросов в приложениях,
входящих в состав OpenOffice.org.

37. Обучение информатике
Язык обладает ценностью
предварительного обучения, позволяя
сочетать при обучении информатике
интенсивную практику программирования
и широту используемых технологий.
Преподавание данного языка в школе
позволяет создать базу для изучения веб-
программирования, использовать на
уроках творческие проекты.

38. Версии JavaScript
JavaScript 1.1
◦ март 1996
◦ только Netscape
JavaScript 1.5
◦ ноябрь 2000
◦ Netscape и Mozilla
JavaScript 1.8.1
◦ 2009
JavaScript 1.9.3
◦ 2010
◦ тестовая версия
JavaScript 2.0
◦ В разработке

39. Библиотеки JavaScript
Для обеспечения высокого уровня
абстракции и достижения приемлемой
степени кросс-браузерности при
разработке веб-приложений
используются библиотеки JavaScript.
Они представляют собой набор
многократно используемых объектов и
функций.

40. Библиотеки JavaScript
Среди известных JavaScript библиотек
можно отметить:
◦ Adobe life,
◦ Dojo Toolkit,
◦ Extjs,
◦ jQuery,
◦ Mootools,
◦ Prototype,
◦ Qooxdoo .

41. Dojo (доджо)
Свободная модульная библиотека JavaScript.
Разработана с целью упростить ускоренную
разработку основанных на JavaScript или AJAX
приложений и сайтов.
Dojo предоставляет абстрактное хранилище
данных на стороне клиента. Позволяет веб-
приложениям хранить мегабайты данных на
стороне клиента, постоянно и защищённо, с
правами пользователя.

42. Элементы интерфейса
Dojo (доджо)
Это пакеты, сформированные из компонентов: JavaScript-кода,
разметки HTML и CSS.
Могут быть использованы для добавления интерактивных
возможностей к сайту:
◦ меню, закладок, всплывающих подсказок;
◦ селекторов даты, времени; часов;
◦ сортируемых таблиц, динамических диаграмм, векторной 2D графики;
◦ элементов интерфейса «дерево», с возможностями drag-and-drop;
◦ Rich Text Editor;
◦ различных HTML-форм с возможностью проверки ввода пользователя;
◦ анимированных эффектов, и возможностей построения своих
собственных эффектов.

43. jQuery
Библиотека JavaScript, фокусирующаяся
на взаимодействии JavaScript и HTML.
Библиотека jQuery помогает легко
получать доступ к любому элементу
DOM, обращаться к атрибутам и
содержимому элементов DOM,
манипулировать ими.
Библиотека jQuery предоставляет
удобный API по работе с Ajax.

44. Prototype
JavaScript фреймворк, упрощающий работу с Ajax и
некоторыми другими функциями.
Несмотря на его доступность в виде отдельной
библиотеки, он обычно используется
программистами вместе с другими
фреймворками (Ruby on Rails, Tapestry, script.aculo.us
и Rico).
Поддерживается: Internet Explorer 6.0+, Mozilla
Firefox 1.5+, Apple Safari 2.0+ и Opera 9.25+.

45. Отладка
В JavaScript доступ к отладчикам становится особенно
полезным при разработке крупных нетривиальных программ
из-за различий в реализациях разных браузеров (в
частности, в отношении объектной модели документа).
Полезно иметь доступ к отладчику для каждого из
браузеров, в которых будет работать веб-приложение.
На ноябрь 2009 года, Internet Explorer, Firefox, Safari, Google
Chrome, а также Opera имеют отладчики сценариев.

46. Поддержка браузерами
На сегодняшний день поддержку JavaScript обеспечивают
современные версии всех наиболее часто используемых
браузеров.
В Internet Explorer, Mozilla Firefox, Safari, Google Chrome, Opera
имеется полная поддержка третьей редакции ECMA-262.
В Mozilla Firefox предпринята попытка осуществления
поддержки четвёртой редакции спецификации, а первым
браузером, в котором появилась неполная поддержка
спецификации 3.1, явился Internet Explorer 8.