МИРОВЫЕ ИНФОРМАЦИОННЫЕ РЕСУРСЫ Основы языка JavaScript. - презентация

1 МИРОВЫЕ ИНФОРМАЦИОННЫЕ РЕСУРСЫ Основы языка JavaScript

2 Полезные ссылки Учебники JavaScript: php php

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

4 Методы "окружают" свойства объекта, не позволяя напрямую обращаться к ним или менять их значения. Говорят, что свойства заключены в "капсулу", инкапсулированы в объект. Доступ к ним предоставляют методы объекта, которые решают, можно ли изменять значения свойств, или можно получить только значение некоторого свойства, установленного разработчиком программного объекта.

5 Схематическое представление программного объекта

6 Технология работа приложения с графическим интерфейсом реализуется с помощью концепции события, которое представляет собой действие пользователя (н-р, нажатие кнопки) или сообщение, генерируемое ОС (н-р, открылось закрытое окном другого приложения окно нашего приложения). В OOT любое событие представляется объектом, обратившись к свойствам которого можно получить некоторые параметры сгенерированного события.

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

8 Чтобы указать, метод какого объекта вызывается, перед именем метода указывается имя объекта, отделенного точкой. Например, если необходимо вызвать метод рост объекта липа, это можно сделать с помощью следующего оператора: липа.рост (...) где в скобках задаются необходимые для выполнения метода параметры.

9 Объектные модели языков сценариев тесно связаны с тегами HTML. При загрузке страницы HTML в браузер интерпретатор языка создает объекты со свойствами, определяемыми значениями параметров тегов страницы. Говорят, что браузер отражает HTML- страницу в свойствах объектов. Созданные объекты существуют в виде иерархической структуры, отражающей структуру самой HTML-страницы.

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

11

12 window- глобальный объект, связанный с окном браузера или с фреймом, в который загружен документ. document- представляет собой непосредственно страницу. location- позволяет получать различную информацию об адресе, с которого загружена страница. history- ведет хронологию (историю) посещения страниц. Позволяет перемещаться по ним в любом направлении (назад или вперед).

13 Объектная модель документа не является частью языка JavaScript. Строго говоря, DOM (Document Object Model) – это интерфейс прикладного программирования для представления документа (н-р, документа HTML, а также иных) и обеспечения доступа к его элементам и интерактивного изменения их свойств. Кроме того, DOM предоставляет механизмы для изменения самой структуры документа (добавление и удаление элементов, изменение их содержимого). Однако все версии языка JavaScript в той или иной степени поддерживают объектную модель документа.

14

15 Поскольку объект window самый верхний в иерархии DOM-модели, в точечной нотации при обращении к подчиненным объектам можно не указывать window. В частности при обращении к элементам страницы можно использовать точечную нотацию, начиная сразу с объекта document.

16 Документ представляет собой коллекцию всех элементов страницы, имеющую название all. Ее можно проиндексировать с помощью атрибутов name и id.

17 Как правило, скрипты вставляются непосредственно в тело HTML-документа при помощи тега.... Браузер анализирует содержимое, находящееся между этими тегами и для исполнения сценария приводит в действие тот или иной интерпретатор. Для устранения возможных разночтений и коллизий есть возможность указывать язык и его версию непосредственно в теле тега скрипта:....

18 Альтернативным вариантом является размещение скриптов в отдельных файлах. Этот подход наиболее приемлем при использовании скриптов довольно большого объема, а также для хранения служебных процедур.

19 Если скрипт хранится в файле с именем file1.js, то включить его в код страницы можно следующим способом: В этом случае между тегами описания скрипта ничего вставлять не нужно необходимый код находится в файле.

20 Если браузер пользователя не имеет средств работы со скриптами, то полезно использовать тег... для вывода соответствующего этому случаю варианта содержимого страницы.

21 Для написания кода программ на JavaScript используется стандартный набор латинских символов. В строковых выражениях могут использоваться символы национальных алфавитов. Применяются также специальные символы, такие как \n новая строка, \t табуляция, \r возврат каретки. В качестве комментария используется последовательность символов \\.

22 В названиях операторов и именах переменных заглавные и строчные буквы являются равнозначными. Переменные JavaScript могут быть объявлены в любом месте кода скрипта: var cnt; Возможно задание начального значения переменной при ее объявлении: var name = "значение";

23 Тип переменной задается, как правило, форматом ее значения. В процессе выполнения скрипта одна и та же переменная может иметь разный тип в зависимости от хранимого в ней значения. Описанная переменная name будет иметь строковый тип.

