Отправляет email-рассылки с помощью сервиса Sendsay

JavaScript для начинающих. Изучаем с нуля.

Рассылка закрыта

При закрытии подписчики были переданы в рассылку "Заметки Дизайнера" на которую и рекомендуем вам подписаться.

Вы можете найти рассылки сходной тематики в Каталоге рассылок.

←   Июнь 2008   →
 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
Автор
ImHoster.net

Статистика

2.443 подписчиков
-1 за неделю
←   Все выпуски   →

JavaScript для начинающих. Изучаем с нуля.


Спонсор Рассылки: Клуб Желающих Создать И Развивать Свой Сайт



Здравствуйте.

С Вами вновь "Javascript для начинающих". И сегодня вас ждёт очередная порция полезной информации. Встречайте.

Проверка веб формы с помощью JavaScript



Источник: http://www.art.webobzor.net/art/90.php

Для того что бы проверить правильно ли заполнена web форма не обязательно использовать php, или другой язык. Тем более если кроме JavaScript и VBA на вашем сервере ничего нет. С помощью JS можно проверить веб форму не хуже, чем на php.

Давайте представим что у нас есть такая форма:

- имя пользователя
- e-mail адрес
- ICQ
- сообщение.

Не важно что это у нас, гостевая книга, форма для обратной связи, или что то ещё. Принцип работы скрипта от этого не изменится.

- "Имя пользователя" - поле обязательное для заполнения,
- "E-mail адрес" - по желанию, если поле заполнено проверяем на корректность.
- "ICQ" - заполняется по желанию.
- "сообщение" - обязательно для заполнения, тем более что сообщение не должно превышать 1000 символов.

<SCRIPT language=javascript1.2 type=text/javascript>

function verify() {

var err;

function emailCheck (emailStr) {
var emailPat=/^(.+)@(.+)$/;
var matchArray=emailStr.match(emailPat);

if (matchArray==null) {
return false;
}

return true;
}

var themessage = "Проверте правильность заполнения данных: nn-----nИсправте следующие ошибки ::n-----n";

if (document.REPLIER.name.value=="") {
themessage = themessage + " - Вы незаполнили поле : Имяn";
}
if (document.REPLIER.email.value !="" & !emailCheck(document.REPLIER.email.value)) {
themessage = themessage + " - Неправильный e-mail адресn";
}
}if (document.REPLIER.Post.value=="") {
themessage = themessage + " - Вы ненаписали сообщениеn";
}
if (themessage == "Проверте правильность заполнения данных: nn------------------------------------------------------------------nИсправте следующие ошибки ::n------------------------------------------------------------------n") {
return true;
} else {
alert(themessage);
return false;
}
}

<script>

Функция emailCheck, проверяет E-mail на корректность. Рассмотрим отдельно некоторые фрагменты скрипта.

Сообщяем, что поле "Имя" не должно быть пустым:

if (document.REPLIER.name.value=="")

Говорим скрипту о том, если поле “E-mail” не пустое и функция emailCheck вернула ошибку, то выдать ошибку:

if (document.REPLIER.email.value !="" & !emailCheck(document.REPLIER.email.value))

Собственно выдаём ошибку в виде окна сообщения, если функция verify вернула false:

alert(themessage)

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

<form name=REPLIER action=index.html method=POST onSubmit="return verify()">
<B> NАМЕ</B><BR>
<input name="name" size=28><font color=red>*</font><BR>
<B> E-mail </B><BR>
<input name="email" size=28><font color=red>*</font><BR>
<B>URL </B><BR>
<input name="icq" size=28><font color=red>*</font><BR><BR><BR>
<B> Комментарии :</B> <BR><textarea name=Post cols=50 rows=8></textarea><BR><BR>
<input type=submit class="button" value=" Отправить " class=btn>
</form>

Надеюсь вы заметили, что в функции я везде использовал загадочное слово «REPLIER», это не что иное как название формы в которой и будет работать этот скрипт, будьте внимательны, если ошибетесь в названии формы, возникнет ошибка.

