MDN wants to learn about developers like you: https://qsurvey.mozilla.com/s3/MDN-dev-survey

This translation is incomplete. Please help translate this article from English.

Javascript web sitelerine etkileşimler ekleyebilen bir programlama dilidir. Javascript ile web sitenize oyunlar, düğmeye basıldığında, forma odaklanıldığında kullanıcıyla geçilecek etkileşimi ekleyebilirsiniz. bu makale size Javascript ile başlangıç için bir fikir verecek ve bu dil ile neler yapılabileceği hakkında yardımcı olacaktır.

JavaScript nedir, gerçekten?

JavaScript (Kısaca "JS" ) Tam teşekküllü dinamik programlama dilidir. Bir HTML dökümanına uygulandığında, kullanıcı ile dinamik etkileşimler yaratır. Javascript Brendan Eich tarafından yaratılmıştır, aynı zamanda Brendan Mozilla projesinin, Mozilla vakfının ve Mozilla şirketinin kurucu ortağıdır.

Javascript ile aslında aklınıza gelen her şeyi yapabilirsiniz. Karosel (kayar resim menüleri) gibi küçük şeylerden başlayıp, fotoğraf galerileri, harika arayüzler ve düğmeye tıklamaya verilecek cevaba kadar her şeyi yapacaksınız. Hatta, dil üzerinde tecrüve kazandığınızda 2B ve 3B oyunlar ve veritabanı kullanan uygulamalar yapabileceksiniz.

Javascript küçük bir dil olmasına rağmen çok esnektir ve geliştiriciler, Javascript çekirdeği üzerine çok fazla araç geliştirmiştir. Bu araçlar kullanılarak pek çok sorunu çok az efor harcayarak çözebilirsiniz. Örneğin:

  • (APIs) web tarayıcılar için geliştirilmiş, çok çeşitli HTML oluşturma ve CSS güncelleme araçları, kullanıcıların web kemaralarında yayın alıp bunları okumak, 3 boyutlu grafikler ve ses örnekleri yaratmak üzere hazırlanmış Application Programming Interfaces (uygulama geliştirme arayüzleri) vardır.
  • Geliştiricilerin, siteleri ile Twitter ve Facebook arası ortak fonksiyonlar kullanmasını kullanmak üzere 3. parti API'ler.
  • HTML'ye uygulayabileceğiniz, çok hızlı bir şekilde web siteleri inşa etmenize yarayacak 3. parti kütüphaneler.

Bir "merhaba dünya" örneği

Başlık sizi çok heycanlandırmış olmalı, heycanlandırmalı da — JavaScript, en heyecan verici web teknolojilerinden biri ve siz JavaScript üzerinde uzmanlaştıkça, websiteleriniz yeni bir boyut ve güç kazanacaktır.

Ancak, JavaScript HTML ve CSS'ye göre biraz daha zor bir teknolojidir. Öncelikle ufak uygulama ve örneklerle başlamalı daha sonra küçük adımlarla ilerlemelisiniz. Şimdi size çok basit bir Javascript kodunu sayfanıza nasıl dahil edeceğiniz, nasıl bir "merhaba dünya" örneğini nasıl yapacağınızı göstereceğiz.(Programlamada standart, basit bir önek)

Önemli: Eğer bu dersi bizimle takip etmeyecekseniz, örnek kodu bir başlangıç olarak bilgisayarınıza indirin.

  1. Önce test sitenizin olduğu klasöre gidip, scripts isimli bir klasör açın ve içine main.js adında bir dosya yaratın.
  2. Sonra, index.html dosyasının içine gidin ve </body> etiket bitiminden bir önceki satıra bu kodu ekleyin:
    <script src="scripts/main.js"></script>
  3. Bu kod CSS'de <link> elementi ne işe yarıyorsa aynısını yapıyor. Javascripti sayfaya dahil eder ve bu sayede Javascript kodunuz sayfa üzerinde bir etkiye sahip olur.
  4. Şimdi bu kodu main.js dosyanıza ekleyin.
    var myHeading = document.querySelector('h1');
    myHeading.textContent = 'Hello world!';
  5. Şimdi HTML ve Javascript dosyalarınızın kaydedildiğinden emin olun ve index.html dosyanızı tarayıcıya yükleyin. Aşağıdakine benzer bir şey görmelisiniz.

