Проверка информации, введенной в форму

Поможем в ✍️ написании учебной работы

Имя

Поможем с курсовой, контрольной, дипломной, рефератом, отчетом по практике, научно-исследовательской и любой другой работой

Нажимая кнопку "Продолжить", я принимаю политику конфиденциальности

Лабораторная работа

Работа со строками

Строковые литералы или строковые переменные являются в языке JavaScript объектом типа string, к которому могут быть применены методы, определенные в языке. Создание нового объекта требует вызова функции-конструктора объекта. Для того чтобы создать строковый объект, надо применить конструктор newstring, например:

s=newString("результат=")

Объект string имеет единственное свойство length (длина_строки). Выражение s.length выдает значение 10, равное длине строки, содержащейся в строковом объекте s. Объект string имеет два типа методов. С методами, непосредственно влияющими на саму строку, мы сейчас и познакомимся, рассматривая примеры обработки текстовой информации.

Одним из часто используемых методов является метод выделения из строки отдельного символа. Метод charAt(ni) возвращает символ, позицию которого определяет параметр ni. Символы в строке перенумерованы, начиная с 0.

Пример 1. Вывод символов строки в "столбик"

Напишем сценарий, при выполнении которого заданный текст выводится в "столбик", т.е. на каждой строке размещается по одному символу.

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

Листинг 1. Вывод символов строки в "столбик"

<HTML>

<HEAD>

<TITLE>Вывод символов строки в "столбик"</TITLE>

<!-- //

function ttest(s)

{ var sres="Прочитанный текст:"+" \r\n"+s+"\r\n"+

'Текст в "столбик":'+"\r\n"

var cur=""

for ( var i=0; i <= s.length-1; i += 1)

{c=s.charAt(i); cur +=c+"\r\n" }

sres+=cur

return sres

}

//-->

</script>

</HEAD>

<H4>Символы текущей строки в столбик</H4>

Введите строку: <input type="text" size=20 name="st1"><hr>

</FORM>

</BODY>

</HTML>

Метод substr (n1,n2) позволяет выделять из строки подстроку. Параметр n1 задает позицию первого символа подстроки; параметр n2 определяет количество символов в подстроке. Например, если строка s="сборник", то в результате выполнения substr (0,4) будет выделена подстрока "сбор".

Пример 2. Вычисление количества повторений строки в тексте

Напишем программу, которая определяет, сколько раз заданное слово встречается в определенном тексте.

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

HTML-код документа представлен в листинге 2.

Листинг 2. Количество заданных слов в тексте

<HTML>

<HEAD>

<TITLE>Количество заданных слов в тексте</TITLE>

<!-- //

function numword(obj)

{ var h=obj.data.value

var s=obj.textin.value

s=' '+s+' '

h=' '+h+' '

var m=h.length

var res=0

var i=0

while (i <= s.length-1)

{ ch=s.substr(i,m)

if (ch==h) {res+=l; i = i+m-1}

else

i++

}

obj.result.value=res

}

//-->

</script>

</HEAD>

<H4>Количество заданных слов в тексте</H4>

Введите текст:<br>

Введите слово: <input type="text" name="data" size="8"><hr>

Количество слов в тексте: <input type="text" name="result" size=8><hr>

</FORM>

</BODY>

</HTML>

Упражнения

1. Проверить примеры из лабораторной работы.

2. Слова в заданном тексте разделяются пробелами. Напишите программу, которая определяет количество слов в тексте.

3. Напишите программу, в которой все слова А заменены словом В, где А и В - заданные слова, возможно, различной длины.

4. Напишите программу, которая "сжимает" заданный текст, т. е. заменяет все подряд идущие пробелы на один.

Лабораторная работа

Массивы

Тип Array введен в JavaScript для возможности манипулирования самыми разными объектами, которые может отображать Navigator. Это - список всех гипертекстовых ссылок данной страницы, список всех картинок на данной странице, список всех элементов формы и т.п. Пользователь может создать и свой собственный массив, используя, конструктор Array(). Делается это следующим образом:

