JavaScript Лекция 8. JavaScript JavaScript - новый язык для составления скриптов, разработанный фирмой Netscape. С помощью JavaScript можно легко создавать. - презентация

1 JavaScript Лекция 8

2 JavaScript JavaScript - новый язык для составления скриптов, разработанный фирмой Netscape. С помощью JavaScript можно легко создавать интерактивные Web-страницы. JavaScript - новый язык для составления скриптов, разработанный фирмой Netscape. С помощью JavaScript можно легко создавать интерактивные Web-страницы.

3 Размещение JavaScript на HTML- странице Код скрипта JavaScript размещается непосредственно на HTML- странице. Чтобы увидеть, как делается, давайте рассмотрим следующий простой пример: Код скрипта JavaScript размещается непосредственно на HTML- странице. Чтобы увидеть, как делается, давайте рассмотрим следующий простой пример: Это обычный HTML документ. Это обычный HTML документ. document.write("А это JavaScript!") document.write("А это JavaScript!") Вновь документ HTML. Вновь документ HTML.

4 События События и обработчики событий являются очень важной частью для программирования на языке JavaScript. События и обработчики событий являются очень важной частью для программирования на языке JavaScript. События, главным образом, инициируются теми или иными действиями пользователя. Если он щелкает по некоторой кнопке, происходит событие "Click". Если указатель мыши пересекает какую-либо ссылку гипертекста - происходит событие MouseOver. Существует несколько различных типов событий. События, главным образом, инициируются теми или иными действиями пользователя. Если он щелкает по некоторой кнопке, происходит событие "Click". Если указатель мыши пересекает какую-либо ссылку гипертекста - происходит событие MouseOver. Существует несколько различных типов событий. Можно заставить JavaScript-программу реагировать на некоторые из них. И это может быть выполнено с помощью специальных программ обработки событий. Можно заставить JavaScript-программу реагировать на некоторые из них. И это может быть выполнено с помощью специальных программ обработки событий.

5 onChange onChange (Обработчик события) Событие происходит в тот момент, когда значение элемента формы select, text или textarea изменилось и элемент потерял фокус. onChange (Обработчик события) Событие происходит в тот момент, когда значение элемента формы select, text или textarea изменилось и элемент потерял фокус. Применение: Этот обработчик особенно полезен для проверки корректности ввода данных пользователем. Применение: Этот обработчик особенно полезен для проверки корректности ввода данных пользователем.

6 onClick onClick (Обработчик события) Вызывается после щелчка левой кнопкой мыши на объекте. onClick (Обработчик события) Вызывается после щелчка левой кнопкой мыши на объекте.

7 onLoad onLoad (Обработчик события) Вызывается, когда загрузка документа в окно или в кадр закончена. onLoad (Обработчик события) Вызывается, когда загрузка документа в окно или в кадр закончена.

8 onMouseOver onMouseOver (Обработчик события) Событие происходит, когда указатель мыши помещается над гиперссылкой. onMouseOver (Обработчик события) Событие происходит, когда указатель мыши помещается над гиперссылкой.

9 onSubmit onSubmit (Обработчик события) Событие происходит в момент щелчка мышью на кнопке Submit для посылки данных формы на сервер. onSubmit (Обработчик события) Событие происходит в момент щелчка мышью на кнопке Submit для посылки данных формы на сервер.

10 onUnload onUnload(Обработчик события) Вызывается, когда пользователь выходит из документа. onUnload(Обработчик события) Вызывается, когда пользователь выходит из документа.

11 Функции В большинстве программ на языке JavaScript используются функции. В большинстве программ на языке JavaScript используются функции. В большинстве случаев функции представляют собой лишь способ связать вместе нескольких команд. В большинстве случаев функции представляют собой лишь способ связать вместе нескольких команд.

12 Описание функции В этом скрипте мы определили некую функцию, состоящую из следующих строк: В этом скрипте мы определили некую функцию, состоящую из следующих строк: function myFunction() function myFunction() { document.write("Добро пожаловать на мою страницу! "); document.write("Добро пожаловать на мою страницу! "); document.write("Это JavaScript! "); document.write("Это JavaScript! "); } Все команды скрипта, что находятся внутри фигурных скобок - {} - принадлежат функции myFunction (). Это означает, что обе команды document.write() теперь связаны воедино и могут быть выполнены при вызове указанной функции. Все команды скрипта, что находятся внутри фигурных скобок - {} - принадлежат функции myFunction (). Это означает, что обе команды document.write() теперь связаны воедино и могут быть выполнены при вызове указанной функции. Функции могут также использоваться в совместно с процедурами обработки событий. Рассмотрим следующий пример: Функции могут также использоваться в совместно с процедурами обработки событий. Рассмотрим следующий пример:

