Kodlama / jQuery

Tarih30 Haziran 2017, 23:27
Yorumlar0 Yorum

jQuery - Nasıl Çalışır?

Bu makalemizde jQuery'yi bir HTML dökümanımızda nasıl çalıştıracağımıza değineceğiz.

 

HTML dökümanlarında dışardan bir dosya dahil ederek çalıştırmamız düzenli bir çalışmanın en önemli basamağıdır. CSS dosyalarını ayrı bir dosyada hazırlayıp projeye dahil ettiğimiz gibi jQuery kodlarını da farklı bir dosyaya hazırlayarak HTML sayfamıza dahil edebiliriz.

Her şeyden önce...

jQuery bir kütüphanedir ve bu sebeple kütüphaneyi sayfanıza dahil etmeden hiçbir fonksiyonunu çalıştıramazsınız. Yani ilk adımımız jQuery'i sayfaya dahil etmek olmalıdır. Bu sebeple şöyle bir yol haritası izlemeliyiz.

  1. jQuery'nin resmi sitesine gidelim. (jquery.com)
  2. Download jQuery butonuna tıklayalım.
  3. Karşımıza çıkan sayfada 2 seçeneğimiz var. Ya indireceğiz ve dosyalarımız arasında jQuery kütüphanesini dahil edeceğiz, ya da doğrudan jQuery resmi sitesinden dosyayı çağıracağız.

    Dosyayı İndirmek: Eğer dosyayı indirerek projenize kodları doğrudan eklemek istiyorsanız yapmanız gereken sıkıştırılmış (compressed) ya da sıkıştırılmamış (uncompressed) linklerinden birine tıklayarak dosyayı indirmek. İndirdiğiniz dosyayı ekleyeceğiniz HTML dosyası ile aynı yere kopyalayınız.

    Siteden Çağırmak: Dosyayı siteden çağırıp projenize dahil etmek istiyorsanız sıkıştırılmış (compressed) ya da sıkıştırılmamış (uncompressed) linklerinden birine sağ tıklayarak bağlantı adresini kopyalamak.
     
  4. Her iki durumda da dosyayı çağırmak için bir linke sahip oluyoruz. Artık sayfamıza bu kodları ekleyebiliriz.

Sayfaya kütüphanemizi dahil etmek için <head> </head> tagları arasına aşağıdaki kodu ekleyelim.

<script type="text/javascript" src="https://code.jquery.com/jquery-3.2.1.min.js"></script>

Kodumuzun temeline indiğimizde aslında

<script type="text/javascript" src=""></script>

böyle bir yapıya sahiptir. SRC etiketi içerisinde ise jQuery kütüphanemize ait linki yapıştırıyoruz. Eğer HTML dosyanız ile aynı yere kopyaladıysanız da muhtemelen şöyle bir yapı kurmanız gerekecektir;

<script type="text/javascript" src="jquery-3.2.1.min.js"></script>

Yani SRC etiketine JS dosyanızın linkini belirtmelisiniz.

Başlayalım

Artık kendi jQuery kodlarımızı eklememiz için bir engelimiz kalmadığına göre başlayalım. Eğer sayfamıza bir jQuery kodu eklemek istiyorsak yukarıdaki 2 yöntemi yine kullanabiliriz; Ya dışarıdan dosya çağıracağız ya da doğrudan sayfamıza yazacağız. Her iki yönteminde kullanımı temelde aynı. Şimdi inceleyelim;

1. Dosyayı Dışarıdan Çağırmak

Elimizde yukarıda görüldüğü üzere bir adet index.html dosyamız var. Bu dosyamız dışında javascript dosyamızı da script.js adı ile oluşturduk. index.html dosyamızı açıyoruz ve script.js dosyamızı html dosyamıza dahil ediyoruz. Bu işlemi yaparken şu yapıyı uygulayabiliriz;

index.html

<!DOCTYPE html>
<html>
<head>
	<title>Mert Topuz</title>
	<script type="text/javascript" src="https://code.jquery.com/jquery-3.2.1.js"></script>
	<script type="text/javascript" src="script.js"></script>
</head>
<body>
	İçerik
</body>
</html>

2. Dosyaya Dahil Yazmak

1. yöntemden farklı olarak src özelliğini hiç aktif etmeden doğrudan script tagları arasında yazabiliriz.

<!DOCTYPE html>
<html>
<head>
	<title>Mert Topuz</title>
	<script type="text/javascript" src="https://code.jquery.com/jquery-3.2.1.js"></script>
	<script type="text/javascript">
		.....
	</script>
</head>
<body>
	İçerik
</body>
</html>

Noktalı alana gerekli jQuery veya javascript kodlarını yazabiliriz.

Yorumlar
Bu konu hakkında henüz kimse fikrini belirtmemiş. Siz fikrinizi belirtmek ister misiniz?
Konu hakkında düşüncelerinizi iletin