редактор ресурсы https://developer.mozilla.org/ru
advertisement
https://jsfiddle.net/ - онлайн редактор Онлайн ресурсы https://developer.mozilla.org/ru/docs/Web/JavaScript/Reference https://learn.javascript.ru/ http://www.w3schools.com/jsref/default.asp Лекция 1. JavaScript – это язык программирования для Веб. Подавляющее большинство веб-сайтов используют JavaScript, и все современные веб-броузеры – для настольных компьютеров, игровых приставок, электронных планшетов и смартфонов – включают интерпретатор JavaScript, что делает JavaScript самым широкоприменимым языком программирования из когда-либо существовавших в истории. JavaScript является высокоуровневым, динамическим, нетипизированным и интерпретируемым языком программирования, который хорошо подходит для программирования в объектно-ориентированном и функциональном стилях.( Интерпретируемый язык программирования — язык программирования, в котором исходный код программы не преобразовывается в машинный код для непосредственного выполнения центральным процессором (как в компилируемых языках), а исполняется с помощью специальной программыинтерпретатора.) ECMAScript – стандарт языка, 2015 JavaScript – это язык, чувствительный к регистру символов. Это значит, что ключевые слова, имена переменных и функций и любые другие идентификаторы языка должны всегда содержать одинаковые наборы прописных и строчных букв. Например, online, Online, OnLine и ONLINE – это имена четырех разных переменных JavaScript-код может встраиваться в HTML-документы четырьмя способами: • встроенные сценарии между парой тегов <script> и </script>; • из внешнего файла, заданного атрибутом src тега <script>; • в обработчик события, заданный в качестве значения HTML-атрибута, такого как onclick или onmouseover; • как тело URL-адреса, использующего специальный спецификатор псевдопро- токола JavaScript:. HTML-атрибуты обработчиков событий и адреса URL с псевдопротоколом javascript: редко используются в современной практике программирования (они были более распространены на раннем этапе развития). Встроенные сценарии (в тегах <script> без атрибута src) также стали реже использоваться по сравнению с прошлым. Согласно философии программирования, известной как ненавязчивый JavaScript (unobtrusive JavaScript), содержимое (разметка HTML) и поведение (программный код на языке JavaScript) должны быть максимально отделены друг от друга. Обработчики событий в HTML JavaScript-код, расположенный в теге <script>, исполняется один раз, когда со- держащий его HTML-файл считывается в веб-броузер. Для обеспечения интерак- тивности программы на языке JavaScript должны определять обработчики собы- тий – JavaScript-функции, которые регистрируются в веб-броузере и автомати- чески вызываются веб-броузером в ответ на определенные события (такие как ввод данных пользователем). Свойства обработчиков событий, такие как onclick, отражают HTML-атрибуты с теми же именами, что позволяет определять обработчики событий, помещая Ja- vaScript-код в HTMLатрибуты. Например, чтобы определить обработчик собы- тия, который вызывается, когда пользователь щелкает на флажке в форме, код обработчика указывается в качестве значения атрибута onchange HTML-элемента, определяющего флажок: <input type="checkbox" name="options" value="giftwrap" onchange="alert(‘Hello world!’);"> Обратите внимание на атрибут onchange. JavaScript-код, являющийся значением этого атрибута, будет выполняться всякий раз, когда пользователь будет щелкать на флажке. Атрибуты обработчиков событий, включенных в разметку HTML, могут содер- жать одну или несколько JavaScript-инструкций, отделяемых друг от друга точками с запятой. Эти инструкции будут преобразованы интерпретатором в тело функции, которая в свою очередь станет значением соответствующего свойства обработчика события. На практике многие веб-разработчики считают плохим стилем использование HTML-атрибутов обработчиков событий и предпочитают отделять содержимое от поведения. JavaScript в URL Еще один способ выполнения JavaScript-кода на стороне клиента – включение этого кода в URL-адресе вслед за спецификатором псевдопротокола javascript:. Этот специальный тип протокола обозначает, что тело URL-адреса представляет собою произвольный JavaScript-код, который должен быть выполнен интерпре- татором JavaScript. Он интерпретируется как единственная строка, и потому ин- струкции в ней должны быть отделены друг от друга точками с запятой, а для комментариев следует использовать комбинации символов /* */, а не //. «Ресурсом», который определяется URL-адресом javascript:, является значение, возвра- щаемое этим программным кодом, преобразованное в строку. Если программный код возвращает значение undefined, считается, что ресурс не имеет содержимого. URL вида javascript: можно использовать везде, где допускается указывать обыч- ные URL: в атрибуте href тега <a>, в атрибуте action тега <form> и даже как аргу- мент метода, такого как window.open(). Например, адрес URL с программным ко- дом на языке JavaScript в гиперссылке может иметь такой вид: <a href="JavaScript:new Date().toLocaleTimeString();"> Который сейчас час? </a> Некоторые броузеры (такие как Firefox) выполняют программный код в URL и используют возвращаемое значение в качестве содержимого нового отображае- мого документа. Точно так же, как при переходе по ссылке http:, броузер стирает текущий документ и отображает новое содержимое. Синхронные, асинхронные и отложенные сценарии Когда поддержка JavaScript впервые появилась в веб-броузерах, не существовало никаких инструментов обхода и управления структурой содержимого докумен- та. Единственный способ, каким JavaScript-код мог влиять на содержимое доку- мента, – это генерировать содержимое в процессе загрузки документа. Делалось это с помощью метода document.write(). В примере показано, как выглядел ультрасовременный JavaScript-код в 1996 году. Пример. Генерация содержимого документа во время загрузки <script> document.write("Generated at " + new Date()); // Вывести время </script> Когда сценарий передает текст методу document.write(), этот текст добавляется во входной поток документа, и механизм синтаксического анализа разметки HTML действует так, как если бы элемент <script> был замещен этим текстом. Использо- вание метода document.write() более не считается хорошим стилем программирова- ния, но его применение по-прежнему возможно, и этот факт имеет важное следствие. Когда механизм синтаксического анализа разметки HTML встречает элемент <script>, он должен, по умолчанию, выполнить сценарий, прежде чем продолжить разбор и отображение документа. Это не является проблемой для встроенных сценариев, но если сценарий находится во внешнем файле, на ко- торый ссылается атрибут src, это означает, что часть документа, следующая за сце- нарием, не появится в окне броузера, пока сценарий не будет загружен и выполнен. Такой синхронный, или блокирующий, порядок выполнения действует только по умолчанию. Тег <script> может иметь атрибуты defer и async, которые (в броузе- рах, поддерживающих их) определяют иной порядок выполнения сценариев. Это логические атрибуты – они не имеют значения; они просто должны присутство- вать в теге <script>. Согласно спецификации HTML5, эти атрибуты принимаются во внимание, только когда используются вместе с атрибутом src, однако некото- рые броузеры могут поддерживать атрибут defer и для встроенных сценариев: <!DOCTYPE HTML><html><head> <!-- Тег meta для указания кодировки --> <meta charset="utf-8"></head> <body> <p>Начало документа...</p> <script> alert( 'Привет, Мир!' ); </script> <p>...Конец документа</p> </body></html> <script defer src="deferred.js"></script> <script async src="async.js"></script> Оба атрибута, defer и async, сообщают броузеру, что данный сценарий не исполь- зует метод document.write() и не генерирует содержимое документа, и что броузер может продолжать разбор и отображение документа, пока сценарий загружает- ся. Атрибут defer заставляет броузер отложить выполнение сценария до момента, когда документ будет загружен, проанализирован и станет готов к выполнению операций. Атрибут async заставляет броузер выполнить сценарий, как только это станет возможно, но не блокирует разбор документа на время загрузки сценария. Если тег <script> имеет оба атрибута, броузер, поддерживающий оба этих атрибу- та, отдаст предпочтение атрибуту async и проигнорирует атрибут defer. Обратите внимание, что отложенные сценарии выполняются в порядке их следо- вания в документе. Асинхронные сценарии выполняются сразу же, как только будут загружены, т. е. они могут выполняться в произвольном порядке. Обработка событий Клиентские программы на языке JavaScript основаны на модели программирования, когда выполнение программы управляется событиями. При таком стиле программирования веб-броузер генерирует событие, когда с документом или некоторым его элементом что-то происходит. Например, веб-броузер генерирует событие, когда завершает загрузку документа, когда пользователь наводит указатель мыши на гиперссылку или нажимает клавишу на клавиатуре. События – это просто некоторые происшествия, о которых броузер извещает программу. События не являются объектами языка JavaScript и никак не описываются в программном коде программы.. Тип события – это строка, определяющая тип происшествия. Цель события – это объект, в котором возникло событие или с которым это собы- тие связано. Когда говорят о событии, обычно упоминают тип и цель события. Например: событие «load» объекта Window или событие «click» элемента <button>. Обработчик события, или приемник события, – это функция, которая обрабатывает, или откликается на событие Типы событий Не существует стандарта, который определял бы полный набор событий, и количество поддерживаемых событий продолжает быстро увеличиваться. Старые типы событий События, которые вам чаще всего придется использовать в своих веб-приложениях, обычно будут относиться к категории давно существующих и поддерживаемых всеми броузерами: это события для работы с мышью, с клавиатурой, с HTML-формами и с объектом Window. События форм Формы и гиперссылки стали первыми элементами веб-страниц, возможность управления которыми была реализована в начале развития Всемирной паутины и JavaScript. Это означает, что события форм являются наиболее устойчивыми и хорошо поддерживаемыми из всех типов событий. Элементы <form> возбуждают события «submit», при отправке формы, и «reset», перед сбросом формы в исходное состояние. Элементы форм, внешним видом напоминающие кнопки (включая радиокнопки и флажки), возбуждают события «click», когда пользователь взаимодействуют с ними. Элементы форм, позволяющие вводить некоторую информацию, обычно возбуждают события «change», когда пользователь изменяет их состояние, вводя текст, выбирая элемент списка или отмечая флажок. Для текстовых элементов ввода событие «change» не возбуждается, пока пользователь не завершит взаимодействие с ними и не передаст фокус ввода другому эле-менту. Элементы форм откликаются на изменение фокуса ввода, возбуждая события «focus» и «blur» при получении и утере фокуса ввода. События объекта Window События объекта Window представляют происшествия, имеющие отношение к самому окну броузера, а не к определенному содержимому документа, отображаемому в окне. Самым важным из этих событий является событие «load»: оно возбуждается сразу после того, как будут загружены и отображены документ и все внешние ресурсы (такие как изображения). Событие «unload» является противоположностью событию «load»: оно возбуждается, когда пользователь покидает документ. Имеется также возможность регистрировать обработчики событий «load» для отдельных элементов документа, таких как <img>. Эти события возбуждаются, когда внешний ресурс (например, изображение) будет полностью загружен События «focus» и «blur», возбуждаются, когда текущее окно броузера получает или теряет фокус ввода. События «resize» и «scroll» возбуждаются в объекте Window, когда выполняется изменение размеров или прокрутка окна броузера. События «scroll» могут также возбуждать все прокручиваемые элементы документа, например те, что имеют CSS-свойство overflow. События мыши События от мыши возбуждаются, когда пользователь перемещает указатель мыши или выполняет щелчок. Свойства clientX и clientY определяют положение указателя мыши в системе координат окна. Свойства button и which позволяют узнать, какая кнопка была нажата. Свойства altKey, ctrlKey, metaKey и shiftKey получают значение true, если в момент возникновения события удерживалась нажатой соответствующая клавиша-модификатор. А свойство detail для события «click» указывает, был ли выполнен одинарный, двойной или тройной щелчок. Событие «mousemove» генерируется всякий раз, когда пользователь перемещает указатель мыши. Это событие возбуждается очень часто, поэтому его обработчики не должны выполнять тяжелые вычисления. События «mousedown» и «mouseup» генерируются, когда пользователь нажимает и отпускает кнопку мыши. После последовательности событий «mousedown» и «mouseup» броузер генерирует событие «click». Событие «click» было описано выше, как аппаратно-независимое событие форм, но на самом деле оно может генерироваться для любого элемента документа, а не только для элементов форм. Если вы дважды щелкнете мышью на строке (в течение достаточно короткого промежутка времени), второй щелчок сгенерирует событий «dblclick». Когда щелчок выполняется правой кнопкой мыши, броузеры часто выводят контекстное меню. Вообще, прежде чем вывести контекстное меню, они возбуждают событие «contextmenu», и, если отменить это событие в обработчике, можно предотвратить появление меню. Когда пользователь перемещает указатель мыши так, что он оказывается над другим элементом, броузер возбуждает событие «mouseover» для этого элемента. Когда указатель мыши покидает границы элемента, броузер генерирует для него событие «mouseout». Объект события для этих событий будет иметь свойство relatedTarget, определяющее другой элемент, вовлеченный в переход. Когда пользователь вращает колесико мыши, броузеры генерируют событие «mousewheel» (или в Firefox событие «DOMMouseScroll»). Объект события, передаваемый вместе с этими событиями, включает свойства, позволяющие узнать, на какое расстояние и в каком направлении было повернуто колесико. События клавиатуры Когда веб-броузер получает фокус ввода, он начинает генерировать события всякий раз, когда пользователь нажимает и отпускает клавиши на клавиатуре. Нажатия горячих комбинаций, имеющих значение для операционной системы или самого броузера, часто «съедаются» операционной системой или броузером и не передаются обработчикам событий на JavaScript. События от клавиатуры генериру-ются в любом элементе документа, обладающем фокусом ввода, и всплывают вверх до объектов документа и окна. Если ни один элемент не обладает фокусом ввода, события возбуждаются непосредственно в объекте документа. Обработчикам событий от клавиатуры передается объект события, имеющий свойство keyCode, позволяющее узнать, какая клавиша была нажата или отпущена. Объект события от клавиатуры также имеет свойства altKey, ctrlKey, metaKey и shiftKey, описывающие состояние клавиш-модификаторов. События «keydown» и «keyup» являются низкоуровневыми событиями от клавиатуры: они генерируются, когда производится нажатие или отпускание клавиши (даже если это клавишамодификатор). Когда событие «keydown» генерируется нажатием клавиши, соответствующей печатаемому символу, после события «keydown», но перед событием «keyup» дополнительно генерируется событие «keypress». (В случае если клавиша удерживается в нажатом состоянии настолько долго, что начинается автоповтор символа, перед событием «keyup» будет сгенерировано множество событий «keypress».) Событие «keypress» содержит информацию о введенном символе, а не о нажатой клавише. События HTML5 Стандарт HTML5 и связанные с ним стандарты определяют основу новых API для вебприложений (глава 22). Многие из этих API определяют события. В этом разделе перечисляются и коротко описываются эти события HTML5 и веб-прило- жений. Некоторые из этих событий уже готовы к использованию и более подроб- но описываются в разных главах книги. Другие пока реализованы не во всех бро- узерах и не описываются подробно. Одной из широко рекламируемых особенностей HTML является возможность включения элементов <audio> и <video> для проигрывания аудио- и видеороликов. Эти элементы имеют длинный перечень генерируемых ими событий, позволяю- щих отправлять извещения о сетевых событиях, о состоянии механизма буфери- зации данных и механизма воспроизведения: canplay loadeddata playing stalled canplaythrough loadedmetadata progress suspend durationchange loadstart ratechange timeupdate emptied pause seeked volumechange ended play seeking waiting Эти события, имеющие отношение к медиапроигрывателям, передаются в виде простого объекта события, не имеющего специальных свойств. Однако свойство target идентифицирует элемент <audio> или <video>, и этот элемент имеет множество специфических свойств и методов Интерфейс механизма буксировки (drag-and-drop), определяемый стандартом HTML5, позволяет приложениям на языке JavaScript участвовать в операциях буксировки объектов мышью, опираясь на механизмы, реализованные в операционной системе, и обмениваться данными с обычными приложениями. Этот прикладной интерфейс определяет следующие семь типов событий: dragstart drag dragend dragenter dragover dragleave drop Спецификация HTML5 определяет также механизм управления историей посещений (раздел 22.2), что позволяет веб-приложениям взаимодействовать с кноп- ками броузера Back (Назад) и Forward (Вперед). Этот механизм вводит события с именами «hashchange» и «popstate», которые возникают тогда же, когда и события «load» и «unload», и возбуждаются в объекте Window, а не в документе. В HTML5 определяется множество новых особенностей HTML-форм. В дополнение к событиям ввода, описанным выше, спецификация HTML5 также определяет механизм проверки форм, который привносит событие «invalid», возбуждаемое в элементе формы, не прошедшем проверку. Однако производители броузеров, кроме Opera, не торопятся воплощать новые особенности форм и новые события. Спецификация HTML5 включает поддержку веб-приложений, способных выполняться без подключения к сети, которые могут быть установлены локально в кэше приложений, чтобы их можно было запускать, даже когда броузер работает в автономном режиме (например, когда мобильное устройство находится вне сети). С этой поддержкой связаны два наиболее важных события, «offline» и «online»: они генерируются в объекте Window, когда броузер теряет или обретает соединение с сетью. Кроме того, определено несколько дополнительных событий, посредством которых приложение извещается о ходе выполнения загрузки и обновления кэша приложений: cached checking downloading error noupdate obsolete progress updateready События, генерируемые сенсорными экранами и мобильными устройствами Широкое распространение мощных мобильных устройств, особенно устройств с сенсорными экранами, потребовало создания новых категорий событий. Во многих случаях события от сенсорных экранов отображаются на традиционные типы событий, такие как «click» и «scroll». Но не все виды взаимодействий с пользовательским интерфейсом через сенсорный экран можно имитировать с помощью мыши, и не все прикосновения к такому экрану можно интерпретировать, как события от мыши. Броузер Safari генерирует события для жестов масштабирования и вращения из двух пальцев. Событие «gesturestart» возбуждается, когда начинается выполнение жеста, а событие «gestureend» по его окончании. Между этими двумя собы-тиями генерируется последовательность событий «gesturechange», позволяющих отслеживать выполнение жеста. Объект события, передаваемый вместе с этими событиями, имеет числовые свойства scale и rotation. Свойство scale определяет отношение текущего и начального расстояний между двумя пальцами. Для жеста, когда пальцы сводятся, свойство scale получает значение меньше 1.0, а для жеста, когда пальцы разводятся, свойство scale получает значение больше 1.0. Свойство rotation определяет угол поворота пальцев с момента события «gesturestart». Значение угла всегда является положительным и измеряется в градусах по часовой стрелке. Когда палец касается экрана, генерируется событие «touchstart». Когда палец перемещается, генерируется событие «touchmove». А когда палец отнимается от экрана, генерируется событие «touchend». В отличие от событий мыши, события прикосновений не несут непосредственной информации о координатах прикосновения. Вместо этого в объекте события, который поставляется вместе с событием прикосновения, имеется свойство changedTouches. Это свойство хранит объект, подобный массиву, каждый элемент которого описывает позицию прикосновения. Событие «orientationchanged» генерируется в объекте Window устройствами, позволяющими пользователям поворачивать экран для перехода из книжной ориентации в альбомную. Объект, передаваемый вместе с событием «orientationchanged», не очень полезен сам по себе. Однако в мобильной версии броузера Safari объект Window имеет свойство orientation, определяющее текущую ориентацию в виде числовых значений 0, 90, 180 или –90. Комментарии JavaScript поддерживает два способа оформления комментариев. Любой текст между символами // и концом строки рассматривается как комментарий и игно- рируется JavaScript. Любой текст между символами /* и */ также рассматривает- ся как комментарий. Эти комментарии могут состоять из нескольких строк, но не могут быть вложенными. Следующие строки представляют собой корректные JavaScript-комментарии: // Это однострочный комментарий. /* Это тоже комментарий */ // а это другой комментарий. /* * Это еще один комментарий. * Он располагается в нескольких строках. */ Идентификаторы и зарезервированные слова Идентификатор – это просто имя. В JavaScript идентификаторы выступают в качестве имен переменных и функций, а также меток некоторых циклов. Идентификаторы в JavaScript должны начинаться с буквы, с символа подчеркивания (_) или знака доллара ($). Далее могут следовать любые буквы, цифры, символы подчеркивания или знаки доллара. (Цифра не может быть первым символом, так как тогда интерпретатору трудно будет отличать идентификаторы от чисел.) Подобно другим языкам программирования, JavaScript резервирует некоторые идентификаторы. Эти «зарезервированные слова» не могут использоваться в качестве обычных идентификаторов. Зарезервированные слова JavaScript резервирует ряд идентификаторов, которые играют роль ключевых слов самого языка. Эти ключевые слова не могут служить идентификаторами в программах: break delete function return typeof case do if switch var catch else in this void continue false instanceof throw while debugger finally new true with default for null try Необязательные точки с запятой Как и в других языках программирования, для отделения инструкций друг от друга в языке JavaScript используется точка с запятой (;). Использование точек с запятой имеет важное значение для ясного выражения намерений программиста: без этого разделителя по ошибке можно принять конец одной инструкции за начало следующей и наоборот. Обычно в JavaScript точку с запятой между инструкциями можно не ставить, если они находятся в разных строках. (Точку с запятой можно также опустить в конце программы или если следующей лексемой в программе является закрывающая фигурная скобка }.) a=3 b = 4; Однако если эти инструкции записать, как показано ниже, первая точка с запя- той становится обязательной: a = 3; b = 4; JavaScript не все разрывы строк интерпретируются как точка с запятой: разрывы строк обычно интерпретируются как точки с запятой, только когда интерпретатор оказывается неспособен выполнить синтаксический анализ программного кода без точек с запятой (с двумя исключениями, описываемыми ниже) Первое исключение связано с инструкциями return, break и continue. Эти инструкции часто используются отдельно, но иногда вслед за ними указываются идентификаторы или выражения. Если разрыв строки находится сразу за любым из этих слов (перед любой другой лексемой), JavaScript всегда будет интерпретировать этот разрыв строки как точку с запятой. Второе исключение связано с операторами ++ и -- . Эти операторы могут быть префиксными, т.е. располагаться перед выражением, и постфиксными, т.е. располагаться после выражения. Если вам потребуется использовать любой из этих операторов в постфиксной форме записи, он должен находиться в той же строке, что и выражение, к которому применяется этот оператор. В противном случае разрыв строки будет интерпретироваться как точка с запятой, а оператор ++ или -- будет интерпретироваться как префиксный оператор, применяемый к выражению, следующему далее. Например, взгляните на следующий фрагмент: x ++ Y Он будет интерпретирован как x; ++y;, а не как x++; y. Диалоги Объект Window обладает тремя методами для отображения простейших диалогов. Метод alert() выводит сообщение и ожидает, пока пользователь закроет диалого- вое окно. Метод confirm() предлагает пользователю щелкнуть на кнопке OK или Cancel (Отмена) и возвращает логическое значение. Метод prompt() выводит сообще- ние, ждет ввода строки пользователем и возвращает эту строку. Единственный вариант, когда имеет смысл обращаться к этим мето- дам, – это отладка. JavaScript-программисты часто вставляют вызов метода alert() в программный код, пытаясь диагностировать возникшие проблемы. В современных броузерах имеется простой переносимый API консоли. Для вывода текста в консоль можно использовать функцию console.log(). Зачас- тую такая возможность оказывается удивительно полезной при отладке, и некоторые примеры из этой книги (даже в разделе, посвященном базово- му языку) используют console.log() для вывода простого текста. Похожий, но более навязчивый способ вывода информации или отладочных сообще- ний заключается в передаче строки текста функции alert(), которая ото- бражает его в окне модального диалога.
