- •Лекции по JavaScript Что такое javascript?
- •Среда разработки программ JavaScript
- •Что умеет javascript?
- •Переменные
- •Типы переменных
- •Массивы Создание
- •Аргументы
- •Описание, примеры
- •Методы объекта Array
- •Многомерные массивы
- •Объект Boolean
- •Объект Number
- •Объект Math
- •Объект String
- •Основы работы со строками
- •Использование кавычек
- •Встроенные функции
- •Строки и числа
- •Преобразование «Число → строка»
- •Преобразование «Строка → число»
- •Объект Date
- •Объект Global
- •Операторы и операции Операторы Javascript
- •Оператор break
- •Оператор comment
- •Оператор continue
- •Перебор свойств, кроме унаследованных
- •Оператор function
- •Оператор if...Else
- •Оператор return
- •Оператор var
- •Оператор while
- •Оператор with
- •Логические операторы
- •Операции сравнения
- •Арифметические операции
- •Битовые операции
- •Логические операции
- •Строковые операции
- •Операции присваивания
- •Прочие операции Условная операция
- •Операция запятая
- •Операция delete
- •Операция in
- •0 In langs // возвращает true
- •4 In langs // возвращает false Операция instanceof
- •Операция new
- •Операция this
- •Операция typeof
- •Операция void
- •Порядок выполнения операций
- •Функции
- •Функции - объекты
- •Области видимости
- •Параметры функции
- •Работа с неопределенным числом параметров
- •Пример передачи функции по ссылке
- •Пример использования:
- •Сворачивание параметров в объект
- •Объекты, свойства и методы Основные понятия
- •Объект JavaScript
- •Создание объектов с помощью инициализатора
- •Создание объектов с помощью конструктора
- •Создание методов
- •Изменение прототипа объекта
- •Удаление объектов
- •Вывод информации в строку состояния
- •Объект location
- •Проигрывание wav-файлов
- •Плавное изменение цвета фона документа html
- •Объект window.
- •Динамическое изменение страницы
- •Прокручивание документа
- •Параметры
- •Закрывающий тег
- •Аргументы
- •Значение по умолчанию
- •Параметр alt Описание
- •Значение по умолчанию
- •Параметр value Описание
- •Синтаксис
- •Параметры
- •Закрывающий тег
- •События
- •Когда использовать
- •Через свойство объекта
- •Основные события javascript
- •If (условие)
- •Способы открытия нового окна с помощью js
- •Модальное окно
- •X: 1, // добавляем свойство
- •Установка веб-сервера Apache и средств программирования под Windows
- •Что такое хостинг и где взять место под страницу.
- •Объектная Модель. Детали.
- •Языки на базе классов и языки на базе прототипов
- •Определение класса
- •Подклассы и наследование
- •Добавление и удаление свойств
- •Отличия. Резюме.
- •Пример Employee
- •Создание иерархии
- •Свойства объекта
- •Наследование свойств
- •Добавление свойств
- •Более гибкие конструкторы
- •И снова о наследовании свойств
- •Локальные и наследуемые значения
- •Определение взаимоотношений экземпляров
- •Глобальная информация в конструкторах
- •Нет множественного наследования
Модальное окно
В HTML-документе допустимо создание модального окна для просмотра, т.е. такого окна, которое будет активным до тех пор, пока пользователь не закроет. Подобные окна часто применяются для создания пользовательских окон ввода информации или окна About. Модальное окно открывается
методом showModalDialog() объекта window.
Синтаксис:
showModalDialog (sURL [, vArguments [, sFeatures]])
sURL — URL документа, загружаемого в модальное окно;
vArguments — передает в диалоговое окно произвольный набор параметров. Непосредственная передача данных производится метод diaiogArguments объекта window. Возврат значений из диалогового окна в документ реализуется свойством returnvalue объекта window.
sFeatures — параметры, задающие внешний вид окна; допустимые значения:
dialogWidth: number — ширина окна;
dialogHeight: number — высота окна;
diaiogTop: number — ордината верхнего левого угла окна;
diaiogLeft: number — абсцисса верхнего левого угла окна;
center: { yes | no | 1 | 0 } — расположение окна по центру экрана.
Пример:
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; Charset=UTF-8">
<script type="text/javascript" src="jquery.js"></script>
</head>
<body>
<script>
window.showModalDialog ("script1.html","dialogHeight:100; dialogWidth:200; center:no");
</script>
</body>
</html>
Не все браузеры хорошо работают с модальными окнами.
Для начала немного про ООП
В JavaScript’е объект можно создать двумя способами. Первый способ создание функции. В JavaScript объектом является любая функция:
function Obj() { // объекты принято называть с большой буквы this.x = 1;
this.y = 2
Ключевое слово this является ссылкой на объект Obj, this.x и this.y – это его свойства Obj, т.е., говоря просто, это локальные переменные которые действуют только внутри объекта Obj. Так же у объекта есть методы. Метод – это функция внутри объекта. Работает она тоже только внутри него. У каждого объекта в JavaScript есть свойство prototype, при помощи которого можно добавлять новые методы объекту:
function Obj(x, y) { // объявляем объект
this.x = x; // добавляем свойство X равное параметру x, переданному в функцию
this.y = y; // добавляем свойство Y равное параметру y, переданному в функцию
}
Obj.prototype.method = function() { // добавляем метод
return this.x + this.y; // который будет возвращать сумму двух свойств
}
Мы создали наш объект и добавили ему свойства и метод, теперь осталось только создать его и начать использовать. Объект создается при помощи ключевого слова new, и может быть присвоен переменной или использоваться сразу:
//можно так
var o = new Obj(4, 5);
alert(o.method()); // доступ к свойствам и методам происходит через точку
// а можно так
alert(new Obj(7, 8).method());
Неудобство такого подхода в создании объектов заключается в том, что в данном случае объект надо обязательно инициализировать при помощи ключевого слова new. Тут на помощь приходит второй способ создания объекта, а именно объектный литерал:
var Obj = {} // а вот, собственно, и он
Внутри объектного литерала свойства и методы записываются парами
свойство: значение (имя_метода: функция)
и отделяются запятыми. Похоже на ассоциативный массив ключ=>значение.
var Obj = { // создаем объект