REFERAT KURS JUMISI / 6lab
.docx6-laboratoriyalıq jumıs
Tema: Maģlıwmatları kiritiw formaların tekseriwshi programma
islep shıģıw
Jumıstıń maqsetı: Javascript tilinde formalardı tekseriwdi úyreniw.
Laboratoriya jumısın orınlaw tártibi:
HTML fayldı jaratıw hám kodların jazıw;
Tayar web betti brauzer arqali tekseriw;
Formlardı tekserip kóriw.
Máseleniń qoyılıwı: Alinģan bilimlerden paydalanıp JavaScript tilinde formlar mene tekseriw kodın jazıw.
Máseleniń sheshiliwi:
Dáslep index.html faylin jaratip oģan HTML hám JavaScript kodın jazamız:
<!DOCTYPE html>
<html>
<head>
<title>Bootstrap</title>
<link rel="stylesheet" type="text/css" href="css/bootstrap.css">
<link rel="stylesheet" type="text/css" href="css/style.css">
</head>
<body>
<nav class="navbar navbar-expand-lg navbar-dark bg-dark">
<div class = "container">
<a class="navbar-brand" href="#"><strong>Miyman</strong></a>
<button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbarNav" aria-controls="navbarNav" aria-expanded="false" aria-label="Toggle navigation">
<span class="navbar-toggler-icon"></span>
</button>
<div class="collapse navbar-collapse" id="navbarNav">
<ul class="navbar-nav mx-auto">
<li class="nav-item active">
<a class="nav-link" href="#">Bas bet <span class="sr-only">(current)</span></a>
</li>
<li class="nav-item">
<a class="nav-link" href="#">Miymanxanalar</a>
</li>
<li class="nav-item">
<a class="nav-link" href="#">Restorantlar</a>
</li>
</ul>
<form class="form-inline my-2 my-lg-0">
<input class="form-control mr-sm-2" type="search" placeholder="Izlew.." aria-label="Search">
<button class="btn btn-primary my-2 my-sm-0" type="submit">Izlew</button>
</form>
</div>
</div>
</nav>
<div class = "container body">
<form action = "#">
<h1 align="center">Miymanxanaģa buyirtpa beriw</h1>
<hr>
<div class = "row">
<div class = "col-md-4">
<h4>Qala</h4>
<input type="text" id = "city" class = "form-control-lg form-control" placeholder="Qaysi qaladan?">
</div>
<div class = "col-md-4">
<h4>Baha</h4>
<input type="text" id = "cost" class = "form-control-lg form-control" placeholder="Baslaniw bahasi?">
</div>
<div class = "col-md-4">
<h4>Adamlar sani</h4>
<input type="text" id = "people" class = "form-control-lg form-control" placeholder="Adamlar sani">
</div>
</div>
<div class = "row body">
<div class = "col-md-8">
<span id = "cityerror"></span>
<span id = "costerror"></span>
<span id = "peopleerror"></span>
</div>
<div class = "col-md-4">
<button class = "btn btn-lg btn-block btn-primary" onclick="check()">Izlew</button>
</div>
</div>
</form>
</div>
<script>
function check() {
city = document.getElementById('city').value;
cost = parseInt(document.getElementById('cost').value);
people = parseInt(document.getElementById('people').value);
if (city == '')
document.getElementById('cityerror').innerHTML = '<p class = "alert alert-danger">Qala ati maydani bos bolmawi kerek!</p>';
else
document.getElementById('cityerror').innerHTML = '';
if (cost == '' || !Number.isInteger(cost))
document.getElementById('costerror').innerHTML = '<p class = "alert alert-danger">Baslaniw bahasi maydani bos bolmawi ha\'m tsifrlardan ibarat boliw kerek!</p>';
else
document.getElementById('costerror').innerHTML = '';
if (people == '' || !Number.isInteger(people))
document.getElementById('peopleerror').innerHTML = '<p class = "alert alert-danger">Adamlar sani maydani bos bolmawi ha\'m nolden u\'lken sannan ibarat boliw kerek!</p>';
else
document.getElementById('peopleerror').innerHTML = '';
}
</script>
</body>
</html>
Browzerdegi nátiyje:
