ПРИМЕРЫ ИСПОЛЬЗОВАНИЯ JavaScript

Содержание

Пример 1.Три способа размещения сценария

Пример 2.Щелчком по кнопке пользователь изменяет надпись на кнопке и изображение на экране

Пример 3.Вывод в окно сообщений списка объектов HTML-документа вместе с их индексами и идентификаторами

Пример 4. Калькулятор. Функция eval

Пример 5. Xy. Использование формы и полей ввода < INPUT>

Пример 6. Подбор цвета. Использование формы и поля со списком < SELECT>

Пример 7. Реакция на события. Явный вызов функции

Пример 8. Идентификация объекта, с которым произошло событие. Вывод координат указателя мышки

Пример 9. Движение. Циклическое выполнения заданного выражения (функции)

Пример 10. Перемещение изображения мышкой

Пример 11. Временная замена текста изображением

Пример 12. Открытие нового окна

Примеры 13. Рисование (6 примеров)

Пример 14. Скрипт в отдельном файле

Пример 15. Редактирования таблицы

Пример 16. Автоматический выбор варианта HTML-документа, со скриптом, совместимым с используемым браузером

Пример 17. Прохождение события через объекты BUTTON и BODY

Пример 18. Проверка данных перед отправкой на WEB-сервер

Пример 19. Проверка данных сразу после ввода

Пример 20. Фиксированная, абсолютная, относительная и статическая позиции элемента

Пример 21. Частичное обновление страницы данными с Веб-сервера. Примеры разновидностей технологии AJAX

Пример 22. Регулярные выражения

Пример 23. Анонимные функции

Пример 24. Библиотека jQuery


Пример 1. Три способа размещения сценария:

Просмотр примера 1 в браузере

Пример 2.Щелчком по кнопке пользователь изменяет надпись на кнопке и изображение на экране
В примере используются:

Просмотр примера 2 в браузере Internet Explorer
Просмотр примера 2 в браузерах Internet Explorer и Mozilla Firefox

Пример 3.Вывод в окно сообщений списка объектов HTML-документа вместе с их индексами и идентификаторами
За основу взят пример 2. Дополнительно в примере 3 используются:

Просмотр примера 3 в браузере
 

Пример 4. Калькулятор. Функция eval

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

    a=2
    b=3*a
В нижней части окна просматриваются результаты.
В примере используются: Просмотр примера 4 в браузере

Пример 5. Xy. Использование формы и полей ввода < INPUT>

В полях для ввода пользователь задаёт X и Y. Результат возведения Х в степень y выводится ниже под полями для ввода.
В примере используются:

Просмотр примера 5 в браузере

Пример 6. Подбор цвета. Использование формы и поля со списком <SELECT>

В поле для ввода задаётся код цвета. Из поля со списком выбирается цвет. Выводятся на экран набранный код и название цвета в соответсвующей окраске
В примере используются:

Просмотр примера 6 в браузере

Пример 7. Реакция на события. Явный вызов функции

При наведении курсора мышки надпись меняет цвет. При удалении курсора цвет надписи восстанавливается.
В примере используются:

Вариант примера 7 для браузера Internet Explorer
 Вариант примера 7 для браузера Mozilla Firefox
 Вариант примера 7 для браузеров Mozilla Firefox и Internet Explorer

Пример 8. Неявный вызов функции со специальным именем. Вывод координат указателя мышки

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

Просмотр примера 8 в любом браузере

Пример 9. Движение. Циклическое выполнения заданного выражения (функции)

При щелчке мышкой по кнопке "Запустить" фотография начинает двигаться по прямой из левого верхнего угла экрана в нижний правый.
В примере используются:

Просмотр примера 9 в любом браузере

Пример 10. Перемещение изображения мышкой

Если навести курсор мышки на красный квадрат и начать двигать мышкой, то квадрат будет двигаться вслед за мышкой.
Щелчок левой кнопкой прекращает перетаскивание.

В примере для настройки процесса перетаскивания используется событие onload, происходящее при загрузке страницы.

Просмотр примера 10

Пример 11. Временная замена текста изображением

В тексте есть ссылки на графики. При щелчке мышкой по словам "на графике", эти слова заменяются графиком. При отводе мышки текст восстанавливается
В примере используется свойство innerHTML для изменения HTML-документа, включая выполняемые теги
Просмотр примера 11 в браузере

Пример 12. Открытие нового окна

Отличается от примера11 только тем, что графики открываются в новых окнах
В примере используются:

Просмотр примера 12 в браузере

Примеры 13. Рисование (6 примеров)

Идея метода, используемого в примерах 13.а и 13.б:

Просмотр примера 13.а в браузере
Просмотр примера 13.б в браузере

В примерах 13.в, 13.г, 13.д рисунки создаются с помощью SVG (от англ. Scalable Vector Graphics — масштабируемая векторная графика)
В примере 13.в используется только SVG-код.
В примере 13.г используется SVG-код, встроенный в HTML.
В примере 13.д SVG-код генерируется JavaScript-ом.
Просмотр примера 13.в в браузере
Просмотр примера 13.г в браузере
Просмотр примера 13.д в браузере

В примере 13.е демострируется использование элемента canvas языка HTML5
Просмотр примера 13.е в браузере

Пример 14. Скрипт в отдельном файле

Просмотр примера 14 в браузере

Пример 15. Редактирования таблицы

В примере используются объекты rows(номер строки), cells(номер столбца) и свойство innerHTML

Просмотр примера 15 в браузере

Пример 16. Автоматический выбор варианта HTML-документа, со скриптом, совместимым с используемым браузером

  Для просмотра примера 7 в Mozilla служит файл textColor_M.htm, а для просмотра в Internet Explorer - файл textColor_IE.htm. Для просмотра в обоих браузерах служит файл textColor_IE_M.htm, который несколько сложен для понимания. Вариант документа для браузера выбирается пользователем.
Для автоматического выбора варианта документа, предназначенного только для одного браузера, можно использовать следующий скипт :

<HTML>
<script>
if(window.navigator.appName == "Netscape") location.href='textColor_M.htm'
else location.href='textColor_IE.htm'
</script>
</html>

Рациональнее не создавать специальный файл, а проводить выбор варианта документа прямо в читаемом Вами документе index.html

Просмотр примера выполнения приведённого выше скрипта в отдельном файле

Выбор варианта документа прямо в index.html

Пример 17. Прохождение события через объекты BUTTON и BODY

Пример демонстрирует "всплывание" события при прохождении через вложенные объекты
Объект BUTTON вложен в объект BODY, поэтому щелчок по кнопке является также щелчком по телу документа. При щелчке по кажодому объекту выполняется соответствующий скрипт. Скипт, соответствующий BUTTON, вызывает следующие изменения вида документа:
  • фон документа становится жёлтым,
  • надпись на кнопке - чёрной,
  • кнопка - серой
Щелчок по телу документа меняет вид документа так:
  • фон документа становится зелёным,
  • надпись на кнопке - белой,
  • кнопка - синей
Если не заблокировать дальнейшее прохождение события, то после щелчка по кнопке сначала выполнится её скрипт, а затем скрипт тела документа.
В примере для блокировки всплытия события используется свойство cancelBubble.

Пример выполняется и в Internet Explorer и в  Mozilla

Просмотр примера 17 в браузере

Пример 18. Проверка данных перед отправкой на веб-сервер

Пример состоит из двух страниц. Первая страница служит для ввода пользователем данных и их проверки с помощью скрипта, написанного на JavaScript. Если данные введены правильно, то они отправляются на веб-сервер.
На веб-сервере полученные данные обрабатываются скриптом, написанным на PHP, формируется и пересылается на браузер пользователя новая страница.
В скрипте, написанном на JavaScript, для доступа к данным, находящимся в форме, используются имена и индексы (номера) элементов формы. Для задания адреса (URL) страницы с PHP-скриптом используетя свойство action объекта Form. Рассматриваются два варианта HTML-документа:
- только для браузера Internet Explorer;
- универсальный, правильно воспринимаемый браузерами Internet Explorer и Mozilla Firefox.
В варианте для браузера Internet Explorer отмена передачи данных из формы на веб-сервер делается оператором

