İlginizi Çekebilir
  1. Ana Sayfa
  2. Nasıl Yapılır?

JavaScript Temel Bilgiler Rehberi

JavaScript Temel Bilgiler Rehberi
Javascript-nedir
+ - 0

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-nedir-nasil-kullanilir

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 tipiAçıklama
Stringkarakter dizisini temsil eder, örneğin “merhaba”
Numbersayısal değerleri temsil eder, örneğin 100
Booleanyanlış veya doğru boole değerini temsil eder
Undefinedtanımsız değeri temsil eder
Nullnull’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 tipiAçıklama
Objectüyelere erişebileceğimiz örneği temsil eder
Arraybenzer değerler grubunu temsil eder
RegExpnormal 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.

  1. Aritmetik operatörler
  2. Karşılaştırma (İlişkisel) Operatörleri
  3. Bitsel Operatörler
  4. Mantıksal operatörler
  5. Atama Operatörleri
  6. Özel Operatörler

JavaScript Aritmetik Operatörler

Aritmetik operatörler, işlenenler üzerinde aritmetik işlemler yapmak için kullanılır.

OperatörAçıklamaÖrnek
+Toplama10+20 = 30
Çıkarma20-10 = 10
*Çarpma işlemi10*20 = 200
/Bölünme20/10 = 2
%Modül (Kalan)20%10 = 0
++arttırvar a=10; a++; Şimdi a = 11
azaltvar 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örAçıklamaÖrnek
==Eşittir10==20 = yanlış
===Özdeş (eşit ve aynı türden)10==20 = yanlış
!=Eşit değil10!=20 = doğru
!==Aynı değil20!==20 = yanlış
>Büyüktür20>10 = doğru
>=Büyük veya eşit20>=10 = doğru
<Küçüktür20<10 = yanlış
<=Küçük veya eşit20<=10 = yanlış

JavaScript Bitsel Operatörler

Bitsel operatörler, işlenenler üzerinde bitsel işlemler gerçekleştirir.

OperatörAçı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örAçı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örAçıklamaÖrnek
=Atama10+10 = 20
+=Ekle ve atavar a=10; a+=20; Şimdi a = 30
-=Çıkart ve atavar a=20; a-=10; Şimdi a = 10
*=Çarp ve atavar a=10; a*=20; Şimdi a = 200
/=Böl ve atavar a=10; a/=2; Şimdi a = 5
%=Modül ve atamavar a=10; a%=2; Şimdi a = 0

JavaScript Özel Operatörleri

Aşağıdaki operatörler, JavaScript özel operatörleri olarak bilinir.

ŞebekeAçı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.
deleteOperatörü Sil, nesneden bir özelliği siler.
inOperatörde nesnenin verilen özelliğe sahip olup olmadığını kontrol eder.
instanceofnesnenin verilen tipte bir örnek olup olmadığını kontrol eder
newbir örnek oluşturur (nesne)
typeofnesnenin türünü kontrol eder.
voidifadenin dönüş değerini atar.
yieldjeneratö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:

  1. If Statement
  2. If else statement
  3. 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

Yazar Hakkında

Bu Yazıyı Yorumla