3. JavaScript'in Temelleri

Not: Bundan sonra, [Javascript] terimi her zaman ECMAScript 6 standardını ifade edecektir.

Önceki JavaScript projesinin içinde bir [bases] klasörü oluşturun. Bu bölümdeki örnekleri bu klasöre yerleştireceğiz:

3.1. [bases-01] komut dosyası

PHP7'in temellerini tanıtmak için aşağıdaki kodu kullanmıştık (bkz. bağlantı paragrafı):

<?php

// bu bir yorumdur
// bildirilmeden kullanılan değişken
$nom = "dupont";
// bir ekran görüntüsü
print "nom=$nom\n";
// farklı türde elemanlar içeren bir dizi
$tableau = array("un", "deux", 3, 4);
// eleman sayısı
$n = count($tableau);
// bir döngü
for ($i = 0; $i < $n; $i++) {
  print "tableau[$i]=$tableau[$i]\n";
}
// bir dizinin içeriğiyle 2 değişkenin başlatılması
list($chaine1, $chaine2) = array("chaine1", "chaine2");
// 2 dizgenin birleştirilmesi
$chaine3 = $chaine1 . $chaine2;
// sonucun görüntülenmesi
print "[$chaine1,$chaine2,$chaine3]\n";
// fonksiyon kullanımı
affiche($chaine1);
// bir değişkenin türü bilinebilir
afficheType("n", $n);
afficheType("chaine1", $chaine1);
afficheType("tableau", $tableau);
// bir değişkenin türü çalışma sırasında değişebilir
$n = "a changé";
afficheType("n", $n);
// bir işlev bir sonuç döndürebilir
$res1 = f1(4);
print "res1=$res1\n";
// bir işlev bir değerler dizisi döndürebilir
list($res1, $res2, $res3) = f2();
print "(res1,res2,res3)=[$res1,$res2,$res3]\n";
// bu değerleri bir dizide toplayabilirdik
$t = f2();
for ($i = 0; $i < count($t); $i++) {
  print "t[$i]=$t[$i]\n";
}
// testler
for ($i = 0; $i < count($t); $i++) {
  // sadece dizeleri görüntüler
  if (getType($t[$i]) === "string") {
    print "t[$i]=$t[$i]\n";
  }
}
// == ve === karşılaştırma operatörleri
if("2"==2){
  print "avec l'opérateur ==, la chaîne 2 est égale à l'entier 2\n";
}else{
  print "avec l'opérateur ==, la chaîne 2 n'est pas égale à l'entier 2\n";
}
if("2"===2){
  print "avec l'opérateur ===, la chaîne 2 est égale à l'entier 2\n";
}
else{
  print "avec l'opérateur ===, la chaîne 2 n'est pas égale à l'entier 2\n";
}
// diğer testler
for ($i = 0; $i < count($t); $i++) {
  // sadece >10 olan tamsayıları görüntüler
  if (getType($t[$i]) === "integer" and $t[$i] > 10) {
    print "t[$i]=$t[$i]\n";
  }
}
// bir while döngüsü
$t = [8, 5, 0, -2, 3, 4];
$i = 0;
$somme = 0;
while ($i < count($t) and $t[$i] > 0) {
  print "t[$i]=$t[$i]\n";
  $somme += $t[$i];   //$somme=$somme+$t[$i]
  $i++;               //$i=$i+1
}//while
print "somme=$somme\n";

// program sonu
exit;

//----------------------------------
function affiche($chaine) {
  // $chaine'i görüntüler
  print "chaine=$chaine\n";
}

//görüntüler
//----------------------------------
function afficheType($name, $variable) {
  // $variable türünü göster
  print "type[variable $" . $name . "]=" . getType($variable) . "\n";
}

//afficheType
//----------------------------------
function f1($param) {
  //, $param'e 10 ekler
  return $param + 10;
}

//----------------------------------
function f2() {
  // 3 değer döndürür
  return array("un", 0, 100);
}
?>

Javascript'e çevrildiğinde, şu kod ortaya çıkar:

'use strict';
// bu bir yorumdur
// sabit
const nom = "dupont";
// bir ekran çıktısı
console.log("nom : ", nom);
// farklı türde elemanlara sahip bir dizi
const tableau = ["un", "deux", 3, 4];
// eleman sayısı
let n = tableau.length;
// bir döngü
for (let i = 0; i < n; i++) {
  console.log("tableau[", i, "] = ", tableau[i]);
}
// bir dizinin içeriğiyle 2 değişkenin başlatılması
let [chaine1, chaine2] = ["chaine1", "chaine2"];
// 2 dizgenin birleştirilmesi
const chaine3 = chaine1 + chaine2;
// sonucun görüntülenmesi
console.log([chaine1, chaine2, chaine3]);
// fonksiyon kullanımı
affiche(chaine1);
// bir değişkenin türü bilinebilir
afficheType("n", n);
afficheType("chaine1", chaine1);
afficheType("tableau", tableau);
// bir değişkenin türü çalışma sırasında değişebilir
n = "a changé";
afficheType("n", n);
// bir işlev bir sonuç döndürebilir
let res1 = f1(4);
console.log("res1=", res1);
// bir işlev bir değerler dizisi döndürebilir
let res2, res3;
[res1, res2, res3] = f2();
console.log("(res1,res2,res3)=", [res1, res2, res3]);
// bu değerleri bir dizide toplayabilirdik
let t = f2();
for (let i = 0; i < t.length; i++) {
  console.log("t[i]=", t[i]);
}
// testler
for (let i = 0; i < t.length; i++) {
  // sadece dizeleri görüntüler
  if (typeof (t[i]) === "string") {
    console.log("t[i]=", t[i]);
  }
}
// == ve === karşılaştırma operatörleri
if ("2" == 2) {
  console.log("avec l'opérateur ==, la chaîne 2 est égale à l'entier 2");
} else {
  console.log("avec l'opérateur ==, la chaîne 2 n'est pas égale à l'entier 2");
}
if ("2" === 2) {
  console.log("avec l'opérateur ===, la chaîne 2 est égale à l'entier 2");
} else {
  console.log("avec l'opérateur ===, la chaîne 2 n'est pas égale à l'entier 2");
}
// diğer testler
for (let i = 0; i < t.length; i++) {
  // sadece 10'dan büyük tamsayıları gösterir
  if (typeof (t[i]) === "number" && Math.floor(t[i]) === t[i] && t[i] > 10) {
    console.log("t[i]=", t[i]);
  }
}
// bir while döngüsü
t = [8, 5, 0, -2, 3, 4];
let i = 0;
let somme = 0;
while (i < t.length && t[i] > 0) {
  console.log("t[i]=", t[i]);
  somme += t[i];
  i++;
}
console.log("somme=", somme);

// yürütülecek kod kalmadığı için program sonlandırılır

//şunu görüntüler
//----------------------------------
function affiche(chaine) {
  // dizeyi görüntüler
  console.log("chaine=", chaine);
}

//afficheType
//----------------------------------
function afficheType(name, variable) {
  // değişken türünü görüntüler
  console.log("type[variable ", name, "]=", typeof (variable));
}

//----------------------------------
function f1(param) {
  // parametreye 10 ekler
  return param + 10;
}

//----------------------------------
function f2() {
  // 3 değer döndürür
  return ["un", 0, 100];
}

PHP ve ECMAScript 6 kodları ile [use strict] (1. satır) beyanı arasındaki farkları inceleyelim:

• İlk fark, ECMAScript'te değişkenlerin şu anahtar kelimelerle tanımlanmış olmasıdır:
  • [let], kodun yürütülmesi sırasında değeri değişebilecek bir değişkeni tanımlamak için;
  • [const], kodun yürütülmesi sırasında değeri değişmeyecek (yani bir sabit) bir değişkeni tanımlamak için;
  • [let] yerine [var] anahtar sözcüğünü de kullanabiliriz. Bu, ECMAScript 5 ile birlikte kullanılan anahtar sözcüktü. Bu derste onu kullanmayacağız;
• 6. satır: [console.log] görüntüleme yöntemi her türlü veriyi görüntüleyebilir: dizeler, sayılar, boole değerleri, diziler, nesneler. PHP ve [print] yöntemleri, dizileri ve nesneleri doğal olarak görüntüleyemez. [console.log] ifadesinde, [console] bir nesne, [log] ise bu nesnenin bir yöntemidir;
• 8. satır: JavaScript dizileri, bir işaretçi tarafından referans verilen nesnelerdir. Şu kod yazıldığında:

const tableau = ["un", "deux", 3, 4];

[tableau] değişkeni, ["un", "deux", 3, 4] sabit dizisine işaret eden bir işaretçidir. Dizinin içeriğini değiştirmek, işaretçisini değiştirmez. Bu nedenle bir dizi genellikle [const] anahtar sözcüğüyle tanımlanır. PHP'te bir dizi bir işaretçi tarafından referans alınmaz. Bu, sabit bir veridir;

• 12. satır: döngü değişkeni [i], döngü içinde (let) ile tanımlanmıştır. [let] anahtar sözcüğü blok kapsamına (küme parantezleri arasındaki kod) uymaktadır. Dolayısıyla 12. satırdaki [i] değişkeni yalnızca döngü içinde bilinir;
• 18. satır: Dize birleştirme operatörü, JavaScript’te +, PHP’te ise . şeklindedir. Bu operatörün bir özelliği, toplama operatörü +’dan öncelikli olmasıdır. Dolayısıyla:
  • PHP'te, ‘1’ + 2, 3 sayısını verir;
  • Javascript’te ‘1’+2, ‘12’ dizesini verir;
• 20. satır: [console.log], tabloları görüntüleyebilir;
• 82. satır: JavaScript’te bir fonksiyonun parametrelerinin türünü belirtmek mümkün değildir;
• 91. satır: [typeof] operatörü, bir verinin türünü belirlemeye olanak tanır. Dört tür vardır: sayı, karakter dizisi, boole ve nesne. Javascript’te [integer] veya [tableau] türlerinin bulunmadığına dikkat edilmelidir. Daha önce de belirtildiği gibi, tablolar işaretçiler aracılığıyla işlenir ve nesne kategorisine girer;
• 50-59. satırlar: PHP'te olduğu gibi, JavaScript'te de == ve ‘===’ olmak üzere iki karşılaştırma operatörü vardır ve bunların anlamı PHP'tekiyle aynıdır. ESLint, çoğu zaman == operatörünü olası bir hata olarak işaretler. Sistematik olarak ‘===’ operatörü kullanılmalıdır;
• 79. satır: [return] komutunu kullanabilirdik, ancak ESLint, [return]'in yalnızca bir işlev içinde kullanılması gerektiği konusunda bir uyarı veriyor;

Bu kodu çalıştıralım:

Çalıştırma sonuçları:

[Running] C:\myprograms\laragon-lite\bin\nodejs\node-v10\node.exe "c:\Temp\19-09-01\javascript\bases\bases-01.js"
nom : dupont
tableau[ 0 ] = un
tableau[ 1 ] = deux
tableau[ 2 ] = 3
tableau[ 3 ] = 4
[ 'chaine1', 'chaine2', 'chaine1chaine2' ]
chaine= chaine1
type[variable n ]= number
type[variable chaine1 ]= string
type[variable tableau ]= object
type[variable n ]= string
res1= 14
(res1,res2,res3)= [ 'un', 0, 100 ]
t[ 0 ]= un
t[ 1 ]= 0
t[ 2 ]= 100
t[ 0 ]= un
avec l'opérateur ==, la chaîne 2 est égale à l'entier 2
avec l'opérateur ===, la chaîne 2 n'est pas égale à l'entier 2
t[ 2 ]= 100
t[ 0 ]= 8
t[ 1 ]= 5
somme= 13

[Done] exited with code=0 in 0.316 seconds

Yazılan kodda, ESLINT iki hata bildiriyor:

• uyarıdaki kırmızı satırın üzerine fare imlecini getirdiğinizde, [3] hata mesajı görüntülenir. Burada ESLint, iki sabitin karşılaştırıldığını algılayamıyor. İki operandan birinin bir değişken olması gerekir;
• [4]'te, hatayı düzeltmemeye karar verirsek, [Quick Fix] seçeneği ile uyarıyı ortadan kaldırabiliriz;

• [5]'te, uyarıyı hem geçerli satır için hem de dosyanın tamamı için devre dışı bırakma seçeneği vardır. Burada ikinci seçeneği tercih ediyoruz. Böylece dosyanın başına [6] satırı eklenir;

