İçindekiler
- 1 JavaScript nedir?
- 2 JavaScript’in Java veya C++ gibi diğer programlama dillerinden farkı nedir?
- 3 Projeye JavaScript Nasıl Eklenir?
- 4 JavaScript’te Yorum Satırı Nasıl Yazılır?
- 5 JavaScript Değişkenler
- 6 JavaScript Veri Türleri
- 7 JavaScript Operatörler
- 8 JavaScript Koşullu İfadeler
- 9 JavaScript Switch Kullanımı
- 10 JavaScript Döngüler
JavaScript nedir?
JavaScript, dinamik web içeriği oluşturmak ve kontrol etmek için kullanılan bir betik dilidir. Web sitelerinde dinamik etkileşim sağlayan, yorumlanmış, hafif nesne yönelimli bir programlama dilidir. Animasyonlu grafiklerden otomatik olarak oluşturulan bir Facebook zaman çizelgesine kadar her şey olabilir. Temel yapınızı (HTML) ve stillerinizi (CSS) oluşturduktan sonra JavaScript, web sitenizi dinamik (otomatik olarak güncellenebilir) hale getirir.
Web geliştirmeye odaklanmış bir yazılım geliştiricisiyseniz, javascript öğrenmelisiniz ve JavaScript’i öğrendikten sonra birden fazla web uygulaması oluşturmak için kullanabileceğiniz birçok çerçeve vardır. Javascript günümüzde mobil uygulama geliştirmede, masaüstü uygulama geliştirmede ve oyun geliştirmede de kullanılmaktadır. Bu, bir JavaScript geliştiricisi olarak sizin için bir çok olasılık açar.
JavaScript’in Java veya C++ gibi diğer programlama dillerinden farkı nedir?
En büyük fark, JavaScript’in bir betik dili olmasıdır, yani C++ ve java gibi derlenmez ve yürütülmez. Dinamik olarak yazılırken Java veya C++ statik olarak yazılır. JavaScript, geleneksel olarak web uygulamaları için komut dosyaları yazmak için kullanılır. İstemci, komut dosyasının tüm kaynağını alır ve tarayıcı kodu çaıştırır – tarayıcı Java veya C++ programlarını çalıştıramazken tarayıcının bir JavaScript yorumlayıcısı vardır. Java veya C++ çok iş parçacıklı bir dilken, Javascript çoklu iş parçacığını desteklemez.
Projeye JavaScript Nasıl Eklenir?
JavaScript, doğrudan HTML sayfasının içine gömülebilir veya harici bir komut dosyasına yerleştirilebilir ve HTML sayfasının içinde referans alınabilir. Javascript kodunu eklemek için 3 yol izleyebiliriz:
1. HTML sayfasının head etiketi arasında
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>Embedding JavaScript</title>
<script>
document.getElementById("greet").innerHTML = "Hello World!";
</script>
</head>
<body>
<div id="greet"></div>
</body>
</html>
2. HTML sayfasının gövde etiketi arasında
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<title>Embedding JavaScript</title>
</head>
<body>
<div id="greet"></div>
<script>
document.getElementById("greet").innerHTML = "Hello World!";
</script>
</body>
</html>
3. .js dosyasında (harici javascript dosyası)
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<title>Linking External JavaScript</title>
</head>
<body>
<div id="greet"></div>
<button onclick="greet()">Show message</button>
<script src="script.js"></script>
</body>
</html>
script.js örneği
function greet()
{
document.getElementById("greet").innerHTML = "Hello World!";
}
JavaScript’te Yorum Satırı Nasıl Yazılır?
Yorumlar, mesajları iletmenin anlamlı bir yoludur. Başkalarının kodunuzu kolayca anlayabilmesi ve yorumlayabilmesi için kod, uyarılar veya öneriler hakkında bilgi eklemek için yorum kullanmanız gerekli değildir ancak önerilir. Sizden sonra yazılımınızı geliştirecek kişi veya kişilere kodunuzu anlatabileceğiniz satırlardır.
1. Tek-satır comment => Tek-satır yorum çift eğik çizgi ile temsil edilir ( //).
<script>
var x=1;
var y=2;
var z=x+y; // x ve y değişkeninin değerlerini ekler
document.write(z); // x ve y'nin toplamını yazdırır
</script>
2. Çok satırlı yorum => Eğik çizgi ile yıldız işareti ( /*) ile, ardından eğik çizgi ile yıldız işareti (*/ ) ile temsil edilir .
<script>
/*
Aşağıdaki kod, id = "myP" olan başlığı değiştirecek ve
web sayfamda id = "myP" olan paragraf:
*/
document.getElementById("myH").innerHTML = "My First Page";
document.getElementById("myP").innerHTML = "My first paragraph.";
</script>
JavaScript Değişkenler
Değişken, değişebilen her şey anlamına gelir. Bunlar, veri değerlerini depolamak için kullanılan kaplardır. Ayrıca, JavaScript değişkenleri gevşek bir şekilde yazılmıştır; bu, bildirilecek bir veri türü gerektirmediği anlamına gelir. js’de değişken bildirirken bazı kurallar vardır:
1. değişken adı harf (a’dan z’ye veya A’dan Z’ye), alt çizgi( _ ) ile başlamalıdır.
2. ilk harften sonra rakamlar kullanabiliriz (0’dan 9’a kadar), örneğin- abc1
3. javascript değişkenleri büyük/küçük harfe duyarlıdır(x ve X farklı değişkenlerdir)
Doğru JavaScript Değişken Örneği:
<script>
var x=10;
var _value=1.1;
var flag1=true;
var Name; //declaration of variable
Name="neha"; //initialization of variable
</script>
Yanlış JavaScript Değişken Örneği:
<script>
var 123=30;
var *aa=320;
</script>
JavaScript Veri Türleri
Veri türleri, temel olarak, bir program içinde ne tür verilerin depolanabileceğini ve işlenebileceğini belirtir. JavaScript, farklı değer türlerini tutmak için farklı veri türleri sağlar. JS’de, JavaScript motoru tarafından dinamik olarak kullanıldığı için değişkenin türünü belirtmemize gerek yoktur. Javascript’te temel olarak iki tür veri türü vardır:-
1. Primitive veri türleri
2. Non-Primitive veri türleri
Primitive veri türleri
Primitive veri türleri aynı anda yalnızca bir değer tutabilir. JS’de beş tür Primitive veri türü vardır:
| Veri tipi | Açıklama |
|---|---|
| String | karakter dizisini temsil eder, örneğin “merhaba” |
| Number | sayısal değerleri temsil eder, örneğin 100 |
| Boolean | yanlış veya doğru boole değerini temsil eder |
| Undefined | tanımsız değeri temsil eder |
| Null | null’u temsil eder, yani hiç değer yok |
Non-Primitive veri türleri
Non-Primitive veri türleri, değer koleksiyonlarını ve daha karmaşık varlıkları tutabilir. Temel olarak üç tür ilkel olmayan veri türü vardır:
| Veri tipi | Açıklama |
|---|---|
| Object | üyelere erişebileceğimiz örneği temsil eder |
| Array | benzer değerler grubunu temsil eder |
| RegExp | normal ifadeyi temsil eder |
JavaScript Operatörler
Operatörler, işlenenler üzerinde işlem yapmak için kullanılan özel sembollerdir. Örneğin,
var toplam = 10 +20; Burada + toplama işlemini yapan operatör ve 'a' ve 'b' işlenenlerdir.
JavaScript’te aşağıdaki operatör türleri vardır.
- Aritmetik operatörler
- Karşılaştırma (İlişkisel) Operatörleri
- Bitsel Operatörler
- Mantıksal operatörler
- Atama Operatörleri
- Özel Operatörler
JavaScript Aritmetik Operatörler
Aritmetik operatörler, işlenenler üzerinde aritmetik işlemler yapmak için kullanılır.
| Operatör | Açıklama | Örnek |
|---|---|---|
| + | Toplama | 10+20 = 30 |
| – | Çıkarma | 20-10 = 10 |
| * | Çarpma işlemi | 10*20 = 200 |
| / | Bölünme | 20/10 = 2 |
| % | Modül (Kalan) | 20%10 = 0 |
| ++ | arttır | var a=10; a++; Şimdi a = 11 |
| — | azalt | var a=10; a–; Şimdi a = 9 |
JavaScript Karşılaştırma Operatörler
JavaScript karşılaştırma operatörü, iki işleneni karşılaştırır.
| Operatör | Açıklama | Örnek |
|---|---|---|
| == | Eşittir | 10==20 = yanlış |
| === | Özdeş (eşit ve aynı türden) | 10==20 = yanlış |
| != | Eşit değil | 10!=20 = doğru |
| !== | Aynı değil | 20!==20 = yanlış |
| > | Büyüktür | 20>10 = doğru |
| >= | Büyük veya eşit | 20>=10 = doğru |
| < | Küçüktür | 20<10 = yanlış |
| <= | Küçük veya eşit | 20<=10 = yanlış |
JavaScript Bitsel Operatörler
Bitsel operatörler, işlenenler üzerinde bitsel işlemler gerçekleştirir.
| Operatör | Açıklama | Örnek |
|---|---|---|
| & | Bitwise AND | (10==20 & 20==33) = yanlış |
| | | Bit düzeyinde VEYA | (10==20 | 20==33) = yanlış |
| ^ | Bitsel XOR | (10==20 ^ 20==33) = yanlış |
| ~ | Bitsel DEĞİL | (~10) = -10 |
| << | Bitsel Sola Kaydırma | (10<<2) = 40 |
| >> | Bitsel Sağa Kaydırma | (10>>2) = 2 |
| >>> | Sıfır ile Bitsel Sağa Kaydırma | (10>>>2) = 2 |
JavaScript Mantıksal Operatörler
Mantıksal Operatörler, mantıksal işlemler yapmak için kullanılır.
| Operatör | Açıklama | Örnek |
|---|---|---|
| && | mantıksal VE | (10==20 && 20==33) = yanlış |
| || | mantıksal VEYA | (10==20 || 20==33) = yanlış |
| ! | Mantıksal Değil | !(10==20) = doğru |
JavaScript Atama Operatörleri
Atama Operatörler,i atama işlemleri yapmak için kullanılır.
| Operatör | Açıklama | Örnek |
|---|---|---|
| = | Atama | 10+10 = 20 |
| += | Ekle ve ata | var a=10; a+=20; Şimdi a = 30 |
| -= | Çıkart ve ata | var a=20; a-=10; Şimdi a = 10 |
| *= | Çarp ve ata | var a=10; a*=20; Şimdi a = 200 |
| /= | Böl ve ata | var a=10; a/=2; Şimdi a = 5 |
| %= | Modül ve atama | var a=10; a%=2; Şimdi a = 0 |
JavaScript Özel Operatörleri
Aşağıdaki operatörler, JavaScript özel operatörleri olarak bilinir.
| Şebeke | Açıklama |
|---|---|
| (? :) | Koşullu Operatör, koşula göre değer döndürür. Bu, if-else gibidir. |
| , | Virgül Operatörü, birden çok ifadenin tek bir ifade olarak değerlendirilmesine izin verir. |
| delete | Operatörü Sil, nesneden bir özelliği siler. |
| in | Operatörde nesnenin verilen özelliğe sahip olup olmadığını kontrol eder. |
| instanceof | nesnenin verilen tipte bir örnek olup olmadığını kontrol eder |
| new | bir örnek oluşturur (nesne) |
| typeof | nesnenin türünü kontrol eder. |
| void | ifadenin dönüş değerini atar. |
| yield | jeneratörün yineleyicisi tarafından bir jeneratörde neyin döndürüldüğünü kontrol eder. |
JavaScript Koşullu İfadeler
Koşullu ifadeler JavaScript’teki davranışı kontrol eder ve kod parçalarının çalışıp çalışamayacağını belirler. En yaygın koşullu ifade türü if-else ifadesidir. Bu ifade yalnızca parantez () içindeki koşul doğruysa çalışır. JavaScript’te if ifadesinin üç biçimi vardır:
- If Statement
- If else statement
- if else if statement
If deyimi örneği:
<script>
var a=20;
if(a>=20)
{
alert("value of a is greater and equal to 20");
}
</script>
if-else deyimi örneği:
<script>
var a=20;
if(a>=20)
{
alert("value of a is greater and equal to 20");
}
else
{
alert("value of a is less than 20");
}
</script>
if-else if ifadesi örneği:
<script>
var a=20;
if(a>20)
{
alert("value of a is greater than 20");
}
else if(a==20)
{
alert("value of a is equal to 20");
}
else
{
alert("value of a is less than 20");
}
</script>
JavaScript Switch Kullanımı
Switch deyimi, birden çok ifadeden bir kodu yürütmek için kullanılır. Bir eşleşme varsa ilgili kod bloğu yürütülür ve eşleşme yoksa varsayılan kod bloğu yürütülür.
Örnek:-
<script>
var grade='C';
var result;
switch(grade){
case 'A':
result="A Grade";
break;
case 'B':
result="B Grade";
break;
case 'C':
result="C Grade";
break;
default:
result="No Grade";
}
alert(result);
</script>
JavaScript Döngüler
JavaScript Döngüler, belirli bir koşul sağlanana kadar bir ifade bloğunu tekrar tekrar yürütmek için kullanılır. Kodu kompakt hale getirir. JavaScript farklı döngü türlerini destekler:
1. for döngüsü
2. for-in döngüsü
3. while döngüsü
4. do-while döngüsü
JavaScript For Döngüsü
For döngüsü, öğeleri sabit sayıda yineler. for Döngünün sözdizimi aşağıdaki gibidir:
for(başlatma; şart; arttırma)
{
//yürütülecek kod bloğu
}
Örnek:
<script>
for(i=0;I<10;i++)
{
document.write(i + " ")
}
</script>
Çıktı:-1 2 3 4 5 6 7 8 9
JavaScript while Döngüsü
while döngüsü, belirtilen bir koşul doğru olduğu sürece bir kod bloğu boyunca yinelenir. while Döngünün sözdizimi aşağıdaki gibidir:
while (şart)
{
// yürütülecek kod bloğu
}
Örnek:
<script>
var count=0;
while (count<=5)
{
document.write(count + " ");
count++;
}
</script>
Çıktı:-0 1 2 3 4 5
JavaScript do while Döngüsü
Do-while döngüsü while döngüsüne benzerdir, tek istisnası koşulun doğru veya yanlış olmasına bakılmaksızın kodun en az bir kez çalıştırılmasıdır. do-while Döngünün sözdizimi aşağıdaki gibidir:
do
{
//yürütülecek kod bloğu
}while (şart);
Örnek:
<script>
var i=1;
do{
document.write(i + "<br/>");
i++;
}while (i<=5);
</script>
Çıktı:-1 2 3 4 5
Beğendim
Alkışlıyorum
Eğlendim
Düşünceliyim
İğrendim
Üzüldüm
Çok Kızdım
