Партнерка на США и Канаду по недвижимости, выплаты в крипто

  • 30% recurring commission
  • Выплаты в USDT
  • Вывод каждую неделю
  • Комиссия до 5 лет за каждого referral


МИНОБИРНАУКИ рОССИИ

Федеральное государственное бюджетное образовательное учреждение

высшего профессионального образования

«Иркутский государственный университет»

(ФГБОУ ВПО «ИГУ»)

КУРСОВАЯ РАБОТА

Проверка правильности заполнения форм и другая обработка данных форм

Студентки 2 курса очного отделения

направления «Прикладная информатика»

Осиповой Ксении

Научный руководитель: кандидат физико-математических наук, доцент

Работа защищена:

«_____»______________2015г.

с оценкой_____________

Протокол №___________

ИРКУТСК 2015

Содержание

Введение        3

Глава 1. Общая характеристика JavaScript        4

1.1Основне понятия        4

Глава 2.Раота с формами        6

2.1Форма и ее свойство        6

2.2Объекты, их свойства и методы        8

2.3Формы: отправка, событие, метод submit        12

Глава 3.Пример заполнения и проверка форм        14

Заключение        16

Список литературы        17

Введение


Данная курсовая работа посвящена  изучению анимационных эффектов в рамках JavaScript. Раскрывая тему, мы сочли нужным раскрыть понятие языка программирования «JavaScript».

В первой части нашей курсовой работы мы рассмотрим, что представляет собой язык программирования JavaScript, его функции и методы.

Путешествуя по просторам Всемирной паутины, можно обратить внимание, как различаются между собой оформление и возможности веб‑ страниц. Однако не каждый пользователь знает, что почти все это разнообразие реализовано на основе одного средства разметки текста – HTML.

НЕ нашли? Не то? Что вы ищете?

Язык разметки гипертекста HTML – стандартное средство представления информации в среде World Wide Web (WWW) в виде веб‑ страниц. Поскольку HTML является стандартизированным языком разметки, документы, написанные с его использованием, можно легко просматривать и редактировать на компьютерах с различным программным и аппаратным обеспечением.

Язык программирования JavaScript не предназначен для создания автономных программ. Конструкции JavaScript встраиваются непосредственно в исходный текст документов HTML и интерпретируются браузером по мере загрузки этих документов.

Все операции, которые можно исполнять в программе на JavaScript, описывают действия над хорошо известными и понятными объектам - элементами рабочей области программы Netscape Navigator и контейнерами языка HTML. Этому вопросу посвящена вторая часть работы.

Глава 1. Общая характеристика JavaScript

JavaScript является интерпретируемым языком. Категорию языков, к которой относится JavaScript, в литературе называют языками сценариев или скриптами. Последний термин - жаргон, который получился в результате транслитерации слова Script, поэтому в нашей книге мы его не будем использовать.

Языки сценариев существовали давно. Они применялись, например, для автоматизации различных задач. В качестве примера можно привести язык сценариев UNIX, язык пакетных заданий MS-DOS или имеющий большее отношение к технологиям Internet язык Perl, предназначенный для создания программ CGI.

1.1Основне понятия


Язык программирования JavaScript был разработан фирмой Netscape в сотрудничестве с Sun Microsystems и анансирован в 1995 году. JavaScript предназначен для создания интерактивных html-документов.

JavaScript — прототипно-ориентированный сценарный язык программирования. Является реализацией языка ECMAScript (стандарт ECMA-262).

JavaScript обычно используется как встраиваемый язык для программного доступа к объектам приложений. Наиболее широкое применение находит в браузерах как язык сценариев для придания интерактивности веб-страницам.

Наиболее часто скриптовые языки используются для:

    отображения диалоговых панелей и сообщений в статусной строке браузера; динамического создания содержимого страницы во время ее загрузки или уже после того, как она полностью загружена; изменения содержимого страницы, например, атрибута SRС графического изображения или содержимого других HTML-элементов, и отклика на события; проверки вводимой пользователем информации и управления отсылкой содержимого форм; навигации по другим страницам; управления встроенными в Web-страницу объектами типа Java-апплетов и элементов Active X.

Основные архитектурные черты: динамическая типизация, слабая типизация, автоматическое управление памятью, прототипное программирование, функции как объекты первого класса.

На JavaScript оказали влияние многие языки, при разработке была цель сделать язык похожим на Java, но при этом лёгким для использования непрограммистами. Языком JavaScript не владеет какая-либо компания или организация, что отличает его от ряда языков программирования, используемых в веб - разработке.