Not: <script> Elementini neredeyse dosyanın en sonuna koymamızın nedeni, HTML'nin tarayıcı tarafından dosyada göründüğü sırayla yüklenmesidir.JavaScript önce yüklenir ve altındaki HTML'yi etkilemesi beklenirse, JavaScript çalışması beklenen HTML'den önce yükleneceğinden, bu işe yaramayabilir. Bu nedenle, JavaScript'i HTML sayfasının altına koymak genellikle en iyi stratejidir.

Ne oldu?

Evet, başlık metniniz "Hello world'" olarak değiştirildi ve bunu Javascript yaptı! Bunu querySelector() fonksiyonunu çağırarak yaptık, bu fonksiyon bize o elemente ait bir referans getirdi ve biz bunu myHeading isimli bir değişkene kaydettik. Aslında bu CSS'de seçicilerle yaptığımız işlemin aynısı. Bir element üzerinde değişiklik yapmak istiyorsanız, önce o elementi seçmelisiniz.

Sonra, myHeading değişkeninin textContent özelliğini, (başlığın içeriğini taşıyan özellik) "Hello world!" olarak değiştirdik.

Hızlandırılmış Dil Temelleri Kursu

Javascript'İ daha iyi anlamanız içim şimdi size dilin temel özelliklerini göstereceğiz. Ne güzel ki, bu özellikler pek çok programlama dilinin ortak özellikleridir. Bu temel kavramları anlayabilirseniz, istediğiniz şeyleri gerçekleştirebilmek adına programlamaya başlamış olacaksınız.

Önemli: Bu makaledeki örnek kodları Javascript komut sistemine yazıp ne olacağını görmelisiniz. Javascript Console hakkında daha fazla bilgi alın.

Değişkenler

Variables Değişkenler, değeleri saklayabileceğiniz kaplardır. Bir değişkeni tanımlayama var anahtar kelimesi kullanarak başlarsınız, ardından da değişkene vermek istediğiniz ismi yazarsınız.

var myVariable;

Not: Javascript'teki bütün ifadeler noktalı virgül ile bitmelidir. Eğer noktalı virgül koymaysanız, beklenmeyen sonuçlarla karşılaşabilirsiniz.

Not: Seçilmiş anahtar kelimeler dışında değişkenlerinize istediğiniz ismi verebilirsiniz. (lütfen değişken isimlendirme kuralları makalesini okuyun)

Not: Javascript büyük-küçük karakterler konusunda hassas bir dildir. Bu nedenle degisken ve Degisken aynı şey değişdir. Eğer problemler yaşıyorsanız, büyük küçük harf problemlerinizi kontrol edin.

Bir değişkeni tanımladıktan sonra ona bir değer verebilirsiniz.

myVariable = 'Bob';

Bunları dilerseniz aynı satırda yapabilirsiniz.

var myVariable = 'Bob';

Bu değişkenin değlerini sadece ismini yazarak çağırabilirsiniz.

myVariable;

Bir değişkene bir değer verdikten sonra bu değeri değiştirebilirsiniz.

var myVariable = 'Bob';
myVariable = 'Steve';

Bütün verilerin farklı veri tipleri olduğunu unutmayın.