new_array = new Array()

new_array5 = new Array(5)

colors = new Array("red", "white", "blue")

Размерность массива может изменяться. Можно сначала определить массив, а потом присвоить одному из его элементов значение. Как только это произойдет, изменится и размерность массива:

colors = new Array()

colors[5] = "red".

В данном случае массив будет состоять из 6 элементов, так как первым элементом массива считается элемент с индексом 0.

Для массивов определены четыре метода: join, reverse, sort, concat. Join объединяет элементы массива в строку символов, в качестве аргумента в этом методе задается разделитель:

colors = new Array("red", "white", "blue")

string = acolors.join(" + ")

В результате выполнения присваивания значения строке символов string мы получим следующую строку: string = "red + white + blue". Другой метод, reverse, изменяет порядок элементов массива на обратный, метод sort отсортировывает их в лексикографическом порядке, а метод concat объединяет два массива.

У массивов есть два свойства: length и prototype. Length определяет число элементов массива. Если нужно выполнить некоторую рутинную операцию над всеми элементами массива, то можно воспользоваться циклом типа:

color = new Array("red", "white", "blue")

n = 0 while(n != colors.length)

{... операторы тела цикла ...}

Свойство prototype позволяет добавить свойства к объектам массива. Однако чаще всего в программах на JavaScript используются встроенные массивы, в основном графические образы (Images) и гипертекстовые ссылки (Links).

В новой версии языка появился конструктор для этого типа объектов:

new_image = new Image()

new_image = new Image(width, height)

Пример 1. Создание мультипликации с использованием массивов.

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

img_array = new Array()

img_array[0] = new Image(50,100)

img_array[1] =new Image(50,100)

...

img_array[99] = new Image(50,100)

У объекта Image существует 10 свойств, из которых, пожалуй, самым важным является src. Так, для присваивания конкретных картинок элементам массива img_array следует воспользоваться следующей последовательностью команд:

img_array[0].src = "image1.gif"

img_array[1].src = "image2.gif"

...

img_array[99].src = "image100.gif"

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

Расширяя пример с массивом Image, построим теперь документ, в котором будет встроена мультипликация, определенная нашим массивом:

Листинг 1. Мультипликация.

<HTML>

<HEAD>

<!--//

function multi_pulti()

{

img_array = new Array()

for (var i=0; i<4; i++)

img_array[i] = new Image(50,100)

img_array[0].src = "e1.jpg"

img_array[1].src = "e2.jpg"

img_array[2].src = "e3.jpg"

img_array[3].src = "e4.jpg"

var t=new Date()

p=-1

}

function s()

{

p=p+1

document.images[0].src =img_array[p].src

setTimeout("s()",100)

if (p==3) p=-1

}

//-->

</SCRIPT>

</HEAD>

<br>

</BODY>

</HTML>

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

Пример 2. Бинарный поиск с формированием таблицы результатов

Напишем функцию, которая реализует алгоритм бинарного поиска таким образом, чтобы во время работы программы формировалась таблица значений переменных i, j, k и некоторых выражений.

Листинг 2. Поиск в упорядоченном массиве с таблицей промежуточных значений

<HTML>

<HEAD>

<TITLE>Бинарный поиск. Таблица промежуточных значений</TITLE>

<!-- //

var v=new Array (2, 3, 5, 6, 6, 7,10,11, 20, 25)

function testtab(obj,v,t)

{ var res="i j k v[k] t<= v[k]"+"\r\n"

var i=0

var j= v.length-1

var k

while ( i < j )

{ k=Math.round( (i+j)/2+0.5)-1

res = res + i + " "+j+" "+k+" "+"v[" + k + "]=" + v[k] + " " + t + "<=" + v[k]+"\r\n"

if (t <= v[k] )

j=k

else

i=k+l

}

res += "v[" + i + "]=" +v[i]+"\r\n"

obj.resultl.value=res

if (v[i] == t )

{ return i}

else return -1

}

