JavaScript

Практическая  работа  по теме: «Создание простейшей формы ввода логина и пароля на JavaScript»

Первый способ.

Здесь мы рассмотрим совсем не сложный скрипт, написанный на JavaScript, который создаёт форму ввода логина и пароля. Отличительной чертой данного скрипта является то, что в зависимости от введённого логина и пароля перенаправлять пользователя на заданную страничку или сайт.
Для наглядного примера работы данного скрипта необходимо кликнуть по кнопке «Войти на сайт«,Кнопка войти.

Если в поле «логин» ввести login, а в поле «пароль» pass, то Вы автоматически перейдёте на главную страницу вашего сайта.

А если в поле «логин» ввести login2, а в поле «пароль» pass2, то Вы окажетесь на другом сайте, указанного Вами.

Если вводить какие-либо другие значения в поля «логин» и «пароль«, то Вам будет выдано сообщение «Неверный логин или пароль!» и Вы вернётесь обратно на ту же страничку.

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

  1. Переименуйте файл index.htm в вашей папке HTML в файл index1.htm
  2. Запустите стандартную программу Блокнот, Notepad, Sublime Text 2, Bred3.0.
  3. Наберите в окне редактора простейший текст файла
    HTML:
JavaScript код: 
<script language="JavaScript" type="text/javascript">
function Input(){
login_ok = false;
user_name = "";
password = "";
user_name = prompt("Логин","");
user_name = user_name.toLowerCase();
password = prompt("Пароль","");
password = password.toLowerCase();
if (user_name=="login" && password=="pass") {
login_ok=true;
window.location="index.htm";
}
if (user_name=="login2" && password=="pass2") {
login_ok=true;
window.location=" http://mbouschool4.lbihost.ru/";
}if (login_ok==false) { alert("Неверный логин или пароль!"); }
}
</script>
  1. Сохраните файл под именем index.htm

Для вывода формы ввода логина и пароля нам понадобится кнопка, при нажатии на которую появится наша форма. Следовательно, нам необходимо добавить эту кнопку при помощи вот такого небольшого кода:

<div align="center">
<form>
<input type="button" value="Войти на сайт" onClick="Input()">
</form>
</div>
  1. Добавьте этот код к концу предыдущего кода.

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

  1. Для просмотра загрузите файл index.htm.
  2. Сдайте задание учителю.

 Второй способ. 

  1. Переименуйте файл index.htm в вашей папке HTML в файл index2.htm
  2. Запустите стандартную программу Блокнот (Notepad), Sublime Text 2, Bred 3.0.
  3. Наберите в окне редактора простейший текст файла HTML:
<script>var pass = prompt("Введите пароль:", "");
if (pass == null)  window.location = " error.htm";
else if (pass.toLowerCase() == "111")window.location = "index1.htm";
else  window.location = " error.htm ";</script>

4. Сохраните файл под именем index.htm

5. В программе Блокнот (Notepad), Sublime Text 2 или Bred 3.0 наберите следующий текст файла 







<html>
<head>
<title>ошибка </title>
</head>
<body background="IMG/bgr.jpg" 
text="#330066">
<P align=center STYLE="filter:Glow(Strength='6', Color='#00FF00');
font-size: 20pt;
font-weight: bold; text-align: center;
color: DarkGreen">
ОШИБКА ПРИ ВВОДЕ<br> ПОВТОРИТЕ ИДЕНТИФИКАЦИЮ...</font><p>
<HR NOSHADE WIDTH="80%" COLOR="Red" SIZE="20">
<HR NOSHADE WIDTH="80%" COLOR="White" SIZE="20">
<HR NOSHADE WIDTH="80%" COLOR="Blue" SIZE="20"><p>
<b><font color="#2F4F4F" face="arial" size="4">Повторите попытку 
</b></font> <br>
Для повтора нажмите
<A href="index.htm"> (сюда)</A>
</body>
</html>

6. Сохраните файл под именем error.htm
7. Для просмотра загрузите файл htm
8. Сдайте задание учителю.

 

Добавить комментарий