Değişken Açıklama Örnek
String Yazı katarı, bir değişkeni yazı katarı olarak tanımlamak için değeri tırnak içerisine alın. var myVariable = 'Bob';
Number Sayı. Sayılar tırnak içerisinde olmaya ihtiyaç duymazlar. var myVariable = 10;
Boolean Doğru/Yanlış değeri. True ve false Javascript'in anahtar kelimeleridir ve tırnağa ihtiyaç duymazlar. var myVariable = true;
Array Pek çok veriyi tek bir referans altında saklamanıza yarayan bir yapı. var myVariable = [1,'Bob','Steve',10];
Refer to each member of the array like this:
myVariable[0], myVariable[1], etc.
Object Temel olarak, Javascriptteki her şey birer nesnedir ve bir değişkende saklanabilir. Javascript öğrendiğiniz sürece bunu aklınızdan çıkarmayın. var myVariable = document.querySelector('h1');
All of the above examples too.

Peki neden değişkenlere ihtiyaç duyuyoruz? Programlamada her şeyi yapmak için değişkenlere ihtiyaç duyarız. Eğer değerleri değiştiremezsek, dinamik bir sonuç elde edemeyiz. Örneğin kişisel bir selamlama yazısı üretemeyiz ya da gösterilmekte olan fotoğrafı değiştiremeyiz.

Yorumlar

CSS'de olduğu gibi Javascript kodunuza da yorumlar koyabilirsiniz.

/*
Aralarındaki her şey birer yorumdur.
*/

Eğer çok satırlı yorum yazmaya ihtiyaç yoksa, iki bölü işareti ile yorum koyabilirsiniz.

// Bu bir yorumdur.

Operatörler.

operator İki değer arası işlemden bir sonuç üreten matematiksel bir semboldür. Aşağıdaki tabloda bazı basir operatörleri görebilirsiniz. Bunları Javascript Console'unda deneyin.

Operatör Açıklama Sembol Örnek
toplama/birleştir İki sayıyı toplamak ve iki String'i birleştirmek için kullanılır. + 6 + 9;
"Hello " + "world!";
çıkarma, çarpma,  bölme Matematikteki işlemlerin aynısını yapar -, *, / 9 - 3;
8 * 2; // multiply in JS is an asterisk
9 / 3;
Atama Operatörü Bunu daha önce gördünüz, bir değeri diğerine atar = var myVariable = 'Bob';
Eşitlik operatörü İki değerin birbirne eşit olup olmadığını test eder ve true/false döndürür === var myVariable = 3;
myVariable === 4;
Olumsuzluk/eşitizlik Değerin tam tersini döndürür, true'yu false çevirir vb. Eşitsizlik operatörü de, iki değerin eşit olmamasını test eder. !, !==

The basic expression is true, but the comparison returns false because we've negated it:

var myVariable = 3;
!(myVariable === 3);

Here we are testing "is myVariable NOT equal to 3". This returns false because myVariable IS equal to 3.

var myVariable = 3;
myVariable !== 3;

Bunların dışında da operatörler vardır. İfadeler ve operatörler makalesinden, bütün operatörler listesini inceleyebilirsiniz.

Not: Veri tiplerini karıştırmak, beklenmedik sonuçlar doğurabilir örneğin konsola "35" + "25" yazdığınızda beklediğiniz sonucu elde etmezsiniz. Bu katarları birleştirecektir. İki numara toplandığında ortaya çıkan sonucu görmek için konsole 25 + 35 yazın.

Şartlar

Şartlar, bir ifadenin değerinin true veya false olup olmadığını kontrol eder. Buna bağlı olarak farklı kodlar çalıştırılabilir. En temel ve en çok kullanılan tip if... else yapısıdır. Örneğin:

var iceCream = 'chocolate';
if (iceCream === 'chocolate') {
  alert('Yay, I love chocolate ice cream!');    
} else {
  alert('Awwww, but chocolate is my favorite...');    
}

if(...) ifadesinin içindeki ifade, (eşitlik operatörü ile test edilir) iceCream değişkenini 'chocolate' değeri ile karşılaştırır ve true olduğunu bulur. Eğer sonuç doğruysa, ilk bloktaki kod çalıştırılır eğer ifade yanlışsa ilk blok atlanır ve else bloğu içerisindeki kod çalıştırılır.

Fonksiyonlar

