Yeni bir Web Tasarım ve Programlama dersi makalesi ile birlikteyiz.
Analitik geometri sorusunu jQuery kodlarıyla çözmeye çalışalım. Matematik bilgisi gerektiren bir soru. Hem üniversite sınavına hazırlanalım. Hem jQuery kodları, Bootstrap temasıyla bu soruyu çözelim. Öncelikle çözüm için matematik bilgilerini tazeleyelim.
Çözüme ait sorunun matematiksel formülünü bulalım.
Yukarıdaki AB uzunluğunun formülüne göre X1, X2, Y1, Y2 uzunlukları verilmelidir. Formüle göre matematiksel işlem gerçekleştirilip sonuç bulunmalıdır.
Bu uygulama ile matematiksel işlemler olan çıkarma, kare alma, toplama ve karekök alma işlemini öğreneceğiz.
Visual Studio programını açalım.
İsmi AnalitikGeometri olan yeni bir proje ekleyelim.
Projemizde uzunluk isminde bir html sayfası oluşturalım.
Web sayfasını temel özelliklerini belirleyerek düzenleyelim.
Önce BootStrap kütüphanelerini projeye dahil edelim. Bunu yapmanın iki yolu vardır. Kütüphane dosyalarını sunucudan kullanabiliriz. Bu durumda projemizin kapladığı alan küçülür. Ancak bilgisayarın internete bağlı olması gerelir. Ya da kütüphane dosyalarını projeye dahil edebilirsiniz. Projenin kapladığı alan artmasına rağmen internete bağlı olmanıza gerek yoktur. Biz kütüphaneyi internetten indirip kullanalım.
<link href="css/bootstrap.min.css" rel="stylesheet" type="text/css" />
<script src="js/jquery-3.2.1.js" type="text/javascript"></script>
<script src="js/bootstrap.min.js" type="text/javascript"></script>
Daha sonra body etiketi arasına html tasarım kodlarını yazalım.
<div class="header text-center">
<h1>
Analitik Geometri
</h1>
<p>
İki nokta arasındaki uzunluğu bulma işlemi
</p>
</div>
<div class="container">
<table class="table table-bordered" style="width:400px; margin:auto">
<caption class="text-center alert-info">
Koordinat Düzlemi Giriş Ekranı
</caption>
<tbody>
<tbody>
<tr>
<td>
<label for="X1">X<sub>1</sub> Noktası:</label>
<input type="text" class="form-control" id="X1"
autofocus />
</td>
</tr>
<tr>
<td>
<label for="Y1">Y<sub>1</sub> Noktası:</label>
<input type="text" class="form-control" id="Y1" />
</td>
</tr>
<tr>
<td>
<label for="X2">X<sub>2</sub> Noktası:</label>
<input type="text" class="form-control" id="X2"
autofocus />
</td>
</tr>
<tr>
<td>
<label for="Y1">Y<sub>2</sub> Noktası:</label>
<input type="text" class="form-control" id="Y2" />
</td>
</tr>
<tr>
<td>
<button id="btnGoster" type="button" class="btn btn-info">
Hesapla
</button>
</td>
</tr>
<tr>
<td>
<label id="sonuc"></label>
</td>
</tr>
</tbody>
</table>
</div>
Şimdi de jQuery kodlarını ekleyelim.
<script type="text/javascript">
$(document).ready(function () {
$("#btnGoster").click(function () {
var $X1 = parseInt($("#X1").val());
var $X2 = parseInt($("#X2").val());
var $Y1 = Number($("#Y1").val());
var $Y2 = Number($("#Y2").val());
var $uzunlukX = Math.pow($X2 - $X1, 2);
var $uzunlukY = Math.pow($Y2 - $Y1, 2);
var $uzunluk = Math.sqrt($uzunlukX + $uzunlukY).toFixed(2);
$("#sonuc")
.html("IABI = " + $uzunluk)
.css({
"font-size": "16px",
"color": "red"
})
.animate({ marginLeft: "100px" }, 2000);
});
});
</script>
Projemizi kaydedip çalıştırdıktan sonra A ve B noktalarına ait X ve Y değerlerini girelim ve Hesapla butonuna tıklayalım. Ekrana aşağıdaki gibi bir pencere gelir.
İşte bu kadar. Umarım faydalı olmuştur. Yeni bir makalede görüşmek üzere…