Название «JavaScript» является зарегистрированным товарным знаком компании Oracle Corporation.

Еще одна важная особенность языка JavaScript - это его объектная ориентированность. И хотя объектно-ориентированные возможности JavaScript заметно беднее, чем в С++ или Java, они все же есть в этом языке. Программистам доступны многочисленные объекты, встроенные в браузер и загруженные в него документы HTML, такие как документы HTML, фреймы, формы, ссылки на другие документы и так далее. Допускается создание собственных классов, а также группирование объектов и структур данных для расширения базовых классов.

С помощью конструкций JavaScript, встроенных в документы HTML, можно обрабатывать события. Эти события возникают в результате выполнения пользователем различных операций над документом HTML, загруженным в окно браузера. Это позволяет получать различные визуальные эффекты, например, изменение внешнего вида органов управления, когда над ними находится курсор мыши. Можно предварительно проверять данные, введенных пользователем в полях формы перед их отправкой для обработки на сервер Web, а также выполнять произвольные действия перед загрузкой документа HTML в окно браузера и делать другую полезную работу.

Глава 2.Раота с формами


Сценарии JavaScript очень часто применяются для предварительной обработки данных, введенных пользователями в формах. Проверенные

данные затем могут предаваться расширениям CGI или ISAPI сервера Web. Кроме того, с помощью форм и сценариев JavaScript можно создавать активные страницы, способные получать от пользователя и обрабатывать произвольную информацию.

2.1Форма и ее свойство


Оператор <FORM>. В наиболее общем виде оператор <FORM>, предназначенный для создания форм в документах HTML, выглядит следующим образом:

<FORM>

NAME="Имя_формы"

TARGET="Имя_окна"

ACTION="Адрес_URL_расширения_сервера"

METHOD=GET или POST

ENCTYPE="Кодировка_данных"

onSubmit="Обработчик_события_ Submit">

. . .

определение полей и органов управления

. . .

</FORM>

Параметр NAME задает имя формы. Вы можете его не указывать, если

форма не предназначена для совместной работы со сценарием JavaScript,

однако это не наш случай. Нам это имя нужно для адресации формы как

свойства объекта Document, поэтому мы всегда будем его задавать.

Назначение параметра TARGET аналогично назначению этого же

параметра в операторе <A>. Когда форма используется для передачи

запроса расширению CGI или ISAPI сервера Web, ответ, полученный от

сервера, отображается в окне. Имя этого окна задано параметром TARGET.

Если ответ должен отображаться в том же окне, что и форма, то параметр

TARGET задавать не нужно.

С помощью параметра ACTION указывается адрес URL загрузочного

файла программы CGI или библиотеки динамической компоновки DLL

расширения ISAPI, а также передаваемые расширению параметры. В том

случае, когда форма предназначена для передачи данных расширению

сервера Web, параметр ACTION является обязательным. Но если данные,

введенные в форме, обрабатываются сценарием JavaScript локально и не

передаются серверу Web, этот параметр можно опустить.

Параметр METHOD задает метод передачи данных из формы

расширению сервера Web и может принимать значения GET или POST.

Если данные из полей формыобрабатываются сценарием JavaScript локально, параметр METHODзадавать не нужно.

Параметр ENCTYPE задает тип MIME передаваемых данных и

используется очень редко. Если форма предназначена для передачи

текстовых данных (как это обычно бывает), этот параметр по умолчанию

имеет значение application/x-www-form-urlencoded. В этом случае для

передаваемых данных используется так называемая кодировка URL. Тип

данных multipart/form-data позволяет передавать как текстовые, так и

двоичные данные. Очевидно, при локальной обработке данных сценарием

JavaScript параметр ENCTYPE не задается.

Помимо параметров, для формы можно определить обработчик

события, связанный с кнопкой типа SUBMIT. Такая кнопка предназначена

для посылки данных из заполненной формы расширению сервера Web.

Назначив обработчик события, сценарий JavaScript может управлять этим

процессом.

Свойства объекта form. Объект form имеет два набора свойств, состав одного из которых является фиксированным, а состав другого зависит от того, какие поля и органы управления определены в форме.

Первый набор свойств приведен ниже:

    action; elements; encoding; length; method; target.

Большинство свойств первого набора просто отражает значения

соответствующих параметров оператора <FORM>. Вы можете их

использовать в сценариях JavaScript для проверки параметров.

