Temel JavaScript Bilgileri

javascript-egitimi

Javascript web sitelerine eklentiler ekleyebilen bir programlama aracıdır. Javascript ile web sitenize uygulamalar, butona basıldığında, format odaklanıldığında kullanıcıyla geçilecek eklentiyi ekleyebilirsiniz. Bu makale size Javascript ile başlangıç bilgileri ve bu programlamayla neler yapabileceğiniz hakkında bilgi vermek amacıyla yazılmıştır.

JAVASCRİPT NEDİR?

JavaScript (Kısaca “JS”) Tam anlamıyla eklenti ekleyebilen en iyi programlardan biridir. Bir HTML yazısına uygulandığında, kullanıcı ile olumlu etkileşimler oluşturur. Javascript Brendan Eich tarafından oluşturulmuştur, aynı zamanda Brendan Mozilla projesinin, Mozilla vakfının ve Mozilla şirketinin kurucu ortaklarından biridir.

Javascript ile aklınıza gelen her şeyi yapabilirsiniz. Karosel (kayar resim menüleri) gibi küçük eklentilerden başlayıp, fotoğraf galerileri,müthiş arayüzler ve butona tıklamaya verilecek cevaba kadar her şeyi yapabilirsiniz. Hatta, dil üzerinde ilerlediğinizde 2B ve 3B oyunlar ve veritabanı kullananılan uygulamalar yapabilirsiniz.

Javascript küçük bir dil olsa bile ç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 zaman harcayarak çözebilirsiniz.

Örnek:

  • (APIs) web tarayıcılar için ilerletilmiş, çok olanaklı HTML oluşturma ve CSS yenileme araçları, insanların web kemaralarında yayın alıp bunları incelemek, 3 boyutlu grafikler ve ses örnekleri oluşturmak ü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ı sağlamak üzere 3. parti API’ler.
  • HTML’e yapabileceğiniz, çok hızlı bir şekilde web siteleri kurmanıza yarayacak 3. parti kütüphaneler.

Bir’’Merhaba Dünya’’Örneği

  • JavaScript, en heyecan verici web teknolojilerinden biri olduğu için siz JavaScript üzerinde ilerleme kaydettikçe, web siteleriniz yeni bir boyut ve güç kazanacaktır.

Fakat, JavaScript HTML ve CSS’ye göre daha zor bir teknolojidir. İlk başlarda daha az uygulama ve örneklerle başlamalısınız ki daha sonra küçük adımlarla daha fazla ilerleme kaydedebilesiniz. Şimdi sizlere çok kolay bir Javascript kodunu sayfanıza nasıl dahil edeceğiniz, nasıl bir “merhaba dünya” örneğini yapacağınızı anlatacağız).,

  1. Önce test sitenizin olduğu klasöre gidip,scripts isimli bir klasör açın ve içine js adında bir dosya yaratın.
  2. Sonra, index.html dosyasını açın ve </body> etiket bitiminden bir önceki sütuna bu kodu ekleyin:

<script src=”scripts/main.js“></script>

  1. Bu kod CSS’de <link>elementi ne işe yarıyorsa aynısını yapıyor. Javascripti sayfaya dahil eder ve bu sebeple Javascript kodunuz sayfa üzerinde bir etkiye sahip olmuş olur.
  2. Şimdi bu kodu jsdosyanıza ekleyin.
  3. var myHeading = document.querySelector(‘h1′);

myHeading.textContent = ‘Hello world!';

  1. HTML ve Javascript dosyalarınızın kaydedildiğinden emin olduktan sonra index.html dosyanızı tarayıcıya yükleyin. Aşağıdaki görsele benzer bir resim görmelisiniz.00

Not: <script> Ögesini dosyanın en altına koymamızın sebebi, HTML’in tarayıcı tarafından dosyada hangi sırada olduğuna göre yüklenmesinden dolayıdır. JavaScript daha önce yüklenir ve altındaki HTML’i etkilemesi beklenirse, JavaScript çalışması beklenen HTML’den önce yükleneceğinden, işe yaramama olasılığı yüksektir. Bu sebeple, JavaScript’i HTML sayfasının altına koymak genellikle en iyi yöntemdir.