24 В некоторых случаях можно создавать типизированные переменные для порождения экземпляров того или иного класса объектов: today=new Date () ; Здесь порожден экземпляр объекта Date, позволяющего осуществлять работу с датой.

25 Изменение значений переменных происходит при помощи использования оператора присваивания =. Name1 = "Выражение"; Выражение может содержать в себе другие переменные и операции действий над ними.

26 Операции JavaScript: + сложение, сцепление строк; - вычитание; * умножение; / деление; % остаток от целочисленного деления; ++ инкремент; -- декремент; а+=b а=а+b; а-=b a=a-b;

27 & логический AND (длинный вариант); && логический AND (короткий вариант); | логический OR (длинный вариант); || логический OR (короткий вариант); ! логическое отрицание; > больше; < меньше; >> сдвиг вправо; << сдвиг влево.

28 Короткий вариант команд сравнения означает, что аргументы такой операции не будут вычисляться дальше, если в процессе вычисления аргументов результат сравнения станет известен заранее. Например (2=3) & (А) результат false; выражение А будет вычислено. (2=3) && (А) результат false; выражение А не будет вычислено.

29 Математические функции реализуются при помощи библиотеки Math: Math.sin () синус; Math.cos () косинус; Math.tan () тангенс; Math.exp() экспонента; Math.log () натуральный логарифм; Math.random () случайное число от 0 до 1.

30 Задание массивов происходит при помощи оператора Array (массивы являются объектами): mas = new Array (); Здесь задан массив mas, имеющий неопределенную размерность. mas1 = new Array (5); Массив mas1 содержит пять элементов.

31 Нумерация элементов массива начинается с нулевого, однако при инициализации в скобках указывается размерность массива, т.е. число элементов, под которые выделяется память. При этом, размерность и тип элементов массива может меняться в процессе выполнения программы, т. е. в языке JavaScript нет ошибки "Выход за границы массива". При обращении к несуществующим элементам (ранее не заданным), их содержимое будет принимать значение "undefined".

32 Можно задавать начальные значения элементов массива в процессе его объявления (тем самым задается размерность и тип элементов): mas2 = new Array ("Пушкин", "стол", "яблоко "); Это массив из трех строковых элементов.

33 Обращение к элементам массива происходит путем указания имени массива и индекса элемента. При этом указание индекса элемента большего, чем указано при объявлении массива ведет к увеличению размерности массива, а не к ошибке, как в других языках программирования: mas1[3] = 10; mas1[8] = 18; (Теперь mas1 содержит девять элементов).

34 Текущая размерность массива содержится в свойстве Length: с = mas1.length;

35 JavaScript предоставляет также несколько интересных методов работы с массивами. Так, метод reverse меняет порядок элементов массива на обратный: mas1.reverse; sort сортирует элементы массива: mas3 = mas1.sort; join объединяет элементы массива в строку, используя при этом указанный разделитель: str = mas2.join(" -> "); Строка str при этом примет следующее значение: "Пушкин -> стол -> яблоко" "); Строка str при этом примет следующее значение: "Пушкин -> стол -> яблоко"">

36 Вывод в JavaScript 1. Оператор Alert (). Аргументом может являться любое строковое выражение. Если аргумент имеет не строковый тип, то он переводится в строковый. Результатом выполнения оператора Alert является вывод на экран диалогового окна, содержимым которого является значение выражения аргумента.

37 alert("Ошибка!");

38 Вывод при помощи окна оператора Alert весьма удобно использовать для контроля значений переменных на том или ином этапе выполнения программы, т. е. при отладке. Пример. Вывод на экран с использованием окна оператора Alert mas2 = new Array ("Пушкин", "стол", "яблоко"); dd = mas2. join ("->"); alert(dd); "); alert(dd);">

39 Функция Alert () является методом объекта window, который описывает текущее окно браузера. Поэтому синтаксически более корректно вызывать эту функцию следующим образом: window.alert("Текст сообщения")

40 2. Вывод в тело документа Организуется при помощи оператора write (метод объекта document, описывающего текущий документ, загруженный в данное окно). Оператор document.writeln() отличается от оператора document.write() тем, что переносит позицию вывода на новую строку. Выражение, которое является аргументом оператора вывода, может содержать любую строковую константу, а также включать в себя различные теги HTML. При выводе подобного выражения эти теги будут интерпретироваться соответствующим образом.

41 Пример. Вывод в тело документа средствами JavaScript ; Это вывод средствами HTML document.write ("А это работает оператор Write ()"); document.writeln (" " + " Поменяем стиль шрифта "); Вот это да ! document.writeln (" Мы можем даже вставить картинку: "); document.writeln (" ");