Но это ещё не всё. Что бы юзер с ошибками не ушел на другую страницу, его не должна пропустить наша функция, которую необходимо подключить:

onSubmit="return verify()"

Теперь если функция вернула «false» никуда ваш юзер не денется.

Теперь напишем небольшой скрипт который будет ограничивать, количество символов в сообщении. Вот код нашего скрипта:

<script language=javascript1.2 TYPE=text/javascript>

<!--
var supportsKeys = false
function tick() {
calcCharLeft(document.forms[0])
if (!supportsKeys) timerID = setTimeout("tick()",1000)
}

function calcCharLeft(sig) {
clipped = false
maxLength = 1000;
if (document.REPLIER.Post.value.length > maxLength) {
document.REPLIER.Post.value = document.REPLIER.Post.value.substring(0,maxLength)
charleft = 0
clipped = true
} else {
charleft = maxLength - document.REPLIER.Post.value.length
}
document.REPLIER.msgCL.value = charleft
return clipped
}

tick();
//-->

</script>

Опять же будьте внимательны с указанием имени формы и поля. В maxLength указываем ограничение количества введенных символов. В данном случае, если количество символов в поле «Post» превышает 1000, удаляем всё лишнее.

Теперь весь скрипт вместе с формой имеет такой вид:

<SCRIPT language=javascript1.2 type=text/javascript>
function verify() {

var err;

function emailCheck (emailStr) {
var emailPat=/^(.+)@(.+)$/;
var matchArray=emailStr.match(emailPat);

if (matchArray==null) {
return false;
}

return true;
}

var themessage = "Проверте правильность заполнения данных: nn-------nИсправте следующие ошибки ::n-----n";

if (document.REPLIER.name.value=="") {
themessage = themessage + " - Вы незаполнили поле : НАМЕn";
}
if (document.REPLIER.email.value !="" & !emailCheck(document.REPLIER.email.value)) {
themessage = themessage + " - Неправильный e-mail адресn";
}
if (document.REPLIER.icq.value=="") {
themessage = themessage + " - Вы незаполнили поле : URLn";
}if (document.REPLIER.Post.value=="") {
themessage = themessage + " - Вы ненаписали сообщениеn";
}
if (themessage == "Проверте правильность заполнения данных: nn-------nИсправте следующие ошибки ::n------n") {
return true;
} else {
alert(themessage);
return false;
}
}
</script>

<form name=REPLIER action=bd.php method=POST onSubmit="return verify()">
<B> НАМЕ</B><BR>
<input name="name" size=28><font color=red>*</font><BR>
<B> E-mail </B><BR>
<input name="email" size=28><font color=red>*</font><BR>
<B>URL </B><BR>
<input name="icq" size=28><font color=red>*</font><BR><BR><BR>
<B> Комментарии :</B> <BR><textarea name=Post cols=50 rows=8></textarea>
<small><center>Максимально 1000 осталось : <input value="1000" size="3" name="msgCL" disabled></small><BR><BR>
<script language=javascript1.2 TYPE=text/javascript>
<!--
var supportsKeys = false
function tick() {
calcCharLeft(document.forms[0])
if (!supportsKeys) timerID = setTimeout("tick()",1000)
}

function calcCharLeft(sig) {
clipped = false
maxLength = 1000;
if (document.REPLIER.Post.value.length > maxLength) {
document.REPLIER.Post.value = document.REPLIER.Post.value.substring(0,maxLength)
charleft = 0
clipped = true
} else {
charleft = maxLength - document.REPLIER.Post.value.length
}
document.REPLIER.msgCL.value = charleft
return clipped
}

tick();
//-->
</script><BR><BR>
<input type=submit class="button" value=" Отправить " class=btn>
</form>

Как видите всё просто. JavaScript тоже неплохо справляется с проверкой веб форм, к тому же на мой взгляд это красивее. Кто-то может сказать, что это не надёжно, так как можно сохранить страницу и удалить скрипт. Возможно, но если у вас есть php... Но это уже другая история.