Functions Daha sonra kullanmak istediğiniz bir dizi işlemi paketlemeye yarar. Yani ne zaman aynı işlemi yaptırmak isterseniz bu fonksiyonu çağırabilirsiniz. Bu sizin aynı kodları tekrar yazmanızın önüne geçecektir. Örneğin önceden tanımlanmış iki fonksiyon:

  1. var myVariable = document.querySelector('h1');
  2. alert('hello!');

Bu fonksiyonlar, tarayıcıların içerisinde tanımlanmıştır ve istediğiniz zaman kullanabilirsiniz.

Eğer bir ifade görürseniz ve sonrasında parantezler -()- varsa bu büyük ihtimalle bir fonksiyondur. Fonksiyonlar bazen argümanlar alır. arguments Argümanlar, fonksiyonların işlerliğini yerine getirmek için gereksinim duyduğu verilerdir. Eğer birden çok veriye ihtiyaç duyuluyorsa argümanlar virgül ile ayrılır.

Örneğin, alert() fonksiyonu, tarayıcı penceresi içerisinde bir pop-up kutusu gösterir. Ancak biz bu fonksiyona göstermesi için bir String vermeliyiz.

İyi haber ise, siz de kendi fonksiyonlarınızı tanımlayabilirsiniz. Sıradaki örnekte kendi fonksyionunuzu yazacaksınız, bu fonksiyon aldığı iki argümanı çarparak değelerini döndürür.

function multiply(num1,num2) {
  var result = num1 * num2;
  return result;
}

Üstteki fonksiyonu konsolda tanımlayıp kullanmayı deneyin:

multiply(4,7);
multiply(20,20);
multiply(0.5,3);

Not: return ifadesi, tarayıcıya, result değişkenini geri döndürmesi gerektiğini gösterir. Bu sayede işlem sonucu fonksiyon dışında kullanılabilir. Bu değişkenlerin tanımlandığı fonksiyonun dışında tanımsız olmasından kaynaklanır. Bu değişkenscoping olarak tanımlanır. Değişken tanım aralığı hakkında daha fazla bilgi edinin.

Olaylar

Websiteniz ile etkileşimler yaratmak için olaylara ihtiyaç duyarsınız. Bu kod yapıları, tarayıcıda gerçekleşen olayları dinler ve tanımlanan kodları gerektiğinde çağırır. En çok kullanılan örneği tıklama olayıdır, bu olay, fare bir şeye tıkladığında ateşlenir. Örneğin sayfadaki herhangi bir yere tıklandığında ne olacağını aşağıdaki örnek ile düzenleyebilirsiniz.

document.querySelector('html').onclick = function() {
    alert('Ouch! Stop poking me!');
}

Bir olayı bir elemente tanımlamanın pek çok değişik yolu vardır. Örneğin yukarı da önce seçici ile elementi seçtik, ve ve tıklama olayını anonim (isimsiz) bir fonksiyona atadık. Bu anonim fonksiyon tıklandığında ne olacağını gösteriyor.

Bu örnek

document.querySelector('html').onclick = function() {};

Bunun aynısı.

var myHTML = document.querySelector('html');
myHTML.onclick = function() {};

Sadece daha kısası.

Web sitemizi harikalaştırmak

Şimdiye kadar Javascript temellerini anlattık. Şimdi örnek websitemize bazı havalı özellkler ekleyelim.

Fotoğraf değiştirici eklemek

Bu örnekte, web sitemize, başka bir fotoğraf ekleyeceğiz ve bu iki imajın tıklandığında değişmesi için bazı Javascript kodları ekleyeceğiz. In this section, we'll add another image to our site, and add some simple JavaScript to change between the two when the image is clicked on.

  1. Öncelikle web siteniz için aynı boyutlu ya da yakın boyutlarda bir fotoğraf bulun.
  2. Bu fotoğrafı images klasörüne ekleyin.
  3.  main.js dosyasını açın ve aşağıdaki kodları ekleyin. (Eğer "Hello world!" kodları hala bu dosyadaysa, silin.)
    var myImage = document.querySelector('img');
    
    myImage.onclick = function() {
        var mySrc = myImage.getAttribute('src');
        if(mySrc === 'images/firefox-icon.png') {
          myImage.setAttribute ('src','images/firefox2.png');
        } else {
          myImage.setAttribute ('src','images/firefox-icon.png');
        }
    }
  4. Bütün dosyaları kaydedin ve tarayıcınızda index.html dosyasını açın.Şimdi resme tıkladığınızda diğer resme değişmeli.

