DEV Community: Haktan Tekin

ES6'da Sekizli ve İkili Değişmezlere Hızlı Bir Bakış

Haktan Tekin — Tue, 16 Jan 2024 10:03:17 +0000

Bu eğitimde, ES6'da sekizli ve ikili değişmezlerin nasıl temsil edileceğini öğreneceksiniz.

ES5 sekizlik (önek 0), ondalık (önek yok) ve onaltılık (0x) sayısal değişmezler sağladı. ES6 ikili değişmezler için destek ekledi ve sekizli değişmezleri temsil etme şeklini değiştirdi.

Sekizli Değişmezler

ES5'te sekizli bir değişmezi temsil etmek için, sıfır önekini (0) ve ardından bir dizi sekizli rakamı (0'dan 7'ye kadar) kullanırsınız. Örneğin:

let a = 051;
console.log(a); // 41

Sekizli değişmez aralık dışında bir sayı içeriyorsa, JavaScript baştaki 0'ı yok sayar ve aşağıdaki örnekte gösterildiği gibi sekizli değişmezi ondalık olarak değerlendirir:

let b = 058; // invalid octal
console.log(b); // 58

Bu örnekte, 8 sekizli sayıyı temsil etmek için geçersiz bir rakam olduğundan, JavaScript 0'ı yok sayar ve tam sayıyı 58 değerine sahip bir ondalık olarak ele alır.

Sekizli değişmezleri katı olmayan modda kullanabileceğinizi unutmayın. Bunları katı modda kullanırsanız, JavaScript bir hata verir.

"use strict"
let b = 058; // invalid octal 
console.log(b);

İşte hata mesajı:

SyntaxError: Decimals with leading zeros are not allowed in strict mode.

ES6, 0o önekini ve ardından 0'dan 7'ye kadar bir dizi sekizli rakamı kullanarak sekizli değişmezi belirtmenize olanak tanır. İşte bir örnek:

let c = 0o51;
console.log(c); // 41

Sekizli değişmezde geçersiz bir sayı kullanırsanız, JavaScript aşağıdaki örnekte gösterildiği gibi bir SyntaxError atacaktır:

let d = 0o58;
console.log(d); // SyntaxError

İkili Değişmezler

ES5'te JavaScript, ikili sayılar için herhangi bir gerçek form sağlamıyordu. İkili bir dizeyi ayrıştırmak için parseInt() fonksiyonunu aşağıdaki gibi kullanırsınız:

let e = parseInt('111',2);
console.log(e); // 7

ES6, 0b önekini ve ardından bir dizi ikili sayıyı (0 ve 1) kullanarak ikili değişmezler için destek ekledi. İşte bir örnek:

let f = 0b111;
console.log(f); // 7

Özet

Sekizli değişmezler 0o ile başlar ve ardından 0 ile 7 arasında bir sayı dizisi gelir.
İkili değişmezler 0b ile başlar ve ardından 0 ve 1 sayıları dizisi gelir.

Github JS Eğitimleri

Kaynak

JavaScript Sayısal Ayırıcı / Numeric Seperator

Haktan Tekin — Tue, 16 Jan 2024 09:56:47 +0000

Bu eğitimde, sayısal değişmezleri daha okunabilir hale getirmek için JavaScript sayısal ayırıcısını nasıl kullanacağınızı öğreneceksiniz.

JavaScript Sayısal Ayırıcı Giriş

Sayısal ayırıcı, ayırıcı olarak alt çizgi (_) kullanarak rakam grupları arasında görsel bir ayrım oluşturmanıza olanak tanır.

Örneğin, aşağıdaki sayıyı okumak özellikle uzun rakam tekrarları içerdiğinde çok zordur:

const budget = 1000000000;

Bu bir milyar mı yoksa yüz milyon mu?

Rakamsal ayırıcı bu okunabilirlik sorununu aşağıdaki gibi çözer:

const budget = 1_000_000_000;

Gördüğünüz gibi, sayıyı yorumlamak artık çok kolay.

JavaScript hem tamsayı hem de kayan noktalı sayılar için sayısal ayırıcılar kullanmanıza izin verir. Örneğin:

let amount = 120_201_123.05; // 120201123.05
let expense = 123_450; // 123450
let fee = 12345_00; // 1234500

Ayrıca, fraksiyonel ve üslü kısımlar için sayısal ayırıcıları kullanabilirsiniz. Örneğin:

let amount = 0.000_001; // 1 millionth

Sayısal ayırıcıyı bigint literal, binary literal, octal literal ve hex literal için kullanabileceğinizi fark etmeniz önemlidir. Örneğin:

// BigInt
const max = 9_223_372_036_854_775_807n;

// binary
let nibbles = 0b1011_0101_0101;

// octal
let val = 0o1234_5670;

// hex
let message = 0xD0_E0_F0;

Özet

Rakam grupları arasında görsel bir ayrım oluşturmak için sayısal ayırıcılar olarak alt çizgi (_) kullanın.

Github JS Eğitimleri

Kaynak

JavaScript Numbers

Haktan Tekin — Tue, 16 Jan 2024 09:49:37 +0000

Bu eğitimde, JavaScript sayı türlerini ve bunları nasıl etkili bir şekilde kullanacağınızı öğreneceksiniz.

Javascript Number'a Giriş

JavaScript, hem tamsayıları hem de kayan noktalı değerleri temsil etmek için number türünü kullanır. Teknik olarak, JavaScript number türü IEEE-754 biçimini kullanır.

ES2020, 253 - 1'den büyük değerlere sahip büyük tamsayı sayılarını temsil eden yeni bir ilkel tür bigint'i tanıttı.

Çeşitli sayı türlerini desteklemek için JavaScript farklı sayı değişmez biçimleri kullanır.

Tam Sayılar / Integer

Aşağıda, ondalık tamsayı tutan bir değişkenin nasıl bildirileceği gösterilmektedir:

let counter = 100;

Tamsayılar aşağıdaki formatlarda gösterilebilir:

Sekizli (taban 8)
Onaltılık (16 tabanlı)

Aritmetik işlemlerde sekizlik ve onaltılık sayıları kullandığınızda, JavaScript bunları ondalık sayılar olarak ele alır.