Başlık metniniz “Hello world'” olarak değiştirildiyse başardınız demektir!

Bunu querySelector() fonksiyonunu kullanarak oluşturduk, bu fonksiyon bize o ögeye dair bir referans gönderdi ve biz bunu myHeading isimli bir değişkene kaydettik. Aslında bu CSS’de seçicilerle yaptığımız işlemin aynısıdır. Bir öge üzerinde değişiklik yapmak istiyorsanız, öncelikle o ögeyi seçmelisiniz.

Daha sonra, myHeading değişkeninin textContent özelliğini,”Hello world!” olarak değiştirdik.

Değişkenler

Variables değişkenler, değerleri saklayabileceğiniz kaplardır. Bir değişkeni tanımlamaya ‘’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 bitmesi gerekmektedir.

Eğer noktalı virgül koymazsanız, istenmeyen sonuçlarla karşılaşabilirsiniz.

Not: Seçilmiş anahtar kelimeler dışında değişkenlerinize dilediğiniz ismi verebilirsiniz.

Not: Javascript büyük-küçük karakterler konusunda zor bir dildir. Bu nedenle degisken ve Degisken aynı şey değildir. Eğer problem yaşıyorsanız, büyük küçük harfleri  kontrol edin.

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

myVariable = ‘Bob';

Bunları dilerseniz aynı sütunda yapabilirsiniz.

var myVariable = ‘Bob';

Bu değişkenin değerlerini sadece ismini yazarak oluşturabilirsiniz.

myVariable;

Bir değişkene bir değer verdikten sonra isterseniz daha sonra değiştirebilirsiniz.

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

Bütün verilerin farklı veri tipleri olduğunu hatırlatalım.

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 gerek duymazlar.    var myVariable = 10;
Boolean Doğru/Yanlış değeri. True ve false Javascript’in anahtar kelimeleridir ve tırnağa gerek duymazlar.    var myVariable = true;
Array Pek çok veriyi tek bir referans altında saklamanıza yarayan bir yapıdır.    var myVariable =       [1,’Bob’,’Steve’,10];
Dizinin her üyesine şu şekilde bakın:
myVariable[0], myVariable[1], vs.
Object Temel olarak, Javascriptteki her şey birer nesnedir ve bir değişkende saklanabilir. Javascript öğrendiğiniz sürece bunu unutmayın.    var myVariable = document.querySelector(‘h1′);
Yukarıdaki örneklerin hepside.

Peki neden değişkenlere ihtiyaç duyarız? Programlamada birçok şeyi yapmak için değişkenlere ihtiyaç duyarız. Eğer değerleri değiştiremezsek, olumlu bir sonuç elde edemeyiz. Örneğin; kişisel bir selamlama yazısı oluşturamayız 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

Operatör iki değer arası işlemden bir sonuç üreten matematiksel bir semboldür. Aşağıdaki tabloda bazı basit operatörler verilmiştir.

Bunları Javascript Console’unda deneyebilirsiniz.

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 Bunlar, Temel Matematikteki işlemlerin aynısını yapar.   -, *, / 9 – 3;
8 * 2; // multiply in JS is an asterisk
9 / 3;
Atama Operatörü Bir değeri diğerine atar   = var myVariable = ‘Bob';
Eşitlik operatörü İki değerin birbirine 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.   !, !== Temel ifade true’dur, ama karşılaştırma false    döndürür. çünkü onu reddettik:var myVariable = 3;
!(myVariable === 3);Burada test ediyoruz “myVariable 3’e eşit değil”. Bu false döndürür çünkümyVariable 3’e eşittir.var myVariable = 3;
myVariable !== 3;

 

Koşul İfadeleri

Koşul ifadeleri, 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 if… else yapısıdır.

Örnek:

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 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 kullanabilirsiniz. Bu sizin aynı kodları tekrar yazmanızı engellemiş olucaktır. Örneğin önceden tanımlanmış iki fonksiyon:

  1. var myVariable = document.querySelector(‘h1′);
  2. alert(‘hello!’);

