Язык программирования JavaScript

Содержание

Слайд 2

План

План

Слайд 3

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

JavaScript

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

Слайд 4

JavaScript Обычно используется как встраиваемый язык для программного доступа к объектам

JavaScript

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

широкое применение находит в браузерах как язык сценариев для придания интерактивности веб-страницам.
Слайд 5

История JavaScript разработан Netscape в 1995 году. Изначально использовался для добавления

История

JavaScript разработан Netscape в 1995 году.
Изначально использовался для добавления практически бесполезных

эффектов:
счётчик, видимый при прокрутке страницы
анимированная картинка, движущаяся за курсором мыши
Слайд 6

История Первоначально язык назывался LiveScript и предназначался как для программирования на

История

Первоначально язык назывался LiveScript и предназначался как для программирования на стороне

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

История В 1996 году компания Microsoft выпустила аналог языка JavaScript, названный

История

В 1996 году компания Microsoft выпустила аналог языка JavaScript, названный JScript.
Первым

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

Популярность JavaScript В статье «Самый непонимаемый язык программирования в мире стал

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

В статье «Самый непонимаемый язык программирования в мире стал самым

популярным в мире языком программирования» автор (Дуглас Крокфорд, 2008) утверждает, что лидирующую позицию JavaScript занял в связи с развитием AJAX, поскольку браузер стал превалирующей системой доставки приложений.
Слайд 9

Популярность JavaScript Он также констатирует растущую популярность JavaScript, то, что этот

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

Он также констатирует растущую популярность JavaScript, то, что этот язык

встраивается в приложения, отмечает значимость языка.
Согласно рейтингу Tiobe, базирующемуся на данных поисковых систем Google, MSN, Yahoo!, Википедия и YouTube, в сентябре 2010 года JavaScript находится на 11 месте (был 9).
Слайд 10

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

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

Слайд 11

Популярность JavaScript По данным Black Duck Software в разработке открытого программного

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

По данным Black Duck Software в разработке открытого программного обеспечения

доля использования JavaScript выросла.
JavaScript является самым популярным языком программирования, используемым для разработки веб-приложений на стороне клиента.
Слайд 12

Возможности JavaScript JavaScript обладает рядом свойств объектно-ориентированного языка, но реализованное в

Возможности JavaScript

JavaScript обладает рядом свойств объектно-ориентированного языка, но реализованное в языке

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

Возможности JavaScript В языке отсутствуют некоторые полезные вещи: модульная система: JavaScript

Возможности JavaScript

В языке отсутствуют некоторые полезные вещи:
модульная система: JavaScript не предоставляет

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

Семантика и синтаксис Синтаксис языка JavaScript во многом напоминает синтаксис Си

Семантика и синтаксис

Синтаксис языка JavaScript во многом напоминает синтаксис Си и

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

Структура языка Ядро ECMAScript Объектная модель браузера Browser Object Model или

Структура языка

Ядро
ECMAScript
Объектная модель браузера
Browser Object Model или BOM
Объектная модель документа
Document Object

Model или DOM
Слайд 16

Ядро ECMAScript не является браузерным языком и на самом деле в

Ядро

ECMAScript не является браузерным языком и на самом деле в нём

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

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

Объектная модель браузера

Объектная модель браузера – браузероспецифическая часть языка, являющаяся прослойкой

между ядром и объектной моделью документа.
Основное предназначение объектной модели браузера – управление окнами браузера и обеспечение их взаимодействия.
Слайд 18

Объектная модель браузера Каждое из окон браузера представляется объектом window, центральным

Объектная модель браузера

Каждое из окон браузера представляется объектом window, центральным объектом

BOM.
Объектная модель браузера на данный момент не стандартизирована, однако спецификация находится в разработке WHATWG и W3C.
Слайд 19

Объектная модель браузера Управление фреймами. Поддержка задержки в исполнении кода и

Объектная модель браузера

Управление фреймами.
Поддержка задержки в исполнении кода и зацикливания с

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

Объектная модель документа Объектная модель документа – интерфейс программирования приложений для

Объектная модель документа

Объектная модель документа – интерфейс программирования приложений для HTML

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