event.returnValue = false
Браузеру Mozilla Firefox требуется для возврата в форму в случае ошибочных данных METHOD="GET", а в рассматриваемом примере данные на Веб-сервер передаются методом "POST". Для изменения метода используется оператор
document.F1.method="POST";
Кроме того, для Mozilla Firefox требуются:
- передача объекта event в функцию в качестве параметра,
- явное указание адреса возврата на страницу с формой.

Просмотр примера 18 в браузере Internet Explorer 6.0

Просмотр примера 18 в браузерах Internet Explorer и Mozilla

Пример 19. Проверка данных сразу после ввода

В примере заполняются три поля. данные проверяются сразу после ввода в каждое поле.

Просмотр примера 19 в браузере

Пример 20. Фиксированная, абсолютная, относительная и статическая позиции элемента

В примере описываются виды позиционирования элементов и демонстрируются способы их использования.

Просмотр примера 20 в браузере

Пример 21. Частичное обновление страницы данными с Веб-сервера. Примеры разновидностей технологии AJAX

а)Использование iframe
В примере данные из формы пересылаются на Веб-сервер, где обрабатываются скриптом на языке PHP.
Текст скрипта на PHP:

<HTML>
<HEAD><TITLE>В РНР ИЗ ФОРМЫ F_POST.html</title></head>
<BODY><H3>П Р И В Е Т С Т В И Е</h3>
<?php 
//$imja=$_POST["name"];
$imja=$_REQUEST["name"];
$age=$_REQUEST["age"];
if($age>50)
{echo "Привет! $imja. Вы - старейшина!<p>";}
 elseif($age>30)
{echo "Привет! $imja. У Вас прекрасный возраст.<p>";}
 else
{echo "Привет! $imja.У Вас всё впереди.";}
echo '<P>Вы работаете с версией PHP : ' . phpversion();
?>
</body>
</html>
В примере частичное обновление страницы достигается без применения XMLHttpRequest или ActiveXObject, обычно используемых в технологии AJAX.
Просмотр примера 21.a в браузере.

б)Использование обычной технологии Ajax
Страница Ajax_.html частично обновляется содержимым файла TestAjax.html.
Просмотр примера 21.б в браузере.

Пример 22. Регулярное выражение

а)Метод test
При регистрации поступающего в ВУЗ проверяется правильность ввода фамилии,имени, отчества. Если введены инициалы или не введены имя и отчество, то сообщается об ошибке.

Просмотр примера 22.а в браузере

б) Методы split и exec
Пользователь вводит стоимости покупок. Подсчитыватся сумма расходов.

Просмотр примера 22.б в браузере

в) Замена - метод replace
В тексте заменяется слово "Ленинград" на "Петербург"

Просмотр примера 22.в в браузере

Пример 23. Анонимные функции

В примере рассматриваются функция с именем cd и две анонимные функции, которые вызываются с помощью одной локальной переменоой ab. Функцию cd можно вызывать в любом месте тела функции an_fun(), в которой она определена, анонимные функции становятся доступными только после (ниже по тексту) их определения.

Просмотр примера 23 в браузере

Пример 24. Библиотека jQuery

а)Применение фукции $() c названием злемента в качестве параметра. В примере три элемента P. Функция захватывает злемент, на котором произошло событие click. Элемент меняет свой цвет.

Просмотр примера 24.а в браузере

б)Пример сравнения применения jQuery и CSS. Первые три строчки на экране с помощью jQuery исчезают безвозвратно при щелчке по ним мышкой. Следующие три строки с помощью CSS исчезают при наведении на них курсора мышки и восстанавливаются после снятия курсора.

Просмотр примера 24.б в браузере