3.2. [bases-02] komut dosyası

[bases-02] komut dosyası, [let] ve [const] anahtar kelimelerinin kullanımını gösterir:

''use strict';
// bir değişkeni başlatmak için let veya const kullanılır
// değişkenler için let
let x = 4;
x++;
console.log(x);
// sabitler için const kullanılır
const y = 10;
x += y;
// yasaktır
y++;

• 11. satır, [1-2] komutunun çalıştırılması sırasında bir hataya neden olur. Bu hata, [3] komutunun çalıştırılmasından önce ESLint komutu tarafından bildirilir:

3.3. [bases-03] komut dosyası

[bases-03] komut dosyası, JavaScript'teki değişkenlerin kapsamını inceler:

'use strict';
// değişkenlerin kapsamı
let count = 1;
function doSomething() {
  // count burada biliniyor
  console.log("count=",count);
}
// çağırma
doSomething();

• [doSomething] işlevinin dışında tanımlanan [count] değişkeni, yine de bu işlev içinde tanınmaktadır. Bu, PHP ile temel bir fark oluşturur;

Çalıştırma

[Running] C:\myprograms\laragon-lite\bin\nodejs\node-v10\node.exe "c:\Temp\19-09-01\javascript\bases\bases-03.js"
count= 1

[Done] exited with code=0 in 0.3 seconds

3.4. [bases-04] betiği

Yerel bir değişken, aynı ada sahip bir küresel değişkeni gizler:

'use strict';
// değişkenlerin kapsamı
const count = 1;
function doSomething() {
  // yerel değişken, küresel değişkeni gizler
  const count = 2;
  console.log("count inside function=",count);
}
// küresel değişken
console.log("count outside function=",count);
// yerel değişken
doSomething();

Çalıştırma

[Running] C:\myprograms\laragon-lite\bin\nodejs\node-v10\node.exe "c:\Temp\19-09-01\javascript\bases\bases-04.js"
count outside function= 1
count inside function= 2

[Done] exited with code=0 in 0.246 seconds

3.5. [bases-05] betiği

Bir işlev içinde tanımlanan bir değişken, o işlevin dışında bilinmez:

'use strict';
// değişkenlerin kapsamı
function doSomething() {
  // fonksiyon içi yerel değişken
  const count = 2;
  console.log("count inside function=", count);
}
// burada count bilinmiyor
console.log("count outside function=", count);
doSomething();

ESLint, 9. satırda bir hata bildirir:

3.6. [bases-06] komut dosyası

[let] ve [const] anahtar sözcükleri, [bloc] (küme parantezleri içindeki kod) kapsamındaki değişkenleri tanımlar, ancak [var] anahtar sözcüğü tanımlamaz:

'use strict';
// [let] anahtar sözcüğü, blok kapsamlı bir değişken tanımlamaya olanak tanır
{
  // [count] değişkeni yalnızca bu blok içinde bilinir
  let count = 1;
  console.log("count=", count);
}
// burada [count] değişkeni tanınmamaktadır
count++;

// [const] anahtar sözcüğü, blok kapsamlı bir değişken tanımlamaya olanak tanır
{
  // [count2] değişkeni yalnızca bu blokta bilinmektedir
  const count2 = 1;
  console.log("count=", count2);
}
// Burada [count2] değişkeni bilinmemektedir
count2++;

// [var] anahtar sözcüğüyle blok kapsamlı bir değişken tanımlanamaz
{
  // [count3] değişkeni küresel olarak tanınacaktır
  var count3 = 1;
  console.log("count=", count3);
}
// burada [count3] değişkeni tanınıyor
count3++;

Açıklamalar

• 5. satır: [count] değişkeni, yalnızca bildirildiği kod bloğunda (3-7. satırlar) bilinir;
• 14. satır: [count2] sabiti, yalnızca tanımlandığı kod bloğu içinde (12-16. satırlar) bilinir;
• 23. satır: [count3] değişkeni, tanımlandığı kod bloğunun (21-25. satırlar) dışında da bilinmektedir;

ESLint şu hataları bildiriyor:

Bu blok kapsamı nedenleriyle, bundan sonra yalnızca [let] ve [const] anahtar kelimelerini kullanacağız.