42

43 На основе данного способа вывода в окно браузера можно построить много полезных скриптов. Рассмотрим, например, скрипт, который при загрузке страницы выводит на экран "цитату дня", выбираемую случайным образом. Варианты "цитат" будем хранятся в массиве. Поскольку для того, чтобы повторы были редки, необходимо достаточно много вариантов "цитат", поэтому объем массива будет достаточно большим, сравнимым с размером типичного HTML-документа. Поэтому объявление массива размещено в отдельном файле скрипта (hello.js). Пример. Файл hello.js var ааа = new Array(12); ааа[0]=«Никогда не знаешь, где тебе повезет."; ааа[1]="0 дна голова хорошо, а с туловищем лучше"; ааа[2]="Ка-52 это душа погибшего Т-72 "; ааа[3]="Сердце девушки проще открыть ключом от Мерседеса."; ааа[4]="0 тсутствие точки зрения некоторые объясняют широтой взглядов."; ааа[5]="Для счастья нужны двое, для полного трое."; ааа[6]="Утомительно, когда человек все время оказывается прав."; ааа[7]="Все там будем надпись на машине скорой помощи"; ааа[8]="Keyboard not found. Press F1 to continue "; aaa[9]="Bce хотят хорошо провести время, но его не проведешь."; ааа[10]="Мы стоим столько, сколько можем дать"; ааа[11]="Если хочешь быть счастливым - будь им!";

44 Теперь напишем скрипт, который случайным образом выводит цитату дня на экран Пример. Вывод приветствия на экран var i = 0; i = Math.round (Math.random ()* (aaa.length)); document.write ("Цитата дня :... " + aaa[ i ]);

45 Если цитаты дня заменить на теги вывода изображений, то можно получить интересную разновидность фотоальбома.

46 Метод Prompt объекта window. Синтаксис: d = window.prompt ("Текст сообщения", "Значение_по_умолчанию"); В результате выполнения на экране появится окно запроса, где пользователю будет выведено приглашение на ввод, содержащееся в выражении "Текст сообщения". Ввод данных в JavaScript

47 После ввода введенное значение присваивается переменной. Если пользователь не ввел ничего, то переменной будет присвоено значение выражения "Значение_по_умолчанию". Это значение будет выведено в окне запроса и подсвечено так, что, нажав кнопку ОК, пользователь введет это значение, а, нажав любую другую кнопку, может приступить к вводу своей информации. Последнее выражение является необязательным.

48 Пример. Ввод при помощи оператора Prompt var d = "Малая"; c=prompt("Введите слово", "Земля"); s =d+" " +C; alert (s) ;

49 Ввод значений булевского типа удобнее всего осуществлять при помощи оператора window.confirm, имеющего синтаксис: b = confirm ("Вопрос"); В результате выполнения такой команды на экране появится окно с заданным вопросом и двумя кнопками. В зависимости от нажатия пользователем той или иной кнопки переменная b получит либо значение true (кнопка ОК), либо false (кнопка Cancel, в русифицированной ОС Windows Отмена). Чаще всего оператор Confirm применяется в совокупности с операторами ветвления или цикла.

50 Управление потоком вычислений в JavaScript Оператор ветвления реализует выбор той или иной последовательности действий в зависимости от условия (условный оператор): if (условие) { Последовательность 1 } else { Последовательность 2 } Выражение "условие" должно быть булевского типа. Это может быть комбинация операторов отношения или результат действия оператора confirm.

51 Оператор цикла с конечным числом повторений повторяет определенную последовательность действий заданное число раз. for ("выражение", "условие", "операция") { Последовательность действий. } Здесь необходимо использование целочисленной переменной, начальным значением которой будет "выражение". Цикл будет повторяться, пока будет истинным "условие". При этом при каждой итерации цикла над переменной- счетчиком будет выполняться действие "операция". Пример вычисления суммы элементов некоторого массива: S=0; for (i=0; i<5; i++) { s+=mas[i]; }

52 Цикл while исполняет некоторую последовательность действий до тех пор, пока верно некоторое условие. Синтаксис: while ("условие") { Последовательность действий } Ввиду того, что проверка условия предшествует выполнению последовательности действий, цикл while получил название цикла с предусловием.

53 Для принудительного выхода из циклов используется команда break. Для перехода к следующей итерации цикла (досрочного исполнения последовательности действий внутри цикла) используется оператор continue.

