JavaScript: Değişken & Veri Türleri
- 15 Mart 2022
- Eğitim & Dersler, Javascript, Javascript Dersleri
- Değişken adını vermeden önce tanımladığımız var ifadesi variable‘dan gelmektedir ve dilimizde değişken anlamındadır.
- JavaScript’te değişkenler tanımlanırken herhangi bir veri türü belirtmemize gerek yoktur. Hangi veri türü kullanıldığını değişkenin değerinden anlayabiliriz.
- typeof ile değerin türünü bulabilirsiniz.
- Var değişkeni kullanmadan direkt değişken tanımlanabilir. Bu durumda değişken yerel olur.
1 2 3 4 | var sayi = 14; //int-Number var isim = "Kamil"; //String var manav = ["Elma","Armut","Muz"]; //Array var liste = {adi:"Kamil", soyad:"ERSÖNMEZ",sehir:"İstanbul"}; //Object |
JavaScript – Arrays
Array, birden fazla değer taşıyabilen en özel değişkenlerden biridir. Aşağıdaki kod bloğundaki 5. satırda manav dizisine 3 eleman eklenmiştir. Bir alt satırında ise ekrana manav dizisinde bulunan 1. eleman yazdırılması istenmiştir. Kodu çalıştırdığımızda ekrana Armut isminin gelmesinin sebebi dizilerde ilk indis(eleman) 0’dan başlar.
1 2 3 4 5 6 7 8 9 | <html> <body> <p id="meyvem"></p> <script> var manav = ["Elma","Armut","Muz"]; document.getElementById("meyvem").innerHTML = manav[1]; <script> </body> </html> |
JavaScript – Objects
- Nesneler daha karmaşıktır ve her nesne bu ilkel veri türlerinin herhangi bir kombinasyonunu ve ayrıca referans veri türlerini içerebilir.
- Bir nesne, bir referans veri türüdür. Bir referans değeri atanan değişkenlere bu değere bir referans veya bir işaretçi verilir. Bu referans veya işaretçi, nesnenin depolandığı bellekteki konumu gösterir. Değişkenler aslında değeri saklamaz.
- Genel olarak, JavaScript’teki nesneler, “anahtar: değer” çiftleri biçiminde, ilkel veya referans türlerinin ilgili verilerin sıralanmamış bir koleksiyonu olarak tanımlanabilir. Bu anahtarlar değişkenler veya işlevler olabilir ve bir nesne bağlamında sırasıyla özellikler ve methodlar olarak adlandırılır.
1 2 3 4 5 6 7 8 9 | <html> <body> <p id="bilgi"></p> <script> var personel = {adi:"Kamil", soyad:"ERSÖNMEZ",sehir:"İstanbul",yas:27}; document.getElementById("bilgi").innerHTML = personel.adi + " " + personel.soyad + "; " + personel.yas + " yaşında " + personel.sehir + "şehrinde doğmuştur."; <script> </body> </html> |
JavaScript – Functions
Veri türü belirtme olmadığından direkt return ile değer döndürülebilir. Bu açıdan C, Java ve C# göre daha esnek bir yapı sağlar ve defalarca kod yazmayı engeller. Değer döndürmeyen fonksiyonda yazılabilir.
1 2 3 4 5 6 7 8 9 10 11 12 | <html> <body> <p>Aşağıda bulunan paragrafdaki sonuç; otomatik olarak hesaplanmıştır.</p> <p id="sonuc"></p> <script> function carp(a,b){ return a*b; } document.getElementById("sonuc").innerHTML = carp(3,9); <script> </body> </html> |
New ile bir fonksiyon oluşturabilirsiniz. Bu sayede kodunuzu parametrik olarak yazabilirsiniz.
1 2 3 4 5 6 7 8 9 10 | <html> <body> <p>Aşağıda bulunan paragrafdaki metin; parametrik olarak yazılmıştır.</p> <p id="sonuc"></p> <script> var carp = new function("a","b","return a*b"); document.getElementById("sonuc").innerHTML = carp(3,9); <script> </body> </html> |
Self Functions: Kendi kendini çağıran bir fonksiyondur, kod çalıştığında kendini oluşturur.
1 2 3 4 5 6 7 8 9 10 11 | <html> <body> <p>Aşağı paragrafdaki metni oluşturan fonksiyon;</p> <p id="tetik"></p> <script> (function(){ document.getElementById("tetik").innerHTML = "hiçbir tetiklemeye gerek kalmadan çalıştı."; } <script> </body> </html> |
JavaScript Events (Olaylar)
JavaScript nesne tabanlı (object-oriented) bir dildir. Nesne tabanlı olmasından dolayı olay yönelimli çalışır. Örneğin; bir button’a tıkladıktan sonra çıkan uyarı penceresi JavaScript’in nesne tabanlı bir dil olduğunun açık bir göstergesidir.
JavaScript’te bazı olayların gerçekleştirilmesi için geliştirilmiş ve web sitelerinde senelerdir başarı ile kullanılan hazır olaylar vardır.
OnClick Olayı: Tıklandığında yapılacak işlemleri belirler.
1 2 3 4 5 6 7 8 9 10 11 12 | <html> <body> <p>Aşağıdaki Metni değiştirmek için butona tıklayın.</p> <button onclick="ButonEvent()">Değiştir</button> <p id="adsoy">Adı Soyadı</p> <script> function ButonEvent(){ document.getElementById("adsoy").innerHTML = "Kamil ERSÖNMEZ"; } <script> </body> </html> |
| Tüm Olaylar | Açıklama |
|---|---|
| onchange | Bir HTML etiketi değiştiğinde |
| onclick | Bir kullanıcı tıklamasında |
| onmouseover | Bir HTML etiketi üzerine fare ile gelindiğinde |
| onmouseout | Bir HTML etiketi üzerinden fare ile çıkıldığında |
| onkeydown | Kullanıcı klavyeden bir tuşa bastığında |
| onload | Tarayıcı sayfayı yüklerken |
JavaScript Bazı Hazır Metodlar
- String Metodları (indexOf, lastIndexOf, search, slice, substring …)
- Sayı Metodları (parseInt, parseFloat(), toString(), toFixed …)
- Matematik Metodları (min, max, round, abs, random…)
- Date Metodları (getDate(), getgetFullYear(), getMonth()…)
- Array Metodları (push, pop, shift, splice, reverse, sort…)
- 15 Mart 2022
-
Paint Yazılım
Diğer Yazılarımız
Tüm Yazılarımız
Soru işareti kalmasın
Bu yazı hakkında aklınıza takılanlar, bir fikriniz belkide şikayetiniz vardır. Yada yazımızda hatalar olduğunu düşünüyor olabilirsiniz. Peki neden bize ulaşmayı düşünmeyesiniz ki?
Hizmetlerimiz
Binlerce müşterimizin yararlandığı 100'e yakın hizmetlerimizden sizlerde yararlanabilirsiniz. Onlarca ücretsiz web hizmeti ve profesyonel destekle sizleri daima daha ileriye taşımayı hedefliyoruz.
Tüm Yenilik ve Kampanyalardan Haberdar Ol
Son Yazılar
- HTML : HTML Grafikleri 1 Nisan 2022
- XML Nedir? 27 Mart 2022
- JavaScript: DOM Metotları 23 Mart 2022
Son Yorumlar