- •Лекции по 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
- •Создание иерархии
- •Свойства объекта
- •Наследование свойств
- •Добавление свойств
- •Более гибкие конструкторы
- •И снова о наследовании свойств
- •Локальные и наследуемые значения
- •Определение взаимоотношений экземпляров
- •Глобальная информация в конструкторах
- •Нет множественного наследования
Значение по умолчанию
bottom, т.е. нижняя часть
Пример
<html>
<head>
<title>Тег INPUT, параметр align</title>
</head>
<body>
<p>
<input src="send.gif" type="image" align="right"></p>
</body>
</html>
Параметр alt Описание
Параметр alt устанавливает альтернативный текст для поля с изображением. Такой текст позволяет получить текстовую информацию о рисунке при отключенной в браузере загрузке изображений. Поскольку загрузка изображений происходит после получения браузером информации о нем, то замещающий рисунок текст появляется раньше. А уже по мере загрузки текст будет сменяться изображением. Браузеры также отображают альтернативный текст в виде подсказки, появляющейся при наведении курсора мыши на изображение.
Синтаксис
<input type="image" alt="Текст">
Аргументы
Любая подходящая текстовая строка. Ее обязательно надо брать в двойные или одинарные кавычки.
Значение по умолчанию
Нет.
Пример 3. Добавление альтернативного текста
<html>
<head>
<title>Тег INPUT, параметр alt</title>
</head>
<body>
<p>
<input src="send.gif" type="image" alt="Отправить форму на сервер"> </p>
</form>
</body>
</html>
Параметр BORDER
Описание
Браузеры обрабатывают изображения, добавленные через тег <INPUT>, подобно рисункам, созданным с помощью тега <IMG>. В том числе вокруг изображения можно добавить рамку, цвет которой совпадает с цветом текста.
Синтаксис
<input type="image" border="толщина рамки">
Аргументы
Любое целое положительное число в пикселах.
Значение по умолчанию
0
Пример 4. Толщина рамки вокруг изображения
<html>
<head>
<title>Тег INPUT, параметр border</title>
</head>
<body>
<p>
<input src="send.gif" type="image" border="2">
</p> </form> </body> </html>
Параметр CHECKED
Описание
Этот параметр определяет, помечен ли заранее такой элемент формы, как флажок или переключатель. В случае использования переключателей (radiobutton), может быть отмечен только один элемент группы, для флажков (checkbox) допустимо пометить хоть все элементы.
Синтаксис
<input type="radio" checked> <input type="checkbox" checked>
Аргументы
Нет.
Значение по умолчанию
По умолчанию этот параметр выключен.
Пример 5. Использование параметра checked
<html>
<head>
<title>Тег INPUT, параметр checked</title>
</head>
<body>
<form method="post" action="/cgi-bin/handler.cgi">
<p><b>С какими операционными системамы вы знакомы?</b></p>
<p><input type="checkbox" name="option1" value="a1" checked>Windows 95/98<br>
<input type="checkbox" name="option2" value="a2">Windows 2000<br>
<input type="checkbox" name="option3" value="a3">System X<br>
<input type="checkbox" name="option4" value="a4">Linux<br>
<input type="checkbox" name="option5" value="a5">X3-DOS</p>
</form>
</body>
</html>
Результат данного примера показан ни рис. 2.
Рис. 2. Помеченный флажок в форме
Параметр DISABLED
Описание
Блокирует доступ и изменение поля формы. Оно в таком случае отображается серым и недоступным для активации пользователем. Кроме того, такое поле не может получить фокус путем нажатия на клавишу Tab, мышью или другим способом. Тем не менее, такое состояние поля можно менять с помощью скриптов.
Синтаксис
<input type="..." disabled>
Применяется
Ко всем элементам формы.
Аргументы
Нет.
Значение по умолчанию
По умолчанию этот параметр выключен.
Пример 6. Блокировка поля формы
<html>
<head>
<title>Тег INPUT, параметр disabled</title>
</head>
<body>
<form action="/cgi-bin/handler.cgi">
<p>
<input type="text" size="30" onFocus="this.form.submit.disabled=0">
</p>
<p>
<input type="submit" name="submit" value="Отправить" disabled>
</p>
</form>
</body>
</html>
Параметр MAXLENGTH
Описание
Устанавливает максимальное число символов, которое может быть введено пользователем в текстовом поле. Когда это количество достигается при наборе, дальнейший ввод становится невозможным.
Синтаксис
<input type="text" maxlength="число">
<input type="password" maxlength="число">
Аргументы
Любое целое положительное число в символах.
Значение по умолчанию
Ввод символов не ограничен.
Пример 7. Ограничение ввода количества символов
<html>
<head>
<title>Тег INPUT, параметр maxlength</title> </head>
<body>
<form action="/cgi-bin/handler.cgi">
<p>
<input type="text" size="30" maxlength="100">
</p>
<p>
<input type="submit" name="submit" value="Отправить">
</p>
</form>
</body>
</html>
Параметр NAME
Описание
Определяет уникальное имя элемента формы. Как правило, это имя используется при отправке данных на сервер или для доступа к введенным данным поля через скрипты.
Синтаксис
<input type="..." name="имя">
Применяется
Ко всем элементам формы.
Аргументы
В качестве имени используется набор символов, включая числа и буквы. JavaScript чувствителен к регистру, поэтому при обращении к элементу по имени соблюдайте ту же форму написания, что и в параметре name.
Значение по умолчанию
Нет.
Пример 8. Обращение к полю формы по имени
<html>
<head>
<title>Тег INPUT, параметр name</title>
<script type="text/javascript">
function dataField(f) {alert("Вы ввели: " + f.comment.value);
}
</script>
</head>
<body>
<form action="/cgi-bin/handler.cgi">
<p>
<b>Введите текст</b>
</p>
<p><input type="text" name="comment">
<input type="button" value="ОК" onClick="dataField(this.form)">
</p>
</form>
</body>
</html>
Результат примера показан ни рис. 3.
Рис. 3. Вывод окна JavaScript
В данном примере при нажатии на кнопку выводится окно JavaScript, в котором отображается фраза, введенная в текстовом поле.
Параметр READONLY
Описание
Когда к тегу <INPUT> добавляется параметр readonly, текстовое поле не может изменяться пользователем, в том числе вводиться новый текст или модифицироваться существующий. Кроме того, такое поле не может получить фокус путем нажатия на клавишу Tab, мышью или другим способом. Тем не менее, состояние и содержимое поля можно менять с помощью скриптов.
Синтаксис
<input type="text" readonly> <input type="password" readonly>
Аргументы
Нет.
Значение по умолчанию
По умолчанию это значение выключено.
Пример 9. Поле только для чтения
<html>
<head>
<title>Тег INPUT, параметр readonly</title>
</head>
<body>
<form action="/cgi-bin/handler.cgi">
<p>
<input type="text" name="comment" size="40" value="Введенный текст не может изменяться"
readonly>
</p>
</form>
</body>
</html>
Результат примера показан ни рис. 4.
Рис. 4. Текстовое поле только для чтения
Параметр SIZE
Описание
Ширина текстового поля, которое определяется числом символов моноширинного шрифта. Иными словами, ширина задается количеством близстоящих букв одинаковой ширины по горизонтали. Если размер шрифта изменяется с помощью стилей, ширина также соответственно меняется.
Синтаксис
<input type="text" size="ширина"> <input type="password" size="ширина">
Аргументы
Любое целое положительное число.
Значение по умолчанию
20
Параметр SRC
Описание
Адрес графического файла, который будет отображаться на веб-странице в поле с изображением. Наиболее популярны файлы в формате GIF и JPEG.
Синтаксис
<input type="image" src="URL">
Аргументы
В качестве значения принимается полный или относительный путь к файлу.
Значение по умолчанию
Нет.
Параметр TYPE
Описание
Сообщает браузеру, к какому типу относится элемент формы.
Синтаксис
<input type="button | checkbox | file | hidden | image | password | radio | reset | submit | text">
Обязательный параметр
Да
Аргументы
В табл. 2 перечислены возможные значение параметра type и получаемый вид поля формы.
Табл. 2. Значения параметра type |
||
Тип |
Описание |
Вид |
button |
Кнопка. |
|
checkbox |
Флажки. Позволяют выбрать более одного варианта из предложенных. |
Пиво Чай Кофе |
file |
Поле для ввода имени файла, который пересылается на сервер. |
|
hidden |
Скрытое поле. Оно никак не отображается на веб-странице. |
|
image |
Поле с изображением. При нажатии на рисунок данные формы отправляются на сервер. |
|
password |
Обычное текстовое поле, но отличается от него тем, что все символы показываются звездочками. Предназначено для того, чтобы никто не подглядел вводимый пароль. |
|
radio |
Переключатели. Используются, когда следует выбрать один вариант из нескольких предложенных. |
Пиво Чай Кофе |
reset |
Кнопка для возвращение данных формы в первоначальное значение. |
|
submit |
Кнопка для отправки данных формы на сервер. |
|
text |
Текстовое поле. Предназначено для ввода символов с помощью клавиатуры. |
|