Что же касается массива elements, то в нем находятся объекты,

соответствующие полям и органам управления, определенным в форме.

Эти объекты образуют второй набор свойств объекта form:


    button; checkbox; hidden; password; radio; reset; select; submit; text;

2.2Объекты, их свойства и методы


Кнопка button. В общем виде кнопка класса button определяется в форме с помощью оператора <INPUT> следующим образом:

<INPUT TYPE="button"

NAME="Имя_кнопки"

VALUE="Надпись_на_кнопке"

onClick="Обработчик_события">

Параметр TYPE оператора <INPUT> должен иметь значение button.

С помощью параметра NAME задается имя объекта, соответствующего

кнопке (а не надпись на кнопке). Надпись на кнопке указывается с помощью

параметра VALUE.

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

Объект button имеет два свойства, отражающие значения соответствующих параметров оператора <INPUT>:


    name; value.

Для объекта button определен всего один метод, не имеющий параметров, - click: click()

Вызов этого метода приводит к такому же эффекту, что и щелчок левой клавишей мыши по кнопке.

Переключатель checkbox. Переключатели checkbox обычно применяются для выбора каких-либо независимых друг от друга параметров или возможностей.

В форме переключатель checkbox создается с помощью операторам <INPUT> с параметром TYPE, равным строке "checkbox":

<INPUT TYPE="checkbox"

NAME="Имя_переключателя_checkbox"

VALUE="Значение"

CHECKED

onClick="Обработчик_события">

Текст, отображаемый рядом с переключателем

Параметр NAME задает имя переключателя. Это имя можно

использовать для определения состояния этого переключателя в сценарии

JavaScript.

С помощью параметра VALUE вы можете определить строку, которая

передается расширению сервера при посылке заполненной формы, если

переключатель находится во включенном состоянии. Если этот параметр не

указан, то по умолчанию посылается строка “on”. Сценарий JavaScript также

может получить значение параметра VALUE.

Необязательный параметр CHECKED указывается в том случае, если

при начальном отображении формы переключатель должен отображаться

во включенном состоянии.

Если для переключателя определен обработчик события, вы можете

задать сценарий JavaScript, получающий управление после того как пользователь изменит состояние переключателя.

Объект checkbox имеет несколько свойств, отражающих значения

соответствующих параметров оператора <INPUT>:


    name; checked; value; defaultChecked.

Для объекта checkbox определен один метод click, не имеющий параметров: click()

При вызове этого метода переключатель устанавливается во включенное состояние.

Переключатель radio. Переключатели типа radio применяются в тех случаях, когда нужно организовать выбор одной из нескольких возможностей. Исходя из этого, в форме обычно располагается несколько таких переключателей.

Определение переключателя radio выглядит следующим образом:

<INPUT TYPE="radio"

NAME=" Имя_переключателя_radio"

VALUE="Значение"

CHECKED

onClick="Обработчик_события">

Текст, отображаемый рядом с переключателем

Назначение параметров NAME, VALUE и CHECKED переключателя radio такое же как и назначение аналогичных параметров переключателя checkbox. Отличие заключается в том, что все переключатели radio, принадлежащие к одной группе, должны иметь одинаковые имена,

определенные параметром NAME. Что же касается переключателей

checkbox, то если их несколько, то все они должны называться по-разному.

Для того чтобы расширение сервера Web или сценарий JavaScript,

обрабатывающие форму, могли узнать, какой же из переключателей radio

группы находится во включенном состоянии, все такие переключатели

должны иметь различные значения VALUE.

Кроме того, только один из переключателей radio может быть определен с параметром CHECKED.

Объект radio имеет следующие свойства:


    name; checked; length; value; defaultChecked.

Для объекта radio определен метод click, не имеющий параметров: click()

При вызове этого метода переключатель выбирается для работы.

Список select. С помощью оператора <SELECT> вы можете разместить внутри формы список, допускающий выбор одной или просмотр нескольких строк. Формат оператора <SELECT> мы привели ниже:

<SELECT NAME="Имя_списка_select"

SIZE="Размер_списка"

MULTIPLE

onBlur="Обработчик_события"

onChange="Обработчик_события"

onFocus="Обработчик_события">

<OPTION VALUE="Значение" SELECTED> Текст

...

<OPTION> Текст

</SELECT>

Все параметры оператора <SELECT> необязательные, однако для того

чтобы сценарий JavaScript мог работать со списком, необходимо указать по