Sekizli Sayılar

Sekizli bir gerçek sayı sıfır (0) rakamıyla başlar ve ardından bir dizi sekizli rakam (0'dan 7'ye kadar sayılar) gelir. Örneğin:

let num = 071;
console.log(num);

Sekizli bir sayı 0 ila 7 aralığında olmayan bir sayı içeriyorsa, JavaScript motoru 0'ı yok sayar ve sayıyı ondalık olarak değerlendirir. Örneğin:

let num = 080;
console.log(num);

Bu örtük davranış sorunlara neden olabilir. Bu nedenle ES6, 0o ile başlayan ve ardından bir dizi sekizli rakam (0'dan 7'ye kadar) içeren yeni bir sekizli değişmez getirmiştir. Örneğin:

let num = 0o71;
console.log(num);

0o'dan sonra geçersiz bir sayı varsa, JavaScript aşağıdaki gibi bir sözdizimi hatası verecektir:

let num = 0o80;
console.log(num);

let num = 0o80;
          ^^
SyntaxError: Invalid or unexpected token

Onaltılık sayılar

Onaltılık sayılar 0x veya 0X ile başlar ve ardından herhangi bir sayıda onaltılık rakam gelir (0'dan 9'a ve a'dan f'ye kadar). Örneğin:

let num = 0x1a;
console.log(num);

Kayan Noktalı Sayılar

Bir kayan noktalı sayı tanımlamak için, bir ondalık nokta ve bundan sonra en az bir sayı eklersiniz. Örneğin:

let price = 9.99;
let tax = 0.08;
let discount = .05; // valid but not recommeded

Çok büyük bir sayıya sahip olduğunuzda, e-notasyon kullanabilirsiniz. E-notasyonu, bir sayının 10 ile çarpılarak belirli bir güce yükseltilmesi gerektiğini gösterir. Örneğin:

let amount = 3.14e7;
console.log(amount);

31400000

3.14e7 gösterimi, 3.14'ü alıp 107 ile çarpmak anlamına gelir.

Aynı şekilde, çok küçük bir sayıyı temsil etmek için E notasyonunu kullanabilirsiniz. Örneğin:

let amount = 5e-7; 
console.log(amount);

0.0000005

5e-7 gösterimi, 5'i alıp 10.000.000'a bölmek anlamına gelir.

Ayrıca JavaScript, ondalık noktasından sonra en az altı sıfır bulunan tüm kayan noktalı sayıları otomatik olarak e-notasyonuna dönüştürür. Örneğin:

let amount = 0.0000005;
console.log(amount);

5e-7

Kayan noktalı sayılar 17 ondalık basamağa kadar doğrudur. Kayan noktalı sayılar üzerinde aritmetik işlemler gerçekleştirdiğinizde, genellikle yaklaşık sonucu alırsınız. Örneğin:

let amount = 0.2 + 0.1;
console.log(amount);

0.30000000000000004

Büyük Tamsayılar

JavaScript, ES2022'den itibaren bigint türünü tanıttı. bigint türü, değerleri 253 - 1'den büyük olan tam sayıları saklar.

Bir büyük tamsayı değişmezi, aşağıdaki gibi bir tamsayı değişmezinin sonunda n karakterine sahiptir:

let pageView = 9007199254740991n;

Özet

JavaScript Number türü hem tamsayı hem de kayan noktalı sayıları temsil eder.

Github JS Eğitimleri

Kaynak

JavaScript Data Types / Veri Türleri

Haktan Tekin — Tue, 16 Jan 2024 09:12:26 +0000

Bu eğitimde JavaScript veri türleri ve bunların benzersiz özellikleri hakkında bilgi edineceksiniz.

JavaScript primitive veri türlerine sahiptir:

null
undefined
boolean
number
string
symbol – ES2015 ile mümkün
bigint – ES2020 ile mümkün

ve karmaşık bir veri türü nesnesi.

JavaScript dinamik olarak yazılan bir dildir; yani bir değişken belirli bir türle ilişkilendirilmez. Başka bir deyişle, bir değişken farklı türde bir değer tutabilir. Örneğin:

let counter = 120; // counter is a number
counter = false;   // counter is now a boolean
counter = "foo";   // counter is now a string

Bir değişkende saklanan değerin geçerli türünü belirlemek için typeof operatörünü kullanırsınız:

let counter = 120;
console.log(typeof(counter)); // "number"

counter = false; 
console.log(typeof(counter)); // "boolean"

counter = "Hi";
console.log(typeof(counter)); // "string"

Çıktısı:

"number"
"boolean"
"string"

Undefined Türü

Undefined türü, yalnızca bir değeri tanımlanmamış olan primitive
bir türdür. Varsayılan olarak, bir değişken bildirildiğinde ancak başlatılmadığında, varsayılan olarak undefined olur.

Aşağıdaki örneği düşünün:

let counter;
console.log(counter);        // undefined
console.log(typeof counter); // undefined

Bu örnekte counter bir değişkendir. counter henüz başlatılmadığından undefined değere atanmıştır. counter'ın türü de undefined'tır.

typeof operatörünün, onu bildirilmemiş bir değişken üzerinde çağırdığınızda da unDefinition değerini döndürdüğünü unutmamak önemlidir:

console.log(typeof undeclaredVar); // undefined

null Türü

null türü, yalnızca bir null değerine sahip olan ikinci primitive veri türüdür. Örneğin:

let obj = null;
console.log(typeof obj); // object

typeof null döndürme nesnesi, JavaScript'te bilinen bir hatadır. Mevcut birçok siteyi bozma potansiyeli nedeniyle düzeltme teklifi reddedildi.

JavaScript, null'un undefined'a eşit olduğunu şu şekilde tanımlar:

console.log(null == undefined); // true

Number Türü

JavaScript, hem tamsayı hem de ondalıklı sayıları temsil etmek için number türünü kullanır.

Aşağıdaki ifade bir değişken bildirir ve değerini bir tamsayı ile başlatır:

let num = 100;

Ondalıklı bir sayıyı temsil etmek için, bir ondalık nokta ve ardından en az bir sayı eklersiniz. Örneğin:

let price = 12.5; 
let discount = 0.05;