3.7. [bases-07] betiği

JavaScript'teki veri türleri:

'use strict';

// jS veri türü
const var1 = 10;
const var2 = "abc";
const var3 = true;
const var4 = [1, 2, 3];
const var5 = {
  nom: 'axèle'
};
const var6 = function () {
  return +3;
}
// veri türlerinin gösterimi
console.log("typeof(var1)=", typeof (var1));
console.log("typeof(var2)=", typeof (var2));
console.log("typeof(var3)=", typeof (var3));
console.log("typeof(var4)=", typeof (var4));
console.log("typeof(var5)=", typeof (var5));
console.log("typeof(var6)=", typeof (var6));

Çalıştırma

[Running] C:\myprograms\laragon-lite\bin\nodejs\node-v10\node.exe "c:\Temp\19-09-01\javascript\bases\bases-07.js"
typeof(var1)= number
typeof(var2)= string
typeof(var3)= boolean
typeof(var4)= object
typeof(var5)= object
typeof(var6)= function

[Done] exited with code=0 in 0.26 seconds

Yorumlar

• 7. satır (kod): Bir dizi bir nesnedir. Bu bakımdan [var4], dizinin kendisine değil, diziye yönelik bir işaretçidir;
• satır 8 (kod): [var5], bir literal nesneye işaret eden bir işaretçidir. Görüleceği üzere, JavaScript'teki literal nesneler, PHP'in sınıf örneklerine oldukça benzemektedir. Bunlar da işaretçiler aracılığıyla referanslanır;
• 11. satır (kod): Bir değişken, [fonction] türünde olabilir (sonuçların 7. satırı);

3.8. [bases-08] betiği

Bu komut dosyası, JavaScript'te olası tür değişikliklerini göstermektedir.

'use strict';

// örtük tür dönüşümleri
// tür -->bool
console.log("---------------[Conversion implicite vers un booléen]------------------------------");
showBool("abcd");
showBool("");
showBool([1, 2, 3]);
showBool([]);
showBool(null);
showBool(0.0);
showBool(0);
showBool(4.6);
showBool({});
showBool(undefined);

function showBool(data) {
  // verinin boole değerine dönüştürülmesi, aşağıdaki testte otomatik olarak gerçekleştirilir
  console.log("[data=", data, "], [type(data)]=", typeof (data), "[valeur booléenne(data)]=", data ? true : false);
}

// sayısal bir türe örtük tür dönü şümleri
console.log("---------------[Conversion implicite vers un nombre]------------------------------");
showNumber("12");
showNumber("45.67");
showNumber("abcd");

function showNumber(data) {
  // data + 1 çalışmaz çünkü bu durumda jS toplama yerine dize birleştirme işlemi yapar
  const nombre = data * 1;
  console.log("[data=", data, "], [type(data)]=", typeof (data), "[nombre]=", nombre, "[type(nombre)]=", typeof (nombre));
}

// tiplerin boole değerine açıkça dönüştürülmesi
console.log("---------------[Conversion explicite vers un booléen]------------------------------");
showBool2("abcd");
showBool2("");
showBool2([1, 2, 3]);
showBool2([]);
showBool2(null);
showBool2(0.0);
showBool2(0);
showBool2(4.6);
showBool2({});
showBool2(undefined);

function showBool2(data) {
  // verinin boole değerine dönüştürülmesi, takip eden testte açıkça gerçekleştirilir
  console.log("[", data, "], [type(data)]=", typeof (data), "[valeur booléenne(data)]=", Boolean(data));
}
// Number türüne açıkça dönüştürülür
console.log("---------------[Conversion explicite vers un nombre]------------------------------");
showNumber2("12.45");
showNumber2(67.8);
showNumber2(true);
showNumber2(null);

function showNumber2(data) {
  const nombre = Number(data);
  console.log("[data=", data, "], [type(data)]=", typeof (data), "[nombre]=", nombre, "[type(nombre)]=", typeof (nombre));
}

// String'e
console.log("---------------[Conversion explicite vers un string]------------------------------");
showString(5);
showString(6.7);
showString(false);
showString(null);