крайней мере параметр NAME, определяющий имя списка.

Параметр SIZE задает размер видимой части списка в строках.

Если указан необязательный параметр MULTIPLE, объект select

является списком просмотра, а не списком выбора.

Список может быть создан пустым и впоследствии заполнен сценарием

JavaScript, или уже содержащим один или несколько элементов. Для

определения элементов списка предназначен оператор <OPTION>.

Оператор <OPTION> может иметь два параметра - VALUE и SELECTED.

Параметр VALUE определяет значение, которое передается

расширению сервера Web. С помощью параметра SELECTED отмечается

строка списка, выделенная по умолчанию при начальном отображении формы.

После оператора <OPTION> следует текст, отображаемый в строках

списка.

Ниже  перечислены свойства объекта select, доступные сценарию JavaScript:


    length; name; options; selectedIndex.

Для объекта select определено два метода, не имеющих параметров, -

focus и blur. Первый из этих методов позволяет передать списку фокус

ввода, а второй - отобрать этот фокус у списка.

Однострочное поле text. Наверное, наиболее часто в формах, размещенных на страницах серверов Web встречаются однострочные поля, предназначенные для ввода и редактирования текста. Для того чтобы встроить такое поле в форму, необходимо использовать оператор <INPUT> с параметром TYPE, равным значению “text”.

Дополнительно можно указать параметры NAME, VALUE и SIZE, а также четыре обработчика событий, создаваемых текстовым полем.

Параметр NAME позволяет задать имя поля, необходимое для обращения к свойствам объекта text, соответствующего этому полю.

С помощью параметра VALUE можно записать в поле произвольную текстовую строку. Эта строка будет отображаться сразу после загрузки документа HTML в окно браузера.

Параметр SIZE определяет размер (ширину) текстового поля в символах. Это размер видимой части поля. Он не ограничивает длину строки, которую можно ввести в данном поле.

Сценариям JavaScript доступны три свойства поля редактирования как

объекта класса text:


    defaultValue; name; value.

Изменяя содержимое свойства value, сценарий JavaScript может изменить содержимое поля редактирования.

Для объекта text определены методы focus, blur и select, не имеющие

параметров.

С помощью метода focus сценарий JavaScript может передать фокус

полю редактирования, а с помощью метода blur - отобрать фокус у этого поля.

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

редактирования.

2.3Формы: отправка, событие, метод submit


Событие submit возникает при отправке формы. Наиболее частое его применение — это валидация (проверка) формы перед отправкой.

Метод submit позволяет инициировать отправку формы из JavaScript, без участия пользователя. Далее мы рассмотрим детали их использования.

Событие submit. Чтобы отправить форму на сервер, у посетителя есть два способа.

Первый — это нажать кнопку <input type="submit"> или <input type="image">. Второй — нажать Enter, находясь на каком-нибудь поле.

Какой бы способ ни выбрал посетитель — будет сгенерировано событие submit. Обработчик в нём может проверить данные и, если они неверны, то вывести ошибку и сделать event. preventDefault() — тогда форма не отправится на сервер.

Ожидаемое поведение.

Перейдите в текстовое поле и нажмите Enter, будет событие, но форма не отправится на сервер благодаря return false в обработчике. То же самое произойдет при клике на <input type="submit">.

Взаимосвязь событий submit и click. При отправке формы путём нажатия Enter на текстовом поле, на элементе <input type="submit"> везде, кроме IE8-, генерируется событие click.

Это довольно забавно, учитывая что клика-то и не было.

В IE8- событие submit не всплывает. Нужно вешать обработчик submit на сам элемент формы, без использования делегирования.

Чтобы отправить форму на сервер из JavaScript — нужно вызвать на элементе формы метод bmit().

Метод. При этом само событие submit не генерируется. Предполагается, что если программист вызывает метод bmit(), то он выполнил все проверки.

Это используют, в частности, для искусственной генерации и отправки формы.

Задачи. Создайте функцию showPrompt(text, callback), которая выводит форму для ввода с сообщением text и кнопкамиОК/Отмена.

    При отправке формы (OK/ввод в текстовом поле) — должна вызываться функция callback со значением поля. При нажатии на Отмена или на клавишу Esc — должна вызываться функция callback(null). Клавиша Esc должна закрывать форму всегда, даже если поле для ввода сообщения не в фокусе.