function test(obj)

{ obj.datal.yalue=v}

//-->

</script>

</HEAD>

<H4>Реализация алгоритма бинарного поиска</H4>

<pre>

Массив:<INPUT type="text" size=40 name="datal" ><hr>

Элемент:<INPUT type="text" size=20 name="data2" ><hr>

Результат поиска: <INPUT type="text" size=20 name="result" ><hr>

Таблица промежуточных значений: <BR>

</PRE>

</FORM>

</BODY>

</HTML>

Задания

1. Проверить пример 2 из лабораторной работы.

2. Создать простейший мультипликационный сюжет с использованием массива.

3. Задан одномерный массив вещественных чисел. Напишите сценарий, который определяет число положительных элементов массива.

4. Задан одномерный массив вещественных чисел. Напишите сценарий, позволяющий найти максимальный элемент в массиве.

Лабораторная работа

Формы

Цели: Разобрать способы выполнения проверки формы, а также возможности для пересылки информации по Интернет.

Лабораторная работа

Объект Image

Цели: Изучить возможности объекта Image. Разобрать способы загрузки изображений.

Изображения на web-странице

Рассмотрим теперь объект Image, который стал доступен, начиная с версии с 1.1 языка JavaScript (то есть с Netscape Navigator 3.0). С помощью объекта Image Вы можете вносить изменения в графические образы, присутствующие на web-странице. В частности, это позволяет нам создавать мультипликацию.
Заметим, что пользователи браузеров более старых версий (таких как Netscape Navigator 2.0 или Microsoft Internet Explorer 3.0 - т.е. использующих версию 1.0 языка JavaScript) не смогут запускать скрипты, приведенные в этой части описания. Или, в лучшем случае, на них нельзя будет получить польный эффект.

Давайте сначала рассмотрим, как из JavaScript можно адресоваться к изображениям, представленным на web-странице. В рассматриваемом языке все изображения предстают в виде массива. Массив этот называется images и является свойством объекта document. Каждое изображение на web-странице получает порядковый номер: первое изображение получает номер 0, второе - номер 1 и т.д. Таким образом, к первому изображению мы можем адресоваться, записав document.images[0].

Каждое изображение в HTML-документе рассматривается в качестве объекта Image. Объект Image имеет определенные свойства, к которым и можно обращаться из языка JavaScript. Например, Вы можете определить, который размер имеет изображение, обратившись к его свойствам width и height. То есть по записи document.images[0].width Вы можете определить ширину первого изображения на web-странице (в пикселях).

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

то Вы сможете обращаться к нему, написав document.myImage или document.images["myImage"].

Загрузка новых изображений

Хотя конечно и хорошо знать, как можно получить размер изображения на web-странице, это не совсем то, чего бы мы хотели. Мы хотим осуществлять смену изображений на web-странице и для этого нам понадобится атрибут src. Как и в случае тэга <img>, атрибут src содержит адрес представленного изображения. Теперь - в языке JavaScript 1.1 - Вы имеете возможность назначать новый адрес изображению, уже загруженному в web-страницу. И в результате, изображение будет загружено с этого нового адреса, заменив на web-странице старое. Рассмотрим к примеру запись:

Здесь загружается изображение img1.gif и получает имя myImage. В следующей строке прежнее изображение img1.gif заменяется уже на новое - img2.gif:

document.myImage.src= "img2.src";

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

Начало формы

Конец формы

Лабораторная работа

Работа со строками

s=newString("результат=")

Пример 1. Вывод символов строки в "столбик"

Листинг 1. Вывод символов строки в "столбик"

<HTML>

<HEAD>

<TITLE>Вывод символов строки в "столбик"</TITLE>

<!-- //

function ttest(s)

{ var sres="Прочитанный текст:"+" \r\n"+s+"\r\n"+

'Текст в "столбик":'+"\r\n"

var cur=""

for ( var i=0; i <= s.length-1; i += 1)

{c=s.charAt(i); cur +=c+"\r\n" }

sres+=cur

return sres

}

//-->

</script>

</HEAD>

<H4>Символы текущей строки в столбик</H4>

Введите строку: <input type="text" size=20 name="st1"><hr>

</FORM>

</BODY>

</HTML>

Пример 2. Вычисление количества повторений строки в тексте

Напишем программу, которая определяет, сколько раз заданное слово встречается в определенном тексте.

HTML-код документа представлен в листинге 2.

Листинг 2. Количество заданных слов в тексте

<HTML>

<HEAD>

<TITLE>Количество заданных слов в тексте</TITLE>

<!-- //

function numword(obj)

{ var h=obj.data.value

var s=obj.textin.value

s=' '+s+' '

h=' '+h+' '

var m=h.length

var res=0

var i=0

while (i <= s.length-1)

{ ch=s.substr(i,m)

if (ch==h) {res+=l; i = i+m-1}

else

i++

}

obj.result.value=res

}

//-->

</script>

</HEAD>

<H4>Количество заданных слов в тексте</H4>

Введите текст:<br>

Введите слово: <input type="text" name="data" size="8"><hr>

Количество слов в тексте: <input type="text" name="result" size=8><hr>

</FORM>

</BODY>

</HTML>

Упражнения

1. Проверить примеры из лабораторной работы.

4. Напишите программу, которая "сжимает" заданный текст, т. е. заменяет все подряд идущие пробелы на один.

Лабораторная работа

Массивы

new_array = new Array()

new_array5 = new Array(5)

colors = new Array("red", "white", "blue")

colors = new Array()

colors[5] = "red".

colors = new Array("red", "white", "blue")

string = acolors.join(" + ")

color = new Array("red", "white", "blue")

n = 0 while(n != colors.length)

{... операторы тела цикла ...}

В новой версии языка появился конструктор для этого типа объектов:

new_image = new Image()

new_image = new Image(width, height)

Пример 1. Создание мультипликации с использованием массивов.

img_array = new Array()

img_array[0] = new Image(50,100)

img_array[1] =new Image(50,100)

...

img_array[99] = new Image(50,100)

img_array[0].src = "image1.gif"

img_array[1].src = "image2.gif"

...

img_array[99].src = "image100.gif"

Листинг 1. Мультипликация.

<HTML>

<HEAD>

<!--//

function multi_pulti()

{

img_array = new Array()

for (var i=0; i<4; i++)

img_array[i] = new Image(50,100)

img_array[0].src = "e1.jpg"

img_array[1].src = "e2.jpg"

img_array[2].src = "e3.jpg"

img_array[3].src = "e4.jpg"

var t=new Date()

p=-1

}

function s()

{

p=p+1

document.images[0].src =img_array[p].src

setTimeout("s()",100)

if (p==3) p=-1

}

//-->

</SCRIPT>

</HEAD>

<br>

</BODY>

</HTML>

Пример 2. Бинарный поиск с формированием таблицы результатов

Листинг 2. Поиск в упорядоченном массиве с таблицей промежуточных значений

<HTML>

<HEAD>

<TITLE>Бинарный поиск. Таблица промежуточных значений</TITLE>

<!-- //

var v=new Array (2, 3, 5, 6, 6, 7,10,11, 20, 25)

function testtab(obj,v,t)

{ var res="i j k v[k] t<= v[k]"+"\r\n"

var i=0

var j= v.length-1

var k

while ( i < j )

{ k=Math.round( (i+j)/2+0.5)-1

res = res + i + " "+j+" "+k+" "+"v[" + k + "]=" + v[k] + " " + t + "<=" + v[k]+"\r\n"

if (t <= v[k] )

j=k

else

i=k+l

}

res += "v[" + i + "]=" +v[i]+"\r\n"

obj.resultl.value=res

if (v[i] == t )

{ return i}

else return -1

}

function test(obj)

{ obj.datal.yalue=v}

//-->

</script>