function showString(data) {
  const chaîne = String(data);
  console.log("[data=", data, "], [type(data)]=", typeof (data), "[chaîne]=", chaîne, "[type(chaîne)]=", typeof (chaîne));
}

// bazı beklenmedik örtük dönüştürmeler
console.log("---------------[Autres cas]------------------------------");
const string1 = '1000.78';
// varsayılan olarak dize birleştirme
const data1 = string1 + 1.034;
console.log("data1=", data1, "type=", typeof (data1));
const data2 = 1.034 + string1;
console.log("data2=", data2, "type=", typeof (data2));
// sayıya açık dönüşüm
const data3 = Number(string1) + 1.034;
console.log("data3=", data3, "type=", typeof (data3));
// true, 1 sayısına dönüştürülür
const data4 = true * 1.18;
console.log("data4=", data4, "type=", typeof (data4));
// false, 0 sayısına dönüştürülür
const data5 = false * 1.18;
console.log("data5=", data5, "type=", typeof (data5));

Çalıştırma

[Running] C:\myprograms\laragon-lite\bin\nodejs\node-v10\node.exe "c:\Data\st-2019\dev\es6\javascript\bases\bases-08.js"
---------------[Conversion implicite vers un booléen]------------------------------
[data= abcd ], [type(data)]= string [valeur booléenne(data)]= true
[data= ], [type(data)]= string [valeur booléenne(data)]= false
[data= [ 1, 2, 3 ] ], [type(data)]= object [valeur booléenne(data)]= true
[data= [] ], [type(data)]= object [valeur booléenne(data)]= true
[data= null ], [type(data)]= object [valeur booléenne(data)]= false
[data= 0 ], [type(data)]= number [valeur booléenne(data)]= false
[data= 0 ], [type(data)]= number [valeur booléenne(data)]= false
[data= 4.6 ], [type(data)]= number [valeur booléenne(data)]= true
[data= {} ], [type(data)]= object [valeur booléenne(data)]= true
[data= undefined ], [type(data)]= undefined [valeur booléenne(data)]= false
---------------[Conversion implicite vers un nombre]------------------------------
[data= 12 ], [type(data)]= string [nombre]= 12 [type(nombre)]= number
[data= 45.67 ], [type(data)]= string [nombre]= 45.67 [type(nombre)]= number
[data= abcd ], [type(data)]= string [nombre]= NaN [type(nombre)]= number
---------------[Conversion explicite vers un booléen]------------------------------
[ abcd ], [type(data)]= string [valeur booléenne(data)]= true
[ ], [type(data)]= string [valeur booléenne(data)]= false
[ [ 1, 2, 3 ] ], [type(data)]= object [valeur booléenne(data)]= true
[ [] ], [type(data)]= object [valeur booléenne(data)]= true
[ null ], [type(data)]= object [valeur booléenne(data)]= false
[ 0 ], [type(data)]= number [valeur booléenne(data)]= false
[ 0 ], [type(data)]= number [valeur booléenne(data)]= false
[ 4.6 ], [type(data)]= number [valeur booléenne(data)]= true
[ {} ], [type(data)]= object [valeur booléenne(data)]= true
[ undefined ], [type(data)]= undefined [valeur booléenne(data)]= false
---------------[Conversion explicite vers un nombre]------------------------------
[data= 12.45 ], [type(data)]= string [nombre]= 12.45 [type(nombre)]= number
[data= 67.8 ], [type(data)]= number [nombre]= 67.8 [type(nombre)]= number
[data= true ], [type(data)]= boolean [nombre]= 1 [type(nombre)]= number
[data= null ], [type(data)]= object [nombre]= 0 [type(nombre)]= number
---------------[Conversion explicite vers un string]------------------------------
[data= 5 ], [type(data)]= number [chaîne]= 5 [type(chaîne)]= string
[data= 6.7 ], [type(data)]= number [chaîne]= 6.7 [type(chaîne)]= string
[data= false ], [type(data)]= boolean [chaîne]= false [type(chaîne)]= string
[data= null ], [type(data)]= object [chaîne]= null [type(chaîne)]= string
---------------[Autres cas]------------------------------
data1= 1000.781.034 type= string
data2= 1.0341000.78 type= string
data3= 1001.814 type= number
data4= 1.18 type= number
data5= 0 type= number