Пример № 1: Таблица умножения JavaScript
Создайте простую таблицу умножения, спрашивая пользователя, сколько строк и столбцов он хочет.
Решение:
<HTML>
<Голова>
<title> Таблица умножения </ title>
<script type = "text / javascript">
var row = prompt ("Сколько строк в вашей таблице умножения?");
var cols = prompt ("Сколько столбцов для вашей таблицы умножения?");
if (rows == "" || rows == null)
ряды = 10;
if (cols == "" || cols == null)
cols = 10;
createTable (строки, столбцы);
функция createTable (строки, столбцы)
{
var j = 1;
var output = "<table border = '1' width = '500' cellspacing = '0'cellpadding =' 5 '>";
для (I = 1; я <= строки; я ++)
{
выход = выход + "<tr>";
в то время как (к <= смещ_по_столбцы)
{
output = output + "<td>" + i * j + "</ td>";
j = j + 1;
}
выход = выход + "</ tr>";
j = 1;
}
output = output + "</ table>";
document.write (выход);
}
</ Скрипт>
</ HEAD>
<Тело>
</ Body>
</ Html>
Пример № 2: Пример форм JS:
Создайте программу примера формы, которая собирает имя, фамилию, адрес электронной почты, идентификатор пользователя, пароль и подтверждает пароль от пользователя. Все данные являются обязательными, а введенный адрес электронной почты должен быть в правильном формате. Кроме того, значения, введенные в поле ввода пароля и подтверждения пароля, должны совпадать. После проверки с использованием JavaScript, в выходных данных отобразите правильные сообщения об ошибках красным цветом рядом с текстовым полем, в котором есть ошибка.
Решение с исходным кодом:
<HTML>
<Голова>
<title> Проверка формы </ title>
<script type = "text / javascript">
var divs = new Array ();
divs [0] = "errFirst";
divs [1] = "errLast";
divs [2] = "errEmail";
divs [3] = "errUid";
divs [4] = "errPassword";
divs [5] = "errConfirm";
функция validate ()
{
var input = new Array ();
input [0] = document.getElementById ('first'). value;
input [1] = document.getElementById ('last'). value;
input [2] = document.getElementById ('email'). value;
input [3] = document.getElementById ('uid'). value;
input [4] = document.getElementById ('password'). value;
входные [5] = document.getElementById ('подтвердить'). значение;
var errors = new Array ();
errors [0] = "<span style = 'color: red'> Пожалуйста, введите ваше имя! </ span>";
errors [1] = "<span style = 'color: red'> Пожалуйста, введите свою фамилию! </ span>";
errors [2] = "<span style = 'color: red'> Пожалуйста, введите адрес электронной почты! </ span>";
errors [3] = "<span style = 'color: red'> Пожалуйста, введите свой идентификатор пользователя! </ span>";
errors [4] = "<span style = 'color: red'> Пожалуйста, введите ваш пароль! </ span>";
errors [5] = "<span style = 'color: red'> Пожалуйста, подтвердите ваш пароль! </ span>";
для (я во входах)
{
var errMessage = errors [i];
var div = divs [i];
если (входные данные [i] == "")
document.getElementById (div) .innerHTML = errMessage;
иначе если (я == 2)
{
var atpos = input [i] .indexOf ("@");
var dotpos = input [i] .lastIndexOf (".");
if (atpos <1 || dotpos <atpos + 2 || dotpos + 2> = inputs [i] .length)
document.getElementById ('errEmail'). innerHTML = "<span style = 'color: red'> Введите действительный адрес электронной почты! </ span>";
еще
document.getElementById (div) .innerHTML = "OK!";
}
иначе если (я == 5)
{
var first = document.getElementById ('password'). value;
var second = document.getElementById ('подтвердить'). значение;
если (второй! = первый)
document.getElementById ('errConfirm'). innerHTML = "<span style = 'color: red'> Ваши пароли не совпадают! </ span>";
еще
document.getElementById (div) .innerHTML = "OK!";
}
еще
document.getElementById (div) .innerHTML = "OK!";
}
}
функция finalValidate ()
{
var count = 0;
для (I = 0; я <6; я ++)
{
var div = divs [i];
if (document.getElementById (div) .innerHTML == "ОК!")
количество = количество + 1;
}
если (считать == 6)
document.getElementById ("errFinal"). innerHTML = "Все введенные вами данные верны !!!";
}
</ Скрипт>
</ HEAD>
<Тело>
<table id = "table1">
<TR>
<td> Имя: </ td>
<td> <input type = "text" id = "first" onkeyup = "validate ();" /> </ TD>
<td> <div id = "errFirst"> </ div> </ td>
</ TR>
<TR>
<td> Фамилия: </ td>
<td> <input type = "text" id = "last" onkeyup = "validate ();" /> </ td>
<td> <div id = "errLast"> </ div> </ td>
</ TR>
<TR>
<TD> Электронная почта: </ TD>
<td> <input type = "text" id = "email" onkeyup = "validate ();" /> </ td>
<td> <div id = "errEmail"> </ div> </ td>
</ TR>
<TR>
<td> Идентификатор пользователя: </ td>
<td> <input type = "text" id = "uid" onkeyup = "validate ();" /> </ td>
<td> <div id = "errUid"> </ div> </ td>
</ TR>
<TR>
<TD> Пароль: </ TD>
<td> <input type = "password" id = "password" onkeyup = "validate ();" /> </ td>
<td> <div id = "errPassword"> </ div> </ td>
</ TR>
<TR>
<td> Подтвердите пароль: </ td>
<td> <input type = "password" id = "verify" onkeyup = "validate ();" /> </ td>
<td> <div id = "errConfirm"> </ div> </ td>
</ TR>
<TR>
<td> <input type = "button" id = "create" value = "Create" onclick = "validate (); finalValidate ();" /> </ td>
<td> <div id = "errFinal"> </ div> </ td>
</ TR>
</ Table>
</ Body>
</ Html>
Пример №3: сообщение POPUP с использованием события:
Покажите простое сообщение «Добро пожаловать !!!» на вашей демонстрационной веб-странице, и когда пользователь наводит курсор на сообщение, должно появиться всплывающее окно с сообщением «Добро пожаловать на мою веб-страницу !!!».
Решение:
<HTML>
<Голова>
<Название> Событие !!! </ title>
<script type = "text / javascript">
триггер функции ()
{
document.getElementById ("hover"). addEventListener ("mouseover", popup);
функция popup ()
{
alert («Добро пожаловать на мою веб-страницу !!!»);
}
}
</ Скрипт>
<Стиль>
п
{
Размер шрифта: 50px;
положение: фиксированное;
слева: 550 пикселей;
верх: 300 пикселей;
}
</ Стиль>
</ HEAD>
<body onload = "trigger ();">
<p id = "hover"> Добро пожаловать !!! </ p>
</ Body>
</ Html>