- •Лекции по 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
- •Создание иерархии
- •Свойства объекта
- •Наследование свойств
- •Добавление свойств
- •Более гибкие конструкторы
- •И снова о наследовании свойств
- •Локальные и наследуемые значения
- •Определение взаимоотношений экземпляров
- •Глобальная информация в конструкторах
- •Нет множественного наследования
Пример передачи функции по ссылке
Функцию легко можно передавать в качестве аргумента другой функции. Например, map берет функцию func, применяет ее к каждому элементу массива arr и возвращает получившийся массив:
var map = function(func, arr) {
var result = [ ]
for(var i=0; i<arr.length; i++) {
result[i] = func(arr[i])
}
return result
}
Пример использования:
Можно создать анонимную функцию непосредственно в вызове map:
// анонимная функция утраивает числа
map( function (a) { return a*3 } , [1,2,3]) // = [3,6,9]
Сворачивание параметров в объект
Бывают функции, аргументы которых сильно варьируются. Например:
// можно указать только часть аргументов
// не указанные - вычисляются или берутся по умолчанию
function resize(toWidth, toHeight, saveProportions, animate) {
// значения по умолчанию
saveProportions = saveProportions || true
animate = animate || true
toHeight = toHeight || ...
}
Вызов с необязательными параметрами приходится делать так:
resize(100, null, null, true)
Чтобы избежать лишних null и сделать код более понятным, используют нечто вроде "keyword arguments", существующих в Python и Ruby. Для этого много параметров пакуют в единый объект:
function resize(setup) {
// значения по умолчанию
var saveProportions = setup.saveProportions || true
var animate = setup.animate || true
var toHeight = setup.toHeight || ...
}
Вызов теперь делается гораздо проще:
var setup = {toWidth: 100, animate: true}
resize(setup)
// или
resize({toWidth: 100, animate: true})
Так - куда понятнее. А если параметров больше 5, то вообще - единственный нормальный способ.
Кроме того, с объектом можно удобнее делать последовательности вызовов вроде:
var setup = {toWidth: 100, animate: true, saveProportions: false}
resize(setup)
setup.toWidth = 200
resize(setup)
Функции в Javascript - это вторая по важности (после объектов) конструкция в Javascript. Например, если нужно при наведении мыши на кнопку создать выпадающее меню или плавно развернуть вкладку - это всё делается с помощью функций.
Рассмотрим синтаксис функции:
<script type="text/javascript">
function имя функции (аргумент1,аргумент2...)
{
команды, которые должна исполнить функция;
return (переменные или другие объекты, которые должна возвратить функция.
Если таковых нет - return не пишем.);
}
</script>
Для вызова функции непосредственно в самом скрипте достаточно написать её имя и, если нужно, - её параметры, например, напишем и применим функцию, которая будет суммировать две переменные:
<script type="text/javascript"> var sa = 100;
var sha = 1;
function summa (a,b)
{
var sum = a + b;
return (sum);
}
document.write(summa(sa,sha));/*это упрощенная запись, если не
понятно - вот неупрощенный код*/
var result = summa(sa,sha);
document.write(result);
</script>
Итак, - мы знаем как создать и применить в скрипте функции. Давайте научимся вызывать их с помощью кнопки на страничке. Для этого достаточно у параметра href вместо адреса прописать такой код:
javascript:имя функции(/*и если нужно - то здесь можно прописать и её параметры*/);
Давайте таким способом доделаем записанный ранее скрипт, чтобы вызывать функцию summ с помощью кнопки. Для этого нужно сверстать такой код:
<html>
<head>
<title>Сумма</title>
<script type="text/javascript">
var sa = 100;
var sha = 1;
function summa (a,b)
{
var sum = a + b;
return(sum);
}
function wivodNaDispley()
{
document.write(summa(sa,sha));
}
</script>
</head>
<body>
<h3 align="center"><a href="javascript:wivodNaDispley();">Вычислить</a></h3>
</body>
</html>