Объектная модель документа DOM (от англ. Document Object Model – «объектная

Объектная модель документа

DOM (от англ. Document Object Model – «объектная модель

документа») – это не зависящий от платформы и языка программный интерфейс, позволяющий программам и скриптам получить доступ к содержимому HTML, XHTML и XML-документов, а также изменять содержимое, структуру и оформление таких документов.
Слайд 22

Иерархия объектов в HTML DOM Модель DOM не накладывает ограничений на

Иерархия объектов в HTML DOM

Модель DOM не накладывает ограничений на структуру

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

Расположение JavaScript Существует несколько способов расположение JavaScript: внутри страницы; внутри тега;

Расположение JavaScript

Существует несколько способов расположение JavaScript:
внутри страницы;
внутри тега;
отдельно от разметки;
в отдельном

файле.
Слайд 24

JavaScript внутри страницы Для добавления JavaScript-кода на страницу, можно использовать теги

JavaScript внутри страницы

Для добавления JavaScript-кода на страницу, можно использовать теги .
Скрипт,

выводящий модальное окно с классической надписью «Hello, World!» внутри браузера:

Слайд 25

JavaScript внутри тега Спецификация HTML описывает набор атрибутов, используемых для задания обработчиков событий. Пример использования: Удалить

JavaScript внутри тега

Спецификация HTML описывает набор атрибутов, используемых для задания обработчиков

событий.
Пример использования:
Удалить
Слайд 26

JavaScript отдельно от разметки Использование кода JavaScript в контексте разметки страницы

JavaScript отдельно от разметки

Использование кода JavaScript в контексте разметки страницы в

рамках ненавязчивого JavaScript расценивается как плохая практика.
Удалить
window.onload = function() {
var linkWithAlert = document.getElementById("alertLink");
linkWithAlert.onclick = function() {
return confirm('Вы уверены?');
};
};
Слайд 27

JavaScript в отдельном файле Тег script имеет несколько атрибутов: type src charset defer language

JavaScript в отдельном файле


Тег script имеет несколько атрибутов:
type
src
charset
defer
language

Слайд 28

Область применения Веб-приложения AJAX Comet Браузерные операционные системы Букмарклеты Пользовательские скрипты

Область применения

Веб-приложения
AJAX
Comet
Браузерные операционные системы
Букмарклеты
Пользовательские скрипты в браузере
Серверные приложения
Мобильные приложения

Виджеты
Прикладное программное обеспечение
Манипуляция

объектами приложений
Офисные приложения
Microsoft Office
OpenOffice.org
Обучение информатике
Слайд 29

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

Веб-приложения

JavaScript используется в клиентской части веб-приложений: клиент-серверных программ, в котором клиентом

выступает браузер, а сервером — веб-сервер, имеющих распределённую между сервером и клиентом логику.
Слайд 30

Веб-приложения Обмен информацией в веб-приложениях происходит по сети. Одним из преимуществ

Веб-приложения

Обмен информацией в веб-приложениях происходит по сети.
Одним из преимуществ такого подхода

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

AJAX JavaScript используется в AJAX, популярном подходе к построению интерактивных пользовательских

AJAX

JavaScript используется в AJAX, популярном подходе к построению интерактивных пользовательских интерфейсов

веб-приложений, заключающемся в «фоновом» асинхронном обмене данными браузера с веб-сервером.
Слайд 32

AJAX В результате, при обновлении данных веб-страница не перезагружается полностью и

AJAX

В результате, при обновлении данных веб-страница не перезагружается полностью и интерфейс

веб-приложения становится быстрее, чем это происходит при традиционном подходе (без применения AJAX).
Слайд 33

Букмарклеты Букмарклет — небольшая JavaScript-программа, оформленная как javascript: URL и сохраняемая

Букмарклеты

Букмарклет — небольшая JavaScript-программа, оформленная как javascript: URL и сохраняемая как

браузерная закладка.
Букмарклеты используются как инструменты, придающие браузеру дополнительную функциональность.
Слайд 34

Букмарклеты Изменения внешнего вида страницы (цвета, размер букв, и т. д.),

Букмарклеты

Изменения внешнего вида страницы (цвета, размер букв, и т. д.),
Извлечения данных

из страницы, например, все ссылки или все используемые изображения,
Перехода (для удобства обычно в новом окне) к результатам поиска выделенных на странице слов,
Слайд 35

Букмарклеты Создания более удобной страницы для чтения (увеличить шрифт, убрать яркий

Букмарклеты

Создания более удобной страницы для чтения (увеличить шрифт, убрать яркий фон

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

Пользовательские скрипты в браузере Пользовательские скрипты в браузере — это программы,

Пользовательские скрипты в браузере

Пользовательские скрипты в браузере — это программы, написанные на

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

Серверные приложения Приложения, написанные на JavaScript, могут исполняться на серверах. Это

Серверные приложения

Приложения, написанные на JavaScript, могут исполняться на серверах.
Это обстоятельство используется

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

Мобильные приложения Перевод мобильных устройств Palm на использование Palm webOS в

Мобильные приложения

Перевод мобильных устройств Palm на использование Palm webOS в качестве

операционной системы с Mojo SDK в качестве комплекта средств разработки позволяет использовать JavaScript в качестве языка разработки мобильных приложений.
Слайд 39

Виджеты Виджет — вспомогательная мини-программа, графический модуль которой размещается в рабочем

Виджеты

Виджет — вспомогательная мини-программа, графический модуль которой размещается в рабочем пространстве

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

Виджеты JavaScript используется как для реализации виджетов, так и для реализации

Виджеты

JavaScript используется как для реализации виджетов, так и для реализации движков

виджетов.
В частности, при помощи JavaScript реализованы Apple Dashboard, Microsoft Gadgets, Yahoo!_Widgets, Google Gadgets, Klipfolio Dashboard.
Слайд 41

Прикладное программное обеспечение JavaScript используется для написания прикладного ПО. Google Chrome

Прикладное программное обеспечение

JavaScript используется для написания прикладного ПО.
Google Chrome OS в качестве

прикладного ПО использует веб-приложения.
В окружении рабочего стола GNOME имеется возможность создавать на JavaScript программы, оперирующие с библиотеками GNOME при помощи Gjs, Seed.
Слайд 42

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

Манипуляция объектами приложений

JavaScript также находит применение в качестве скриптового языка доступа к

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

Офисные приложения JavaScript используется в офисных приложениях для автоматизации рутинных действий,

Офисные приложения

JavaScript используется в офисных приложениях для автоматизации рутинных действий, написания

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

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

Обучение информатике

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

интенсивную практику программирования и широту используемых технологий.
Преподавание данного языка в школе позволяет создать базу для изучения веб-программирования, использовать на уроках творческие проекты.
Слайд 45

Версии JavaScript JavaScript 1.1 март 1996 только Netscape JavaScript 1.5 ноябрь

Версии 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
В разработке
Слайд 46

Библиотеки JavaScript Для обеспечения высокого уровня абстракции и достижения приемлемой степени

Библиотеки JavaScript

Для обеспечения высокого уровня абстракции и достижения приемлемой степени кросс-браузерности

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

Библиотеки JavaScript Среди известных JavaScript библиотек можно отметить: Adobe life, Dojo

Библиотеки JavaScript

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

Слайд 48

Dojo (доджо) Свободная модульная библиотека JavaScript. Разработана с целью упростить ускоренную

Dojo (доджо)

Свободная модульная библиотека JavaScript. Разработана с целью упростить ускоренную разработку

основанных на JavaScript или AJAX приложений и сайтов.
Dojo предоставляет абстрактное хранилище данных на стороне клиента. Позволяет веб-приложениям хранить мегабайты данных на стороне клиента, постоянно и защищённо, с правами пользователя.
Слайд 49

Элементы интерфейса Dojo Это пакеты, сформированные из компонентов: JavaScript-кода, разметки HTML

Элементы интерфейса Dojo

Это пакеты, сформированные из компонентов: JavaScript-кода, разметки HTML и

CSS.
Могут быть использованы для добавления интерактивных возможностей к сайту:
меню, закладок, всплывающих подсказок;
селекторов даты, времени, часов;
сортируемых таблиц, динамических диаграмм, векторной 2D графики;
Слайд 50

Элементы интерфейса Dojo элементов интерфейса «дерево», с возможностями drag-and-drop; Rich Text

Элементы интерфейса Dojo

элементов интерфейса «дерево», с возможностями drag-and-drop;
Rich Text Editor;
различных HTML-форм

с возможностью проверки ввода пользователя;
анимированных эффектов, и возможностей построения своих собственных эффектов.
Слайд 51

jQuery Библиотека JavaScript, фокусирующаяся на взаимодействии JavaScript и HTML. Библиотека jQuery

jQuery

Библиотека JavaScript, фокусирующаяся на взаимодействии JavaScript и HTML.
Библиотека jQuery помогает легко

получать доступ к любому элементу DOM, обращаться к атрибутам и содержимому элементов DOM, манипулировать ими.
Библиотека jQuery предоставляет удобный API по работе с Ajax.
Слайд 52

Prototype JavaScript фреймворк, упрощающий работу с Ajax и некоторыми другими функциями.

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+.
Слайд 53

Отладка В JavaScript доступ к отладчикам становится особенно полезным при разработке

Отладка

В JavaScript доступ к отладчикам становится особенно полезным при разработке крупных

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

Поддержка браузерами На сегодняшний день поддержку JavaScript обеспечивают современные версии всех

Поддержка браузерами

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

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