Практически JavaПримери за скриптове с изходен код Code
Джеймс Хартман
⚡ Умно обобщение
Практически Code Примери с използване JavaСкриптовете демонстрират как циклите, валидирането на формуляри и събитията решават ежедневните задачи на браузъра. Тази статия представя генератор на таблица за умножение, пълен валидатор на регистрационни формуляри, изскачащ прозорец, задействан при задържане на курсора на мишката, дигитален часовник на живо и практики, които поддържат надеждността на тези скриптове.
Какво ще изградите в тези JavaПримери за скриптове
Всеки пример по-долу е цялостна HTML страница, която се изпълнява във всеки браузър без стъпка за изграждане или външна библиотека. Заедно те обхващат трите умения, които се появяват в почти всеки скрипт на браузър: генериране на маркиране от данни, валидиране на потребителски вход и реагиране на събития.
| Пример | Концепция, практикувана | Използвани ключови методи |
|---|---|---|
| Таблица за умножение | Вложени цикли и изграждане на низове | подкана, за, докато, document.write |
| Проверка на формуляра | Масиви, условия и актуализации на DOM | getElementById, indexOf, lastIndexOf, innerHTML |
| Изскачащо съобщение | Обработка на събития | addEventListener, предупреждение |
| Digiчасовник | Таймери и форматиране на дата | setInterval, Date, padStart, textContent |
Основни познания за JavaСценарий синтаксисът се приема. Ако циклите все още са непознати, прочетете как да използваме цикли в JavaСценарий преди да започне.
Пример №1: JavaТаблица за умножение на скрипт
Създайте проста таблица за умножение, която пита потребителя за броя на редовете и колоните.
Решение:
<html>
<head>
<title>Multiplication Table</title>
<script type="text/javascript">
var rows = prompt("How many rows for your multiplication table?");
var cols = prompt("How many columns for your multiplication table?");
if(rows == "" || rows == null)
rows = 10;
if(cols== "" || cols== null)
cols = 10;
createTable(rows, cols);
function createTable(rows, cols)
{
var j=1;
var output = "<table border='1' width='500' cellspacing='0' cellpadding='5'>";
for(i=1;i<=rows;i++)
{
output = output + "<tr>";
while(j<=cols)
{
output = output + "<td>" + i*j + "</td>";
j = j+1;
}
output = output + "</tr>";
j = 1;
}
output = output + "</table>";
document.write(output);
}
</script>
</head>
<body>
</body>
</html>
Изход (3 реда и 4 колони):
1 2 3 4 2 4 6 8 3 6 9 12
Code обяснение: Външният цикъл for създава по един ред от таблицата на итерация, докато вътрешният цикъл while запълва този ред с по една клетка на колона. Броячът j се нулира на 1 след всеки ред, което е стъпката, която повечето начинаещи забравят. Без това нулиране, само първият ред щеше да съдържа клетки.
💡 Съвет: Функцията prompt винаги връща низ. Изразът i*j работи, защото JavaСкриптът преобразува и двата операнда в числа за умножение, но сравнение, като например rows > 5 би сравнил текст. Обгърнете входа в Number() когато стойността се използва както за аритметични изчисления, така и за сравнение.
Пример №2: Пример за JS формуляри
Създайте примерна програма за формуляри, която събира собствено име, фамилия, имейл адрес, потребителско име, парола и потвърждение на паролата от потребителя. Всички полета за въвеждане са задължителни и въведеният имейл адрес трябва да бъде в правилния формат. Също така, стойностите, въведени в текстовите полета за парола и потвърждение на паролата, трябва да са еднакви. След валидиране с помощта на JavaСценарий, показвайте съответните съобщения за грешки в червено точно до текстовото поле, където има грешка.
Решение с източник Code:
<html>
<head>
<title>Form Validation</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";
function validate()
{
var inputs = new Array();
inputs[0] = document.getElementById('first').value;
inputs[1] = document.getElementById('last').value;
inputs[2] = document.getElementById('email').value;
inputs[3] = document.getElementById('uid').value;
inputs[4] = document.getElementById('password').value;
inputs[5] = document.getElementById('confirm').value;
var errors = new Array();
errors[0] = "<span style='color:red'>Please enter your first name!</span>";
errors[1] = "<span style='color:red'>Please enter your last name!</span>";
errors[2] = "<span style='color:red'>Please enter your email!</span>";
errors[3] = "<span style='color:red'>Please enter your user id!</span>";
errors[4] = "<span style='color:red'>Please enter your password!</span>";
errors[5] = "<span style='color:red'>Please confirm your password!</span>";
for (i in inputs)
{
var errMessage = errors[i];
var div = divs[i];
if (inputs[i] == "")
document.getElementById(div).innerHTML = errMessage;
else if (i==2)
{
var atpos=inputs[i].indexOf("@");
var dotpos=inputs[i].lastIndexOf(".");
if (atpos<1 || dotpos<atpos+2 || dotpos+2>=inputs[i].length)
document.getElementById('errEmail').innerHTML = "<span style='color: red'>Enter a valid email address!</span>";
else
document.getElementById(div).innerHTML = "OK!";
}
else if (i==5)
{
var first = document.getElementById('password').value;
var second = document.getElementById('confirm').value;
if (second != first)
document.getElementById('errConfirm').innerHTML = "<span style='color: red'>Your passwords don't match!</span>";
else
document.getElementById(div).innerHTML = "OK!";
}
else
document.getElementById(div).innerHTML = "OK!";
}
}
function finalValidate()
{
var count = 0;
for(i=0;i<6;i++)
{
var div = divs[i];
if(document.getElementById(div).innerHTML == "OK!")
count = count + 1;
}
if(count == 6)
document.getElementById("errFinal").innerHTML = "All the data you entered is correct!!!";
}
</script>
</head>
<body>
<table id="table1">
<tr>
<td>First Name:</td>
<td><input type="text" id="first" onkeyup="validate();" /></td>
<td><div id="errFirst"></div></td>
</tr>
<tr>
<td>Last Name:</td>
<td><input type="text" id="last" onkeyup="validate();"/></td>
<td><div id="errLast"></div></td>
</tr>
<tr>
<td>Email:</td>
<td><input type="text" id="email" onkeyup="validate();"/></td>
<td><div id="errEmail"></div></td>
</tr>
<tr>
<td>User Id:</td>
<td><input type="text" id="uid" onkeyup="validate();"/></td>
<td><div id="errUid"></div></td>
</tr>
<tr>
<td>Password:</td>
<td><input type="password" id="password" onkeyup="validate();"/></td>
<td><div id="errPassword"></div></td>
</tr>
<tr>
<td>Confirm Password:</td>
<td><input type="password" id="confirm" 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>
Очаквано поведение:
Empty first name -> Please enter your first name! Email "ann@site" -> Enter a valid email address! Email "ann@site.com" -> OK! Passwords differ -> Your passwords don't match! All six fields valid -> All the data you entered is correct!!!
Code обяснение: Три масива работят паралелно. входове запазва текущите стойности, грешки съдържа съответстващите съобщения и divs съдържа идентификатора на контейнера, който показва всяко съобщение. Следователно индексът свързва поле, текста на грешката му и местоположението му на изхода. Клонът за имейл приема адрес само когато знакът at не е първият символ и когато поне два символа разделят знака at от последната точка.
⚠️ Предупреждение: Валидирането от страна на клиента подобрява потребителското изживяване, но не осигурява сигурност. Всеки може да го деактивира. JavaСкриптирайте или публикувайте директно до крайната точка, така че всяко показано тук правило трябва да се повтори на сървъра.
Пример №3: Изскачащо съобщение, използващо събитие
Покажете просто съобщение „Добре дошли!!!“ на вашата демонстрационна уеб страница и когато потребителят задържи курсора на мишката върху съобщението, трябва да се покаже изскачащ прозорец със съобщението „Добре дошли на моята уеб страница!!!“.
Решение:
<html> <head> <title>Event!!!</title> <script type="text/javascript"> function trigger() { document.getElementById("hover").addEventListener("mouseover", popup); function popup() { alert("Welcome to my WebPage!!!"); } } </script> <style> p{ font-size: 50px; position: fixed; left: 550px; top: 300px; } </style> </head> <body onload="trigger();"> <p id="hover">Welcome!!!</p> </body> </html>
Очаквано поведение:
Page loads -> the text "Welcome!!!" appears in large type Mouse hovers -> an alert box shows "Welcome to my WebPage!!!"
Code обяснение: Слушателят е прикачен вътре в тригерната функция, която се изпълнява при събитието onload в тялото. Изчакването на зареждане е важно, защото параграфът с идентификатор „hover“ не съществува, докато заглавието все още се анализира. Същият резултат се постига по-чисто чрез поставяне на скрипта точно преди затварящия таг на тялото или чрез добавяне на атрибута defer.
Пример №4: На живо Digiтал часовник, използващ setInterval
Показване на текущото време на страницата и обновяване веднъж на всяка секунда. Този пример въвежда таймери и показва съвременната алтернатива на document.write.
<html> <head> <title>Digital Clock</title> </head> <body> <h2 id="clock">--:--:--</h2> <script> function showTime() { const now = new Date(); const hh = String(now.getHours()).padStart(2, "0"); const mm = String(now.getMinutes()).padStart(2, "0"); const ss = String(now.getSeconds()).padStart(2, "0"); // textContent is safer than innerHTML for plain text document.getElementById("clock").textContent = hh + ":" + mm + ":" + ss; } showTime(); // draw immediately setInterval(showTime, 1000); // then refresh every second </script> </body> </html>
Очаквано поведение:
09:05:07 09:05:08 09:05:09 (the heading updates in place once per second)
Еднократното извикване на showTime преди setInterval избягва видимо едносекундно забавяне при отваряне на страницата. Използвайте clearInterval със стойността, върната от setInterval, когато часовникът трябва да спре.
Най-добри практики за писане на тези JavaПримери за скриптове
Трите оригинални примера датират от по-ранен стил JavaСценарий. Списъкът по-долу показва какво да се промени при адаптирането им за производствена работа.
- Заменете document.write: Изтрива целия документ, когато е извикан след зареждане на страницата. Създайте елемент и задайте textContent или добавете възел вместо това.
- Декларирайте всяка променлива: Използвайте let и const, вместо да разчитате на имплицитни глобални променливи като counter
iв горните цикли. - Предпочитайте textContent пред innerHTML: Вмъкването на предоставен от потребителя текст с innerHTML отваря дупка за междусайтови скриптове.
- Преместете манипулаторите извън маркировката: Заменете атрибутите onkeyup и onclick с addEventListener, което държи поведението отделно от структурата.
- Преобразуване на входния сигнал: Обвивайте стойностите в Number() преди да ги използвате при сравнения, тъй като prompt винаги връща низ.
- Валидирайте отново на сървъра: Третирайте проверките на браузъра само като удобен слой.
За да разгледаме по-подробно тези примери, прегледайте JavaМетоди за масиви от скриптове за паралелните масиви, използвани във валидатора на формуляри, JavaНизове на скрипта за проверките на позицията по имейл и бисквитки в JavaСценарий да запомни стойностите, въведени от посетителя. Решете къде принадлежи готовият скрипт, като го прочетете вътрешен и външен JavaСценарий.