13 Описание функции // --> Здесь при нажатии на кнопку осуществляется вызов функции calculation(). Как можно заметить, эта функция выполняет некие вычисления, пользуясь переменными x, y и result. Переменную можно определить с помощью ключевого слова var. Переменные могут использоваться для хранения различных величин - чисел, строк текста и т.д. Так строка скрипта var result= x + y; сообщает браузеру о том, что необходимо создать переменную result и поместить туда результат выполнения арифметической операции x + y (т.е ). После этого в переменный result будет размещено число 17. В данном случае команда alert(result) выполняет то же самое, что и alert(17). Иными словами, мы получаем выпадающее окно, в котором написано число 17. Здесь при нажатии на кнопку осуществляется вызов функции calculation(). Как можно заметить, эта функция выполняет некие вычисления, пользуясь переменными x, y и result. Переменную можно определить с помощью ключевого слова var. Переменные могут использоваться для хранения различных величин - чисел, строк текста и т.д. Так строка скрипта var result= x + y; сообщает браузеру о том, что необходимо создать переменную result и поместить туда результат выполнения арифметической операции x + y (т.е ). После этого в переменный result будет размещено число 17. В данном случае команда alert(result) выполняет то же самое, что и alert(17). Иными словами, мы получаем выпадающее окно, в котором написано число 17.

14 Методы Имеется возможность управлять самим процессом создания окна. Например, Вы можете указать, должно ли новое окно иметь строку статуса, панель инструментов или меню. Имеется возможность управлять самим процессом создания окна. Например, Вы можете указать, должно ли новое окно иметь строку статуса, панель инструментов или меню.

15 Alert alert (Метод) Выводит на экран диалоговое окно JavaScript Alert с кнопкой ОК и определенным программистом сообщением. alert (Метод) Выводит на экран диалоговое окно JavaScript Alert с кнопкой ОК и определенным программистом сообщением.

16 Back back (Метод) Вызывает переход к предыдущему URL из списка просмотренных в текущей сессии работы с браузером документов. back (Метод) Вызывает переход к предыдущему URL из списка просмотренных в текущей сессии работы с браузером документов.

17 Big big (Метод) Форматирует строковый объект более крупным шрифтом. big (Метод) Форматирует строковый объект более крупным шрифтом.

18 Click click (Метод) Эмулирует щелчок на объекте левой кнопкой мыши. click (Метод) Эмулирует щелчок на объекте левой кнопкой мыши.

19 Close close (Метод) Для объекта document закрывает текущий поток вывода и показывает содержимое документа на экране. close (Метод) Для объекта document закрывает текущий поток вывода и показывает содержимое документа на экране. Для объекта window закрывает текущее окно. document.close(); window.close(); Для объекта window закрывает текущее окно. document.close(); window.close();

20 Confirm confirm (Метод) Выводит диалоговое окно JavaScript Confirm. window.confirm(); confirm (Метод) Выводит диалоговое окно JavaScript Confirm. window.confirm();

21 Go go (Метод) Загружает документ из списка страниц, посещенных за текущий сеанс работы браузера. go (Метод) Загружает документ из списка страниц, посещенных за текущий сеанс работы браузера.

22 Open open (Метод) Создает новый документ или экземпляр окна. document.open("index.htm", "demo", "width=400,height=300,status=no,toolbar=no, menubar=no" ) open (Метод) Создает новый документ или экземпляр окна. document.open("index.htm", "demo", "width=400,height=300,status=no,toolbar=no, menubar=no" )

23 Объекты history (Объект) Список ранее просмотренных страниц, аналогично пункту меню Go браузера. history (Объект) Список ранее просмотренных страниц, аналогично пункту меню Go браузера.

24 Location location (Объект) Полная информация об URL текущего документа. Применение: Объект location используется для определения URL любого активного документа, включая документы в других окнах или в кадрах навигатора. location (Объект) Полная информация об URL текущего документа. Применение: Объект location используется для определения URL любого активного документа, включая документы в других окнах или в кадрах навигатора.

25 String string (Объект) Последовательность символов, ограниченная одинарными или двойными кавычками. stringName string (Объект) Последовательность символов, ограниченная одинарными или двойными кавычками. stringName

26 Window window (Объект) Наивысший объект в иерархии JavaScript, представляющий собой открытое окно браузера. window (Объект) Наивысший объект в иерархии JavaScript, представляющий собой открытое окно браузера.

27 Свойства href (Свойство) Возвращает строку, содержащую полный URL текущего документа. href (Свойство) Возвращает строку, содержащую полный URL текущего документа.

28 Name name (Свойство) Возвращает строку со значением атрибута name объекта. name (Свойство) Возвращает строку со значением атрибута name объекта.