jQuery Turkish document added.

author: LeaveNhA <seckinkukrer@aof.anadolu.edu.tr> 2020-04-12 21:21:45 +0300
committer: LeaveNhA <seckinkukrer@aof.anadolu.edu.tr> 2020-04-12 21:21:45 +0300
commit: 80016199990c9009217d2fe28be4b317fbe90dae (patch)
tree: 1692cfc8ad2f2b71acfe3656efc1572c12ae059c /tr-tr
parent: 2f81283970ca1f613c81a133908564b4f3e2a413 (diff)
1 files changed, 337 insertions, 0 deletions
diff --git a/tr-tr/jquery-tr.html.markdown b/tr-tr/jquery-tr.html.markdown
new file mode 100644
index 00000000..8c321349
--- /dev/null
+++ b/tr-tr/jquery-tr.html.markdown
@@ -0,0 +1,337 @@
+---
+language: jquery
+contributors:
+    - ["Seçkin KÜKRER", "https://github.com/leavenha"]
+filename: jquery-tr-tr.js
+lang: tr-tr
+---
+
+# Tanım
+
+jQuery, (IPA: ˈd͡ʒeɪˌkwɪəɹiː).
+j + Query, olarak isimlendirilmiş, çünkü çoğunlukla HTML elementlerini sorgulamak ve onları manipüle etmek için kullanılır.
+
+jQuery, 2006 yılında geliştirilmiş ve günümüzde halen kullanımı yaygın, görece en popüler çapraz-platform JavaScript kütüphanelerinden birisidir. Şimdilerde jQuery ekibi tarafından gelişimi devam etmektedir. Dünyanın bir çok yerinden büyük şirketler ve bağımsız yazılım ekipleri tarafından kullanılmaktadır.
+
+Genel kullanım amacı animasyonlardır; Galeri, ek menü, sayfa geçişleri, ve diğer tüm gerçeklemelere sağladığı kolaylıkla birlikte Flash'ın alternatifi olarak yorumlanabilir. [Ajax][ajax-wikipedia-page] işlemleri de dahil olmak üzere olay-yönetimi, döküman manipülasyonu ve bir çok programlama görevini kolaylaştırır.
+
+Resmi sitesinden ([jQuery][jquery-official-website]) indirip web sitenize yükleyebilirsiniz. jQuery günümüz JavaScript kütüphaneleri gibi, küçültülmüş boyutlarda bulut tabanlı İçerik Dağıtım Ağı sistemleri sayesinde bağımsız olarak da sitenize eklenebilir.
+
+Kütüphanenin kullanımı ile, jQueryUI gibi ek paketlerle gelişmiş ve modern arayüzler gerçekleyebilirsiniz.
+
+Fakat, jQuery'ye giriş yapmadan önce elbetteki bu kütüphanenin üzerine kurulduğu teknoloji olan [JavaScript'i öğrenmelisiniz][javascript-learnxinyminutes-page].
+
+```js
+
+// Bu belgedeki değişken isimleri Türkçe,
+// ve [Lower Camel Case] notasyonu uygulamaktadır.
+// Bu belgedeki kod parçalarının çıktıları,
+// onları uyguladığınız dökümanın içeriğine bağlı olarak değişmektedir.
+
+// Döküman boyunca, aşağıdaki gösterimde
+// Kod - Çıktı ikilisi ile içeriğin anlamlandırılması
+// kolaylaştırılmaya çalışmıştır.
+// ornek_kod_parcasi();
+// => "ÖRNEK ÇIKTI"
+
+// *. Konsept
+// jQuery DOM nesnelerini seçmek için inovatif bir yol sunar.
+// `$` değişkeni, `jQuery` kütüphanesine işaret eder.
+// Fonksiyon notasyonu ile DOM nesnelerini elde eder
+// ve üzerinde işlemler gerçekleştirirsiniz.
+$(window)
+// => jQuery [Window] (1)
+// Bize tarayıcının belirlediği window nesnesini verir.
+
+// 1. Seçiciler
+// Tüm nesneleri seçmek için `*` çağırımı yapılır.
+const hepsi = $('*');
+// => jQuery [<html>, <head>, <meta>,
+// .... <meta>, <title>, <meta>, <meta>,
+// .... <meta>, <link>, <link>, …] (1134) = $1
+
+// Seçiciler, jQuery'de bir nesne seçmek için kullanılırlar,
+const sayfa = $(window);
+// => jQuery [window] (1)
+// Sayfa, açık döküman nesnesini seçer.
+
+// Elementler, kendileri için seçicidirler.
+const tumParagraflar = $('p');
+// => jQuery [<p>, <p>, <p>] (3)
+
+// Seçiciler aynı zamanda CSS seçicileri olabilir.
+const mavi = $('.mavi');
+// => jQuery [<p class='mavi'] (1)
+
+// Aynı zamanda element ile birlikte kullanılabilirler.
+const maviParagraf = $('p.mavi');
+// => jQuery [<p class='mavi'>] (1)
+
+// Özellik seçicileri de mevcuttur,
+// Elementin özelliği için seçim yaparlar.
+const isimSecicisi = $('input[name*="kayit.form"]');
+// => jQuery [<input name='kayit.form.sifre'>,
+//            <input name='kayit.form.dogumtarihi'> ...] (10)
+
+// Diğer özellik seçiciler;
+/*
+- Özelliğin içinde arayan; *=
+- Özelliğin içinde verilen kelimeleri arayan; ~=
+  |-(kelimeler boşlukla ayrılmalı, *='den farkına dikkat ediniz.)
+- Özelliğin başlangıç verisini arayan; ^=
+- Özelliğin bitiş verisini arayan; $=
+- Özelliği tamamen karşılaştıran; =
+- Özelliğin eşitsizlik durumunu karşılaştıran; !=
+
+Diğer tüm seçiciler için resmi siteyi kontrol ediniz.
+*/
+
+// 2. Olaylar ve Efektler
+// - Olaylar 
+// jQuery kullanıcı ile tarayıcı arasındaki etkileşimi olaylar ile ele alır.
+
+// En yaygın kullanımı tartışmasız ki Dökümanın Yüklenmesi olayıdır.
+
+// $.ready fonksiyonu, argüman olarak aldığı fonksiyonu,
+// seçilen eleman tamamen yüklendiğinde çağıracaktır.
+$(document).ready(function(){
+  // Dökümanın tamamı yüklendiğine göre, iş mantığımı çağırabiliriz.
+  console.info('Döküman yüklendi!');
+})
+// => jQuery [#document] (1)
+
+// Bir dökümanın tamamının yüklenmeden,
+// herhangi bir iş mantığı çalıştırmanın
+// neden kötü bir fikir olduğunu merak ediyorsanız,
+// ileri okuma kısmına danışabilirsiniz.
+
+// Önce Olay tanımlayalım.
+
+// Tıklama olayı için `$.click` olay tetikleyicisi kullanılıyor.
+$('.mavi').click(function(){
+  // Unutmayın ki, önceden tanımlanmış
+  // bir fonksiyonu da argüman olarak verebilirsiniz.
+  console.info('Mavi butona tıkladın!');
+})
+// => jQuery [<button>, <button>, <button>, <button>, <button>, …] (365)
+
+// Çift Tıklama olayı için `$.dblclick` olay tetikleyicisi kullanılıyor.
+$('.mavi').dblclick(function(){
+  console.info('Mavi butona çift tıkladın!');
+})
+// => jQuery [<button>, <button>, <button>, <button>, <button>, …] (365)
+
+// Seçilen Elemente birden fazla tetiklenecek fonksiyon tanımalamak
+// istersek, Olayları ve Fonksiyonları Anahtar-Değer yapısı sağlayan
+// Objeleri kullanarak da çağırabiliriz.
+
+// => tetiklenecekFonksiyon
+$('.mor').on({
+  click: () => console.info('Tek tıklama ile tetiklendim!'),
+  dblclick: () => console.info('Çift tıklama ile tetiklendim!'),
+  // ...
+});
+// => jQuery [<button>, <button>, <button>, <button>, <button>, …] (365)
+
+// Diğer olay tetikleyicileri;
+/*
+Elemente,
+- Fokus/Odaklanma; $.focus
+- Fokus/Odaklanmanın kaybedilmesi; $.blur
+- Farenin alanına girmesi; $.mouseenter
+- Farenin alanından çıkması; $.mouseleave
+
+Diğer tüm olay tetikleyicileri için resmi siteyi kontrol ediniz.
+*/
+
+// Tanımlanan olayları tetiklemek için,
+// Kullanıcı-Tarayıcı etkileşimi yerine elle çağrı yapmak da mümkün.
+// Tanımlama ile çağırım arasındaki fark sadece sağlanan argümanlardır.
+// Argümansız çağırım, olayı tetikler.
+
+// Tıklama olayını tetiklemek için.
+$('.mavi').click();
+// => Mavi butona tıkladın!
+// => jQuery [<button>] (1) 
+
+// Çift Tıklama olayını tetiklemek için.
+$('.mavi').dblclick();
+// => Mavi butona çift tıkladın!
+// => jQuery [<button>] (1) 
+
+// - Efektler
+// jQuery bir çok ön-tanımlı efekt sunmakta.
+// Bu efektler, belirli parametlerle, farklı iş mantıklarını
+// gerçeklemenize izin verebilir.
+// Önce parametresiz işlevlere göz atalım.
+
+// Elementleri saklayabilir,
+$('#slaytresmi').hide();
+// => jQuery [<img id='slaytresmi'>] (1)
+
+// Gizlenen elementleri tekrar görünür yapabilir,
+$('#slaytresmi').show();
+// => jQuery [<img id='slaytresmi'>] (1)
+
+// Yada dilediğiniz CSS niteliğini anime edebilirsiniz,
+
+// Bu parametre, anime etmek istediğiniz CSS özelliklerini
+// belirleyen Obje bilgisidir.
+// Yükseklik ve Genişlik bilgileri için değerler belirliyoruz.
+const animeEdilecekCSSOzellikleri =
+  {
+    weight: "300px",
+    height: "300px"
+  };
+
+// Diğer anime edilebilir CSS özellikleri;
+/*
+Elementin,
+- Opaklık; opacity
+- Dış çevre mesafesi; margin
+- Çerçeve yüksekliği; borderWidth
+- Satır yüksekliği; lineHeight
+
+Diğer tüm özellikler için resmi siteyi kontrol ediniz.
+*/
+
+// Bu parametre animasyonun süresini belirler.
+const milisaniyeCinsindenAnimasyonSuresi =
+  1200;
+
+// Bu parametre, 'linear' yada 'swing' metin
+// bilgilerinden birini alır ve animasyonun
+// akıcılığını belirler.
+// x ∈ {'linear', 'swing'}
+const animasyonAkiciligi = 'linear';
+
+// Bu parametre, bir fonksiyondur ve
+// animasyondan sonra çağırılır.
+// Bir geri-çağırım (callback*) olarak değerlendirilebilir.
+const animasyonGeriCagirimFonksiyonu = function(){
+  console.info('Animasyon bitti!');
+};
+
+// Şimdi tanımlanan bilgilerimizle animasyonu çağırıyoruz.
+$('#slaytresmi').animate(animeEdilecekCSSOzellikleri,
+                         milisaniyeCinsindenAnimasyonSuresi,
+                         animasyonAkiciligi,
+                         animasyonGeriCagirimFonksiyonu);
+// => jQuery [<img id='slaytresmi'>] (1)
+
+// Kütüphane `$.animate` fonksiyonu için, anime edeceğiniz
+// CSS özellikleri dışındaki tüm argümanlar için
+// ön tanımlı değerler sağlamaktadır.
+// Bu değerler için resmi siteyi kontrol ediniz.
+
+// Diğer ön tanımlı efektler;
+/*
+Elementi,
+- Yukarı kaydırır; $.slideUp
+- Verilen saydamlık değerine anime eder; $.fadeTo
+- Görünür yada görünmez yapar (geçerli durumuna bağlı); $.toggle
+
+Diğer tüm efektler için resmi siteyi kontrol ediniz.
+*/
+
+// 3. Manipülasyon
+
+// jQuery'de, HTML elementlerinin isteğiniz doğrultusunda
+// değiştirilmesi için araçlar sunulmakta.
+
+// Bir ön-tanımlı CSS sınıfımız olduğunu hayal edebilirsiniz.
+// Bu sınıfı istediğimiz elemente uygulamak için,
+$('#slaytresmi').addClass('inanilmaz-bir-cerceve-sinifi');
+// => jQuery [<img id='slaytresmi' class='inanilmaz-bir-cerceve-sinifi'>] (1)
+
+// Bu CSS sınıfını istediğimiz zaman silebiliriz,
+$('#slaytresmi').removeClass('inanilmaz-bir-cerceve-sinifi');
+// => jQuery [<img id='slaytresmi'>] (1)
+
+// Bu HTML elementini, istediğimiz başka bir element ile çevreleyebiliriz,
+$('#slaytresmi').wrap('<div class="farkli-bir-cerceve"></div>');
+// => jQuery [<img id='slaytresmi'>] (1)
+// Sonucun gözlemlenebilmesi için, elementin çevreleme işlemi sonrası
+// döküman üzerindeki yapısını temel bir seçici ile gözlemleyebiliriz;
+$('.farli-bir-cerceve')
+// => jQuery [<div class='farkli-bir-cerceve>] (1)
+// => <div class="farkli-bir-cerceve">
+//      <img id='slaytresmi'>
+//    </div>
+
+// Elemente içerik ekleyebiliriz,
+// Eklemeler döküman içeriğinin sonuna yapılacaktır.
+// Bu süreci daha iyi gözlemleyebilmek için içeriğine bakmamız yeterli,
+// Ekleme öncesinde;
+$('.farkli-bir-cerceve');
+// => jQuery [<div class='farkli-bir-cerceve>] (1)
+// => <div class="farkli-bir-cerceve">
+//      <img id='slaytresmi'>
+//    </div>
+
+// `$.append` fonksiyonu ile ekleme işlemini yapıyoruz.
+$('.farkli-bir-cerceve').append('<h1>Bu çerçeve farklı!</h1>');
+// => jQuery [<div class='farkli-bir-cerceve>] (1)
+// => <div class="farkli-bir-cerceve">
+//      <img id='slaytresmi'>
+//      <h1>Bu çerçeve farklı!</h1>
+//    </div>
+
+// Dökümandan element silebiliriz,
+$('.farkli-bir-cerceve > h1').remove();
+// => jQuery [<h1>] (1)
+
+// Dökümanın güncel halini görmek için seçiciyi çağırıyoruz,
+$('.farkli-bir-cerceve');
+// => jQuery [<div class='farkli-bir-cerceve>] (1**
+// => <div class="farkli-bir-cerceve">
+//      <img id='slaytresmi'>
+//    </div>
+
+// Elementlerin özniteliklerini değiştirebilir yada
+// silebiliriz.
+// Öznitelik erişici ve değiştiricisi,
+// Bir fonksiyon notasyonuyla yapılanmış durumda.
+// Eğer bir öznitelik bilgisini almak istiyorsak, ilgili öznitelik
+// ismini;
+
+$('.farkli-bir-cerceve > img').attr('id');
+// => 'slaytresmi'
+
+// Eğer bir öznitelik bilgisini güncellemek istiyorsak,
+// ilgili öznitelik ismi ve sonrasında yeni değerini argüman
+// olarak $.attr fonksiyonuna iletiyoruz;
+
+$('.farkli-bir-cerceve > img').attr('id', 'cercevelislaytresmi');
+// => jQuery [<img id='cercevelislaytresmi'>] (1)
+
+// Diğer ön fonksiyonlar;
+/*
+Elementin,
+- Yükseklik değeri, $.height
+- HTML döküman içeriği, $.html
+- Girdi içeriği, $.val
+- Verilen CSS sınıfına sahipliği, $.hasClass
+
+Diğer tüm manipülasyon fonksiyonları için resmi siteyi kontrol ediniz.
+*/
+
+```
+
+## Notlar
+
+- Yaygın bir yanlış bilineni düzeltmek adına; jQuery bir çalışma-çatısı değil, bir *kütüphanedir*.
+- [Lower Camel Case][lower-camel-case-notasyonu] notasyonu için Wikipedia sayfası.
+
+## İleri Okuma
+
+### İngilizce
+
+- [jQuery][jquery-official-website] resmi sitesi.
+
+- [Jakob Jenkov | $(document).ready article](http://tutorials.jenkov.com/jquery/document-ready.html)
+
+[jquery-official-website]: https://jquery.com
+[ajax-wikipedia-page]: https://en.wikipedia.org/wiki/Ajax_(programming)
+[javascript-learnxinyminutes-page]: https://learnxinyminutes.com/docs/javascript/
+[lower-camel-case-notasyonu]: https://en.wikipedia.org/wiki/Camel_case#Programming_and_coding
author	LeaveNhA <seckinkukrer@aof.anadolu.edu.tr>	2020-04-12 21:21:45 +0300
committer	LeaveNhA <seckinkukrer@aof.anadolu.edu.tr>	2020-04-12 21:21:45 +0300
commit	80016199990c9009217d2fe28be4b317fbe90dae (patch)
tree	1692cfc8ad2f2b71acfe3656efc1572c12ae059c /tr-tr
parent	2f81283970ca1f613c81a133908564b4f3e2a413 (diff)