Хотите Изучить Javascript?

Профессионалы с Радостью Вам ПОМОГУТ!



HTML JavaScript, PHP и MySQL. Джентельменский набор Web-мастера

Рассмотрены вопросы создания интерактивных Web-сайтов с помощью HTML, JavaScript, PHP и MySQL без использования специализированных редакторов. Представлен материал о применении каскадных таблиц стилей (CSS) для форматирования Web-страниц. Даны основные конструкции языка РНР, на примерах показаны приемы написания сценариев, наиболее часто используемых при разработке Web-сайтов. Описаны приемы работы с базами данных MySQL при помощи РНР, а также администрирования баз данных с помощью программы phpMyAdmin. Особое внимание уделено созданию программной среды на компьютере разработчика и настройке Web-сервера Apache. На прилагаемом компакт-диске содержатся листинги более чем двухсот примеров, описанных в книге. Для Web-разработчиков

Получить в своё распоряжение

Полный справочник по HTML, CSS и JavaScript

Издание представляет собой современный полный справочник с перекрестными ссылками по HTML, CSS и JavaScript. В первых главах рассматриваются основы HTML, CSS и JavaScript. Далее приводятся сведения обо всех элементах и атрибутах HTML, событиях, стилях CSS, поведениях, фильтрах, свойствах, методах и объектах JavaScript. Элементы языков программирования в каждой из глав перечислены в алфавитном порядке. Для каждого элемента приводится краткое описание, полный синтаксис, пример использования, список совместимых версий браузеров Netscape и Internet Explorer, список элементов, с которыми элемент используется. Веб-дизайнер, веб-мастер, веб-программист - вся нужная вам информация собрана под этой обложкой!

Получить в своё распоряжение

JavaScript. Просто как дважды два

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

Получить в своё распоряжение

Сценарии для Web-сайта: PHP и JavaScript

Книга посвящена использованию языков JavaScript и РНР для разработки Web-приложений. Приведены основные понятия, связанные с разработкой Web-сайта, а также сведения о языке HTML и каскадных таблицах стилей (CSS). Рассмотрены основы программирования на JavaScript и РНР 5. Приведены практические примеры различных клиентских и серверных сценариев. Описаны особенности и даны рекомендации по применению этих языков. В приложениях содержатся сведения по объектам документа и браузера, с которыми работают клиентские сценарии, а также рассказывается о том. как установить и настроить РНР и Web-сервер IIS в системе Windows. Во втором издании добавлены новые примеры. Для начинающих Web-разработчиков

Получить в своё распоряжение

JavaScript. Освой на примерах

На наглядных примерах даны практические приемы программирования клиентских сценариев для Web-браузеров. Кратко изложены основы создания Web-страниц и скриптов: язык JavaScript, каскадные таблицы стилей (CSS) и объектная модель документа (DOM). Рассмотрено решение типовых задач программирования скриптов: работа с датой и временем, cookies, регулярными выражениями и протоколами. Даны примеры создания динамических эффектов: управление окном браузера, разработка динамических форм, средства и способы работы с изображениями, анимационные эффекты, реализация перетаскивания (Drag and Drop), эмуляция элементов управления пользовательского интерфейса. Рассмотрено написание функционально законченных приложений: реализация визуального редактора HTML и нескольких известных игр на JavaScript. Исходные тексты всех примеров находятся на прилагаемом компакт-диске. Для широкого круга Web-программистов

Получить в своё распоряжение

Основы JavaScript для начинающих

