JavaScript dili aslında öğrenmesi çok basit ve eğlenceli bir dildir. JavaScript ‘i kolaylıkla öğrenebilir, oluşturacağımız eğitim videolarını takip edebilir ve bu örnekleri kendiniz denediğiniz zaman hızlı bir şekilde öğrenme işlemini gerçekleştirebilirsiniz. Öğrenmek tamamen size bağlıdır. Yapmış olduğumuz ders içeriklerinden sonrasında ise hızlı bir şekilde öğrenmek istiyor iseniz yapmanız gereken tek şey tekrar etmek olacaktır.
JavaScript Nedir ?
Her an gelişen teknoloji için güzel görünüme sahip internet siteleri oluşturmak için JavaScript dili kullanılmaktadır. Hem kullanım kolaylığı yaratması açısından, hemde internet sitelerini süslemek için bire bir olan bu dil aslında bir çok internet sitesinde karşımıza gelir. Web geliştiricilerinin öğrenmesi gereken asıl 3 temel dil vardır. Bunlar : HTML, CSS ve JavaScrip ‘tir.
JavaScript ne işe yarar diye bir soru sorduğunuzda ise internet sitelerinin davranışlarını belirlemek için bu dil kullanılmaktadır. Bu dil bizlere dinamik ve etkileşimli internet sayfası oluşturmak için kullanılır. Bu dil ise NetScape tarafından geliştirilmiş bir script dilidir.
JavaScript Giriş
Bütün yazılım dilleri olduğu gibi de JavaScript ‘te deneyerek öğrenilir. Videolu yada yazılı içerikte görmüş olduğunuz tüm örnekleri öğrenebilmenin tek yolu ise sizin bu kod parçalarını tekrar ve tekrar olarak bilgisayarınızda kod editöründe denemek olacaktır. JavaScript dilini daha iyi anlayabilmek için aşağıda yer alan örnekler ile başlangıç yapabiliriz.
[accordion] [accordion_content title=”JavaScript ile HTML İçeriğini Değiştirmek” icon=”” active=”active”]Evet yanlış duymadınız. HTML içeriğini istediğiniz şekilde JavaScript ile değiştirebilirsiniz. Nasıl kulağa eğlenceli geliyor ama dimi ? Bu dili bu kadar eğlenceli yapan özellikler var iken neden öğrenilmesin ki ! JavaScript ile HTML içeriğini değiştirmek için ise aşağıda ki kod satırına bir göz atalım.
<p id="demo">JavaScript HTML içeriğini nasıl değiştirir ?</p>
<button type="button" onclick='document.getElementById("demo").innerHTML = "Merhaba ben JavaScript!"'>Tıkla</button>
Yukarıda ki kod parçacığında ise öncelikle p etiketi oluşturup buna bir id tanımladık. Tanımladığımız bu id yi bir buton oluşturup JavaScript ‘in temel kodlarından ve sık sık karşılaşacağımız kodlarından biri olan getElementById ile buraya çektik. Daha sonrasında HTML içi olduğunu belli ettik ve butona tıklandığında Merhaba ben JavaScript yazmasını sağlamış olduk.[/accordion_content][accordion_content title=”JavaScript Tek Tırnak Kabul Edebilir” icon=”” active=”active”]Yukarıda yazmış olduğumuz kod parçacığında dikkat edersiniz ki iki tırnak kullandık. Fakat JavaScript çift tırnak kabul edebildiği gibi tek tırnakta kabul edebilir.
<p id="demo1">JavaScript HTML içeriğini nasıl değiştirir ?.</p>
<button type="button" onclick="document.getElementById('demo1').innerHTML = 'Merhaba Ben JavaScript'">Tıkla</button>Yukarıda yer alan örnekte görebileceğiniz gibi HTML etiketi olan p etiketinde tek tırnak kullanır iken alt tarafta yer alan ve JavaScript etiketleri olan kısımlarda tek tırnak kullanım işlemini başarı ile gerçekleştirebilir ve kodumuz JavaScript tek tırnak kabul edebildiği için başarı ile çalışır.[/accordion_content][accordion_content title=”JavaScript ile Lamba Açıp Kapatmak” icon=”” active=”active”]Aslında aldanmayın başlığa. Başlığın asıl adı JavaScript her şeyi değiştirebilir. Ama lamba açıp kapatma işlemini gerçekleştiremez miyiz ? Tabi kide gerçekleştirebiliriz. Bakın bakalım videonun 3. dakikasına nasıl lambada açıp kapatabiliyor muşuz. Öncelikle JavaScript ‘te resimleri de değiştirebiliriz. Buyurun öncelikle bir kod parçacığına bakalım.
<button onclick="document.getElementById('Image').src='ampul1.jpg'">Işığı Aç</button>
<img id="Image" src="ampul.jpg" style="width:100px">
<button onclick="document.getElementById('Image').src='ampul.jpg'"Işığı Kapat</button>Öncelikle ortada yer alan satırda bir resim eklemişiz ve bu resme bir id tanımlamış bulunuyoruz. Buraya ben ışığın kapalı yanmamış normal bir ampul olan halini ekledim. Daha sonrasında üst tarafta bulunan kod parçacığında ise id ‘si Image olan kısmı çekip kaynağını yani src etiketi ile ampul1.jpg yapmasını istemişim. Bu sayede Işığa aç butonuna basıldığında ampul.jpg olan src komutu artık bize ampul1.jpg ‘i gösterecektir. Daha sonrasında Işığı kapat butonuna bastığımızda da src etiketi tekrar değişerek bu sefer ampul.jpg kısmında ki resmi bizlere gösterecektir. Videonun 04:57 dakikasına bakarak ampulün ışığı açıp kapatmasının ne kadar zevkli olduğuna bakabilirsiniz.[/accordion_content][accordion_content title=”JavaScript ile CSS Değiştirmek” icon=”” active=”active”]Ben size söylemiştim çok eğlenceli olduğunu. Nasılda her şeyi değiştirebiliyoruz ama dimi ? JavaScript ile de her şeyi değiştirebilirsiniz. Örnek olarak bazı internet sitelerinde yazı boyutunu büyütmek için bir buton olduğunu görüyorsunuzdur. Bastığınızda yazının fontu büyür yada küçülür. İşte bunu JavaScript ile yapabiliriz. Fakat size şuan sürekli olarak büyütmek değilde butona basıldığında büyütmeyi göstereceğim.
<p id="demo2">JavaScript ile Yazının Boyutunu Değiştirmek</p>
<button type="button" onclick="document.getElementById('demo2').style.fontSize='40px'">Tıkla</button>Yukarıda yer alan kod parçacığında ise id ‘si demo2 olan kısmın stilinin font boyutunu 40 px yapacağı anlamına gelmektedir. Tabi ki ne zaman butona tıklandığı zaman. Aslında diğer derslerde birde nasıl bu etiketlerin ne anlama geldiğini öğrendik mi bu iş tamamdır. Kimse tutamaz sizi.[/accordion_content][accordion_content title=”JavaScript Öğe Gizleme” icon=”” active=”active”]Oluşturacağınız internet sitesinde yada durun durun şöyle örnek vereyim. Bazı sitelerin en üst kısmında nasıl reklam açılıyor ve reklamı kapat butonu çıkıyor. Ama bu reklam her sayfasında yada ana sayfasında da çıkabiliyor. Genelde yazının içine gömülü olur ve yukarıdan aşağıya kayarak açılır. Siz bu reklamı kapat butonuna basmadan da kapanmaz orada durur ya he işte onu bu sayede yapabilirsiniz.
<p id="demo3">JavaScript ile yazı gizleme</p>
<button type="button" onclick="document.getElementById('demo3').style.display='none'">Tıkla</button>Yukarıda demo3 id si verdiğimiz p etiketinin altında çıkacak olan Tıkla butonuna tıklandığında ne olacakmış display none olacakmış yani gizlenme işlemini başarı ile tamamlayıp bir Casper olma yolunda ilerleyecekmiş.[/accordion_content][accordion_content title=”JavaScript Yazı Meydana Getirme” icon=”” active=”active”]Evet nasıl olarak butona tıkladığımızda bir yazı yada bir şey gizleyebiliyor isek tekrardan butona tıkladığımızda bir yazıyı geri getirebilir yada ekranda gözükmeyen bir yazıyı ekrana getirebiliriz. Bunun için ise :
<p id="demo4" style="display:none">Merhaba ben JavaScript!</p>
<button type="button" onclick="document.getElementById('demo4').style.display='block'">Tıkla</button>yukarıda yer alan kod parçacığını kullanmamız gerekir. Bir önce ki örnekten farklı olarak iste Display olarak block yaptığımızda butona tıkladığımızda bu içerik gözükecektir. Bu sayede JavaScript ile artık butona tıklandığında ekranda gözükmeyen bir öğeyi ekrana getirebilmeniz mümkündür.[/accordion_content] [/accordion]
Yukarıda yer alan örnekler temel olarak JavaScript Giriş Dersi örnekleridir. Tam olarak JavaScript ile neler yapılabilir sorusunun cevabının bir açıklaması olmaktadır. Bundan sonra ki derslerde JavaScript etiketlerinin teker teker üzerinde durarak hangisinin ne işe yaradığını, hangi etiketlere ne gibi özellikler ekleyebileceğimiz hakkında detaylı bilgilere sahip olabilirsiniz.