</HEAD>

<H4>Реализация алгоритма бинарного поиска</H4>

<pre>

Массив:<INPUT type="text" size=40 name="datal" ><hr>

Элемент:<INPUT type="text" size=20 name="data2" ><hr>

Результат поиска: <INPUT type="text" size=20 name="result" ><hr>

Таблица промежуточных значений: <BR>

</PRE>

</FORM>

</BODY>

</HTML>

Задания

1. Проверить пример 2 из лабораторной работы.

2. Создать простейший мультипликационный сюжет с использованием массива.

Лабораторная работа

Формы

Проверка информации, введенной в форму

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

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

Начало формы

Введите Ваше имя:

Введите Ваш адрес e-mail:

Конец формы

Что касается информации, введенной в первый элемент, то Вы будете получать сообщение об ошибке, если туда ничего не было введено. Любая представленная в элементе информация будет рассматриваться на предмет корректности. Конечно, это не гарантирует, что пользователь введет не то имя. Браузер даже не будет возражать против чисел. Например, если Вы введете '17', то получите приглашение 'Hi 17!'. Так что эта проверка не может быть идеальна.

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

Как скрипт работает с этими двумя элементами формы и как выглядит проверка? Это происходит следующим образом:

<html>

<head>

<!-- Скрыть

function test1(form) {

if (form.text1.value == "")

alert("Пожалуйста, введите строку!")

else {

alert("Hi "+form.text1.value+"! Форма заполнена корректно!");

}

function test2(form) {

if (form.text2.value == "" ||

form.text2.value.indexOf('@', 0) == -1)

alert("Неверно введен адрес e-mail!");

else alert("OK!");

}

// -->

</script>

</head>

<body>

Введите Ваше имя:<br>

<input type="button" name="button1" value="Проверка"

onClick="test1(this.form)">

<P>

Введите Ваш адрес e-mail:<br>

<input type="button" name="button2" value="Проверка"

nClick="test2(this.form)">

</body>

</html>

Рассмотрим сначала HTML-код в разделе body. Здесь мы создаем лишь два элемента для ввода текста и две кнопки. Кнопки вызывают функции test1(...) или test2(...), в зависимости от того, которая из них была нажата. В качестве аргумента к этим функциям мы передаем комбинацию this.form, что позже позволит нам адресоваться в самой функции именно к тем элементам, которые нам нужны.

Функция test1(form) проверяет, является ли данная строка пустой. Это делается посредством if (form.text1.value == "")... . Здесь 'form' - это переменная, куда заносится значение, полученное при вызове функции от 'this.form'. Мы можем извлечь строку, введенную в рассматриваемый элемент, если к form.text1 припишем 'value'. Чтобы убедиться, что строка не является пустой, мы сравниваем ее с "". Если же окажется, что введенная строка соответствует "", то это значит, что на самом деле ничего введено не было. И наш пользователь получит сообщение об ошибке. Если же что-то было введено верно, пользователь получит подтверждение - ok.

Следующая проблема заключается в том, что пользователь может вписать в поле формы одни пробелы. И это будет принято, как корректно введенная информация! Если есть желание, то Вы конечно можете добавить проверку такой возможности и исключить ее.

Рассмотрим теперь функцию test2(form). Здесь вновь сравнивается введенная строка с пустой - "" (чтобы удостовериться, что что-то действительно было введено читателем). Однако к команде if мы добавили еще кое-чего. Комбинация символов || называется оператором OR (ИЛИ).
Команда if проверяет, чем заканчивается первое или второе сравнения. Если хотя бы одно из них выполняется, то и в целом команда if имеет результатом true, а стало быть будет выполняться следующая команда скрипта. Словом, Вы получите сообщение об ошибке, если либо предоставленная Вами строка пуста, либо в ней отсутствует символ @. (Второй оператор в команде if следит за тем, чтобы введенная строка содержала @.)

Дата: 2018-09-13, просмотров: 713.

12 3 Следующая ⇒