JQuery, normalde saf javascript ile de yapabileceğimiz işleri daha kolay yapabilelim diye javascript ile oluşturulmuş hazır fonksiyonlar barındırır.
Aynı soruyu Bootstrap ve CSS için de sorabilirsiniz. CSS varken Bootstrap'a neden ihtiyacımız olsun? Daha hızlı sonuç alabilmek için.
Aşağıda aynı işleve sahip kodun Javascript ve JQuery örneği var.
// SAF JAVASCRIPT
const $loginMenu = document.getElementById("loginMenu");
document.getElementById("login").addEventListener("click", () => {
$loginMenu.style.display = $loginMenu.style.display === "none" ? "inline" : "none";
});
// JQUERY
const $loginMenu = $("#loginMenu");
$("#login").click(() => {
$loginMenu.toggle();
});
(Kaynak: https://tr.bitdegree.org/tutorial/jquery-ve-javascript-arasindaki-fark)
JQuery javascript'ten daha iyi olduğu iddiasıyla çıkmadı. Zaten JQuery kullandığınızda sadece javascript ile önceden hazırlanmış hazır fonksiyonlar kullanmış oluyorsunuz.
JQuery ilk çıktığında "az kod çok iş" sloganıyla çıktı. Dediler ki "Javascript'te tekerleği yeniden keşfetmeyin, bakın biz sizin sıkça kullanacağınız işlemler için kolayca kullanabileceğiniz fonksiyonlar oluşturduk. Bunları kullanıp hızlıca sonuca ulaşın."
Performans olarak değerlendirirsek doğal olarak saf javascript daha performanslı çalışır. Çünkü sadece ihtiyacınız olan kodu kullanırsınız. JQuery ise kolay kullanım amacıyla hazır fonksiyonları içinde birçok şeyi kontrol etmek zorundadır.
JQuery'e rakip olarak React'ı gösterebiliriz. İkisi de javascript'i kullanmanın farklı yollarını sunar ama temelde ikisi de javascript ile oluşturulmuştur.
React da aynı şekilde javascript'ten daha iyi olduğunu iddia etmez. Ama JQuery'den iyi olduğunu iddia eder. Der ki "Benim yöntemlerimle kodlama yaparsanız JQuery'deki yöntemlerin yaratacağı performans kaybını yaşamazsınız."
Svelte de React için aynısını söyler.
React, Vue, Svelte... Bunların sorunu derlenerek kodu optimize etmesi gerekliliği. Ama JQuery doğrudan çalışma imkânı sunar.
JQuery kullandığınızda kodu değiştirip kaydettiğinizde iş bitmiştir. Ama React kullandığınızda önce kodu değiştirir, sonra build alır, sonra eski kod yerine bu yeni kodu koyarsınız. Tabi daha pratik yollardan bu işlemi yapmanın yolları da var ama o zaman da o daha pratik yolları oluşturmakla uğraşmanız gerekir.
Yani JQuery ve Javascript arasındaki meseleyi Bootstrap ve CSS arasındaki mesele gibi görebilirsiniz. Bootstrap da içinde bir sürü hiç kullanmayabileceğiniz kod barındırır. Hatta html kodunuzu da bir sürü kodla doldurur. Ama amacımız hızlı iş çıkarmaksa ve çok çok özgün bir iş yapmayacaksak kullanabiliriz.
Backend tarafında da PHP ile Laravel veya Codeigniter arasındaki ilişkiye benzetebiliriz. Laravel neticede PHP ile oluşturulmuştur ama saf PHP ile yapmanın çok zaman alacağı işleri daha kısa sürede yapabilmemizi sağlayan hazır fonksiyonlara ev sınıflara sahiptir.
Kodu güncelledim tekrar deneyin. Kod içinde geçen exit(); kodlarını silin.
Sayfanın altında üstünde başka kodlar varsa onlar etkiliyor da olabilir.
Sorun stillerin gelmemesiyse stilleri sayfanın üst kısımlarında yazın.
Şu an veriyi kutuya yazıyor olmalı. Ekran görüntüsü atabilir misiniz?
Stilllerinizi sayfanın üstünde çağırmalısınız.
<?php
$language = isset($_GET['language']) ? $_GET['language'] : 'en';
$userAgent = isset($_GET['userAgent']) ? $_GET['userAgent'] : 'WikiBot/1.0 (+http://'.$_SERVER['SERVER_NAME'].'/)';
$betterResults = !( isset($_GET['betterResults']) && ($_GET['betterResults'] == 'false' || $_GET['betterResults'] == 0));
$proxy = isset($_GET['proxy']) ? $_GET['proxy'] : null;
$imageProxy = !(isset($_GET['imageProxy']) && ($_GET['imageProxy'] == 'false' || $_GET['imageProxy']== 0));
$DEBUG = isset($_GET['DEBUG']) ? $_GET['DEBUG'] : null;
// Set the Parameter
$options = array(
'language' => $language,
'userAgent' => $userAgent,
'betterResults' => $betterResults,
'proxy' => $proxy,
'imageProxy' => $imageProxy,
'DEBUG' => $DEBUG,
);
require_once __DIR__.'/ciktisi.php';
// Start the Wikipedia API Class
$wiki = new wiki($options);
// Output the API Response
$apiResult = $wiki->api($_GET['q']);
if($apiResult) { ?>
<div class="kutucugumuz">
<div class="bilgi viki5">
<h3 class="yazilar"><i class="ikon"></i> Türkçe wikimiz</h3>
</div>
<div class="sag-bilgi">
<div class="left-s"><span class="digerb"></span></div>
<div class="">
<div class="kucuk">
<div class="">
<?=$apiResult?>
</div>
</div>
</div>
</div>
</div>
<?php } else { ?>
<div>Buraya da sonuç dönmediğinde görüntülenecek içerik gelecek</div>
<?php }
// Print the Script Runtime in DEBUG Mode
if ( isset($DEBUG) ) {
echo "<pre>\n\n\tRuntime: ".number_format((microtime(true)-$_SERVER['REQUEST_TIME_FLOAT']),3);
}
?>
ekran görüntüsü görme şansım var mı?
İçine yazdığınızda div'leriniz görünüyor. Ama içi boş div'ler.
echo $apiResult; yazan yere var_dump($apiResult); yazıp sonuç geldiğinde oraya ne çıktı verdiğini bana göstermeniz gerekiyor.
Sonuç gelmediğinde de else içine yazdıklarınız görünüyor olmalı.
div'leri yukarı yazmayın.
Buraya sonuç döndüğünde ne istiyorsak o içerik gelecek. kutucuk, küçük, div'ler vs her ne istersek buraya...
yazdığım yere yazın.
else içindeki stilleri kaldırın. Ona gerek yok. Sonuç dönmediğinde görünecek html verisini oraya yazın.
div'lerinizi nereye yazıyorsunuz?
çalışınca ne hata veriyor?
Bi'yeri yanlış yazmışım. Önceki mesajımı güncelledim. Tekrar deneyin.
Belirttiğim yerlere istediğiniz html içeriği ekleyebilirsiniz...
<?php
$language = isset($_GET['language']) ? $_GET['language'] : 'en';
$userAgent = isset($_GET['userAgent']) ? $_GET['userAgent'] : 'WikiBot/1.0 (+http://'.$_SERVER['SERVER_NAME'].'/)';
$betterResults = !( isset($_GET['betterResults']) && ($_GET['betterResults'] == 'false' || $_GET['betterResults'] == 0));
$proxy = isset($_GET['proxy']) ? $_GET['proxy'] : null;
$imageProxy = !(isset($_GET['imageProxy']) && ($_GET['imageProxy'] == 'false' || $_GET['imageProxy']== 0));
$DEBUG = isset($_GET['DEBUG']) ? $_GET['DEBUG'] : null;
// Set the Parameter
$options = array(
'language' => $language,
'userAgent' => $userAgent,
'betterResults' => $betterResults,
'proxy' => $proxy,
'imageProxy' => $imageProxy,
'DEBUG' => $DEBUG,
);
require_once __DIR__.'/ciktisi.php';
// Start the Wikipedia API Class
$wiki = new wiki($options);
// Output the API Response
$apiResult = $wiki->api($_GET['q']);
if($apiResult) { echo $apiResult; ?>
<div>Buraya sonuç döndüğünde ne istiyorsak o içerik gelecek. kutucuk, küçük, div'ler vs her ne istersek buraya...</div>
<?php exit(); }
else { ?>
<div>Buraya da sonuç dönmediğinde görüntülenecek içerik gelecek</div>
<?php }
// Print the Script Runtime in DEBUG Mode
if ( isset($DEBUG) ) {
echo "<pre>\n\n\tRuntime: ".number_format((microtime(true)-$_SERVER['REQUEST_TIME_FLOAT']),3);
exit();
}
Tamam zaten sonuç dönmeyince div'leri geçersiz saymasını istedim.
Bu durumda şunu yapabilirsiniz:
<?php
//... önceki kodlarınız...
$apiResult = $wiki->api($_GET['q']);
if(!$apiResult) {
?>
<div>Buraya sonuç dönmediğinde görüntülenecek içerik gelecek...</div>
<?php
exit();
}
echo $apiResult;
if (isset($DEBUG)) {
echo "<pre>\n\n\tRuntime: ".number_format((microtime(true)-$_SERVER['REQUEST_TIME_FLOAT']),3);
exit();
}
?>
<div class="kutucugumuz"></div>