Bu fonksiyonlar, tarayıcıların içerisinde açıklanmıştır ve istediğiniz zaman kullanabilmenizi sağlamıştır.

Eğer bir ifade görürseniz ve sonrasında parantezler -()- varsa bu bir fonksiyondur. Fonksiyonlar bazen argümanlar alır.  Argümanlar, fonksiyonların işlerliğini yerine getirmek için ihtiyaç duyduğu verilerdir. Eğer birden fazla 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.

Ayrıca, isterseniz siz de kendi fonksiyonlarınızı tanımlayabilirsiniz. Sıradaki örnekte kendi fonksyionunuzu yazacaksınız, bu fonksiyon aldığı iki argümanı çarparak değerlerini 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 sonucunda fonksiyon dışında kullanılabilir. Bu değişkenlerin tanımlandığı fonksiyonun dışında tanımsız olmasından kaynaklanır. Bu değişken scoping olarak tanımlanır.

Olaylar

Web siteniz ile etkileşimler oluşturmak 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 oluşturur. En çok kullanılan örneği tıklama olayıdır, bu olay, fare bir şeye tıkladığında tetiklenir. Ö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 farklı yolu vardır. Örneğin yukarı da önce <html> elementi seçtik, ve onclick olayını anonim  (i.e. nameless)  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 SİTEMİZİ GÜZELLEŞTİRMEK

Buraya kadar Javascript temellerini öğrendik. Şimdi örnek web sitemize bazı yaratıcı özellikler ekleyelim.

Fotoğraf değiştirici koymak

Bu örnekte, web sitemize, başka bir fotoğraf ekleyeceğiz ve bu iki imgenin tıklandığında değişmesi için bazı Javascript kodları ekleyeceğiz.

  1. Öncelikle web siteniz için aynı boyutda ya da yakın boyutlarda bir fotoğraf bulun.
  2. Bulduğunuz fotoğrafı imagesklasörüne ekleyin.
  3. Bu fotoğrafı ‘firefox2.png’ (tırnak işaretleri olmadan) olarak yeniden adlandırın.
  4. js dosyasını açın ve aşağıdaki kodları ekleyin. (Eğer “Hello world!” kodları hala bu dosyadaysa, silin.)
  5. var myImage = document.querySelector(‘img’);
  6.  myImage.onclick =function( ) {
  7.  var mySrc = myImage.getAttribute( ‘src’ );
  8.  if (mySrc ===‘images/firefox-icon.png’ )  {
  9. myImage.setAttribute ( ‘src’,’images/firefox2.png’ );
  10.   } else {
  11. myImage.setAttribute ( ‘src’,’images/firefox-icon.png’ );
  12.   }

}

  1. Bütün dosyaları kaydedin ve tarayıcınızda htmldosyasını açın. Şimdi resime tıkladığınızda diğer resimin değişmesi gerekli.

Buraya kadar, 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:

* Fotoğrafın src özelliğini getiriyoruz.

 

* İlk görsel ile aynı olup olmadığını anlamak için şartlı kontrol uyguluyoruz. Koşulumuz, src değerinin ilk fotoğrafın dosya yoluna eşit olup olmaması.

 

* Öyleyse, ikinci fotoğrafı değiştiriyoruz. Bu sayede <image> elementinin gösterdiği fotoğraf değişiyor.

 

* Değilse (yani değiştirdiysek), src değerine orjinal değeri atıyoruz ve bu sayede görsel ilk haline geliyor.

 

 

Yorum yok

Bir Cevap Yazın

E-posta hesabınız yayımlanmayacak. Gerekli alanlar * ile işaretlenmişlerdir

Şu HTML etiketlerini ve özelliklerini kullanabilirsiniz: <a href="" title=""> <abbr title=""> <acronym title=""> <b> <blockquote cite=""> <cite> <code> <del datetime=""> <em> <i> <q cite=""> <s> <strike> <strong>