Особенности реализации.

    Форма должна показываться в центре окна (и оставаться в центре при изменении его размеров, а также при прокрутке окна!). Текст может состоять из нескольких строк, возможен любой HTML При показе формы остальные элементы страницы использовать нельзя, не работают другие кнопки и т. п, это окно — модальное. При показе формы — сразу фокус на INPUT для ввода. Нажатия Tab/Shift+Tab переключают в цикле только по полям формы, они не позволяют переключиться на другие элементы страницы.

Пример использования:

showPrompt("Введите что-нибудь<br>... умное :)", function(value) {

  alert( value );

});

Глава 3.Пример заполнения и проверка форм


Открыв написанный ниже код в браузере, получим анкету для регистрации. Форма является простым и используется во многих интернет ресурсах. Сценарий выполняет несложную обработку информации, которая вводится в текстовых полях этой формы.

В примере реализованы  провероки:

    было ли данное поле заполнено; в правильном ли формате пользователь указал свой адрес или email в соответствующем поле; совпадают ли значения введенные в два различных поля (часто используется для полей с паролем).

<html>

<head>

<title>Регистрация</title>

<meta http-eqiv="content-type" content="text/javascript";charset=Windows1251">

</head>

<script>

function Validate(obj) {

var username=obj. username. value;

var pass=obj. pass. value;

var passagain=obj. passagain. value;

var mail=obj. mail. value;

var date=obj. date. value. split('-');

var errors="";

if (username=="" || pass=="" || passagain=="" || mail=="")

{

alert("Все поля должны быть заполнены!!");

return false;

}

if (pass!=passagain)

{

errors+="Пароли не совпадают!!\n";

}

if (pass. length<6)

{

errors+="Слишком короткий пароль!!\n";

}

var reg = /^\w+@\w+\.\w{2,4}$/i;

if (!reg. test(mail))

{

errors+="Неправильный e-mail адрес!!\n";

}

if (date[0]<1930)

{

errors+="Указана неверная дата рождения!!\n";

}

if(errors=="")

return true;

else

{

alert(errors);

return false;

}

}

</script>

<body bgcolor="#7B68EE";  background="фон. gif"; text="#F08080">

<form OnSubmit='return Validate(this);' method='POST' action='sohranenie. html'>

<table bgcolor='#6A5ACD' border='0px'>

<tr><th align='center' ><h1>Регистрация</h1></th></tr>

<tr>

<td><em>Имя пользователя</em></td><td><input type='text' name='username' id='username'/></td>

</tr>

<tr>

<td><em>Пароль</em></td><td><input type='password' name='pass' id='pass'/></td>

</tr>

<tr>

<td><em>Подтвердите пароль</em></td><td><input type='password' name='passagain' id='passagain'/></td>

</tr>

<tr>

<td><em>E-mail</em></td><td><input type='text' name='mail' id='mail'/></td>

</tr>

<tr>

<td><em>Дата рождения</em></td><td><input type='date' name='date' id='date'/></td>

</tr>

<tr><td><input type='submit' value='регистрация'/></td></tr>

</form></body></html>

Заключение


Исходя из изученного нами материала, мы видим, что JavaScript являются неотъемлемой частью жизни большинства жителей нашей планеты. Используя интернет и посещая тем самым различные веб страницы, пользователь сам не подозревая того, использует JavaScript библиотеки. Без них любой современный сайт будет простым, невзрачным HTML документом, содержащим информацию и не имеющим ничего такого, за что бы мог "зацепиться глаз" посетителя этого сайта.

Знакомство с данной курсовой работой позволит составить достаточно целостное представление о том, что такое JavaScript и для чего он нужен, рассмотрены формы, объекты, их свойства и методы, необходимые для написания срипта.

В результате выполнения данного курсового проекта был разработан скрипт обработки данных формы, который придаст сайту небольшой уровень интерактивности. Используя приведенные основы, можно осуществлять различные проверки данных, например, на допустимые символы, на максимальное и минимальное количество символов, на правильность введенных адресов сайта и электронной почты и т. д.

Как видно из скрипта, он не подходит для всех случаев. Требования к проверке каждой формы индивидуальны. Однако, незначительная модификация условий в этой функции позволит проверить передаваемые данные из любой формы.

Список литературы


    , Сценарий JavaScript в интерактивных приложениях Web: методическое пособие по курсу/ Иркутск 2013. HTML: популярный самоучитель: книга/ Санкт-Петербург 2008. https://ru. wikipedia. org/wiki/JavaScript https://learn. javascript. ru/forms-submit