Sayı tam sayı gibi görünüyorsa JavaScript'in ondalıklı sayıyı otomatik olarak tam sayıya dönüştürdüğünü unutmayın.

Bunun nedeni, ondalıklı sayı değeri bir tamsayı değerinden iki kat daha fazla bellek kullandığından Javascript'in her zaman daha az bellek kullanmak istemesidir. Örneğin:

let price = 200.00; // interpreted as an integer 200

Sayı türünün aralığını elde etmek için Number.MIN_VALUE ve Number.MAX_VALUE'yu kullanırsınız. Örneğin:

console.log(Number.MAX_VALUE); // 1.7976931348623157e+308
console.log(Number.MIN_VALUE); // 5e-324

Ayrıca sonsuz sayıyı temsil etmek için Infinity ve -Infinity'i kullanabilirsiniz. Örneğin:

console.log(Number.MAX_VALUE + Number.MAX_VALUE); // Infinity
console.log(-Number.MAX_VALUE - Number.MAX_VALUE); // -Infinity

NaN

NaN, sayı değil anlamına gelir. Geçersiz bir sayıyı belirten özel bir sayısal değerdir. Örneğin, bir dizenin bir sayıya bölünmesi NaN: değerini döndürür.

console.log('a'/2); // NaN;

NaN'ın iki özel özelliği vardır:

NaN ile yapılan herhangi bir işlem NaN değerini döndürür.
NaN kendisi dahil hiçbir değere eşit değildir.

İşte bazı örnekler:

console.log(NaN/2); // NaN
console.log(NaN == NaN); // false

String Türü

