|
Добрый день. Я сейчас прохожу курс повышения квалификации - "Профессиональное веб-программирование". Мне нужно получить диплом по этому курсу. Я так полагаю нужно его оплатить чтобы получить диплом о повышении квалификации. Как мне оплатить этот курс?
|
Инспектор
Вы можете этот курс.
Опубликован: 04.07.2012 | Уровень: специалист | Доступ: платный
Самостоятельная работа 2: Введение в JavaScript. Программное взаимодействие с HTML документами на основе DOM API. Использование регулярных выражений. Отладка и профилирование JavaScript сценариев в IE9.
2. Диалоговые элементы
В JavaScript поддерживается работа со следующими диалоговыми элементами интерфейса:
-
Alert. Применяется для уведомления пользователя, работающего с веб-браузером.
Синтаксис:
alert("сообщение"); -
Confirm. Применяется для выбора пользователем одного из двух вариантов ответа "Да/Нет". Соответственно Confirm возвращает значение true/false.
Синтаксис:
confirm("вопрос"); - Prompt. Применяется для ввода пользователем значения. При нажатии "OK" возвращается введенное значение, в случае "Cancel" возвращается значение null.
Синтаксис:
prompt("вопрос/запрос","значение по умолчанию");
Ниже приводится код веб-страницы, в которой пользователь имеет возможность выбрать цвет текста с помощью диалогового элемента
Пример 2
<html>
<body>
// здесь будет отображаться текст
<div id="c" style="color:blue">Вы выбрали цвет текста: черный</div>
<script language="JavaScript">
// пользователь выбирает цвет текста
var tcolor = prompt("Выберите цвет текста: red, blue, green, yellow, black","black");
// задается текст
document.getElementById("c").innerHTML = "Вы выбрали цвет текста: " + tcolor;
// задается цвет текста
document.getElementById("c").style.color = tcolor;
</script>
</body>
</html>
3. Обработка событий в JavaScript
Популярность JavaScript во многом обусловлена именно тем, что написанный на нем сценарий может реагировать на действия пользователя и другие внешние события. Каждое из событий связано с тем или иным объектом: формой, гипертекстовой ссылкой или даже с окном, содержащим текущий документ.
В качестве примеров внешних событий, на которые могут реагировать объекты JavaScript, можно привести следующие.
- окончание загрузки документа в окно (или окончание загрузки документов во все фреймы окна). Это событие связано с объектом window;
- щелчок мышью на объекте. Это событие может быть связано с интерактивным элементом формы или с гипертекстовой ссылкой;
- получение объектом фокуса ввода. Это событие может быть связано с объектами типа Text, Password и с другими интерактивными элементами;
- передача на сервер данных, введенных пользователем с помощью интерактивных элементов. Связывается с формой.
Обработка события производится с помощью специально предназначенного для этого фрагмента кода, называемого обработчиком события. Для каждого события JavaScript предоставляет свой обработчик. Однако при построении сценария можно создавать собственный обработчик события и использовать его вместо обработчика, заданного по умолчанию.
Имя обработчика определяет, какое событие он должен обрабатывать. Так, для того чтобы сценарий нужным образом отреагировал на щелчок мышью, используется обработчик с именем onClick, для обработки события, заключающегося в получении фокуса ввода, - обработчик onFocus.
Для того чтобы указать интерпретатору JavaScript на то, что обработкой события должен заниматься обработчик, необходимо включить в HTML-дескриптор следующее выражение:
имя_обработчика="команды_обработчика"
Это выражение включается в тэг, описывающий объект, с которым связано событие.
Например, если необходимо обработать событие, заключающееся в получении фокуса полем ввода, дескриптор, описывающий этот интерактивный элемент, должен иметь примерно следующий вид:
<input type="text" name="Inform" onFocus="handleFocus();">
Имя обработчика является одним из атрибутов HTML-дескриптора, а команды, предназначенные для обработки события, выступают в роли значения этого атрибута. В данном случае обработка события производится в теле функции handleFocus(). В принципе, обработчиком может быть не только функция, но и любая последовательность команд JavaScript в виде составного оператора.
Следующий пример демонстрирует обработку события, связанного с наведением курсора мыши на гиперссылку:
<a href = "http://www.myhp.edu"
onmouseover="alert('An onMouseOver event'); return false">
<img src="my.gif" width="50" height="50">
</a>
Ниже приводится полный текст HTML документа c JavaScript сценарием, в котором обрабатывается событие нажатия кнопки мыши в области содержимого документа, и определяется, какая именно из них была нажата:
Пример 3.
<html>
<head>
<script language = "javascript">
function whichButton(event)
{
if (event.button == 2)
{
alert("Вы щелкнули правой кнопкой мыши!");
}
else
{
alert("Вы щелкнули левой кнопкой мыши!");
}
}
</script>
</head>
<body onmousedown="whichButton(event)">
<p>Щелкните любой кнопкой мыши в любом месте документа</p>
</body>
</html>
Таким образом, для того чтобы обработать какое-либо стандартное событие в браузере, необходимо добавить в подходящий HTML тэг атрибут, соответствующий этому событию, указав в качестве значения атрибута имя JavaScript функции. Список атрибутов, которые определены для HTML тэгов приводится ниже:
IE: Internet Explorer, F: Firefox, O: Opera, W3C: стандарт
| Атрибут | Описание | Номер версии браузера | W3C | ||
|---|---|---|---|---|---|
| IE | F | O | |||
| onabort | Прерванная загрузка изображения | 4 | 1 | 9 | Да |
| onblur | утрата фокуса элементом | 3 | 1 | 9 | Да |
| onchange | Изменение содержимого в поле ввода | 3 | 1 | 9 | Да |
| onclick | Щелчок мыши на объекте | 3 | 1 | 9 | Да |
| ondblclick | Двойной щелчок мыши на объекте | 4 | 1 | 9 | Да |
| onerror | Ошибка при загрузке изображения или документа | 4 | 1 | 9 | Да |
| onfocus | Получение фокуса элементом | 3 | 1 | 9 | Да |
| onkeydown | Нажатие клавиши | 3 | 1 | Нет | Да |
| onkeypress | Клавиша нажата | 3 | 1 | 9 | Да |
| onkeyup | Отжатие клавиши | 3 | 1 | 9 | Да |
| onload | Завершение загрузки страницы или изображения | 3 | 1 | 9 | Да |
| onmousedown | Нажатие кнопки мыши | 4 | 1 | 9 | Да |
| onmousemove | Перемещение курсора мыши | 3 | 1 | 9 | Да |
| onmouseout | Смещение курсора мыши с объекта | 4 | 1 | 9 | Да |
| onmouseover | Наведение курсора мыши на объект | 3 | 1 | 9 | Да |
| onmouseup | Отжатие кнопки мыши | 4 | 1 | 9 | Да |
| onreset | Кнопка "Reset" нажата | 4 | 1 | 9 | Да |
| onresize | Изменение размера окна | 4 | 1 | 9 | Да |
| onselect | Выделение текста | 3 | 1 | 9 | Да |
| onsubmit | Кнопка "Submit" нажата | 3 | 1 | 9 | Да |
| onunload | Уход с веб-страницы | 3 | 1 | 9 | Да |
4. Использование регулярных выражений в JavaScript
При поиске по тексту можно использовать шаблон, описывающий подстроку. В JavaScript такой шаблон может быть описан с помощью объекта RegExp. В простейшем случае такой шаблон описывает отдельный символ, однако имеет смысл его использовать для регулярных выражений.
Следующий ниже код описывает RegExp объект с именем pttn, содержащий регулярное выражение, описывающее целое десятичное число:
var pattn = new RegExp("/[0-9]+/");
Объект RegExp имеет 3 встроенных метода: test(), exec() и compile().
- Метод test() выполняет поиск по шаблону:
var pattn = new RegExp("[0-9]+"); document.write(pattn.test("38 попугаев"));Результат:
true
- Метод exec() выполняет поиск подстроки по шаблону и возвращает найденные соответствия; если соответствий нет, возвращается значение null:
var pattn=new RegExp("[0-9]+"); document.write(pattn.exec("38 попугаев"));Результат:
38
Если необходимо найти все соответствия, то при вызове конструктора RegExp следует указать дополнительный параметр "g", указывающий на необходимость глобального поиска.
Пример 8
var pattn = new RegExp("[0-9]+", "g"); do { result = pattn.exec("1 попугай, 2 попугая,…, 38 попугаев"); document.write(" " + result); } while (result != null)Результат:
1 2 38 null
- Метод compile() применяется для изменения ранее созданного шаблона.
Пример 4
var pattn = new RegExp("[0-5]+"); document.write(pattn.exec("38 попугаев")); pattn.compile("[6-9]+"); document.write(";" + pattn.exec("38 попугаев"));Результат:
3;8
Сергей Крупко
Галина Башкирова
|
Здравствуйте, недавно закончила курс по проф веб программиованию, мне прислали методические указания с примерами тем, однако темы там для специальности Системный администратор информационно-коммуникационных» систем.
|