54 Управление окнами просмотра Средства контроля за отображением страниц в JavaScript дополнены командами, позволяющими управлять как окнами браузера, так и их содержимым. Команда document. clear очищает текущее окно. Это может пригодиться при выводе данных в тело документа. Команда window.close закрывает текущее окно браузера (весьма забавно дать пользователю 30 секунд на просмотр страницы, после чего закрыть браузер). Команда Window.open (ur 1, местоположение, атрибуты) открывает Документ по адресу uri в окне или фрейме, заданном в выражении "местоположение". Параметры окна описаны в выражении "Атрибуты". Данная команда широко используется для открытия сопутствующих основному окну окон с рекламой. Команда location.href = "uri" производит переход в текущем окне на новый адрес, указанный в uri. Это весьма полезная и потому часто используемая команда. Свойство location могут иметь объекты window, а также фреймы. Это позволяет осуществлять загрузку документа в нужном окне или фрейме. Рассмотрим пример (листинг 8.8).

55 Листинг 8.8. Организация перехода Str = "Для выбора русского языка нажмите ОК \n "+ "Для выбора английского языка нажмите Отмена \n\n "+ "Choose russian language by pressing OK \n "+ "Choose russian language by pressing Cancel "; if (confitm(str)) { location.href = "rus.htm" } else { location.href = "eng.htm" }

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

57 Пользовательские функции Во всех уважающих себя языках программирования есть возможность оформлять наиболее часто повторяющиеся участки кода в виде специальных пользовательских процедур и функций, вызываемых в нужном месте основной программы. Не стал исключением и JavaScript. Пользовательские функции здесь имеют следующий синтаксис: function Name ("список аргументов") { Последовательность операторов. }

58 Для имен функций действуют такие же соглашения, как и для имен переменных. Список аргументов функции может быть пустым (те кто знаком с C++ знают, что такая ситуация встречается довольно часто). Для возврата результата функции (а функция, как известно, возвращает результат через свое имя, как косинус, например) используется оператор return. При этом происходит прекращение дальнейшего выполнения кода функции, и управление передается оператору, следующему за точкой вызова.

59 function truncate (a) { return a а % 1; } Данная функция отсекает дробную часть числа. Вызывается она таким образом:... var a = 7.3; b = Trunc( a); alert(b);...

60 Пользовательские функции могут располагаться либо в скрипте, который осуществляет их вызов, либо в другом скрипте, включенном в эту же страницу. Зачастую встречается ситуация, когда наиболее часто употребляемые пользовательские функции располагаются в отдельном файле скрипта, который подключается к нужным страницам. Применение функций весьма широко и многообразно. Пользовательские функции могут назначаться в качестве событий к различным объектам, например кнопкам. В листинге 8.9 приведен пример "скрипта убийцы", который закрывает текущее окно при нажатии кнопки. Листинг 8.9. Пользовательская функция function kill() { window.close (); } Нажмите кнопку для закрытия окна

61 Возможно назначение пользовательской процедуры в качестве события при нажатии на гиперссылку. Это позволяет выполнить некоторые подготовительные действия перед открытием гиперссылки: Данный трюк обычно применяется для одновременного открытия документов в нескольких фреймах. Пусть у нас имеется трехфреймовое окно. В одном фрейме расположено меню, а в двух других отображаются попарно документы, соответствующие ссылкам того или иного пункта меню.

62 Организовать открытие двух документов при нажатии на одну ссылку стандартными средствами невозможно. В этом случае на выручку приходит пользовательская функция: function perehod_a () ( framel.location.href="doc_al.htm" frame2.location.href="doc_a2.htm" } Справка по изделию A Весьма часто пользовательские функции используются при работе с формами.

63 Формы и JavaScript Формы являются неотъемлемой частью дизайна многих страниц. При всех своих несомненных достоинствах, они, как инструмент ввода, имеют также и ряд недостатков. Представим, что на странице имеется анкета, которую заполняет пользователь. Некоторые поля могут оказаться обязательными к заполнению, в другие поля свободного ввода должна быть введена информация из определенного, но достаточно широкого, чтобы использовать объекты select, диапазона. Как видно, остро стоит вопрос проверки корректности ввода. В HTML нет стандартных средств контроля за содержимым форм, но зато они есть в JavaScript. Каждый объект document имеет свойство document.forms, которое является массивом объектов типа form. Доступ к свойствам той или иной формы можно получить либо из этого массива (document.forms[0] первая форма документа), либо непосредственно по имени формы, которое задано в описании (document. forma_l обращение К форме С именем forma_l). Каждая форма HTML-документа также представляет собой объект. Основные свойства, методы и события этого объекта приведены в табл. 8.1.