Buraya kada, img elementimizin src özelliğini myImage değişkeninde saklıyoruz.  Sonra değişkenin onclick olayını bir anonim fonksiyona bağlıyoruz. Artık elemente her tıklandığında:

  1. Fotoğrafın src özelliğini getiriyoruz.
  2. İlk görsel ile aynı olup olmadığını anlamak için şartlı kontrol uyguluyoruz. Koşulumuz, src değerinin ilk görselin dosya yoluan eşit olup olmaması.
    1. Öyleyse, ikinci görsele değiştiriyoruz. Bu sayede <image> elementinin gösterdiği görsel değişiyor.
    2. Değilse (yani değiştirdiysek), src değerine orjinal değeri atıyoruz ve bu sayede görsel ilk haline geliyor.

Adding a personalized welcome message

Next we will add another bit of code, to change the page's title to include a personalized welcome message when the user first navigates to the site. This welcome message will persist when the user leaves the site and then comes back. We will also include an option to change the user and, therefore, the welcome message anytime it is required.

  1. In index.html, add the following line just before the <script> element:
    <button>Change user</button>
  2. In main.js, add the following code at the bottom of the file, exactly as written — this grabs references to the new button we added and the heading, and stores them in variables:
    var myButton = document.querySelector('button');
    var myHeading = document.querySelector('h1');
  3. Now add the following function to set the personalized greeting — this won't do anything yet, but we'll use it later on:
    function setUserName() {
      var myName = prompt('Please enter your name.');
      localStorage.setItem('name', myName);
      myHeading.textContent = 'Mozilla is cool, ' + myName;
    }
    This function contains a prompt() function, which brings up a dialog box, a bit like alert() except that prompt() asks the user to enter some data, and stores that data in a variable after the user presses OK. In this case, we are asking the user to enter their name. Next, we call on an API called localStorage, which allows us to store data in the browser and retrieve it later on. We use localStorage's setItem() function to create and store a data item called 'name', and set its value to the myName variable that contains the name the user entered. Finally, we set the textContent of the heading to a string, plus the user's name.
  4. Next, add this if ... else block — we could call this the initialization code, as it sets up the app when it first loads:
    if(!localStorage.getItem('name')) {
      setUserName();
    } else {
      var storedName = localStorage.getItem('name');
      myHeading.textContent = 'Mozilla is cool, ' + storedName;
    }
    This block first uses the negation operator (logical NOT) to check whether the name data item exists. If not, the setUserName() function is run to create it. If so (that is, the user set it during a previous visit), we retrieve the stored name using getItem() and set the textContent of the heading to a string, plus the user's name, the same as we did inside setUserName().
  5. Finally, put the below onclick event handler on the button, so that when clicked the setUserName() function is run. This allows the user to set a new name whenever they want by pressing the button:
    myButton.onclick = function() {
      setUserName();
    }
    

Now when you first visit the site, it'll ask you for your username then give you a personalized message. You can then change the name any time you like by pressing the button. As an added bonus, because the name is stored inside localStorage, it persists after the site is closed down, so the personalized message will still be there when you open the site up again!

Conclusion

If you have followed all the instructions in this article, you should end up with a page that looks something like this (you can also view our version here):

If you get stuck, you can always compare your work with our finished example code on Github.

Here, we have only really scratched the surface of JavaScript. If you have enjoyed learning about it and want to go deeper with your studies, go to our JavaScript Guide.

Document Tags and Contributors

 Contributors to this page: gkhno, maydemirx, yigitozdemir
 Last updated by: gkhno,