JavaScript'te bir string, sıfır veya daha fazla karakterden oluşan bir string'dir. Bir string değişmezi tek tırnakla (') veya çift tırnakla (") başlar ve biter.

Çift tırnakla başlayan bir string çift tırnakla bitmeli, tek tırnakla başlayan bir string de tek tırnakla bitmelidir. Örneğin:

let greeting = 'Hi';
let message  = "Bye";

Bir değişmez dizede tek tırnak veya çift tırnak kullanmak istiyorsanız, bunlardan kaçmak için ters eğik çizgiyi kullanmanız gerekir. Örneğin:

let message = 'I\'m also a valid string'; // use \ to escape the single quote (')

JavaScript string değişmezdir, yani oluşturulduktan sonra değiştirilemezler. Ancak mevcut bir string'den yeni bir string oluşturabilirsiniz. Örneğin:

let str = 'JavaScript';
str = str + ' String';

Bu örnekte:

Öncelikle str değişkenini bildirin ve 'JavaScript' string'ini oluşturun. İkinci olarak, 'JavaScript''i 'String' ile birleştirerek değerini 'Javascript String' yapmak için + operatörünü kullanın. Sahnenin arkasında, JavaScript motoru, yeni 'JavaScript String' string'ini tutan yeni bir string oluşturur ve orijinal 'JavaScript' ve 'String' türünü yok eder.

Aşağıdaki örnek, JavaScript string'inin ilk karakterini değiştirmeye çalışmaktadır:

let s = 'JavaScript';
s[0] = 'j';
console.log(s)

Çıktısı:

'JavaScript'

Ancak istenen:

'javaScript'

Boolean Türü

boolean türünün iki değişmez değeri vardır: küçük harflerle true ve false. Aşağıdaki örnek, boolean değerlerini tutan iki değişkeni bildirir.

let inProgress = true;
let completed = false;

console.log(typeof completed); // boolean

JavaScript, diğer türlerdeki değerlerin true veya false boolean değerlerine dönüştürülmesine olanak tanır.

Diğer türlerin değerlerini boolean değerlerine dönüştürmek için Boolean() function'ını kullanırsınız.

Örnek:

console.log(Boolean('Hi'));// true
console.log(Boolean(''));  // false

console.log(Boolean(20));  // true
console.log(Boolean(Infinity));  // true
console.log(Boolean(0));  // false

console.log(Boolean({foo: 100}));  // true on non-empty object
console.log(Boolean(null));// false

Symbol Türü

JavaScript, ES6'ya yeni bir primitive tür ekledi: symbol. Diğer primitive tiplerden farklı olarak symbol türünün gerçek bir formu yoktur.

Bir sembol oluşturmak için Symbol işlevini şu şekilde çağırırsınız:

let s1 = Symbol();

Symbol işlevi, onu her çağırdığınızda yeni bir benzersiz değer oluşturur.

console.log(Symbol() == Symbol()); // false

Sembol eğitiminde semboller hakkında daha fazla bilgi edineceğinizi unutmayın.

bigint Türü

bigint türü, 253 – 1'den büyük tam sayıları temsil eder. bigint değişmez bir sayı oluşturmak için sayının sonuna n harfini eklersiniz:

let pageView = 9007199254740991n;
console.log(typeof(pageView)); // 'bigint'

object Türü

JavaScript'te bir nesne, her özelliğin bir anahtar/değer çifti olarak tanımlandığı bir özellikler koleksiyonudur.

Aşağıdaki örnek, nesne değişmez sözdizimini kullanarak boş bir nesneyi tanımlar:

let emptyObject = {};

Şu örnek, kişi nesnesini iki özellikle tanımlar: FirstName ve lastName.

let person = {
    firstName: 'John',
    lastName: 'Doe'
};

Bir nesnenin özellik adı herhangi bir dize olabilir. Geçerli bir tanımlayıcı değilse, özellik adının etrafında tırnak işaretleri kullanabilirsiniz.

Örneğin, person nesnesinin bir ad özelliği varsa, bunu "ad" gibi tırnak işaretleri içine almanız gerekir.

Bir nesnenin özelliği bir nesneyi tutabilir. Örneğin:

let contact = {
    firstName: 'John',
    lastName: 'Doe',
    email: 'john.doe@example.com',
    phone: '(408)-555-9999',
    address: {
        building: '4000',
        street: 'North 1st street',
        city: 'San Jose',
        state: 'CA',
        country: 'USA'
    }
}

contact nesnesi, FirstName, LastName, email, phone ve address özelliklerine sahiptir.

address özelliğinin kendisi building, street, city, state ve country özelliklerine sahip bir nesneyi içerir.

Bir nesnenin özelliğine erişmek için şunları kullanabilirsiniz:

Nokta gösterimi (.)
Dizi benzeri gösterim ([]).

Aşağıdaki örnek, contact nesnesinin firstName ve lastName özelliklerine erişmek için nokta gösterimini (.) kullanır.

console.log(contact.firstName);
console.log(contact.lastName);

Mevcut olmayan bir özelliğe başvurursanız undefined bir değer elde edersiniz. Örneğin:

console.log(contact.age); // undefined

Aşağıdaki örnek, contact nesnesinin email ve phobe özelliklerine erişmek için dizi benzeri gösterimi kullanır.

console.log(contact['phone']); // '(408)-555-9999'
console.log(contact['email']); // 'john.doe@example.com'

Özet

JavaScript'in primitive türleri vardır: number, string, boolean, null, undefined, symbol and bigint ve karmaşık bir tür: object.

Github JS Eğitimleri

Kaynak

JavaScript Variables / Javascript Değişkenleri

Haktan Tekin — Tue, 16 Jan 2024 08:11:23 +0000

Bu eğitimde, JavaScript değişkenlerini ve değişkenleri uygulamada değerleri depolamak için nasıl kullanacağınızı öğreneceksiniz.

Değişken, number veya string gibi bir değere başvuran bir etikettir. Bir değişkeni kullanmadan önce onu bildirmeniz gerekir.

Değişken Tanımlama

Bir değişken bildirmek için var anahtar sözcüğünü ve ardından değişken adını aşağıdaki gibi kullanırsınız:

var message;

Değişken adı herhangi bir geçerli tanımlayıcı olabilir. Varsayılan olarak, eğer ona bir değer atamadıysanız, mesaj değişkeninin özel bir değeri tanımsızdır.

Değişken adları şu kurallara uyar:

Değişken adları büyük/küçük harfe duyarlıdır. Bu, message ve Message'ın farklı değişkenler olduğu anlamına gelir.
Değişken adları yalnızca harf, sayı, alt çizgi veya dolar işareti içerebilir ve boşluk içeremez. Ayrıca değişken adları bir harfle, alt çizgiyle (_) veya dolar işaretiyle ($) başlamalıdır.
Değişken adları ayrılmış sözcükleri kullanamaz.

Geleneksel olarak değişken adları, message, yourAge ve myName gibi camelCase denilen büyük küçük uyumlu harfleri kullanır.

JavaScript dinamik olarak yazılan bir dildir. Bu, Java veya C# gibi diğer statik tipli diller gibi bildirimde değişkenin tipini belirtmenize gerek olmadığı anlamına gelir.

ES6'dan başlayarak, şöyle bir değişken bildirmek için let anahtar sözcüğünü kullanabilirsiniz:

let message;

Bir değişkeni bildirmek için let anahtar sözcüğünü kullanmak iyi bir yoldur. Daha sonra var ve let anahtar kelimeleri arasındaki farkları öğreneceksiniz. Şimdilik bu konuda endişelenmemelisin.

Bir Değişken Tanımlama

Bir değişkeni tanımladıktan sonra onu bir değerle başlatabilirsiniz. Bir değişkeni başlatmak için değişkenin adını, ardından eşittir işaretini (=) ve bir değeri belirtirsiniz.

Örneğin, aşağıdakiler message değişkenini bildirir ve onu "Hello" değişmez dizesiyle başlatır:

let message;
message = "Hello";

Bir değişkeni aynı anda bildirmek ve başlatmak için aşağıdaki sözdizimini kullanırsınız:

let variableName = value;

Örneğin, aşağıdaki ifade message değişkenini bildirir ve onu "Hello" değişmez dizesiyle başlatır:

let message = "Hello";

JavaScript, tek bir ifade kullanarak iki veya daha fazla değişkeni bildirmenize olanak tanır. İki değişken bildirimini ayırmak için şunun gibi bir virgül (,) kullanırsınız:

let message = "Hello",
    counter = 100;

JavaScript dinamik olarak yazılan bir dil olduğundan, bir değişkene farklı türde bir değer atayabilirsiniz. Ancak tavsiye edilmez. Örneğin:

let message = 'Hello';
message = 100;

Değişkenin Değerini Değiştirme

Bir değişkeni başlattığınızda, farklı bir değer atayarak değerini değiştirebilirsiniz. Örneğin:

let message = "Hello";
message = 'Bye';

Undefined gibi Bildirilmemiş Değişkenler

Tanımlanmamış ve bildirilmemiş değişkenler arasında ayrım yapmak önemlidir.

Tanımsız bir değişken, bildirilmiş ancak bir değerle başlatılmamış bir değişkendir. Örneğin:

let message;
console.log(message); // undefined

Bu örnekte message değişkeni bildirildi ancak başlatılmadı. Bu nedenle message değişkeni tanımsızdır.

Bunun aksine, bildirilmemiş bir değişken bildirilmemiş bir değişkendir. Örneğin:

console.log(counter);

Çıktısı:

console.log(counter);
            ^
ReferenceError: counter is not defined

Bu örnekte counter değişkeni bildirilmemiştir. Bu nedenle, ona erişmek bir ReferenceError'a neden olur.

Sabit Değişken

Bir sabit değişmeyen bir değeri tutar. Bir sabiti bildirmek için const anahtar sözcüğünü kullanırsınız. Bir sabiti tanımlarken onu bir değerle başlatmanız gerekir. Örneğin:

const workday = 5;

Bir sabiti tanımladıktan sonra değerini değiştiremezsiniz.

Aşağıdaki örnek, iş günü sabitinin değerini 4 olarak değiştirmeye çalışır ve bir hataya neden olur:

workday = 2;

Hata:

Uncaught TypeError: Assignment to constant variable.

Daha sonra const anahtar sözcüğünün aslında sabitler eğitimindeki bir değere salt okunur bir referans tanımladığını öğreneceksiniz.

Özet

Değişken, bir değere başvuran bir etikettir.
Bir değişken bildirmek için let anahtar sözcüğünü kullanın.
Tanımlanmamış bir değişken, bildirilmiş ancak başlatılmamış bir değişkendir; bildirilmemiş bir değişken ise bildirilmemiş bir değişkendir.
Bir değere salt okunur bir başvuru tanımlamak için const anahtar sözcüğünü kullanın.

Github JS Eğitimleri

Kaynak

JavaScript Syntax

Haktan Tekin — Tue, 16 Jan 2024 08:03:49 +0000

Bu eğitimde boşluklar, ifadeler, tanımlayıcılar, yorumlar, ifadeler ve anahtar sözcükler de dahil olmak üzere JavaScript söz dizimi hakkında bilgi edineceksiniz.

Whitespace / Boşluk

Boşluk, diğer karakterler arasında boşluk sağlayan karakterleri ifade eder. JavaScript'te aşağıdaki boşluk bulunur:

Satırbaşı
Boşluk
Yeni Hat
Sekme

JavaScript motoru boşlukları dikkate almaz. Ancak, okunmasını ve bakımını kolaylaştırmak amacıyla kodu biçimlendirmek için boşluk kullanabilirsiniz.

Aşağıdaki JavaScript kodu boşluk kullanmaz:

let formatted = true; if (formatted) {console.log('The code is easy to read');}

Boşluk kullanmak aşağıdaki koda eşdeğerdir. Dolayısıyla bu kodu okumak çok daha kolaydır:

let formatted = true;

if (formatted) {
  console.log('The code is easy to read');
}

JavaScript paketleyicilerinin, JavaScript dosyalarındaki tüm boşlukları kaldırdığını ve bunları dağıtım için tek bir dosyaya koyduğunu unutmayın. Bunu yaparak, JavaScript paketleyicileri, JavaScript kodunun daha hafif olmasını ve web tarayıcılarına daha hızlı yüklenmesini sağlar.

İfadeler

İfade, bir değişkeni bildiren veya JavaScript motoruna bir görevi gerçekleştirme talimatını veren bir kod parçasıdır. Basit bir ifade noktalı virgül (;) ile sonlandırılır.

Noktalı virgül (;) isteğe bağlı olmasına rağmen; bunu her zaman bir ifadeyi sonlandırmak için kullanmalısınız.

Örneğin, aşağıdakiler bir değişken bildirir ve onu konsola gösterir:

let message = "Welcome to JavaScript";
console.log(message);

Bloklar

Bir blok, sıfır veya daha fazla basit ifadenin dizisidir. Bir blok bir çift süslü parantez {} ile sınırlandırılmıştır. Örneğin:

if (window.localStorage) {
  console.log('The local storage is supported');
}

Tanımlayıcılar

Tanımlayıcı değişkenler, parametreler, işlevler, sınıflar vb. için seçtiğiniz bir addır.

Tanımlayıcı adı bir harfle (a-z veya A-Z), bir alt çizgiyle (_) veya bir dolar işaretiyle ($) başlar ve ardından (a-z, A-Z), rakamlar (0-9), alt çizgileri içeren bir karakter dizisi (_) ve dolar işaretleri ($) gelir.

Harfin ASCII karakter seti ile sınırlı olmadığını ve tavsiye edilmese de genişletilmiş ASCII veya Unicode içerebileceğini unutmayın.

JavaScript'teki tanımlayıcılar büyük/küçük harfe duyarlıdır. Örneğin message, Message'dan farklıdır.

Yorumlar

Yorumlar, JavaScript koduna notlar veya ipuçları eklemenizi sağlar. Kodu çalıştırırken JavaScript motoru yorumları dikkate almaz.

JavaScript hem tek satırlı hem de blok yorumları destekler.

Tek satırlık Yorumlar

Tek satırlık bir yorum iki eğik çizgi karakteriyle (//) başlar. Aynı satırda // işaretinden sonra gelen tüm metni yoruma dönüştürür. Örneğin:

// this is a single-line comment

Blok Yorumlar

Sınırlandırılmış bir yorum eğik çizgi ve yıldız işareti /* ile başlar ve aşağıdaki örnekte olduğu gibi zıt */ ile biter:

/* This is a block comment
that can span multiple lines */

İfadeler

İfade, bir değer olarak değerlendirilen bir kod parçasıdır. Örneğin:

2 + 1

Yukarıdaki ifade üç değerini döndürür.

Anahtar Kelimeler ve Ayrılmış kelimeler

JavaScript, belirli kullanımları olan ayrılmış anahtar kelimelerin bir listesini tanımlar. Dolayısıyla, dil kuralları gereği, ayrılmış anahtar kelimeleri tanımlayıcı veya özellik adı olarak kullanamazsınız.

Aşağıdaki tabloda ECMA-262'de tanımlandığı şekilde JavaScript'e ayrılmış sözcükler gösterilmektedir:

break   
case    
catch
continue    
debugger    
default
else    
export  
extends
function    
if  
import
new 
return  
super
throw   
try 
null
void    
while   
with
class   
delete  
finally
in  
switch  
typeof
yield   
const   
do
for 
instanceof  
this
var

ECMA-252, ayrılmış anahtar sözcüklere ek olarak, tanımlayıcılar veya özellik adları olarak kullanılamayacak, gelecekte ayrılmış sözcüklerin bir listesini de tanımlar:

enum    
implements  
let
protected   
private 
public
await   
interface   
package
implements  
public

Özet

Kodu biçimlendirmek için satır başı, boşluk, yeni satır ve sekme dahil olmak üzere boşluk kullanın. JavaScript motoru boşlukları dikkate almaz.
Basit bir ifadeyi sonlandırmak için noktalı virgül (;) kullanın.
Bir veya daha fazla basit ifadeyi gruplandıran bir blok oluşturmak için küme parantezlerini ({}) kullanın.
Tek satırlık yorum // ile başlar ve ardından metin gelir, blok yorum ise /* ile başlar ve */ ile biter. JavaScript motoru yorumları yok sayar.
Tanımlayıcılar değişkenler, işlevler, sınıflar vb. için seçtiğiniz adlardır.
Tanımlayıcılar için ayrılmış anahtar kelimeler kullanmaktan kaçının.

Github JS Eğitimleri

Kaynak

JavaScript Hello World Örneği

Haktan Tekin — Tue, 16 Jan 2024 07:45:54 +0000

Bu eğitim, JavaScript kodunu bir HTML sayfasına nasıl yerleştireceğinizi göstererek JavaScript'i kullanmaya başlamanıza yardımcı olur.

Bir HTML sayfasına JavaScript eklemek için <script> öğesini kullanırsınız. <script> öğesini bir HTML sayfasında kullanmanın iki yolu vardır:

JavaScript kodunu doğrudan HTML sayfasına gömün.
Harici bir JavaScript kod dosyasına başvurun.

JavaScript kodunu bir HTML sayfasına yerleştirme

JavaScript kodunun doğrudan <script> öğesinin içine yerleştirilmesi önerilmez ve yalnızca kavram kanıtı veya test amacıyla kullanılmalıdır.

<script> elementindeki JavaScript kodu yukarıdan aşağıya doğru yorumlanır. Örneğin:

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>JavaScript Hello World Example</title>
    <script>
        alert('Hello, World!');
    </script>
</head>
<body>
</body>
</html>

<script> elementi içinde, alert() funciton'ı ile Hello World! yazdırabiliriz.

Harici bir JavaScript dosyası ekleyin

Harici bir dosyadan JavaScript eklemek için:

Öncelikle app.js gibi uzantısı .js olan bir dosya oluşturun ve bunu js dizinine yerleştirin. JavaScript dosyasını js dizinine yerleştirmenin gerekli olmadığını ancak bunun iyi bir uygulama olarak kabul edildiğini unutmayın.
Daha sonra, <script> öğesinin src özelliğindeki JavaScript kaynak kod dosyasının URL'sini kullanın.

Aşağıda app.js dosyasının içeriği gösterilmektedir:

alert('Hello, World!');

Aşağıda helloworld.html dosyasının içeriği görüntülenir:

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>JavaScript Hello World Example</title>
    <script src="js/app.js"></script>
</head>
<body>

</body>
</html>

helloworld.html dosyasını web tarayıcısında başlatırsanız, Hello World! İletisini görürsünüz.

Uzak bir sunucudan bir JavaScript dosyası yükleyebileceğinizi unutmayın. Bu, sayfa yükleme hızını artırmak için içerik dağıtım ağı (CDN) gibi çeşitli alanlardan JavaScript sunmanıza olanak tanır.

Bir sayfada birden fazla JavaScript dosyanız olduğunda, JavaScript motoru, dosyaları göründükleri sıraya göre yorumlar. Örneğin:

<script src="js/service.js"></script>
<script src="js/app.js"></script>

Bu örnekte, JavaScript motoru service.js ve app.js dosyalarını sırayla yorumlayacaktır. app.js dosyasına geçmeden önce öncelikle service.js dosyasının yorumlanmasını tamamlar.

Birçok harici JavaScript dosyası içeren bir sayfa için oluşturma aşamasında boş sayfa görüntülenebilir.

Bunu önlemek için JavaScript dosyasını bu örnekte gösterildiği gibi </body> etiketinin hemen önüne eklersiniz:

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>JavaScript Hello World Example</title>
</head>
<body>

   <!-- end of page content here-->
   <script src="js/service.js"></script>
   <script src="js/app.js"></script>
</body>
</html>

async ve defer Özellikleri

Tarayıcının JavaScript dosyalarını yükleme ve yürütme biçimini değiştirmek için <script> öğesinin iki özelliğinden birini kullanırsınız: async ve defer. Bu öznitelikler yalnızca harici komut dosyası dosyalarında etkili olur.

async Özelliği

Async özelliği, web tarayıcısına JavaScript dosyasını eşzamansız olarak yürütmesi talimatını verir. Ancak komut dosyalarının göründükleri sırayla yürütüleceğini garanti etmez. Örneğin:

<script async src="service.js"></script>
<script async src="app.js"></script>

app.js dosyası, service.js dosyasından önce yürütülebilir. Bu nedenle aralarında herhangi bir bağımlılık olmadığından emin olmalısınız.

defer Özelliği

defer özelliği, web tarayıcısından, HTML belgesi ayrıştırıldıktan sonra komut dosyasını yürütmesini ister.

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>JavaScript defer demonstration</title>
    <script defer src="defer-script.js"></script>
</head>
<body>
</body>
</html>

<script> öğesini <head> bölümüne yerleştirmemize rağmen, komut dosyası çalışmaya başlamak için tarayıcının kapanış </html> etiketini almasını bekleyecektir.

Özet

Bir HTML sayfasına JavaScript dosyası eklemek için <script> öğesini kullanın.
<script> öğesinin async özelliği, web tarayıcısına JavaScript dosyasını paralel olarak getirmesi ve ardından JavaScript dosyası kullanılabilir hale gelir gelmez onu ayrıştırıp yürütmesi talimatını verir.
<script> öğesinin defer özelliği, web tarayıcısının, belge ayrıştırıldıktan sonra JavaScript dosyasını yürütmesine olanak tanır.

Github JS Eğitimleri

Kaynak

Browser'daki Console İle Çalışmak

Haktan Tekin — Mon, 15 Jan 2024 15:52:16 +0000

Bu eğitimde, mesajları görüntülemek için web geliştirme araçlarının Console sekmesini nasıl açacağınızı öğreneceksiniz.

Web geliştirme araçları, JavaScript kodunu test etmenize ve hata ayıklamanıza olanak tanır. Web geliştirme araçlarına genellikle geliştirici araçları denir.

Google Chrome, Firefox, Edge, Safari ve Opera gibi modern web tarayıcıları, geliştirme araçlarını yerleşik özellikler olarak sağlar.

Genel olarak geliştirme araçları HTML, CSS, DOM ve JavaScript gibi çeşitli web teknolojileriyle çalışmanıza olanak tanır.

Bu eğitimde, JavaScript tarafından gönderilen mesajları görüntülemek için geliştirici araçlarının Konsol sekmesini nasıl açacağınızı öğreneceksiniz.

Google Chrome

Öncelikle devtools.html dosyasını açın.

devtools.html dosyası aşağıdaki JavaScript koduna sahiptir:

<script>
    console.log('Hello, devtools!');

    // the following code causes an error
    let greeting = msg;
</script>

İkinci olarak, Windows'ta F12'ye veya Mac'teyseniz Cmd+Opt+J tuşlarına basın.

Geliştirici araçları varsayılan olarak Konsol sekmesini açacaktır. Bunun gibi görünecek:

İlk mesaj Hello DevTools! aşağıdaki komutun çıktısıdır:

console.log('Hello, DevTools!');

Değişkenin değerinin çıktısını almak için aşağıdaki console.log() yöntemini kullanırsınız. Örneğin:

let message = 'Good Morning!';
console.log(message);

Konsol sekmesinde görünen ikinci mesaj bir hatadır.

Uncaught ReferenceError: msg is not defined

Bunun nedeni, msg değişkeninin kodda tanımlanmamış olması ancak atamada referans verilmiş olmasıdır.

Artık console.log() tarafından verilen normal mesajları ve hata mesajlarını görebilirsiniz. Başlamak yeterli. Daha sonraki eğitimde geliştirme araçlarına dalacağız.

Firefox and Edge

Tipik olarak Firefox ve Edge'deki geliştirici araçlarının Konsol sekmesini F12'yi kullanarak açarsınız. Benzer kullanıcı arayüzlerine sahiptirler.

Safari

Mac'te Safari tarayıcısı kullanıyorsanız öncelikle Geliştirici Menüsünü etkinleştirmeniz gerekir:

Daha sonra Konsol penceresine geçiş yapmak için Cmd+Opt+C tuşlarına basın:

Bu eğitimde, JavaScript kodu tarafından yayınlanan mesajları kontrol etmek için geliştirici araçlarının Konsol sekmesini nasıl açacağınızı öğrendiniz.

Github JS Eğitimleri

Kaynak

Javascript Kod Editörleri

Haktan Tekin — Mon, 15 Jan 2024 15:26:08 +0000

Bu eğitimde, JavaScript kod düzenleyicilerini ve JavaScript kodlamak için Visual Studio Code'un nasıl kurulacağını öğreneceksiniz.

Popüler JavaScript Kod Düzenleyicileri

JavaScript kaynak kodunu düzenlemek için Windows'ta Not Defteri gibi bir düz metin düzenleyicisine ihtiyacınız vardır. Ancak, JavaScript kodunun yazımını basitleştirmek ve hızlandırmak için bir JavaScript kod düzenleyicisine ihtiyacınız vardır.

Temel düzenleme özelliklerinin yanı sıra, bir JavaScript kod düzenleyicisi size sözdizimi vurgulama, girintileme, otomatik tamamlama ve küme ayracı eşleştirme işlevleri sağlar. Bazı düzenleyiciler ayrıca JavaScript'te hata ayıklamanıza da izin verir.

Aşağıda bazı popüler JavaScript kod düzenleyicileri verilmiştir:

Visual Studio Code
Atom
Notepad++
Vim
GNU Emacs

Tüm bu JavaScript editörlerinin ücretsiz olduğunu unutmayın. Tercih olarak Visual Studio Code'u kullanacağız.

Visual Studio Code

Visual Studio Code, Microsoft tarafından geliştirilen ücretsiz ve açık kaynaklı bir kod düzenleyicisidir. Visual Studio Code'a genellikle VS Code denir.

VS Code, Windows, Linux ve macOS gibi platformlarda çalışır.

VS Kodu son derece özelleştirilebilir. Temayı, klavye kısayollarını ve tercihleri değiştirmenize olanak tanır. Düzenleyiciye ekstra işlevsellik katan birçok kullanışlı uzantıya sahiptir.

VS Code, IntelliSense, hata ayıklama, biçimlendirme, kodda gezinme, yeniden düzenleme ve diğer birçok gelişmiş dil özelliğini içeren yerleşik JavaScript desteğini içerir.

VS kodu tarafından desteklenen tüm özellikleri öğrenmek için Visual Studio Code'daki Javascript'e göz atarsınız.

Visual Studio Code İndirme

Visual Studio Code'u indirmek için aşağıdaki indirme bağlantısına gidin:

VSCode Yükle

Visual Studio Kodunu Yükleme

Visual Studio Code'u ayarlamak kolay ve hızlıdır. Küçük bir indirme olduğundan birkaç dakika içinde yükleyebilirsiniz.

Live Server Eklentisini Yükleme

Live Server uzantısı, statik sayfalar için çalışırken yeniden yükleme özelliğine sahip bir geliştirme yerel sunucusu başlatmanıza olanak tanır. JavaScript kodunu değiştirdikten sonra değişiklikleri görmek için sayfayı yenilemenize gerek yoktur.

Live Server uzantısını yüklemek için şu adımları izleyin:

İlk önce Uzantılar'ı tıklayın.
İkinci olarak, Canlı Sunucuyu arayın ve listeden Canlı Sunucu uzantısını seçin.
Son olarak Install butonuna tıklayın.

Bu öğreticide, JavaScript kod düzenleyicisini ve JavaScript kaynak kodunu düzenlemek için Visual Studio Code'un nasıl kurulacağını öğrendiniz.

Github JS Eğitimleri

Kaynak

Javascript Nedir?

Haktan Tekin — Mon, 15 Jan 2024 14:51:32 +0000

JavaScript, başlangıçta web sayfalarının öğeleriyle etkileşim kurmak için tasarlanmış bir programlama dilidir. Web tarayıcılarında JavaScript üç ana bölümden oluşur:

ECMAScript çekirdek işlevselliği sağlar.
Belge Nesne Modeli (DOM), web sayfalarındaki öğelerle etkileşim için arayüzler sağlar
Tarayıcı Nesne Modeli (BOM), web tarayıcısı ile etkileşim için tarayıcı API'sini sağlar.

JavaScript, bir web sayfasına etkileşim eklemenizi sağlar. Genellikle, formları doğrulamak, etkileşimli haritalar oluşturmak ve animasyonlu grafikler görüntülemek gibi bir web sayfasının işlevselliğini geliştirmek için HTML ve CSS ile JavaScript kullanırsınız.

Bir web sayfası yüklendiğinde, yani HTML ve CSS indirildikten sonra, web tarayıcısındaki JavaScript motoru JavaScript kodunu çalıştırır. JavaScript kodu daha sonra kullanıcı arayüzünü dinamik olarak güncellemek için HTML ve CSS'yi değiştirir.

JavaScript motoru, JavaScript kodunu yorumlamak ve yürütmekten sorumlu web tarayıcılarının bir bileşenidir. Kodu analiz etmek için bir ayrıştırıcı, makine koduna dönüştürmek için bir derleyici ve derlenmiş kodu çalıştırmak için bir yorumlayıcı içerir.

Önemli JavaScript motorları arasında Chrome'da V8, Firefox'ta SpiderMonkey ve Safari'de JavaScriptCore bulunmaktadır.

Başlangıçta, JavaScript motorları yorumlayıcılar olarak uygulanmıştır. Ancak, modern JavaScript motorları genellikle JavaScript kodunu gelişmiş performans için bayt koduna derleyen tam zamanında derleyiciler olarak uygulanmaktadır.

İstemci Tarafı ve Sunucu Tarafı JavaScript

JavaScript bir web sayfasında kullanıldığında, web tarayıcılarında yürütülür ve istemci tarafı dili olarak hizmet verir.

JavaScript hem web tarayıcılarında hem de sunucularda çalışabilir. Popüler bir JavaScript sunucu tarafı ortamı Node.js'dir. İstemci taraflı JavaScript'in aksine, sunucu taraflı JavaScript sunucuda çalışır ve veritabanlarına, dosya sistemlerine vb. erişmenizi sağlar.

JavaScript Tarihi

JavaScript 1995 yılında bir Netscape geliştiricisi olan Brendan Eich tarafından geliştirilmiştir. Başlangıçta Mocha olarak adlandırılan JavaScript'in adı daha sonra LiveScript olarak değiştirildi.

Netscape, Java'nın popülaritesinden yararlanmak için LiveScript'i JavaScript olarak yeniden markalaştırmaya karar verdi. Bu karar, Netscape Navigator 2 web tarayıcısının piyasaya sürülmesinden kısa bir süre önce alındı ve JavaScript sürüm 1.0'ın piyasaya sürülmesine yol açtı.

Netscape, JavaScript 1.1'i Netscape Navigator 3'te kullanıma sundu. Bu arada Microsoft, Netscape'e rakip olarak Internet Explorer 3 (IE 3) adlı web tarayıcısını tanıttı. Ancak IE, JScript adı verilen kendi JavaScript uygulamasına sahipti. Microsoft, Netscape ile olası lisans çatışmalarından kaçınmak için JScript adını kullandı.

Dolayısıyla, JavaScript'in iki farklı sürümü piyasadaydı:

Netscape Navigator'da JavaScript
Internet Explorer'da JScript

O dönemde JavaScript'in standartlaştırılmış sözdizimi ve özellikleri yoktu ve bu da topluluğun dilin standartlaştırılmasını savunmasına yol açtı.

1997 yılında JavaScript 1.1, Avrupa Bilgisayar Üreticileri Birliği'ne (ECMA) bir öneri olarak sunulmuştur. Teknik Komite #39'a (TC39) dili standartlaştırma ve genel amaçlı, platformlar arası ve satıcıdan bağımsız bir komut dosyası diline dönüştürme görevi verildi.

TC39, ECMAScript (genellikle Ek-ma-script olarak telaffuz edilir) adı verilen yeni bir komut dosyası dilini tanımlamak için bir standart oluşturan ECMA-262'yi ortaya çıkardı.

Bunu takiben, Uluslararası Standardizasyon Örgütü ve Uluslararası Elektroteknik Komisyonları (ISO/IEC) ECMAScript'i (ISO/IEC-16262) kabul etti.

JavaScript'e genel bakış

Aşağıdaki bölümün JavaScript koduna sağlam bir giriş sunduğunu unutmayın. Henüz aşina değilseniz, bu tamamen sorun değil. Gelecek eğitimde öğrenme fırsatınız olacak.

JavaScript'te bir değişken tanımlamak için var anahtar sözcüğünü kullanırsınız. Örneğin:

var x = 10;
var y = 20;

ES6, let anahtar sözcüğü ile değişken bildirmek için yeni bir yol ekledi:

let x = 10;
let y = 20;

var ve let arasında farklar vardır. Ve değişkenleri bildirmek için let anahtar sözcüğünü kullanmak iyi bir uygulamadır.

Bir fonksiyon bildirmek için function anahtar sözcüğünü kullanırsınız. Aşağıdaki örnek, iki argümanın toplamını hesaplayan bir fonksiyon tanımlar:

function add( a, b ) {
   return a + b;
}

add() fonksiyonunu çağırmak için aşağıdaki syntax'i kullanırsınız:

let result = add(x, y);

Sonucu web tarayıcısının konsol penceresine veya terminaline (node.js durumunda) günlüğe kaydetmek için console.log() işlevini kullanırsınız:

console.log(result);

Şimdi, çıktıda 30 değerini görmelisiniz.

JavaScript size if-else ve switch deyimleri gibi koşul deyimleri sağlar. Örneğin:

let a = 20, 
    b = 30;

function divide(a, b) {
    if(b == 0) {
       throw 'Division by zero';
    }
    return a / b;
}

divide() fonksiyonunda, de-numerator'ın (b) sıfır olup olmadığını kontrol ederiz. Eğer evet ise, bir istisna atarız. Aksi takdirde, a / b sonucunu döndürürüz.

Bir dizi bildirmek için aşağıdaki sözdizimini kullanırsınız:

let items = [];

Başlangıç elemanlarını içeren bir dizi bildirmek için, bu elemanları köşeli parantez içinde belirtirsiniz:

let items = [1, 2, 3];

items dizisindeki item sayısına length özelliği aracılığıyla erişebilirsiniz:

console.log(items.length); // 3

items array öğeleri üzerinde loop için for döngüsü ifadesini aşağıdaki gibi kullanırsınız:

for(let i = 0; i < items.length; i++) {
    console.log(items[i]);
}

Alternatif olarak ES6'daki for...of döngüsünü kullanabilirsiniz:

for(let item of items) {
    console.log(item);
}

JavaScript, gelecek eğitimlerde keşfedeceğiniz zengin özelliklere sahip, gelişen bir dildir.

Bu eğitimde JavaScript'in ne olduğunu öğrendiniz ve JavaScript diline genel bir bakış kazandınız.

Github JS Eğitimleri

Kaynak