64 Таблица 8.1. Свойства, методы и события объекта form Свойство ОписаниеElements [ ]Содержит массив элементов, используемых в формеaction Устанавливает действие, которое нужно произвести при передаче данных формы на серверtarget Содержит имя окна, в котором должен отобразиться результат заполнения формыencoding Содержит способ кодирования данных формы. Соответствует атрибуту ENCTYPE элемента FORMmethod Определяет способ передачи данных формы на сервер МетодОписаниеsubmit ( )Отправляет форму на сервер СобытиеОписаниеonSubmit Генерируется при передаче формы

65 Элементы ввода в форме также являются объектами. Информация о них хранится в массиве elements [] объекта форм. В то же время, возможно получать доступ к свойствам полей непосредственно при помощи указания их имен (forma_l.edit_l обращение к полюedit_l формы forma_l). Рассмотрим также основные свойства объекта element, приведенные в табл. 8.2.

66 Таблица 8.2. Свойства, методы и события объекта element Свойство Описаниеchecked Содержит состояние элементаdefaultChecked Содержит состояние элемента по умолчаниюdefaultValue Содержит значение элемента по умолчаниюform Содержит объект формы, в которой находится элементlength Содержит количество элементов в спискеname Содержит имя элементаoptions Хранит собственно элементы спискаselectedlndex Определяет номер выбранного по умолчанию элемента спискаvalue Задает значение элемента МетодОписаниеblur()Снимает фокус вводаclick ()Имитирует щелчок мышью на элементеfocus ( )Устанавливает на элементе фокус вводаselect ()Делает элемент списка выбранным СобытиеОписаниеonBlur Генерируется при потере элементом фокуса вводаonChange Генерируется при изменении элементаonClick Генерируется при щелчке мышью на элементеonFocus Генерируется при получении элементом фокуса вводаonSelect Генерируется при выборе содержимого элемента

67 Сначала рассмотрим скрипт, который реализует эффектный способ навигации при помощи элемента ввода select (листинг 8.10). В HTML-документе объявляем форму из одного элемента select. Событию onChange этого элемента присваиваем пользовательскую функцию, которая осуществляет переход на запрашиваемую пользователем страницу. Листинг Навигация при помощи элемента select Выберите ссылку для перехода Главная Личная информация/орtion> Kapтa caйтa Поисковая система function perehod() { var linx= new Array(3); linx[0] = "index.htm"; linx[l] = "personal.htm"; linx[2] = "map.htm"; linx[3] = "poisk.htm"; index = document.formal.selectl.selectedlndex; location.href=linx[index]; }

68 Теперь рассмотрим скрипт, который проверяет правильность ввода в поля формы. Пусть у нас есть некоторая анкета, в которую надо ввести фамилию, возраст, мастерство и пользователя. Поле ввода фамилии должно быть непустым. Возраст должен лежать в пределах от 10 до 50 лет. Корректность ввода будем определять по двум очевидным критериям: наличию в содержимом поля ввода а также наличию точки. Скрипт, организующий проверку правильности ввода в такую форму, приведен в листинге 8.11.

69 Листинг Проверка правильности ввода Анкета пользователя. Часть 1. Ф.И.О : Возраст : Мастерство : Ламер Юзер Хакер Элитный хакер function usercheck() { // em пользователя. em = document.fоrma2. .value; // 1-е условие. непустое поле Ф.И.О ul=(document.fоrma2.user.value != ""); // 2-е условие возраст от 10 до 50 лет u2=((document.forma2.age.value > 10)&(document.forma2.age.value < 50)); // 3-е условие наличие в и точки u3=((em.indexOf ( !=-!)'& (em.indexOf (".") !=-!)); if ((ul)s(u2)&(u3)) // Если все три условия выполняются, то отправим форму. { document.forma2.submit; } else // Иначе выведем сообщение об ошибке { alert("Ошибка ! \n Проверьте правильность ввода !") } Метод string. indexOf ("подстрока") объекта string выдает позицию подстроки в строке string. Если подстрока не входит в строку, то выдается значение 1. 10)&(document.forma2.age.value < 50)); // 3-е условие наличие в email @ и точки u3=((em.indexOf ( "@") !=-!)'& (em.indexOf (".") !=-!)); if ((ul)s(u2)&(u3)) // Если все три условия выполняются, то отправим форму. { document.forma2.submit; } else // Иначе выведем сообщение об ошибке { alert("Ошибка ! \n Проверьте правильность ввода !") } Метод string. indexOf ("подстрока") объекта string выдает позицию подстроки в строке string. Если подстрока не входит в строку, то выдается значение 1.">