Предлагаемая вашему вниманию книга содержит вводный курс по одному из самых популярных языков программирования, который применяется в Web-дизайне на стороне клиента, - JavaScript. Книга достаточно подробно знакомит читателя с основными особенностями языка, его разновидностями и версиями, используемыми в различных браузерах. Рассмотрены наиболее распространенные типы браузеров и применение JavaScript для них - Internet Explorer, Netscape, Mozilla и некоторые другие. В книге приводятся простые пошаговые инструкции для выполнения сценариев, каждый из них предлагается в нескольких вариантах - для разных браузеров и с учетом требований к Web-странице. Вкратце рассматриваются общие темы Web-программирования, такие как модель документа DOM и таблицы стилей CSS. Все тексты сценариев, приведенных в книге, можно скачать с сайта авторов. Книга будет полезна начинающим осваивать Web-дизайн, а также тем, кто хочет расширить свой кругозор в области программирования.

Получить в своё распоряжение

Раскрытие тайн JavaScript

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

Получить в своё распоряжение

WMI: программирование на JavaScript и VBScript

Настоящее издание представляет собой авторизированный перевод оригинального немецкого издания "Audi A4, Audi A4 Avant". Книга является руководством по эксплуатации, техническому обслуживанию и ремонту автомобилей Audi A4, Audi A4 Avant с бензиновыми двигателями, выпускаемых с октября 2000 года. Руководство предназначено для работников автосервиса и автомобилистов, вне зависимости от степени подготовленности. В руководстве приведены технические характеристики основных агрегатов и систем автомобиля. Пооперационно изложена последовательность разборки и сборки узлов и агрегатов с уточнением особенностей работ, мер безопасности, замеров необходимых параметров и советов автолюбителям предпочитающим самостоятельный ремонт. В конце каждой главы приведены списки возможных неисправностей, причины их возникновения и методы их устранения. Описания неисправностей сопровождаются советами, которые помогут избежать поломок автомобиля и продлить срок его безаварийной эксплуатации. Последняя глава содержит карту поиска неисправностей и график регулярного технического обслуживания.

Получить в своё распоряжение

JavaScript: подробное руководство

Пятое издание бестселлера «JavaScript. Подробное руководство» полностью обновлено. Рассматриваются взаимодействие с протоколом HTTP и применение технологии Ajax, обработка XML-документов, создание графики на стороне клиента с помощью тега <canvas>, пространства имен в JavaScript, необходимые для разработки сложных программ, классы, замыкания, Flash и встраивание сценариев JavaScript в Java-приложения. Часть I знакомит с основами JavaScript. В части II описывается среда разработки сценариев, предоставляемая веб-броузерами. Многочисленные примеры демонстрируют, как генерировать оглавление HTML-документа, отображать анимированные изображения DHTML, автоматизировать проверку правильности заполнения форм, создавать всплывающие подсказки с использованием Ajax, как применять XPath и XSLT для обработки XML-документов, загруженных с помощью Ajax. Часть III - обширный справочник по базовому JavaScript (классы, объекты, конструкторы, методы, функции, свойства и константы, определенные в JavaScript 1.5 и ECMAScript v3). Часть IV - справочник по клиентскому JavaScript (API веб-броузеров, стандарт DOM API Level 2 и недавно появившиеся стандарты: объект XMLHttpRequest и тег <canvas>).

Получить в своё распоряжение

JavaScript. Библия пользователя

Эта книга адресована широкому кругу читателей Web-дизайнеров, которые решили детально изучить язык JavaScript. Она имеет все шансы завоевать титул полного справочного руководства по JavaScript не только в глазах его разработчиков, но и в сердцах пользователей. В издании подробно описаны практически все средства разработки сценариев JavaScript, используемые в современных и уже устаревших браузерах. Изложение материала начинается с истории и особенностей языка JavaScript и заканчивается описанием сложных приложений, используемых для решения таких задач, как создание формы заказа, обработка XML-данных и др. Особое внимание в книге уделено созданию межбраузерных сценариев, которые максимально эффективно выполняются в подавляющем большинстве используемых в настоящее время браузеров. На прилагаемом к книге компакт-диске предоставлены дополнительные 22 главы на русском языке, все листинги, описанные в книге, некоторые вспомогательные материалы и программы, которые помогут читателю изучить сложные темы и практические примеры.

Получить в своё распоряжение

В избранное